chore: add cookie consent page, fix matomo tracking

Author: mikkojamG

src/constants.ts

@@ -23,6 +23,7 @@ export enum ROUTES {
   ACCESSIBILITY_STATEMENT = '/accessibility-statement',
   ATTENDANCE_LIST = '/registrations/:registrationId/attendance-list',
   CALLBACK = '/callback',
+  COOKIES = '/cookies',
   CREATE_EVENT = '/events/create',
   CREATE_IMAGE = '/administration/images/create',
   CREATE_KEYWORD = '/administration/keywords/create',

src/domain/app/footer/Footer.tsx

@@ -148,6 +148,11 @@ const Footer: React.FC = () => {
               onClick={goToPage(getLocalePath(ROUTES.ACCESSIBILITY_STATEMENT))}
               label={t('navigation.tabs.accessibilityStatement')}
             />
+            <HdsFooter.Link
+              href={getLocalePath(ROUTES.COOKIES)}
+              onClick={goToPage(getLocalePath(ROUTES.COOKIES))}
+              label={t('navigation.tabs.cookies')}
+            />
           </HdsFooter.Utilities>
           <HdsFooter.Base
             copyrightHolder={t('footer.copyrightHolder')}

src/domain/app/hooks/useCookieConsentSettings.ts

@@ -1,15 +1,35 @@
-import { CookieConsentReactProps } from 'hds-react';
+import { CookieConsentChangeEvent, CookieConsentReactProps } from 'hds-react';
 
 import { PAGE_HEADER_ID } from '../../../constants';
 import useLocale from '../../../hooks/useLocale';
 import siteSettings from './data/siteSettings.json';
 
+export enum COOKIE_CONSENT_GROUP {
+  Tunnistamo = 'tunnistamo',
+  UserInputs = 'userInputs',
+  Shared = 'shared',
+  Statistics = 'statistics',
+}
+
 const useCookieConsentSettings = () => {
   const locale = useLocale();
 
   const cookieConsentProps: CookieConsentReactProps = {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange: () => {},
+    onChange: (changeEvent: CookieConsentChangeEvent) => {
+      const { acceptedGroups } = changeEvent;
+
+      const hasStatisticsConsent =
+        acceptedGroups.indexOf(COOKIE_CONSENT_GROUP.Statistics) > -1;
+
+      if (hasStatisticsConsent) {
+        //  start tracking
+        window._paq.push(['setConsentGiven']);
+        window._paq.push(['setCookieConsentGiven']);
+      } else {
+        // tell matomo to forget conset
+        window._paq.push(['forgetConsentGiven']);
+      }
+    },
     siteSettings: siteSettings,
     options: { focusTargetSelector: `#${PAGE_HEADER_ID}`, language: locale },
   };

src/domain/app/i18n/en.json

@@ -99,24 +99,6 @@
       "clearUsers": "Clear selected users",
       "toggleButtonAriaLabel": "Menu"
     },
-    "cookieConsent": {
-      "eventForm": {
-        "description": "The cookie required to save the event form data",
-        "name": "Event form cookie"
-      },
-      "expiration": {
-        "session": "Session"
-      },
-      "registrationForm": {
-        "description": "The cookie required to save the registration form data",
-        "name": "Registration form cookie"
-      },
-      "signupForm": {
-        "description": "The cookie required to save the signup form data",
-        "name": "Signup form cookie"
-      },
-      "siteName": "Linked Events"
-    },
     "dateSelector": {
       "buttonToggle": "Choose dates",
       "placeholderEndDate": "Ends d.m.yyyy",
@@ -1638,6 +1620,7 @@
       "accessibilityStatement": "Accessibility Statement",
       "admin": "Admin",
       "events": "My events",
+      "cookies": "Cookie settings",
       "help": "Support",
       "registrations": "Registration",
       "dataProtection": "Data Protection",

src/domain/app/i18n/fi.json

@@ -99,24 +99,6 @@
       "clearUsers": "Tyhjennä valitut käyttäjät",
       "toggleButtonAriaLabel": "Valikko"
     },
-    "cookieConsent": {
-      "eventForm": {
-        "description": "Tapahtumalomakkeen tietojen säilymiseksi vaadittu eväste",
-        "name": "Tapahtumalomakkeen eväste"
-      },
-      "expiration": {
-        "session": "Istunto"
-      },
-      "registrationForm": {
-        "description": "Ilmoittautumislomakkeen tietojen säilymiseksi vaadittu eväste",
-        "name": "Ilmoittautumislomakkeen eväste"
-      },
-      "signupForm": {
-        "description": "Osallistumislomakkeen tietojen säilymiseksi vaadittu eväste",
-        "name": "Osallistumislomakkeen eväste"
-      },
-      "siteName": "Linked Events"
-    },
     "dateSelector": {
       "buttonToggle": "Valitse päivämäärät",
       "placeholderEndDate": "Loppuu p.k.vvvv",
@@ -1638,6 +1620,7 @@
       "accessibilityStatement": "Saavutettavuusseloste",
       "admin": "Hallinta",
       "events": "Omat tapahtumat",
+      "cookies": "Evästeasetukset",
       "help": "Tuki",
       "registrations": "Ilmoittautuminen",
       "dataProtection": "Tietosuoja",

src/domain/app/i18n/sv.json

@@ -99,24 +99,6 @@
       "clearUsers": "Ta bort valda användare",
       "toggleButtonAriaLabel": "Menyn"
     },
-    "cookieConsent": {
-      "eventForm": {
-        "description": "Den cookie som krävs för att spara data från evenemangsformuläret",
-        "name": "Cookie för evenemangsformulär"
-      },
-      "expiration": {
-        "session": "Session"
-      },
-      "registrationForm": {
-        "description": "Den cookie som krävs för att spara uppgifterna i registreringsformuläret",
-        "name": "Cookie för registreringsformulär"
-      },
-      "signupForm": {
-        "description": "Den cookie som krävs för att spara uppgifterna i deltagaresformuläret",
-        "name": "Cookie för deltagaresformulär"
-      },
-      "siteName": "Linked Events"
-    },
     "dateSelector": {
       "buttonToggle": "Välj datum",
       "placeholderEndDate": "Avslutar d.m.åååå",
@@ -1638,6 +1620,7 @@
       "accessibilityStatement": "Tillgänglighetsutlåtande",
       "admin": "Admin",
       "events": "Mina evenemangen",
+      "cookies": "Kakinställningar",
       "help": "Stöd",
       "registrations": "Registrering",
       "dataProtection": "Dataskydd",

src/domain/app/layout/pageWrapper/PageWrapper.tsx

@@ -7,6 +7,7 @@ import { useLocation } from 'react-router';
 
 import useMatomo from '../../../../common/components/matomoTracker/hooks/useMatomo';
 import upperCaseFirstLetter from '../../../../utils/upperCaseFirstLetter';
+import { COOKIE_CONSENT_GROUP } from '../../hooks/useCookieConsentSettings';
 import styles from './pageWrapper.module.scss';
 
 export interface PageWrapperProps {
@@ -35,7 +36,7 @@ const PageWrapper: React.FC<React.PropsWithChildren<PageWrapperProps>> = ({
   title = 'appName',
   titleText,
 }) => {
-  const statisticsConsent = useGroupConsent('statistics');
+  const statisticsConsent = useGroupConsent(COOKIE_CONSENT_GROUP.Statistics);
   const { t } = useTranslation();
   const location = useLocation();
   const { trackPageView } = useMatomo();

src/domain/app/routes/localeRoutes/LocaleRoutes.tsx

@@ -1,3 +1,4 @@
+import { CookieSettingsPage } from 'hds-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Navigate, Route, Routes, useParams } from 'react-router';
@@ -91,6 +92,7 @@ const LocaleRoutes: React.FC = () => {
             path={ROUTES.ACCESSIBILITY_STATEMENT}
             element={<AccessibilityStatementPage />}
           />
+          <Route path={ROUTES.COOKIES} element={<CookieSettingsPage />} />
           <Route path={ROUTES.CREATE_EVENT} element={<CreateEventPage />} />
           <Route path={ROUTES.EVENT_SAVED} element={<EventSavedPage />} />
           <Route path={ROUTES.EDIT_EVENT} element={<EditEventPage />} />