gatsby-core-theme 44.0.29 → 44.0.30

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [44.0.30](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.29...v44.0.30) (2025-05-05)
+
+
+### Bug Fixes
+
+* add checkers ([95f8ac7](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/95f8ac74e53cdbab0e420edaf29d3867a0d6a9cc))
+* add more tests ([2abb622](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2abb62253a36a451ba8b62b3152739e5e6bde7d9))
+* add more tests ([2f148e5](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2f148e56ed676ddfc96447f1f9679190b56de8ca))
+* enable recommended casino market ([d6a669f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/d6a669f0ff9f75d7b9d5073f4f3d0cca168de865))
+* update search page as well ([a49faf1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a49faf139e2e33f6479ffe6e3d8c01117c25509f))
+* update tests ([bab0968](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/bab09682b9ef87241d9eef4081fb5f7220b13331))
+
+
+* Merge branch 'add-checkers' into 'master' ([4666161](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/4666161d06ea6cf742e9917456085122dd10f4ff))
+* Merge branch 'tm-5434-enable-recommended-casino-market' into 'master' ([a481ab4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a481ab4cac0abec7cddda11b921ace2f426a9dd8))
+
 ## [44.0.29](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.28...v44.0.29) (2025-05-02)
 
 

package/gatsby-node.mjs

@@ -381,7 +381,7 @@ export const createPages = async (
         const contextData = clean({
           page,
           allMarkets: allMarketsData,
-          marketSections: removeUnwantedSections(marketSection, page.type),
+          marketSections: removeUnwantedSections(marketSection, page.type, ribbonsData),
           prefilledModules,
           siteGeneralData,
           autogenerated,

package/package.json

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

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

@@ -83,9 +83,8 @@ const Main = ({
       )}
       {pathPrefixes && (
         <Search
-          page={page}
           serverData={serverData}
-          allMarkets={pageContext.allMarkets}
+          pageContext={pageContext}
         />
       )}
       {Newsletter && (

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

@@ -12,18 +12,35 @@ import { sortDateOn, sortIntOn, sortStringOn } from '~helpers/search';
 import { getOrderedKeys } from '../../../helpers/getPrioritySortedKeys';
 import CustomSelect from '~atoms/custom-select';
 import Tabs from '~hooks/tabs';
+import { mainSettings } from "../../../constants/site-settings/main";
+import VariableComponent from "../../organisms/search/variableComponent";
 
 const Search = ({
-  page,
   serverData,
   pageSearchOptions,
   showNumberOfResults = true,
-  allMarkets,
+  pageContext,
 }) => {
+  const { page, allMarkets } = pageContext;
   const { data, searchParam } = serverData;
   const [sortQuery] = useState(pageSearchOptions.sort[0]);
   const [searchData, setSearchData] = useState(data);
   const activeMarket = allMarkets && allMarkets[page.market];
+  const { template } = page;
+
+  const recommendedCasinos =
+    pageContext?.marketSections?.recommended_casinos?.modules[0]?.items[0]
+      ?.items;
+  const topSearches =
+    pageContext?.marketSections?.top_searches?.modules[0]?.items;
+
+  const showRecommendedCasinos =
+    mainSettings[template]?.recommendedCasinos ||
+    mainSettings?.default?.recommendedCasinos;
+
+  const showTopSearches =
+    mainSettings[template]?.topSearches || mainSettings?.default?.topSearches;
+
   if (activeMarket) activeMarket.market = page?.market;
 
   const marketPrefix = activeMarket?.path_prefix || '/';
@@ -145,6 +162,16 @@ const Search = ({
             'no_search_data',
             'No data, please type keyword in textbox above'
           )}
+          {(showRecommendedCasinos || showTopSearches) && (
+            <VariableComponent
+              recommendedCasinos={recommendedCasinos}
+              topSearches={topSearches}
+              showRecommendedCasinos={showRecommendedCasinos}
+              showTopSearches={showTopSearches}
+              showAutoComplete={false}
+              autocompleteEnabled={false}
+            />
+          )}
         </div>
       )}
     </div>
@@ -156,7 +183,6 @@ Search.propTypes = {
     data: PropTypes.arrayOf(),
     searchParam: PropTypes.string,
   }),
-  allMarkets: PropTypes.shape({}),
   formSearchOptions: PropTypes.shape({
     autoComplete: PropTypes.bool,
     sort: PropTypes.bool,
@@ -193,16 +219,40 @@ Search.propTypes = {
     }),
   }),
   styles: PropTypes.shape({}),
-  page: PropTypes.shape({
-    translations: PropTypes.shape({}),
-    market: PropTypes.string,
-  }),
+  showNumberOfResults: PropTypes.bool,
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
+      translations: PropTypes.shape({}),
       market: PropTypes.string,
+      template: PropTypes.string,
+    }),
+    allMarkets: PropTypes.shape({}),
+    marketSections: PropTypes.shape({
+      recommended_casinos: PropTypes.shape({
+        modules: PropTypes.arrayOf(
+          PropTypes.shape({
+            items: PropTypes.arrayOf(
+              PropTypes.shape({
+                items: PropTypes.arrayOf(PropTypes.shape({})),
+              })
+            ),
+          })
+        ),
+      }),
+      top_searches: PropTypes.shape({
+        modules: PropTypes.arrayOf(
+          PropTypes.shape({
+            items: PropTypes.arrayOf(
+              PropTypes.shape({
+                title: PropTypes.string,
+                id: PropTypes.string,
+              })
+            ),
+          })
+        ),
+      }),
     }),
   }),
