diff --git a/.env.tet.example b/.env.tet.example index 01d69b9dbc..e187d93a19 100644 --- a/.env.tet.example +++ b/.env.tet.example @@ -60,3 +60,10 @@ NEXTJS_SENTRY_DEBUG=true NEXTJS_SENTRY_TRACING=true NEXT_PUBLIC_SENTRY_ATTACH_STACKTRACE= NEXT_PUBLIC_SENTRY_MAX_BREADCRUMBS= + +#Matomo +NEXT_PUBLIC_MATOMO_URL=//matomo.hel.fi/ +NEXT_PUBLIC_MATOMO_SITE_ID= +NEXT_PUBLIC_MATOMO_JS_TRACKER_FILE=matomo.js +NEXT_PUBLIC_MATOMO_PHP_TRACKER_FILE=matomo.php +NEXT_PUBLIC_MATOMO_ENABLED=false diff --git a/frontend/tet/youth/package.json b/frontend/tet/youth/package.json index a25b049e7e..1b2163f0f1 100644 --- a/frontend/tet/youth/package.json +++ b/frontend/tet/youth/package.json @@ -21,6 +21,7 @@ "@frontend/tet-shared": "*", "@sentry/browser": "^7.16.0", "@sentry/nextjs": "^7.16.0", + "@socialgouv/matomo-next": "^1.9.1", "axios": "^0.27.2", "dotenv": "^16.0.0", "hds-design-tokens": "^3.11.0", diff --git a/frontend/tet/youth/public/locales/en/common.json b/frontend/tet/youth/public/locales/en/common.json index 8c5a415a93..82a0774e2a 100644 --- a/frontend/tet/youth/public/locales/en/common.json +++ b/frontend/tet/youth/public/locales/en/common.json @@ -16,50 +16,50 @@ "pageNotFoundLabel": "Page was not found", "pageNotFoundContent": "Oh no, something went wrong. Click here to go back to the front page." }, - "frontPage": { - "heading": "Remember to find you TET job on time", - "search": "Search", - "fetch": "Search", - "advancedSearch": "Advanced search", - "boxTitle": "What is TET?", - "boxContent": "Work life practice, or TET, is part of school work for elementary school pupils. During TET, one can learn about different professions and get to experience working life in practice.", - "announceLinkTitle": "Announce a TET-position", - "announceLinkURL": "https://hel.fi", - "announceLinkContent": "Are you an employer and want to make a TET-advertisement? Click here for the employer's service.", - "askLinkTitle": "Any questions?", - "askLinkURL": "mailto:antti.varto@hel.fi", - "askLinkContent": "Do you have any questions or did you notice something strange about the service? Reach out!" - }, - "filters": { - "searchJobs": "Search for TET jobs", - "searchPlaceholder": "Type search word", - "workMethod": "What kind of TET?", - "workFeatures": "Characteristics of work", - "startDate": "Start date", - "endDate": "End date", - "language": "Choose language", - "clearFilters": "Clear filters", - "removeFilter": "Remove filter: {{filter}}", - "removeDateFilter": "Remove date filter", - "removeLanguageFilter": "Remove language filter", + "frontPage": { + "heading": "Remember to find you TET job on time", + "search": "Search", + "fetch": "Search", + "advancedSearch": "Advanced search", + "boxTitle": "What is TET?", + "boxContent": "Work life practice, or TET, is part of school work for elementary school pupils. During TET, one can learn about different professions and get to experience working life in practice.", + "announceLinkTitle": "Announce a TET-position", + "announceLinkURL": "https://hel.fi", + "announceLinkContent": "Are you an employer and want to make a TET-advertisement? Click here for the employer's service.", + "askLinkTitle": "Any questions?", + "askLinkURL": "mailto:antti.varto@hel.fi", + "askLinkContent": "Do you have any questions or did you notice something strange about the service? Reach out!" + }, + "filters": { + "searchJobs": "Search for TET jobs", + "searchPlaceholder": "Type search word", + "workMethod": "What kind of TET?", + "workFeatures": "Characteristics of work", + "startDate": "Start date", + "endDate": "End date", + "language": "Choose language", + "clearFilters": "Clear filters", + "removeFilter": "Remove filter: {{filter}}", + "removeDateFilter": "Remove date filter", + "removeLanguageFilter": "Remove language filter", "combobox": { "toggleButtonAriaLabel": "Show/hide options", "clearButtonAriaLabel": "Clear selection", "selectedItemRemoveButtonAriaLabel": "Deselect" } - }, - "postings": { - "searchResults_one": "{{count}} search result", - "searchResults_other": "{{count}} search results", - "readMore": "Read more", - "showMore": "Show more results", - "languages": "Language", - "noResultsText": "Your search did not match any TET-positions. Please try to clear your search.", - "fewResultsText": "Try to clear your search to find more TET-positions", - "noResultsLinks": "No events were found matching your search criteria. Try clicking on any of these:", - "fewResultsLinks": "Also try the following keywords:", - "resultsError": "An error occured while looking up TET jobs" - }, + }, + "postings": { + "searchResults_one": "{{count}} search result", + "searchResults_other": "{{count}} search results", + "readMore": "Read more", + "showMore": "Show more results", + "languages": "Language", + "noResultsText": "Your search did not match any TET-positions. Please try to clear your search.", + "fewResultsText": "Try to clear your search to find more TET-positions", + "noResultsLinks": "No events were found matching your search criteria. Try clicking on any of these:", + "fewResultsLinks": "Also try the following keywords:", + "resultsError": "An error occured while looking up TET jobs" + }, "footer": { "copyrightText": "City of Helsinki", "allRightsReservedText": "All rights reserved", @@ -67,13 +67,14 @@ "accessibilityStatementLink": "https://www.hel.fi/helsinki/en/administration/information/information/accessibility", "backToTop": "Back to top", "privacyPolicy": "Privacy policy", - "privacyPolicyPDF": "Opens a pdf-file", + "privacyPolicyPDF": "Opens a pdf-file", "privacyPolicyLink": "https://www.hel.fi/static/liitteet-2019/Kaupunginkanslia/Rekisteriselosteet/Kasko/Perusopetuksen opintohallinnon rekisteri.pdf", "feedback": "Give feedback", "feedbackLink": "https://www.hel.fi/helsinki/en/administration/participate/feedback", - "moreInfo": "More information", - "moreInfoLink": "https://nuorten.hel.fi/en/", - "newTab": "link opens in a new tab" + "moreInfo": "More information", + "moreInfoLink": "https://nuorten.hel.fi/en/", + "newTab": "link opens in a new tab", + "cookieSettings": "Cookie settings" }, "languages": { "fi": "Suomeksi", @@ -87,31 +88,34 @@ "text": "Try again later." } }, - "editor": { - "posting": { - "website": "Website", - "contactLanguageFi": "Finnish", - "contactLanguageSv": "Swedish", - "contactLanguageEn": "English" - } - }, - "postingTemplate": { - "spots": "TET positions", - "contact": "Contact information", - "description": "Description", - "share": "Share event", - "dateAndTime": "Date and time", - "location": "Place", - "languages": "Languages used in the workplace" - }, - "map": { - "readMore": "Read more", - "showList": "Show results in a list", - "showMap": "Show results on a map", + "editor": { + "posting": { + "website": "Website", + "contactLanguageFi": "Finnish", + "contactLanguageSv": "Swedish", + "contactLanguageEn": "English" + } + }, + "postingTemplate": { + "spots": "TET positions", + "contact": "Contact information", + "description": "Description", + "share": "Share event", + "dateAndTime": "Date and time", + "location": "Place", + "languages": "Languages used in the workplace" + }, + "map": { + "readMore": "Read more", + "showList": "Show results in a list", + "showMap": "Show results on a map", "helsinkiCity": "City of Helsinki" - }, - "accessibility": { - "eventsLoading": "TET jobs search is loading", - "eventsReady": "TET jobs search is ready" - } + }, + "accessibility": { + "eventsLoading": "TET jobs search is loading", + "eventsReady": "TET jobs search is ready" + }, + "actions": { + "back": "Back" + } } diff --git a/frontend/tet/youth/public/locales/fi/common.json b/frontend/tet/youth/public/locales/fi/common.json index b7dd40a107..7b2600c3d7 100644 --- a/frontend/tet/youth/public/locales/fi/common.json +++ b/frontend/tet/youth/public/locales/fi/common.json @@ -16,50 +16,50 @@ "pageNotFoundLabel": "Sivua ei löytynyt", "pageNotFoundContent": "Voi ei, jokin meni nyt valitettavasti vikaan. Kokeile mennä tästä takaisin etusivulle." }, - "frontPage": { - "heading": "Muistathan etsiä TET-paikkasi ajoissa", - "search": "Hae", - "fetch": "Hae", - "advancedSearch": "Tarkennettu haku", - "boxTitle": "Mikä TET-paikka?", - "boxContent": "Työelämään tutustuminen eli TET kuuluu jokaisen peruskoululaisen elämään. TET:n aikana pääsee näkemään, mitä erilaisissa ammateissa tehdään ja pääsee itse kokemaan työelämää.", - "announceLinkTitle": "Ilmoita TET-paikka", - "announceLinkURL": "https://hel.fi", - "announceLinkContent": "Oletko työnantaja ja haluat tehdä ilmoituksen avoimesta TET-paikasta? Siirry tästä työnantajan palveluun.", - "askLinkTitle": "Kysyttävää", - "askLinkURL": "mailto:antti.varto@hel.fi", - "askLinkContent": "Onko sinulla kysyttävää palvelusta tai huomasitko jotain outoa ilmoituksissa? Ota yhteyttä!" - }, - "filters": { - "searchJobs": "Hae TET-paikkoja", - "searchPlaceholder": "Kirjoita hakusana", - "workMethod": "Millainen TET?", - "workFeatures": "Työn ominaisuudet", - "startDate": "Alkamispäivä", - "endDate": "Päättymispäivä", - "language": "Valitse kieli", - "clearFilters": "Tyhjennä hakuehdot", - "removeFilter": "Poista suodatin: {{filter}}", - "removeDateFilter": "Poista päivämääräsuodatin", - "removeLanguageFilter": "Poista kielen suodatin", + "frontPage": { + "heading": "Muistathan etsiä TET-paikkasi ajoissa", + "search": "Hae", + "fetch": "Hae", + "advancedSearch": "Tarkennettu haku", + "boxTitle": "Mikä TET-paikka?", + "boxContent": "Työelämään tutustuminen eli TET kuuluu jokaisen peruskoululaisen elämään. TET:n aikana pääsee näkemään, mitä erilaisissa ammateissa tehdään ja pääsee itse kokemaan työelämää.", + "announceLinkTitle": "Ilmoita TET-paikka", + "announceLinkURL": "https://hel.fi", + "announceLinkContent": "Oletko työnantaja ja haluat tehdä ilmoituksen avoimesta TET-paikasta? Siirry tästä työnantajan palveluun.", + "askLinkTitle": "Kysyttävää", + "askLinkURL": "mailto:antti.varto@hel.fi", + "askLinkContent": "Onko sinulla kysyttävää palvelusta tai huomasitko jotain outoa ilmoituksissa? Ota yhteyttä!" + }, + "filters": { + "searchJobs": "Hae TET-paikkoja", + "searchPlaceholder": "Kirjoita hakusana", + "workMethod": "Millainen TET?", + "workFeatures": "Työn ominaisuudet", + "startDate": "Alkamispäivä", + "endDate": "Päättymispäivä", + "language": "Valitse kieli", + "clearFilters": "Tyhjennä hakuehdot", + "removeFilter": "Poista suodatin: {{filter}}", + "removeDateFilter": "Poista päivämääräsuodatin", + "removeLanguageFilter": "Poista kielen suodatin", "combobox": { "toggleButtonAriaLabel": "Näytä/piilota vaihtoehdot", "clearButtonAriaLabel": "Tyhjennä valinnat", "selectedItemRemoveButtonAriaLabel": "Poista valinta" } - }, - "postings": { - "searchResults_one": "{{count}} hakutulos", - "searchResults_other": "{{count}} hakutulosta", - "readMore": "Lue lisää", - "showMore": "Näytä lisää tuloksia", - "languages": "Kielisyys", - "noResultsText": "Haullasi ei löytynyt yhtään TET-paikkaa. Koitathan poistaa haun rajauksia.", - "fewResultsText": "Koita poistaa rajauksia löytääksesi enemmän TET-paikkoja", - "noResultsLinks": "Valitsemillasi hakuehdoilla ei löytynyt yhtään tapahtumaa. Kokeile vaikka klikkaamalla jotain näistä:", - "fewResultsLinks": "Kokeile myös seuraavilla rajauksilla / hakusanoilla:", - "resultsError": "TET-paikkojen haussa tapahtui virhe" - }, + }, + "postings": { + "searchResults_one": "{{count}} hakutulos", + "searchResults_other": "{{count}} hakutulosta", + "readMore": "Lue lisää", + "showMore": "Näytä lisää tuloksia", + "languages": "Kielisyys", + "noResultsText": "Haullasi ei löytynyt yhtään TET-paikkaa. Koitathan poistaa haun rajauksia.", + "fewResultsText": "Koita poistaa rajauksia löytääksesi enemmän TET-paikkoja", + "noResultsLinks": "Valitsemillasi hakuehdoilla ei löytynyt yhtään tapahtumaa. Kokeile vaikka klikkaamalla jotain näistä:", + "fewResultsLinks": "Kokeile myös seuraavilla rajauksilla / hakusanoilla:", + "resultsError": "TET-paikkojen haussa tapahtui virhe" + }, "footer": { "copyrightText": "Helsingin kaupunki", "allRightsReservedText": "Kaikki oikeudet pidätetään", @@ -67,13 +67,14 @@ "accessibilityStatementLink": "https://www.hel.fi/helsinki/fi/kaupunki-ja-hallinto/tietoa-helsingista/tietoa-hel-fista/saavutettavuus/saavutettavuusselosteet", "backToTop": "Takaisin ylös", "privacyPolicy": "Rekisteriseloste", - "privacyPolicyPDF": "Avaa pdf-tiedoston", + "privacyPolicyPDF": "Avaa pdf-tiedoston", "privacyPolicyLink": "https://www.hel.fi/static/liitteet-2019/Kaupunginkanslia/Rekisteriselosteet/Kasko/Perusopetuksen opintohallinnon rekisteri.pdf", "feedback": "Anna palautetta", "feedbackLink": "https://www.hel.fi/helsinki/fi/kaupunki-ja-hallinto/osallistu-ja-vaikuta/palaute", - "moreInfo": "Lisää tietoa", - "moreInfoLink": "https://nuorten.hel.fi/", - "newTab": "linkki avautuu uuteen välilehteen" + "moreInfo": "Lisää tietoa", + "moreInfoLink": "https://nuorten.hel.fi/", + "newTab": "linkki avautuu uuteen välilehteen", + "cookieSettings": "Evästeasetukset" }, "languages": { "fi": "Suomeksi", @@ -87,31 +88,34 @@ "text": " Yritä myöhemmin uudelleen" } }, - "editor": { - "posting": { - "website": "Verkkosivut", - "contactLanguageFi": "Suomi", - "contactLanguageSv": "Ruotsi", - "contactLanguageEn": "Englanti" - } - }, - "postingTemplate": { - "spots": "TET-paikkoja", - "contact": "Yhteystiedot", - "description": "Kuvaus", - "share": "Jaa tapahtuma", - "dateAndTime": "Päivä ja aika", - "location": "Paikka", - "languages": "TET-paikassa käytettävät kielet" - }, - "map": { - "readMore": "Lue lisää", - "showList": "Näytä tulokset listana", - "showMap": "Näytä tulokset kartalla", + "editor": { + "posting": { + "website": "Verkkosivut", + "contactLanguageFi": "Suomi", + "contactLanguageSv": "Ruotsi", + "contactLanguageEn": "Englanti" + } + }, + "postingTemplate": { + "spots": "TET-paikkoja", + "contact": "Yhteystiedot", + "description": "Kuvaus", + "share": "Jaa tapahtuma", + "dateAndTime": "Päivä ja aika", + "location": "Paikka", + "languages": "TET-paikassa käytettävät kielet" + }, + "map": { + "readMore": "Lue lisää", + "showList": "Näytä tulokset listana", + "showMap": "Näytä tulokset kartalla", "helsinkiCity": "Helsingin kaupunki" - }, - "accessibility": { - "eventsLoading": "TET-paikkoja haetaan", - "eventsReady": "TET-paikkojen haku valmistui" - } + }, + "accessibility": { + "eventsLoading": "TET-paikkoja haetaan", + "eventsReady": "TET-paikkojen haku valmistui" + }, + "actions": { + "back": "Takaisin" + } } diff --git a/frontend/tet/youth/public/locales/sv/common.json b/frontend/tet/youth/public/locales/sv/common.json index ce11c365f9..435aaa8cc2 100644 --- a/frontend/tet/youth/public/locales/sv/common.json +++ b/frontend/tet/youth/public/locales/sv/common.json @@ -16,50 +16,50 @@ "pageNotFoundLabel": "Sidan kunde inte hittas", "pageNotFoundContent": "Äsch, något gick fel. Pröva med att gå tillbaka till framsidan här" }, - "frontPage": { - "heading": "Kom ihåg att söka PRAO-plats i tid", - "search": "Sök", - "fetch": "Ansök", - "advancedSearch": "Detaljerad sökning", - "boxTitle": "Vad är PRAO?", - "boxContent": "Arbetslivspraktik, eller PRAO, är en del av skolan för grundskoleelever. Under PRAO kan man lära sig om olika yrken och få uppleva arbetslivet i praktiken.", - "announceLinkTitle": "Meddela en PRAO-platsannonsering", - "announceLinkURL": "https://hel.fi", - "announceLinkContent": "Är du arbetsgivare och vill anmäla en ledig tjänst inom TET- platsannonsering? Gå till den arbetsgivartjänst här.", - "askLinkTitle": "Frågorna?", - "askLinkURL": "mailto:antti.varto@hel.fi", - "askLinkContent": "Har du några frågor om tjänsten eller märkte du något konstigt i annonserna? Ta kontakt!" - }, - "filters": { - "searchJobs": "Sök efter PRAO-platser", - "searchPlaceholder": "Uppge sökord", - "workMethod": "Vilken sort PRAO?", - "workFeatures": "Arbetets karaktär", - "startDate": "Startdatum", - "endDate": "Slutdatum", - "language": "Välj språk", - "clearFilters": "Töm sökkriterier", - "removeFilter": "Ta borrt sökkrit: {{filter}}", - "removeDateFilter": "Ta borrt datumsökkrit", - "removeLanguageFilter": "Ta borrt språksökkrit", + "frontPage": { + "heading": "Kom ihåg att söka PRAO-plats i tid", + "search": "Sök", + "fetch": "Ansök", + "advancedSearch": "Detaljerad sökning", + "boxTitle": "Vad är PRAO?", + "boxContent": "Arbetslivspraktik, eller PRAO, är en del av skolan för grundskoleelever. Under PRAO kan man lära sig om olika yrken och få uppleva arbetslivet i praktiken.", + "announceLinkTitle": "Meddela en PRAO-platsannonsering", + "announceLinkURL": "https://hel.fi", + "announceLinkContent": "Är du arbetsgivare och vill anmäla en ledig tjänst inom TET- platsannonsering? Gå till den arbetsgivartjänst här.", + "askLinkTitle": "Frågorna?", + "askLinkURL": "mailto:antti.varto@hel.fi", + "askLinkContent": "Har du några frågor om tjänsten eller märkte du något konstigt i annonserna? Ta kontakt!" + }, + "filters": { + "searchJobs": "Sök efter PRAO-platser", + "searchPlaceholder": "Uppge sökord", + "workMethod": "Vilken sort PRAO?", + "workFeatures": "Arbetets karaktär", + "startDate": "Startdatum", + "endDate": "Slutdatum", + "language": "Välj språk", + "clearFilters": "Töm sökkriterier", + "removeFilter": "Ta borrt sökkrit: {{filter}}", + "removeDateFilter": "Ta borrt datumsökkrit", + "removeLanguageFilter": "Ta borrt språksökkrit", "combobox": { "toggleButtonAriaLabel": "Visa/dölj alternativ", "clearButtonAriaLabel": "Rensa valen", "selectedItemRemoveButtonAriaLabel": "Ta bort valet" } - }, - "postings": { - "searchResults_one": "{{count}} sökresultat", - "searchResults_other": "{{count}} sökresultat", - "readMore": "Läs mer", - "showMore": "Visa fler resultat", - "languages": "Språk", - "noResultsText": "Din sökning matchade inte några PRAO-platser. Försök att begränsa dina sökord.", - "fewResultsText": "Försök att rensa sökningen för att hitta fler PRAO-platser", - "noResultsLinks": "Inga händelser hittades som matchade dina sökkriterier. Testa att klicka på någon av dessa:", - "fewResultsLinks": "Också prova följande sökord:", - "resultsError": "Ett fel uppstod under PRAO-platser sökningen" - }, + }, + "postings": { + "searchResults_one": "{{count}} sökresultat", + "searchResults_other": "{{count}} sökresultat", + "readMore": "Läs mer", + "showMore": "Visa fler resultat", + "languages": "Språk", + "noResultsText": "Din sökning matchade inte några PRAO-platser. Försök att begränsa dina sökord.", + "fewResultsText": "Försök att rensa sökningen för att hitta fler PRAO-platser", + "noResultsLinks": "Inga händelser hittades som matchade dina sökkriterier. Testa att klicka på någon av dessa:", + "fewResultsLinks": "Också prova följande sökord:", + "resultsError": "Ett fel uppstod under PRAO-platser sökningen" + }, "footer": { "copyrightText": "Helsingfors stad", "allRightsReservedText": "Med ensamrätt", @@ -67,13 +67,14 @@ "accessibilityStatementLink": "https://www.hel.fi/helsinki/sv/stad-och-forvaltning/information/information/tillganglighet", "backToTop": "Tillbaka till toppen", "privacyPolicy": "Registerbeskrivning", - "privacyPolicyPDF": "Öppnar en pdf-fil", + "privacyPolicyPDF": "Öppnar en pdf-fil", "privacyPolicyLink": "https://www.hel.fi/static/liitteet-2019/Kaupunginkanslia/Rekisteriselosteet/Kasko/Register för administration av grundläggande utbildning.pdf", "feedback": "Ge feedback", "feedbackLink": "https://www.hel.fi/helsinki/sv/stad-och-forvaltning/delta/feedback", - "moreInfo": "Mer information", - "moreInfoLink": "https://nuorten.hel.fi/sv/", - "newTab": "länken öppnas i en ny flik" + "moreInfo": "Mer information", + "moreInfoLink": "https://nuorten.hel.fi/sv/", + "newTab": "länken öppnas i en ny flik", + "cookieSettings": "Cookie -inställningar" }, "languages": { "fi": "Suomeksi", @@ -87,31 +88,34 @@ "text": "Försök igen senare." } }, - "editor": { - "posting": { - "website": "Hemsida", - "contactLanguageFi": "Finska", - "contactLanguageSv": "Svenska", - "contactLanguageEn": "Engelska" - } - }, - "postingTemplate": { - "spots": "PRAO-platser", - "contact": "Kontaktuppgifter", - "description": "Beskrivning", - "share": "Dela händelse", - "dateAndTime": "Datum och tid", - "location": "Plats", - "languages": "Språk som används på PRAO-platsen" - }, - "map": { - "readMore": "Läs mer", - "showList": "visa resultat i en lista", - "showMap": "Visa resultat på en karta", + "editor": { + "posting": { + "website": "Hemsida", + "contactLanguageFi": "Finska", + "contactLanguageSv": "Svenska", + "contactLanguageEn": "Engelska" + } + }, + "postingTemplate": { + "spots": "PRAO-platser", + "contact": "Kontaktuppgifter", + "description": "Beskrivning", + "share": "Dela händelse", + "dateAndTime": "Datum och tid", + "location": "Plats", + "languages": "Språk som används på PRAO-platsen" + }, + "map": { + "readMore": "Läs mer", + "showList": "visa resultat i en lista", + "showMap": "Visa resultat på en karta", "helsinkiCity": "Helsingfors stad" - }, - "accessibility": { - "eventsLoading": "Sök efter PRAO-platser laddar", - "eventsReady": "Sök efter PRAO-platser är redo" - } + }, + "accessibility": { + "eventsLoading": "Sök efter PRAO-platser laddar", + "eventsReady": "Sök efter PRAO-platser är redo" + }, + "actions": { + "back": "Tillbaka" + } } diff --git a/frontend/tet/youth/src/components/cookieConsent/CookieConsent.tsx b/frontend/tet/youth/src/components/cookieConsent/CookieConsent.tsx new file mode 100644 index 0000000000..075dd565f8 --- /dev/null +++ b/frontend/tet/youth/src/components/cookieConsent/CookieConsent.tsx @@ -0,0 +1,79 @@ +import { Button, Container, ContentSource, CookieModal, CookiePage } from 'hds-react'; +import { useRouter } from 'next/router'; +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import useLocale from 'shared/hooks/useLocale'; +import { createAxios } from 'tet/youth/backend-api/backend-api'; + +import useCookieConsent from './useCookieConsent'; + +export enum SUPPORTED_LANGUAGES { + FI = 'fi', + SV = 'sv', + EN = 'en', +} + +const CookieConsent: React.FC<{ asPage?: boolean }> = ({ asPage = false }) => { + const { t } = useTranslation(); + const locale = useLocale(); + const router = useRouter(); + const [mounted, setMounted] = useState(false); + + const { pathname, asPath, query } = router; + + const axios = createAxios(); + + useEffect(() => { + setMounted(true); + }, []); + + const onLanguageChange = (newLanguage: SUPPORTED_LANGUAGES): void => { + void axios.get('/', { + params: { lang: newLanguage }, + }); + + void router.push({ pathname, query }, asPath, { + locale: newLanguage, + }); + }; + + const { onAllConsentsGiven, onConsentsParsed } = useCookieConsent(); + + const contentSource: ContentSource = { + siteName: t('common:appName'), + currentLanguage: locale, + optionalCookies: { + groups: [ + { + commonGroup: 'statistics', + cookies: [{ commonCookie: 'matomo' }], + }, + ], + }, + language: { onLanguageChange }, + onAllConsentsGiven, + onConsentsParsed, + focusTargetSelector: '#main_content', + }; + + const handleBack = (): void => { + void router.back(); + }; + + if (!mounted) { + return null; + } + + return asPage ? ( + <> + + + + + + ) : ( + + ); +}; + +export default CookieConsent; diff --git a/frontend/tet/youth/src/components/cookieConsent/useCookieConsent.ts b/frontend/tet/youth/src/components/cookieConsent/useCookieConsent.ts new file mode 100644 index 0000000000..52e58ba383 --- /dev/null +++ b/frontend/tet/youth/src/components/cookieConsent/useCookieConsent.ts @@ -0,0 +1,44 @@ +const MATOMO_ENABLED = process.env.NEXT_PUBLIC_MATOMO_ENABLED; + +type UseCookieConsentHook = () => { + onAllConsentsGiven: (consents: { matomo: boolean }) => void; + onConsentsParsed: (consents: { matomo: boolean }) => void; +}; + +const useCookieConsent: UseCookieConsentHook = () => { + // eslint-disable-next-line unicorn/consistent-function-scoping + const onAllConsentsGiven = (consents: { matomo: boolean }): void => { + if (MATOMO_ENABLED === 'true' && consents.matomo) { + // start tracking + // eslint-disable-next-line no-underscore-dangle, unicorn/no-array-push-push + window._paq.push(['setConsentGiven']); + // eslint-disable-next-line no-underscore-dangle, unicorn/no-array-push-push + window._paq.push(['setCookieConsentGiven']); + } + }; + + // eslint-disable-next-line unicorn/consistent-function-scoping + const onConsentsParsed = (consents: { matomo: boolean }): void => { + if (MATOMO_ENABLED === 'true') { + if (consents.matomo === undefined) { + // tell matomo to wait for consent: + // eslint-disable-next-line no-underscore-dangle, unicorn/no-array-push-push + window._paq.push(['requireConsent']); + // eslint-disable-next-line no-underscore-dangle, unicorn/no-array-push-push + window._paq.push(['requireCookieConsent']); + // eslint-disable-next-line sonarjs/no-collapsible-if + } else if (consents.matomo === false) { + // tell matomo to forget conset + // eslint-disable-next-line no-underscore-dangle, unicorn/no-lonely-if + if (window && window._paq) { + // eslint-disable-next-line no-underscore-dangle, unicorn/no-array-push-push + window._paq.push(['forgetConsentGiven']); + } + } + } + }; + + return { onAllConsentsGiven, onConsentsParsed }; +}; + +export default useCookieConsent; diff --git a/frontend/tet/youth/src/components/footer/Footer.tsx b/frontend/tet/youth/src/components/footer/Footer.tsx index 12dab12f58..d101c861ac 100644 --- a/frontend/tet/youth/src/components/footer/Footer.tsx +++ b/frontend/tet/youth/src/components/footer/Footer.tsx @@ -3,8 +3,6 @@ import { useTranslation } from 'next-i18next'; import React from 'react'; import useLocale from 'shared/hooks/useLocale'; -// import { $FooterWrapper } from './Footer.sc'; - const FooterSection: React.FC = () => { const { t } = useTranslation(); const newTabText = t('common:footer.newTab'); @@ -24,10 +22,14 @@ const FooterSection: React.FC = () => { copyrightHolder={t('common:footer.copyrightText')} copyrightText={t('common:footer.allRightsReservedText')} backToTopLabel={t('common:footer.backToTop')} - logo={ - - } + logo={} > + import('../components/cookieConsent/CookieConsent'), { ssr: false }); // Need to import Footer dynamically because currently HDS has issues with SSR const DynamicFooter = dynamic(() => import('tet/youth/components/footer/Footer'), { ssr: false, }); -const App: React.FC = (appProps) => ( - <> -