gatsby-matrix-theme 37.0.10 → 37.0.12

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [37.0.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.11...v37.0.12) (2023-11-27)
+
+
+### Bug Fixes
+
+* module pageContext ([09b3fad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/09b3fadf5d3d3593c992df0206d40d9ba3d1912a))
+* updated Wagering Calculator + Added Recommended Operators as seperate component ([d50b457](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d50b457c5ce1b1b2f37edb86dec37888e8256921))
+
+
+* Merge branch 'tm-3828-wagering-calculator' into 'master' ([2cb7907](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2cb7907e2ed3a4410e24749ee88d9f5c3a6eaa3c))
+
+## [37.0.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.10...v37.0.11) (2023-11-24)
+
+
+### Code Refactoring
+
+* remove unnecessary line breaks ([10f58f5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/10f58f5bcbb10825de11bf04752b527fd93b6b5b))
+
+
+* Merge branch 'tm-3778-footer' into 'master' ([4c23a14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4c23a14344f90343729ee309f57a920b3864781e))
+
+
+### Tests
+
+* fix testing ([3df51bc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3df51bce4a4b1d510df4bb45da714699d109d658))
+
 ## [37.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.9...v37.0.10) (2023-11-23)
 
 

package/package.json

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

package/src/components/atoms/footer/license/index.js

