gatsby-core-theme 1.3.0 → 1.4.2

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

@@ -6,23 +6,21 @@ import Slide from '~molecules/carousel/default-slide';
 import keygen from '~helpers/keygen';
 import styles from './carousel.module.scss';
 
-const Carousel = ({ module = {}, settings = {}, CustomSlideComponent }) => {
-  return (
-    <div className={styles.carouselContainer}>
-      <Slider {...settings}>
-        {module.items.map((item) => (
-          <div key={keygen()} className={styles.carouselItem}>
-            {CustomSlideComponent !== undefined ? (
-              <CustomSlideComponent item={item} />
-            ) : (
-              <Slide item={item} />
-            )}
-          </div>
-        ))}
-      </Slider>
-    </div>
-  );
-};
+const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass = '' }) => (
+  <div className={styles.carouselContainer}>
+    <Slider {...settings} gtmClass={gtmClass}>
+      {module.items.map((item) => (
+        <div key={keygen()} className={styles.carouselItem}>
+          {CustomSlideComponent !== undefined ? (
+            <CustomSlideComponent item={item} gtmClass={gtmClass} />
+          ) : (
+            <Slide item={item} gtmClass={gtmClass} />
+          )}
+        </div>
+      ))}
+    </Slider>
+  </div>
+);
 
 Carousel.propTypes = {
   module: PropTypes.shape({
@@ -38,6 +36,7 @@ Carousel.propTypes = {
   }),
   settings: PropTypes.shape(PropTypes.object),
   CustomSlideComponent: PropTypes.element,
+  gtmClass: PropTypes.string,
 };
 
 export default Carousel;

package/src/components/organisms/cookie-consent/cookie-consent.stories.js

@@ -5,6 +5,7 @@ import {
   Primary,
   PRIMARY_STORY,
   ArgsTable,
+  // eslint-disable-next-line import/no-extraneous-dependencies
 } from '@storybook/addon-docs/blocks';
 
 import CookieConsent from '.';
@@ -96,7 +97,11 @@ const Template = (args) => (
       <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>
   </div>

package/src/components/organisms/cookie-consent/index.js

@@ -42,6 +42,7 @@ const CookieConsent = ({
             btnText={acceptText}
             isInternalLink={false}
             isButton
+            gtmClass="cookie-consent-gtm btn-cta"
           />
 
           {declineText && (
@@ -50,6 +51,7 @@ const CookieConsent = ({
               btnText={declineText}
               isInternalLink={false}
               isButton
+              gtmClass="cookie-consent-gtm btn-cta"
             />
           )}
         </Sticky>

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

@@ -128,6 +128,7 @@ const FormComponent = ({
               isButton
               btnText={state.loading ? 'sending...' : buttonLabel}
               disabled={state.loading}
+              gtmClass="form-gtm btn-cta"
             />
           </div>
         )}

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

@@ -37,8 +37,8 @@ const Navigation = ({
   const navRef = useRef(React.createRef());
   const showMenu = template !== 'ppc';
   const logoPosition = showMenu ? 'space-between' : 'center';
-  
-  const Search = hasSearch ? loadable(() => import('~organisms/search')) : null; 
+
+  const Search = hasSearch ? loadable(() => import('~organisms/search')) : null;
 
   if (options.mobile.stopScrollOnOpen) toggleScroll('', true);
 
@@ -62,12 +62,12 @@ const Navigation = ({
     >
       <nav className={styles.nav} style={{ justifyContent: logoPosition }} ref={navRef}>
         <NavigationProvider>
-          <Link className={styles.logo} to="/" onClick={onClickHandler}>
+          <Link className={`${styles.logo} main-menu-gtm logo-cta`} to="/" onClick={onClickHandler}>
             <img alt="logo" src={logo} width={logoWidth} height={logoHeight} />
           </Link>
           {showMenu && (
             <>
-              <Menu section={section} menu={menu} options={options} />
+              <Menu section={section} menu={menu} options={options} gtmClass="main-menu-gtm" />
               {hasSearch && <Search className={styles.search} searchIcon={searchIcon} />}
             </>
           )}

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

@@ -45,7 +45,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 />

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

@@ -6,25 +6,21 @@ import Tabs from '~hooks/tabs';
 
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {
   const template = page?.template;
-  const translations = page?.translations;
   return (
-    <Tabs tabsAlign="right">
-      {module.items.map((toplist) => {
-        return (
-          <div label={toplist.title} key={keygen()}>
-            {toplistHeading}
-            <List
-              toplist={toplist}
-              CustomRow={CustomRow}
-              translations={translations}
-              hasLoadMoreButton={toplist.show_load_more}
-              initItemsCount={toplist.num_items_initial_load}
-              loadItemsCount={toplist.num_items_load_more}
-              pageTemplate={template}
-            />
-          </div>
-        );
-      })}
+    <Tabs tabsAlign="right" gtmClass="toplist-tabs-menu-gtm">
+      {module.items.map((toplist) => (
+        <div label={toplist.title} key={keygen()}>
+          {toplistHeading}
+          <List
+            toplist={toplist}
+            CustomRow={CustomRow}
+            hasLoadMoreButton={toplist.show_load_more}
+            initItemsCount={toplist.num_items_initial_load}
+            loadItemsCount={toplist.num_items_load_more}
+            pageTemplate={template}
+          />
+        </div>
+      ))}
     </Tabs>
   );
 };
@@ -33,7 +29,7 @@ TopList.propTypes = {
   module: PropTypes.shape({ items: PropTypes.arrayOf(PropTypes.object) }),
   toplistHeading: PropTypes.element,
   CustomRow: PropTypes.func,
-  page: PropTypes.shape({ template: PropTypes.string, translations: PropTypes.shape({}) }),
+  page: PropTypes.shape({ template: PropTypes.string }),
 };
 
 export default TopList;

package/src/components/organisms/toplist/list/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-return-assign */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import keygen from '~helpers/keygen';
@@ -13,7 +14,6 @@ export default function List({
   initItemsCount,
   loadItemsCount,
   pageTemplate,
-  translations,
 }) {
   const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
   const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
@@ -25,17 +25,13 @@ export default function List({
   const showLoadMoreButton = hasLoadMoreButton === '1' && Number(initItemsCount) !== 0;
 
   function handleClick() {
-    const displayed = elRefs.current.filter((item) => {
-      return item.classList.contains(styles.show);
-    }).length;
+    const displayed = elRefs.current.filter((item) => item.classList.contains(styles.show)).length;
 
     const nextItem = loadingItems + displayed;
     const lastItem =
       nextItem > elRefs.current.length ? elRefs.current.length + 1 : displayed + loadingItems;
 
-    elRefs.current.slice(displayed, lastItem).forEach((item) => {
-      return item.classList.toggle(styles.show);
-    });
+    elRefs.current.slice(displayed, lastItem).forEach((item) => item.classList.toggle(styles.show));
 
     if (loadingItems + displayed > elRefs.current.length) {
       loadMoreBtn.current.classList.toggle(styles.hide);
@@ -45,27 +41,24 @@ export default function List({
   return (
     <>
       <ul className={styles.list} key={keygen()}>
-        {toplist.items.map((item, index) => {
-          return (
-            <li
-              className={index + 1 <= initLoadItems ? styles.show : ''}
-              key={keygen()}
-              ref={(el) => (elRefs.current[index] = el)}
-            >
-              {CustomRow ? (
-                <CustomRow
-                  item={item}
-                  tracker={toplist.tracker}
-                  oneliner={toplist.one_liner}
-                  isPPC={isPPCPage}
-                  translations={translations}
-                />
-              ) : (
-                <Row item={item} tracker={toplist.tracker} oneliner={toplist.one_liner} />
-              )}
-            </li>
-          );
-        })}
+        {toplist.items.map((item, index) => (
+          <li
+            className={index + 1 <= initLoadItems ? styles.show : ''}
+            key={keygen()}
+            ref={(el) => (elRefs.current[index] = el)}
+          >
+            {CustomRow ? (
+              <CustomRow
+                item={item}
+                tracker={toplist.tracker}
+                oneliner={toplist.one_liner}
+                isPPC={isPPCPage}
+              />
+            ) : (
+              <Row item={item} tracker={toplist.tracker} oneliner={toplist.one_liner} />
+            )}
+          </li>
+        ))}
       </ul>
       {showLoadMoreButton && (
         <div ref={loadMoreBtn} className={styles.loadMore}>
@@ -76,6 +69,7 @@ export default function List({
             onClick={handleClick}
             invertColors
             primaryColor={false}
+            gtmClass="top-list-loadmore-gtm btn-cta"
           />
         </div>
       )}
@@ -98,5 +92,4 @@ List.propTypes = {
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
-  translations: PropTypes.shape({}),
 };

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

@@ -9,9 +9,10 @@ import Navigation from '~organisms/navigation';
 import ScrollToTop from '~atoms/scroll-to-top';
 import CookieConsent from '~organisms/cookie-consent';
 
-function Body({ pageContext }) {
+function Body({ pageContext, children }) {
   const getBodySection = (name) => getSection(name, pageContext);
-  const template = pageContext.page.template;
+  const { template } = pageContext.page;
+  const is404 = pageContext?.page?.path?.includes('404');
 
   const main = getBodySection('main');
   const navigation = getBodySection('navigation');
@@ -19,12 +20,12 @@ function Body({ pageContext }) {
   const sidebar = getBodySection('sidebar');
 
   const Sidebar = sidebar ? loadable(() => import(`~molecules/sidebar`)) : null;
-
   return (
     <>
       {navigation && <Navigation template={template} section={navigation} />}
-      <Header section={pageContext} />
-      {main && <Main section={main} page={pageContext.page} />}
+      {!is404 && <Header section={pageContext} />}
+      {main && !children && <Main section={main} page={pageContext.page} />}
+      {children && <main>{children}</main>}
       {Sidebar && <Sidebar section={sidebar} />}
       <ScrollToTop />
       <Footer template={template} section={footer} />
@@ -34,9 +35,12 @@ function Body({ pageContext }) {
 }
 
 Body.propTypes = {
+  children: PropTypes.element,
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
       id: PropTypes.number,
+      path: PropTypes.string,
+      template: PropTypes.string,
     }),
   }).isRequired,
 };

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

@@ -1,15 +1,37 @@
+/* eslint-disable arrow-body-style */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Search from '~molecules/search';
 import Card from '~atoms/cards/default-card';
+import { translate } from '~helpers/getters';
 
-const SearchContent = () => {
+const SearchContent = ({ page }) => {
   return (
     <Search
       pageSearchOptions={{
+        useArchive: true,
+        archiveOptions: {
+          titles: [
+            { type: 'operator', title: translate(page?.translations, 'casino', 'Casino') },
+            { type: 'article', title: translate(page?.translations, 'news', 'News') },
+          ],
+          includeOptions: {
+            desktop_num_of_columns: '3',
+            mobile_num_of_columns: '1',
+            tablet_num_of_columns: '3',
+          },
+        },
         tabs: true,
         tabsOptions: { showAll: 'ShowAll', tabsAlign: 'left' },
         sort: [{ name: 'Sorting', field: 'id', type: 'number' }],
+        loadMore: {
+          label: translate(page?.translations, 'show_more', 'Show more'),
+          limit: 3,
+          increment: 6,
+          usePrimaryButton: false,
+          useInvertColors: true,
+        },
       }}
     >
       {(item) => (
@@ -26,4 +48,17 @@ const SearchContent = () => {
   );
 };
 
+SearchContent.propTypes = {
+  page: PropTypes.shape({
+    template: PropTypes.string,
+    path: PropTypes.string,
+    updated_at: PropTypes.string,
+    created_at: PropTypes.string,
+    author: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+    translations: PropTypes.shape({}),
+  }),
+};
+
 export default SearchContent;

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

@@ -10,9 +10,9 @@ import styles from './tracker.module.scss';
 const Tracker = ({
   pageContext,
   path,
-  mainText = '',
-  redirectText = '',
-  btnText = '',
+  mainText = 'One sec, while we load [operator_name] for you..',
+  redirectText = 'If the casino has not loaded within a few seconds',
+  btnText = 'Click Here!',
   bgImage = '',
   bgVideo = '',
   redirectTimer = 5000,
@@ -95,7 +95,10 @@ const Tracker = ({
             {background}
             <div className={styles.content}>
               <LazyImage alt="Site logo" src={logo} />
-              <p className={styles.mainText}>{`${mainText} ${operator.name}`}</p>
+              <p className={styles.mainText}>{`${mainText.replace(
+                '[operator_name]',
+                operator.name
+              )}`}</p>
               <div className={styles.bar} />
               {counter ? (
                 redirectText
@@ -113,6 +116,7 @@ const Tracker = ({
                 to={prettyTracker(operator)}
                 targetBlank={false}
                 isInternalLink={false}
+                gtmClass="tracker-gtm btn-cta"
               />
             </div>
           </div>

package/src/constants/pick-keys.js

@@ -62,3 +62,5 @@ export const pickRelationKeys = {
   software_provider: ['logo', 'games_count', 'name'],
   payment_method: ['logo', 'name'],
 };
+
+export const pickHTMLSitemapPageKeys = ['title', 'path', 'template_id'];

package/src/context/TranslationsProvider.js

@@ -0,0 +1,9 @@
+import React, { createContext } from 'react';
+
+export const Context = createContext();
+
+export default (props) => {
+  // eslint-disable-next-line react/prop-types
+  const { value, children } = props;
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+};

package/src/helpers/processor/index.js

@@ -3,15 +3,16 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable no-shadow */
 
-import { cloneDeep } from 'lodash';
+import { cloneDeep, pick } from 'lodash';
 import chalk from 'chalk';
 import ModuleValue from '../../constants/module-value';
 import SearchTypesEnable from '../../constants/search-types-enable';
+import { pickHTMLSitemapPageKeys } from '../../constants/pick-keys';
 
 // eslint-disable-next-line import/no-cycle
 import { processModule } from './modules';
 // eslint-disable-next-line import/no-cycle
-import { clonePageForCards } from './common';
+import { clonePageForCards, groupBy } from './common';
 import { prepareSportsData, addSportsDataToPage } from './sports';
 
 const previewMode = process.env.GATSBY_PREVIEW_MODE || false;
@@ -32,7 +33,23 @@ let prefilledMarketModules = null;
 let prefilledMarketModulesRaw = null;
 let sportsData = null;
 
-// transform into right format
+export function processSitemapPages(pages, markets) {
+  const pageListByMarket = [];
+  Object.keys(markets).forEach((market) => {
+    pageListByMarket[market] = [];
+    let pageList = [];
+    Object.keys(pages[market]).forEach((pageType) => {
+      pageList = pageList.concat(
+        pages[market][pageType].map((row) => pick(row, pickHTMLSitemapPageKeys))
+      );
+    });
+
+    pageListByMarket[market] = groupBy(pageList, 'template_id');
+  });
+
+  return pageListByMarket;
+}
+
 function transform(response) {
   const transformed = {};
   Object.keys(response.site_markets).forEach((siteMarket) => {

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

@@ -0,0 +1,14 @@
+import { processSitemapPages } from '.';
+import getPageDataList from '~tests/factories/pages/list.factory';
+
+describe('processor Helper', () => {
+  test('process sitemap', () => {
+    const pageList = getPageDataList(10);
+    const market = 'ie';
+    const processedSitemap = processSitemapPages(
+      { [market]: { type: pageList } },
+      { [market]: [] }
+    );
+    expect(processedSitemap[market]['5']).toHaveLength(10);
+  });
+});

package/src/hooks/lazy-image/lazy-image.stories.js

@@ -185,5 +185,6 @@ BrokenURL.story = {
     alt: 'This image has a broken URL',
     defaultImg: <FaRegFrownOpen size={250} />,
     once: false,
+    style: { 'border-radius': '1rem' },
   },
 };

package/src/hooks/link/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import GatsbyLink from 'gatsby-link';
 import { navigate } from '@reach/router';
 import PropTypes from 'prop-types';
@@ -53,6 +54,7 @@ Link.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.any]),
   activeClassName: PropTypes.string,
   partiallyActive: PropTypes.bool,
+  gtmClass: PropTypes.string,
 };
 
 export default Link;

package/src/hooks/link/link.test.js

@@ -23,6 +23,15 @@ describe('Link Component', () => {
     );
     expect(getByText('Test Content').closest('a')).toHaveAttribute('href', '/test/link');
   });
+
+  test('test GTM class', () => {
+    const { getByText } = render(
+      <Link to="test/link" className="testClassName test-gtm">
+        Test Content
+      </Link>
+    );
+    expect(getByText('Test Content').closest('a').classList.contains('test-gtm')).toBe(true);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/hooks/modal/modal-content.js

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 import React, { useContext, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ModalContext } from './modalContext';
@@ -7,6 +10,7 @@ const ModalContent = ({ closeIcon }) => {
   const { showModal, setShowModal, modalContent, setModalContent } = useContext(ModalContext);
   const modal = useRef(null);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const close = () => {
     setShowModal(false);
     setModalContent('');
@@ -31,7 +35,7 @@ const ModalContent = ({ closeIcon }) => {
     return () => {
       if (typeof window !== 'undefined') window.removeEventListener('keydown', handleEsc);
     };
-  }, []);
+  }, [close]);
 
   // Close on outside click
   useEffect(() => {
@@ -49,14 +53,14 @@ const ModalContent = ({ closeIcon }) => {
       if (typeof window !== 'undefined')
         window.removeEventListener('mousedown', handleOutsideClick);
     };
-  }, []);
+  }, [close]);
 
   return (
     <div className={styles.modalInner} ref={modal}>
       <div className={styles.modalOverlay} onClick={close} />
       <div className={styles.modalContent}>
         {closeIcon && (
-          <button className={styles.closeIcon} onClick={close}>
+          <button className={`${styles.closeIcon} modal-gtm btn-cta`} type="button" onClick={close}>
             {closeIcon}
           </button>
         )}

package/src/hooks/modal/modal.test.js

@@ -8,9 +8,10 @@ import ModalProvider from './modalContext';
 import ModalContent from './modal-content';
 
 const setUp = () => {
+  React.useContext = ModalProvider;
   const { container, getAllByText } = render(
     <ModalProvider>
-      <Modal content={'Modal opened'} >
+      <Modal content="Modal opened">
         <p>Click me</p>
       </Modal>
       <ModalContent closeIcon={<MdClose />} overlay />
@@ -32,7 +33,7 @@ describe('Modal Component', () => {
 
   // Toggle effect
   test('toggle modal', () => {
-    const { container,getAllByText } = setUp();
+    const { container, getAllByText } = setUp();
     const toggleBtn = container.querySelector('p');
 
     fireEvent.click(toggleBtn);

package/src/hooks/tabs/index.js

@@ -10,6 +10,7 @@ const Tabs = ({
   activeTabClass = '',
   HeaderComp,
   headerClass = '',
+  gtmClass = '',
 }) => {
   const showAllTabId = `${showAll}_0`;
   const showTabs = children.length > 1;
@@ -35,7 +36,8 @@ const Tabs = ({
             activeTab={activeTab}
             activeTabClass={activeTabClass}
             showAll={showAll}
-            alignRight={tabsAlign === 'right' ? true : false}
+            gtmClass={gtmClass}
+            alignRight={tabsAlign === 'right'}
           />
         )}
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
@@ -67,6 +69,7 @@ Tabs.propTypes = {
   activeTabClass: PropTypes.string,
   HeaderComp: PropTypes.objectOf(PropTypes.any),
   headerClass: PropTypes.string,
+  gtmClass: PropTypes.string,
 };
 
 export default Tabs;

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

@@ -16,6 +16,7 @@ const TabList = ({
   activeTabClass = '',
   showAll,
   alignRight = false,
+  gtmClass = '',
 }) => {
   const [tabItems, setTabItems] = useState(items);
 
@@ -41,7 +42,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"
@@ -62,6 +63,7 @@ const TabList = ({
               label={label}
               onClick={onClick}
               toggleDropdown={showDropdown}
+              gtmClass={gtmClass}
             />
           );
         })}
@@ -77,6 +79,7 @@ TabList.propTypes = {
   activeTab: PropTypes.string,
   activeTabClass: PropTypes.string,
   alignRight: PropTypes.bool,
+  gtmClass: PropTypes.bool,
 };
 
 export default TabList;