From bfc92303840677a8ff92632b58a37206626f6737 Mon Sep 17 00:00:00 2001
From: "D. Ror." <imnasnainaec@gmail.com>
Date: Mon, 26 Aug 2024 14:35:26 -0400
Subject: [PATCH] Add cookie consent dialog and user setting (#3301)

"C is for cookie, that's good enough for me" - Cookie Monster
---
 docs/user_guide/docs/account.md               |  3 +-
 package-lock.json                             |  8 ++-
 package.json                                  |  3 +-
 public/index.html                             |  5 +-
 public/locales/en/translation.json            | 12 ++++
 src/components/App/index.tsx                  |  2 +
 src/components/Login/Redux/LoginActions.ts    | 12 ++--
 src/components/UserSettings/UserSettings.tsx  | 35 +++++++++++-
 .../UserSettings/tests/UserSettings.test.tsx  |  1 +
 src/cookies/CookieConsent.tsx                 | 10 ++++
 src/cookies/cc.css                            | 12 ++++
 src/cookies/useCookieConsent.tsx              | 55 +++++++++++++++++++
 src/types/Redux/analytics.ts                  | 12 +++-
 src/types/Redux/analyticsReduxTypes.ts        |  2 +
 14 files changed, 159 insertions(+), 13 deletions(-)
 create mode 100644 src/cookies/CookieConsent.tsx
 create mode 100644 src/cookies/cc.css
 create mode 100644 src/cookies/useCookieConsent.tsx

diff --git a/docs/user_guide/docs/account.md b/docs/user_guide/docs/account.md
index ec257c1210..4302cec44d 100644
--- a/docs/user_guide/docs/account.md
+++ b/docs/user_guide/docs/account.md
@@ -36,7 +36,8 @@ You can add or update your:
 - name;
 - phone number;
 - email address;
-- user-interface language.
+- user-interface language;
+- analytics consent.
 
 !!! note "Note"
 
diff --git a/package-lock.json b/package-lock.json
index ba646cd875..e12e7e32be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,8 @@
         "redux-thunk": "^2.4.0",
         "ts-key-enum": "^2.0.12",
         "uuid": "^9.0.1",
-        "validator": "^13.11.0"
+        "validator": "^13.11.0",
+        "vanilla-cookieconsent": "^3.0.1"
       },
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -25145,6 +25146,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/vanilla-cookieconsent": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vanilla-cookieconsent/-/vanilla-cookieconsent-3.0.1.tgz",
+      "integrity": "sha512-gqc4x7O9t1I4xWr7x6/jtQWPr4PZK26SmeA0iyTv1WyoECfAGnu5JEOExmMEP+5Fz66AT9OiCBO3GII4wDQHLw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 8182b7227e..9f9117af55 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,8 @@
     "redux-thunk": "^2.4.0",
     "ts-key-enum": "^2.0.12",
     "uuid": "^9.0.1",
-    "validator": "^13.11.0"
+    "validator": "^13.11.0",
+    "vanilla-cookieconsent": "^3.0.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
diff --git a/public/index.html b/public/index.html
index 6df0b190be..677b14bbd3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,9 +7,10 @@
     <meta name="theme-color" content="#000000" />
     <script src="%PUBLIC_URL%/scripts/release.js"></script>
     <script src="%PUBLIC_URL%/scripts/config.js"></script>
-    <!-- Add segment.com analytics as described (https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet) 
+    <!-- Add segment.com analytics per https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet
     with modifications to read writeKey from window.runtimeConfig if it exists. -->
