Cookie bot integration

front_end/messages/en.json

@@ -1,4 +1,11 @@
 {
+  "cookiesSettings": "Cookies settings",
+  "cookiesPreferencesDescription": "You get the best experience on our website.",
+  "cookiesStatisticsDescription": "We use cookies to collect information about how you use our website.",
+  "cookiesMarketingDescription": "We use cookies to show you personalized content and ads.",
+  "statistics": "Statistics",
+  "preferences": "Preferences",
+  "marketing": "Marketing",
   "withdrawingSoon": "Withdrawing soon",
   "createArticle": "+ Create Article",
   "newsletterFormHeading": "Join Our Newsletter",

front_end/src/app/(campaigns-registration)/bridgewater/components/pixels-tags.tsx

@@ -3,7 +3,7 @@
 import Script from "next/script";
 import { FC, useEffect } from "react";
 
-import { getAnalyticsCookieConsentGiven } from "@/app/(main)/components/cookies_banner";
+import { getCookiesConsentStatistics } from "@/contexts/cookies_context";
 
 import {
   fbPixelTrackPage,
@@ -13,13 +13,10 @@ import {
 } from "./pixel-apis";
 
 export const FacebookPixelTag: FC<{ pixelID?: string }> = ({ pixelID }) => {
-  const consent =
-    typeof window !== "undefined"
-      ? getAnalyticsCookieConsentGiven()
-      : "undecided";
+  const consent = getCookiesConsentStatistics();
 
   useEffect(() => {
-    if (consent !== "yes" || !pixelID) return;
+    if (!consent || !pixelID) return;
 
     fbPixelInit(pixelID);
     fbPixelTrackPage();
@@ -61,13 +58,10 @@ export const FacebookPixelTag: FC<{ pixelID?: string }> = ({ pixelID }) => {
 export const LinkedInInsightTag: FC<{ partnerID?: string }> = ({
   partnerID,
 }) => {
-  const consent =
-    typeof window !== "undefined"
-      ? getAnalyticsCookieConsentGiven()
-      : "undecided";
+  const consent = getCookiesConsentStatistics();
 
   useEffect(() => {
-    if (consent !== "yes" || !partnerID) return;
+    if (!consent || !partnerID) return;
 
     lnkdnInitAndTrack();
   }, [consent, partnerID]);
@@ -108,13 +102,10 @@ export const LinkedInInsightTag: FC<{ partnerID?: string }> = ({
 };
 
 export const RedditPixelTag: FC<{ pixelID?: string }> = ({ pixelID }) => {
-  const consent =
-    typeof window !== "undefined"
-      ? getAnalyticsCookieConsentGiven()
-      : "undecided";
+  const consent = getCookiesConsentStatistics();
 
   useEffect(() => {
-    if (consent !== "yes" || !pixelID) return;
+    if (!consent || !pixelID) return;
 
     redditPixelInitAndTrack(pixelID);
   }, [consent, pixelID]);

front_end/src/app/(main)/components/cookies_banner/cookies_modal.tsx

@@ -1,28 +1,43 @@
 "use client";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
 import BaseModal from "@/components/base_modal";
 import Button from "@/components/ui/button";
 import Checkbox from "@/components/ui/checkbox";
+import { CookiesSettings, useCookiesContext } from "@/contexts/cookies_context";
+import { showCookiebotBanner } from "@/contexts/cookies_context/cookiebot";
+import { usePublicSettings } from "@/contexts/public_settings_context";
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  analyticsValue: boolean;
-  onAnalyticsValueChange: (value: boolean) => void;
-  onSubmit: () => void;
+  onSubmit: (cookiesSettings: CookiesSettings) => void;
 };
 
-const CookiesModal: FC<Props> = ({
-  isOpen,
-  onClose,
-  analyticsValue,
-  onAnalyticsValueChange,
-  onSubmit,
-}) => {
+const CookiesModal: FC<Props> = ({ isOpen, onClose, onSubmit }) => {
   const t = useTranslations();
+  const { PUBLIC_COOKIEBOT_ID } = usePublicSettings();
+  const { cookiesConsent, setIsBannerVisible } = useCookiesContext();
+
+  const showMarketeingOption = false;
+  const showPreferencesOption = true;
+
+  const [cookiesUISettings, setCookiesUISettings] = useState<CookiesSettings>({
+    ...(cookiesConsent || {
+      necessary: true,
+      preferences: false,
+      statistics: false,
+      marketing: false,
+    }),
+  });
+
+  useEffect(() => {
+    if (cookiesConsent) {
+      setCookiesUISettings(cookiesConsent);
+    }
+  }, [cookiesConsent]);
 
   return (
     <BaseModal isOpen={isOpen} onClose={onClose} label={t("cookiePreferences")}>
@@ -44,28 +59,92 @@ const CookiesModal: FC<Props> = ({
       <ul className="w-full rounded border border-gray-300 dark:border-gray-300-dark">
         <li className="flex flex-row items-center justify-between gap-3 border-b border-gray-300 px-3 py-2 dark:border-gray-300-dark">
           <div className="flex flex-row items-center gap-1.5">
-            <Checkbox defaultChecked disabled label={t("necessaryCookies")} />
+            <Checkbox
+              defaultChecked
+              disabled
+              label={t("necessaryCookies")}
+              className="flex flex-nowrap"
+            />
           </div>
           <div className="text-right text-gray-500 dark:text-gray-500-dark">
             {t("cannotBeUnchecked")}
           </div>
         </li>
+        {showPreferencesOption && (
+          <li className="flex flex-row items-center justify-between gap-3 px-3 py-2">
+            <div className="flex flex-row items-center gap-1.5">
+              <Checkbox
+                label={t("preferences")}
+                checked={cookiesUISettings.preferences}
+                className="flex flex-nowrap"
+                onChange={() =>
+                  setCookiesUISettings({
+                    ...cookiesUISettings,
+                    preferences: !cookiesUISettings.preferences,
+                  })
+                }
+              />
+            </div>
+            <div className="text-right text-gray-500 dark:text-gray-500-dark">
+              {t("cookiesPreferencesDescription")}
+            </div>
+          </li>
+        )}
         <li className="flex flex-row items-center justify-between gap-3 px-3 py-2">
           <div className="flex flex-row items-center gap-1.5">
             <Checkbox
               label={t("analytics")}
-              checked={analyticsValue}
-              onChange={onAnalyticsValueChange}
+              className="flex flex-nowrap"
+              checked={cookiesUISettings.statistics}
+              onChange={() =>
+                setCookiesUISettings({
+                  ...cookiesUISettings,
+                  statistics: !cookiesUISettings.statistics,
+                })
+              }
             />
           </div>
           <div className="text-right text-gray-500 dark:text-gray-500-dark">
             {t("helpsImprovePlatform")}
           </div>
         </li>
+        {showMarketeingOption && (
+          <li className="flex flex-row items-center justify-between gap-3 px-3 py-2">
+            <div className="flex flex-row items-center gap-1.5">
+              <Checkbox
+                label={t("marketing")}
+                className="flex flex-nowrap"
+                checked={cookiesUISettings.marketing}
+                onChange={() =>
+                  setCookiesUISettings({
+                    ...cookiesUISettings,
+                    marketing: !cookiesUISettings.marketing,
+                  })
+                }
+              />
+            </div>
+            <div className="text-right text-gray-500 dark:text-gray-500-dark">
+              {t("cookiesMarketingDescription")}
+            </div>
+          </li>
+        )}
       </ul>
 
       <div className="mt-5 w-full text-right">
-        <Button variant="primary" onClick={onSubmit}>
+        {!!PUBLIC_COOKIEBOT_ID && (
+          <Button
+            variant="primary"
+            className="mr-2"
+            onClick={() => {
+              showCookiebotBanner();
+              setIsBannerVisible(false);
+              onClose();
+            }}
+          >
+            Advanced Settings
+          </Button>
+        )}
+        <Button variant="primary" onClick={() => onSubmit(cookiesUISettings)}>
           {t("saveSelected")}
         </Button>
       </div>