gatsby-core-theme 44.0.16 → 44.0.18

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [44.0.18](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.17...v44.0.18) (2025-04-15)
+
+
+### Bug Fixes
+
+* added autocomplete implementation ([b32c30f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b32c30f99a56f26e5a1558e5afd34207c12edfb9))
+* added settings ([3e41337](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3e41337b18ca26a6bac09cd218b64382f37e6563))
+* conflicts ([9cfd59c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/9cfd59c5b2cdfd582fc6a3569d0183d662aae8e7))
+* tests ([f7141d4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/f7141d475210efec322f785da9211291ae4f9466))
+* update server ip ([90d2608](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/90d260864d808cb4c06732b1d1c25fad16b33d86))
+
+
+* Merge branch 'tm-4548-autocomplete' into 'master' ([779e0ae](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/779e0ae6ca6d46d22dcefe1cc2ee50d429e615c6))
+
+## [44.0.17](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.16...v44.0.17) (2025-04-14)
+
+
+### Bug Fixes
+
+* add alphabetical sorting ([a923c31](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/a923c3132448a4502a24eea457825fdeb955cb2e))
+
 ## [44.0.16](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.15...v44.0.16) (2025-04-14)
 
 

package/package.json

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

package/src/components/atoms/search/autocomplete/article/article.module.scss

@@ -0,0 +1,27 @@
+.row {
+  @include flex-align(center, start);
+
+  gap: .8rem;
+  width: 100%;
+  background-color: var(--color-7);
+  border-radius: .8rem;
+  padding: 1.2rem;
+
+  > a{
+    margin-left: auto;
+
+    > svg{
+      margin: 0 !important;
+    }
+  }
+}
+
+.operatorImage{
+  border-radius: .8rem;
+}
+
+.operatorTitle{
+  margin: 0 !important;
+  font-size: 1.6rem;
+  font-weight: 400;
+}

package/src/components/atoms/search/autocomplete/article/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import styles from './article.module.scss';
+
+const Article = ({ item = {} }) => (
+  <li className={styles.row || ''}>
+    <h3 className={styles.operatorTitle}>{item.title}</h3>
+    <Button
+      btnText=''
+      to={item?.path}
+      gtmClass="autocomplete-article-item-gtm btn-cta"
+      icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+    />
+  </li>
+);
+
+Article.propTypes = {
+  item: PropTypes.shape({
+    title: PropTypes.string,
+  }).isRequired,
+};
+
+export default Article;

package/src/components/atoms/search/autocomplete/default/default.module.scss

@@ -0,0 +1,27 @@
+.row {
+  @include flex-align(center, start);
+
+  gap: .8rem;
+  width: 100%;
+  background-color: var(--color-7);
+  border-radius: .8rem;
+  padding: 1.2rem;
+
+  > a{
+    margin-left: auto;
+
+    > svg{
+      margin: 0 !important;
+    }
+  }
+}
+
+.operatorImage{
+  border-radius: .8rem;
+}
+
+.operatorTitle{
+  margin: 0 !important;
+  font-size: 1.6rem;
+  font-weight: 400;
+}

package/src/components/atoms/search/autocomplete/default/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import styles from './default.module.scss';
+
+const Default = ({ item = {} }) => (
+  <li className={styles.row || ''}>
+    <h3 className={styles.operatorTitle}>{item.title}</h3>
+    <Button
+      btnText=''
+      to={item?.path}
+      gtmClass="autocomplete-article-item-gtm btn-cta"
+      icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+    />
+  </li>
+);
+
+Default.propTypes = {
+  item: PropTypes.shape({
+    title: PropTypes.string,
+  }).isRequired,
+};
+
+export default Default;

package/src/components/atoms/search/autocomplete/game/game.module.scss

@@ -0,0 +1,24 @@
+.row {
+  @include flex-align(center, start);
+
+  gap: .8rem;
+  width: 100%;
+  background-color: var(--color-7);
+  border-radius: .8rem;
+  padding: 1.2rem;
+
+  > a{
+    margin-left: auto;
+  }
+}
+
+.gameImage{
+  border-radius: .8rem;
+  height: revert-layer !important;
+}
+
+.gameTitle{
+  margin: 0 !important;
+  font-size: 1.6rem;
+  font-weight: 400;
+}