-    <script>
+    <!-- Control analytics per https://cookieconsent.orestbida.com/advanced/manage-scripts.html#how-to-block-manage-a-script-tag -->
+    <script data-category="analytics" type="text/plain">
       !(function () {
         var writeKey;
         if (
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index f71d5c095c..3bb803e9c2 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -126,6 +126,18 @@
     }
   },
   "userSettings": {
+    "analyticsConsent": {
+      "button": "Change consent",
+      "consentModal": {
+        "acceptAllBtn": "Yes, allow analytics cookies",
+        "acceptNecessaryBtn": "No, reject analytics cookies",
+        "description": "The Combine stores basic info about your current session on your device. This info is necessary and isn't shared with anybody. The Combine also uses analytics cookies, which are only for us to fix bugs and compile anonymized statistics. Do you consent to our usage of analytics cookies?",
+        "title": "Cookies on The Combine"
+      },
+      "consentNo": "You have not consented to our use of analytics cookies.",
+      "consentYes": "You have consented to our use of analytics cookies.",
+      "title": "Analytics cookies"
+    },
     "contact": "Contact info",
     "glossSuggestion": "Gloss spelling suggestions",
     "glossSuggestionHint": "In Data Entry, give spelling suggestions for the Gloss being typed.",
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index d66ae6d3d1..7d906a381c 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -3,6 +3,7 @@ import { RouterProvider } from "react-router-dom";
 
 import AnnouncementBanner from "components/AnnouncementBanner";
 import UpperRightToastContainer from "components/Toast/UpperRightToastContainer";
+import CookieConsent from "cookies/CookieConsent";
 import router from "router/browserRouter";
 
 /**
@@ -12,6 +13,7 @@ export default function App(): ReactElement {
   return (
     <div className="App">
       <Suspense fallback={<div />}>
+        <CookieConsent />
         <AnnouncementBanner />
         <UpperRightToastContainer />
         <RouterProvider router={router} />
diff --git a/src/components/Login/Redux/LoginActions.ts b/src/components/Login/Redux/LoginActions.ts
index 3d6b3c1cec..519d003ca2 100644
--- a/src/components/Login/Redux/LoginActions.ts
+++ b/src/components/Login/Redux/LoginActions.ts
@@ -11,7 +11,7 @@ import {
   setSignupFailureAction,
   setSignupSuccessAction,
 } from "components/Login/Redux/LoginReducer";
-import { type StoreStateDispatch } from "rootRedux/types";
+import { type StoreState, type StoreStateDispatch } from "rootRedux/types";
 import router from "router/browserRouter";
 import { Path } from "types/path";
 import { newUser } from "types/user";
@@ -45,15 +45,17 @@ export function signupSuccess(): PayloadAction {
 // Dispatch Functions
 
 export function asyncLogIn(username: string, password: string) {
-  return async (dispatch: StoreStateDispatch) => {
+  return async (dispatch: StoreStateDispatch, getState: () => StoreState) => {
     dispatch(loginAttempt(username));
     await backend
       .authenticateUser(username, password)
       .then(async (user) => {
         dispatch(loginSuccess());
-        // hash the user name and use it in analytics.identify
-        const analyticsId = Hex.stringify(sha256(user.id));
-        analytics.identify(analyticsId);
+        if (getState().analyticsState.consent) {
+          // hash the user name and use it in analytics.identify
+          const analyticsId = Hex.stringify(sha256(user.id));
+          analytics.identify(analyticsId);
+        }
         router.navigate(Path.ProjScreen);
       })
       .catch((err) =>
diff --git a/src/components/UserSettings/UserSettings.tsx b/src/components/UserSettings/UserSettings.tsx
index 1b567c1ab6..ecf98a692c 100644
--- a/src/components/UserSettings/UserSettings.tsx
+++ b/src/components/UserSettings/UserSettings.tsx
@@ -13,6 +13,7 @@ import {
 import { enqueueSnackbar } from "notistack";
 import { FormEvent, Fragment, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { show } from "vanilla-cookieconsent";
 
 import { AutocompleteSetting, User } from "api/models";
 import { isEmailTaken, updateUser } from "backend";
@@ -20,7 +21,8 @@ import { getAvatar, getCurrentUser } from "backend/localStorage";
 import { asyncLoadSemanticDomains } from "components/Project/ProjectActions";
 import ClickableAvatar from "components/UserSettings/ClickableAvatar";
 import { updateLangFromUser } from "i18n";
-import { useAppDispatch } from "rootRedux/hooks";
+import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
+import { StoreState } from "rootRedux/types";
 import theme from "types/theme";
 import { uiWritingSystems } from "types/writingSystem";
 
@@ -30,6 +32,7 @@ import { uiWritingSystems } from "types/writingSystem";
 const punycode = require("punycode/");
 
 export enum UserSettingsIds {
+  ButtonChangeConsent = "user-settings-change-consent",
   ButtonSubmit = "user-settings-submit",
   FieldEmail = "user-settings-email",
   FieldName = "user-settings-name",
@@ -55,6 +58,10 @@ export function UserSettings(props: {
 }): ReactElement {
   const dispatch = useAppDispatch();
 
+  const analyticsConsent = useAppSelector(
+    (state: StoreState) => state.analyticsState.consent
+  );
+
   const [name, setName] = useState(props.user.name);
   const [phone, setPhone] = useState(props.user.phone);
   const [email, setEmail] = useState(props.user.email);
@@ -269,6 +276,32 @@ export function UserSettings(props: {
                 </Grid>
               </Grid>
 
+              <Grid item container spacing={2}>
+                <Grid item xs={12}>
+                  <Typography variant="h6">
+                    {t("userSettings.analyticsConsent.title")}
+                  </Typography>
+                </Grid>
+
+                <Grid item>
+                  <Typography>
+                    {t(
+                      analyticsConsent
+                        ? "userSettings.analyticsConsent.consentYes"
+                        : "userSettings.analyticsConsent.consentNo"
+                    )}
+                  </Typography>
+                  <Button
+                    data-testid={UserSettingsIds.ButtonChangeConsent}
+                    id={UserSettingsIds.ButtonChangeConsent}
+                    onClick={() => show(true)}
+                    variant="outlined"
+                  >
+                    {t("userSettings.analyticsConsent.button")}
+                  </Button>
+                </Grid>
+              </Grid>
+
               <Grid item container justifyContent="flex-end">
                 <Button
                   data-testid={UserSettingsIds.ButtonSubmit}
diff --git a/src/components/UserSettings/tests/UserSettings.test.tsx b/src/components/UserSettings/tests/UserSettings.test.tsx
index d04bf50b7c..4322113e6a 100644
--- a/src/components/UserSettings/tests/UserSettings.test.tsx
+++ b/src/components/UserSettings/tests/UserSettings.test.tsx
@@ -34,6 +34,7 @@ jest.mock("components/Project/ProjectActions", () => ({
 }));
 jest.mock("rootRedux/hooks", () => ({
   useAppDispatch: () => jest.fn(),
+  useAppSelector: () => jest.fn(),
 }));
 
 // Mock "i18n", else `thrown: "Error: Error: connect ECONNREFUSED ::1:80 [...]`
diff --git a/src/cookies/CookieConsent.tsx b/src/cookies/CookieConsent.tsx
new file mode 100644
index 0000000000..613f6f6ea7
--- /dev/null
+++ b/src/cookies/CookieConsent.tsx
@@ -0,0 +1,10 @@
+import { Fragment, type ReactElement } from "react";
+
+import useCookieConsent from "cookies/useCookieConsent";
+
+/** Empty component for running useCookieConsent within a <Suspense>,
+ * because it depends on i18n localization loading first. */
+export default function CookieConsent(): ReactElement {
+  useCookieConsent();
+  return <Fragment />;
+}
diff --git a/src/cookies/cc.css b/src/cookies/cc.css
new file mode 100644
index 0000000000..39a08b42bd
--- /dev/null
+++ b/src/cookies/cc.css
@@ -0,0 +1,12 @@
+#cc-main {
+    --primary: #1e88e5; /* themeColors.primary: blue[600] */
+    --dark-shade: #0d47a1; /* themeColors.darkShade: blue[900] */
+
+    --cc-btn-primary-bg: var(--primary);
+    --cc-btn-primary-border-color: var(--primary);
+    --cc-btn-primary-hover-bg: var(--dark-shade);
+    --cc-btn-primary-hover-border-color: var(--dark-shade);
+    --cc-font-family: "Noto Sans", "Open Sans", Roboto, Helvetica, Arial, sans-serif;
+    --cc-primary-color: var(--primary);
+    --cc-secondary-color: #000000
+}
diff --git a/src/cookies/useCookieConsent.tsx b/src/cookies/useCookieConsent.tsx
new file mode 100644
index 0000000000..5469409426
--- /dev/null
+++ b/src/cookies/useCookieConsent.tsx
@@ -0,0 +1,55 @@
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { eraseCookies, run } from "vanilla-cookieconsent";
+
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import "cookies/cc.css";
+
+import { useAppDispatch } from "rootRedux/hooks";
+import { updateConsent } from "types/Redux/analytics";
+
+export default function useCookieConsent(): void {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const updateAnalytics = useCallback(
+    (param: { cookie: CookieConsent.CookieValue }): void => {
+      console.info("C is for Cookie...");
+      dispatch(updateConsent());
+      if (!param.cookie.categories.includes("analytics")) {
+        eraseCookies(/^(?!cookie_consent$)/); // Only keep cookie with name "cookie_consent"
+      }
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    run({
+      categories: { analytics: {}, necessary: {} },
+      cookie: { expiresAfterDays: 365, name: "cookie_consent" },
+      guiOptions: { consentModal: { layout: "bar inline" } },
+      language: {
+        default: "i18n",
+        translations: {
+          i18n: {
+            consentModal: {
+              acceptAllBtn: t(
+                "userSettings.analyticsConsent.consentModal.acceptAllBtn"
+              ),
+              acceptNecessaryBtn: t(
+                "userSettings.analyticsConsent.consentModal.acceptNecessaryBtn"
+              ),
+              description: t(
+                "userSettings.analyticsConsent.consentModal.description"
+              ),
+              title: t("userSettings.analyticsConsent.consentModal.title"),
+            },
+            preferencesModal: { sections: [] },
+          },
+        },
+      },
+      onChange: updateAnalytics,
+      onFirstConsent: updateAnalytics,
+    }).then(() => dispatch(updateConsent()));
+  }, [dispatch, t, updateAnalytics]);
+}
diff --git a/src/types/Redux/analytics.ts b/src/types/Redux/analytics.ts
index d125bdf8d1..4ef7b5a481 100644
--- a/src/types/Redux/analytics.ts
+++ b/src/types/Redux/analytics.ts
@@ -1,4 +1,5 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { getUserPreferences } from "vanilla-cookieconsent";
 
 import { StoreActionTypes } from "rootRedux/actions";
 import { defaultState } from "types/Redux/analyticsReduxTypes";
@@ -8,7 +9,7 @@ const analyticsSlice = createSlice({
   initialState: defaultState,
   reducers: {
     changePageAction: (state, action) => {
-      if (action.payload !== state.currentPage) {
+      if (state.consent && action.payload !== state.currentPage) {
         analytics.track("navigate", {
           destination: action.payload,
           source: state.currentPage,
@@ -16,15 +17,22 @@ const analyticsSlice = createSlice({
       }
       state.currentPage = action.payload;
     },
+    updateConsentAction: (state) => {
+      state.consent = getUserPreferences().acceptType === "all";
+    },
   },
   extraReducers: (builder) =>
     builder.addCase(StoreActionTypes.RESET, () => defaultState),
 });
 
-const { changePageAction } = analyticsSlice.actions;
+const { changePageAction, updateConsentAction } = analyticsSlice.actions;
 
 export default analyticsSlice.reducer;
 
 export function changePage(newPage: string): PayloadAction {
   return changePageAction(newPage);
 }
+
+export function updateConsent(): PayloadAction {
+  return updateConsentAction();
+}
diff --git a/src/types/Redux/analyticsReduxTypes.ts b/src/types/Redux/analyticsReduxTypes.ts
index 036cd9b620..15143c9541 100644
--- a/src/types/Redux/analyticsReduxTypes.ts
+++ b/src/types/Redux/analyticsReduxTypes.ts
@@ -1,7 +1,9 @@
 export interface AnalyticsState {
+  consent: boolean;
   currentPage: string;
 }
 
 export const defaultState: AnalyticsState = {
+  consent: false,
   currentPage: "",
 };