gatsby-core-theme 44.22.4 → 44.23.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [44.23.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.22.4...v44.23.0) (2026-04-29)
+
+
+### Bug Fixes
+
+* per-category cookie is authoritative; legacy fallback only when unset ([4dd15ad](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/4dd15adbe30a688bf6b7a255e54cf190864ce958))
+* revert ([76d3a86](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/76d3a86e475a75b8949ee75591c34d53165b86e3))
+
+
+### Code Refactoring
+
+* extract consent gates into cookies helper for site-level reuse ([1be4643](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/1be4643e6917c44eeaaf650d1559172ea26b05ae))
+* self-remove consent listener after all gated categories init ([e502ecd](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e502ecdf7e5dcd004e7591c5f601c2a5d2ab4a72))
+
+
+* Merge branch 'en-492-cookie-consent' into 'master' ([b7e3d5b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b7e3d5b20f264814d77b3409445be72aa903071e))
+* Merge branch 'en-492-cookie-consent' into 'master' ([c7e21bd](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/c7e21bd7a3e98a38d3da6351ffccb8b9a68d8c55))
+
+
+### Features
+
+* add functionality category, gate optinmonster on it ([41c2d47](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/41c2d4725424d621824412f50af555118703a7e8))
+* enable cookie consent on demo ([7dc252f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/7dc252fb1c8ca024fff6e32b4868400f39f7866e))
+* per-category script gating with site-level toggle ([7f7230c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/7f7230cfef830356342c8afca2c7724a515564b3))
+* reopen cookie settings modal via context + link-list sentinel ([6e68856](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/6e68856451984653f3578f1552f45936d821f693))
+* script loading gated by cookie consent ([09ce499](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/09ce499b5567acf10ccca4611f7027f88781639b))
+
 ## [44.22.4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.22.3...v44.22.4) (2026-04-28)
 
 

package/gatsby-browser.js

@@ -26,7 +26,16 @@ async function yieldToMain() {
   });
 }
 
