AKR:YKI(Frontend): Take the updated Cookie banner into use [deploy]

Opetushallitus · Nov 28, 2023 · c408d77 · c408d77
1 parent b92ad7c
commit c408d77
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 28 deletions.
diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json
@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }
diff --git a/frontend/packages/akr/public/i18n/en-GB/translation.json b/frontend/packages/akr/public/i18n/en-GB/translation.json
@@ -447,10 +447,10 @@
       },
       "homepage": {
         "cookieBanner": {
-          "buttonAriaLabel": "Accept cookies",
-          "buttonText": "Accept",
+          "buttonAriaLabel": "Close the notification about cookies",
+          "buttonText": "Close",
           "description": "This web site uses mandatory cookies to be functional.",
-          "title": "Accept cookies"
+          "title": "Information about cookies"
         },
         "description": "The Finnish National Agency for Education maintains a register of authorised translators. You can use the search engine to find an authorised translator or several either by language pair, name, or municipality of residence. You can use the search form to leave a contact request to the translators you have selected. If there is a malfunction in the register, contact us by email: [email protected]",
         "filters": {

diff --git a/frontend/packages/akr/public/i18n/fi-FI/translation.json b/frontend/packages/akr/public/i18n/fi-FI/translation.json
@@ -457,10 +457,10 @@
       },
       "homepage": {
         "cookieBanner": {
-          "buttonAriaLabel": "Hyväksy evästeet",
-          "buttonText": "Hyväksy",
+          "buttonAriaLabel": "Sulje evästetiedot",
+          "buttonText": "Sulje",
           "description": "Tämä sivusto käyttää välttämättömiä evästeitä toimiakseen.",
-          "title": "Hyväksy evästeet"
+          "title": "Tietoa sivuston evästeistä"
         },
         "description": "Opetushallitus ylläpitää auktorisoitujen kääntäjien rekisteriä. Hakukoneella voit hakea auktorisoitua kääntäjää/auktorisoituja kääntäjiä joko kieliparin, nimen tai asuinkunnan mukaan. Voit jättää yhteydenottopyynnön valitsemillesi kääntäjille alla. Jos rekisterissä on toimintahäiriö, ota yhteyttä Opetushallitukseen sähköpostitse: [email protected]",
         "filters": {

diff --git a/frontend/packages/akr/public/i18n/sv-SE/translation.json b/frontend/packages/akr/public/i18n/sv-SE/translation.json
@@ -447,10 +447,10 @@
       },
       "homepage": {
         "cookieBanner": {
-          "buttonAriaLabel": "Acceptera cookies",
-          "buttonText": "Acceptera",
-          "description": "Den här webbplatsen använder nödvändiga cookies för att fungera.",
-          "title": "Acceptera cookies"
+          "buttonAriaLabel": "Stäng informationrutan om kakor",
+          "buttonText": "Stäng",
+          "description": "Den här webbplatsen använder nödvändiga kakor för att fungera",
+          "title": "Information om kakor"
         },
         "description": "Utbildningsstyrelsen upprätthåller ett register över auktoriserade translatorer. Med sökmotorn kan du söka auktoriserade translatorer utgående från språkpar, på namn eller boendeort. Du kan lämna en kontaktförfrågan för de translatorer som du väljer nedan. I fall av ett funktionsfel i registret vänligen kontakta vår e-postadress: [email protected]",
         "filters": {

diff --git a/frontend/packages/akr/src/components/layouts/Header.tsx b/frontend/packages/akr/src/components/layouts/Header.tsx
@@ -1,10 +1,12 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { Link } from 'react-router-dom';
 import {
+  CookieBanner,
   LangSelector,
   OPHClerkLogo,
   OPHLogoViewer,
   SkipLink,
+  Text,
 } from 'shared/components';
 import { AppLanguage, Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
@@ -25,6 +27,9 @@ export const Header = (): JSX.Element => {
   const { t } = useAppTranslation({
     keyPrefix: 'akr.component.header',
   });
+  const { t: cookieTranslation } = useAppTranslation({
+    keyPrefix: 'akr.pages.homepage.cookieBanner',
+  });
   const translateCommon = useCommonTranslation();
   const [finnish, swedish, english] = getSupportedLangs();
 
@@ -90,6 +95,19 @@ export const Header = (): JSX.Element => {
           </div>
         </Toolbar>
       </AppBar>
+      {!isClerkUI && (
+        <CookieBanner
+          title={cookieTranslation('title')}
+          buttonText={cookieTranslation('buttonText')}
+          cookieTag="cookie-consent-akr"
+          buttonAriaLabel={cookieTranslation('buttonAriaLabel')}
+          path="/akr"
+        >
+          <Text data-testid="cookie-banner-description">
+            {cookieTranslation('description')}
+          </Text>
+        </CookieBanner>
+      )}
     </>
   );
 };
diff --git a/frontend/packages/akr/src/pages/PublicHomePage.tsx b/frontend/packages/akr/src/pages/PublicHomePage.tsx
@@ -1,9 +1,7 @@
 import { Box, Grid } from '@mui/material';
 import { FC, useEffect } from 'react';
-import { CookieBanner, Text } from 'shared/components';
 
 import { PublicTranslatorGrid } from 'components/publicTranslator/PublicTranslatorGrid';
-import { useAppTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { PublicUIViews } from 'enums/app';
 import { ContactRequestPage } from 'pages/ContactRequestPage';
@@ -12,9 +10,6 @@ import { publicUIViewSelector } from 'redux/selectors/publicUIView';
 
 export const PublicHomePage: FC = () => {
   const dispatch = useAppDispatch();
-  const { t } = useAppTranslation({
-    keyPrefix: 'akr.pages.homepage.cookieBanner',
-  });
 
   useEffect(() => {
     dispatch(loadPublicTranslators());
@@ -24,15 +19,6 @@ export const PublicHomePage: FC = () => {
 
   return (
     <Box className="public-homepage">
-      <CookieBanner
-        title={t('title')}
-        buttonText={t('buttonText')}
-        cookieTag="cookie-consent-akr"
-        buttonAriaLabel={t('buttonAriaLabel')}
-        path="/akr"
-      >
-        <Text data-testid="cookie-banner-description">{t('description')}</Text>
-      </CookieBanner>
       <Grid
         container
         rowSpacing={4}

diff --git a/frontend/packages/akr/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap b/frontend/packages/akr/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Header should render Header correctly 1`] = `
 Array [
   <a
-    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-tvmhkj-MuiTypography-root-MuiLink-root"
+    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-1vrl3mg-MuiTypography-root-MuiLink-root"
     href="#main-content"
     onBlur={[Function]}
     onFocus={[Function]}

diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/packages/yki/public/i18n/en-GB/public.json b/frontend/packages/yki/public/i18n/en-GB/public.json
@@ -1,6 +1,12 @@
 {
   "yki": {
     "component": {
+      "cookieBanner": {
+        "buttonAriaLabel": "Close the notification about cookies",
+        "buttonText": "Close",
+        "description": "This web site uses mandatory cookies to be functional.",
+        "title": "Information about cookies"
+      },
       "evaluationOrderForm": {
         "actionButtons": {
           "cancel": "Quit",

diff --git a/frontend/packages/yki/public/i18n/fi-FI/public.json b/frontend/packages/yki/public/i18n/fi-FI/public.json
@@ -1,6 +1,12 @@
 {
   "yki": {
     "component": {
+      "cookieBanner": {
+        "buttonAriaLabel": "Sulje evästetiedot",
+        "buttonText": "Sulje",
+        "description": "Tämä sivusto käyttää välttämättömiä evästeitä toimiakseen.",
+        "title": "Tietoa sivuston evästeistä"
+      },
       "evaluationOrderForm": {
         "actionButtons": {
           "cancel": "Keskeytä",

diff --git a/frontend/packages/yki/public/i18n/sv-SE/public.json b/frontend/packages/yki/public/i18n/sv-SE/public.json
@@ -1,6 +1,12 @@
 {
   "yki": {
     "component": {
+      "cookieBanner": {
+        "buttonAriaLabel": "Stäng informationrutan om kakor",
+        "buttonText": "Stäng",
+        "description": "Den här webbplatsen använder nödvändiga kakor för att fungera",
+        "title": "Information om kakor"
+      },
       "evaluationOrderForm": {
         "actionButtons": {
           "cancel": "Avbryt",

diff --git a/frontend/packages/yki/src/components/layouts/Header.tsx b/frontend/packages/yki/src/components/layouts/Header.tsx
@@ -1,6 +1,12 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { LangSelector, OPHLogoViewer, SkipLink } from 'shared/components';
+import {
+  CookieBanner,
+  LangSelector,
+  OPHLogoViewer,
+  SkipLink,
+  Text,
+} from 'shared/components';
 import { AppLanguage, Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
@@ -11,12 +17,16 @@ import {
   getCurrentLang,
   getSupportedLangs,
   useCommonTranslation,
+  usePublicTranslation,
 } from 'configs/i18n';
 import { AppRoutes } from 'enums/app';
 
 export const Header = (): JSX.Element => {
   const translateCommon = useCommonTranslation();
   const [finnish, swedish, english] = getSupportedLangs();
+  const { t } = usePublicTranslation({
+    keyPrefix: 'yki.component.cookieBanner',
+  });
 
   const langDict = new Map<string, AppLanguage>([
     [translateCommon('header.lang.fi'), finnish],
@@ -76,6 +86,15 @@ export const Header = (): JSX.Element => {
           </div>
         </Toolbar>
       </AppBar>
+      <CookieBanner
+        title={t('title')}
+        buttonText={t('buttonText')}
+        cookieTag="cookie-consent-yki"
+        buttonAriaLabel={t('buttonAriaLabel')}
+        path="/yki"
+      >
+        <Text data-testid="cookie-banner-description">{t('description')}</Text>
+      </CookieBanner>
     </>
   );
 };