gatsby-matrix-theme 2.0.5 → 2.2.0

package/src/components/molecules/toplist/row/variant-one.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdCheck } from 'react-icons/md';
 import {
@@ -15,6 +15,7 @@ import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './variant-one.module.scss';
 
 export default function Row({
@@ -24,13 +25,13 @@ export default function Row({
   layout = 'list',
   number = 1,
   isPPC = false,
-  translations = {},
 }) {
   const itemName = item.name;
   const itemRating = item.rating;
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || '/';
   const logoUrl = item.logo_url;
   const pros = item.extra_fields?.pro_1 || item.extra_fields?.pro_2 || item.extra_fields?.pro_3;
+  const { translations } = useContext(Context) || {};
   let sellingPoints = item.selling_points;
   if (pros) {
     sellingPoints = [
@@ -51,7 +52,7 @@ export default function Row({
       )}
       <div className={styles.ribbon}>
         {getExtraField(item.extra_fields, 'ribbon_text') && (
-          <Link to={reviewPath}>
+          <Link to={reviewPath} className="toplist-variant-one-gtm">
             <Label
               title={getExtraField(item.extra_fields, 'ribbon_text')}
               bgColor={getExtraField(item.extra_fields, 'ribbon_color')}
@@ -61,7 +62,13 @@ export default function Row({
       </div>
 
       <div className={styles.casinoDetails}>
-        <a href={prettyLink} aria-label={itemName} target="_blank" rel="noreferrer">
+        <a
+          href={prettyLink}
+          aria-label={itemName}
+          target="_blank"
+          rel="noreferrer"
+          className="toplist-variant-one-gtm logo-cta"
+        >
           <LazyImage
             alt={itemName}
             width={128}
@@ -70,18 +77,28 @@ export default function Row({
           />
         </a>
         <div>
-          <a href={prettyLink} target="_blank" rel="noreferrer">
+          <a
+            href={prettyLink}
+            target="_blank"
+            rel="noreferrer"
+            className="toplist-variant-one-gtm name-cta"
+          >
             {itemName}
           </a>
           <StarRating numOfStars={5} rating={itemRating} />
         </div>
       </div>
       <div className={styles.bonus}>
-        <a href={prettyLink} target="_blank" rel="noreferrer">
+        <a
+          href={prettyLink}
+          target="_blank"
+          rel="noreferrer"
+          className="toplist-variant-one-gtm bonus-cta"
+        >
           <Bonus item={item} tracker={oneliner} />
         </a>
         {!isPPC && (
-          <Link className={styles.reviewLink} to={reviewPath}>
+          <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
             {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
           </Link>
         )}
@@ -90,9 +107,9 @@ export default function Row({
         <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
       </div>
       <div className={styles.cta}>
-        <OperatorCta operator={item} tracker={tracker} />
+        <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
         {!isPPC && (
-          <Link className={styles.reviewLink} to={reviewPath}>
+          <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
             {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
           </Link>
         )}
@@ -140,5 +157,4 @@ Row.propTypes = {
   }).isRequired,
   number: PropTypes.number,
   isPPC: PropTypes.bool,
-  translations: PropTypes.shape({}),
 };

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

@@ -9,7 +9,15 @@ const FooterNavigation = ({ section, isStorybook = false }) => {
   const menuArray = getFirstModuleByName(section, 'menu');
   return (
     <div className={`${styles.footerLinks} ${isStorybook && styles.storybookStyles}`}>
-      <LinkList showListTitle={false} singleList lists={menuArray} once width={48} height={48} />
+      <LinkList
+        showListTitle={false}
+        singleList
+        lists={menuArray}
+        once
+        width={48}
+        height={48}
+        gtmClass="mobile-menu-gtm"
+      />
     </div>
   );
 };

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

@@ -4,22 +4,26 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/no-danger */
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdClose } from 'react-icons/md';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import PopupCard from '../../atoms/cards/popup-card';
 
 import { setIdleTimeout } from '../../../helpers/popup';
-import PopupCard from '../../atoms/cards/popup-card';
+import { isMobileDevice } from '../../../helpers/mobile-detect';
 
 import styles from './popup.module.scss';
 
-const Popup = ({ module, translations, isStorybook = false }) => {
+const Popup = ({ module, isStorybook = false }) => {
   const modal = useRef(null);
   const [showModal, setShowModal] = useState(false);
   const { items } = module.items[0];
   const shownItems = items?.slice(0, 4) || [];
   const { style } = module;
+  const tracker = isMobileDevice() ? 'mobPopup' : 'Popup';
+  const { translations } = useContext(Context) || {};
 
   const close = () => {
     setShowModal(false);
@@ -91,12 +95,12 @@ const Popup = ({ module, translations, isStorybook = false }) => {
           <div className={styles.modalContent}>
             <div className={styles.modalTitle}>
               <p>{translate(translations, 'claim_bonuses', 'Claim These Exclusive Bonuses')}</p>
-              <button className={styles.closeIcon} onClick={close}>
+              <button className={`${styles.closeIcon} popup-gtm btn-cta`} onClick={close}>
                 <MdClose />
               </button>
             </div>
             {shownItems?.map((item) => (
-              <PopupCard item={item} translations={translations} />
+              <PopupCard item={item} tracker={tracker} />
             ))}
           </div>
         </div>
@@ -110,7 +114,6 @@ Popup.propTypes = {
     items: PropTypes.arrayOf({}),
     style: PropTypes.string,
   }).isRequired,
-  translations: PropTypes.shape({}),
   isStorybook: PropTypes.bool,
 };
 

package/src/components/organisms/popup/popup.stories.js

@@ -25,16 +25,6 @@ export default {
         defaultValue: { summary: '' },
       },
     },
-    translations: {
-      name: 'translations',
-      type: { name: 'object', required: true },
-      defaultValue: '',
-      description: 'Translations object',
-      table: {
-        type: { summary: 'object' },
-        defaultValue: { summary: '' },
-      },
-    },
   },
   parameters: {
     docs: {

package/src/components/organisms/toplist/comparison-table/index.js

@@ -1,19 +1,20 @@
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import Slider from 'gatsby-core-theme/src/components/molecules/slider';
 import PropTypes from 'prop-types';
 import useWindowSize from 'gatsby-core-theme/src/hooks/useWindowSize';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { isMobileDevice } from 'gatsby-matrix-theme/src/helpers/mobile-detect';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import { TiArrowSortedDown, TiArrowSortedUp } from 'react-icons/ti';
 import Column from '../../../atoms/table/column';
 import StaticColumn from '../../../atoms/table/staticColumn';
 import styles from './comparison-table.module.scss';
 
-const Index = ({ module, page }) => {
+const Index = ({ module }) => {
   const [width] = useWindowSize();
   const [hideRow, setHideRow] = useState(false);
   const [licensesMore, setLicensesMore] = useState(true);
@@ -23,8 +24,7 @@ const Index = ({ module, page }) => {
   const [topFeatures] = useState(111);
   const [banking] = useState(124);
   const [licenses, setLicenses] = useState(57);
-
-  const translation = page.translations;
+  const { translations } = useContext(Context) || {};
 
   useEffect(() => {
     isMobileDevice() && setHideRow(true);
@@ -54,7 +54,6 @@ const Index = ({ module, page }) => {
             licenses={licenses}
             chnageHeights={chnageHeights}
             hideRow={hideRow}
-            translations={page.translations}
             licensesMore={licensesMore}
           />
         </div>
@@ -79,7 +78,6 @@ const Index = ({ module, page }) => {
             licenses={licenses}
             chnageHeights={chnageHeights}
             hideRow={hideRow}
-            translations={page.translations}
             licensesMore={licensesMore}
           />
           {items[i + 1] && (
@@ -94,7 +92,6 @@ const Index = ({ module, page }) => {
               licenses={licenses}
               chnageHeights={chnageHeights}
               hideRow={hideRow}
-              translations={page.translations}
               licensesMore={licensesMore}
             />
           )}
@@ -110,7 +107,6 @@ const Index = ({ module, page }) => {
               licenses={licenses}
               chnageHeights={chnageHeights}
               hideRow={hideRow}
-              translations={page.translations}
               licensesMore={licensesMore}
             />
           )}
@@ -131,10 +127,13 @@ const Index = ({ module, page }) => {
           banking={banking}
           licenses={licenses}
           hideRow={hideRow}
-          translations={page.translations}
         />
         {width < 991 && width > 0 && <>{renderOne(module.items[0].items)}</>}
-        {width >= 991 && <Slider useArrows={false}>{renderThree(module.items[0].items)}</Slider>}
+        {width >= 991 && (
+          <Slider useArrows={false} gtmClass="comparison-table-carousel-gtm">
+            {renderThree(module.items[0].items)}
+          </Slider>
+        )}
       </table>
       {width < 991 && (
         // eslint-disable-next-line react/button-has-type
@@ -146,12 +145,12 @@ const Index = ({ module, page }) => {
         >
           {hideRow ? (
             <div className={styles.showMoreBtn}>
-              {translate(translation, 'show_more_details', 'Show more details')}{' '}
+              {translate(translations, 'show_more_details', 'Show more details')}{' '}
               <TiArrowSortedDown />
             </div>
           ) : (
             <div className={styles.showMoreBtn}>
-              {translate(translation, 'show_less_details', 'Show less details')}
+              {translate(translations, 'show_less_details', 'Show less details')}
               <TiArrowSortedUp />
             </div>
           )}
@@ -162,6 +161,5 @@ const Index = ({ module, page }) => {
 };
 Index.propTypes = {
   module: PropTypes.object,
-  page: PropTypes.object,
 };
 export default Index;

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

@@ -9,7 +9,6 @@ import Row from '../../molecules/toplist/row/variant-one';
 
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {
   const template = page?.template;
-  const translations = page?.translations;
   const ComparisonTable =
     module?.style === 'comparison_table' ? loadable(() => import('./comparison-table')) : null;
 
@@ -21,14 +20,13 @@ const TopList = ({ module, toplistHeading, CustomRow, page }) => {
       page={page}
     />
   ) : (
-    <Tabs translations={page.translations} title={module.title} module={module} tabsAlign="right">
+    <Tabs title={module.title} module={module} tabsAlign="right" gtmClass="toplist-tabs-menu-gtm">
       {module.items.map((toplist) => (
         <div label={toplist.title} key={keygen()}>
           {toplistHeading}
           <List
             toplist={toplist}
             CustomRow={Row}
-            translations={translations}
             hasLoadMoreButton={toplist.show_load_more}
             initItemsCount={toplist.num_items_initial_load}
             loadItemsCount={toplist.num_items_load_more}
@@ -48,7 +46,7 @@ TopList.propTypes = {
   }),
   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,7 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
-import React, { useRef } from 'react';
+import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
+import { forceCheck } from 'react-lazyload';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import keygen from '~helpers/keygen';
 import Row from '~molecules/toplist/default-row';
 import Button from '~atoms/button';
@@ -14,13 +17,12 @@ export default function List({
   initItemsCount,
   loadItemsCount,
   pageTemplate,
-  translations,
 }) {
   const initLoadItems = Number(initItemsCount) !== 0 ? Number(initItemsCount) : 10000;
   const loadingItems = Number(loadItemsCount) !== 0 ? Number(loadItemsCount) : 10000;
 
   const isPPCPage = pageTemplate && pageTemplate.toLowerCase() === 'ppc';
-
+  const { translations } = useContext(Context) || {};
   const elRefs = useRef([]);
 
   const addToRefs = (el, index) => {
@@ -30,7 +32,9 @@ export default function List({
   };
 
   const loadMoreBtn = useRef(React.createRef());
-  const showLoadMoreButton = hasLoadMoreButton === '1' && Number(initItemsCount) !== 0;
+
+  const showLoadMoreButton =
+    hasLoadMoreButton === '1' && Number(initItemsCount) < toplist.items.length;
 
   function handleClick() {
     const displayed = elRefs.current.filter((item) => item.classList.contains(styles.show)).length;
@@ -40,8 +44,9 @@ export default function List({
       nextItem > elRefs.current.length ? elRefs.current.length + 1 : displayed + loadingItems;
 
     elRefs.current.slice(displayed, lastItem).forEach((item) => item.classList.toggle(styles.show));
+    forceCheck();
 
-    if (loadingItems + displayed > elRefs.current.length) {
+    if (loadingItems + displayed >= elRefs.current.length) {
       loadMoreBtn.current.classList.toggle(styles.hide);
     }
   }
@@ -61,7 +66,6 @@ export default function List({
                 tracker={toplist.tracker}
                 oneliner={toplist.one_liner}
                 isPPC={isPPCPage}
-                translations={translations}
                 index={index}
               />
             ) : (
@@ -79,6 +83,7 @@ export default function List({
             onClick={handleClick}
             invertColors
             primaryColor={false}
+            gtmClass="toplist-loadmore-btn-gtm btn-cta"
           />
         </div>
       )}
@@ -101,5 +106,4 @@ List.propTypes = {
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
-  translations: PropTypes.shape({}),
 };

package/src/components/organisms/toplist/list/list.module.scss

@@ -66,4 +66,11 @@
   > div {
     padding: 1rem 5rem;
   }
+
+  @include max(tablet) {
+    button:hover {
+      background-color: transparent !important;
+      color: #000 !important;
+    }
+  }
 }

package/src/gatsby-core-theme/components/atoms/bonus/bonus.module.scss

@@ -0,0 +1,15 @@
+.bonus {
+  @include flex-direction(column);
+  div:first-child {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    padding-right: 1rem;
+  }
+  div:nth-child(2) {
+    font-size: 1.6rem;
+    color: var(--color-22);
+    font-weight: 700;
+    padding: 0.5rem 0;
+  }
+}

package/src/gatsby-core-theme/components/atoms/bonus/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getBonus } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './bonus.module.scss';
 
 export default function Bonus({ item, tracker }) {
   const oneLiner = getBonus(tracker, item);
@@ -19,9 +20,9 @@ export default function Bonus({ item, tracker }) {
   }
 
   return (
-    <div>
-      {!isInoperative && <div>{mainLine && mainLine}</div>}
-      {!isInoperative && <div>{secondLine && secondLine}</div>}
+    <div className={styles.bonus}>
+      {!isInoperative && <div className={styles.title}>{mainLine && mainLine}</div>}
+      {!isInoperative && <div className={styles.desc}>{secondLine && secondLine}</div>}
     </div>
   );
 }

package/src/gatsby-core-theme/components/atoms/module-title/index.js

@@ -1,17 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaAngleRight } from 'react-icons/fa';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import styles from './module-title.module.scss';
 import Link from '~hooks/link';
 
-const ModuleTitle = ({
-  module,
-  viewMoreIcon = <FaAngleRight />,
-  pageContext = null,
-  translations,
-}) => {
+const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = null }) => {
   const tabsToplist = module?.items?.length > 1 && module?.name === 'top_list';
   const CustomTag = `${module.module_title_tag}`;
   const monthNames = [
@@ -28,14 +24,16 @@ const ModuleTitle = ({
     'November',
     'December',
   ];
+  const { translations } = useContext(Context) || {};
   const d = new Date();
   const year = d.getFullYear();
   const month = monthNames[d.getMonth()];
   const currentMonth = module.show_last_updated_date
     ? translate(translations, month, month)
     : false;
+
   const getTitle = () => {
-    if (!module?.module_title_tag) {
+    if (module?.title) {
       return (
         <h2 className={styles.noTag}>
           {module.title}
@@ -90,7 +88,7 @@ const ModuleTitle = ({
           </span>
 
           {module.link_label && (
-            <Link to={module.link_value} className={styles.viewMore}>
+            <Link to={module.link_value} className={`${styles.viewMore} module-title-gtm`}>
               {module.link_label}
               {viewMoreIcon}
             </Link>

package/src/gatsby-core-theme/components/atoms/not-found/index.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Image from 'gatsby-core-theme/src/hooks/gatsby-img';
+
+import styles from './not-found.module.scss';
+
+const NotFound = ({ imagePath }) => (
+  <div className={styles.wrapper}>
+    <div className={styles.textBlock}>
+      <p>Oops! We can't seem to find that page anymore.</p>
+      <p>While you're here though, why not check out these top South African Casinos:</p>
+    </div>
+    <div className={styles.imgContainer}>
+      <Image filename={imagePath} width={381} height={144} alt="Not found" />
+    </div>
+  </div>
+);
+
+NotFound.propTypes = {
+  imagePath: PropTypes.string,
+};
+
+export default NotFound;

package/src/gatsby-core-theme/components/atoms/not-found/not-found.module.scss

@@ -0,0 +1,17 @@
+.wrapper {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  padding: 0 1.6rem;
+  margin-top: 8rem;
+
+  @include min(laptop) {
+    margin-top: 0;
+    padding: 0 2.4rem;
+  }
+
+  .textBlock {
+    @include min(tablet) {
+      max-width: 60%;
+    }
+  }
+}

package/src/gatsby-core-theme/components/atoms/spotlights/index.js

@@ -20,10 +20,10 @@ const Spotlights = ({ module, page }) => {
     const img = mode === 'icon' ? item.icon : item.image;
     return (
       <>
-        <span className={styles.itemImage}>
+        <span className={`${styles.itemImage} logo-cta`}>
           <LazyImage alt={item.label} src={imagePrettyUrl(img)} />
         </span>
-        <span className={styles.label}>{item.label}</span>
+        <span className={`${styles.label} name-cta`}>{item.label}</span>
       </>
     );
   };
@@ -58,11 +58,17 @@ const Spotlights = ({ module, page }) => {
             {path === 'about-us' ? (
               <>
                 {item.link.type === 'external' ? (
-                  <a href={item.link.value} title={item.label} target="_blank" rel="noreferrer">
+                  <a
+                    href={item.link.value}
+                    title={item.label}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="spotlights-gtm"
+                  >
                     {content(item)}
                   </a>
                 ) : (
-                  <Link to={item.link.value} title={item.label}>
+                  <Link to={item.link.value} title={item.label} className="spotlights-gtm">
                     {content(item)}
                   </Link>
                 )}
@@ -79,14 +85,18 @@ const Spotlights = ({ module, page }) => {
                         title={item.label}
                         target="_blank"
                         rel="noreferrer"
-                        className={styles.readMore}
+                        className={`${styles.readMore} spotlights-gtm`}
                       >
                         {item.link_text ? item.link_text : 'Read More'}
                       </a>
                     ) : (
                       <>
                         {item.link.value && (
-                          <Link to={item.link.value} title={item.label} className={styles.readMore}>
+                          <Link
+                            to={item.link.value}
+                            title={item.label}
+                            className={`${styles.readMore} spotlights-gtm`}
+                          >
                             {see_more_link.title ? see_more_link.title : 'Read More'}
                           </Link>
                         )}
@@ -98,11 +108,17 @@ const Spotlights = ({ module, page }) => {
             ) : (
               <div className={styles.pillarCards}>
                 {item.link.type === 'external' ? (
-                  <a href={item.link.value} title={item.label} target="_blank" rel="noreferrer">
+                  <a
+                    href={item.link.value}
+                    title={item.label}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="spotlights-gtm"
+                  >
                     {content(item)}
                   </a>
                 ) : (
-                  <Link to={item.link.value} title={item.label}>
+                  <Link to={item.link.value} title={item.label} className="spotlights-gtm">
                     {content(item)}
                   </Link>
                 )}
@@ -120,6 +136,7 @@ const Spotlights = ({ module, page }) => {
                     targetBlank={item.link.type === 'external'}
                     to={item.link.value}
                     primaryColor={false}
+                    gtmClass="spotlights-gtm btn-cta"
                   />
                 )}
               </div>