SHARED:YKI:AKR:OTR:VKT(Frontend) cookie banner for VKT and OTR

Also z-index fixed in shared

frontend/packages/akr/package.json

@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].3"
+    "shared": "npm:@opetushallitus/[email protected].4"
   }
 }

frontend/packages/otr/package.json

@@ -25,6 +25,6 @@
     "otr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].3"
+    "shared": "npm:@opetushallitus/[email protected].4"
   }
 }

frontend/packages/otr/public/i18n/en-GB/translation.json

@@ -322,6 +322,12 @@
         "title": null
       },
       "homepage": {
+        "cookieBanner": {
+          "buttonAriaLabel": "Close the notification about cookies",
+          "buttonText": "Close",
+          "description": "This web site uses mandatory cookies to be functional.",
+          "title": "Information about cookies"
+        },
         "description": "The Finnish National Agency for Education maintains a register of legal interpreters, into which the legal interpreters approved by the Legal Interpreters’ Registration Board are entered. You can use the search engine to find an interpreter by name, language pair or operating area. The public register of legal interpreters contains only the details of those interpreters who have given the permission to publish their details online.",
         "filters": {
           "title": "Search for a legal interpreter"

frontend/packages/otr/public/i18n/fi-FI/translation.json

@@ -323,6 +323,12 @@
         "title": "Lisää oikeustulkki"
       },
       "homepage": {
+        "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ä"
+        },
         "description": "Opetushallitus ylläpitää oikeustulkkirekisteriä, johon Oikeustulkkirekisterilautakunnan hyväksymät oikeustulkit merkitään. Hakukoneella voit hakea tulkkia joko nimen, kieliparin tai toiminta-alueen mukaan. Julkinen oikeustulkkirekisteri sisältää tiedot vain niistä tulkeista, jotka ovat antaneet luvan tietojensa julkaisemiseen verkossa.",
         "filters": {
           "title": "Etsi oikeustulkkia"

frontend/packages/otr/public/i18n/sv-SE/translation.json

@@ -322,6 +322,12 @@
         "title": null
       },
       "homepage": {
+        "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"
+        },
         "description": "Utbildningsstyrelsen upprätthåller ett register över rättstolkar, där rättstolkar som har godkänts av Nämnden för registret över rättstolkar registreras. Med sökmotorn kan du söka en tolk på namn eller enligt språkpar eller verksamhetsområde. I det offentliga registret över rättstolkar finns endast uppgifter om de tolkar som har gett sitt samtycke till att deras uppgifter publiceras på webben.",
         "filters": {
           "title": "Sök en rättstolk"

frontend/packages/otr/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: 'otr.component.header',
   });
+  const { t: cookieTranslation } = useAppTranslation({
+    keyPrefix: 'otr.pages.homepage.cookieBanner',
+  });
   const translateCommon = useCommonTranslation();
   const [finnish, swedish, english] = getSupportedLangs();
 
@@ -92,6 +97,19 @@ export const Header = (): JSX.Element => {
           </div>
         </Toolbar>
       </AppBar>
+      {!isClerkUI && (
+        <CookieBanner
+          title={cookieTranslation('title')}
+          buttonText={cookieTranslation('buttonText')}
+          cookieTag="cookie-consent-otr"
+          buttonAriaLabel={cookieTranslation('buttonAriaLabel')}
+          path="/akr"
+        >
+          <Text data-testid="cookie-banner-description">
+            {cookieTranslation('description')}
+          </Text>
+        </CookieBanner>
+      )}
     </>
   );
 };

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.4] - 2024-01-23
+
+### Changed
+
+- Cookie banner z-index fix
+
 ## [1.10.3] - 2023-11-24
 
 ### Changed

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.3",
+  "version": "1.10.4",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx

@@ -56,7 +56,7 @@ export const CookieBanner: FC<PropsWithChildren<CookieBannerProps>> = ({
         maxWidth: '100%',
         margin: 0,
         borderRadius: 0,
-        zIndex: 2,
+        zIndex: 3,
       }}
     >
       <section

frontend/packages/vkt/package.json

@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].3"
+    "shared": "npm:@opetushallitus/[email protected].4"
   }
 }

frontend/packages/vkt/public/i18n/fi-FI/common.json

@@ -164,6 +164,12 @@
         "ariaLabel": "Valtiohallinnon kielitutkinnot (oph.fi), avaa uudessa välilehdessä",
         "link": "https://www.oph.fi/fi/koulutus-ja-tutkinnot/kieli-ja-kaantajatutkinnot/valtionhallinnon-kielitutkinnot-vkt"
       },
+      "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ä"
+      },
       "yes": "Kyllä"
     }
   }

frontend/packages/vkt/public/i18n/sv-SE/common.json

@@ -156,6 +156,12 @@
         "ariaLabel": "Språkexamina för statsförvaltningen (oph.fi), öppnas i en ny flik",
         "link": "https://www.oph.fi/sv/sprakexamina-statsforvaltningen-vkt"
       },
+      "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"
+      },
       "yes": "Ja"
     }
   }

frontend/packages/vkt/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';
@@ -99,6 +101,19 @@ export const Header = (): JSX.Element => {
           </div>
         </Toolbar>
       </AppBar>
+      {!isClerkUI && (
+        <CookieBanner
+          title={translateCommon('cookieBanner.title')}
+          buttonText={translateCommon('cookieBanner.buttonText')}
+          cookieTag="cookie-consent-vkt"
+          buttonAriaLabel={translateCommon('cookieBanner.buttonAriaLabel')}
+          path="/vkt"
+        >
+          <Text data-testid="cookie-banner-description">
+            {translateCommon('cookieBanner.description')}
+          </Text>
+        </CookieBanner>
+      )}
     </>
   );
 };

frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx

@@ -152,7 +152,7 @@ export const PublicEnrollmentControlButtons = ({
           loadPublicEnrollmentUpdate({
             enrollment,
             examEventId,
-          })
+          }),
         );
       } else {
         dispatch(

frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts

@@ -156,7 +156,7 @@ const publicEnrollmentSlice = createSlice({
       _action: PayloadAction<{
         enrollment: PublicEnrollment;
         examEventId: number;
-      }>
+      }>,
     ) {
       state.enrollmentSubmitStatus = APIResponseStatus.InProgress;
     },

frontend/packages/vkt/src/redux/sagas/publicEnrollment.ts

@@ -122,7 +122,7 @@ function* loadPublicEnrollmentUpdateSaga(
   action: PayloadAction<{
     enrollment: PublicEnrollment;
     examEventId: number;
-  }>
+  }>,
 ) {
   const { enrollment, examEventId } = action.payload;
 
@@ -142,7 +142,7 @@ function* loadPublicEnrollmentUpdateSaga(
     const response: AxiosResponse<PublicEnrollment> = yield call(
       axiosInstance.post,
       updateUrl,
-      body
+      body,
     );
     yield put(storePublicEnrollmentSave(response.data));
   } catch (error) {

frontend/packages/yki/package.json

@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].3"
+    "shared": "npm:@opetushallitus/[email protected].4"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"