gatsby-core-theme 44.22.4 → 44.23.1

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [44.23.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.23.0...v44.23.1) (2026-05-04)
+
+
+### Bug Fixes
+
+* improve style ([747562d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/747562de00430c2c623b499540648c3c35818e02))
+* separate context for cookie ([b99dcd1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b99dcd1dd37bca8cad937cdb67ecbbb37ce5c4cc))
+
+# [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.1",
   "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,13 +1,16 @@
 /* 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';
 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,22 +28,27 @@ const LinkList = ({
   gtmClass = '',
   showLinks = true,
 }) => {
+  const { openCookieSettings } = useContext(Context)?.cookieConsentContext || {};
+
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
 
-    const LinkImage = () => (
-      <LazyImage
-        src={imagePrettyUrl(
-          item.image || item.logo?.url?.split('.com/')[1],
-          width || item?.image_object?.width || item.logo?.width,
-          height || item?.image_object?.height || item.logo?.height
-        )}
-        alt={getAltText(item?.image_object || item.logo, item.title)}
-        width={width || item?.image_object?.width || item.logo?.width}
-        height={height || item?.image_object?.height || item.logo?.height}
-        loading={disableLazyLoad ? 'eager' : 'lazy'}
-      />
-    );
+    const imgWidth = width || item?.image_object?.width || item.logo?.width;
+    const imgHeight = height || item?.image_object?.height || item.logo?.height;
+    const imgEl =
+      (item.image || item.logo) ? (
+        <LazyImage
+          src={imagePrettyUrl(
+            item.image || item.logo?.url?.split('.com/')[1],
+            imgWidth,
+            imgHeight
+          )}
+          alt={getAltText(item?.image_object || item.logo, item.title)}
+          width={imgWidth}
+          height={imgHeight}
+          loading={disableLazyLoad ? 'eager' : 'lazy'}
+        />
+      ) : null;
 
     return (
       <>
@@ -48,49 +56,71 @@ const LinkList = ({
           <>
             {multiIcon ? icon : listIcon}
             <span>{item.title}</span>
-            {(item.image || item.logo) && <LinkImage />}
+            {imgEl}
           </>
         )}
-        {(item.image || item.logo) && imageOnly && <LinkImage />}
+        {imageOnly && imgEl}
       </>
     );
   }
 
-  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 getItemKey(item, index) {
+    return item?.value || item?.url || item?.title || item?.name || index;
+  }
+
+  function renderItems(item, index) {
+    return <li key={getItemKey(item, index)}>{renderLinkWrapper(item, index)}</li>;
+  }
+
   const renderSingleList = () => {
     return (
       <ul className={classes}>
@@ -102,13 +132,13 @@ const LinkList = ({
   };
 
   const renderLinklists = () => {
-    return lists.children.map((list) => {
+    return lists.children.map((list, listIndex) => {
       return (
-        <ul className={classes || ''} key={keygen()}>
-          {showListTitle && <li key={keygen()}>{list.title}</li>}
+        <ul className={classes || ''} key={list?.title || list?.value || listIndex}>
+          {showListTitle && <li key={`title-${list?.title || listIndex}`}>{list.title}</li>}
           {list.children &&
-            list.children.map((child) => {
-              return renderItems(child);
+            list.children.map((child, childIndex) => {
+              return renderItems(child, childIndex);
             })}
         </ul>
       );

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

@@ -1,5 +1,7 @@
-import React, { useRef } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import PropTypes from "prop-types";
+import { IoIosArrowBack } from "@react-icons/all-files/io/IoIosArrowBack";
+import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
 import keygen from "~helpers/keygen";
 import LazyImage from "~hooks/lazy-image";
 import Button from "../../../../atoms/button/operator-cta";
@@ -26,104 +28,167 @@ const DEFAULT_CTA_TRANSLATE = {
   blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' }
 };
 
+const BUTTON_SCROLL = 300;
+
 export default function TemplateTwo({
   module,
   showOperatorHeader = false,
   ctaTranslate = DEFAULT_CTA_TRANSLATE,
 }) {
   const container = useRef(null);
+  const [scrollX, setScrollX] = useState(0);
+  const [scrollEnd, setScrollEnd] = useState(false);
+  const [showButtons, setShowButtons] = useState(false);
+
   const items = module?.items;
   const ctaText = module?.link_text;
   const date = useTranslate('date', 'Date:');
   const funbetLabel = useTranslate('funbet', 'Funbet');
 
-  return (
-    <ScrollX refTag={container} scroll>
-      <div
-        ref={container}
-        className={styles.sportOdds}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-      >
-        {(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>
+  const updateButtons = (shift) => {
+    setScrollEnd(
+      Math.floor(container.current.scrollWidth - (container.current.scrollLeft + shift)) <=
+        container.current.offsetWidth
+    );
+  };
 
-              <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>
+  const scroll = (shift) => {
+    container.current.scrollTo({
+      left: container.current.scrollLeft + shift,
+      behavior: 'smooth',
+    });
+    updateButtons(shift);
+    setScrollX(scrollX + shift);
+  };
+
+  const onStopScrolling = () => {
+    setScrollX(container.current.scrollLeft);
+    updateButtons(0);
+  };
+
+  const onScroll = (scrollLeft) => {
+    updateButtons(0);
+    setScrollX(scrollLeft);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (container.current) {
+        setShowButtons(container.current.scrollWidth > container.current.offsetWidth);
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className={styles.wrapper}>
+      <ScrollX refTag={container} scroll stopScrolling={onStopScrolling} onScroll={onScroll}>
+        <div
+          ref={container}
+          className={styles.sportOdds}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+        >
+          {(items || []).map((item) => {
+            const operatorName = item?.relation?.name;
+            const operatorLogo = item?.relation?.logo;
 
-                  <div className={styles.action}>
-                    {(item?.odds_text || item?.odds_value) && (
-                      <div className={styles.odds}>
-                        {operatorLogo?.url && (
+            return (
+              <div key={keygen()} className={styles.card}>
+                <div className={styles.header}>
+                  {
+                    showOperatorHeader ?
+                      <>
+                        {operatorLogo?.url ? (
                           <LazyImage
                             src={operatorLogo.url}
-                            width={48}
-                            height={48}
+                            width={20}
+                            height={20}
                             alt={operatorLogo.alt || operatorName}
                           />
+                        ) : (
+                          <span className={styles.operatorIcon} aria-hidden="true" />
                         )}
-                        <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>
+                        {operatorName && <span>{operatorName}</span>}
+                      </> : <>
+                        <FunIcon />
+                        <span>{funbetLabel}</span>
+                      </>
+                  }
                 </div>
 
-                <Tnc operator={item?.relation} tracker={item?.bonus?.tracking_link_name} />
+                <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>
-          );
-        })}
-      </div>
-    </ScrollX>
+            );
+          })}
+        </div>
+      </ScrollX>
+      {showButtons && (
+        <div className={styles.navigation}>
+          <button
+            className={`${styles.navButton} ${scrollX <= 0 ? styles.disabled : ''}`}
+            onClick={() => scroll(-BUTTON_SCROLL)}
+            type="button"
+            aria-label="Previous"
+          >
+            <IoIosArrowBack />
+          </button>
+          <button
+            className={`${styles.navButton} ${scrollEnd ? styles.disabled : ''}`}
+            onClick={() => scroll(BUTTON_SCROLL)}
+            type="button"
+            aria-label="Next"
+          >
+            <IoIosArrowForward />
+          </button>
+        </div>
+      )}
+    </div>
   );
 }
 

package/src/components/molecules/spotlights_v2/sport-odds/template-two/template-two.module.scss

@@ -1,19 +1,80 @@
-.sportOdds {
+.wrapper {
   max-width: var(--main-container-max);
   margin: 0 auto;
 
+  @include flex-direction(column);
+
+  gap: 1.6rem;
+}
+
+.sportOdds {
   @include flex-direction(row);
   @include flex-align(stretch, start);
 
   gap: 1.6rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-
+  padding-bottom: 2rem;
+  
   &::-webkit-scrollbar {
+    height: 0.6rem;
+    border-radius: 0.6rem;
+
+    @include max(mobile) {
+      display: none;
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--spotlight-sport-odds-scrollbar-track, #E4E4E7);
+    border-radius: 0.6rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--spotlight-sport-odds-scrollbar-thumb, #3F3F46);
+    border-radius: 0.6rem;
+  }
+
+}
+
+.navigation {
+  @include flex-direction(row);
+  @include flex-align(center, flex-start);
+
+  gap: 0.8rem;
+
+  @include max(mobile) {
     display: none;
   }
 }
 
+.navButton {
+  @include flex-direction(row);
+  @include flex-align(center, center);
+
+  width: 4rem;
+  height: 4rem;
+  border-radius: 0.6rem;
+  background: var(--spotlight-sport-odds-nav-bg, #E4E4E7);
+  border: 0;
+  color: var(--spotlight-sport-odds-nav-text, #52525B);
+  cursor: pointer;
+  padding: 0;
+  font-size: 1.6rem;
+
+  &:hover {
+    background: var(--spotlight-sport-odds-nav-hover-bg, #E4E4E7);
+    color: var(--spotlight-sport-odds-nav-hover-text, #18181B);
+  }
+}
+
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+  background: var(--spotlight-sport-odds-nav-deactive-bg, #F4F4F5);
+}
+
 .card {
   flex: 0 0 auto;
   width: 28rem;

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,16 +2,19 @@
 /* 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, CookieVisibilityContext } from "~context/MainProvider";
 import styles from "./cookie-consent.module.scss";
 
 import cookiesContent from '../../../constants/cookies';
 import { parseCookieTextWithLinks } from '../../../helpers/generators.mjs'
 
+const CookieModal = lazy(() => import("../../molecules/cookie-modal"));
+
 const CookieConsent = ({
   settingsCookie,
   children,
@@ -20,12 +23,14 @@ const CookieConsent = ({
   icon = null,
   showRejectButton = false,
 }) => {
-  const [showModal, setShowModal] = useState(false);
-
-  const [showCookieConsent, setShowCookieConsent] = useState(false);
-
-  const CookieModal = lazy(() => import("../../molecules/cookie-modal"));
-
+  const {
+    openCookieBanner = () => {},
+    openCookieSettings = () => {},
+    closeCookieModal = () => {},
+    closeCookieConsent = () => {},
+  } = useContext(Context)?.cookieConsentContext || {};
+  const { showCookieBanner = false, showCookieModal = false } =
+    useContext(CookieVisibilityContext) || {};
 
   const shouldShowRejectButton =
     typeof cookiesContent.showRejectButton === "boolean"
@@ -44,37 +49,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 +150,7 @@ const CookieConsent = ({
     <>
       <div
         className={`${styles.cookieConsent} ${
-          (showCookieConsent && styles.show) || ""
+          (showCookieBanner && styles.show) || ""
         }`}
       >
         <div className={`${styles?.consent || ""}`}>
@@ -130,13 +198,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,7 +1,16 @@
 /* eslint-disable react/prop-types */
