feat: add cookie consent v3

package.json

@@ -95,6 +95,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/@types/cookieconsent.d.ts

@@ -0,0 +1,54 @@
+declare module 'vanilla-cookieconsent' {
+  interface CookieValue {
+    categories: {
+      necessary: boolean;
+      analytics: boolean;
+    };
+  }
+
+  interface CookieConsentCallbackParam {
+    cookie: CookieValue;
+  }
+
+  interface CookieConsentConfig {
+    categories: {
+      necessary: {
+        enabled: boolean;
+        readOnly: boolean;
+      };
+      analytics: {
+        enabled: boolean;
+      };
+    };
+    language: {
+      default: string;
+      translations: {
+        [key: string]: {
+          consentModal: {
+            title: string;
+            description: string;
+            acceptAllBtn: string;
+            acceptNecessaryBtn: string;
+            showPreferencesBtn: string;
+          };
+          preferencesModal: {
+            title: string;
+            acceptAllBtn: string;
+            acceptNecessaryBtn: string;
+            savePreferencesBtn: string;
+            closeIconLabel: string;
+            sections: Array<{
+              title: string;
+              description: string;
+              linkedCategory?: string;
+            }>;
+          };
+        };
+      };
+    };
+    onFirstConsent?: (param: CookieConsentCallbackParam) => void;
+    onConsentChange?: (param: CookieConsentCallbackParam) => void;
+  }
+
+  export function run(config: CookieConsentConfig): void;
+}

src/components/CookieConsent.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import 'vanilla-cookieconsent/dist/cookieconsent.css';
+import * as CookieConsent from 'vanilla-cookieconsent';
+import LeadinfoScript from '../components/layout/leadinfo-script';
+
+const CookieConsentComponentV3 = () => {
+  const [analyticsEnabled, setAnalyticsEnabled] = useState(false);
+
+  useEffect(() => {
+    CookieConsent.run({
+      categories: {
+        necessary: {
+          enabled: true,
+          readOnly: true,
+        },
+        analytics: {
+          enabled: false,
+        },
+      },
+      language: {
+        default: 'en',
+        translations: {
+          en: {
+            consentModal: {
+              title: 'We use cookies',
+              description:
+                'This website uses cookies to ensure the best user experience.',
+              acceptAllBtn: 'Accept all',
+              acceptNecessaryBtn: 'Reject all',
+              showPreferencesBtn: 'Manage preferences',
+            },
+            preferencesModal: {
+              title: 'Manage Cookie Preferences',
+              acceptAllBtn: 'Accept all',
+              acceptNecessaryBtn: 'Accept necessary only',
+              savePreferencesBtn: 'Save preferences',
+              closeIconLabel: 'Close',
+              sections: [
+                {
+                  title: 'Strictly Necessary Cookies',
+                  description:
+                    'These cookies are essential for website functionality and cannot be disabled.',
+                  linkedCategory: 'necessary',
+                },
+                {
+                  title: 'Analytics Cookies',
+                  description:
+                    'We use analytics cookies to analyze website usage and improve our services.',
+                  linkedCategory: 'analytics',
+                },
+              ],
+            },
+          },
+        },
+      },
+      onFirstConsent: (param) => {
+        handleConsent(param.cookie.categories);
+      },
+      onConsentChange: (param) => {
+        handleConsent(param.cookie.categories);
+      },
+    });
+  }, []);
+
+  const handleConsent = (categories) => {
+    const isAnalyticsAccepted = categories.includes('analytics');
+
+    if (isAnalyticsAccepted) {
+      setAnalyticsEnabled(true);
+      setLeadinfoCookies();
+    } else {
+      setAnalyticsEnabled(false);
+      clearLeadinfoCookies();
+    }
+  };
+
+  const setLeadinfoCookies = () => {
+    const twoYears = 63072000;
+    const sessionValue = new Date().toISOString();
+    document.cookie = `_li_id=some_value; max-age=${twoYears}; path=/`;
+    document.cookie = `_li_ses=${sessionValue}; max-age=0; path=/`;
+  };
+
+  const clearLeadinfoCookies = () => {
+    document.cookie = '_li_id=; max-age=0; path=/';
+    document.cookie = '_li_ses=; max-age=0; path=/';
+  };
+
+  return <LeadinfoScript enable={analyticsEnabled} />;
+};
+
+export default CookieConsentComponentV3;

src/components/layout/leadinfo-script.tsx

@@ -1,20 +1,30 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+let leadinfoInitialized = false;
+
+const LeadinfoScript = ({ enable }: { enable: boolean }) => {
+  const [script, setScript] = useState<HTMLScriptElement | null>(null);
 
-const LeadinfoScript = () => {
   useEffect(() => {
-    const script = document.createElement('script');
-    script.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'));
+    if (enable && !leadinfoInitialized) {
+      const leadinfoScript = document.createElement('script');
+      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);
+      setScript(leadinfoScript);
+      leadinfoInitialized = true;
+    }
 
-    return () => {
+    if (!enable && leadinfoInitialized && script) {
       document.head.removeChild(script);
-    };
-  }, []);
+      setScript(null);
+      leadinfoInitialized = false;
+    }
+  }, [enable, script]);
 
   return null;
 };

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;
@@ -72,8 +72,8 @@ export const Head = ({ data, location }: PageProps<IndexPageQueryProps>) => {
         rssLink
         locales={data.locales}
       />
+      <CookieConsentComponentV3 />
       <StructuredOrganizationData />
-      <LeadinfoScript />
     </>
   );
 };

yarn.lock

@@ -15148,6 +15148,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"