gatsby-matrix-theme 2.1.2 → 2.2.0

package/src/components/molecules/newsletter-optin/newsletter-optin.stories.js

@@ -1,97 +1,96 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
-    Title,
-    Description,
-    Primary,
-    PRIMARY_STORY,
-    ArgsTable,
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
 } from '@storybook/addon-docs/blocks';
 
 import Newsletter from '.';
 
 export default {
-    title: 'Matrix-Theme/Molecules/Newsletter Optin',
-    component: Newsletter,
-    argTypes: {
-        page: {
-            name: 'page',
-            type: { name: 'object', required: true },
-            defaultValue: null,
-            description: 'The page object.',
-            table: {
-                type: { summary: 'object' },
-                defaultValue: { summary: null },
-            },
-        },
-        title: {
-            name: 'title',
-            type: { name: 'string', required: false },
-            defaultValue: 'Exclusive Casino Offers and Free Spins straight to your Inbox',
-            description: `This text message will show on top of Newsletter as a title.`,
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'Exclusive Casino Offers and Free Spins straight to your Inbox' },
-            },
-        },
-        description: {
-            name: 'description',
-            defaultValue: 'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
-            description: `This text message will be shown below the title.`,
-            table: {
-                type: {summary: 'string'},
-                defaultValue: {summary: 'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!'}
-            },
-        },
-        terms: {
-            name  : 'terms',
-            defaultValue: 'I confirm that I am 18+ years old and Irish resident.',
-            description: `This text message shows Terms and Conditions.`,
-            table: {
-                type: {summary: 'string'},
-                defaultValue: {summary: 'I confirm that I am 18+ years old and Irish resident.'}
-            },
-        },
-        privacy_text: {
-            name: 'privacy_text',
-            defaultValue: 'Read our Privacy Policy for more details.',
-            description: `This text message shows the URL for Privacy Policy.`,
-            table: {
-                type: {summary: 'string'},
-                defaultValue: {summary: 'Read our Privacy Policy for more details.'}
-            },
-        },
+  title: 'Matrix-Theme/Molecules/Newsletter Optin',
+  component: Newsletter,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: null,
+      description: 'The page object.',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: null },
+      },
     },
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    'Generates Newsletter Optin form on PPC pages.',
-            },
-            page: () => (
-                <>
-                    <Title />
-                    <Description />
-                    <Primary />
-                    <ArgsTable story={PRIMARY_STORY} />
-                </>
-            ),
+    title: {
+      name: 'title',
+      type: { name: 'string', required: false },
+      defaultValue: 'Exclusive Casino Offers and Free Spins straight to your Inbox',
+      description: `This text message will show on top of Newsletter as a title.`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Exclusive Casino Offers and Free Spins straight to your Inbox' },
+      },
+    },
+    description: {
+      name: 'description',
+      defaultValue:
+        'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
+      description: `This text message will be shown below the title.`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: {
+          summary:
+            'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
         },
+      },
+    },
+    terms: {
+      name: 'terms',
+      defaultValue: 'I confirm that I am 18+ years old and Irish resident.',
+      description: `This text message shows Terms and Conditions.`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'I confirm that I am 18+ years old and Irish resident.' },
+      },
+    },
+    privacy_text: {
+      name: 'privacy_text',
+      defaultValue: 'Read our Privacy Policy for more details.',
+      description: `This text message shows the URL for Privacy Policy.`,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Read our Privacy Policy for more details.' },
+      },
     },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Generates Newsletter Optin form on PPC pages.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
 };
 
 const Template = (args) => <Newsletter {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    page: {
-        translations:{
-            first_name: 'First Name',
-            email: 'E-Mail',
-            phone_number: 'Phone Number'
-        }
-    },
-    title: 'Exclusive Casino Offers and Free Spins straight to your Inbox',
-    description: 'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
-    terms: 'I confirm that I am 18+ years old and Irish resident.',
-    privacy_text: 'Read our Privacy Policy for more details.'
+  page: {},
+  title: 'Exclusive Casino Offers and Free Spins straight to your Inbox',
+  description:
+    'Subscribe below to be the first to get notified of exclusive casino offers, free spins and bonuses - conveniently via email or SMS. We won’t flood your inbox, but just give you the good stuff in the right way!',
+  terms: 'I confirm that I am 18+ years old and Irish resident.',
+  privacy_text: 'Read our Privacy Policy for more details.',
 };

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