-import React, { createContext, useState } from "react";
+import React, { createContext, useState, useCallback, useMemo } from "react";
+
+const setBodyScrollLock = (locked) => {
+  if (typeof document === "undefined") return;
+  document.body.style.overflow = locked ? "hidden" : "auto";
+};
 
 export const Context = createContext();
+export const CookieVisibilityContext = createContext({
+  showCookieBanner: false,
+  showCookieModal: false,
+});
 
 export default (props) => {
   const { value, children } = props;
@@ -9,25 +18,77 @@ export default (props) => {
   const [showTranslationKeys, setShowTranslationKeys] = useState(false);
   const [showFilter, setShowFilter] = useState(false);
   const [topListFilters, setTopListFilters] = useState();
-  const topListContext = {
-    showFilter,
-    setShowFilter,
-    topListFilters,
-    setTopListFilters,
-  };
+
+  const topListContext = useMemo(
+    () => ({
+      showFilter,
+      setShowFilter,
+      topListFilters,
+      setTopListFilters,
+    }),
+    [showFilter, topListFilters]
+  );
+
+  const [showCookieBanner, setShowCookieBanner] = useState(false);
+  const [showCookieModal, setShowCookieModal] = useState(false);
+
+  const openCookieBanner = useCallback(() => setShowCookieBanner(true), []);
+  const openCookieSettings = useCallback(() => {
+    setShowCookieModal(true);
+    setBodyScrollLock(true);
+  }, []);
+  const closeCookieModal = useCallback(() => {
+    setShowCookieModal(false);
+    setBodyScrollLock(false);
+  }, []);
+  const closeCookieConsent = useCallback(() => {
+    setShowCookieBanner(false);
+    setShowCookieModal(false);
+    setBodyScrollLock(false);
+  }, []);
+
+  const cookieConsentContext = useMemo(
+    () => ({
+      openCookieBanner,
+      openCookieSettings,
+      closeCookieModal,
+      closeCookieConsent,
+    }),
+    [openCookieBanner, openCookieSettings, closeCookieModal, closeCookieConsent]
+  );
+
+  const cookieVisibility = useMemo(
+    () => ({ showCookieBanner, showCookieModal }),
+    [showCookieBanner, showCookieModal]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      translations: value.translations,
+      preview: value.isPreview,
+      language: value.language,
+      admin: value.admin,
+      setShowTranslationKeys,
+      showTranslationKeys,
+      topListContext,
+      cookieConsentContext,
+    }),
+    [
+      value.translations,
+      value.isPreview,
+      value.language,
+      value.admin,
+      showTranslationKeys,
+      topListContext,
+      cookieConsentContext,
+    ]
+  );
+
   return (
-    <Context.Provider
-      value={{
-        translations: value.translations,
-        preview: value.isPreview,
-        language: value.language,
-        admin: value.admin,
-        setShowTranslationKeys,
-        showTranslationKeys,
-        topListContext,
-      }}
-    >
-      {children}
+    <Context.Provider value={contextValue}>
+      <CookieVisibilityContext.Provider value={cookieVisibility}>
+        {children}
+      </CookieVisibilityContext.Provider>
     </Context.Provider>
   );
 };

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');