feat: add cookie consent v3

package.json

@@ -35,6 +35,7 @@
     "@reach/tabs": "^0.18.0",
     "@slack/web-api": "^6.11.2",
     "@svgr/webpack": "^8.0.1",
+    "@types/cookieconsent": "^3.1.3",
     "@types/leaflet": "^1.9.8",
     "axios": "^1.6.5",
     "babel-plugin-styled-components": "^2.1.3",
@@ -95,6 +96,7 @@
     "stylis": "^4.3.1",
     "unified": "^10.1.1",
     "util": "^0.12.5",
+    "vanilla-cookieconsent": "3.0.1",
     "webpack": "^5.84.1",
     "what-input": "^5.2.12"
   },

src/assets/locales/de/cookie-consent-translations.json

@@ -0,0 +1,53 @@
+{
+  "consentModal": {
+    "title": "Ihre Datenschutzeinstellungen",
+    "description": "Wir verwenden Cookies, um Ihr Erlebnis zu verbessern, den Verkehr zu analysieren und personalisierte Inhalte bereitzustellen. Sie können entweder alle Cookies akzeptieren oder Ihre Präferenzen für verschiedene Kategorien verwalten.",
+    "acceptAllBtn": "Alle Cookies akzeptieren",
+    "acceptNecessaryBtn": "Alle ablehnen",
+    "showPreferencesBtn": "Cookie-Einstellungen verwalten"
+  },
+  "preferencesModal": {
+    "title": "Verwalten Sie Ihre Cookie-Einstellungen",
+    "acceptAllBtn": "Alle Cookies akzeptieren",
+    "acceptNecessaryBtn": "Alle ablehnen",
+    "savePreferencesBtn": "Einstellungen speichern",
+    "closeIconLabel": "Schließen",
+    "sections": [
+      {
+        "title": "Verwendung von Cookies",
+        "description": "Unsere Website verwendet Cookies, um die wesentliche Funktionalität zu gewährleisten, Ihr Browser-Erlebnis zu verbessern und personalisierte Inhalte bereitzustellen. Einige Cookies sind erforderlich, während andere uns helfen, unsere Dienstleistungen zu verbessern."
+      },
+      {
+        "title": "Leistungs- und Analyse-Cookies",
+        "description": "Diese Cookies helfen uns, zu analysieren, wie Besucher mit unserer Website interagieren, und ermöglichen es uns, die Leistung zu messen und zu verbessern. Sie sammeln Informationen in anonymisierter Form.",
+        "linkedCategory": "analytics",
+        "cookieTable": {
+          "headers": {
+            "name": "Name",
+            "domain": "Dienst",
+            "description": "Beschreibung",
+            "expiration": "Ablauf"
+          },
+          "body": [
+            {
+              "name": "_li_id",
+              "domain": "Leadinfo.com",
+              "description": "Datenschutzerklärung von <a href=\"https://www.leadinfo.com/en/privacy/\">Leadinfo</a>",
+              "expiration": "_li_id wird für zwei Jahre gespeichert"
+            },
+            {
+              "name": "_li_ses",
+              "domain": "Leadinfo.com",
+              "description": "Datenschutzerklärung von <a href=\"https://www.leadinfo.com/en/privacy/\">Leadinfo</a>",
+              "expiration": "_li_ses wird nur für die aktuelle Sitzung verwendet"
+            }
+          ]
+        }
+      },
+      {
+        "title": "Weitere Informationen",
+        "description": "Bei Fragen zu unserer Cookie-Richtlinie und Ihren Wahlmöglichkeiten kontaktieren Sie uns bitte über <a class=\"cc-link\" href=\"contact/\">kontaktieren Sie uns</a>."
+      }
+    ]
+  }
+}

src/assets/locales/en/cookie-consent-translations.json

