Merge pull request #639 from Opetushallitus/feature/OPHKIOS-14

SHARED:YKI:AKR:OTR:VKT(Frontend) keksibanneri käyttöön sekä pari korjausta
Opetushallitus · Jan 30, 2024 · 7647de1 · 7647de1
2 parents 070d355 + afefeda
commit 7647de1
Show file tree

Hide file tree

Showing 21 changed files with 98 additions and 10 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].3"
+    "shared": "npm:@opetushallitus/[email protected].4"
   }
 }
diff --git a/frontend/packages/otr/package.json b/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"
   }
 }
diff --git a/frontend/packages/otr/public/i18n/en-GB/translation.json b/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"

diff --git a/frontend/packages/otr/public/i18n/fi-FI/translation.json b/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"

diff --git a/frontend/packages/otr/public/i18n/sv-SE/translation.json b/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"

diff --git a/frontend/packages/otr/src/components/layouts/Header.tsx b/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="/otr"
+        >
+          <Text data-testid="cookie-banner-description">
+            {cookieTranslation('description')}
+          </Text>
+        </CookieBanner>
+      )}
     </>
   );
 };
diff --git a/frontend/packages/shared/CHANGELOG.MD b/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

diff --git a/frontend/packages/shared/package.json b/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",

diff --git a/frontend/packages/shared/src/components/CookieBanner/CookieBanner.tsx b/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

diff --git a/frontend/packages/vkt/package.json b/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"
   }
 }
diff --git a/frontend/packages/vkt/public/i18n/fi-FI/common.json b/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ä"
     }
   }

diff --git a/frontend/packages/vkt/public/i18n/sv-SE/common.json b/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"
     }
   }

diff --git a/frontend/packages/vkt/src/components/layouts/Header.tsx b/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>
+      )}
     </>
   );
 };
diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentControlButtons.tsx
@@ -152,7 +152,7 @@ export const PublicEnrollmentControlButtons = ({
           loadPublicEnrollmentUpdate({
             enrollment,
             examEventId,
-          })
+          }),
         );
       } else {
         dispatch(

diff --git a/frontend/packages/vkt/src/redux/reducers/publicEnrollment.ts b/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;
     },

diff --git a/frontend/packages/vkt/src/redux/sagas/publicEnrollment.ts b/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) {

diff --git a/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts b/frontend/packages/vkt/src/tests/cypress/integration/public_enrollment.spec.ts
@@ -31,6 +31,7 @@ describe('Public enrollment', () => {
 
     it('should be able to fill out enrollment info', () => {
       cy.tick(3000);
+
       onPublicEnrollmentPage.expectEnrollmentPersonDetails(
         'Sukunimi:TestiläEtunimet:Tessa',
       );

diff --git a/frontend/packages/vkt/src/tests/cypress/integration/public_home_page.spec.ts b/frontend/packages/vkt/src/tests/cypress/integration/public_home_page.spec.ts
@@ -1,12 +1,19 @@
 import { ExamLanguage } from 'enums/app';
 import { onPublicHomePage } from 'tests/cypress/support/page-objects/publicHomePage';
 import { publicExamEvents11 } from 'tests/msw/fixtures/publicExamEvents11';
+import { onCookieBanner } from 'tests/cypress/support/page-objects/cookieBanner';
 
 describe('PublicHomePage', () => {
   beforeEach(() => {
     cy.openPublicHomePage();
   });
 
+  it('should close cookie banner', () => {
+    onCookieBanner.closeBanner();
+
+    onCookieBanner.getBanner().should('not.exist');
+  });
+
   it('should show the filtered amount of exam events in table pagination', () => {
     onPublicHomePage.expectFilteredExamEventsCount(publicExamEvents11.length);
 

diff --git a/frontend/packages/vkt/src/tests/cypress/support/commands.ts b/frontend/packages/vkt/src/tests/cypress/support/commands.ts
@@ -13,6 +13,7 @@ Cypress.Commands.add(
   (examEventId: number, persistedState = '{}') => {
     cy.window().then((win) => {
       win.sessionStorage.setItem('persist:root', persistedState);
+      cy.setCookie('cookie-consent-vkt', 'true');
     });
     cy.visit(
       RouteUtils.replaceExamEventId(

diff --git a/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts b/frontend/packages/vkt/src/tests/cypress/support/page-objects/cookieBanner.ts
@@ -0,0 +1,10 @@
+class CookieBanner {
+  getBanner() {
+    return cy.findByTestId('cookie-banner-accept-button');
+  }
+  closeBanner() {
+    this.getBanner().click();
+  }
+}
+
+export const onCookieBanner = new CookieBanner();
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].3"
+    "shared": "npm:@opetushallitus/[email protected].4"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"