Create cookie component

Author: eduardconstantin

components/Cookie.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useEffect, type FC } from "react";
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import * as CookieConsent from "vanilla-cookieconsent";
+import getConfig from "@azure-fundamentals/utils/CookieConfig";
+import addCookieConsentListeners from "@azure-fundamentals/utils/CookieListeners";
+import Script from "next/script";
+
+const Cookie: FC = () => {
+  const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+
+  useEffect(() => {
+    addCookieConsentListeners();
+    CookieConsent.run(getConfig());
+  }, []);
+
+  return (
+    <>
+      <button
+        className="w-fit self-center md:absolute bg-white p-2 rounded-2xl md:bottom-1 md:left-1"
+        type="button"
+        onClick={CookieConsent.showPreferences}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m4.5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m-.5 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+          <path d="M8 0a7.96 7.96 0 0 0-4.075 1.114q-.245.102-.437.28A8 8 0 1 0 8 0m3.25 14.201a1.5 1.5 0 0 0-2.13.71A7 7 0 0 1 8 15a6.97 6.97 0 0 1-3.845-1.15 1.5 1.5 0 1 0-2.005-2.005A6.97 6.97 0 0 1 1 8c0-1.953.8-3.719 2.09-4.989a1.5 1.5 0 1 0 2.469-1.574A7 7 0 0 1 8 1c1.42 0 2.742.423 3.845 1.15a1.5 1.5 0 1 0 2.005 2.005A6.97 6.97 0 0 1 15 8c0 .596-.074 1.174-.214 1.727a1.5 1.5 0 1 0-1.025 2.25 7 7 0 0 1-2.51 2.224Z" />
+        </svg>
+      </button>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+      />
+      <Script id="google-analytics">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('consent', 'default', {'analytics_storage':'denied'})
+          gtag('config', '${GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `}
+      </Script>
+    </>
+  );
+};
+
+export default Cookie;

utils/CookieConfig.tsx

@@ -0,0 +1,147 @@
+import { CookieConsentConfig } from "vanilla-cookieconsent";
+
+const getConfig = () => {
+  const config: CookieConsentConfig = {
+    // root: 'body',
+    // autoShow: true,
+    disablePageInteraction: true,
+    // hideFromBots: true,
+    // mode: 'opt-in',
+    // revision: 0,
+
+    cookie: {
+      name: "ace_cookie",
+      // domain: location.hostname,
+      // path: '/',
+      // sameSite: "Lax",
+      // expiresAfterDays: 365,
+    },
+
+    /**
+     * Callback functions
+     */
+    // onFirstConsent: ({ cookie }) => {
+    //   console.log('onFirstConsent fired', cookie);
+    // },
+
+    //onConsent: ({ cookie }) => {
+    //console.log("onConsent fired!", cookie);
+    //},
+
+    //onChange: ({ changedCategories, changedServices }) => {
+    //console.log("onChange fired!", changedCategories, changedServices);
+    //},
+
+    // onModalReady: ({ modalName }) => {
+    //   console.log('ready:', modalName);
+    // },
+
+    // onModalShow: ({ modalName }) => {
+    //   console.log('visible:', modalName);
+    // },
+
+    // onModalHide: ({ modalName }) => {
+    //   console.log('hidden:', modalName);
+    // },
+
+    guiOptions: {
+      consentModal: {
+        layout: "cloud inline",
+        position: "bottom center",
+        equalWeightButtons: true,
+        flipButtons: false,
+      },
+      preferencesModal: {
+        layout: "box",
+        position: "right",
+        equalWeightButtons: true,
+        flipButtons: false,
+      },
+    },
+    categories: {
+      necessary: {
+        enabled: true,
+        readOnly: true,
+      },
+      analytics: {
+        autoClear: {
+          cookies: [
+            {
+              name: /^(_ga_|_gid)/,
+            },
+          ],
+        },
+      },
+    },
+    language: {
+      default: "en",
+      autoDetect: "browser",
+      translations: {
+        en: {
+          consentModal: {
+            title: "We use cookies!",
+            description:
+              "Hello, this website uses essential cookies to ensure its proper functioning and tracking cookies to understand how you interact with it. The latter is only set after permission.",
+            acceptAllBtn: "Accept all",
+            acceptNecessaryBtn: "Reject all",
+            showPreferencesBtn: "Manage preferences",
+          },
+          preferencesModal: {
+            title: "Manage cookie preferences",
+            acceptAllBtn: "Accept all",
+            acceptNecessaryBtn: "Reject all",
+            savePreferencesBtn: "Save preferences",
+            closeIconLabel: "Close modal",
+            serviceCounterLabel: "Service|Services",
+            sections: [
+              {
+                title: "Cookie Usage",
+                description:
+                  "We use cookies to ensure basic website functionality and to improve your online experience. You can choose to opt in or out of each category whenever you want.",
+              },
+              {
+                title:
+                  'Strictly Necessary Cookies <span class="pm__badge">Always Enabled</span>',
+                description:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                linkedCategory: "necessary",
+              },
+              {
+                title: "Analytics Cookies",
+                description:
+                  "Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.",
+                linkedCategory: "analytics",
+                cookieTable: {
+                  headers: {
+                    name: "Name",
+                    domain: "Service",
+                    description: "Description",
+                    expiration: "Expiration",
+                  },
+                  body: [
+                    {
+                      name: "_ga",
+                      domain: "Google Analytics",
+                      description:
+                        'Cookie set by <a href="#das">Google Analytics</a>.',
+                      expiration: "Expires after 12 days",
+                    },
+                  ],
+                },
+              },
+              {
+                title: "More information",
+                description:
+                  "For any queries in relation to our policy on cookies and your choices, please contact us.",
+              },
+            ],
+          },
+        },
+      },
+    },
+  };
+
+  return config;
+};
+
+export default getConfig;

utils/CookieListeners.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { acceptedCategory } from "vanilla-cookieconsent";
+
+declare global {
+  interface Window {
+    _ccRun: boolean;
+    gtag: any;
+    dataLayer: Record<string, unknown>[];
+  }
+}
+
+const addCookieConsentListeners = () => {
+  /**
+   * React specific fix: avoid adding event listeners twice
+   */
+  if (window._ccRun) return;
+
+  const updateGtagConsent = () => {
+    window.gtag("consent", "update", {
+      analytics_storage: acceptedCategory("analytics") ? "granted" : "denied",
+      security_storage: "granted", //necessary
+    });
+  };
+
+  window.addEventListener("cc:onConsent", () => {
+    updateGtagConsent();
+  });
+
+  window.addEventListener("cc:onChange", () => {
+    updateGtagConsent();
+  });
+};
+
+export default addCookieConsentListeners;