gatsby-matrix-theme 23.0.5 → 24.0.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [24.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v23.0.5...v24.0.0) (2023-05-24)
+
+
+### Bug Fixes
+
+* add facebook pixel ([cd571b3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cd571b3dcb73726ac09eefb81bddc0cd78651837))
+* test fix ([80a6399](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/80a63991dc219f7d93a4535fbda1adb04390d499))
+
+
+### Code Refactoring
+
+* change link text ([7e93fc0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7e93fc03611125ae95d1fc03d174a95d44d0dbda))
+* changes to generate link fn for email and link ([56e16d6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/56e16d6f331ebcc9f4e1c2c8a9a8892accc322fc))
+* update wagering calculator calculation ([aa44124](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa44124025161c602a137d75af3b83ea129e8f74))
+
+
+* Merge branch 'master' of https://git.ilcd.rocks/team-floyd/themes/matrix-theme ([df3098e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/df3098ec289c5a35574cc16a4cf80bd7021e49c2))
+* Merge branch 'tm-3404-facebook-pixel' into 'master' ([f5fe05e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f5fe05e3a281a9e29a11f119ea6d2e7f5077b524))
+* Merge branch 'master' into info-grid-email ([8d0f00d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8d0f00d0c12adcb41a0a813832595870555fc86d))
+* Merge branch 'info-grid-email' into 'master' ([ae2dada](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae2dada06b4ff34ec421f4e48b93bafbbb8c4b77))
+* revert temp change ([a510d09](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a510d092060bf98eb4e13cf0c5d566e31b1f01f2))
+* Merge branch 'master' into info-grid-email ([7d233af](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7d233afe9deae4bc05a4134a4695c8d2d5b904dd))
+* Merge branch 'tm-3094-wagering-calculator' into 'master' ([34c187e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/34c187ece4c78aeee50b755151a83bf3adf3e50a))
+
+
+### Tests
+
+* changes to test 1/2 ([f24f1cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f24f1cc4ef2f95ecdaaca592120e6ee964d724b1))
+* fix test 2/2 ([e7e846a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e7e846a875a7e04cae487d3e7f3e3fc67535938e))
+
 ## [23.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v23.0.4...v23.0.5) (2023-05-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "23.0.5",
+  "version": "24.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/molecules/wagering-calculator/index.js

@@ -25,9 +25,11 @@ const WageringCalculator = ({
         (Number(elements.bonus.value) +
           (elements.calc_select.value !== 'bonus' ? Number(elements.deposit.value) : 0)) *
           Number(elements.wagering.value) *
-          (100 / (Number(elements.contribution.value) || 1))
+          (100 / Number(elements.contribution.value))
       )
     );