@@ -0,0 +1,53 @@
+{
+  "consentModal": {
+    "title": "Your Privacy Choices",
+    "description": "We use cookies to enhance your experience, analyze traffic, and deliver personalized content. You can choose to accept all cookies or manage your preferences for different categories.",
+    "acceptAllBtn": "Accept All Cookies",
+    "acceptNecessaryBtn": "Reject all",
+    "showPreferencesBtn": "Manage Cookie Preferences"
+  },
+  "preferencesModal": {
+    "title": "Manage Your Cookie Preferences",
+    "acceptAllBtn": "Accept All Cookies",
+    "acceptNecessaryBtn": "Reject all",
+    "savePreferencesBtn": "Save Preferences",
+    "closeIconLabel": "Close",
+    "sections": [
+      {
+        "title": "Cookie Usage",
+        "description": "Our website uses cookies to ensure essential functionality, enhance your browsing experience, and provide personalized content. Some cookies are required, while others help us improve our services."
+      },
+      {
+        "title": "Performance and Analytics Cookies",
+        "description": "These cookies help us analyze how visitors interact with our website, allowing us to measure and improve performance. They collect information in an anonymous form.",
+        "linkedCategory": "analytics",
+        "cookieTable": {
+          "headers": {
+            "name": "Name",
+            "domain": "Service",
+            "description": "Description",
+            "expiration": "Expiration"
+          },
+          "body": [
+            {
+              "name": "_li_id",
+              "domain": "Leadinfo.com",
+              "description": "Privacy statement of <a href=\"https://www.leadinfo.com/en/privacy/\">Leadinfo</a>",
+              "expiration": "_li_id will be saved for two years"
+            },
+            {
+              "name": "_li_ses",
+              "domain": "Leadinfo.com",
+              "description": "Privacy statement of <a href=\"https://www.leadinfo.com/en/privacy/\">Leadinfo</a>",
+              "expiration": "_li_ses is only used for the current session"
+            }
+          ]
+        }
+      },
+      {
+        "title": "More information",
+        "description": "For any queries in relation to our policy on cookies and your choices, please <a class=\"cc-link\" href=\"contact/\">contact us</a>."
+      }
+    ]
+  }
+}

src/components/CookieConsent.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import 'vanilla-cookieconsent/dist/cookieconsent.css';
+import * as CookieConsent from 'vanilla-cookieconsent';
+import LeadinfoScript from '../components/layout/leadinfo-script';
+import { useTranslation } from 'react-i18next';
+import { getCookieConsentLocale } from '../components/i18n-helpers';
+
+const CookieConsentComponentV3 = () => {
+  const { t, i18n } = useTranslation();
+
+  useEffect(() => {
+    CookieConsent.run({
+      categories: {
+        analytics: {
+          enabled: false,
+        },
+      },
+      language: {
+        default: 'en',
+        translations: {
+          en: getCookieConsentLocale(i18n.language),
+          de: getCookieConsentLocale(i18n.language),
+        },
+      },
+    });
+  }, [t]);
+
+  return <LeadinfoScript />;
+};
+
+export default CookieConsentComponentV3;

src/components/i18n-helpers.tsx

@@ -3,6 +3,8 @@ import { format, parseISO } from 'date-fns';
 import { enGB, de } from 'date-fns/locale';
 import React from 'react';
 import { UseTranslationOptions } from 'react-i18next';
+import enCookieConsentTranslations from '../assets/locales/en/cookie-consent-translations.json';
+import deCookieConsentTranslations from '../assets/locales/de/cookie-consent-translations.json';
 
 export const LONG_DATE_FORMAT = 'dd. MMMM yyyy';
 
@@ -53,3 +55,10 @@ export const useTranslationParagraphs = (
 
   return { t, tWithParagraphs, useTranslationResponse };
 };
+
+export const getCookieConsentLocale = (language) => {
+  if (language === 'de') {
+    return deCookieConsentTranslations;
+  }
+  return enCookieConsentTranslations;
+};

src/components/layout/leadinfo-script.tsx