-  showNumberOfResults: PropTypes.bool,
 };
 
 export default Search;

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

@@ -20,6 +20,10 @@ describe('Search Component', () => {
           serverData={{ data: groupBy(data, 'type'), searchParam: 'casino' }}
           inputPlaceholder="Your Search"
           formSearchOptions={formSearchOptions}
+          pageContext={{
+            page: {},
+            allMarkets: [],
+          }}
           pageSearchOptions={{
             useArchive: true,
             archiveOptions: {

package/src/components/molecules/toplist/default-row/default-row.module.scss

@@ -35,6 +35,7 @@
 
   &.list {
     grid-template-columns: repeat(5, 1fr);
+    position: relative;
 
     @include max(tablet) {
       grid-template-columns: auto;

package/src/components/organisms/search/index.js

@@ -13,7 +13,7 @@ import { getComponent } from '../../../helpers/autocomplete';
 import Loading from '../../atoms/search/autocomplete/loading';
 import NoResults from '../../atoms/search/autocomplete/no-results';
 import { mainSettings } from '../../../constants/site-settings/main';
-
+import VariableComponent from './variableComponent';
 import styles from './search.module.scss';
 
 const SearchForm = ({
@@ -29,6 +29,9 @@ const SearchForm = ({
   autoCompleteIcon = <IoIosArrowForward title="Search Icon" />,
 }) => {
   const { market, template } = pageContext.page;
+  const recommendedCasinos = pageContext?.marketSections?.recommended_casinos?.modules[0]?.items[0]?.items
+  const topSearches = pageContext?.marketSections?.top_searches?.modules[0]?.items 
+  
   const [localSearch, setLocalSearch] = useState(false);
 
   const loadedCounts = {
@@ -46,6 +49,13 @@ const SearchForm = ({
   const [filteredData, setFilteredData] = useState(null);
   const [showAutoComplete, setShowAutoComplete] = useState(false);
   const autocompleteEnabled = mainSettings[template]?.autocomplete || mainSettings?.default?.autocomplete;
+  const showRecommendedCasinos =
+    mainSettings[template]?.recommendedCasinos ||
+    mainSettings?.default?.recommendedCasinos;
+
+  const showTopSearches =
+    mainSettings[template]?.topSearches ||
+    mainSettings?.default?.topSearches;
 
   const [searchBoxQuery,] = useState();
   const searchInputRef = useRef();
@@ -220,6 +230,16 @@ const SearchForm = ({
                 )}
               </div>
             )}
+            {(showRecommendedCasinos || showTopSearches) && (
+              <VariableComponent
+                recommendedCasinos={recommendedCasinos}
+                topSearches={topSearches}
+                showRecommendedCasinos={showRecommendedCasinos}
+                showTopSearches={showTopSearches}
+                showAutoComplete={showAutoComplete}
+                autocompleteEnabled={autocompleteEnabled}
+              />
+            )}
           </div>
         </div>
       )}
@@ -236,8 +256,33 @@ SearchForm.propTypes = {
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
       market: PropTypes.string,
-      template: PropTypes.string
-    })
+      template: PropTypes.string,
+    }),
+    marketSections: PropTypes.shape({
+      recommended_casinos: PropTypes.shape({
+        modules: PropTypes.arrayOf(
+          PropTypes.shape({
+            items: PropTypes.arrayOf(
+              PropTypes.shape({
+                items: PropTypes.arrayOf(PropTypes.shape({})),
+              })
+            ),
+          })
+        ),
+      }),
+      top_searches: PropTypes.shape({
+        modules: PropTypes.arrayOf(
+          PropTypes.shape({
+            items: PropTypes.arrayOf(
+              PropTypes.shape({
+                title: PropTypes.string,
+                id: PropTypes.string,
+              })
+            ),
+          })
+        ),
+      }),
+    }),
   }),
   marketPrefix: PropTypes.string,
   isDisabled: PropTypes.bool,

package/src/components/organisms/search/variableComponent/index.js

@@ -0,0 +1,57 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+import PropTypes from "prop-types";
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import Link from '~hooks/link';
+import Row from "../../../molecules/toplist/default-row";
+import styles from './searchVariableComponent.module.scss'
+
+const VariableComponent = ({
+  recommendedCasinos,
+  topSearches,
+  showRecommendedCasinos,
+  showTopSearches,
+  showAutoComplete,
+  autocompleteEnabled,
+}) => (
+  <div className={styles.searchVariableComponent}>
+    {showTopSearches && (
+      <div className={styles.topSearches}>
+        <p>Top Searches:</p>
+        {topSearches?.map((item) => (
+          <Link key={item.id} to={item.path}>
+            {item.title}
+          </Link>
+        ))}
+      </div>
+    )}
+    {showRecommendedCasinos &&
+      (!autocompleteEnabled || (autocompleteEnabled && !showAutoComplete)) && (
+        <>
+          <p className={styles.recommendedCasinosHeader}>
+            {useTranslate("recommendedCasinosHeader", "Recommended Casinos")}
+          </p>
+          {recommendedCasinos?.map((item) => (
+            <Row key={item.id} item={item} />
+          ))}
+        </>
+      )}
+  </div>
+);
+
+VariableComponent.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  recommendedCasinos: PropTypes.array.isRequired,
+  showRecommendedCasinos: PropTypes.bool,
+  showTopSearches: PropTypes.bool,
+  showAutoComplete: PropTypes.bool,
+  autocompleteEnabled: PropTypes.bool,
+  topSearches: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      title: PropTypes.string,
+    })
+  ).isRequired,
+};
+
+export default VariableComponent;

