gatsby-core-theme 44.22.2 → 44.22.4

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [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)
+
+
+### Bug Fixes
+
+* add unlimited popup items feature ([3f94e3c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3f94e3cea9b3df95f3a8f47e2634d532c767c8b8))
+* fix test ([cc755db](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/cc755dbe11e633a0bad4c70690ac8df3482d6f55))
+
+
+* Merge branch 'add-unlimited-popup-items-feature' into 'master' ([6da3990](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/6da3990039afc5afad4880d1fb6ab10d7ff3a459))
+
 ## [44.22.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.22.1...v44.22.2) (2026-04-24)
 
 

package/package.json

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

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,
+    }),
+  }),
+};

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

@@ -0,0 +1,121 @@
+.sportOdds {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+
+  @include flex-direction(column);
+
+  gap: 1.6rem;
+}
+
+.card {
+  overflow: hidden;
+  background: var(--spotlight-sport-odds-card-bg, #F4F4F5);
+  border: 1px solid var(--spotlight-sport-odds-card-border, #D4D4D8);
+}
+
+.header {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  padding: .8rem 1.6rem;
+  background: var(--spotlight-sport-odds-header-bg, #3F3F46);
+  color: var(--spotlight-sport-odds-header-text, #fff);
+  font-size: 1.4rem;
+  font-weight: 700;
+
+  img, svg{
+    margin-right: .8rem;
+  }
+}
+
+.operatorIcon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 100%;
+  background: var(--spotlight-sport-odds-operator-icon-bg, #f4a62a);
+}
+
+.body {
+  padding: 1.6rem;
+
+  @include flex-direction(column);
+
+  gap: 1rem;
+}
+
+.main {
+  @include flex-direction(column);
+
+  gap: .8rem;
+
+  @include min(tablet) {
+    @include flex-direction(row);
+    @include flex-align(center, space-between);
+  }
+}
+
+.info {
+  @include flex-direction(column);
+
+  gap: 0.4rem;
+}
+
+.title {
+  color: var(--spotlight-sport-odds-title, #18181B);
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 2.7rem;
+  margin: 0;
+}
+
+.time {
+  color: var(--spotlight-sport-odds-text, #5c5c5c);
+  font-size: 1.4rem;
+  line-height: 2.1rem;
+  gap: .5rem;
+
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  >span{
+    font-weight: 700;
+  }
+}
+
+.action {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  gap: 1.2rem;
+
+  >a{
+    width: 100%;
+  }
+}
+
+.odds {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  gap: 0.8rem;
+  border-radius: 0.6rem;
+  background: var(--spotlight-sport-odds-odds-bg, #FFF);
+  color: var(--spotlight-sport-odds-odds-text, #1b1b1c);
+  border: 1px solid var(--spotlight-sport-odds-card-bg, #E4E4E7) ;
+  font-size: 1.3rem;
+  font-weight: 600;
+  min-width: 14.3rem;
+  min-height: 4.8rem;
+  width: 100%;
+}
+
+.oddsPartner {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.4rem;
+  background: var(--spotlight-sport-odds-partner-bg, #0a8537);
+  color: var(--spotlight-sport-odds-partner-text, #fff);
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+

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

@@ -0,0 +1,84 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import TemplateOne from '.';
+
+export default {
+  title: 'Theme/Modules/Spotlight/Sport Odds/Template One',
+  component: TemplateOne,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'Sport odds spotlight that renders a list of upcoming events with operator CTAs and tracker links.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateOne {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  module: {
+    mode: 'sport_odds',
+    style: 'template_one',
+    link_text: 'Play Now',
+    name: 'sport-odds-spotlight',
+    bonus: { tracking_link_name: 'main' },
+    items: [
+      {
+        main_title: 'Real Madrid – Barcelona',
+        secondary_title: '02/10/2026 18:45',
+        odds_text: 'Odds',
+        odds_value: '2.10',
+        relation: {
+          name: 'Funbet',
+          status: 'active',
+          links: { main: 'https://funbet.com' },
+          logo: {
+            url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/1680163403/betibet-logo.png',
+            alt: 'Funbet logo',
+          },
+        },
+        bonus: { tracking_link_name: 'main' },
+      },
+      {
+        main_title: 'Manchester United – Chelsea',
+        secondary_title: '03/10/2026 20:00',
+        odds_text: 'Odds',
+        odds_value: '1.85',
+        relation: {
+          name: 'Betway',
+          status: 'active',
+          links: { main: 'https://betway.com' },
+        },
+        bonus: { tracking_link_name: 'main' },
+      },
+      {
+        main_title: 'PSG – Bayern Munich',
+        secondary_title: '04/10/2026 21:00',
+        odds_text: 'Odds',
+        odds_value: '3.40',
+        relation: {
+          name: 'Bet365',
+          status: 'inactive',
+        },
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import TemplateOne from '.';
+
+const buildModule = () => ({
+  mode: 'sport_odds',
+  style: 'template_one',
+  link_text: 'Play now',
+  name: 'sport-odds-module',
+  bonus: { tracking_link_name: 'main' },
+  items: [
+    {
+      main_title: 'Real Madrid – Barcelona',
+      secondary_title: '02/10/2026 18:45',
+      odds_text: 'Odds',
+      odds_value: '2.10',
+      relation: {
+        name: 'Funbet',
+        status: 'active',
+        links: { main: 'https://funbet.com' },
+        logo: {
+          url: 'https://example.com/logo.png',
+          alt: 'Funbet logo',
+        },
+      },
+      bonus: { tracking_link_name: 'main' },
+    },
+    {
+      main_title: 'Manchester United – Chelsea',
+      relation: { name: 'Betway', status: 'inactive' },
+    },
+  ],
+});
+
+describe('Sport Odds TemplateOne Component', () => {
+  test('renders all items from module', () => {
+    const { container, getByText } = render(<TemplateOne module={buildModule()} />);
+    expect(container.querySelectorAll('div').length).toBeGreaterThan(0);
+    expect(getByText('Real Madrid – Barcelona')).toBeInTheDocument();
+    expect(getByText('Manchester United – Chelsea')).toBeInTheDocument();
+  });
+
+  test('renders odds text and value when provided', () => {
+    const { getByText } = render(<TemplateOne module={buildModule()} />);
+    expect(getByText(/Odds/)).toBeInTheDocument();
+    expect(getByText(/2\.10/)).toBeInTheDocument();
+  });
+
+  test('falls back to main tracker when bonus is missing', () => {
+    const module = buildModule();
+    delete module.bonus;
+    const { container } = render(<TemplateOne module={module} />);
+    expect(container.querySelectorAll('div').length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,162 @@
+import React, { useRef } 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 ScrollX from "~hooks/scroll-x";
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import FunIcon from "../../../../../images/icons/funIcon";
+import styles from "./template-two.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 TemplateTwo({
+  module,
+  showOperatorHeader = false,
+  ctaTranslate = DEFAULT_CTA_TRANSLATE,
+}) {
+  const container = useRef(null);
+  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>
+
+              <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>
+    </ScrollX>
+  );
+}
+
+TemplateTwo.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,
+    }),
+  }),
+};

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

@@ -0,0 +1,117 @@
+.sportOdds {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+
+  @include flex-direction(row);
+  @include flex-align(stretch, start);
+
+  gap: 1.6rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.card {
+  flex: 0 0 auto;
+  width: 28rem;
+  scroll-snap-align: start;
+  overflow: hidden;
+  background: var(--spotlight-sport-odds-card-bg, #F4F4F5);
+  border: 1px solid var(--spotlight-sport-odds-card-border, #D4D4D8);
+  box-shadow: 0 4px 6px -2px rgb(27 27 28 / 2%),
+    0 12px 16px -4px rgb(27 27 28 / 5%);
+
+  @include flex-direction(column);
+}
+
+.header {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  gap: 0.8rem;
+  padding: 1.2rem 1.6rem;
+  background: var(--spotlight-sport-odds-header-bg, #3F3F46);
+  color: var(--spotlight-sport-odds-header-text, #fff);
+  font-weight: 700;
+}
+
+.operatorIcon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 100%;
+  background: var(--spotlight-sport-odds-operator-icon-bg, #f4a62a);
+}
+
+.body {
+  padding: 1.6rem;
+
+  @include flex-direction(column);
+
+  gap: 1.2rem;
+  height: 100%;
+}
+
+.main {
+  @include flex-direction(column);
+
+  gap: 1.2rem;
+}
+
+.info {
+  @include flex-direction(column);
+
+  gap: 0.4rem;
+}
+
+.action {
+  @include flex-direction(column);
+
+  gap: 0.8rem;
+
+  > a {
+    width: 100%;
+  }
+}
+
+.title {
+  color: var(--spotlight-sport-odds-title, #18181B);
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 2.2rem;
+  margin: 0;
+}
+
+.time {
+  color: var(--spotlight-sport-odds-text, #5c5c5c);
+  font-size: 1.3rem;
+}
+
+.odds {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  gap: 0.8rem;
+  background: var(--spotlight-sport-odds-odds-bg, #FFF);
+  border: 1px solid var(--spotlight-sport-odds-card-bg, #E4E4E7);
+  color: var(--spotlight-sport-odds-odds-text, #1b1b1c);
+  font-weight: 600;
+  height: 4.8rem;
+  border-radius: .2rem;
+  box-sizing: border-box;
+
+  >img{
+    border-radius: .2rem;
+  }
+}
+
+.oddsPartner {
+  padding: 0.4rem 0.8rem;
+  border-radius: 0.4rem;
+  background: var(--spotlight-sport-odds-partner-bg, #0a8537);
+  color: var(--spotlight-sport-odds-partner-text, #fff);
+  font-size: 1.2rem;
+  font-weight: 700;
+}

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

@@ -0,0 +1,80 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import TemplateTwo from '.';
+
+export default {
+  title: 'Theme/Modules/Spotlight/Sport Odds/Template Two',
+  component: TemplateTwo,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'Horizontally scrollable sport odds spotlight rendering a list of upcoming events.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateTwo {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  module: {
+    mode: 'sport_odds',
+    style: 'template_two',
+    link_text: 'Bet Now',
+    name: 'sport-odds-spotlight',
+    bonus: { tracking_link_name: 'main' },
+    items: [
+      {
+        main_title: 'Real Madrid – Barcelona: Mais de 2,5 gols',
+        secondary_title: '02/10/2026 18:45',
+        odds_text: 'Quota',
+        odds_value: '12',
+        relation: {
+          name: 'Funbet',
+          status: 'active',
+          links: { main: 'https://funbet.com' },
+        },
+        bonus: { tracking_link_name: 'main' },
+      },
+      {
+        main_title: 'Manchester United – Chelsea: Resultado Exato',
+        secondary_title: '03/10/2026 20:00',
+        odds_text: 'Quota',
+        odds_value: '8',
+        relation: {
+          name: 'Betway',
+          status: 'active',
+          links: { main: 'https://betway.com' },
+        },
+        bonus: { tracking_link_name: 'main' },
+      },
+      {
+        main_title: 'PSG – Bayern Munich: Ambas Marcam',
+        secondary_title: '04/10/2026 21:00',
+        odds_text: 'Quota',
+        odds_value: '1.95',
+        relation: {
+          name: 'Bet365',
+          status: 'inactive',
+        },
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import TemplateTwo from '.';
+
+const buildModule = () => ({
+  mode: 'sport_odds',
+  style: 'template_two',
+  link_text: 'Bet now',
+  name: 'sport-odds-module',
+  bonus: { tracking_link_name: 'main' },
+  items: [
+    {
+      main_title: 'Real Madrid – Barcelona: Mais de 2,5 gols',
+      secondary_title: 'Início: 02/10/2026 18:45',
+      odds_text: 'Quota',
+      odds_value: '12',
+      relation: {
+        name: 'Funbet',
+        status: 'active',
+        links: { main: 'https://funbet.com' },
+        logo: {
+          url: 'https://example.com/logo.png',
+          alt: 'Funbet logo',
+        },
+      },
+      bonus: { tracking_link_name: 'main' },
+    },
+    {
+      main_title: 'Manchester United – Chelsea',
+      relation: { name: 'Betway', status: 'inactive' },
+    },
+  ],
+});
+
+describe('Sport Odds TemplateTwo Component', () => {
+  test('renders all items from module', () => {
+    const { container, getByText } = render(<TemplateTwo module={buildModule()} />);
+    expect(container.querySelectorAll('div').length).toBeGreaterThan(0);
+    expect(getByText('Real Madrid – Barcelona: Mais de 2,5 gols')).toBeInTheDocument();
+    expect(getByText('Manchester United – Chelsea')).toBeInTheDocument();
+  });
+
+  test('renders odds text and value when provided', () => {
+    const { getByText } = render(<TemplateTwo module={buildModule()} />);
+    expect(getByText(/Quota/)).toBeInTheDocument();
+    expect(getByText(/12/)).toBeInTheDocument();
+  });
+
+  test('falls back to main tracker when bonus is missing', () => {
+    const module = buildModule();
+    delete module.bonus;
+    const { container } = render(<TemplateTwo module={module} />);
+    expect(container.querySelectorAll('div').length).toBeGreaterThan(0);
+  });
+});

package/src/images/icons/funIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function FunIcon({ width = 24, height = 24 }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
+            <path d="M4 0.5H20C21.933 0.5 23.5 2.067 23.5 4V20C23.5 21.933 21.933 23.5 20 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4C0.5 2.067 2.067 0.5 4 0.5Z" fill="white" />
+            <path d="M4 0.5H20C21.933 0.5 23.5 2.067 23.5 4V20C23.5 21.933 21.933 23.5 20 23.5H4C2.067 23.5 0.5 21.933 0.5 20V4C0.5 2.067 2.067 0.5 4 0.5Z" stroke="#FACC15" />
+            <g clipPath="url(#clip0_7697_529)">
+                <path d="M17.9163 12.0004C17.9163 8.73279 15.2678 6.08355 12.0003 6.08337C8.73262 6.08337 6.08331 8.73268 6.08331 12.0004C6.08349 15.2679 8.73273 17.9164 12.0003 17.9164C15.2677 17.9162 17.9161 15.2678 17.9163 12.0004ZM14.1155 12.8246C14.3732 12.5449 14.8058 12.5007 15.1165 12.7338C15.4478 12.9823 15.5154 13.4522 15.2669 13.7836L14.6663 13.3334C15.2157 13.7454 15.2622 13.7804 15.2659 13.7836V13.7845L15.265 13.7855C15.2644 13.7863 15.2637 13.7875 15.263 13.7885C15.2616 13.7903 15.26 13.7928 15.2581 13.7953C15.2542 13.8003 15.2493 13.8065 15.2435 13.8138C15.2315 13.8289 15.2147 13.8485 15.1946 13.8724C15.1545 13.9203 15.098 13.9854 15.0257 14.0609C14.8816 14.2112 14.6716 14.4091 14.3997 14.6068C13.8586 15.0003 13.0401 15.4163 12.0003 15.4164C10.9605 15.4164 10.1421 15.0003 9.60089 14.6068C9.3289 14.409 9.11802 14.2113 8.97394 14.0609C8.90159 13.9854 8.84515 13.9203 8.80499 13.8724C8.78503 13.8486 8.76906 13.8289 8.75714 13.8138C8.75135 13.8065 8.74636 13.8003 8.74249 13.7953C8.74055 13.7928 8.73807 13.7903 8.73663 13.7885C8.73591 13.7875 8.73528 13.7863 8.73468 13.7855L8.7337 13.7845V13.7836C8.48525 13.4523 8.55202 12.9824 8.88312 12.7338C9.1938 12.5007 9.62646 12.545 9.88409 12.8246L9.93292 12.8832C9.93647 12.8877 9.94406 12.8962 9.95441 12.9086C9.97546 12.9336 10.0097 12.9735 10.0569 13.0228C10.1524 13.1225 10.2964 13.2584 10.4827 13.3939C10.8582 13.667 11.3737 13.9164 12.0003 13.9164C12.6266 13.9163 13.1415 13.6669 13.5169 13.3939C13.7031 13.2585 13.8472 13.1225 13.9427 13.0228C13.9901 12.9733 14.0252 12.9336 14.0462 12.9086C14.0564 12.8964 14.0631 12.8877 14.0667 12.8832L14.0677 12.8812L14.1155 12.8246ZM10.0062 9.25037C10.4204 9.25037 10.7562 9.58615 10.7562 10.0004C10.756 10.4144 10.4203 10.7504 10.0062 10.7504H10.0003C9.5862 10.7504 9.25048 10.4144 9.25031 10.0004C9.25031 9.58615 9.58609 9.25037 10.0003 9.25037H10.0062ZM14.0062 9.25037C14.4204 9.25037 14.7562 9.58615 14.7562 10.0004C14.756 10.4144 14.4203 10.7504 14.0062 10.7504H14.0003C13.5862 10.7504 13.2505 10.4144 13.2503 10.0004C13.2503 9.58615 13.5861 9.25037 14.0003 9.25037H14.0062ZM19.4163 12.0004C19.4161 16.0962 16.0962 19.4162 12.0003 19.4164C7.9043 19.4164 4.58349 16.0963 4.58331 12.0004C4.58331 7.90425 7.90419 4.58337 12.0003 4.58337C16.0963 4.58355 19.4163 7.90436 19.4163 12.0004Z" fill="#27272A" />
+            </g>
+            <defs>
+                <clipPath id="clip0_7697_529">
+                    <rect width="16" height="16" fill="white" transform="translate(4 4)" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}
+
+FunIcon.propTypes = {
+    width: PropTypes.number,
+    height: PropTypes.number,
+};

package/src/resolver/common.mjs

@@ -142,6 +142,7 @@ export function clean(object) {
 
 export function removeUnwantedSections(obj, pageType, ribbonsData) {
   const limit = process.env.RECOMMENDED_CASINOS_NUMBER || 3;
+  const unlimitedPopupItems = process.env.UNLIMITED_POPUP_ITEMS === "true";
   const marketSection = {
     games: ["post_main_games", "pre_main_games"],
     operator: [
@@ -181,9 +182,13 @@ export function removeUnwantedSections(obj, pageType, ribbonsData) {
         (key === "recommended_casinos" || key === "popup") &&
         Array.isArray(acc[key]?.modules?.[0]?.items?.[0]?.items)
       ) {
-        acc[key].modules[0].items[0].items = acc[
-          key
-        ].modules[0].items[0].items.slice(0, limit);
+        const shouldLimitItems = key !== "popup" || !unlimitedPopupItems;
+
+        if (shouldLimitItems) {
+          acc[key].modules[0].items[0].items = acc[
+            key
+          ].modules[0].items[0].items.slice(0, limit);
+        }
         const { items } = acc[key].modules[0].items[0];
 
         // Connect ribbons ID to label

package/src/resolver/common.test.js

@@ -135,6 +135,72 @@ describe("Common Helper", () => {
     });
   });
 
+  test("limits popup and recommended_casinos by default", () => {
+    const previousLimit = process.env.RECOMMENDED_CASINOS_NUMBER;
+    const previousUnlimitedUpper = process.env.UNLIMITED_POPUP_ITEMS;
+    process.env.RECOMMENDED_CASINOS_NUMBER = "2";
+    delete process.env.UNLIMITED_POPUP_ITEMS;
+
+    const sections = {
+      popup: {
+        modules: [{
+          items: [{
+            items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          }],
+        }],
+      },
+      recommended_casinos: {
+        modules: [{
+          items: [{
+            items: [{ id: 11 }, { id: 12 }, { id: 13 }],
+          }],
+        }],
+      },
+    };
+
+    const result = removeUnwantedSections(sections, "operator", {});
+    expect(result.popup.modules[0].items[0].items).toHaveLength(2);
+    expect(result.recommended_casinos.modules[0].items[0].items).toHaveLength(2);
+
+    if (previousLimit === undefined) delete process.env.RECOMMENDED_CASINOS_NUMBER;
+    else process.env.RECOMMENDED_CASINOS_NUMBER = previousLimit;
+    if (previousUnlimitedUpper === undefined) delete process.env.UNLIMITED_POPUP_ITEMS;
+    else process.env.UNLIMITED_POPUP_ITEMS = previousUnlimitedUpper;
+  });
+
+  test("does not limit popup when UNLIMITED_POPUP_ITEMS is true", () => {
+    const previousLimit = process.env.RECOMMENDED_CASINOS_NUMBER;
+    const previousUnlimitedUpper = process.env.UNLIMITED_POPUP_ITEMS;
+    process.env.RECOMMENDED_CASINOS_NUMBER = "2";
+    process.env.UNLIMITED_POPUP_ITEMS = "true";
+
+    const sections = {
+      popup: {
+        modules: [{
+          items: [{
+            items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          }],
+        }],
+      },
+      recommended_casinos: {
+        modules: [{
+          items: [{
+            items: [{ id: 11 }, { id: 12 }, { id: 13 }],
+          }],
+        }],
+      },
+    };
+
+    const result = removeUnwantedSections(sections, "operator", {});
+    expect(result.popup.modules[0].items[0].items).toHaveLength(3);
+    expect(result.recommended_casinos.modules[0].items[0].items).toHaveLength(2);
+
+    if (previousLimit === undefined) delete process.env.RECOMMENDED_CASINOS_NUMBER;
+    else process.env.RECOMMENDED_CASINOS_NUMBER = previousLimit;
+    if (previousUnlimitedUpper === undefined) delete process.env.UNLIMITED_POPUP_ITEMS;
+    else process.env.UNLIMITED_POPUP_ITEMS = previousUnlimitedUpper;
+  });
+
   test("removes null and undefined values from objects", () => {
     const input = { a: 1, b: null, c: undefined, d: 2 };
     const output = clean(input);