gatsby-core-theme 44.0.22 → 44.0.24

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [44.0.24](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.23...v44.0.24) (2025-04-23)
+
+
+### Bug Fixes
+
+* added a class ([c489c96](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/c489c965d506f3dab762a506a86f82aec0f72c04))
+* added a condition ([2d2811a](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2d2811aad40c038bcb8f51de7740d8483242dcf9))
+* search autocomplete ([148c853](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/148c8535ca29639387b091db2db7a82c83f1e3ce))
+* search autocomplete ([d7b68c0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/d7b68c0b6385e0be4e3f74479deb8321e35a3e3b))
+
+
+* Merge branch 'tm-5397-autocomplete-functions' into 'master' ([8eec763](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/8eec763c9e1e8bc2a3a039cd169e71ce1fd7b83e))
+
+## [44.0.23](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.22...v44.0.23) (2025-04-23)
+
+
+### Bug Fixes
+
+* autocomplete ([3ab3ece](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/3ab3ece020d94e6df3ad15ab8bef9e8442f7f311))
+
 ## [44.0.22](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.0.21...v44.0.22) (2025-04-21)
 
 

package/package.json

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

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

@@ -3,7 +3,7 @@
 
   gap: .8rem;
   width: 100%;
-  background-color: var(--color-7);
+      background-color: var(--autocomplete-bg, #FFF);
   border-radius: .8rem;
   padding: 1.2rem;
 

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

@@ -4,14 +4,14 @@ 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 = {} }) => (
+const Article = ({ item = {}, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => (
   <li className={styles.row || ''}>
     <h3 className={styles.operatorTitle}>{item.title}</h3>
     <Button
-      btnText=''
+      btnText={btnText}
       to={item?.path}
       gtmClass="autocomplete-article-item-gtm btn-cta"
-      icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+      icon={icon}
     />
   </li>
 );
@@ -20,6 +20,8 @@ Article.propTypes = {
   item: PropTypes.shape({
     title: PropTypes.string,
   }).isRequired,
+  btnText: PropTypes.string,
+  icon: PropTypes.node,
 };
 
 export default Article;

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

@@ -3,7 +3,7 @@
 
   gap: .8rem;
   width: 100%;
-  background-color: var(--color-7);
+      background-color: var(--autocomplete-bg, #FFF);
   border-radius: .8rem;
   padding: 1.2rem;
 

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

@@ -4,14 +4,14 @@ 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 = {} }) => (
+const Default = ({ item = {}, btnText='', icon=<FaArrowRight title="Right-pointing Arrow Icon" /> }) => (
   <li className={styles.row || ''}>
     <h3 className={styles.operatorTitle}>{item.title}</h3>
     <Button
-      btnText=''
+      btnText={btnText}
       to={item?.path}
       gtmClass="autocomplete-article-item-gtm btn-cta"
-      icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+      icon={icon}
     />
   </li>
 );
@@ -20,6 +20,8 @@ Default.propTypes = {
   item: PropTypes.shape({
     title: PropTypes.string,
   }).isRequired,
+  btnText: PropTypes.string,
+    icon: PropTypes.node,
 };
 
 export default Default;

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

@@ -3,7 +3,7 @@
 
   gap: .8rem;
   width: 100%;
-  background-color: var(--color-7);
+      background-color: var(--autocomplete-bg, #FFF);
   border-radius: .8rem;
   padding: 1.2rem;
 

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

@@ -6,7 +6,7 @@ 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 Game = ({ item = {}, width = 56, height = 56, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => {
   const { logo } = item;
 
   return (
@@ -20,9 +20,10 @@ const Game = ({ item = {}, width = 56, height = 56  }) => {
       />
       <h3 className={styles.gameTitle}>{item.title}</h3>
       <Button
+        btnText={btnText}
         to={item?.path}
         gtmClass="autocomplete-game-item-gtm btn-cta"
-        icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+        icon={icon}
       />
     </li>
   );
@@ -37,6 +38,8 @@ Game.propTypes = {
   }).isRequired,
   width: PropTypes.number,
   height: PropTypes.number,
+  btnText: PropTypes.string,
+    icon: PropTypes.node,
 };
 
 export default Game;

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

@@ -6,7 +6,7 @@ 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 Operator = ({ item = {}, width = 56, height = 56, btnText = '', icon = <FaArrowRight title="Right-pointing Arrow Icon" /> }) => {
   const { logo } = item;
   return (
     <li className={styles.row || ''}>
@@ -20,8 +20,9 @@ const Operator = ({ item = {}, width = 56, height = 56  }) => {
       <h3 className={styles.operatorTitle}>{item.title}</h3>
       <Button
         to={item?.path}
+        btnText={btnText}
         gtmClass="autocomplete-operator-item-gtm btn-cta"
-        icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+        icon={icon}
       />
     </li>
   );
@@ -36,6 +37,8 @@ Operator.propTypes = {
   }).isRequired,
   width: PropTypes.number,
   height: PropTypes.number,
+  btnText: PropTypes.string,
+    icon: PropTypes.node,
 };
 
 export default Operator;

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

@@ -3,7 +3,7 @@
 
   gap: .8rem;
   width: 100%;
-  background-color: var(--color-7);
+      background-color: var(--autocomplete-bg, #FFF);
   border-radius: .8rem;
   padding: 1.2rem;
 

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

@@ -4,6 +4,7 @@
 import React, { useRef, useState, useEffect, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { BiSearchAlt } from '@react-icons/all-files/bi/BiSearchAlt';
+import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
 import loadSource from '../../../helpers/search-source';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { toggleScroll } from '~helpers/scroll';
@@ -17,6 +18,7 @@ import styles from './search.module.scss';
 
 const SearchForm = ({
   pageContext,
+  loadAutoComplete = 5,
   className,
   searchIcon,
   iconWidth = 24,
@@ -24,10 +26,21 @@ const SearchForm = ({
   marketPrefix = '/',
   startSearchAt = 3,
   isDisabled,
+  autoCompleteIcon = <IoIosArrowForward title="Search Icon" />,
 }) => {
   const { market, template } = pageContext.page;
   const [localSearch, setLocalSearch] = useState(false);
 
+  const loadedCounts = {
+    page: loadAutoComplete,
+    operator: loadAutoComplete,
+    game: loadAutoComplete,
+    article: loadAutoComplete,
+    author: loadAutoComplete,
+    payment_method: loadAutoComplete,
+    software_provider: loadAutoComplete,
+  };
+
   const [autoCompleteLoading, setAutoCompleteLoading] = useState(false);
   const autoCompleteData = useRef(null);
   const [filteredData, setFilteredData] = useState(null);
@@ -38,6 +51,7 @@ const SearchForm = ({
   const searchInputRef = useRef();
   const searchFormRef = useRef();
 
+
   const handleOnSearchIconClick = () => {
     setLocalSearch(!localSearch);
     toggleScroll('search');
@@ -72,7 +86,7 @@ const SearchForm = ({
     try {
       autoCompleteData.current = autoCompleteData.current || await loadSource(market)
 
-      setFilteredData(autoCompleteData.current.filter(item => 
+      setFilteredData(autoCompleteData.current.filter(item =>
         item.title.toLowerCase().includes(query.toLowerCase())
       ));
 
@@ -104,15 +118,21 @@ const SearchForm = ({
     if (localSearch) searchInputRef.current.focus();
   }, [localSearch]);
 
+  // Group data by pageType
+  const groupedData = filteredData?.reduce((acc, item) => {
+    acc[item.pageType] = acc[item.pageType] || [];
+    acc[item.pageType].push(item);
+    return acc;
+  }, {});
+
   return (
     <div className={className || ''} ref={searchFormRef}>
       <button
         type="button"
         aria-label="Search"
         onClick={handleOnSearchIconClick}
-        className={`${styles.searchButton || ''} ${
-          localSearch && (styles.active || '')
-        } search-gtm btn-cta`}
+        className={`${styles.searchButton || ''} ${localSearch && (styles.active || '')
+          } search-gtm btn-cta`}
         disabled={isDisabled}
       >
         {searchIcon === null ? (
@@ -154,12 +174,48 @@ const SearchForm = ({
                   </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')} />}
+                    {filteredData.length ? (
+                      <ul>
+                        {Object.entries(groupedData).map(([type, items]) => items.length > 1 && (
+                          <>
+                            <div className={styles.autoCompleteTitle} key={type}>
+                              {useTranslate(type, type)}
+                            </div>
+
+                            <div key={type} className={styles.autoCompleteList}>
+                              {items.slice(0, loadedCounts[type]).map((value) => {
+                                const PageTypeCard = getComponent(value.pageType);
+                                return (
+                                  <Suspense fallback={<Loading single />} key={keygen()}>
+                                    <PageTypeCard item={value} icon={autoCompleteIcon} />
+                                  </Suspense>
+                                );
+                              })}
+
+                              {loadedCounts[type] < items.length && (
+                                <button
+                                  type='button'
+                                  className={styles.loadMoreBtn}
+                                  onClick={() => {
+                                    const inputValue = searchInputRef.current?.value.trim();
+                                    if (inputValue) {
+                                      const url = `/s${process.env.TRAILING_SLASH ? '/' : ''}?s=${encodeURIComponent(inputValue)}`;
+                                      window.location.href = url;
+                                    }
+                                  }}
+                                >
+                                  {useTranslate('autocomplete_see_all', 'View more')} {type}
+                                </button>
+                              )}
+
+
+                            </div>
+                          </>
+                        ))}
+                      </ul>
+                    ) : (
+                      <NoResults text={useTranslate('autocomplete_no_results', 'No Results Found')} />
+                    )}
                   </div>
                 )}
               </div>
@@ -173,6 +229,7 @@ const SearchForm = ({
 
 SearchForm.propTypes = {
   className: PropTypes.string.isRequired,
+  loadAutoComplete: PropTypes.number,
   searchIcon: PropTypes.string,
   iconWidth: PropTypes.number,
   iconHeight: PropTypes.number,
@@ -184,7 +241,8 @@ SearchForm.propTypes = {
   }),
   marketPrefix: PropTypes.string,
   isDisabled: PropTypes.bool,
-  startSearchAt: PropTypes.number
+  startSearchAt: PropTypes.number,
+  autoCompleteIcon: PropTypes.node,
 };
 
 export default SearchForm;

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

@@ -64,16 +64,41 @@
   }
 }
 
-.autoCompleteContainer{
+.autoCompleteContainer {
   background-color: #fff;
-  margin-top: .8rem;
-  border-radius: .8rem;
+  margin-top: 0.8rem;
+  border-radius: 0.8rem;
 }
 
-.autoCompleteInner > ul{
+.autoCompleteInner > ul {
   @include flex-direction(column);
 
-  gap: .8rem;
-  padding: 1.2rem;
+  gap: 0.8rem;
+  padding: 1.6rem;
+}
+
+.autoCompleteList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.autoCompleteTitle {
+  font-size: 2.4rem;
+  font-weight: 500;
+  text-transform: capitalize;
+  color: var(--autoCompleteTitle-color);
+}
 
-}
+.loadMoreBtn {
+  display: block;
+  font-size: 1.8rem !important;
+  background-color: var(--loadMoreBtn-bg, #6e33e5);
+  color: #fff;
+  border-radius: 2.4rem;
+  padding: 1.2rem 2.4rem;
+  border: hidden;
+  width: fit-content !important;
+  cursor: "pointer";
+  margin: 1rem auto;
+}