@@ -2,17 +2,26 @@ import { useEffect } from 'react';
 
 const LeadinfoScript = () => {
   useEffect(() => {
-    const script = document.createElement('script');
-    script.innerHTML = `
+    const leadinfoScript = document.createElement('script');
+    leadinfoScript.setAttribute('type', 'text/plain');
+    leadinfoScript.setAttribute('data-category', 'analytics');
+
+    leadinfoScript.innerHTML = `
       (function(l,e,a,d,i,n,f,o){if(!l[i]){l.GlobalLeadinfoNamespace=l.GlobalLeadinfoNamespace||[];
         l.GlobalLeadinfoNamespace.push(i);l[i]=function(){(l[i].q=l[i].q||[]).push(arguments)};l[i].t=l[i].t||n;
         l[i].q=l[i].q||[];o=e.createElement(a);f=e.getElementsByTagName(a)[0];o.async=1;o.src=d;f.parentNode.insertBefore(o,f);}
         }(window,document,'script','https://cdn.leadinfo.eu/ping.js','leadinfo','LI-66D184CC97CFD'));
-      `;
-    document.head.appendChild(script);
+    `;
+
+    document.head.appendChild(leadinfoScript);
 
     return () => {
-      document.head.removeChild(script);
+      const existingScript = document.querySelector(
+        'script[data-category="analytics"]',
+      );
+      if (existingScript) {
+        document.head.removeChild(existingScript);
+      }
     };
   }, []);
 

src/pages/index.tsx

@@ -11,7 +11,7 @@ import {
 } from '../types';
 import { IGatsbyImageData } from 'gatsby-plugin-image';
 import { StructuredOrganizationData } from '../components/pages/landingpage/structured-organization-data';
-import LeadinfoScript from '../components/layout/leadinfo-script'; // Import the new component
+import CookieConsentComponentV3 from '../components/CookieConsent';
 
 export interface OfficeImage {
   relativePath: string;
@@ -47,17 +47,20 @@ const IndexPage = ({ data }: PageProps<IndexPageQueryProps>) => {
   }, {});
 
   return (
-    <Landingpage
-      title={data.contentfulPage.title}
-      description={data.contentfulPage.description?.description as string}
-      officeImages={officeImages}
-      positions={jobPositions}
-      posts={blogPosts}
-      serviceHeader={data.servicesHeader}
-      serviceTeaser={data.servicesTeaser.gridItems}
-      careerHeader={data.careerHeader}
-      blogHeader={data.blogHeader}
-    />
+    <>
+      <Landingpage
+        title={data.contentfulPage.title}
+        description={data.contentfulPage.description?.description as string}
+        officeImages={officeImages}
+        positions={jobPositions}
+        posts={blogPosts}
+        serviceHeader={data.servicesHeader}
+        serviceTeaser={data.servicesTeaser.gridItems}
+        careerHeader={data.careerHeader}
+        blogHeader={data.blogHeader}
+      />
+      <CookieConsentComponentV3 />
+    </>
   );
 };
 
@@ -73,7 +76,6 @@ export const Head = ({ data, location }: PageProps<IndexPageQueryProps>) => {
         locales={data.locales}
       />
       <StructuredOrganizationData />
-      <LeadinfoScript />
     </>
   );
 };

tsconfig.json

@@ -11,7 +11,9 @@
     "noUnusedLocals": false,
     "skipLibCheck": true,
     "allowJs": true,
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
   },
   "exclude": ["node_modules", "public", ".cache"]
 }

yarn.lock

@@ -3040,6 +3040,13 @@
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
   integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
 
+"@types/cookieconsent@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/cookieconsent/-/cookieconsent-3.1.3.tgz#9c4db317fba44eec32f9d8858b8860b31eff2262"
+  integrity sha512-fWEDj/bX5V1uXtpINNXkDspgWp8756PgaDaFzOYrFox2dRadkOCSMnUnUIBmYI+oYO2w4x6DhS8NICD8oVO/FA==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/cors@^2.8.12":
   version "2.8.17"
   resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.17.tgz#5d718a5e494a8166f569d986794e49c48b216b2b"
@@ -15148,6 +15155,11 @@ value-or-promise@^1.0.12:
   resolved "https://registry.yarnpkg.com/value-or-promise/-/value-or-promise-1.0.12.tgz#0e5abfeec70148c78460a849f6b003ea7986f15c"
   integrity sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==
 
+[email protected]:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vanilla-cookieconsent/-/vanilla-cookieconsent-3.0.1.tgz#059d1b2c712476ae4172d4ec7fa9d553a16be12d"
+  integrity sha512-gqc4x7O9t1I4xWr7x6/jtQWPr4PZK26SmeA0iyTv1WyoECfAGnu5JEOExmMEP+5Fz66AT9OiCBO3GII4wDQHLw==
+
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"