@@ -49,7 +49,7 @@ const FooterLicense = ({
       {template !== 'templateOne' && gamblingText && (
         <div
           className={styles?.gamblingText || ''}
-          dangerouslySetInnerHTML={{ __html: gamblingText?.replace(/\. /g, '.<br />') }}
+          dangerouslySetInnerHTML={{ __html: gamblingText }}
         />
       )}
     </div>

package/src/components/atoms/recommended-operators/index.js

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { prettyTracker, getExtraField } from 'gatsby-core-theme/src/helpers/getters';
+
+import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-four';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
+import OperatorDetails from '../../molecules/operator-details';
+import Coupon from '../coupon';
+import styles from './recommended-operators.module.scss';
+
+const RecommendedOperators = ({
+  showCouponCode = false,
+  showRating = false,
+  title = 'Recommended Casinos:',
+  buttonType = 'primary',
+  operators,
+}) => (
+  <div className={styles.reccommendedCasinos}>
+    <h3>{title}</h3>
+    {operators.slice(0, 3).map((operator) => {
+      const prettyLink = prettyTracker(operator, 'main', false);
+      const couponCode = getExtraField(operator.extra_fields, 'coupon_code');
+
+      return (
+        <div>
+          <a
+            href={prettyLink}
+            aria-label={operator.name}
+            target="_blank"
+            rel="nofollow noreferrer sponsored"
+          >
+            <OperatorDetails
+              showRating={showRating}
+              item={operator}
+              showAuthor={false}
+              showReviewLink={false}
+              costumeStyle={styles.operatorDetails}
+            />
+          </a>
+          <div className={styles.operatorBonus}>
+            <Bonus item={operator} tracker="main" />
+          </div>
+          {showCouponCode && <Coupon code={couponCode} />}
+          <OperatorCta operator={operator} tracker="main" buttonType={buttonType} />
+        </div>
+      );
+    })}
+  </div>
+);
+
+export default RecommendedOperators;
+
+RecommendedOperators.propTypes = {
+  showCouponCode: PropTypes.bool,
+  showRating: PropTypes.bool,
+  title: PropTypes.string,
+  buttonType: PropTypes.string,
+  operators: PropTypes.arrayOf([
+    PropTypes.shape({
+      name: PropTypes.string,
+    }),
+  ]),
+};

package/src/components/atoms/recommended-operators/recommended-operators.module.scss

@@ -0,0 +1,156 @@
+.reccommendedCasinos {
+    background-color: #fff;
+    padding: 0.8rem;
+    border-radius: 1.6rem;
+    margin-top: 1.6rem;
+
+    @include min(tablet){
+        padding: 1.6rem;
+    }
+
+    > h3 {
+      margin-top: 0;
+      margin-bottom: 0.8rem;
+      font-size: 1.8rem;
+      font-weight: 700;
+  
+      @include min(tablet) {
+        font-size: 2rem;
+      }
+    }
+  
+    > div {
+      margin-bottom: 0.8rem;
+      background: #f4f4f4;
+      display: grid;
+      align-items: center;
+      grid-template-columns: 4rem 1fr;
+      row-gap: 0.8rem;
+      @include min(mobile){
+        grid-template-columns: 1fr 2fr 1fr 1fr;
+      }
+      @include min(tablet){
+        grid-template-columns: 2fr 3fr 1fr 1fr;
+      }
+      border-radius: 1.6rem;
+      color: #fff;
+      padding: 0.8rem;
+      column-gap: 0.8rem;
+      @include min(tablet) {
+        row-gap: 1.6rem;
+        padding: 1.2rem;
+      }
+  
+      &:last-child {
+        margin-bottom: 0;
+      }
+  
+      a:first-child{
+        .Logo.cta{
+            height: 4rem;
+            width: 4rem;
+            @include min(tablet) {
+            height: 6.4rem;
+            width: auto;
+            }
+        }
+      }
+
+  
+      a:nth-child(2) {
+        width: unset;
+        > span{
+          color: #fff !important;
+          text-decoration: none !important;
+          @include min(tablet) {
+            &:last-child{
+              color: #CED0DD !important;
+            }
+          }
+        }
+      }
+  
+      img {
+        border-radius: 0.8rem;
+        height: 100%;
+      }
+      a:last-child {
+        padding: 0.8rem 1.6rem;
+        font-size: 1.4rem;
+        font-weight: 700;
+        grid-column: 1/3;
+        @include min(mobile){
+            grid-column: auto;
+        }
+        @include min(tablet) {
+            padding: 0.9rem 3rem;
+            width: unset;
+        }
+    }     
+  
+      > div {
+        &.operatorBonus{
+            flex-grow: inherit;
+            @include flex-align(flex-start, center);
+            @include flex-direction(column);
+            @include min(tablet) {
+              flex-basis: auto;
+              flex-grow: 1;
+              @include flex-align(center, flex-start);
+              background-color: #fff;
+              
+              min-height: 6.4rem;
+              align-items: center;
+              justify-content: center;
+              border-radius: 0.8rem;
+            }
+    
+            > span {
+              font-weight: 700;
+              color: #515156;
+              font-size: 1.2rem;
+              line-height: 1.8rem;
+      
+              @include min(tablet) {
+                @include flex-direction(row);
+                font-size: 1.4rem;
+                line-height: 2.2rem;
+              }
+            }
+        }
+        &:not(.operatorBonus){
+            width: 100%;
+            button {width: 100%;}
+            grid-column: 1/3;
+            @include min(mobile){
+                grid-column: auto;
+            }
+        }
+      }
+    }
+}
+
+.operatorDetails {
+    div{
+        display: none;
+        @include min(tablet){
+            display: inline-flex;
+            margin: auto 0;
+            a{font-size: 1.4rem; padding: 0 !important;}
+        }
+    }
+    > a {
+        width: 4rem;
+        height: 4rem;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+        @include min(tablet){
+            width: 6.4rem;
+            height: 6.4rem;
+        }
+    }
+}
+
+  

package/src/components/molecules/footer/variants/template-one/index.js

@@ -68,9 +68,7 @@ const TemplateOne = ({
             <div
               className={styles?.copyrightDisclaimer || ''}
               // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: copyrightDisclaimer.replace(/\. /g, '.<br />'),
-              }}
+              dangerouslySetInnerHTML={{ __html: copyrightDisclaimer }}
             />
           )}
           {showCopyright && <p className={styles?.copyrightText || ''}>{copyrightText()}</p>}

package/src/components/molecules/footer/variants/template-one/template-one.test.js

