gatsby-matrix-theme 37.0.11 → 37.0.13

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [37.0.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.12...v37.0.13) (2023-11-27)
+
+
+### Bug Fixes
+
+* cards ([3134b75](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3134b75ac746398d3c99a0e79bedb6ea4b92490f))
+
+## [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)
 
 

package/package.json

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

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/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({}),
   }),
 };
 

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

@@ -6,7 +6,7 @@
   flex-direction: column;
   border-radius: 1.2rem;
   box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.09);
-  background-color: var(--color-4);
+  background-color: #F4F4F4;
 
   @include min(tablet) {
     padding: 2.4rem;
@@ -15,12 +15,14 @@
 
   > form {
     position: relative;
-    gap: 1rem;
+    gap: 1.6rem;
+
     @include flex-direction(column);
     svg {
-      margin-left: 3.5rem;
-      height: 2.67rem;
-      width: 2.67rem;
+      margin-left: 1rem;
+      height: 2.4rem;
+      width: 2.4rem;
+      fill: #515156;
       vertical-align: text-bottom;
       cursor: pointer;
     }
@@ -34,7 +36,6 @@
     @include min(tablet) {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 1rem;
       column-gap: 4.8rem;
     }
 
@@ -63,7 +64,9 @@
   position: absolute;
   top: 0;
   left: 0;
+  font-size: 1.6rem;
   background: white;
+  border-radius: 1.6rem;
   padding: 2.4rem;
   overflow: scroll;
   svg {
@@ -108,24 +111,25 @@
 }
 
 .mainTitle {
-  margin-bottom: 1.4rem;
+  margin-bottom: 2.4rem;
   @include min(tablet) {
     margin-bottom: 3.2rem;
   }
 }
 
 .label {
-  line-height: 2.6rem;
+  line-height: 2.7rem;
   font-size: 1.6rem;
-  margin-bottom: 0.8rem;
+  margin-bottom: 0.65rem;
+  font-weight: 700;
 }
 
 .input,
 .select {
   padding: 14px;
   height: 4.8rem;
-  background: #f8f7f5;
-  border-radius: 4px;
+  background: #fff;
+  border-radius: 0.8rem;
   border: 0px;
   outline: 0px;
 }
@@ -150,24 +154,27 @@
 .resultContainer {
   position: relative;
   order: 11;
-  margin-top: 2.2rem;
+  margin: 1.6rem 0;
   width: 100%;
   @include flex-align(center, space-between);
-  padding: 1.6rem;
-  color: #090e13;
+  @include min(tablet){
+    padding: 2.4rem;
+  }
+  padding: 0.8rem;
+  padding-left: 1.6rem;
+  color: #1B1B1C;
   font-weight: 700;
-  font-size: 24px;
-  line-height: 34px;
-  flex-direction: column;
+  font-size: 1.8rem;
+  line-height: 2.6rem;
   gap: 1rem;
   grid-column: 1/3;
   gap: 1.6rem;
 
   &:before {
     content: '';
-    border-radius: 12px;
+    border-radius: 1.6rem;
     display: block;
-    background-color: var(--primary-color);
+    background-color: #fff;
     opacity: 0.6;
     position: absolute;
     top: 0;
@@ -182,11 +189,14 @@
 
   > span:last-child {
     flex-basis: 50%;
-    background: #ffffff;
-    border-radius: 8px;
+    background: #F4F4F4;
+    border-radius: 1.6rem;
     font-weight: 700;
-    font-size: 22px;
-    line-height: 38px;
+    font-size: 1.8rem;
+    line-height: 2.6rem;
+    @include min(tablet){
+      padding: 1.6rem;
+    }
     padding: 0.8rem;
     @include flex-align(center, center);
   }
@@ -195,77 +205,3 @@
     gap: 0;
   }
 }
-
-.reccommendedCasinos {
-  > h3 {
-    margin-top: 2.4rem;
-    margin-bottom: 1.6rem;
-
-    @include min(tablet) {
-      margin-top: 3.2rem;
-    }
-  }
-
-  > div {
-    margin-bottom: 0.8rem;
-    background: #f1efec;
-    border-radius: 1.6rem;
-    @include flex-align(center, space-between);
-    padding: 0.8rem;
-    gap: 1rem;
-    @include min(tablet) {
-      padding: 1.6rem;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    a:first-child {
-      height: 6.4rem;
-      width: 6.4rem;
-      flex-grow: 1;
-      @include min(tablet) {
-        flex-grow: inherit;
-      }
-    }
-
-    img {
-      border-radius: 0.8rem;
-      height: 100%;
-    }
-
-    a:last-child {
-      padding: 0.8rem 1.3rem;
-      @include min(tablet) {
-        padding: 0.9rem 3rem;
-      }
-    }
-
-    > div {
-      flex-grow: inherit;
-      @include flex-align(flex-start, center);
-      @include flex-direction(column);
-      flex-basis: 39%;
-      @include min(tablet) {
-        flex-basis: auto;
-        flex-grow: 1;
-        @include flex-align(center, flex-start);
-        @include flex-direction(row);
-      }
-
-      > span {
-        font-weight: 700;
-        color: #090e13;
-        font-size: 14px;
-        line-height: 22px;
-
-        @include min(tablet) {
-          @include flex-direction(row);
-          font-size: 20px;
-          line-height: 30px;
-        }
-      }
-    }
-  }
-}

package/src/components/organisms/cards/index.js

@@ -1,16 +1,28 @@
 import React from 'react';
-import GridLayout from './template-one';
-import SrcollLayout from './template-two';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component';
 import ModuleIntroduction from './module-introduction';
 
 export default function index(props) {
   const { module, page } = props;
   const Component = () => {
     switch (module?.style) {
-      case 'template_two':
+      case 'stack_table' && module.cards_page_type === 'operator': {
+        const OperatorsTable = loadable(() => import('../../atoms/cards/operators-table'));
+        return <OperatorsTable module={module} page={page} />;
+      }
+      case 'comparison_table' && module.cards_page_type === 'operator': {
+        const ComparisonTable = loadable(() => import('../../atoms/cards/comparison-table'));
+        return <ComparisonTable module={module} page={page} />;
+      }
+      case 'template_two': {
+        const SrcollLayout = loadable(() => import('./template-two'));
         return <SrcollLayout module={module} page={page} />;
-      default:
+      }
+      default: {
+        const GridLayout = loadable(() => import('./template-one'));
         return <GridLayout module={module} page={page} />;
+      }
     }
   };