gatsby-matrix-theme 53.3.12 → 53.3.14

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [53.3.14](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.13...v53.3.14) (2025-11-05)
+
+
+### Bug Fixes
+
+* update core version ([ee8380f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/ee8380f27009c66ddaa2408481003fc91d0e44e6))
+
+## [53.3.13](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.12...v53.3.13) (2025-11-04)
+
+
+### Bug Fixes
+
+* add a new component on body ([15ea2ad](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/15ea2ad7ad8e39af754f44806723e7b37345ab4c))
+
+
+* Merge branch 'en-161-sticky-operator-banner' into 'master' ([305b65a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/305b65a540ac3b37a95928cd0465ddfb3d6c2958))
+
 ## [53.3.12](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.11...v53.3.12) (2025-10-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.3.12",
+  "version": "53.3.14",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.5.3",
+    "gatsby-core-theme": "44.6.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl } from '~helpers/getters';
+import LazyImage from '~hooks/lazy-image';
+import PrettyLink from '~atoms/pretty-link';
+import styles from './stickyOperatorBanner.module.scss';
+
+const StickyOperatorBanner = ({ data, template }) => {
+  const getRandomItem = (array) => {
+    if (!array || array.length === 0) return null;
+    const randomIndex = Math.floor(Math.random() * array.length);
+    return array[randomIndex];
+  };
+
+  const gif = data?.extra_fields?.gif;
+  const toplist = data?.modules?.find((module) => module.name === 'top_list');
+  const tracker = toplist?.items?.[0]?.tracker || 'main';
+  const randomItem = getRandomItem(toplist?.items?.[0]?.items);
+
+  if (!gif || !randomItem) return null; 
+
+  return (
+    <PrettyLink
+      operator={randomItem}
+      tracker={tracker}
+      template={template}
+      className={styles.container}
+    >
+      <LazyImage src={imagePrettyUrl(gif, 'auto', 'auto')} alt="Sticky Operator Banner" />
+    </PrettyLink>
+  );
+};
+
+StickyOperatorBanner.propTypes = {
+  data: PropTypes.shape({
+    extra_fields: PropTypes.shape({
+      gif: PropTypes.string,
+    }),
+    modules: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        items: PropTypes.arrayOf(
+          PropTypes.shape({
+            tracker: PropTypes.string,
+            
+            items: PropTypes.shape({}),
+          })
+        ),
+      })
+    ),
+  }),
+  template: PropTypes.string,
+};
+
+export default StickyOperatorBanner;

package/src/components/molecules/stickyOperatorBanner/stickyOperatorBanner.module.scss

@@ -0,0 +1,12 @@
+.container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 8.8rem;
+  z-index: 2;
+
+  img {
+    width: 100%;
+    height: 8.8rem;
+  };
+}

package/src/components/molecules/stickyOperatorBanner/stickyOperatorBanner.test.js

@@ -0,0 +1,79 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StickyOperatorBanner from ".";
+
+// Mock dependencies
+jest.mock('~helpers/getters', () => ({
+  imagePrettyUrl: jest.fn((url) => `pretty/${url}`),
+}));
+jest.mock('~hooks/lazy-image', () => (props) => <img data-testid="lazy-image" {...props} alt='Test' />);
+jest.mock('~atoms/pretty-link', () => (props) => (
+  <a data-testid="pretty-link" {...props}>
+    {props.children}
+  </a>
+));
+
+describe('StickyOperatorBanner', () => {
+  const mockData = {
+    extra_fields: { gif: 'banner.gif' },
+    modules: [
+      {
+        name: 'top_list',
+        items: [
+          {
+            tracker: 'test-tracker',
+            items: [
+              { id: 1, name: 'Operator A' },
+              { id: 2, name: 'Operator B' },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
+  it('renders banner with LazyImage and PrettyLink', () => {
+    render(<StickyOperatorBanner data={mockData} template="casino" />);
+
+    const image = screen.getByTestId('lazy-image');
+    const link = screen.getByTestId('pretty-link');
+
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'pretty/banner.gif');
+    expect(link).toBeInTheDocument();
+  });
+
+  it('renders null if gif is missing', () => {
+    const dataWithoutGif = { ...mockData, extra_fields: {} };
+    const { container } = render(<StickyOperatorBanner data={dataWithoutGif} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders null if toplist items missing', () => {
+    const dataWithoutItems = { ...mockData, modules: [] };
+    const { container } = render(<StickyOperatorBanner data={dataWithoutItems} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('uses default tracker if not provided', () => {
+    const dataNoTracker = {
+      extra_fields: { gif: 'banner.gif' },
+      modules: [
+        {
+          name: 'top_list',
+          items: [
+            {
+              items: [{ id: 1, name: 'Operator X' }],
+            },
+          ],
+        },
+      ],
+    };
+
+    render(<StickyOperatorBanner data={dataNoTracker} />);
+    const link = screen.getByTestId('pretty-link');
+    expect(link).toHaveAttribute('tracker', 'main');
+  });
+});

package/src/gatsby-core-theme/components/pages/body/index.js

@@ -16,6 +16,7 @@ import Popup from '../../../../components/organisms/popup';
 import LinkMenu from '../../../../components/atoms/link-menu';
 import { isSearchPath } from '~helpers/isSearchPath';
 import ExclusiveOperator from '../../../../components/molecules/operator-exclusive';
+import StickyOperatorBanner from '../../../../components/molecules/stickyOperatorBanner';
 import { setCookie, getCookie } from '~helpers/cookies';
 
 function Body({ pageContext, children, serverData }) {
@@ -35,6 +36,12 @@ function Body({ pageContext, children, serverData }) {
     pageContext
   );
 
+  const stickyOperatorBanner = getMarketSection(
+    pageTypes[template]?.operatorBannerSection || pageTypes.default.operatorBannerSection,
+    pageContext
+  );
+
+  
   const footer = pageTypes[template]?.disableFooter
     ? null
     : getMarketSection('footer', pageContext);
@@ -48,6 +55,8 @@ function Body({ pageContext, children, serverData }) {
 
   const excOperator = navigation?.modules.find((module) => module.name === 'bonus');
 
+  const toplistInStickyBanner = stickyOperatorBanner?.modules.find((module) => module.name === 'top_list');
+  
   const isContactUsPage = !!main?.modules?.filter((module) => module.name === 'contact_form')
     .length;
 
@@ -63,10 +72,15 @@ function Body({ pageContext, children, serverData }) {
   const exclusiveOperator =
     pageTypes[template]?.exclusiveOperator ?? pageTypes.default.exclusiveOperator;
 
+  const stickyOperator = pageTypes[template]?.stickyOperatorBanner ?? pageTypes.default.stickyOperatorBanner;
+    
   const disablePopup = pageTypes[template]?.disablePopup ?? pageTypes.default.disablePopup;
 
   const showExclusiveOperator = excOperator && pageType !== 'operator' && exclusiveOperator;
 
+  const showStickyOperatorBanner =
+    toplistInStickyBanner && pageType !== 'operator' && stickyOperator;
+
   const popupData = pageContext?.marketSections?.popup?.modules?.find((m) => m.name === 'top_list');
 
   const popupImage = pageContext?.marketSections?.popup?.extra_fields?.popup_image;  
@@ -133,6 +147,10 @@ function Body({ pageContext, children, serverData }) {
           image={popupImage}
         />
       )}
+      {showStickyOperatorBanner && (
+        <StickyOperatorBanner data={stickyOperatorBanner} template={template} />
+      )}
+
       <FloatingArea pageContext={pageContext} template={template} />
     </>
   );