@@ -197,9 +197,7 @@ describe('Show template one', () => {
     await waitFor(() => {
       expect(container.querySelectorAll('.copyrightDisclaimer')).toBeTruthy();
 
-      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(
-        copyrightDisclaimer.replace(/\. /g, '.<br>')
-      );
+      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(copyrightDisclaimer);
     });
   });
   test('show copyright', async () => {

package/src/components/molecules/footer/variants/template-three/index.js

@@ -73,9 +73,7 @@ const TemplateThree = ({
             <div
               className={styles?.copyrightDisclaimer || ''}
               // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: copyrightDisclaimer.replace(/\. /g, '.<br />'),
-              }}
+              dangerouslySetInnerHTML={{ __html: copyrightDisclaimer }}
             />
           )}
           {showCopyright && <p className={styles.copyrightText}>{copyrightText()}</p>}

package/src/components/molecules/footer/variants/template-three/template-three.test.js

@@ -197,9 +197,7 @@ describe('Show template one', () => {
     await waitFor(() => {
       expect(container.querySelectorAll('.copyrightDisclaimer')).toBeTruthy();
 
-      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(
-        copyrightDisclaimer.replace(/\. /g, '.<br>')
-      );
+      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(copyrightDisclaimer);
     });
   });
   test('show copyright', async () => {

package/src/components/molecules/footer/variants/template-two/index.js

@@ -70,9 +70,7 @@ const TemplateTwo = ({
             <div
               className={styles?.copyrightDisclaimer || ''}
               // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: copyrightDisclaimer.replace(/\. /g, '.<br />'),
-              }}
+              dangerouslySetInnerHTML={{ __html: copyrightDisclaimer }}
             />
           )}
           {showCopyright && <p className={styles?.copyrightText || ''}>{copyrightText()}</p>}

package/src/components/molecules/footer/variants/template-two/template-two.test.js

