AKR:YKI(Frontend): Take new CookieBanner and LangSelector into use [d…

…eploy]
Opetushallitus · Nov 8, 2023 · 734bc7a · 734bc7a
1 parent 1aa57de
commit 734bc7a
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 85 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].0"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }
diff --git a/frontend/packages/akr/src/components/common/AkrLangSelector.tsx b/frontend/packages/akr/src/components/common/AkrLangSelector.tsx
@@ -0,0 +1,32 @@
+import { LangSelector } from 'shared/components';
+import { AppLanguage } from 'shared/enums';
+
+import {
+  changeLang,
+  getCurrentLang,
+  getSupportedLangs,
+  useAppTranslation,
+} from 'configs/i18n';
+
+export const AkrLangSelector = ({ usage }: { usage: 'dialog' | 'header' }) => {
+  const { t } = useAppTranslation({
+    keyPrefix: 'akr.component.header',
+  });
+  const [finnish, swedish, english] = getSupportedLangs();
+
+  const langDict = new Map<string, AppLanguage>([
+    [t('lang.fi'), finnish],
+    [t('lang.sv'), swedish],
+    [t('lang.en'), english],
+  ]);
+
+  return (
+    <LangSelector
+      usage={usage}
+      changeLang={changeLang}
+      getCurrentLang={getCurrentLang}
+      langDict={langDict}
+      langSelectorAriaLabel={t('accessibility.langSelectorAriaLabel')}
+    />
+  );
+};
diff --git a/frontend/packages/akr/src/components/layouts/Header.tsx b/frontend/packages/akr/src/components/layouts/Header.tsx
@@ -1,20 +1,14 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { Link } from 'react-router-dom';
-import {
-  LangSelector,
-  OPHClerkLogo,
-  OPHLogoViewer,
-  SkipLink,
-} from 'shared/components';
-import { AppLanguage, Direction } from 'shared/enums';
+import { OPHClerkLogo, OPHLogoViewer, SkipLink } from 'shared/components';
+import { Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
+import { AkrLangSelector } from 'components/common/AkrLangSelector';
 import { ClerkNavTabs } from 'components/layouts//clerkHeader/ClerkNavTabs';
 import { ClerkHeaderButtons } from 'components/layouts/clerkHeader/ClerkHeaderButtons';
 import {
-  changeLang,
   getCurrentLang,
-  getSupportedLangs,
   useAppTranslation,
   useCommonTranslation,
 } from 'configs/i18n';
@@ -26,13 +20,6 @@ export const Header = (): JSX.Element => {
     keyPrefix: 'akr.component.header',
   });
   const translateCommon = useCommonTranslation();
-  const [finnish, swedish, english] = getSupportedLangs();
-
-  const langDict = new Map<string, AppLanguage>([
-    [t('lang.fi'), finnish],
-    [t('lang.sv'), swedish],
-    [t('lang.en'), english],
-  ]);
 
   const { isPhone } = useWindowProperties();
   const { isAuthenticated, isClerkUI } = useAuthentication();
@@ -46,12 +33,7 @@ export const Header = (): JSX.Element => {
       <AppBar className="header" position="static">
         {isPhone && (
           <Toolbar className="header__toolbar header__toolbar__mobile-lang-select">
-            <LangSelector
-              changeLang={changeLang}
-              getCurrentLang={getCurrentLang}
-              langDict={langDict}
-              langSelectorAriaLabel={t('accessibility.langSelectorAriaLabel')}
-            />
+            <AkrLangSelector usage="header" />
           </Toolbar>
         )}
         <Toolbar className="header__toolbar">
@@ -79,14 +61,7 @@ export const Header = (): JSX.Element => {
           </div>
           <div className="header__right">
             {isAuthenticated && <ClerkHeaderButtons />}
-            {!isPhone && (
-              <LangSelector
-                changeLang={changeLang}
-                getCurrentLang={getCurrentLang}
-                langDict={langDict}
-                langSelectorAriaLabel={t('accessibility.langSelectorAriaLabel')}
-              />
-            )}
+            {!isPhone && <AkrLangSelector usage="header" />}
           </div>
         </Toolbar>
       </AppBar>

diff --git a/frontend/packages/akr/src/pages/PublicHomePage.tsx b/frontend/packages/akr/src/pages/PublicHomePage.tsx
@@ -2,6 +2,7 @@ import { Box, Grid } from '@mui/material';
 import { FC, useEffect } from 'react';
 import { CookieBanner, Text } from 'shared/components';
 
+import { AkrLangSelector } from 'components/common/AkrLangSelector';
 import { PublicTranslatorGrid } from 'components/publicTranslator/PublicTranslatorGrid';
 import { useAppTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
@@ -30,6 +31,7 @@ export const PublicHomePage: FC = () => {
         cookieTag="cookie-consent-akr"
         buttonAriaLabel={t('buttonAriaLabel')}
         path="/akr"
+        languageSelector={<AkrLangSelector usage="dialog" />}
       >
         <Text data-testid="cookie-banner-description">{t('description')}</Text>
       </CookieBanner>

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]}
@@ -51,11 +51,11 @@ Array [
       >
         <nav
           aria-label="accessibility.langSelectorAriaLabel"
-          className="lang-selector"
+          className="lang-selector__header"
         >
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall lang-selector__icon css-ptiqhd-MuiSvgIcon-root"
+            className="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall lang-selector__header__icon css-ptiqhd-MuiSvgIcon-root"
             data-testid="LanguageOutlinedIcon"
             focusable="false"
             viewBox="0 0 24 24"

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].0"
+    "shared": "npm:@opetushallitus/[email protected].2"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/packages/yki/public/i18n/en-GB/common.json b/frontend/packages/yki/public/i18n/en-GB/common.json
@@ -24,6 +24,18 @@
         }
       },
       "contactEmail": "[email protected]",