package/src/components/organisms/search/variableComponent/searchVariableComponent.module.scss

@@ -0,0 +1,16 @@
+
+
+.searchVariableComponent {
+  background: #fff;
+  padding: 2.4rem;
+
+  @include flex-direction(column);
+
+  gap: 1.6rem;
+}
+
+.topSearches {
+  display: flex;
+  gap: 1rem;
+  color: #000;
+}

package/src/components/organisms/search/variableComponent/searchVariableComponent.test.js

@@ -0,0 +1,114 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import VariableComponent from "./index";
+import "@testing-library/jest-dom";
+
+jest.mock("~hooks/useTranslate/useTranslate", () =>
+  jest.fn().mockReturnValue("Recommended Casinos")
+);
+
+describe("VariableComponent", () => {
+  const recommendedCasinos = [
+    { id: 1, title: "Casino 1", path: "/casino-1" },
+    { id: 2, title: "Casino 2", path: "/casino-2" },
+  ];
+
+  const topSearches = [
+    { id: 1, title: "Search 1", path: "/search-1" },
+    { id: 2, title: "Search 2", path: "/search-2" },
+  ];
+
+  it("should render Top Searches when showTopSearches is true", () => {
+    render(
+      <VariableComponent
+        recommendedCasinos={recommendedCasinos}
+        topSearches={topSearches}
+        showRecommendedCasinos={false}
+        showTopSearches
+        showAutoComplete={false}
+      />
+    );
+
+    expect(screen.getByText("Top Searches:")).toBeInTheDocument();
+
+    topSearches.forEach((item) => {
+      expect(screen.getByText(item.title)).toBeInTheDocument();
+    });
+  });
+
+  it("should not render Recommended Casinos when showAutoComplete is true", () => {
+    render(
+      <VariableComponent
+        recommendedCasinos={recommendedCasinos}
+        topSearches={topSearches}
+        showRecommendedCasinos
+        showTopSearches={false}
+        showAutoComplete
+        autocompleteEnabled
+      />
+    );
+
+    expect(screen.queryByText("Recommended Casinos")).toBeNull();
+  });
+
+  it("should render the correct links for Top Searches", () => {
+    render(
+      <VariableComponent
+        recommendedCasinos={recommendedCasinos}
+        topSearches={topSearches}
+        showRecommendedCasinos={false}
+        showTopSearches
+        showAutoComplete={false}
+      />
+    );
+
+    topSearches.forEach((item) => {
+      const link = screen.getByText(item.title);
+      expect(link).toHaveAttribute("href", item.path);
+    });
+  });
+
+  it("should render the Recommended Casinos header with translation", () => {
+    render(
+      <VariableComponent
+        recommendedCasinos={recommendedCasinos}
+        topSearches={topSearches}
+        showRecommendedCasinos
+        showTopSearches={false}
+        showAutoComplete={false}
+      />
+    );
+
+    expect(screen.getAllByText("Recommended Casinos")).toHaveLength(3);
+  });
+  it("should render nothing when both showTopSearches and showRecommendedCasinos are false", () => {
+    render(
+      <VariableComponent
+        recommendedCasinos={recommendedCasinos}
+        topSearches={topSearches}
+        showRecommendedCasinos={false}
+        showTopSearches={false}
+        showAutoComplete={false}
+      />
+    );
+
+    expect(screen.queryByText("Top Searches:")).toBeNull();
+    expect(screen.queryByText("Recommended Casinos")).toBeNull();
+  });
+  it("should not render Recommended Casinos when showRecommendedCasinos is false regardless of other flags", () => {
+    render(
+      <VariableComponent
+        recommendedCasinos={recommendedCasinos}
+        topSearches={topSearches}
+        showRecommendedCasinos={false}
+        showTopSearches={false}
+        showAutoComplete={false}
+        autocompleteEnabled={false}
+      />
+    );
+
+    expect(screen.queryByText("Recommended Casinos")).toBeNull();
+  });
+
+
+});