@@ -41,7 +41,13 @@ const OperatorSummary = ({
         <ConditionalWrapper
           condition={activeOperator}
           wrapper={(item) => (
-            <a href={prettyLink} title={operatorName} target="_blank" rel="noreferrer">
+            <a
+              href={prettyLink}
+              title={operatorName}
+              target="_blank"
+              rel="noreferrer"
+              className="operator-summary-gtm"
+            >
               {item}
             </a>
           )}
@@ -53,7 +59,7 @@ const OperatorSummary = ({
           className={styles.summary}
           dangerouslySetInnerHTML={{ __html: page.extra_fields.summary }}
         />
-        <OperatorCta operator={operatorData} />
+        <OperatorCta operator={operatorData} gtmClass="operator-summary-operator-cta-gtm" />
         {operatorData?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
           <Tnc hasCollapse={false} operator={operatorData} />
         )}

package/src/components/molecules/small-welcome-bonus/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   prettyTracker,
@@ -9,6 +9,7 @@ import {
   getBonus,
 } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import { isMobileDevice } from '../../../helpers/mobile-detect';
 
 import styles from './small-welcome-bonus.module.scss';
@@ -16,14 +17,14 @@ import styles from './small-welcome-bonus.module.scss';
 const Index = ({ page }) => {
   const operator = page?.extra_fields?.game_review_summary_operator;
   const { logo_url, status } = operator;
-  const translates = page?.translations;
+  const { translations } = useContext(Context) || {};
   const isMobile = isMobileDevice();
   const prettyLink = prettyTracker(operator);
-  let playNow = translate(translates, 'play_now', 'Play now');
+  let playNow = translate(translations, 'play_now', 'Play now');
   const bonus = getBonus('main', operator);
 
   if (isMobile) {
-    playNow = `> ${translate(translates, 'play_for_real_at', 'Play for real at')} @ ${
+    playNow = `> ${translate(translations, 'play_for_real_at', 'Play for real at')} @ ${
       operator.name
     }`;
   }
@@ -33,7 +34,13 @@ const Index = ({ page }) => {
       <div className={styles.content}>
         <div className={styles.desc}>
           <div className={styles.logo}>
-            <a href={prettyLink} title={operator.name} target="_blank" rel="noreferrer">
+            <a
+              href={prettyLink}
+              title={operator.name}
+              target="_blank"
+              rel="noreferrer"
+              className="small-welcome-bonus-gtm logo-cta"
+            >
               <LazyImage
                 width={120}
                 height={50}
@@ -46,7 +53,13 @@ const Index = ({ page }) => {
         </div>
         <div className={styles.ctaButton}>
           {status === 'active' && (
-            <a href={prettyLink} title={operator.name} target="_blank" rel="noreferrer">
+            <a
+              href={prettyLink}
+              title={operator.name}
+              target="_blank"
+              rel="noreferrer"
+              className="small-welcome-bonus-gtm"
+            >
               {' '}
               {playNow}{' '}
             </a>

package/src/components/molecules/small-welcome-bonus/small-welcome-bonus.stories.js

@@ -1,64 +1,60 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
-    Title,
-    Description,
-    Primary,
-    PRIMARY_STORY,
-    ArgsTable,
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import SmallWelcomeBonus from '.';
 
 export default {
-    title: 'Matrix-Theme/Molecules/SmallWelcomeBonus',
-    component: SmallWelcomeBonus,
-    argTypes: {
-      page: {
-        name: 'page',
-        type: { name: 'object', required: true },
-        defaultValue: null,
-        description: 'The page object.',
-      },
+  title: 'Matrix-Theme/Molecules/SmallWelcomeBonus',
+  component: SmallWelcomeBonus,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: null,
+      description: 'The page object.',
     },
-    parameters: {
-      docs: {
-        description: {
-          component:
-            'Small Welcome Bonus component',
-        },
-        page: () => (
-          <>
-            <Title />
-            <Description />
-            <Primary />
-            <ArgsTable story={PRIMARY_STORY} />
-          </>
-        ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Small Welcome Bonus component',
       },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
     },
-  };
-  
-  const Template = (args) => <SmallWelcomeBonus {...args} />;
-  
-  export const Default = Template.bind({});
-  Default.args = {
-    page: {
-      translations:{
-          play_now:'Play Now'
-      },
-      extra_fields:{
-        game_review_summary_operator:{
-          name:"Chanz Casino",
-          bonus:{
-            one_liners:{
-              main:{
-                one_liner:"100 kroner gratis + 200% opptil 2000 kr + 300 gratisspinn"
-              }
-            }
+  },
+};
+
+const Template = (args) => <SmallWelcomeBonus {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  page: {
+    extra_fields: {
+      game_review_summary_operator: {
+        name: 'Chanz Casino',
+        bonus: {
+          one_liners: {
+            main: {
+              one_liner: '100 kroner gratis + 200% opptil 2000 kr + 300 gratisspinn',
+            },
           },
-          logo_url: "chanz390pngb3f8bb64f3-original.png",
-          status: "active"
-        }
-      }
+        },
+        logo_url: 'chanz390pngb3f8bb64f3-original.png',
+        status: 'active',
+      },
     },
-  };
-  
+  },
+};

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,10 +4,11 @@
 /* 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';
@@ -15,13 +16,14 @@ 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);
@@ -93,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} tracker={tracker} />
+              <PopupCard item={item} tracker={tracker} />
             ))}
           </div>
         </div>
@@ -112,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;