feat: cookie settings page (HL-1077) (#2616)

City-of-Helsinki · Dec 20, 2023 · 173eb3b · 173eb3b
1 parent de401d7
commit 173eb3b
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 18 deletions.
diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -431,7 +431,8 @@
     "accessibilityStatement": "Accessibility statement",
     "aboutTheService": "About the service",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/en/administration/information/information/accessibility",
-    "aboutTheServiceLink": "https://www.hel.fi/en/business-and-work/employers/helsinki-benefit-for-employers"
+    "aboutTheServiceLink": "https://www.hel.fi/en/business-and-work/employers/helsinki-benefit-for-employers",
+    "cookieSettings": "Cookie settings"
   },
   "notifications": {
     "applicationSubmitted": {
@@ -617,7 +618,8 @@
     "createApplication": "Helsinki benefit - Application - Create",
     "editApplication": "Helsinki benefit - Application - Edit",
     "viewApplication": "Helsinki benefit - Application - View",
-    "accessibilityStatement": "Helsinki benefit - Accessibility statement"
+    "accessibilityStatement": "Helsinki benefit - Accessibility statement",
+    "cookieSettings": "Helsinki benefit - Cookie settings"
   },
   "accessibilityStatement": {
     "h1": "Accessibility statement",

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -431,7 +431,8 @@
     "accessibilityStatement": "Saavutettavuusseloste",
     "aboutTheService": "Tietoa palvelusta",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/fi/kaupunki-ja-hallinto/tietoa-helsingista/tietoa-hel-fista/saavutettavuus/saavutettavuusselosteet",
-    "aboutTheServiceLink": "https://www.hel.fi/fi/yritykset-ja-tyo/tyonantajat/taloudelliset-tuet/tyonantajan-helsinki-lisa"
+    "aboutTheServiceLink": "https://www.hel.fi/fi/yritykset-ja-tyo/tyonantajat/taloudelliset-tuet/tyonantajan-helsinki-lisa",
+    "cookieSettings": "Evästeasetukset"
   },
   "notifications": {
     "applicationSubmitted": {
@@ -617,7 +618,8 @@
     "createApplication": "Helsinki-lisä - Hakemus - Luo uusi",
     "editApplication": "Helsinki-lisä - Hakemus - Muokkaa hakemusta",
     "viewApplication": "Helsinki-lisä - Hakemus - Tarkastele hakemusta",
-    "accessibilityStatement": "Helsinki-lisä - Saavutettavuusseloste"
+    "accessibilityStatement": "Helsinki-lisä - Saavutettavuusseloste",
+    "cookieSettings": "Helsinki-lisä - Evästeasetukset"
   },
   "accessibilityStatement": {
     "h1": "Saavutettavuusseloste",

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -431,7 +431,8 @@
     "accessibilityStatement": "Tillgänglighetsutlåtande",
     "aboutTheService": "Information om tjänsten",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/sv/stad-och-forvaltning/information/information/tillganglighet",
-    "aboutTheServiceLink": "https://www.hel.fi/sv/foretag-och-arbete/arbetsgivare/arbetsgivarens-helsingforstillagg"
+    "aboutTheServiceLink": "https://www.hel.fi/sv/foretag-och-arbete/arbetsgivare/arbetsgivarens-helsingforstillagg",
+    "cookieSettings": "Cookie -inställningar"
   },
   "notifications": {
     "applicationSubmitted": {
@@ -617,7 +618,8 @@
     "createApplication": "Helsingforstillägg - Ansökan - Skapa",
     "editApplication": "Helsingforstillägg - Ansökan - Redigera",
     "viewApplication": "Helsingforstillägg - Ansökan - Granska",
-    "accessibilityStatement": "Helsingforstillägg - Tillgänglighetsförklaring"
+    "accessibilityStatement": "Helsingforstillägg - Tillgänglighetsförklaring",
+    "cookieSettings": "Helsingforstillägg - Cookie -inställningar"
   },
   "accessibilityStatement": {
     "h1": "Tillgänglighetsutlåtande",

diff --git a/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx b/frontend/benefit/applicant/src/components/cookieConsent/CookieConsent.tsx
@@ -4,12 +4,12 @@ import {
 } from 'benefit/applicant/constants';
 import useLocale from 'benefit/applicant/hooks/useLocale';
 import { BackendEndpoint } from 'benefit-shared/backend-api/backend-api';
-import { CookieModal } from 'hds-react';
+import { CookieModal, CookiePage } from 'hds-react';
 import { useRouter } from 'next/router';
 import React from 'react';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 
-const CookieConsent: React.FC = () => {
+const CookieConsent: React.FC<{ asPage?: boolean }> = ({ asPage = false }) => {
   const locale = useLocale();
   const router = useRouter();
   const { axios } = useBackendAPI();
@@ -84,7 +84,11 @@ const CookieConsent: React.FC = () => {
     focusTargetSelector: '#main_content',
   };
 
-  return <CookieModal contentSource={contentSource} />;
+  return asPage ? (
+    <CookiePage contentSource={contentSource} />
+  ) : (
+    <CookieModal contentSource={contentSource} />
+  );
 };
 
 export default CookieConsent;
diff --git a/frontend/benefit/applicant/src/components/footer/Footer.tsx b/frontend/benefit/applicant/src/components/footer/Footer.tsx
@@ -23,6 +23,11 @@ const FooterSection: React.FC = () => {
             href={`/${locale}/accessibility-statement`}
             label={t('common:footer.accessibilityStatement')}
           />
+          <Footer.Item
+            as="a"
+            href={`/${locale}/cookie-settings`}
+            label={t('common:footer.cookieSettings')}
+          />
           <Footer.Item
             as="a"
             rel="noopener noreferrer"

diff --git a/frontend/benefit/applicant/src/components/layout/Layout.tsx b/frontend/benefit/applicant/src/components/layout/Layout.tsx
@@ -40,8 +40,10 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
 
   const bgColor = selectBgColor(router.pathname);
 
-  const isAccessibilityStatement =
-    router.pathname === ROUTES.ACCESSIBILITY_STATEMENT;
+  const isTermsRoute = ![
+    ROUTES.ACCESSIBILITY_STATEMENT,
+    ROUTES.COOKIE_SETTINGS,
+  ].includes(router.pathname as ROUTES);
 
   React.useEffect(() => {
     if (IS_CLIENT) {
@@ -56,9 +58,7 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
   return (
     <$Main $backgroundColor={bgColor} {...rest}>
       <Header />
-      {isAuthenticated &&
-      !isAccessibilityStatement &&
-      !isTermsOfServiceApproved ? (
+      {isAuthenticated && isTermsRoute && !isTermsOfServiceApproved ? (
         <TermsOfService
           setIsTermsOfServiceApproved={setIsTermsOfServiceApproved}
         />

diff --git a/frontend/benefit/applicant/src/constants.ts b/frontend/benefit/applicant/src/constants.ts
@@ -13,6 +13,7 @@ export enum ROUTES {
   LOGIN = '/login',
   TERMS_OF_SERVICE = '/terms-of-service',
   ACCESSIBILITY_STATEMENT = '/accessibility-statement',
+  COOKIE_SETTINGS = '/cookie-settings',
 }
 
 export const MAX_DEMINIMIS_AID_TOTAL_AMOUNT = 200_000;

diff --git a/frontend/benefit/applicant/src/hooks/useUserQuery.ts b/frontend/benefit/applicant/src/hooks/useUserQuery.ts
@@ -12,12 +12,16 @@ import {
   setLocalStorageItem,
 } from 'shared/utils/localstorage.utils';
 
-import { LOCAL_STORAGE_KEYS } from '../constants';
+import { LOCAL_STORAGE_KEYS, ROUTES } from '../constants';
 
 // check that authentication is still alive in every 5 minutes
 const FIVE_MINUTES = 5 * 60 * 1000;
 
-const UNAUTHORIZER_ROUTES = new Set(['/login', '/accessibility-statement']);
+const UNAUTHORIZER_ROUTES = new Set([
+  ROUTES.LOGIN,
+  ROUTES.ACCESSIBILITY_STATEMENT,
+  ROUTES.COOKIE_SETTINGS,
+]);
 
 const useUserQuery = (
   queryKeys?: string | unknown[]
@@ -33,7 +37,7 @@ const useUserQuery = (
     if (logout) {
       void router.push(`${locale}/login?logout=true`);
     } else if (/40[13]/.test(error.message)) {
-      if (UNAUTHORIZER_ROUTES.has(router.route)) {
+      if (UNAUTHORIZER_ROUTES.has(router.route as ROUTES)) {
         return;
       }
       void router.push(`${locale}/login`);

diff --git a/frontend/benefit/applicant/src/pages/_app.tsx b/frontend/benefit/applicant/src/pages/_app.tsx
@@ -33,7 +33,9 @@ const App: React.FC<AppProps> = (appProps) => {
 
   const { t } = useTranslation();
 
-  const showCookieBanner = process.env.NEXT_PUBLIC_SHOW_COOKIE_BANNER === '1';
+  const showCookieBanner =
+    process.env.NEXT_PUBLIC_SHOW_COOKIE_BANNER === '1' &&
+    router.route !== ROUTES.COOKIE_SETTINGS;
 
   useEffect(() => {
     setAppLoaded();
@@ -50,6 +52,10 @@ const App: React.FC<AppProps> = (appProps) => {
         document.title = t('common:pageTitles.accessibilityStatement');
         break;
 
+      case ROUTES.COOKIE_SETTINGS:
+        document.title = t('common:pageTitles.cookieSettings');
+        break;
+
       default:
         document.title = t('common:pageTitles.home');
         break;

diff --git a/frontend/benefit/applicant/src/pages/cookie-settings.tsx b/frontend/benefit/applicant/src/pages/cookie-settings.tsx
@@ -0,0 +1,28 @@
+import CookieConsent from 'benefit/applicant/components/cookieConsent/CookieConsent';
+import { useTranslation } from 'benefit/applicant/i18n';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import * as React from 'react';
+import Container from 'shared/components/container/Container';
+import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
+
+const CookieSettings: NextPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>{t('common:pageTitles.cookieSettings')}</title>
+      </Head>
+
+      <Container>
+        <CookieConsent asPage />
+      </Container>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps =
+  getServerSideTranslations('common');
+
+export default CookieSettings;