package/src/components/pages/search/index.js

@@ -5,13 +5,15 @@ import Search from '~molecules/search';
 import Card from '~atoms/cards/default-card';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 
-const SearchContent = ({ page, serverData, allMarkets }) => {
+const SearchContent = ({ serverData, pageContext }) => {
+  const { page, allMarkets } = pageContext;
   const searchURLPageName = page.path;
   return (
     <Search
       serverData={serverData}
       searchURLPageName={searchURLPageName}
       page={page}
+      pageContext={pageContext}
       pageSearchOptions={{
         useArchive: true,
         archiveOptions: {
@@ -80,13 +82,15 @@ const SearchContent = ({ page, serverData, allMarkets }) => {
 
 SearchContent.propTypes = {
   serverData: PropTypes.shape({}),
-  allMarkets: PropTypes.shape({}),
-  page: PropTypes.shape({
-    template: PropTypes.string,
-    path: PropTypes.string,
-    updated_at: PropTypes.string,
-    created_at: PropTypes.string,
-    translations: PropTypes.shape({}),
+  pageContext: PropTypes.shape({
+    allMarkets: PropTypes.shape({}),
+    page: PropTypes.shape({
+      template: PropTypes.string,
+      path: PropTypes.string,
+      updated_at: PropTypes.string,
+      created_at: PropTypes.string,
+      translations: PropTypes.shape({}),
+    }),
   }),
 };
 

package/src/constants/site-settings/main.js

@@ -8,6 +8,8 @@ export const mainSettings = {
   },
   default: {
     operator_banner: false,
-    autocomplete: false
-  }
-}
+    autocomplete: false,
+    recommendedCasinos: true,
+    topSearches: true,
+  },
+};

package/src/helpers/processor/common.mjs

@@ -138,14 +138,31 @@ export function clean(object) {
   return object;
 }
 
-export function removeUnwantedSections(obj, pageType) {
+export function removeUnwantedSections(obj, pageType, ribbonsData) {
 
   const marketSection = {
     games: ["post_main_games"],
-    operator: ['post_main_operators', "pre_main_operators", "recommended_casinos"],
-    article: ['post_main_articles'],
-    default: ['footer', 'links', 'navigation', 'popup', 'rg_navigation', 'sidebar', 'footer_navigation', 'top_menu', 'sidebar_navigation']
-  }
+    operator: [
+      "post_main_operators",
+      "pre_main_operators",
+      "recommended_casinos",
+      "top_searches",
+    ],
+    article: ["post_main_articles"],
+    default: [
+      "footer",
+      "links",
+      "navigation",
+      "popup",
+      "rg_navigation",
+      "sidebar",
+      "footer_navigation",
+      "top_menu",
+      "sidebar_navigation",
+      "recommended_casinos",
+      "top_searches",
+    ],
+  };
 
   // Get sections to keep: merge default sections and specific sections for the key
   const sectionsToKeep = new Set([
@@ -157,7 +174,31 @@ export function removeUnwantedSections(obj, pageType) {
   const filteredObject = Object.keys(obj).reduce((acc, key) => {
     if (sectionsToKeep.has(key)) {
       acc[key] = obj[key];
+
+      if (
+        key === "recommended_casinos" &&
+        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, 3);
+        const { items } = acc[key].modules[0].items[0];
+
+        // Connect ribbons ID to label
+        items.forEach((item) => {
+          if (item.ribbons?.length) {
+            item.ribbons = item.ribbons.map((ribbon) => {
+              if (typeof ribbon === "number") {
+                const label = ribbonsData[ribbon]?.label;
+                return label ?? null;
+              }
+              return ribbon;
+            });
+          }
+        });
+      }
     }
+
     return acc;
   }, {});
 

package/src/helpers/processor/operators.test.js

@@ -18,6 +18,23 @@ describe("Sanitize Operator Data", () => {
     expect(sanitizedOperator.ribbons).toHaveLength(1);
     expect(sanitizedOperator.ribbons[0]).toBe('testRibbon');
   });
+  test("Handles missing optional fields gracefully", () => {
+    const operatorData = {
+      name: "Test Casino",
+      ribbons: [null, "customLabel", 2],
+      operator_url: "/test-url",
+    };
+    const operatorPage = [{}];
+    const relations = { ribbons: { 2: { label: "fromRelations" } } };
+
+    const result = sanitizeOperatorData(operatorData, operatorPage, relations);
+
+    expect(result.name).toBe("Test Casino");
+    expect(result.url).toBe("/test-url");
+    expect(result.ribbons).toEqual(["customLabel", "fromRelations"]);
+    expect(result.author_name).toBeUndefined();
+  });
+
 
   // test("Sanitize Data with Transformed Pages Object", () => {
   //   const operatorsData = {