+    // eslint-disable-next-line
+    !elements.contribution.value && (elements.contribution.value = 100);
   };
 
   return (
@@ -76,7 +78,7 @@ const WageringCalculator = ({
           <p className={styles.infoText}>{infoText}</p>
         </div>
       )}
-      {typeof result === 'number' && (
+      {!!result && (
         <div className={styles.resultContainer}>
           <span>{translate(translations, 'wagecalc_result', 'Result')}</span>
           <span>{result}</span>

package/src/constants/info-grid.js

@@ -16,21 +16,9 @@ export const defaultInfoGrid = {
     game_provider: ['game_provider.name', '🎮 Game Provider'],
     launch_date: ['launch_date', '✅ Launched', (value) => formatDate(value)],
     rtp: ['rtp', '🎮 RTP', (value) => generateRtp(value)],
-    volatility: [
-      'volatility',
-      '🎲 Volatility',
-      (value, translations) => generateVolatility(value, translations),
-    ],
-    freespins: [
-      'freespins',
-      '🎲 Freespins',
-      (value, translations) => generateYesorNo(value, translations),
-    ],
-    jackpot: [
-      'jackpots',
-      '✅ Jackpot',
-      (value, translations) => generateYesorNo(value, translations),
-    ],
+    volatility: ['volatility', '🎲 Volatility', (value, props) => generateVolatility(value, props)],
+    freespins: ['freespins', '🎲 Freespins', (value, props) => generateYesorNo(value, props)],
+    jackpot: ['jackpots', '✅ Jackpot', (value, props) => generateYesorNo(value, props)],
     winning_lines: ['winning_lines', '🎲 Paylines'],
     number_of_reels: ['number_of_reels', '🎲 Wheels'],
     slot_type: ['game_categories.0.name', '🎲 Slot Type'],
@@ -39,21 +27,9 @@ export const defaultInfoGrid = {
     game_provider: ['game_provider.name', '🎮 Game Provider'],
     launch_date: ['launch_date', '✅ Launched', (value) => formatGameDate(value)],
     rtp: ['rtp', 'RTP', (value) => generateRtp(value)],
-    volatility: [
-      'volatility',
-      '🎲 Volatility',
-      (value, translations) => generateVolatility(value, translations),
-    ],
-    freespins: [
-      'freespins',
-      '🎲 Freespins',
-      (value, translations) => generateYesorNo(value, translations),
-    ],
-    jackpot: [
-      'jackpots',
-      '✅ Jackpot',
-      (value, translations) => generateYesorNo(value, translations),
-    ],
+    volatility: ['volatility', '🎲 Volatility', (value, props) => generateVolatility(value, props)],
+    freespins: ['freespins', '🎲 Freespins', (value, props) => generateYesorNo(value, props)],
+    jackpot: ['jackpots', '✅ Jackpot', (value, props) => generateYesorNo(value, props)],
     winning_lines: ['winning_lines', '🎮 Paylines'],
     number_of_reels: ['number_of_reels', '🎲 Wheels'],
     slot_type: ['game_categories.0.name', '🎮 Slot Type'],
@@ -75,7 +51,7 @@ export const twoColInfoGrid = {
         '✅ Support Types',
         (value) => generateLicenseAndSupportTypes(value, null, 3),
       ],
-      email: ['email', '📧 Email', (value) => generateLink(value)],
+      email: ['', '📧 Email', (value, props) => generateLink(value, props)],
     },
     details: {
       software: ['software', '🎮 Game Providers', (value) => latestItems(value, null)],
@@ -108,7 +84,7 @@ export const twoColInfoGrid = {
         'Support Types',
         (value) => generateLicenseAndSupportTypes(value, null, 3),
       ],
-      email: ['email', 'Email', (value) => generateLink(value)],
+      email: ['', 'Email', (value, props) => generateLink(value, props)],
       currencies: [
         'bonus.currencies',
         'Accepted Currencies',
@@ -116,11 +92,7 @@ export const twoColInfoGrid = {
       ],
     },
     details: {
-      software: [
-        'software',
-        'Live Games',
-        (value, translations) => generateYesorNo(value, translations),
-      ],
+      software: ['software', 'Live Games', (value, props) => generateYesorNo(value, props)],
       deposit_methods: [
         'bonus.deposit_methods',
         'Payment Methods',
@@ -134,21 +106,9 @@ export const twoColInfoGrid = {
       rtp: ['rtp', 'RTP', (value) => generateRtp(value)],
     },
     details: {
-      volatility: [
-        'volatility',
-        'Volatility',
-        (value, translations) => generateVolatility(value, translations),
-      ],
-      respins: [
-        'freespins',
-        'Freespins',
-        (value, translations) => generateYesorNo(value, translations),
-      ],
-      jackpot: [
-        'jackpots',
-        'Jackpot',
-        (value, translations) => generateYesorNo(value, translations),
-      ],
+      volatility: ['volatility', 'Volatility', (value, props) => generateVolatility(value, props)],
+      respins: ['freespins', 'Freespins', (value, props) => generateYesorNo(value, props)],
+      jackpot: ['jackpots', 'Jackpot', (value, props) => generateYesorNo(value, props)],
       winning_lines: ['winning_lines', 'Paylines'],
       number_of_reels: ['number_of_reels', 'Wheels/Reels'],
     },

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

@@ -51,7 +51,7 @@ const InfoGrid = ({
     <div ref={ref} className={styles.grid}>
       {Object.keys(gridItems).map((key) => {
         const labelTitle = translate(translations, key, gridLabels[key][1]);
-        const value = generateLabel(key, gridItems[key], gridLabels[key][2], translations);
+        const value = generateLabel(key, gridItems[key], gridLabels[key][2], { translations });
         return gridItem(labelTitle, value);
       })}
     </div>
@@ -95,7 +95,7 @@ const InfoGrid = ({
                     valueKey,
                     gridItems[itemKey][valueKey],
                     gridLabels[itemKey][valueKey][2],
-                    translations
+                    { translations, template }
                   );
                   const isSoftware = valueKey === 'software';
                   const splitProviders =

package/src/gatsby-core-theme/components/atoms/info-grid/info-grid.test.js

@@ -272,4 +272,4 @@ describe('Show Info Grid Component', () => {
 });
 afterEach(() => {
   cleanup();
-});
+});

package/src/gatsby-core-theme/components/organisms/head/index.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
-
+import FacebookPixel from '../../../helpers/facebookPixel';
 import { schemaGenerator } from '~helpers/schema';
 import { getUrl, getPageImage, imagePrettyUrl } from '~helpers/getters';
 import keygen from '~helpers/keygen';
@@ -68,6 +68,7 @@ const HeadData = ({ page = {}, siteInfo }) => {
       <title>{metaTitle}</title>
       <html lang={getLanguage(isIL || page.language)} />
       <meta name="description" content={parsedMetaDescr} />
+      <FacebookPixel />
       {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
         <meta name="robots" content={page.meta_robots.join()} />
       )}

package/src/gatsby-core-theme/helpers/facebookPixel.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Script } from 'gatsby';
+
+const FacebookPixel = () => (
+  <>
+    {process.env.ENABLE_PIXEL && (
+      <>
+        <meta name="facebook-domain-verification" content={process.env.FBVERIFACTION} />
+
+        <Script strategy="idle">
+          {`
+                        !function(f,b,e,v,n,t,s)
+                        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+                        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+                        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+                        n.queue=[];t=b.createElement(e);t.async=!0;
+                        t.src=v;s=b.getElementsByTagName(e)[0];
+                        s.parentNode.insertBefore(t,s)}(window, document,'script',
+                        'https://connect.facebook.net/en_US/fbevents.js');
+                        fbq('init', ${process.env.PIXEL_ID});
+                        fbq('track', 'PageView');
+                    `}
+        </Script>
+        <Script strategy="idle">
+          {`
+                        if (typeof window !== 'undefined') {
+                            document.querySelector('noscript').innerHTML = \`
+                            <img
+                                height="1"
+                                width="1"
+                                style={{ display: 'none' }}
+                                src="https://www.facebook.com/tr?id=${process.env.PIXEL_ID}&ev=PageView&noscript=1"
+                            />
+                            \`;
+                        }
+                    `}
+        </Script>
+      </>
+    )}
+  </>
+);
+
+export default FacebookPixel;

package/src/helpers/info-grid.js

@@ -1,7 +1,7 @@
 /* eslint-disable array-callback-return */
 /* eslint-disable no-nested-ternary */
 import React from 'react';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { prettyTracker, translate } from 'gatsby-core-theme/src/helpers/getters';
 
 export function getObjectValue(obj, path) {
   if (!obj) return null;
@@ -42,9 +42,9 @@ export const getKeyValues = (relation, data, market) => {
   return obj;
 };
 
-export const generateLabel = (key, value, fnc, translations) => {
+export const generateLabel = (key, value, fnc, props) => {
   if (fnc) {
-    return fnc(value, translations);
+    return fnc(value, props);
   }
 
   if (typeof value === 'string') {
@@ -80,7 +80,8 @@ export const formatGameDate = (value) => {
     return acc.replace(/^/, current + prefix);
   }, '');
 };
-export const generateVolatility = (value, translations) => {
+export const generateVolatility = (value, props) => {
+  const translations = props?.translations || null;
   if (value === null) return translate(translations, 'low', 'Low');
   return value === 0
     ? translate(translations, 'low', 'Low')
@@ -89,8 +90,10 @@ export const generateVolatility = (value, translations) => {
     : translate(translations, 'high', 'High');
 };
 export const formatDate = (value) => value?.slice(0, 4);
-export const generateYesorNo = (value, translations) =>
-  value ? translate(translations, 'yes', 'Yes') : translate(translations, 'no', 'No');
+export const generateYesorNo = (value, props) => {
+  const translations = props?.translations || null;
+  return value ? translate(translations, 'yes', 'Yes') : translate(translations, 'no', 'No');
+};
 export const generateRtp = (value) => (value ? `${value}%` : null);
 export const latestItems = (items, translations, limit = null) => {
   if (items === null) return null;
@@ -114,7 +117,8 @@ export const generateLicenseAndSupportTypes = (value, translations, limit) => {
     return acc + prefix + current;
   }, '');
 };
-export const isLiveCasino = (value, translations) => {
+export const isLiveCasino = (value, props) => {
+  const translations = props?.translations || null;
   if (value === null) return translate(translations, 'no', 'No');
 
   return generateYesorNo(
@@ -129,13 +133,21 @@ export const getCurrencies = (value) => {
     ?.slice(0, 5)
     ?.map((elm) => elm?.iso_code);
 };
-export const generateLink = (value) => {
+export const generateLink = (value, props) => {
   if (value === null) return null;
-  return (
-    <a href={/\b[a-z0-9-_.]+@[a-z0-9-_.]+(\.[a-z0-9]+)+/i.test(value) ? `mailto:${value}` : value}>
-      {value}
-    </a>
-  );
+
+  const template = props?.template || null;
+  let link;
+  let text;
+
+  if (/\b[a-z0-9-_.]+@[a-z0-9-_.]+/i.test(value)) {
+    link = `mailto:${value}`;
+    text = value;
+  } else {
+    link = prettyTracker(value, 'main', false, template);
+    text = value.url;
+  }
+  return <a href={link}>{text}</a>;
 };
 export const getMaxWin = (value) => (value ? `${value}x innsatsen` : null);
 export const getMaxStake = (value) => (value ? `${value} kroner` : null);

package/src/helpers/info-grid.test.js

@@ -132,9 +132,9 @@ describe('Info Grid helper component', () => {
   });
   test('Generate link for email', () => {
     const email = () => <a href="mailto:hey@casumo.com">hey@casumo.com</a>;
-    const url = () => <a href="www.google.com">www.google.com</a>;
+    const url = () => <a href="/ice-casino">www.ice-casino.com</a>;
 
     expect(generateLink(data.relation.email)).toStrictEqual(email());
-    expect(generateLink(data.relation.url)).toStrictEqual(url());
+    expect(generateLink(data.relation, { template: 'operator_review' })).toStrictEqual(url());
   });
 });

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.23bfd16b.iframe.bundle.js"></script><script src="134.f050c17b.iframe.bundle.js"></script><script src="main.b202a57c.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.23bfd16b.iframe.bundle.js"></script><script src="134.f050c17b.iframe.bundle.js"></script><script src="main.0c3946da.iframe.bundle.js"></script></body></html>