Merge pull request #631 from Alt-Org/liisa/chore/617-update-cookie-banner-and-legal-pages-guidelines

Liisa/chore/617 update cookie banner and legal pages guidelines

Author: davylis

frontend-next-migration/src/entities/PresentationPackages/model/data/cookiesSections.ts

@@ -3,6 +3,9 @@ import { createSection } from '../createSection';
 const i18nKeyPrefixes = [
     'policies',
     'cookies',
+    'cookies2',
+    'website',
+    'analytics',
     'interpretation',
     'type',
     'choices',

frontend-next-migration/src/entities/PresentationPackages/model/data/privacySections.ts

@@ -3,9 +3,14 @@ import { createSection } from '../createSection';
 const i18nKeyPrefixes = [
     'privacy',
     'interpretation',
+    'user',
     'collecting',
+    'testing',
     'analytics',
     'legal-basis',
+    'review',
+    'gameteam',
+    'datasubject',
     'data-retention',
     'rights',
     'security',

frontend-next-migration/src/features/CookieConsentV3/CookieConsentV3.module.scss

@@ -3,7 +3,8 @@
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
-    width: 780px;
+    width: 100%;
+    max-width: 800px;
     padding: 24px;
     background: var(--background);
     border: solid var(--black);
@@ -18,7 +19,9 @@
     box-sizing: border-box;
     box-shadow: 8px 8px 1px #000000;
     transition: height 0.3s ease-in-out;
-    height: 360px;
+    max-height: 90vh;
+    overflow-y: auto;
+
     @media (max-width: breakpoint(xs)) {
         height: 690px;
     }
@@ -84,20 +87,12 @@
     }
 }
 .cookieConsentContent {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 24px;
-}
-.alignVertically {
     display: flex;
     flex-direction: row;
-    align-items: center !important;
+    align-items: flex-start;
     justify-content: space-between;
-}
-
-.cookieText {
-    flex: 1;
+    gap: 24px;
+    width: 100%;
 }
 
 .cookieHeader {
@@ -107,21 +102,19 @@
     line-height: 1.2 !important;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
 }
