gatsby-matrix-theme 24.0.0 → 25.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [25.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v24.0.0...v25.0.0) (2023-05-31)
+
+
+### Bug Fixes
+
+* facebook pixel ([c848df5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c848df59089148e7b97b1547f4bfa3701cd87a37))
+* updated to latest core theme ([f6cbe07](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f6cbe0791ecd731fe39e4721688b1c71b0115294))
+
+
+### Code Refactoring
+
+* add template ([6e96666](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6e966667d43e2227fc9b87cfa749672207f6b4f3))
+* update wagering calculator ids for duplicates ([96da95b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/96da95b1831f0adb397b3dbbbdffe1594edc345b))
+* update wagering calculator with validation ([f9a6e96](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9a6e963ce96ff5242f46e0ef5de9ff71368e8c8))
+
+
+* Merge branch 'info-grid-email' into 'master' ([aa3eaf1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa3eaf1bd8a1840d79483a76b1185c4bb37bb32e))
+* Merge branch 'master' into info-grid-email ([2e77c2d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2e77c2dd021b1eab9aa68e0766f4dccdb5eb8cfa))
+* Merge branch 'tm-3094-wagering-calculator' into 'master' ([bb29679](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bb296797345978809f3abfa35ba8e6948faa1447))
+
+
+### Tests
+
+* fix for test ([ce54610](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ce546102087f7d4f5f067a1abad85235d9976934))
+
 # [24.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v23.0.5...v24.0.0) (2023-05-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "24.0.0",
+  "version": "25.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "22.0.5",
+    "gatsby-core-theme": "22.0.6",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -20,16 +20,16 @@ const WageringCalculator = ({
   const InfoIcon = infoIcon || AiOutlineQuestionCircle;
 
   const Calculate = ({ target: { elements } }) => {
+    // eslint-disable-next-line
+    !elements.wgc_contribution.value && (elements.wgc_contribution.value = 100);
     setResult(
       Math.round(
-        (Number(elements.bonus.value) +
-          (elements.calc_select.value !== 'bonus' ? Number(elements.deposit.value) : 0)) *
-          Number(elements.wagering.value) *
-          (100 / Number(elements.contribution.value))
+        (Number(elements.wgc_bonus.value) +
+          (elements.wgc_calc_select.value !== 'bonus' ? Number(elements.wgc_deposit.value) : 0)) *
+          Number(elements.wgc_wagering.value) *
+          (100 / Number(elements.wgc_contribution.value))
       )
     );
-    // eslint-disable-next-line
-    !elements.contribution.value && (elements.contribution.value = 100);
   };
 
   return (
@@ -47,16 +47,24 @@ const WageringCalculator = ({
       <label className={styles.label} htmlFor="deposit">
         {translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}
       </label>
-      <input className={styles.input} id="deposit" type="number" />
+      <input className={styles.input} id="wgc_deposit" type="number" min={0} />
       <label className={styles.label} htmlFor="bonus">
         {translate(translations, 'wagecalc_bonus_amount', 'Bonus amount')}
       </label>
-      <input className={styles.input} id="bonus" type="number" />
+      <input className={styles.input} id="wgc_bonus" type="number" min={0} required />
       <label className={styles.label} htmlFor="wagering">
         {translate(translations, 'wagecalc_wagering', 'Wagering')}
       </label>
-      <input className={styles.input} id="wagering" type="number" />
-      <select className={styles.select} id="calc_select">
+      <input className={styles.input} id="wgc_wagering" type="number" min={0} required />
+      <select
+        className={styles.select}
+        id="wgc_calc_select"
+        onChange={({ target }) => {
+          const deposit = document.getElementById('wgc_deposit');
+          deposit.required = target.value !== 'bonus';
+          deposit.checkValidity();
+        }}
+      >
         <option value="bonus">{translate(translations, 'wagecalc_bonus', 'Bonus')}</option>
         <option value="bonus_deposit">
           {translate(translations, 'wagecalc_deposit_bonus', 'Deposit + Bonus')}
@@ -65,7 +73,7 @@ const WageringCalculator = ({
       <label className={styles.label} htmlFor="contribution">
         {translate(translations, 'wagecalc_contribution', 'Contribution %')}
       </label>
-      <input className={styles.input} id="contribution" type="number" max="100" />
+      <input className={styles.input} id="wgc_contribution" type="number" min={0} max={100} />
       <Button
         isButton
         primaryColor

package/src/components/molecules/wagering-calculator/wagering-calculator.module.scss

@@ -96,6 +96,10 @@ div.container {
   margin: 0.8rem 0;
 }
 
+.input:invalid:required {
+  border-bottom: 0.4rem solid var(--color-11);
+}
+
 .select {
   margin-top: 3.4rem;
   margin-bottom: 2.4rem;

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

@@ -51,7 +51,10 @@ 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,
+          template,
+        });
         return gridItem(labelTitle, value);
       })}
     </div>

package/src/gatsby-core-theme/components/molecules/header/index.js

@@ -200,7 +200,7 @@ export default function Header({ section, numOfStarsRating = 5 }) {
         } 
         ${bannerIsActive && styles.bannerIsActive ? styles.bannerIsActive : ''}`}
     >
-      {section.page.path && <Breadcrumbs page={section.page} />}
+      {section.page.path && <Breadcrumbs markets={section.allMarkets} page={section.page} />}
       {relationContent(section, numOfStarsRating)}
     </header>
   );
@@ -208,6 +208,7 @@ export default function Header({ section, numOfStarsRating = 5 }) {
 
 Header.propTypes = {
   section: PropTypes.shape({
+    allMarkets: PropTypes.shape([PropTypes.shape({})]),
     page: PropTypes.shape({
       relation_type: PropTypes.string,
       template: PropTypes.string,

package/src/gatsby-core-theme/components/molecules/main/index.js

@@ -105,6 +105,40 @@ const Main = ({ section = {}, pageContext = {}, showAuthor = true, exclOperator
       )}
       {Newsletter && <Newsletter page={page} />}
       {NewsletterSuccess && <NewsletterSuccess />}
+
+      {process.env.ENABLE_PIXEL && (
+        <>
+          <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>
+        </>
+      )}
+
       {process.env.ENABLE_OPTINMONSTR === 'true' && (
         <Script
           id="optin-monstr"

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

@@ -3,7 +3,6 @@
 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,7 +67,9 @@ const HeadData = ({ page = {}, siteInfo }) => {
       <title>{metaTitle}</title>
       <html lang={getLanguage(isIL || page.language)} />
       <meta name="description" content={parsedMetaDescr} />
-      <FacebookPixel />
+      {process.env.ENABLE_PIXEL && (
+        <meta name="facebook-domain-verification" content={process.env.FBVERIFACTION} />
+      )}
       {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
         <meta name="robots" content={page.meta_robots.join()} />
       )}