@@ -196,9 +196,7 @@ describe('Show template one', () => {
     await waitFor(() => {
       expect(container.querySelectorAll('.copyrightDisclaimer')).toBeTruthy();
 
-      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(
-        copyrightDisclaimer.replace(/\. /g, '.<br>')
-      );
+      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(copyrightDisclaimer);
     });
   });
   test('show copyright', async () => {

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

@@ -120,30 +120,32 @@ const OperatorDetails = ({
 
         <Tag classStyle={`${styles.operatorName} name-cta `}>{itemName}</Tag>
 
-        <div
-          className={`${styles.ratingAuthor}
-          ${!useOneStarRating && styles.starRatings}
-          ${showRatingLabel && useOneStarRating && styles.ratinglabel}`}
-        >
-          {showRating && (
-            <StarRating
-              numOfStars={5}
-              rating={rating}
-              showLabel={showRatingLabel}
-              showDecimal={showRatingDecimal}
-            />
-          )}
-          {showAuthor && (
-            <Author
-              label={translate(translations, 'byAuthor', 'By')}
-              authorTemplateTwo={authorTemplateTwo}
-              authorName={item?.authorName || item?.author?.name}
-              authorPath={item?.authorPath || item?.author?.profile_page_path}
-              authorImage={item?.authorImage || item?.author?.image}
-              verify={icon}
-            />
-          )}
-        </div>
+        {showAuthor && showRating && (
+          <div
+            className={`${styles.ratingAuthor}
+          ${(!useOneStarRating && styles.starRatings) || ''}
+          ${(showRatingLabel && useOneStarRating && styles.ratinglabel) || ''}`}
+          >
+            {showRating && (
+              <StarRating
+                numOfStars={5}
+                rating={rating}
+                showLabel={showRatingLabel}
+                showDecimal={showRatingDecimal}
+              />
+            )}
+            {showAuthor && (
+              <Author
+                label={translate(translations, 'byAuthor', 'By')}
+                authorTemplateTwo={authorTemplateTwo}
+                authorName={item?.authorName || item?.author?.name}
+                authorPath={item?.authorPath || item?.author?.profile_page_path}
+                authorImage={item?.authorImage || item?.author?.image}
+                verify={icon}
+              />
+            )}
+          </div>
+        )}
         {reviewPath && showReviewLink && (
           <ReviewLink
             className={`${styles?.reviewLink || ''} toplist-variant-one-gtm`}

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

@@ -3,19 +3,15 @@ import React, { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { MdClose } from '@react-icons/all-files/md/MdClose';
 import { AiOutlineQuestionCircle } from '@react-icons/all-files/ai/AiOutlineQuestionCircle';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
-import {
-  translate,
-  prettyTracker,
-  getAltText,
-  imagePrettyUrl,
-} from 'gatsby-core-theme/src/helpers/getters';
-import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
-import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
+
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import { getRecommendedToplist } from '../../../helpers/common';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component';
+
 import styles from './wagering-calculator.module.scss';
+import { getRecommendedToplist } from '../../../helpers/common';
 
 const WageringCalculator = ({
   mainTitle = 'Wagering Requirement Calculator',
@@ -32,7 +28,7 @@ const WageringCalculator = ({
   const wgcWagering = useRef(null);
 
   const [isInfoOpen, setIsInfoOpen] = useState(false);
-  const [isRecommendedOperators, setIsRecommendedOperators] = useState(false);
+  const [showRecommendedOperators, setShowRecommendedOperators] = useState(false);
   const [result, setResult] = useState(null);
   const { translations } = useContext(Context);
   const InfoIcon = infoIcon || AiOutlineQuestionCircle;
@@ -40,6 +36,9 @@ const WageringCalculator = ({
     ? getRecommendedToplist(pageContext.marketSections)
     : [];
 
+  const ReccommendedCasinos =
+    operators.length > 0 && loadable(() => import('../../atoms/recommended-operators'));
+
   const Calculate = () => {
     // eslint-disable-next-line
     wgcContribution.current.value && (wgcContribution.current.value = 100);
@@ -52,7 +51,7 @@ const WageringCalculator = ({
           (100 / Number(wgcContribution.current.value))
       )
     );
-    setIsRecommendedOperators(true);
+    setShowRecommendedOperators(true);
   };
 
   return (
@@ -145,7 +144,7 @@ const WageringCalculator = ({
             onClick={Calculate}
             btnText={translate(translations, 'wagecalc_calculate', 'Calculate')}
             isInternalLink={false}
-            buttonType="primary"
+            buttonType={buttonType}
             buttonSize="m"
           />
 
@@ -175,42 +174,17 @@ const WageringCalculator = ({
             </p>
           </div>
         )}
-        {operators && operators.length > 0 && isRecommendedOperators && (
-          <div className={styles.reccommendedCasinos}>
-            <h3>
-              {translate(translations, 'wagecalc_recommended_casinos', 'Recommended Casinos')}
-            </h3>
-            {operators.slice(0, 3).map((operator) => {
-              const prettyLink = prettyTracker(operator, 'main', false);
-              const imageObject =
-                operator?.standardised_logo_url_object || operator?.logo_url_object;
-
-              return (
-                <div>
-                  <a
-                    href={prettyLink}
-                    aria-label={operator.name}
-                    target="_blank"
-                    rel="nofollow noreferrer sponsored"
-                  >
-                    <LazyImage
-                      alt={getAltText(imageObject, operator.name)}
-                      src={imagePrettyUrl(imageObject?.filename || operator?.logo_url, 64, 64)}
-                      width={64}
-                      height={64}
-                    />
-                  </a>
-                  <Bonus item={operator} tracker="main" />
-                  <OperatorCta
-                    module="wagering_calculator"
-                    operator={operator}
-                    tracker="main"
-                    buttonType={buttonType}
-                  />
-                </div>
-              );
-            })}
-          </div>
+        {ReccommendedCasinos && showRecommendedOperators && (
+          <ReccommendedCasinos
+            showCouponCode
+            showRating
+            title={translate(
+              translations,
+              'wagecalc_recommended_casinos',
+              'Recommeded Casinos for you: '
+            )}
+            operators={operators}
+          />
         )}
       </div>
     </div>
@@ -224,10 +198,7 @@ WageringCalculator.propTypes = {
   infoIcon: PropTypes.element,
   buttonType: PropTypes.string,
   pageContext: PropTypes.shape({
-    marketSections: PropTypes.shape({
-      // eslint-disable-next-line react/forbid-prop-types
-      recommended_casinos: PropTypes.array,
-    }),
+    marketSections: PropTypes.shape({}),
   }),
 };