gatsby-matrix-theme 2.1.2 → 2.2.0

package/src/gatsby-core-theme/components/organisms/search/index.js

@@ -68,7 +68,7 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
         type="button"
         aria-label="Search"
         onClick={handleOnSearchIconClick}
-        className={`${styles.searchButton} ${showSearch && styles.active}`}
+        className={`${styles.searchButton} ${showSearch && styles.active} search-gtm btn-cta`}
       >
         {searchIcon === null ? (
           <FaSearch />
@@ -92,6 +92,7 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
               autoComplete: true,
               sort: true,
               limit: 3,
+              showViewResultsText: false,
             }}
           >
             {(item) => (

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

@@ -24,6 +24,8 @@ function Body({ pageContext }) {
   const footerNavigationData = pageContext?.marketSections?.footer_navigation || null;
   const isHomePage = pageContext?.page && pageContext?.page.path === '/';
   const pageType = pageContext.page.type;
+  const is404 = pageContext.page.path.includes('404');
+
   const Popup = pageContext?.marketSections?.popup
     ? loadable(() => import(`../../../../components/organisms/popup`))
     : null;
@@ -42,12 +44,13 @@ function Body({ pageContext }) {
   const status = pageContext.page.relation?.status;
 
   const hideBanner = status === 'inactive' || status === 'coming_soon';
-  const { template, translations } = pageContext.page;
+  const { template } = pageContext.page;
 
   const popupData = pageContext?.marketSections?.popup?.modules?.find((m) => m.name === 'top_list');
-  const FooterNavigation = footerNavigationData
-    ? loadable(() => import(`../../../../components/organisms/footer-navigation`))
-    : null;
+  const FooterNavigation =
+    footerNavigationData && pageType !== 'operator'
+      ? loadable(() => import(`../../../../components/organisms/footer-navigation`))
+      : null;
 
   return (
     <>
@@ -55,7 +58,6 @@ function Body({ pageContext }) {
         <Navigation
           template={template}
           section={navigation}
-          translations={translations}
           searchIcon="../../../../../../images/search.svg"
           menu="main_menu"
           options={{
@@ -76,7 +78,7 @@ function Body({ pageContext }) {
         <ContactUs page={pageContext} />
       ) : (
         <>
-          {!isSearch && <Header section={pageContext} />}
+          {!isSearch && !is404 && <Header section={pageContext} />}
           {main && <Main section={main} page={pageContext.page} />}
           {pageType === 'operator' && !hideBanner && (
             <OperatorBanner
@@ -114,10 +116,14 @@ function Body({ pageContext }) {
         <p>
           We use cookies in order to optimise our site and improve your experience with us. By using
           the site you consent to our
-          <a href="/cookies"> &nbsp; Cookie Policy</a>.
+          <a href="/cookies" className="cookie-consent-gtm">
+            {' '}
+            &nbsp; Cookie Policy
+          </a>
+          .
         </p>
       </CookieConsent>
-      {Popup && popupData && <Popup module={popupData} translations={translations} />}
+      {Popup && popupData && <Popup module={popupData} />}
     </>
   );
 }
@@ -130,7 +136,6 @@ Body.propTypes = {
       type: PropTypes.string,
       path: PropTypes.string,
       template: PropTypes.string,
-      translations: PropTypes.shape({}),
       relation: PropTypes.shape({
         status: PropTypes.string,
         logo_url: PropTypes.string,

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

@@ -1,10 +1,11 @@
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
 import Search from 'gatsby-core-theme/src/components/molecules/search';
 import moduleStyles from 'gatsby-core-theme/src/components/molecules/module/module.module.scss';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import CardArticle from '../../../../components/atoms/cards/article-card';
 import CardGame from '../../../../components/atoms/cards/game-card';
 import CardOperator from '../../../../components/atoms/cards/operator-card';
@@ -12,85 +13,89 @@ import PaymentMethods from '../../../../components/atoms/cards/payment-method-ca
 import SoftwareProvider from '../../../../components/atoms/cards/software-provider-card';
 import styles from './search.module.scss';
 
-const SearchContent = ({ page }) => (
-  <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
-    {page.path && <Breadcrumbs page={page} />}
-    <Search
-      page={page}
-      searchIcon="../../../../../../images/search.svg"
-      pageSearchOptions={{
-        searchTitle: translate(page?.translations, 'search_results_for', 'Search Results for:'),
-        useArchive: true,
-        archiveOptions: {
-          titles: [
-            { type: 'operator', title: translate(page?.translations, 'casino', 'Casino') },
-            { type: 'game', title: translate(page?.translations, 'slots', 'Slots') },
-            { type: 'article', title: translate(page?.translations, 'news', 'News') },
+const SearchContent = ({ page }) => {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
+      {page.path && <Breadcrumbs page={page} />}
+      <Search
+        page={page}
+        searchIcon="../../../../../../images/search.svg"
+        pageSearchOptions={{
+          searchTitle: translate(translations, 'search_results_for', 'Search Results for:'),
+          useArchive: true,
+          archiveOptions: {
+            titles: [
+              { type: 'operator', title: translate(translations, 'casino', 'Casino') },
+              { type: 'game', title: translate(translations, 'slots', 'Slots') },
+              { type: 'article', title: translate(translations, 'news', 'News') },
+              {
+                type: 'payment_method',
+                title: translate(translations, 'payment_method', 'Payment method'),
+              },
+              {
+                type: 'software_provider',
+                title: translate(translations, 'software_provider', 'Software Provider'),
+              },
+            ],
+            includeOptions: {
+              desktop_num_of_columns: '3',
+              mobile_num_of_columns: '1',
+              tablet_num_of_columns: '3',
+            },
+          },
+          tabs: true,
+          tabsOptions: { showAll: translate(translations, 'all', 'All'), tabsAlign: 'left' },
+          sort: [
+            {
+              name: translate(translations, 'most_relevant', 'Most Relevant'),
+              field: 'id',
+              type: 'number',
+            },
             {
-              type: 'payment_method',
-              title: translate(page?.translations, 'payment_method', 'Payment method'),
+              name: translate(translations, 'latest', 'Latest'),
+              field: 'created_at',
+              type: 'date',
             },
             {
-              type: 'software_provider',
-              title: translate(page?.translations, 'software_provider', 'Software Provider'),
+              name: translate(translations, 'by_title', 'By Title'),
+              field: 'title',
+              type: 'string',
             },
           ],
-          includeOptions: {
-            desktop_num_of_columns: '3',
-            mobile_num_of_columns: '1',
-            tablet_num_of_columns: '3',
+          loadMore: {
+            label: translate(translations, 'show_more', 'Show more'),
+            limit: 3,
+            increment: 6,
+            usePrimaryButton: false,
+            useInvertColors: true,
           },
-        },
-        tabs: true,
-        tabsOptions: { showAll: translate(page?.translations, 'all', 'All'), tabsAlign: 'left' },
-        sort: [
-          {
-            name: translate(page?.translations, 'most_relevant', 'Most Relevant'),
-            field: 'id',
-            type: 'number',
-          },
-          {
-            name: translate(page?.translations, 'latest', 'Latest'),
-            field: 'created_at',
-            type: 'date',
-          },
-          {
-            name: translate(page?.translations, 'by_title', 'By Title'),
-            field: 'title',
-            type: 'string',
-          },
-        ],
-        loadMore: {
-          label: translate(page?.translations, 'show_more', 'Show more'),
-          limit: 3,
-          increment: 6,
-          usePrimaryButton: false,
-          useInvertColors: true,
-        },
-      }}
-    >
-      {(item) => (
-        <>
-          <div type="operator">
-            <CardOperator item={item} />
-          </div>
-          <div type="game">
-            <CardGame item={item} />
-          </div>
-          <div type="article">
-            <CardArticle item={item} />
-          </div>
-          <div type="payment_method">
-            <PaymentMethods item={item} />
-          </div>
-          <div type="software_provider">
-            <SoftwareProvider item={item} />
-          </div>
-        </>
-      )}
-    </Search>
-  </div>
-);
+        }}
+      >
+        {(item) => (
+          <>
+            <div type="operator">
+              <CardOperator item={item} />
+            </div>
+            <div type="game">
+              <CardGame item={item} />
+            </div>
+            <div type="article">
+              <CardArticle item={item} />
+            </div>
+            <div type="payment_method">
+              <PaymentMethods item={item} />
+            </div>
+            <div type="software_provider">
+              <SoftwareProvider item={item} />
+            </div>
+          </>
+        )}
+      </Search>
+    </div>
+  );
+};
 
 SearchContent.propTypes = {
   page: PropTypes.shape({

package/src/hooks/tabs/index.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import TabList from './tab/tab-list';
 import styles from './tabs.module.scss';
 
@@ -14,7 +15,7 @@ const Tabs = ({
   activeTabClass = '',
   HeaderComp,
   headerClass = '',
-  translations,
+  gtmClass = '',
 }) => {
   const showAllTabId = `${showAll}_0`;
   const showTabs = children.length > 1;
@@ -22,6 +23,7 @@ const Tabs = ({
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
   const CustomTag = `${module?.module_title_tag}`;
+  const { translations } = useContext(Context) || {};
   const monthNames = [
     'January',
     'February',
@@ -104,7 +106,7 @@ const Tabs = ({
             showAll={showAll}
             alignRight={tabsAlign === 'right'}
             module={module}
-            translations={translations}
+            gtmClass={gtmClass}
           />
         )}
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
@@ -139,7 +141,7 @@ Tabs.propTypes = {
   title: PropTypes.string,
   module: PropTypes.shape({}),
   siteName: PropTypes.string,
-  translations: PropTypes.shape({}),
+  gtmClass: PropTypes.string,
 };
 
 export default Tabs;

package/src/hooks/tabs/tab/tab-list.js

@@ -14,6 +14,7 @@ const TabList = ({
   activeTabClass = '',
   showAll,
   alignRight = false,
+  gtmClass = '',
 }) => {
   const [tabItems, setTabItems] = useState(items);
 
@@ -38,7 +39,7 @@ const TabList = ({
     <div className={`${styles.tabList} ${alignRight && styles.right}`}>
       <button
         ref={filterBtn}
-        className={styles.select}
+        className={`${styles.select} ${gtmClass} btn-cta`}
         type="button"
         onClick={showDropdown}
         data-id="select-button"
@@ -59,6 +60,7 @@ const TabList = ({
               label={label}
               onClick={onClick}
               toggleDropdown={showDropdown}
+              gtmClass={gtmClass}
             />
           );
         })}
@@ -74,6 +76,7 @@ TabList.propTypes = {
   activeTab: PropTypes.string,
   activeTabClass: PropTypes.string,
   alignRight: PropTypes.bool,
+  gtmClass: PropTypes.string,
 };
 
 export default TabList;

package/src/hooks/tabs/tab/tab.js

@@ -2,39 +2,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './tab.module.scss';
 
-const Tab = ({ label, onClick, activeTab, activeTabClass = '', tabId, toggleDropdown }) => {
-    let className = '';
+const Tab = ({
+  label,
+  onClick,
+  activeTab,
+  activeTabClass = '',
+  tabId,
+  toggleDropdown,
+  gtmClass = '',
+}) => {
+  let className = '';
 
-    if (activeTab === tabId) {
-        if (activeTabClass !== '') {
-            className = ` ${styles[activeTabClass]}`;
-        } else {
-            className = ` ${styles.active}`;
-        }
+  if (activeTab === tabId) {
+    if (activeTabClass !== '') {
+      className = ` ${styles[activeTabClass]}`;
+    } else {
+      className = ` ${styles.active}`;
     }
+  }
 
-    return (
-        <li className={styles.tabListItem}>
-            <button
-                className={className}
-                type="button"
-                onClick={() => {
-                    onClick(tabId);
-                    toggleDropdown();
-                }}
-            >
-                {label}
-            </button>
-        </li>
-    );
+  return (
+    <li className={styles.tabListItem}>
+      <button
+        className={`${className} ${gtmClass} tabs-menu-gtm btn-cta`}
+        type="button"
+        onClick={() => {
+          onClick(tabId);
+          toggleDropdown();
+        }}
+      >
+        {label}
+      </button>
+    </li>
+  );
 };
 Tab.propTypes = {
-    onClick: PropTypes.func,
-    toggleDropdown: PropTypes.func,
-    activeTab: PropTypes.string,
-    activeTabClass: PropTypes.string,
-    tabId: PropTypes.string,
-    label: PropTypes.string,
+  onClick: PropTypes.func,
+  toggleDropdown: PropTypes.func,
+  activeTab: PropTypes.string,
+  activeTabClass: PropTypes.string,
+  tabId: PropTypes.string,
+  label: PropTypes.string,
+  gtmClass: PropTypes.string,
 };
 
 export default Tab;