Add page to manage cookie preferences

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+- Add page to manage cookie preferences [#1213](https://github.com/open-apparel-registry/open-apparel-registry/pull/1213)
+
 ### Changed
 
 ### Deprecated

src/app/src/components/CookiePreferencesText.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CookiePreferencesText = () => (
+    <div>
+        The Open Apparel Registry uses cookies to collect and analyze
+        site performance and usage. By clicking the Accept button, you
+        agree to allow us to place cookies and share information with
+        Google Analytics. For more information, please visit our{' '}
+        <a
+            href="https://info.openapparel.org/tos/"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            Terms and Conditions of Use and Privacy Policy.
+        </a>
+    </div>
+);
+
+export default CookiePreferencesText;

src/app/src/components/GDPRNotification.jsx

@@ -3,6 +3,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import Button from './Button';
 import ShowOnly from './ShowOnly';
 import COLOURS from '../util/COLOURS';
+import CookiePreferencesText from './CookiePreferencesText';
 
 import {
     userHasAcceptedOrRejectedGATracking,
@@ -57,22 +58,6 @@ export default class GDPRNotification extends Component {
             </div>
         );
 
-        const snackbarMessage = (
-            <div>
-                The Open Apparel Registry uses cookies to collect and analyze
-                site performance and usage. By clicking the Accept button, you
-                agree to allow us to place cookies and share information with
-                Google Analytics. For more information, please visit our{' '}
-                <a
-                    href="https://info.openapparel.org/tos/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Terms and Conditions of Use and Privacy Policy.
-                </a>
-            </div>
-        );
-
         return (
             <ShowOnly when={this.state.open}>
                 <Snackbar
@@ -83,7 +68,7 @@ export default class GDPRNotification extends Component {
                         horizontal: 'right',
                     }}
                     action={GDPRActions}
-                    message={snackbarMessage}
+                    message={<CookiePreferencesText />}
                 />
             </ShowOnly>
         );

src/app/src/components/UserCookiePreferences.jsx

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+
+import Divider from '@material-ui/core/Divider';
+
+import COLOURS from '../util/COLOURS';
+import Button from './Button';
+import CookiePreferencesText from './CookiePreferencesText';
+
+import {
+    userHasAcceptedGATracking,
+    acceptGATrackingAndStartTracking,
+    rejectGATracking,
+    clearGATrackingDecision,
+} from '../util/util.ga';
+
+const componentStyles = Object.freeze({
+    header: Object.freeze({
+        padding: '0 1rem',
+    }),
+    content: Object.freeze({
+        padding: '2rem 1rem',
+        display: 'flex',
+        flexDirection: 'column',
+    }),
+    buttons: Object.freeze({
+        padding: '2rem 0',
+        display: 'flex',
+        justifyContent: 'flex-end',
+    }),
+});
+
+class UserCookiePreferences extends Component {
+    state = {
+        accepted: userHasAcceptedGATracking(),
+    }
+
+    acceptGDPRAlert = () => this.setState(
+        state => Object.assign({}, state, { accepted: true }),
+        () => {
+            clearGATrackingDecision();
+            acceptGATrackingAndStartTracking();
+        },
+    );
+
+    rejectGDPRAlert = () => this.setState(
+        state => Object.assign({}, state, { accepted: false }),
+        () => {
+            clearGATrackingDecision();
+            rejectGATracking();
+        },
+    );
+
+    render() {
+        return (
+            <div className="margin-bottom">
+                <Divider />
+                <h3 style={componentStyles.header}>
+                    Cookie Preferences
+                </h3>
+                <div style={componentStyles.content}>
+                    <CookiePreferencesText />
+                    <div style={componentStyles.buttons}>
+                        {this.state.accepted && (
+                            <Button
+                                text="Reject"
+                                style={{ background: COLOURS.LIGHT_BLUE }}
+                                onClick={this.rejectGDPRAlert}
+                            />
+                        )}
+                        {!this.state.accepted && (
+                            <Button
+                                text="Accept"
+                                onClick={this.acceptGDPRAlert}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default UserCookiePreferences;

src/app/src/components/UserProfile.jsx

@@ -11,6 +11,7 @@ import Button from './Button';
 import FacilityListSummary from './FacilityListSummary';
 import UserProfileField from './UserProfileField';
 import UserAPITokens from './UserAPITokens';
+import UserCookiePreferences from './UserCookiePreferences';
 import BadgeVerified from './BadgeVerified';
 import ShowOnly from './ShowOnly';
 import RouteNotFound from './RouteNotFound';
@@ -243,6 +244,7 @@ class UserProfile extends Component {
                         {facilityLists}
                         {errorMessages}
                         {submitButton}
+                        <UserCookiePreferences />
                         {apiTokensSection}
                     </Grid>
                 </AppGrid>