Merge pull request #242 from codesandbox/draft/compassionate-jerry

feat: add cookie consent

packages/projects-docs/package.json

@@ -19,7 +19,8 @@
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vanilla-cookieconsent": "3.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",

packages/projects-docs/pages/_app.js

@@ -2,18 +2,15 @@ import "../styles.css";
 import amplitude from "amplitude-js";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { useInitAnalytics } from "../utils/useInitAnalytics";
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import "../utils/cookieConsentTheme.css";
 
 export default function Nextra({ Component, pageProps }) {
   const getLayout = Component.getLayout || ((page) => page);
   const router = useRouter();
 
-  // Init Amplitude
-  amplitude.getInstance().init(process.env.NEXT_PUBLIC_AMPLITUDE, null, {
-    includeReferrer: true,
-    saveEvents: true,
-    includeUtm: true,
-    saveParamsReferrerOncePerSession: false,
-  });
+  useInitAnalytics(process.env.NEXT_PUBLIC_AMPLITUDE);
 
   const isBrowser = typeof window !== "undefined";
   const [initialRouteTracked, setInitialRouteTracked] = useState(false);

packages/projects-docs/utils/cookieConsentConfig.js

@@ -0,0 +1,64 @@
+export const cookieConsentConfig = {
+  categories: {
+    functional: {
+      enabled: true,
+      readOnly: true,
+    },
+    analytical: {},
+    marketing: {},
+  },
+
+  guiOptions: {
+    consentModal: {
+      layout: "box wide",
+    },
+  },
+
+  language: {
+    default: "en",
+    translations: {
+      en: {
+        consentModal: {
+          title: "🍪 Yes, we use cookies",
+          description:
+            "This website utilizes cookies to enable essential site functionality and analytics. You may change your settings at any time or accept the default settings. You may close this banner to continue with only essential cookies.</br>Read more about this in our <a href='/legal/cookies' target='_blank'>privacy and cookie statement<a>.",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          showPreferencesBtn: "Manage preferences",
+        },
+        preferencesModal: {
+          title: "Cookie preferences",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          savePreferencesBtn: "Save preferences",
+          closeIconLabel: "Close",
+          sections: [
+            {
+              title: "Functional cookies",
+              description:
+                "These cookies are essential for the proper functioning of our services and cannot be disabled.",
+              linkedCategory: "functional",
+            },
+            {
+              title: "Analytical cookies",
+              description:
+                "These cookies collect information about how you use our services or potential errors you encounter. Based on this information we are able to improve your experience and react to any issues.",
+              linkedCategory: "analytical",
+            },
+            {
+              title: "Marketing cookies",
+              description:
+                "We currently do not collect cookies for marketing purposes. Though unlikely, by consenting to marketing cookies, you agree to allow us to show you advertisements relevant to you through our advertising partner in the future.",
+              linkedCategory: "marketing",
+            },
+            {
+              title: "Read more",
+              description:
+                'For more detailed information about the use of cookies across our websites, read our <a target="_blank" href="/legal/cookies">privacy and cookie statement</a>.',
+            },
+          ],
+        },
+      },
+    },
+  },
+};

packages/projects-docs/utils/cookieConsentTheme.css

@@ -0,0 +1,54 @@
+#cc-main {
+  color-scheme: dark;
+  font-family: Inter;
+
+  --cc-bg: #333;
+  --cc-primary-color: #fff;
+  --cc-secondary-color: #ccc;
+
+  --cc-separator-border-color: #525252;
+
+  --cc-btn-primary-bg: #eaff96;
+  --cc-btn-primary-color: #000;
+  --cc-btn-primary-border-color: #eaff96;
+  --cc-btn-primary-hover-bg: #f5ffcb;
+  --cc-btn-primary-hover-color: #000;
+  --cc-btn-primary-hover-border-color: #eaff96;
+
+  --cc-btn-secondary-bg: #333;
+  --cc-btn-secondary-color: #e5e5e5;
+  --cc-btn-secondary-border-color: #525252;
+  --cc-btn-secondary-hover-bg: #ffffff1a;
+  --cc-btn-secondary-hover-color: #e5e5e5;
+  --cc-btn-secondary-hover-border-color: #525252;
+
+  --cc-cookie-category-block-bg: #333;
+  --cc-cookie-category-block-border: #525252;
+  --cc-cookie-category-block-hover-bg: #ffffff1a;
+  --cc-cookie-category-block-hover-border: #525252;
+  --cc-cookie-category-expanded-block-hover-bg: #525252;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
+  --cc-toggle-off-bg: #525252;
+  --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
+  --cc-toggle-off-knob-bg: #fff;
+  --cc-toggle-readonly-bg: #525252;
+  --cc-toggle-readonly-knob-bg: #adadad;
+
+  --cc-btn-border-radius: 4px;
+}
+
+#cc-main .cm__body {
+  padding-top: 4px;
+}
+
+#cc-main .pm__btn,
+#cc-main .cm__btn {
+  font-size: 1em;
+  font-weight: 400;
+}
+
+#cc-main .cm__btn-group,
+#cc-main .pm__btn-group {
+  gap: 8px;
+}

packages/projects-docs/utils/useInitAnalytics.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import amplitude from "amplitude-js";
+import * as CookieConsent from "vanilla-cookieconsent";
+import { cookieConsentConfig } from "./cookieConsentConfig";
+
+export const useInitAnalytics = (amplitudeApiKey) => {
+  const [analyticsInitialized, setAnalyticsInitialized] = useState(false);
+
+  const initAnalytics = () => {
+    if (!amplitudeApiKey || analyticsInitialized) {
+      return;
+    }
+
+    amplitude.init(amplitudeApiKey, null, {
+      includeReferrer: true,
+      saveEvents: true,
+      includeUtm: true,
+      saveParamsReferrerOncePerSession: false,
+    });
+
+    setAnalyticsInitialized(true);
+  };
+
+  const handleCookieConsent = (cookie) => {
+    const allowAnalytics = cookie?.categories?.includes("analytical") || false;
+    if (allowAnalytics && !analyticsInitialized) {
+      initAnalytics();
+    }
+
+    amplitude.getInstance().setOptOut(!allowAnalytics);
+  };
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") {
+      return;
+    }
+
+    CookieConsent.run({
+      onFirstConsent: ({ cookie }) => {
+        handleCookieConsent(cookie);
+      },
+      onChange: ({ cookie }) => {
+        handleCookieConsent(cookie);
+      },
+      ...cookieConsentConfig,
+    });
+
+    const cookieConsent = CookieConsent.getCookie();
+    handleCookieConsent(cookieConsent);
+  }, []);
+};