package/src/components/atoms/search/autocomplete/game/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl } from '~helpers/getters';
+import styles from './game.module.scss';
+
+const Game = ({ item = {}, width = 56, height = 56  }) => {
+  const { logo } = item;
+
+  return (
+    <li className={styles.row || ''}>
+      <LazyImage
+        className={styles.gameImage}
+        width={width}
+        height={height}
+        src={logo ? imagePrettyUrl(logo, width, height) : '/images/default-slot.jpg'}
+        alt={item.title}
+      />
+      <h3 className={styles.gameTitle}>{item.title}</h3>
+      <Button
+        to={item?.path}
+        gtmClass="autocomplete-game-item-gtm btn-cta"
+        icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+      />
+    </li>
+  );
+};
+
+Game.propTypes = {
+  item: PropTypes.shape({
+    title: PropTypes.string,
+    relation: PropTypes.shape({
+      logo: PropTypes.shape({}),
+    }),
+  }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default Game;

package/src/components/atoms/search/autocomplete/loading.js

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styles from './loading.module.scss';
+
+const Loading = ({ single = false }) => single ? 
+    (
+        <div className={styles.post}>
+            <div className={styles.avatar} />
+            <div className={styles.line} />
+            <div className={styles.line} />
+        </div>
+    ) : (
+        <div className={styles.container}>
+            <div className={styles.post}>
+                <div className={styles.avatar} />
+                <div className={styles.line} />
+                <div className={styles.line} />
+            </div>
+
+            <div className={styles.post}>
+                <div className={styles.avatar} />
+                <div className={styles.line} />
+                <div className={styles.line} />
+            </div>
+
+            <div className={styles.post}>
+                <div className={styles.avatar} />
+                <div className={styles.line} />
+                <div className={styles.line} />
+            </div>
+        </div>
+    );
+
+export default Loading;

package/src/components/atoms/search/autocomplete/loading.module.scss

@@ -0,0 +1,47 @@
+.post {
+  width: 220px;
+  height: 80px;
+
+  .avatar {    
+    float: left;
+    width: 52px;
+    height: 52px;
+    background-color: #ccc;
+    border-radius: 25%;
+    margin: 8px;
+    animation: loading 1.5s infinite ease-in-out;
+  }
+
+  .line {
+    float: left;
+    width: 140px;
+    height: 16px;
+    margin-top: 12px;
+    background-color: #ccc;
+    border-radius: 7px;
+    animation: loading 1.5s infinite ease-in-out;
+  }
+    
+  .avatar + .line {
+    margin-top: 11px;
+    width: 100px;
+  }
+
+  .line ~ .line {
+    background-color: #ddd;
+  }
+
+  @keyframes loading {
+    0% {
+      background-color: #ccc;
+    }
+
+    50% {
+      background-color: #e0e0e0;
+    }
+
+    100% {
+      background-color: #ccc;
+    }
+  }
+}

package/src/components/atoms/search/autocomplete/no-results.js

@@ -0,0 +1,9 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styles from './no-results.module.scss';
+
+const NoResults = ({ text }) => (
+    <p className={styles.noResults}>{text}</p>
+  );
+
+export default NoResults;

package/src/components/atoms/search/autocomplete/no-results.module.scss

@@ -0,0 +1,3 @@
+.noResults{
+    padding: 1.2rem;
+}

package/src/components/atoms/search/autocomplete/operator/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import Button from 'gatsby-core-theme/src/components/atoms/button/button';
+import LazyImage from '~hooks/lazy-image';
+import { imagePrettyUrl } from '~helpers/getters';
+import styles from './operator.module.scss';
+
+const Operator = ({ item = {}, width = 56, height = 56  }) => {
+  const { logo } = item;
+  return (
+    <li className={styles.row || ''}>
+      <LazyImage
+        className={styles.operatorImage}
+        width={width}
+        height={height}
+        src={imagePrettyUrl(logo, width, height)}
+        alt={item.title}
+      />
+      <h3 className={styles.operatorTitle}>{item.title}</h3>
+      <Button
+        to={item?.path}
+        gtmClass="autocomplete-operator-item-gtm btn-cta"
+        icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+      />
+    </li>
+  );
+};
+
+Operator.propTypes = {
+  item: PropTypes.shape({
+    title: PropTypes.string,
+    relation: PropTypes.shape({
+      logo: PropTypes.shape({}),
+    }),
+  }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default Operator;

package/src/components/atoms/search/autocomplete/operator/operator.module.scss

@@ -0,0 +1,23 @@
+.row {
+  @include flex-align(center, start);
+
+  gap: .8rem;
+  width: 100%;
+  background-color: var(--color-7);
+  border-radius: .8rem;
+  padding: 1.2rem;
+
+  > a{
+    margin-left: auto;
+  }
+}
+
+.operatorImage{
+  border-radius: .8rem;
+}
+
+.operatorTitle{
+  margin: 0 !important;
+  font-size: 1.6rem;
+  font-weight: 400;
+}

package/src/components/organisms/cards/cards.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';

package/src/components/organisms/navigation/navigation.test.js

@@ -3,36 +3,37 @@ import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import { getNavigationMenus } from '~tests/factories/sections/navigation.factory';
+import getPageData from '../../../../tests/factories/pages/default.factory';
 import Navigation from '.';
 
 const menuSection = getNavigationMenus(1, 2, true);
-
+const pageContext = {page: getPageData()}
 describe('Navigation Component', () => {
   test('render navigation', async () => {
-    const { container } = render(<Navigation section={menuSection} />);
+    const { container } = render(<Navigation pageContext={pageContext} section={menuSection} />);
 
     await waitFor(() => {
-      expect(container.querySelectorAll('.nav')).toBeTruthy();
+      expect(container.querySelectorAll('.nav')).toHaveLength(1);
       expect(container.querySelectorAll('.logo')).toHaveLength(1);
       expect(container.querySelectorAll('.menuContainer')).toHaveLength(1);
       expect(container.querySelectorAll('.search')).toHaveLength(1);
     });
   });
   test('render navigation when template is ppc', async () => {
-    const { container } = render(<Navigation section={menuSection} template="ppc" />);
+    const { container } = render(<Navigation pageContext={pageContext} section={menuSection} template="ppc" />);
 
     await waitFor(() => {
-      expect(container.querySelectorAll('.nav')).toBeTruthy();
+      expect(container.querySelectorAll('.nav')).toHaveLength(1);
       expect(container.querySelectorAll('.logo')).toHaveLength(1);
       expect(container.querySelectorAll('.menuContainer')).toHaveLength(0);
       expect(container.querySelectorAll('.search')).toHaveLength(0);
     });
   });
   test('render navigation without search', async () => {
-    const { container } = render(<Navigation section={menuSection} hasSearch={false} />);
+    const { container } = render(<Navigation pageContext={pageContext} section={menuSection} hasSearch={false} />);
 
     await waitFor(() => {
-      expect(container.querySelectorAll('.nav')).toBeTruthy();
+      expect(container.querySelectorAll('.nav')).toHaveLength(1);
       expect(container.querySelectorAll('.menuContainer')).toHaveLength(1);
       expect(container.querySelectorAll('.search')).toHaveLength(0);
     });

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

@@ -1,21 +1,39 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-console */
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { BiSearchAlt } from '@react-icons/all-files/bi/BiSearchAlt';
+import loadSource from '../../../helpers/search-source';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { toggleScroll } from '~helpers/scroll';
+import keygen from '~helpers/keygen';
+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 styles from './search.module.scss';
 
 const SearchForm = ({
+  pageContext,
   className,
   searchIcon,
   iconWidth = 24,
   iconHeight = 24,
   marketPrefix = '/',
+  startSearchAt = 3,
   isDisabled,
 }) => {
+  const { market, template } = pageContext.page;
   const [localSearch, setLocalSearch] = useState(false);
+
+  const [autoCompleteLoading, setAutoCompleteLoading] = useState(false);
+  const autoCompleteData = useRef(null);
+  const [filteredData, setFilteredData] = useState(null);
+  const [showAutoComplete, setShowAutoComplete] = useState(false);
+  const autocompleteEnabled = mainSettings[template]?.autocomplete || mainSettings?.default?.autocomplete;
+
   const [searchBoxQuery,] = useState();
   const searchInputRef = useRef();
   const searchFormRef = useRef();
@@ -45,6 +63,28 @@ const SearchForm = ({
     }
   };
 
+  const autoCompleteHandler = async (event) => {
+    const query = event.target.value.trim();
+    setShowAutoComplete(prevState => (query.length >= startSearchAt) !== prevState ? query.length >= startSearchAt : prevState);
+
+    setAutoCompleteLoading(true);
+
+    try {
+      autoCompleteData.current = autoCompleteData.current || await loadSource(market)
+
+      setFilteredData(autoCompleteData.current.filter(item => 
+        item.title.toLowerCase().includes(query.toLowerCase())
+      ));
+
+    } catch (error) {
+      console.error("Error loading autocomplete data:", error);
+    } finally {
+      setAutoCompleteLoading(false);
+    }
+  }
+
+
+
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (localSearch && searchFormRef.current && !searchFormRef.current.contains(event.target)) {
@@ -100,11 +140,30 @@ const SearchForm = ({
               maxLength="60"
               ref={searchInputRef}
               onKeyUp={(event) => {
+                autoCompleteHandler(event);
                 if (event.key === 'Enter') {
                   formSubmitBoxHandler(event);
                 }
               }}
             />
+            {showAutoComplete && autocompleteEnabled && (
+              <div className={styles.autoCompleteContainer}>
+                {autoCompleteLoading ? (
+                  <div className={styles.autoCompleteInner}>
+                    <Loading />
+                  </div>
+                ) : (
+                  <div className={styles.autoCompleteInner}>
+                    {filteredData.length ? <ul>
+                      {filteredData.map((value) => {
+                        const PageTypeCard = getComponent(value.pageType);
+                        return <Suspense fallback={<Loading single />} key={keygen()}><PageTypeCard item={value} /></Suspense>
+                      })}
+                    </ul> : <NoResults text={useTranslate('autocomplete_no_results', 'No Results Found')} />}
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -117,9 +176,15 @@ SearchForm.propTypes = {
   searchIcon: PropTypes.string,
   iconWidth: PropTypes.number,
   iconHeight: PropTypes.number,
-  pageContext: PropTypes.shape({}),
+  pageContext: PropTypes.shape({
+    page: PropTypes.shape({
+      market: PropTypes.string,
+      template: PropTypes.string
+    })
+  }),
   marketPrefix: PropTypes.string,
   isDisabled: PropTypes.bool,
+  startSearchAt: PropTypes.number
 };
 
 export default SearchForm;

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

@@ -67,3 +67,17 @@
     cursor: not-allowed;
   }
 }
+
+.autoCompleteContainer{
+  background-color: #fff;
+  margin-top: .8rem;
+  border-radius: .8rem;
+}
+
+.autoCompleteInner > ul{
+  @include flex-direction(column);
+
+  gap: .8rem;
+  padding: 1.2rem;
+
+}

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

@@ -8,5 +8,6 @@ export const mainSettings = {
   },
   default: {
     operator_banner: false,
+    autocomplete: false
   }
 }

package/src/helpers/autocomplete.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { lazy } from 'react';
+
+export function getComponent(type) {
+  switch (type) {
+    case 'operator':
+      return lazy(() => import(`../components/atoms/search/autocomplete/operator`));
+    case 'article':
+      return lazy(() => import(`../components/atoms/search/autocomplete/article`));
+    case 'game':
+      return lazy(() => import(`../components/atoms/search/autocomplete/game`));
+    default:
+        return lazy(() => import(`../components/atoms/search/autocomplete/default`));
+  }
+}

package/src/helpers/autocomplete.test.js

@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-expressions */
+import React, { Suspense } from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { getComponent } from "./autocomplete";
+
+describe("Autocomplete Get Component Helper", () => {
+  test("Autocomplete Get Component Operator", async () => {
+    const Component = getComponent('operator');
+    render(
+        <Suspense fallback={<></>}>
+            <Component item={{
+                title: 'Test Operator',
+                path: '/test'
+            }} />
+        </Suspense>
+    );
+    const link = await screen.findByRole('link'); // gets <a>
+    expect(link).toHaveAttribute('href', '/test');
+
+    const title = await screen.findByText('Test Operator');
+    expect(title).toBeInTheDocument();
+  });
+
+  test("Autocomplete Get Component Article", async () => {
+    const Component = getComponent('article');
+    render(
+        <Suspense fallback={<></>}>
+            <Component item={{
+                title: 'Test Article',
+                path: '/test'
+            }} />
+        </Suspense>
+    );
+    const link = await screen.findByRole('link'); // gets <a>
+    expect(link).toHaveAttribute('href', '/test');
+
+    const title = await screen.findByText('Test Article');
+    expect(title).toBeInTheDocument();
+  });
+
+  test("Autocomplete Get Component Game", async () => {
+    const Component = getComponent('game');
+    render(
+        <Suspense fallback={<></>}>
+            <Component item={{
+                title: 'Test Game',
+                path: '/test'
+            }} />
+        </Suspense>
+    );
+    const link = await screen.findByRole('link'); // gets <a>
+    expect(link).toHaveAttribute('href', '/test');
+
+    const title = await screen.findByText('Test Game');
+    expect(title).toBeInTheDocument();
+  });
+
+  test("Autocomplete Get Component Default", async () => {
+    const Component = getComponent('payment_methods');
+    render(
+        <Suspense fallback={<></>}>
+            <Component item={{
+                title: 'Test Default',
+                path: '/test'
+            }} />
+        </Suspense>
+    );
+    const link = await screen.findByRole('link'); // gets <a>
+    expect(link).toHaveAttribute('href', '/test');
+
+    const title = await screen.findByText('Test Default');
+    expect(title).toBeInTheDocument();
+  });
+});

package/src/helpers/getters.mjs

@@ -142,28 +142,32 @@ export function isBrowserWebpCompatable(feature, callback) {
 }
 
 export function imagePrettyUrl(
-  filename = "image.png",
+  filename,
   width = null,
   height = null
 ) {
-  const extension = getImageExtension(filename);
-
-  const hasFilters = extension !== "svg" && extension !== "gif";
-  const cdnURL =
-    (hasFilters
-      ? process.env.IMAGE_CDN_URL
-      : process.env.IMAGE_CDN_URL
-      ? process.env.IMAGE_CDN_URL.replace("/filters:format(webp)", "")
-      : "") || process.env.STORYBOOK_IMAGE_CDN_URL;
-
-  if (width && height && hasFilters) {
-    const urlPath = "/fit-in";
-    const urlSize = `/${width}x${height}`;
-
-    return `${cdnURL}${urlPath}${urlSize}/${filename}`;
+  if(filename){
+    const extension = getImageExtension(filename);
+
+    const hasFilters = extension !== "svg" && extension !== "gif";
+    const cdnURL =
+      (hasFilters
+        ? process.env.IMAGE_CDN_URL
+        : process.env.IMAGE_CDN_URL
+        ? process.env.IMAGE_CDN_URL.replace("/filters:format(webp)", "")
+        : "") || process.env.STORYBOOK_IMAGE_CDN_URL;
+  
+    if (width && height && hasFilters) {
+      const urlPath = "/fit-in";
+      const urlSize = `/${width}x${height}`;
+  
+      return `${cdnURL}${urlPath}${urlSize}/${filename}`;
+    }
+  
+    return `${cdnURL}/${filename}`;
   }
-
-  return `${cdnURL}/${filename}`;
+  return '/images/placeholder-image.jpg';
+  
 }
 
 export function getPageImage(page) {

package/src/helpers/processor/index.mjs

@@ -49,6 +49,7 @@ let relations = null;
 let menus = null;
 let prefilledMarketModules = null;
 let prefilledMarketModulesRaw = null;
+
 const searchData = {};
 
 export function processSitemapPages(pages, markets) {
@@ -82,8 +83,7 @@ export function processSitemapPages(pages, markets) {
 
 const groupByMarketAndType = (data) =>
   Object.values(data).reduce((acc, item) => {
-    const market = item.market;
-    const type = item.type;
+    const {market, type} = item;
 
     // Initialize language and type groupings if not already present
     if (!acc[market]) acc[market] = {};
@@ -364,7 +364,6 @@ export default {
       prefilledMarketModules = data.prefilled_market_modules || {};
       prefilledMarketModulesRaw = cloneDeep(data.prefilled_market_modules);
       searchData[market] = [];
-
       Object.keys(transformedPages[market]).forEach((pageType) => {
         transformedPages[market][pageType].forEach((page, index) => {
           const translations = translationsData
@@ -476,10 +475,19 @@ export default {
 
           // add search data
           if (searchTemplatesAcitve.includes(page.template) && searchEnabled) {
-            searchData[page.market].push(
-              clonePageForCards(
-                cloneDeep(transformedPages[market][pageType][index]),
-                '', data.content)
+            const { title, path, status, relation } = transformedPages[market][pageType][index];
+
+            const minimalPage = { 
+              title, 
+              pageType,
+              path, 
+              ...(relation?.short_name && { short_name: relation.short_name }), 
+              ...(relation?.logo && { logo: relation.logo.filename }),
+              ...(relation?.game_id && { game_id: relation.game_id })
+            };
+
+            status === 'active' && searchData[page.market].push(
+              cloneDeep(minimalPage)
             );
           }
 

package/src/helpers/processor/modules.mjs

@@ -256,6 +256,19 @@ export function processCardsV2(
           cardItems[b64].sort((a, b) => (a.created_at > b.created_at ? -1 : 1));
           module.items = cardItems[b64].slice(0, itemLimit);
         }
+      } else if (sortType === "alphabetical") {
+        if (cardItems[b64].length > 0) {
+          cardItems[b64].sort((a, b) => {
+            if (a.title < b.title) {
+              return -1;
+            }
+            if (a.title > b.title) {
+              return 1;
+            }
+            return 0;
+          });
+          module.items = module.cards_selector_filters_limit ? cardItems[b64].slice(0, module.cards_selector_filters_limit) : cardItems[b64];
+        }
       }
     }
   }

package/storybook/deploy.php

@@ -13,7 +13,7 @@ set('default_timeout', 960);
 set('allow_anonymous_stats', false);
 
 $hostNames = [
-    'storybook' => '82.196.10.160',
+    'storybook' => '167.99.18.218',
 ];
 
 // Storybook

package/src/components/atoms/search/autocomplete/article.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { IoMdArrowRoundForward } from '@react-icons/all-files/io/IoMdArrowRoundForward';
-
-import styles from './article.module.scss';
-
-const Article = ({ item = {} }) => (
-  <div className={styles.row || ''}>
-    <h3>{item.title}</h3>
-    <IoMdArrowRoundForward title="Right-pointing Arrow Icon" />
-  </div>
-);
-
-Article.propTypes = {
-  item: PropTypes.shape({
-    title: PropTypes.string,
-  }).isRequired,
-};
-
-export default Article;

package/src/components/atoms/search/autocomplete/article.module.scss

@@ -1,9 +0,0 @@
-.row {
-  @include flex-align(center, space-between);
-  background-color: white;
-  padding: 0 1rem;
-  border-top: 1px solid #ccc;
-  h3 {
-    font-size: 1.6rem;
-  }
-}

package/src/components/atoms/search/autocomplete/game.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import styles from './game.module.scss';
-
-const Game = ({ item = {} }) => (
-  <div className={styles.row || ''}>
-    <h3>{item.title}</h3>
-  </div>
-);
-
-Game.propTypes = {
-  item: PropTypes.shape({
-    title: PropTypes.string,
-  }).isRequired,
-};
-
-export default Game;

package/src/components/atoms/search/autocomplete/game.module.scss

@@ -1,9 +0,0 @@
-.row {
-  @include flex-align(center, space-between);
-  background-color: white;
-  padding: 0 1rem;
-  border-top: 1px solid #ccc;
-  h3 {
-    font-size: 1.6rem;
-  }
-}

package/src/components/atoms/search/autocomplete/operator.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import LazyImage from '~hooks/lazy-image';
-import { imagePrettyUrl } from '~helpers/getters';
-import OperatorCta from '~atoms/button/operator-cta';
-import styles from './operator.module.scss';
-
-const Operator = ({ item = {}, width = 56, height = 56 }) => {
-  const { relation } = item;
-  const img = relation?.logo?.filename;
-
-  return (
-    <div className={styles.row || ''}>
-      <LazyImage
-        width={width}
-        height={height}
-        src={imagePrettyUrl(img, width, height)}
-        alt={item.title}
-      />
-      <h3>{item.title}</h3>
-      <OperatorCta moduleName="search_autocomplete" operator={relation} gtmClass="toplist-operator-cta-gtm" />
-    </div>
-  );
-};
-
-Operator.propTypes = {
-  item: PropTypes.shape({
-    title: PropTypes.string,
-    relation: PropTypes.shape({
-      logo: PropTypes.shape({}),
-    }),
-  }).isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-};
-
-export default Operator;

package/src/components/atoms/search/autocomplete/operator.module.scss

@@ -1,12 +0,0 @@
-.row {
-  @include flex-align(center, space-between);
-  background-color: white;
-  padding: 0 1rem;
-  border-top: 1px solid #ccc;
-  img {
-    max-width: 6.5rem;
-  }
-  h3 {
-    font-size: 1.6rem;
-  }
-}