+      "cookieBanner": {
+        "acceptButton": {
+          "ariaLabel": "Accept cookies",
+          "label": "Accept"
+        },
+        "description": "This web site uses mandatory cookies to be functional.",
+        "readMoreLink": {
+          "href": "https://TODO.FIXME",
+          "label": "Read more about cookies."
+        },
+        "title": "Accept cookies"
+      },
       "dates": {
         "dateTimeFormat": "l [at] HH:mm"
       },

diff --git a/frontend/packages/yki/public/i18n/fi-FI/common.json b/frontend/packages/yki/public/i18n/fi-FI/common.json
@@ -24,6 +24,18 @@
         }
       },
       "contactEmail": "[email protected]",
+      "cookieBanner": {
+        "acceptButton": {
+          "ariaLabel": "Hyväksy evästeet",
+          "label": "Hyväksy"
+        },
+        "description": "Tämä sivusto käyttää välttämättömiä evästeitä toimiakseen.",
+        "readMoreLink": {
+          "href": "https://TODO.FIXME",
+          "label": "Lue lisätietoa evästeistä."
+        },
+        "title": "Hyväksy evästeet"
+      },
       "dates": {
         "dateTimeFormat": "l [klo] HH.mm"
       },

diff --git a/frontend/packages/yki/public/i18n/sv-SE/common.json b/frontend/packages/yki/public/i18n/sv-SE/common.json
@@ -24,6 +24,18 @@
         }
       },
       "contactEmail": "[email protected]",
+      "cookieBanner": {
+        "acceptButton": {
+          "ariaLabel": "Acceptera cookies",
+          "label": "Acceptera"
+        },
+        "description": "Den här webbplatsen använder nödvändiga cookies för att fungera.",
+        "readMoreLink": {
+          "href": "https://TODO.FIXME",
+          "label": "Läs mer om cookies."
+        },
+        "title": "Acceptera cookies"
+      },
       "dates": {
         "dateTimeFormat": "l [kl.] HH:mm"
       },

diff --git a/frontend/packages/yki/src/components/elements/YkiLangSelector.tsx b/frontend/packages/yki/src/components/elements/YkiLangSelector.tsx
@@ -0,0 +1,32 @@
+import { LangSelector } from 'shared/components';
+import { AppLanguage } from 'shared/enums';
+
+import {
+  changeLang,
+  getCurrentLang,
+  getSupportedLangs,
+  useCommonTranslation,
+} from 'configs/i18n';
+
+export const YkiLangSelector = ({ usage }: { usage: 'dialog' | 'header' }) => {
+  const translateCommon = useCommonTranslation();
+  const [finnish, swedish, english] = getSupportedLangs();
+
+  const langDict = new Map<string, AppLanguage>([
+    [translateCommon('header.lang.fi'), finnish],
+    [translateCommon('header.lang.sv'), swedish],
+    [translateCommon('header.lang.en'), english],
+  ]);
+
+  return (
+    <LangSelector
+      usage={usage}
+      changeLang={changeLang}
+      getCurrentLang={getCurrentLang}
+      langDict={langDict}
+      langSelectorAriaLabel={translateCommon(
+        'header.accessibility.langSelectorAriaLabel'
+      )}
+    />
+  );
+};
diff --git a/frontend/packages/yki/src/components/layouts/Header.tsx b/frontend/packages/yki/src/components/layouts/Header.tsx
@@ -1,28 +1,17 @@
 import { AppBar, Toolbar } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { LangSelector, OPHLogoViewer, SkipLink } from 'shared/components';
