gatsby-core-theme 1.3.0 → 1.4.2

package/src/components/atoms/custom-select/index.js

@@ -30,7 +30,7 @@ const CustomSelect = ({
     <div className={styles.customSelectContainer}>
       <button
         ref={defBtn}
-        className={styles.select}
+        className={`${styles.select} custom-select-gtm btn-cta`}
         type="button"
         onClick={showDropdown}
         data-id="select-button"
@@ -56,6 +56,7 @@ const CustomSelect = ({
             >
               <button
                 type="button"
+                className="custom-select-gtm btn-cta"
                 onClick={() => {
                   onClick(currentItem[itemsValue], currentItem[itemsLabel], currentItem.type);
                   setSelectedOption(currentItem);

package/src/components/atoms/logo/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { prettyTracker,imagePrettyUrl } from '~helpers/getters';
+import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './logo.module.scss';
@@ -11,7 +11,7 @@ const Logo = ({ item = {} }) => {
   return (
     <div>
       <a
-        className={styles.operatorLogo}
+        className={`${styles.operatorLogo} logo-cta`}
         href={prettyLink}
         title={item.name}
         target="_blank"

package/src/components/atoms/menu/items/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import Item from './item';
@@ -14,6 +15,7 @@ const Items = ({
       subMenuDropDownButton: true,
     },
   },
+  gtmClass = '',
 }) => {
   let link;
   let menu;
@@ -46,6 +48,7 @@ const Items = ({
         hasChildren
         item={item}
         showSubMenuHandler={showSubMenu}
+        gtmClass={gtmClass}
         options={{
           mobile: {
             subMenuDropDownButton: options.mobile.subMenuDropDownButton,
@@ -61,6 +64,7 @@ const Items = ({
               key={keygen()}
               item={child}
               menuListRef={menuListRef}
+              gtmClass={gtmClass}
               options={{
                 mobile: {
                   canOpenAllSubMenus: options.mobile.canOpenAllSubMenus,
@@ -77,6 +81,7 @@ const Items = ({
       <Item
         hasChildren={false}
         item={item}
+        gtmClass={gtmClass}
         options={{ mobile: { subMenuDropDownButton: options.mobile.subMenuDropDownButton } }}
       />
     );
@@ -108,6 +113,7 @@ Items.propTypes = {
       subMenuDropDownButton: PropTypes.bool,
     }),
   }),
+  gtmClass: PropTypes.string,
 };
 
 export default Items;

package/src/components/atoms/menu/items/item/index.js

@@ -6,8 +6,6 @@ import ConditionalWrapper from '~atoms/conditional-wrapper';
 
 import styles from './item.module.scss';
 
-/* eslint-disable react/jsx-no-target-blank */
-
 export default function Item({
   item,
   hasChildren,
@@ -17,6 +15,7 @@ export default function Item({
       subMenuDropDownButton: true,
     },
   },
+  gtmClass = '',
 }) {
   const [active, setActive] = useState('');
   useEffect(() => {
@@ -51,7 +50,7 @@ export default function Item({
           title={item.title}
           rel={`noreferrer ${item.nofollow && 'nofollow'}`}
           target="_blank"
-          className={`${styles.item} ${active} ${
+          className={`${gtmClass} ${styles.item} ${active} ${
             !options.mobile.subMenuDropDownButton && isMobile && hasChildren
               ? styles.inactiveLink
               : ''
@@ -63,7 +62,7 @@ export default function Item({
         </a>
       ) : (
         <Link
-          className={`${styles.item} ${active} ${
+          className={`${gtmClass} ${styles.item} ${active} ${
             !options.mobile.subMenuDropDownButton && isMobile && hasChildren
               ? styles.inactiveLink
               : ''
@@ -80,6 +79,7 @@ export default function Item({
       {options.mobile.subMenuDropDownButton && isMobile && hasChildren && (
         <button
           type="button"
+          className={`${gtmClass} btn-cta`}
           onClick={(e) => {
             showSubMenuHandler(styles);
             toggleDropDown(e);
@@ -111,4 +111,5 @@ Item.propTypes = {
       subMenuDropDownButton: PropTypes.bool,
     }),
   }),
+  gtmClass: PropTypes.string,
 };

package/src/components/atoms/menu/menu-icon/index.js

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
 import styles from './menu-icon.module.scss';
 
-const MenuIcon = ({ onClick }) => {
-  
+const MenuIcon = ({ onClick, gtmClass }) => {
   const { showMenu } = useContext(NavigationContext);
 
   return (
     <div
-      className={styles.menuIconContainer}
+      className={`${styles.menuIconContainer} ${gtmClass}`}
       onKeyDown={() => onClick()}
       onClick={() => onClick()}
       role="button"
@@ -24,7 +23,8 @@ const MenuIcon = ({ onClick }) => {
 };
 
 MenuIcon.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  gtmClass: PropTypes.string,
 };
 
 export default MenuIcon;

package/src/components/atoms/module-title/index.js

@@ -36,7 +36,7 @@ const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = nu
         >
           {module.module_title && getTitle(module)}
           {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>
@@ -57,6 +57,7 @@ ModuleTitle.propTypes = {
     style: PropTypes.string,
   }),
   viewMoreIcon: PropTypes.element,
+  pageContext: PropTypes.shape({}),
 };
 
 export default ModuleTitle;

package/src/components/atoms/not-found/index.js

@@ -0,0 +1,14 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import styles from './not-found.module.scss';
+
+const NotFound = () => (
+  <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>
+);
+
+export default NotFound;

package/src/components/atoms/not-found/not-found.module.scss

@@ -0,0 +1,16 @@
+.wrapper {
+  display: flex;
+  grid-area: main;
+  padding: 0 2.4rem;
+  margin-top: 8rem;
+
+  @include min(laptop){
+    margin-top: 0;
+  }
+
+  .textBlock{
+    @include min(tablet){
+      max-width: 60%;
+    }
+  }
+}

package/src/components/atoms/open-graph/index.js

@@ -28,7 +28,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         rel="noreferrer"
         href={fbURL}
         role="button"
-        className={styles.btn}
+        className={`${styles.btn} open-graph-gtm`}
         onClick={(e) => share(e, 555, 602)}
       >
         <FaFacebookF />
@@ -38,7 +38,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         rel="noreferrer"
         href={twitterURL}
         role="button"
-        className={styles.btn}
+        className={`${styles.btn} open-graph-gtm`}
         onClick={(e) => share(e, 555, 255)}
       >
         <FaTwitter />
@@ -50,9 +50,9 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
 OpenGraph.propTypes = {
   page: PropTypes.shape({
     title: PropTypes.string,
-    path: PropTypes.string
+    path: PropTypes.string,
   }).isRequired,
-  text: PropTypes.string
-}
+  text: PropTypes.string,
+};
 
 export default OpenGraph;

package/src/components/atoms/operator-cta/index.js

@@ -1,9 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '~atoms/button';
 import { prettyTracker, translate } from '~helpers/getters';
+import { Context } from '~context/TranslationsProvider';
 import styles from './operator-cta.module.scss';
 
 export default function OperatorCta({
@@ -12,8 +13,9 @@ export default function OperatorCta({
   closedCasinoText = 'This Casino has closed',
   playText = 'Visit',
   tracker = 'main',
-  translations = {},
+  gtmClass = '',
 }) {
+  const { translations } = useContext(Context) || {};
   const status = operator?.status;
   const isPlaceHolder = status === 'coming_soon';
   const isClosed = status === 'inactive';
@@ -23,7 +25,7 @@ export default function OperatorCta({
         <a
           title={placeholderText}
           aria-label={placeholderText}
-          className={styles.operatorCtaPlaceholder}
+          className={`${styles.operatorCtaPlaceholder} ${gtmClass} operator-cta-gtm`}
         >
           {placeholderText}
         </a>
@@ -35,7 +37,7 @@ export default function OperatorCta({
         <a
           title={closedCasinoText}
           aria-label={closedCasinoText}
-          className={styles.operatorCtaClosed}
+          className={`${styles.operatorCtaClosed} ${gtmClass} operator-cta-gtm`}
         >
           {closedCasinoText}
         </a>
@@ -45,7 +47,14 @@ export default function OperatorCta({
     const trackerType = tracker.toLowerCase().replace(' ', '_');
     const prettyLink = prettyTracker(operator, trackerType);
     const translateBtn = translate(translations, 'play_now', playText);
-    return <Button to={prettyLink} btnText={translateBtn} isInternalLink={false} />;
+    return (
+      <Button
+        to={prettyLink}
+        btnText={translateBtn}
+        isInternalLink={false}
+        gtmClass={`${gtmClass} operator-cta-gtm btn-cta`}
+      />
+    );
   };
 
   return renderCta();
@@ -59,4 +68,5 @@ OperatorCta.propTypes = {
   placeholderText: PropTypes.string,
   playText: PropTypes.string,
   closedCasinoText: PropTypes.string,
+  gtmClass: PropTypes.string,
 };

package/src/components/atoms/operator-cta/{operator-cta.test.disabled.js → operator-cta.test.js}

@@ -1,11 +1,12 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import getPageData from '~tests/factories/pages/default.factory';
 
 import OperatorCta from '.';
 
 describe('OperatorCta Component', () => {
-// Commented until we get the operator status data done on hercules
+  // Commented until we get the operator status data done on hercules
   // test('test placeholder', () => {
   //   const { getByText } = render(<OperatorCta placeholderText="test" />);
   //   expect(getByText('test')).toBeTruthy();
@@ -22,6 +23,16 @@ describe('OperatorCta Component', () => {
   //   const { container } = render(<OperatorCta playText={'test3'} />);
   //   expect(getByText('test3')).toBeTruthy();
   // });
+
+  test('test GTM class', () => {
+    const data = getPageData();
+    const { getByText } = render(
+      <OperatorCta playText="test3" gtmClass="operator-cta-gtm btn-cta" operator={data} />
+    );
+
+    expect(getByText('test3').closest('a').classList.contains('operator-cta-gtm')).toBe(true);
+    expect(getByText('test3').closest('a').classList.contains('btn-cta')).toBe(true);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/operator-info-block/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 /* eslint-disable no-nested-ternary */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -28,7 +29,12 @@ const OperatorInfoBlock = ({ page }) => {
               <p className={styles.label}>{item.field_label}</p>
               <div className={styles.value}>
                 {item.field_name === 'url' ? (
-                  <a href={prettyLink} target="_blank" rel="noindex nofollow noreferrer">
+                  <a
+                    href={prettyLink}
+                    target="_blank"
+                    className="operator-info-block-gtm"
+                    rel="noindex nofollow noreferrer"
+                  >
                     {relation[item.field_name]}
                   </a>
                 ) : item.field_name === 'support_types' ? (
@@ -60,6 +66,7 @@ const OperatorInfoBlock = ({ page }) => {
 };
 
 OperatorInfoBlock.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
   activeOperator: PropTypes.bool,
   page: PropTypes.shape({
     relation: PropTypes.shape({

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

@@ -10,7 +10,7 @@ const Operator = ({ item = {} }) => (
   <div className={styles.row}>
     <LazyImage src={imagePrettyUrl(item.relation.logo_url, null, 20)} />
     <h3>{item.title}</h3>
-    <Button to="/#" primaryColor isInternalLink={false} />
+    <Button to="/#" primaryColor isInternalLink={false} gtmClass="operator-gtm btn-cta" />
   </div>
 );
 

package/src/components/atoms/spotlights/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 /* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -36,11 +37,17 @@ const Spotlights = ({ module }) => {
         {items.map((item) => (
           <li key={keygen()} className={styles.spotlightItem}>
             {item.link.type === 'external' ? (
-              <a href={item.link.value} title={item.label} target="_blank" rel="noreferrer">
+              <a
+                href={item.link.value}
+                className="spotlights-gtm"
+                title={item.label}
+                target="_blank"
+                rel="noreferrer"
+              >
                 {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>
             )}
@@ -54,7 +61,7 @@ const Spotlights = ({ module }) => {
                     title={item.label}
                     target="_blank"
                     rel="noreferrer"
-                    className={styles.readMore}
+                    className={`${styles.readMore} spotlights-gtm`}
                   >
                     {item.link_text ? item.link_text : 'Read More'}
                     <GrFormNextLink />
@@ -62,7 +69,11 @@ const Spotlights = ({ module }) => {
                 ) : (
                   <>
                     {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`}
+                      >
                         {item.link_text ? item.link_text : 'Read More'}
                         <GrFormNextLink />
                       </Link>

package/src/components/molecules/carousel/default-slide/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -30,6 +32,7 @@ const Slide = ({
           btnText={primaryBtnText}
           isInternalLink={false}
           primaryColor
+          gtmClass="carousel-gtm btn-cta"
         />
       )}
       {item.secondary_action && (
@@ -39,6 +42,7 @@ const Slide = ({
           btnText={secondaryBtnText}
           isInternalLink={false}
           primaryColor={false}
+          gtmClass="carousel-gtm btn-cta"
         />
       )}
       {item.label && <span className={styles.label}>{item.label}</span>}

package/src/components/molecules/counter/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -5,8 +7,6 @@ import CounterItem from './counter-item';
 import styles from './counter.module.scss';
 import keygen from '~helpers/keygen';
 
-/* eslint-disable react/no-danger */
-
 const Counter = ({ module }) => {
   return (
     <>

package/src/components/molecules/footer/index.js

@@ -24,7 +24,10 @@ const Footer = ({
       <div className={styles.topPart}>
         <div className={styles.links}>
           {footerMenu && showLinks && (
-            <LinkList lists={getExtraField(section.extra_fields, footerMenu)} />
+            <LinkList
+              lists={getExtraField(section.extra_fields, footerMenu)}
+              gtmClass="mobile-menu-gtm"
+            />
           )}
         </div>
 
@@ -34,7 +37,7 @@ const Footer = ({
       <div className={styles.bottomPart}>
         {footerBottomCustom && <BottomSection section={section} />}
         <div className={styles.copyrightDisclaimer}>
-          {copyrightDisclaimer && getExtraField(section.extra_fields, copyrightDisclaimer) &&(
+          {copyrightDisclaimer && getExtraField(section.extra_fields, copyrightDisclaimer) && (
             <p
               dangerouslySetInnerHTML={{
                 __html: getExtraField(section.extra_fields, copyrightDisclaimer).replace(
@@ -53,6 +56,7 @@ const Footer = ({
               imageOnly
               singleList
               lists={getExtraField(section.extra_fields, footerLogos)}
+              gtmClass="mobile-menu-gtm logo-cta"
             />
           )}
         </div>

package/src/components/molecules/header/header.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-
 import getHeaderSection from '~tests/factories/sections/header.factory';
 import '~tests/helpers/match-media.mock';
 import Header from '.';

package/src/components/molecules/link-list/index.js

@@ -21,6 +21,7 @@ const LinkList = ({
   once = false,
   height,
   width,
+  gtmClass = '',
 }) => {
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
@@ -64,11 +65,17 @@ const LinkList = ({
               title={item.title}
               rel={`noreferrer ${item.nofollow && 'nofollow'}`}
               target="_blank"
+              className={gtmClass}
             >
               {renderLinkContent(item, index)}
             </a>
           ) : (
-            <Link to={item.value} title={item.title} rel={item.nofollow && 'nofollow'}>
+            <Link
+              to={item.value}
+              title={item.title}
+              className={gtmClass}
+              rel={item.nofollow && 'nofollow'}
+            >
               {renderLinkContent(item, index)}
             </Link>
           )
@@ -126,6 +133,7 @@ LinkList.propTypes = {
   once: PropTypes.bool,
   width: PropTypes.number,
   height: PropTypes.number,
+  gtmClass: PropTypes.string,
 };
 
 export default LinkList;

package/src/components/molecules/main/index.js

@@ -8,14 +8,16 @@ import keygen from '~helpers/keygen';
 const Main = ({ section = {}, page = {}, pageContext = {} }) => {
   const SearchPage = page.path === 's' ? loadable(() => import(`~pages/search`)) : null;
   const AuthorBox = page.author ? loadable(() => import(`~atoms/author-box`)) : null;
+  const NotFound = page?.path?.includes('404') ? loadable(() => import(`~atoms/not-found`)) : null;
 
   return (
     <main className={styles.modulePage}>
+      {NotFound && <NotFound />}
       {section.modules &&
         section.modules.map((module) => (
           <Module key={keygen()} module={module} page={page} pageContext={pageContext} />
         ))}
-      {AuthorBox && <AuthorBox author={page.author} translations={page.translations} />}
+      {AuthorBox && <AuthorBox author={page.author} />}
       {SearchPage && <SearchPage page={page} />}
     </main>
   );

package/src/components/molecules/menu/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 import React, { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 
@@ -25,6 +26,7 @@ const Menu = ({
       orientation: 'horizontal',
     },
   },
+  gtmClass = '',
 }) => {
   let menuObject;
 
@@ -59,13 +61,14 @@ const Menu = ({
 
   return (
     <div className={styles.menuContainer}>
-      <MenuIcon onClick={handleMenuIconClick} />
+      <MenuIcon onClick={handleMenuIconClick} gtmClass="main-menu-gtm" />
       <ul ref={menuListRef} className={`${menuListClasses} ${showMenu && styles.show}`}>
         {menuObject &&
           menuObject.children.map((child) => {
             return (
               <Items
                 menuListRef={menuListRef}
+                gtmClass={gtmClass}
                 key={keygen()}
                 item={child}
                 options={{
@@ -109,6 +112,7 @@ Menu.propTypes = {
     ),
   }).isRequired,
   menu: PropTypes.string.isRequired,
+  gtmClass: PropTypes.string,
 };
 
 export default Menu;

package/src/components/molecules/operator-banner/index.js

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { prettyTracker } from '~helpers/getters';
+import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
-import { imagePrettyUrl } from '~helpers/getters';
 import Bonus from '~atoms/bonus';
 import StarRating from '~molecules/star-rating';
 import OperatorCta from '~atoms/operator-cta';
@@ -28,7 +27,6 @@ export default function OperatorBanner({
   const clickHandler = () => {
     setShow(false);
   };
-  
 
   return (
     show && (
@@ -45,7 +43,7 @@ export default function OperatorBanner({
             {logo ? (
               <a
                 href={prettyLink}
-                className={styles.logo}
+                className={`${styles.logo} operator-banner-gtm logo-cta`}
                 title={operator?.name}
                 target="_blank"
                 rel="noreferrer"
@@ -55,7 +53,13 @@ export default function OperatorBanner({
             ) : (
               <div>
                 <h3>
-                  <a href={prettyLink} title={operator?.name} target="_blank" rel="noreferrer">
+                  <a
+                    href={prettyLink}
+                    title={operator?.name}
+                    className="operator-banner-gtm name-cta"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     {operator?.name}
                   </a>
                 </h3>
@@ -63,7 +67,13 @@ export default function OperatorBanner({
                   <StarRating numOfStars={5} rating={operator.rating} />
                 )}
                 {isPlaceholder && hasLink && (
-                  <a href={operator.url} title={operator?.name} target="_blank" rel="noreferrer">
+                  <a
+                    href={operator.url}
+                    title={operator?.name}
+                    className="operator-banner-gtm"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     {operator?.url?.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')}
                   </a>
                 )}
@@ -86,7 +96,7 @@ export default function OperatorBanner({
           </div>
           {sticky && (
             <button
-              className={styles.closeBtn}
+              className={`${styles.closeBtn} operator-banner-gtm btn-cta`}
               onClick={clickHandler}
               aria-label="close"
               type="button"

package/src/components/molecules/operator-banner/operator-banner.test.js

@@ -17,7 +17,7 @@ describe('OperatorBanner Component', () => {
     expect(getByText('Visit')).toBeTruthy();
   });
   test('render component placeholder', () => {
-    let data = getPageData();
+    const data = getPageData();
     data.status = 'coming_soon';
     const { container, getByText } = render(<OperatorBanner hasLink operator={data} />);
     expect(container).toBeTruthy();