-
-.cookieShortHeader {
-    color: var(--primary-color);
-    font: var(--font-sw-l);
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-}
+.alignVertically { display: flex; flex-direction: row; align-items: center !important; justify-content: space-between; } .cookieText { flex: 1; width: 100%; white-space: pre-line; overflow-wrap: break-word; word-break: break-word; }
+.cookieShortHeader { color: var(--primary-color); font: var(--font-sw-l); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
 
 .cookieConsentContentText {
+    flex: 1;
     font: var(--font-dm-m);
     color: white;
     line-height: 1.6 !important;
     letter-spacing: -0.01em;
     text-align: left;
-    width: 432px;
     margin-bottom: 16px;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .cookieImage {
@@ -174,33 +167,35 @@
 
 /* Responsive adjustments */
 @media (max-width: breakpoint(xs)) {
+
     .cookieConsentV2 {
         width: 90%;
+        padding: 16px;
+    }
+    .cookieConsentContentText {
+        flex-direction: column;
+        width: 100%;
+        height: auto;
+        line-height: 1.5 !important;
+        padding-left: 0;
+        text-align: center !important;
+        margin: 0 auto 16px auto;
     }
-
     button:not(.processButton) + button:not(.processButton) {
         margin-left: 0px;
         padding-top: 10px;
     }
 
     .cookieConsentContent {
         flex-direction: column;
-        width: 333px;
-        padding-right: 35px;
+        width: 100%;
     }
 
     .cookieHeader {
         font: var(--font-sw-l);
+        text-align: center;
     }
-
-    .cookieConsentContentText {
-        font: var(--font-dm-m);
-        width: 301px;
-        height: 224px;
-        line-height: 1.5;
-        padding-left: 8px;
-    }
-
+    
     .cookieImage {
         width: 164px;
         max-width: 164px;
@@ -226,20 +221,22 @@
 
     .cookieConsentContent {
         flex-direction: column;
-        width: 333px;
-        padding-right: 35px;
+        width: 100%;
+        padding: 0;
     }
 
     .cookieHeader {
         font: var(--font-sw-l);
+        text-align: center;
     }
 
     .cookieConsentContentText {
         font: var(--font-dm-m);
-        width: 301px;
-        height: 224px;
+        width: 100%;
+        height: auto;
         line-height: 1.5 !important;
         padding-left: 8px;
+        text-align: center !important;
     }
 
     .cookieImage {
@@ -253,4 +250,5 @@
     .declineButton {
         width: 100%;
     }
+    
 }

frontend-next-migration/src/features/CookieConsentV3/CookieConsentV3.tsx

@@ -1,4 +1,22 @@
 'use client';
+/**
+ * CookieConsentV3 – GDPR-compliant cookie consent banner for ALT Zone.
+ *
+ * This client-side component displays a cookie consent banner that:
+ * - Allows users to accept or decline cookies
+ * - Stores consent persistently in a cookie for 1 year
+ * - Supports minimized and expanded banner states
+ * - Localizes text using `react-i18next`
+ * - Links to Privacy Policy and Cookie Policy pages based on the current locale
+ *
+ * If cookie consent has already been handled, the component renders nothing.
+ *
+ * UI Behavior:
+ * - Minimized mode shows a short description and action buttons
+ * - Expanded mode shows full description and a character image
+ *
+ * @returns {JSX.Element | null} The cookie consent banner, or null if consent exists
+ */
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Image from 'next/image';
@@ -16,13 +34,20 @@ const CookieConsentV3: React.FC = () => {
     const [isMinimized, setIsMinimized] = useState(false);
     const [cookiesHandled, setCookiesHandled] = useState(false);
 
+    // Check if cookie consent is already present
     useEffect(() => {
         const consent = document.cookie.includes('AltZoneCookieConsent=');
         if (consent) {
             setCookiesHandled(true);
         }
     }, []);
 
+    /**
+     * Handles user action for cookie consent.
+     *
+     * @param action - 'accept' or 'decline'
+     * @returns void
+     */
     const handleEventCookies = (action: 'accept' | 'decline') => {
         const expirationDate = new Date();
         expirationDate.setFullYear(expirationDate.getFullYear() + 1);
@@ -32,22 +57,34 @@ const CookieConsentV3: React.FC = () => {
     };
 
     const descriptionParts = t('description').split(
-        /(tietosuojan|evästeiden|privacy|cookies|конфиденциальности|файлов cookie)/,
+        /(Tietosuojaseloste|evästekäytäntö|Privacy Policy|Cookie Policy|конфиденциальности|файлов cookie)/,
     );
     const shortDescriptionParts = t('shortDescription').split(
-        /(tietosuojan|evästeiden|privacy|cookies|конфиденциальности|файлов cookie)/,
+        /(Tietosuojaseloste|evästekäytäntö|Privacy Policy|Cookie Policy|конфиденциальности|файлов cookie)/,
     );
 
+    /**
+     * Returns a localized URL for privacy or cookie pages based on current language.
+     *
+     * @param base - 'privacy' or 'cookies'
+     * @returns {string} Localized URL
+     */
     const getLocalizedUrl = (base: string) => {
         const lang = i18n.language || 'en';
         if (base === 'privacy') return '/' + lang + '/privacy';
         if (base === 'cookies') return '/' + lang + '/cookies';
         return '/';
     };
 
+    /**
+     * Renders description text with links for Privacy Policy / Cookie Policy.
+     *
+     * @param parts - Array of strings from description split by policy keywords
+     * @returns JSX.Element[]
+     */
     const renderDescription = (descriptionParts: string[]) =>
         descriptionParts.map((part, index) => {
-            if (['tietosuojan', 'privacy', 'конфиденциальности'].includes(part)) {
+            if (['Tietosuojaseloste', 'Privacy Policy', 'конфиденциальности'].includes(part)) {
                 return (
                     <Link
                         key={index}
@@ -60,7 +97,7 @@ const CookieConsentV3: React.FC = () => {
                     </Link>
                 );
             }
-            if (['evästeiden', 'cookies', 'файлов cookie'].includes(part)) {
+            if (['evästekäytäntö', 'Cookie Policy', 'файлов cookie'].includes(part)) {
                 return (
                     <Link
                         key={index}

frontend-next-migration/src/shared/i18n/locales/en/cookieConsent.json

@@ -1,8 +1,9 @@
 {
-    "header": "USE OF COOKIES",
+    "header": "WE USE COOKIES",
     "shortHeader": "COOKIES",
-    "description": "This website uses cookies and local storage to improve user experience.\nIf you do not accept cookies, you may still use the website, but some features may be restricted.\nBy using our website, you accept our privacy policy and cookie usage.",
+    "description": "We use cookies and local storage to ensure the technical functionality of the website and to improve user experience. We also use analytics (Google Analytics) to monitor website usage and for educational purposes during school-based testing. Analytics data is statistical and is not used to identify individual users or for advertising.\n\nYou may accept all cookies or continue using the site without analytics cookies. In this case, some features may be limited.\n\nPrivacy Policy and Cookie Policy",
     "shortDescription": "Accept or decline the use of privacy and cookies.",
-    "declineButton": "Continue without accepting",
-    "acceptButton": "Accept"
+    "link": "Privacy Policy and Cookie Policy",
+    "declineButton": "Continue without analytics",
+    "acceptButton": "Accept all"
 }

frontend-next-migration/src/shared/i18n/locales/en/cookies.json

@@ -10,19 +10,31 @@
 
     "policies-nav-menu-title": "ALT Zone",
     "policies-label": "Cookies Policy for ALT Zone",
-    "policies-description": "Last updated: March 12, 2025",
+    "policies-description": "Last updated: February 16, 2026",
 
     "cookies-nav-menu-title": "Policy",
     "cookies-label": "Cookies Policy",
     "cookies-description": "This Cookies Policy explains what Cookies are and how We use them. You should read this policy so You can understand what type of cookies We use, or the information We collect using Cookies and how that information is used. This Cookies Policy has been created with the help of the <a href=\"https://www.freeprivacypolicy.com/free-privacy-policy-generator/\" target=\"_blank\">Cookies Policy Generator</a>.<br><br>Cookies do not typically contain any information that personally identifies a user, but personal information that we store about You may be linked to the information stored in and obtained from Cookies. For further information on how We use, store and keep your personal data secure, see our Privacy Policy.<br><br>We do not store sensitive personal information, such as mailing addresses, account passwords, etc. in the Cookies We use.",
 
+    "cookies2-nav-menu-title": "Cookies",
+    "cookies2-label": "Cookies",
+    "cookies2-description": "The ALT Zone website uses cookies and local storage to ensure technical functionality and improve user experience.<br><br>The use of cookies is based on user consent, and cookie preferences are stored.",
+
+    "website-nav-menu-title": "Data Collected",
+    "website-label": "Data Collected",
+    "website-description": "<h3>Website</h3>When using the ALT Zone website, the following data may be processed:<br><br>● Technical log data (e.g. browser type, device type, time of access)<br>● Aggregated usage statistics via Google Analytics<br>● Cookie and local storage data required for technical functionality and usability<br><br>Google Analytics is used solely for website development, usability improvement, and educational purposes. IP addresses are anonymized, and data is not used to identify individual users or for advertising purposes.",
+
+    "analytics-nav-menu-title": "Google Analytics",
+    "analytics-label": "Google Analytics",
+    "analytics-description": "Google Analytics is used for:<br><br>● General monitoring of website traffic and usage<br>● Website development and usability improvement<br>● Educational purposes during school-based testing, to demonstrate what types of statistical and technical data websites may collect<br><br>IP addresses are anonymized, and analytics data is not linked to user accounts or used for advertising or profiling.",
+
     "interpretation-nav-menu-title": "Interpretation",
     "interpretation-label": "Interpretation and Definitions",
-    "interpretation-description": "<h3>Interpretation</h3>Words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.<br><br><h3>Definitions</h3>For the purposes of this Cookies Policy:<br><br> ●<b>Company</b> (referred to as either 'the Company', 'We', 'Us' or 'Our' in this Cookies Policy) refers to Psyche's Royale Gaming ry, Laturinkatu 3, 08100 Lohja.<br> ●<b>Cookies</b> means small files that are placed on Your computer, mobile device or any other device by a website, containing details of your browsing history on that website among its many uses.<br> ●<b>Website</b> refers to ALT Zone, accessible from <https://altzone.fi><br> ●<b>Account</b> means a unique account created for You to access our Service or parts of our Service.<br> ●<b>You</b> means the individual accessing or using the Website, or a company, or any legal entity on behalf of which such individual is accessing or using the Website, as applicable.<br> ●<b>Usage Data</b> refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).",
+    "interpretation-description": "<h3>Interpretation</h3>Words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.<br><br><h3>Definitions</h3>For the purposes of this Cookies Policy:<br><br> ● <b>Company</b> (referred to as either 'the Company', 'We', 'Us' or 'Our' in this Cookies Policy) refers to Psyche's Royale Gaming ry, Laturinkatu 3, 08100 Lohja.<br> ● <b>Cookies</b> means small files that are placed on Your computer, mobile device or any other device by a website, containing details of your browsing history on that website among its many uses.<br> ● <b>Website</b> refers to ALT Zone, accessible from <https://altzone.fi><br> ● <b>Account</b> means a unique account created for You to access our Service or parts of our Service.<br> ● <b>You</b> means the individual accessing or using the Website, or a company, or any legal entity on behalf of which such individual is accessing or using the Website, as applicable.<br> ● <b>Usage Data</b> refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).",
 
     "type-nav-menu-title": "Usage",
     "type-label": "The use of the Cookies",
-    "type-description": "Cookies can be \"Persistent\" or \"Session\" Cookies. Persistent Cookies remain on your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close your web browser.<br><br>We use both session and persistent Cookies for the purposes set out below:<br><br> ●<b>Necessary / Essential Cookies</b><br>Type: Session Cookies<br>Administered by: Us<br>Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.<br><br> ●<b>Functionality Cookies</b><br>Type: Persistent Cookies<br>Administered by: Us<br>Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.",
+    "type-description": "Cookies can be \"Persistent\" or \"Session\" Cookies. Persistent Cookies remain on your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close your web browser.<br><br>We use both session and persistent Cookies for the purposes set out below:<br><br> ● <b>Necessary / Essential Cookies</b><br>Type: Session Cookies<br>Administered by: Us<br>Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.<br><br> ● <b>Functionality Cookies</b><br>Type: Persistent Cookies<br>Administered by: Us<br>Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.",
 
     "choices-nav-menu-title": "Choices",
     "choices-label": "Your Choices Regarding Cookies",