-let didInit = false;
+const {
+  isAnalyticalGranted,
+  isMarketingGranted,
+  isFunctionalityGranted,
+} = require("./src/helpers/cookies.mjs");
+
+let piguardDidInit = false;
+let analyticalDidInit = false;
+let marketingDidInit = false;
+let functionalityDidInit = false;
 
 function initGTM() {
   if (
@@ -141,30 +150,23 @@ const piguard = () => {
   document.head.appendChild(script);
 };
 
-async function scrollEvent() {
-  if (didInit) return;
-  didInit = true;
-  await yieldToMain();
-  initGTM();
-
+function initPiguardCategory() {
+  if (piguardDidInit) return;
+  piguardDidInit = true;
   if (
     !document.getElementById("piguard") &&
     process.env.ENABLE_PIGUARD === "true"
   ) {
     piguard();
   }
+}
 
-  if (
-    process.env.ENABLE_MICROSOFT === "true" &&
-    !document.getElementById("microsoft-code")
-  )
-    microsoftAdvertising();
+function initAnalyticalCategory() {
+  if (analyticalDidInit) return;
+  if (!isAnalyticalGranted()) return;
+  analyticalDidInit = true;
+  initGTM();
 
-  if (
-    process.env.ENABLE_OPTINMONSTR === "true" &&
-    !document.getElementById("optin-monstr")
-  )
-    optinMonster();
   if (
     process.env.ENABLE_PIXEL === "true" &&
     !document.getElementById("pixel-code")
@@ -174,33 +176,73 @@ async function scrollEvent() {
       window.location.pathname !== process.env.PAGE_EXCLUDE_PIXEL
     ) {
       loadFacebookPixel();
-
       fbq("init", process.env.PIXEL_ID);
-
-      // Initialize and track the PageView event
       fbq("track", "PageView");
     }
   }
 }
 
+function initMarketingCategory() {
+  if (marketingDidInit) return;
+  if (!isMarketingGranted()) return;
+  marketingDidInit = true;
+
+  if (
+    process.env.ENABLE_MICROSOFT === "true" &&
+    !document.getElementById("microsoft-code")
+  )
+    microsoftAdvertising();
+}
+
+function initFunctionalityCategory() {
+  if (functionalityDidInit) return;
+  if (!isFunctionalityGranted()) return;
+  functionalityDidInit = true;
+
+  if (
+    process.env.ENABLE_OPTINMONSTR === "true" &&
+    !document.getElementById("optin-monstr")
+  )
+    optinMonster();
+}
+
+async function tryInitTrackingScripts() {
+  await yieldToMain();
+  initPiguardCategory();
+  initAnalyticalCategory();
+  initMarketingCategory();
+  initFunctionalityCategory();
+}
+
+const allGatedCategoriesInitialized = () =>
+  analyticalDidInit && marketingDidInit && functionalityDidInit;
+
 exports.onClientEntry = () => {
+  const consentHandler = async () => {
+    await tryInitTrackingScripts();
+    if (allGatedCategoriesInitialized()) {
+      window.removeEventListener("consent:accepted", consentHandler);
+    }
+  };
+  window.addEventListener("consent:accepted", consentHandler);
+
   if (
     process.env.PPC === "true" ||
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
       navigator.userAgent
     )
   ) {
-    scrollEvent();
+    tryInitTrackingScripts();
   } else {
-    document.addEventListener("scroll", scrollEvent, {
+    document.addEventListener("scroll", tryInitTrackingScripts, {
       passive: true,
       once: true,
     });
-    document.addEventListener("mousemove", scrollEvent, {
+    document.addEventListener("mousemove", tryInitTrackingScripts, {
       passive: true,
       once: true,
     });
-    document.addEventListener("touchstart", scrollEvent, {
+    document.addEventListener("touchstart", tryInitTrackingScripts, {
       passive: true,
       once: true,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.22.4",
+  "version": "44.23.0",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/molecules/cookie-modal/index.js

@@ -14,10 +14,24 @@ import Button from "~atoms/button/button";
 import styles from "./cookie-modal.module.scss";
 import cookiesContent from '../../../constants/cookies';
 import { parseCookieTextWithLinks } from '../../../helpers/generators.mjs';
+import { getCookie } from '~helpers/cookies';
+
+const initialCategoryStates = () => {
+  const states = {};
+  (cookiesContent.modal?.categories || []).forEach((cat, idx) => {
+    if (cat.hasToggle === false) {
+      states[idx] = true;
+      return;
+    }
+    states[idx] = cat.cookieName ? getCookie(cat.cookieName) === 'true' : false;
+  });
+  return states;
+};
 
 const CookieModal = ({
   handleAcceptCookies,
   handleDeclineCookies,
+  handleConfirmChoices,
   declineButtonType = "secondary",
   acceptButtonType = "primary",
   buttonSize = "m",
@@ -27,7 +41,7 @@ const CookieModal = ({
   hide,
 }) => {
   const [categorySection, setCategorySection] = useState(0);
-  const [categoryStates, setCategoryStates] = useState({});
+  const [categoryStates, setCategoryStates] = useState(initialCategoryStates);
   const [menage, setMenage] = useState(true);
 
   const modal = useRef(null);
@@ -68,6 +82,7 @@ const CookieModal = ({
     textKey: item?.description?.translationKey,
     defaultText: item?.description?.label,
     alwaysEnabledLabel: item?.alwaysEnabledLabel,
+    cookieName: item?.cookieName,
   }));
 
 
@@ -204,7 +219,11 @@ const CookieModal = ({
         {!templateTwo && (
           <div className={styles?.lastButton || ""}>
             <Button
-              onClick={() => handleAcceptCookies()}
+              onClick={() =>
+                handleConfirmChoices
+                  ? handleConfirmChoices(categoryStates)
+                  : handleAcceptCookies()
+              }
               btnText={useTranslate(
                 modalSettings?.confirmButton?.translationKey,
                 modalSettings?.confirmButton?.label
@@ -224,6 +243,7 @@ const CookieModal = ({
 CookieModal.propTypes = {
   handleAcceptCookies: PropTypes.func,
   handleDeclineCookies: PropTypes.func,
+  handleConfirmChoices: PropTypes.func,
   closeModal: PropTypes.func,
   logo: PropTypes.string,
   buttonSize: PropTypes.string,

package/src/components/molecules/link-list/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable no-nested-ternary */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import keygen from '~helpers/keygen';
@@ -8,6 +8,10 @@ import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
+import { Context } from '~context/MainProvider';
+
+const COOKIE_SETTINGS_SENTINEL =
+  process.env.GATSBY_COOKIE_SETTINGS_SENTINEL || '#cookie-settings';
 
 /* eslint-disable react/jsx-no-target-blank */
 
@@ -25,6 +29,8 @@ const LinkList = ({
   gtmClass = '',
   showLinks = true,
 }) => {
+  const { openCookieSettings } = useContext(Context)?.cookieConsentContext || {};
+
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
 
@@ -56,41 +62,59 @@ const LinkList = ({
     );
   }
 
-  function renderItems(item, index) {
+  function renderLinkWrapper(item, index) {
     const link = item?.value || item?.url;
+    const content = renderLinkContent(item, index);
+    const ariaLabel = `${item.title || item.name || item.url} Link`;
+
+    if (link === COOKIE_SETTINGS_SENTINEL) {
+      return (
+        <button
+          type="button"
+          onClick={() => openCookieSettings && openCookieSettings()}
+          title={item.title || item.name}
+          className={gtmClass || ''}
+          aria-label={ariaLabel}
+        >
+          {content}
+        </button>
+      );
+    }
+
+    if (!link) return content;
+
+    if (link.includes('http') || link.includes('www')) {
+      return (
+        <a
+          href={link}
+          title={item.title || item.name}
+          rel={`noreferrer ${item.nofollow ? 'nofollow' : ''}`}
+          target="_blank"
+          className={gtmClass || ''}
+          aria-label={ariaLabel}
+        >
+          {content}
+        </a>
+      );
+    }
 
     return (
-      <li key={keygen()}>
-        {link ? (
-          link.includes('http') || link.includes('www') ? (
-            <a
-              href={link}
-              title={item.title || item.name}
-              rel={`noreferrer ${item.nofollow ? 'nofollow' : ''}`}
-              target="_blank"
-              className={gtmClass || ''}
-              aria-label={`${item.title || item.name} Link`}
-            >
-              {renderLinkContent(item, index)}
-            </a>
-          ) : (
-            <Link
-              to={showLinks && link}
-              title={item.title || item.name}
-              className={gtmClass || ''}
-              rel={item.nofollow ? 'nofollow' : ''}
-              aria-label={`${item.title || item.url} Link`}
-            >
-              {renderLinkContent(item, index)}
-            </Link>
-          )
-        ) : (
-          renderLinkContent(item, index)
-        )}
-      </li>
+      <Link
+        to={showLinks && link}
+        title={item.title || item.name}
+        className={gtmClass || ''}
+        rel={item.nofollow ? 'nofollow' : ''}
+        aria-label={ariaLabel}
+      >
+        {content}
+      </Link>
     );
   }
 
+  function renderItems(item, index) {
+    return <li key={keygen()}>{renderLinkWrapper(item, index)}</li>;
+  }
+
   const renderSingleList = () => {
     return (
       <ul className={classes}>

package/src/components/organisms/cookie-consent/cookie-consent.test.js

@@ -53,6 +53,11 @@ describe('cookie consent component', () => {
 });
 afterEach(() => {
   cleanup();
-  document.cookie = `CookieConsent=; expires=Thu, 01 Jan 1970 00:00:00; path=/`;
+  const expired = 'expires=Thu, 01 Jan 1970 00:00:00; path=/';
+  document.cookie = `CookieConsent=; ${expired}`;
+  document.cookie = `cookie_necessary=; ${expired}`;
+  document.cookie = `cookie_analytical=; ${expired}`;
+  document.cookie = `cookie_marketing=; ${expired}`;
+  document.cookie = `showCookie=; ${expired}`;
   sessionStorage.removeItem('CookieConsentDecline');
 });

package/src/components/organisms/cookie-consent/index.js

@@ -2,11 +2,12 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useState, useEffect, lazy, Suspense } from "react";
+import React, { useContext, useEffect, lazy, Suspense } from "react";
 import PropTypes from "prop-types";
 
 import useTranslate from "~hooks/useTranslate/useTranslate";
 import { setCookie, getCookie } from "~helpers/cookies";
+import { Context } from "~context/MainProvider";
 import styles from "./cookie-consent.module.scss";
 
 import cookiesContent from '../../../constants/cookies';
@@ -20,9 +21,14 @@ const CookieConsent = ({
   icon = null,
   showRejectButton = false,
 }) => {
-  const [showModal, setShowModal] = useState(false);
-
-  const [showCookieConsent, setShowCookieConsent] = useState(false);
+  const {
+    showCookieBanner = false,
+    showCookieModal = false,
+    openCookieBanner = () => {},
+    openCookieSettings = () => {},
+    closeCookieModal = () => {},
+    closeCookieConsent = () => {},
+  } = useContext(Context)?.cookieConsentContext || {};
 
   const CookieModal = lazy(() => import("../../molecules/cookie-modal"));
 
@@ -44,37 +50,100 @@ const CookieConsent = ({
     cookiesContent.text?.translationKey,
     cookiesContent.text?.label
 );
-  // when user declines
+
+  const categories = cookiesContent.modal?.categories || [];
+
+  const dispatchConsentEvent = () => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("consent:accepted"));
+    }
+  };
+
+  // Necessary categories (hasToggle === false) are always written as true.
+  // Toggleable categories are written from the provided state map.
+  const writeCategoryCookies = (stateByIndex) => {
+    categories.forEach((cat, idx) => {
+      if (!cat.cookieName) return;
+      const value = cat.hasToggle === false ? true : Boolean(stateByIndex[idx]);
+      setCookie(cat.cookieName, value, 365, "/");
+    });
+  };
+
+  // Detect a toggle going from on -> off, which requires a reload to unload
+  // tracking scripts that have already executed in this session.
+  const wasAnyCategoryRevoked = (newStateByIndex) =>
+    categories.some((cat, idx) => {
+      if (!cat.cookieName || cat.hasToggle === false) return false;
+      const wasEnabled = getCookie(cat.cookieName) === "true";
+      const willBeEnabled = Boolean(newStateByIndex[idx]);
+      return wasEnabled && !willBeEnabled;
+    });
+
+  const closeBanner = () => {
+    setCookie("showCookie", false, 365, "/");
+    closeCookieConsent();
+  };
+
+  // when user declines (reject non-necessary): all toggleable categories -> false.
+  // Still dispatches the consent event because `necessary` stays true and every
+  // tracking script is currently gated on `necessary`. Revisit when scripts get
+  // re-tagged to analytical/marketing — decline should then NOT fire the event.
   const handleDecline = () => {
+    const allFalse = {};
+    categories.forEach((_, idx) => {
+      allFalse[idx] = false;
+    });
+    const revoked = wasAnyCategoryRevoked(allFalse);
+    writeCategoryCookies(allFalse);
     setCookie(cookieName, false, 365, "/");
-    setCookie("showCookie", false, 365, "/");
-    setShowCookieConsent(false);
-    setShowModal(false);
-    document.body.style.overflow = "auto";
+    if (revoked) {
+      window.location.reload();
+      return;
+    }
+    closeBanner();
+    dispatchConsentEvent();
   };
 
-  // when user accepts
+  // when user accepts all: every toggleable category -> true
   const handleAccept = () => {
+    const allTrue = {};
+    categories.forEach((_, idx) => {
+      allTrue[idx] = true;
+    });
+    writeCategoryCookies(allTrue);
     setCookie(cookieName, true, 365, "/");
-    setCookie("showCookie", false, 365, "/");
-    setShowCookieConsent(false);
-    setShowModal(false);
-    document.body.style.overflow = "auto";
+    closeBanner();
+    dispatchConsentEvent();
+  };
+
+  // when user confirms a custom mix from the modal toggles
+  const handleConfirmChoices = (categoryStates) => {
+    const revoked = wasAnyCategoryRevoked(categoryStates);
+    writeCategoryCookies(categoryStates);
+    setCookie(cookieName, true, 365, "/");
+    if (revoked) {
+      window.location.reload();
+      return;
+    }
+    closeBanner();
+    dispatchConsentEvent();
   };
 
   const handleShowModalClick = () => {
-    setShowModal(!showModal);
-    document.body.style.overflow = "hidden";
+    if (showCookieModal) {
+      closeCookieModal();
+    } else {
+      openCookieSettings();
+    }
   };
 
   const closeModal = () => {
-    setShowModal(false);
-    document.body.style.overflow = "auto";
+    closeCookieModal();
   };
 
   useEffect(() => {
     if (typeof window !== `undefined` && getCookie("showCookie") !== "false") {
-      setShowCookieConsent(true);
+      openCookieBanner();
     }
   }, []);
 
@@ -82,7 +151,7 @@ const CookieConsent = ({
     <>
       <div
         className={`${styles.cookieConsent} ${
-          (showCookieConsent && styles.show) || ""
+          (showCookieBanner && styles.show) || ""
         }`}
       >
         <div className={`${styles?.consent || ""}`}>
@@ -130,13 +199,14 @@ const CookieConsent = ({
           </div>
         </div>
       </div>
-      {settingsCookie && showModal && (
+      {settingsCookie && showCookieModal && (
         <Suspense fallback={null}>
           <CookieModal
             logo={logo}
-            hide={!showModal}
+            hide={!showCookieModal}
             handleAcceptCookies={handleAccept}
             handleDeclineCookies={handleDecline}
+            handleConfirmChoices={handleConfirmChoices}
             closeModal={closeModal}
           />
         </Suspense>

package/src/constants/cookies.js

@@ -57,6 +57,7 @@ const cookiesContent = {
     },
     categories: [
       {
+        cookieName: 'cookie_necessary',
         title: {
           label: 'Neccesary',
           translationKey: 'neccesary_cookie_title',
@@ -69,6 +70,7 @@ const cookiesContent = {
         hasToggle: false,
       },
       {
+        cookieName: 'cookie_analytical',
         title: {
           label: 'Analytical And Stadistical',
           translationKey: 'analytical_cookie_title',
@@ -81,6 +83,20 @@ const cookiesContent = {
         hasToggle: true,
       },
       {
+        cookieName: 'cookie_functionality',
+        title: {
+          label: 'Functionality',
+          translationKey: 'functionality_cookie_title',
+        },
+        description: {
+          label:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh aliquam non sit morbi neque in sodales tellus. Cursus neque sed quis tincidunt sed vestibulum rhoncus dolor elementum. Imperdiet tortor dolor sit nisi, magnis cras id ut. Id dolor, vel neque lobortis. Diam commodo vitae vulputate at ultrices id odio praesent. Nisi, sit massa orci accumsan.',
+          translationKey: 'functionality_cookie_text',
+        },
+        hasToggle: true,
+      },
+      {
+        cookieName: 'cookie_marketing',
         title: {
           label: 'Marketing',
           translationKey: 'marketing_cookie_title',

package/src/context/MainProvider.js

@@ -1,6 +1,11 @@
 /* eslint-disable react/prop-types */
 import React, { createContext, useState } from "react";
 
+const setBodyScrollLock = (locked) => {
+  if (typeof document === "undefined") return;
+  document.body.style.overflow = locked ? "hidden" : "auto";
+};
+
 export const Context = createContext();
 
 export default (props) => {
@@ -15,6 +20,29 @@ export default (props) => {
     topListFilters,
     setTopListFilters,
   };
+
+  const [showCookieBanner, setShowCookieBanner] = useState(false);
+  const [showCookieModal, setShowCookieModal] = useState(false);
+
+  const cookieConsentContext = {
+    showCookieBanner,
+    showCookieModal,
+    openCookieBanner: () => setShowCookieBanner(true),
+    openCookieSettings: () => {
+      setShowCookieModal(true);
+      setBodyScrollLock(true);
+    },
+    closeCookieModal: () => {
+      setShowCookieModal(false);
+      setBodyScrollLock(false);
+    },
+    closeCookieConsent: () => {
+      setShowCookieBanner(false);
+      setShowCookieModal(false);
+      setBodyScrollLock(false);
+    },
+  };
+
   return (
     <Context.Provider
       value={{
@@ -25,6 +53,7 @@ export default (props) => {
         setShowTranslationKeys,
         showTranslationKeys,
         topListContext,
+        cookieConsentContext,
       }}
     >
       {children}

package/src/helpers/cookies.mjs

@@ -19,3 +19,24 @@ export function getCookie(cname) {
   }
   return '';
 }
+
+export const isCookieConsentEnabled = () =>
+  process.env.GATSBY_COOKIE_CONSENT_ENABLED === 'true';
+
+export const hasLegacyAcceptAll = () => getCookie('CookieConsent') === 'true';
+
+// Per-category cookie is authoritative once set. Only fall back to the legacy
+// accept-all cookie when the per-category value is absent (pre-categories
+// users), so an explicit "false" doesn't get re-granted by the legacy flag.
+const isCategoryGranted = (cookieName) => {
+  if (!isCookieConsentEnabled()) return true;
+  const value = getCookie(cookieName);
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  return hasLegacyAcceptAll();
+};
+
+export const isAnalyticalGranted = () => isCategoryGranted('cookie_analytical');
+export const isMarketingGranted = () => isCategoryGranted('cookie_marketing');
+export const isFunctionalityGranted = () =>
+  isCategoryGranted('cookie_functionality');