gatsby-matrix-theme 2.0.5 → 2.2.0

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

@@ -1,123 +1,117 @@
+/* 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',
-    component: Newsletter,
-    argTypes: {
-      page: {
-        name: 'page',
-        type: { name: 'object', required: true },
-        defaultValue: null,
-        description: 'The page object.',
-      },
-      mainText: {
-        name: 'mainText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Main text',
-      },
-      subscribeText: {
-        name: 'subscribeText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Subscribe Text',
-      },
-      placeholderName: {
-        name: 'placeholderName',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Placeholder Name',
-      },
-      placeholderEmail: {
-        name: 'placeholderEmail',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Placeholder Email',
-      },
-      privacyText: {
-        name: 'privacyText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Privacy Text',
-      },
-      openBtnText: {
-        name: 'openBtnText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Open Button Text',
-      },
-      buttonText: {
-        name: 'buttonText',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Button Text',
-      },
-      formAction: {
-        name: 'formAction',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Form Action',
-      },
-      newsletterListId: {
-        name: 'newsletterListId',
-        type: { name: 'String', required: false },
-        defaultValue: '',
-        description: 'Newsletter List Id',
-      },
-      footer: {
-        name: 'footer',
-        type: { name: 'boolean', required: true },
-        defaultValue: false,
-        description: 'Footer Newsletter',
-      },
+  title: 'Matrix-Theme/Molecules/Newsletter',
+  component: Newsletter,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: null,
+      description: 'The page object.',
     },
-    parameters: {
-      docs: {
-        description: {
-          component:
-            'Newsletter component',
-        },
-        page: () => (
-          <>
-            <Title />
-            <Description />
-            <Primary />
-            <ArgsTable story={PRIMARY_STORY} />
-          </>
-        ),
-      },
+    mainText: {
+      name: 'mainText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Main text',
     },
-  };
-  
-  const Template = (args) => <Newsletter {...args} />;
-  
-  export const Default = Template.bind({});
-  Default.args = {
-    page: {
-      translations:{
-          grafikk: 'Grafikk',
-          bonuser: 'Bonuser',
-          spillopplevelse: 'Spillopplevelse'
+    subscribeText: {
+      name: 'subscribeText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Subscribe Text',
+    },
+    placeholderName: {
+      name: 'placeholderName',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Placeholder Name',
+    },
+    placeholderEmail: {
+      name: 'placeholderEmail',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Placeholder Email',
+    },
+    privacyText: {
+      name: 'privacyText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Privacy Text',
+    },
+    openBtnText: {
+      name: 'openBtnText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Open Button Text',
+    },
+    buttonText: {
+      name: 'buttonText',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Button Text',
+    },
+    formAction: {
+      name: 'formAction',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Form Action',
+    },
+    newsletterListId: {
+      name: 'newsletterListId',
+      type: { name: 'String', required: false },
+      defaultValue: '',
+      description: 'Newsletter List Id',
+    },
+    footer: {
+      name: 'footer',
+      type: { name: 'boolean', required: true },
+      defaultValue: false,
+      description: 'Footer Newsletter',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Newsletter component',
       },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
     },
-    mainText:"You get more than 405 free spins",
-    subscribeText:"Subscribe to our newsletter and get more than 405 free spins instantly.",
-    placeholderName:"Name",
-    placeholderEmail:"Email",
-    privacyText:"By subscribing, you confirm that you are over 18 years of age and that you accept our",
-    openBtnText:"FÅ 405 FREE SPINS UMIDDELBART",
-    buttonText:"Hent dine freespins",
-    formAction:'',
-    newsletterListId:'',
-    footer : false
-  };
-  
+  },
+};
+
+const Template = (args) => <Newsletter {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  page: {},
+  mainText: 'You get more than 405 free spins',
+  subscribeText: 'Subscribe to our newsletter and get more than 405 free spins instantly.',
+  placeholderName: 'Name',
+  placeholderEmail: 'Email',
+  privacyText:
+    'By subscribing, you confirm that you are over 18 years of age and that you accept our',
+  openBtnText: 'FÅ 405 FREE SPINS UMIDDELBART',
+  buttonText: 'Hent dine freespins',
+  formAction: '',
+  newsletterListId: '',
+  footer: false,
+};

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

@@ -1,19 +1,19 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/prop-types */
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './newsletter-optin.module.scss';
 
 export default function Newsletter({
-  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.',
-  privacyText = 'Read our <a href="/privacy-policy">Privacy Policy</a> for more details.',
+  privacyText = 'Read our <a class="newsletter-gtm" href="/privacy-policy">Privacy Policy</a> for more details.',
 }) {
   const form = useRef(null);
-
+  const { translations } = useContext(Context) || {};
   const onSubmit = (e) => {
     e.preventDefault();
     // validationForm(e.target.elements) && form.current.submit();
@@ -70,17 +70,17 @@ export default function Newsletter({
         <p>{description}</p>
         <form action="" method="post" ref={form} onSubmit={onSubmit}>
           <input
-            placeholder={translate(page?.translations, 'first_name', 'First Name')}
+            placeholder={translate(translations, 'first_name', 'First Name')}
             type="text"
             name="name"
           />
           <input
-            placeholder={translate(page?.translations, 'email', 'E-Mail')}
+            placeholder={translate(translations, 'email', 'E-Mail')}
             type="email"
             name="email"
           />
           <input
-            placeholder={translate(page?.translations, 'phone_number', 'Phone Number')}
+            placeholder={translate(translations, 'phone_number', 'Phone Number')}
             type="text"
             name="phone"
           />

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',
+      },
     },
-  };
-  
+  },
+};