-import { AppLanguage, Direction } from 'shared/enums';
+import { OPHLogoViewer, SkipLink } from 'shared/components';
+import { Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
+import { YkiLangSelector } from 'components/elements/YkiLangSelector';
 import { PublicNavTabs } from 'components/layouts/publicHeader/PublicNavTabs';
 import { SessionStateHeader } from 'components/layouts/SessionStateHeader';
-import {
-  changeLang,
-  getCurrentLang,
-  getSupportedLangs,
-  useCommonTranslation,
-} from 'configs/i18n';
+import { getCurrentLang, useCommonTranslation } from 'configs/i18n';
 import { AppRoutes } from 'enums/app';
 
 export const Header = (): JSX.Element => {
   const translateCommon = useCommonTranslation();
-  const [finnish, swedish, english] = getSupportedLangs();
-
-  const langDict = new Map<string, AppLanguage>([
-    [translateCommon('header.lang.fi'), finnish],
-    [translateCommon('header.lang.sv'), swedish],
-    [translateCommon('header.lang.en'), english],
-  ]);
 
   const logoRedirectURL = AppRoutes.Registration;
   const { isPhone } = useWindowProperties();
@@ -36,14 +25,7 @@ export const Header = (): JSX.Element => {
       <AppBar className="header" position="static">
         {isPhone && (
           <Toolbar className="header__toolbar header__toolbar__mobile-lang-select">
-            <LangSelector
-              changeLang={changeLang}
-              getCurrentLang={getCurrentLang}
-              langDict={langDict}
-              langSelectorAriaLabel={translateCommon(
-                'header.accessibility.langSelectorAriaLabel'
-              )}
-            />
+            <YkiLangSelector usage="header" />
           </Toolbar>
         )}
         <SessionStateHeader />
@@ -63,16 +45,7 @@ export const Header = (): JSX.Element => {
             <PublicNavTabs />
           </div>
           <div className="header__right">
-            {!isPhone && (
-              <LangSelector
-                changeLang={changeLang}
-                getCurrentLang={getCurrentLang}
-                langDict={langDict}
-                langSelectorAriaLabel={translateCommon(
-                  'header.accessibility.langSelectorAriaLabel'
-                )}
-              />
-            )}
+            {!isPhone && <YkiLangSelector usage="header" />}
           </div>
         </Toolbar>
       </AppBar>

diff --git a/frontend/packages/yki/src/routers/AppRouter.tsx b/frontend/packages/yki/src/routers/AppRouter.tsx
@@ -1,9 +1,17 @@
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { FC, useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Notifier, ScrollToTop } from 'shared/components';
+import {
+  CookieBanner,
+  Notifier,
+  ScrollToTop,
+  Text,
+  WebLink,
+} from 'shared/components';
 import { APIResponseStatus } from 'shared/enums';
 import { TitlePage } from 'shared/utils';
 
+import { YkiLangSelector } from 'components/elements/YkiLangSelector';
 import { Footer } from 'components/layouts/Footer';
 import { Header } from 'components/layouts/Header';
 import { useCommonTranslation } from 'configs/i18n';
@@ -46,6 +54,26 @@ export const AppRouter: FC = () => {
         <Header />
         <Notifier />
         <ScrollToTop />
+        <CookieBanner
+          languageSelector={<YkiLangSelector usage="dialog" />}
+          title={translateCommon('cookieBanner.title')}
+          buttonText={translateCommon('cookieBanner.acceptButton.label')}
+          cookieTag={'cookie-consent-yki'}
+          buttonAriaLabel={translateCommon(
+            'cookieBanner.acceptButton.ariaLabel'
+          )}
+          path={'/yki'}
+        >
+          <Text>
+            {translateCommon('cookieBanner.description')}
+            <br aria-hidden={true} />
+            <WebLink
+              href={translateCommon('cookieBanner.readMoreLink.href')}
+              label={translateCommon('cookieBanner.readMoreLink.label')}
+              endIcon={<OpenInNewIcon />}
+            />
+          </Text>
+        </CookieBanner>
         <main className="content" id="main-content">
           <div className="content__container">
             <Routes>

diff --git a/frontend/packages/yki/src/tests/cypress/support/commands.ts b/frontend/packages/yki/src/tests/cypress/support/commands.ts
@@ -1,12 +1,32 @@
+import Cookies from 'js-cookie';
+
 import { AppRoutes } from 'enums/app';
 
-Cypress.Commands.add('openPublicRegistrationPage', () => {
-  cy.visit(AppRoutes.Registration);
+const withCookieConsent = (acceptCookies: boolean) => ({
+  onBeforeLoad: () => {
+    Cookies.remove('cookie-consent-yki');
+    if (acceptCookies) {
+      Cookies.set('cookie-consent-yki', 'true');
+    }
+  },
 });
 
-Cypress.Commands.add('openEvaluationOrderPage', (id: number) => {
-  cy.visit(AppRoutes.ReassessmentOrder.replace(/:evaluationId/, `${id}`));
-});
+Cypress.Commands.add(
+  'openPublicRegistrationPage',
+  (acceptCookies: boolean = true) => {
+    cy.visit(AppRoutes.Registration, withCookieConsent(acceptCookies));
+  }
+);
+
+Cypress.Commands.add(
+  'openEvaluationOrderPage',
+  (id: number, acceptCookies: boolean = true) => {
+    cy.visit(
+      AppRoutes.ReassessmentOrder.replace(/:evaluationId/, `${id}`),
+      withCookieConsent(acceptCookies)
+    );
+  }
+);
 
 Cypress.Commands.add('isOnPage', (page: string) => {
   cy.url().should('include', page);