gatsby-core-theme 44.22.3 → 44.23.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+# [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)
+
+
+### Bug Fixes
+
+* add as props the transaltions ([28b263c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/28b263c9b790482b35e8e3abab6cc16c9d94dc4e))
+* add new mode for spotlight ([ff84c7f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/ff84c7f124190ca5f7fee9dac749919b7cd61b8a))
+
+
+* Merge branch 'EN-266-Spotlight' into 'master' ([3c9b8a5](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3c9b8a599924ed5b0cb136c448d014b78ae8fdb8))
+
 ## [44.22.3](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.22.2...v44.22.3) (2026-04-27)
 
 

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.3",
+  "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/molecules/module/index.js

@@ -10,6 +10,7 @@ import Toplist from "~organisms/toplist";
 import AdminButton from "~atoms/admin/button";
 import Accordian from "~organisms/accordion";
 import Anchor from "~organisms/anchor/template-one";
+import getSpotlightComponent from "~molecules/spotlights_v2";
 
 const Modules = ({ module, page, pageContext, modulePosition }) => {
   const { admin } = useContext(Context) || {};
@@ -63,52 +64,7 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
       case "comments":
         return lazy(() => import("~organisms/comments"));
       case "spotlights":
-        if (module?.mode === "image_text") {
-          if (module?.style === "template_two") {
-            return lazy(() =>
-              import("~molecules/spotlights_v2/image-text/template-two")
-            );
-          }
-          if (module?.style === "template_three") {
-            return lazy(() =>
-              import("~molecules/spotlights_v2/image-text/template-three")
-            );
-          }
-          if (module?.style === "template_four") {
-            return lazy(() =>
-              import("~molecules/spotlights_v2/image-text/template-four")
-            );
-          }
-          if (module?.style === "template_five") {
-            return lazy(() =>
-              import("~molecules/spotlights_v2/image-text/template-five")
-            );
-          }
-           if (module?.style === "template_six") {
-            return lazy(() =>
-              import("~molecules/spotlights_v2/image-text/template-six")
-            );
-          }
-          return lazy(() =>
-            import("~molecules/spotlights_v2/image-text/template-one")
-          );
-        }
-        if (module?.mode === "icon") {
-          return lazy(() =>
-            import("~molecules/spotlights_v2/icon/template-one")
-          );
-        }
-        if (module?.mode === "image") {
-          if (module?.style === "template_two") {
-            return lazy(() =>
-              import("~molecules/spotlights_v2/image/template-two")
-            );
-          }
-          return lazy(() =>
-            import("~molecules/spotlights_v2/image/template-one")
-          );
-        }
-        break;
+        return getSpotlightComponent(module);
       case "disquss":
         return lazy(() => import(`~atoms/disquss`));
       default:

package/src/components/molecules/spotlights_v2/index.js

@@ -0,0 +1,42 @@
+import { lazy } from "react";
+
+const getSpotlightComponent = (module) => {
+  const { mode, style } = module || {};
+
+  if (mode === "image_text") {
+    switch (style) {
+      case "template_two":
+        return lazy(() => import("~molecules/spotlights_v2/image-text/template-two"));
+      case "template_three":
+        return lazy(() => import("~molecules/spotlights_v2/image-text/template-three"));
+      case "template_four":
+        return lazy(() => import("~molecules/spotlights_v2/image-text/template-four"));
+      case "template_five":
+        return lazy(() => import("~molecules/spotlights_v2/image-text/template-five"));
+      case "template_six":
+        return lazy(() => import("~molecules/spotlights_v2/image-text/template-six"));
+      default:
+        return lazy(() => import("~molecules/spotlights_v2/image-text/template-one"));
+    }
+  }
+
+  if (mode === "icon") {
+    return lazy(() => import("~molecules/spotlights_v2/icon/template-one"));
+  }
+
+  if (mode === "image") {
+    return style === "template_two"
+      ? lazy(() => import("~molecules/spotlights_v2/image/template-two"))
+      : lazy(() => import("~molecules/spotlights_v2/image/template-one"));
+  }
+
+  if (mode === "sport_odds") {    
+    return style === "template_two"
+      ? lazy(() => import("~molecules/spotlights_v2/sport-odds/template-two"))
+      : lazy(() => import("~molecules/spotlights_v2/sport-odds/template-one"));
+  }
+
+  return null;
+};
+
+export default getSpotlightComponent;

package/src/components/molecules/spotlights_v2/sport-odds/template-one/index.js

@@ -0,0 +1,153 @@
+import React from "react";
+import PropTypes from "prop-types";
+import keygen from "~helpers/keygen";
+import LazyImage from "~hooks/lazy-image";
+import Button from "../../../../atoms/button/operator-cta";
+import Tnc from '../../../tnc'
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import FunIcon from "../../../../../images/icons/funIcon";
+import styles from "./template-one.module.scss";
+
+const DEFAULT_CTA_TRANSLATE = {
+  active: { translationKey: 'play_now', defaultValue: 'Visit' },
+  not_recommended: {
+    translationKey: 'not_recommended',
+    defaultValue: 'Not Recommended'
+  },
+  coming_soon: {
+    translationKey: 'coming_soon',
+    defaultValue: 'Soon Available'
+  },
+  inactive: {
+    translationKey: 'inactive',
+    defaultValue: 'Not Accepting New Players'
+  },
+  blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' }
+};
+
+export default function TemplateOne({
+  module,
+  showOperatorHeader = false,
+  ctaTranslate = DEFAULT_CTA_TRANSLATE,
+}) {
+  const items = module?.items;
+  const ctaText = module?.link_text;
+  const date = useTranslate('date', 'Date:');
+  const funbetLabel = useTranslate('funbet', 'Funbet');
+
+  return (
+    <div className={styles.sportOdds}>
+      {(items || []).map((item) => {
+        const operatorName = item?.relation?.name;
+        const operatorLogo = item?.relation?.logo;
+
+        return (
+          <div key={keygen()} className={styles.card}>
+            <div className={styles.header}>
+              {
+                showOperatorHeader ?
+                  <>
+                    {operatorLogo?.url ? (
+                      <LazyImage
+                        src={operatorLogo.url}
+                        width={20}
+                        height={20}
+                        alt={operatorLogo.alt || operatorName}
+                      />
+                    ) : (
+                      <span className={styles.operatorIcon} aria-hidden="true" />
+                    )}
+                    {operatorName && <span>{operatorName}</span>}
+                  </> : <>
+                    <FunIcon />
+                    <span>{funbetLabel}</span>
+                  </>
+              }
+            </div>
+
+            <div className={styles.body}>
+              <div className={styles.main}>
+                <div className={styles.info}>
+                  {item?.main_title && (
+                    <p className={styles.title}>{item.main_title}</p>
+                  )}
+                  {item?.secondary_title && (
+                    <p className={styles.time}>{date}<span>{item.secondary_title}</span></p>
+                  )}
+                </div>
+
+                <div className={styles.action}>
+                  {(item?.odds_text || item?.odds_value) && (
+                    <div className={styles.odds}>
+                      {operatorLogo?.url && (
+                        <LazyImage
+                          src={operatorLogo.url}
+                          width={48}
+                          height={48}
+                          alt={operatorLogo.alt || operatorName}
+                        />
+                      )}
+                      <span>
+                        {item?.odds_text}
+                        {item?.odds_text && item?.odds_value ? ": " : ""}
+                        {item?.odds_value}
+                      </span>
+                    </div>
+                  )}
+
+                  <Button
+                    operator={item?.relation}
+                    buttonType="primary"
+                    buttonSize="m"
+                    btnText={ctaText}
+                    isInternalLink={false}
+                    targetBlank
+                    moduleName={module?.name}
+                    tracker={module?.bonus?.tracking_link_name || 'main'}
+                    translationsObj={ctaTranslate}
+                  />
+                </div>
+              </div>
+
+              <Tnc operator={item?.relation} tracker={item?.bonus?.tracking_link_name} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+    link_text: PropTypes.string,
+    name: PropTypes.string,
+    bonus: PropTypes.shape({
+      tracking_link_name: PropTypes.string,
+    }),
+  }),
+  showOperatorHeader: PropTypes.bool,
+  ctaTranslate: PropTypes.shape({
+    active: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    not_recommended: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    coming_soon: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    inactive: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    blacklisted: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+  }),
+};