gatsby-matrix-theme 51.0.10 → 52.0.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [52.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v51.0.10...v52.0.0) (2024-09-11)
+
+
+### Bug Fixes
+
+* new tracking params ([3cff282](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3cff28271a23673d73f4cafa4bacf19c24141e04))
+* operator welcome  bonus ([ceb0435](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ceb04358b1de51131be3ed00de06a2adf99ab89b))
+* remove console and small fix ([1eee1cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1eee1cd2d8bda53eadcc45675133c43898a5e61a))
+* remove lazy for not found page ([549bb98](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/549bb987f298b0599015712d4792e702fab1e620))
+* small atrributes add ([1298077](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1298077ba619140ed50c205db799bcf1c4a83fd7))
+
+
+### Code Refactoring
+
+* changes to coupon ([33b4f98](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/33b4f989a1e160b9aaf6c8a1a4a6d3fa14404b77))
+* coupon ([53d615e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/53d615e0273b3ea23839cdd1e3dfc5289298b2f2))
+* remove console.log ([1ca0796](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ca0796d7232f1fdaccfade510d19d5b8f21f368))
+
+
+* Merge branch 'tm-4739-coupon-code' into 'master' ([3750ca5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3750ca52ac3d8a26343cd92528bc71f2a20e9fcb))
+* Merge branch 'master' into tm-4739-coupon-code ([741b685](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/741b68564fcdc5d3a28ebf111f506eec5fc1906e))
+* Merge branch 'tm-4730-new-tracking-api' into 'master' ([5e31bbc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5e31bbc9846139be62151f2bd4463c486a7d2cc8))
+* Merge branch 'tm-4738-update-404' into 'master' ([f890c9a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f890c9afcb0da07f0e841abaedcc52a874f8d7e6))
+
 ## [51.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v51.0.9...v51.0.10) (2024-09-10)
 
 

package/package.json

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

package/src/components/atoms/cards/comparison-table/index.js

@@ -6,14 +6,14 @@ import ScrollX from 'gatsby-core-theme/src/hooks/scroll-x';
 import styles from './comparison-table.module.scss';
 import Table from './table';
 
-export default function ComparisonTable({ module, page }) {
+export default function ComparisonTable({ module, page, modulePosition }) {
   const ele = useRef('');
 
   return (
     <div className={styles?.comparisonTable || ''}>
       <ScrollX refTag={ele} scroll>
         <div ref={ele} className={styles?.contentTable || ''}>
-          <Table type={page?.relation_type} items={module?.items} tempate={page?.template} />
+          <Table type={page?.relation_type} items={module?.items} tempate={page?.template} modulePosition={modulePosition} />
         </div>
       </ScrollX>
     </div>
@@ -29,4 +29,5 @@ ComparisonTable.propTypes = {
     type: PropTypes.string,
     template: PropTypes.string,
   }),
+  modulePosition: PropTypes.number,
 };

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -73,6 +73,7 @@ export default function ComparisonTable({
   licenseWidth = '72',
   licenseHeight = '32',
   showRoundedRating = false,
+  modulePosition,
 }) {
   const cell = (heading, item, key, index) => {
     const rowData = tabelInfo.find((m) => m.key === heading);
@@ -125,6 +126,8 @@ export default function ComparisonTable({
                   // new key
                   gtmClass="comparison-table-gtm btn-cta"
                   pageTemplate={tempate}
+                  modulePosition={modulePosition}
+                  itemPosition={index + 1}
                 />
               )}
             </div>
@@ -154,7 +157,13 @@ export default function ComparisonTable({
         return (
           // eslint-disable-next-line jsx-a11y/control-has-associated-label
           <td key={key} className={styles.bonus}>
-            <Bonus module="comparison_table" tracker="main" item={item?.relation} />
+            <Bonus
+              module="comparison_table"
+              tracker="main"
+              item={item?.relation}
+              itemPosition={index + 1}
+              modulePosition={modulePosition}
+            />
           </td>
         );
       case 'top_features':

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -28,6 +28,8 @@ const TemplateFive = ({
   storybookImage,
   storybookLogo,
   showRoundedRating = false,
+  modulePosition,
+  itemPosition,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -124,6 +126,8 @@ const TemplateFive = ({
                   }}
                   gtmClass="operator-card-gtm btn-cta"
                   pageTemplate={page?.template}
+                  modulePosition={modulePosition}
+                  itemPosition={itemPosition}
                 />
               ) : null}
             </>
@@ -184,6 +188,8 @@ TemplateFive.propTypes = {
   storybookImage: PropTypes.string,
   storybookLogo: PropTypes.string,
   showRoundedRating: PropTypes.bool,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateFive;

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -27,6 +27,8 @@ const TemplateFour = ({
   useThumbnail = true,
   storybookImage,
   showRoundedRating = false,
+  modulePosition,
+  itemPosition
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -109,6 +111,8 @@ const TemplateFour = ({
                   }}
                   gtmClass="operator-card-gtm btn-cta"
                   pageTemplate={page?.template}
+                  modulePosition={modulePosition}
+                  itemPosition={itemPosition}
                 />
               ) : null}
             </>
@@ -163,6 +167,8 @@ TemplateFour.propTypes = {
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
   showRoundedRating: PropTypes.bool,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateFour;

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -25,6 +25,8 @@ const TemplateOne = ({
   useThumbnail = true,
   storybookImage,
   showRoundedRating = false,
+  modulePosition,
+  itemPosition
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -109,6 +111,8 @@ const TemplateOne = ({
                 }}
                 gtmClass="operator-card-gtm btn-cta"
                 pageTemplate={page?.template}
+                modulePosition={modulePosition}
+                itemPosition={itemPosition}
               />
             ) : null}
           </>
@@ -165,6 +169,8 @@ TemplateOne.propTypes = {
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
   showRoundedRating: PropTypes.bool,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateOne;

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -27,6 +27,8 @@ const TemplateThree = ({
   useThumbnail = true,
   storybookImage,
   showRoundedRating = false,
+  modulePosition,
+  itemPosition
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -111,6 +113,8 @@ const TemplateThree = ({
                   }}
                   gtmClass="operator-card-gtm btn-cta"
                   pageTemplate={page?.template}
+                  modulePosition={modulePosition}
+                  itemPosition={itemPosition}
                 />
               ) : null}
             </>
@@ -169,6 +173,8 @@ TemplateThree.propTypes = {
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
   showRoundedRating: PropTypes.bool,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateThree;

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -27,6 +27,8 @@ const TemplateTwo = ({
   useThumbnail = true,
   storybookImage,
   showRoundedRating = false,
+  modulePosition,
+  itemPosition
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -113,6 +115,8 @@ const TemplateTwo = ({
                   }}
                   gtmClass="operator-card-gtm btn-cta"
                   pageTemplate={page?.template}
+                  modulePosition={modulePosition}
+                  itemPosition={itemPosition}
                 />
               ) : null}
             </>
@@ -171,6 +175,8 @@ TemplateTwo.propTypes = {
   affilateLink: PropTypes.bool,
   storybookImage: PropTypes.string,
   showRoundedRating: PropTypes.bool,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateTwo;

package/src/components/atoms/cards/operator-card/template-four/index.js

@@ -24,6 +24,8 @@ const TemplateFour = ({
   width = '88',
   height = '88',
   BonusTemplate = BonusTemplateDefault,
+  modulePosition,
+  itemPosition,
 }) => {
   const { ribbons } = item?.relation;
   const { relation, path } = item;
@@ -53,6 +55,8 @@ const TemplateFour = ({
         showRatingLabel={showRatingLabel}
         showRatingDecimal={showRatingDecimal}
         module="cards"
+        modulePosition={modulePosition}
+        itemPosition={itemPosition}
       />
       <div className={styles?.cardContent || ''}>
         <Rating item={relation} type="operatorCards" />
@@ -63,10 +67,19 @@ const TemplateFour = ({
             item={relation}
             ctaBtn
             tracker="main"
+            modulePosition={modulePosition}
+            itemPosition={itemPosition}
           />
         ) : (
           !isInactive && (
-            <BonusTemplate welcomeBonus={false} item={relation} ctaBtn tracker="main" />
+            <BonusTemplate
+              welcomeBonus={false}
+              item={relation}
+              ctaBtn
+              tracker="main"
+              modulePosition={modulePosition}
+              itemPosition={itemPosition}
+            />
           )
         )}
         <div className={styles?.feedback || ''}>
@@ -130,6 +143,8 @@ TemplateFour.propTypes = {
   BonusTemplate: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateFour;

package/src/components/atoms/cards/operator-card/template-one/index.js

@@ -37,6 +37,8 @@ const TemplateOne = ({
   paymentLogoWidth = '54',
   paymentLogoHeight = '36',
   BonusTemplate = Bonus,
+  modulePosition,
+  itemPosition,
 }) => {
   const ribbons = item?.relation?.ribbons || [];
   const { relation, path } = item;
@@ -67,6 +69,8 @@ const TemplateOne = ({
         showRatingLabel={showRatingLabel}
         showRatingDecimal={showRatingDecimal}
         module="cards"
+        modulePosition={modulePosition}
+        itemPosition={itemPosition}
       />
 
       <div className={styles?.cardContent || ''}>
@@ -81,13 +85,35 @@ const TemplateOne = ({
             <SellingPoints sellingPoints={sellingPoints} limit={3} icon={sellingPointsIcon} />
           )}
           {showBonusForAll ? (
-            <BonusTemplate module="cards" item={relation} tracker="main" />
+            <BonusTemplate
+              module="cards"
+              item={relation}
+              tracker="main"
+              modulePosition={modulePosition}
+              itemPosition={itemPosition}
+            />
           ) : (
-            !isInactive && <BonusTemplate item={relation} tracker="main" />
+            !isInactive && (
+              <BonusTemplate
+                module="cards"
+                item={relation}
+                tracker="main"
+                modulePosition={modulePosition}
+                itemPosition={itemPosition}
+              />
+            )
           )}
         </div>
         <div className={styles?.cardFooter || ''}>
-          {hasVariableComponent && <VariableComponent item={item} page={page} featured={false} />}
+          {hasVariableComponent && (
+            <VariableComponent
+              item={item}
+              page={page}
+              featured={false}
+              modulePosition={modulePosition}
+              itemPosition={itemPosition}
+            />
+          )}
           {relation?.status !== 'not_recommended' && showOperatorCta && (
             <OperatorCta
               tracker="main"
@@ -110,6 +136,8 @@ const TemplateOne = ({
               gtmClass="operator-card-gtm btn-cta"
               pageTemplate={page?.template}
               icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
+              modulePosition={modulePosition}
+              itemPosition={itemPosition}
             />
           )}
           {showPaymentMethods && !!paymentMethods?.length && (
@@ -198,6 +226,8 @@ TemplateOne.propTypes = {
   operatorLogoHeight: PropTypes.string,
   paymentLogoWidth: PropTypes.string,
   paymentLogoHeight: PropTypes.string,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateOne;

package/src/components/atoms/cards/operator-card/template-three/index.js

@@ -28,6 +28,8 @@ const TemplateThree = ({
   operatorLogoWidth = '88',
   operatorLogoHeight = '88',
   BonusTemplate = BonusTemplateDefault,
+  modulePosition,
+  itemPosition,
 }) => {
   const { ribbons } = item?.relation;
   const { relation, path } = item;
@@ -57,13 +59,29 @@ const TemplateThree = ({
         showRatingLabel={showRatingLabel}
         showRatingDecimal={showRatingDecimal}
         module="cards"
+        modulePosition={modulePosition}
+        itemPosition={itemPosition}
       />
       <div className={styles?.cardContent || ''}>
         <div className={styles?.cardContentContainer || ''}>
           {showBonusForAll ? (
-            <BonusTemplate module="cards" item={relation} tracker="main" />
+            <BonusTemplate
+              module="cards"
+              item={relation}
+              tracker="main"
+              modulePosition={modulePosition}
+              itemPosition={itemPosition}
+            />
           ) : (
-            !isInactive && <BonusTemplate module="cards" item={relation} tracker="main" />
+            !isInactive && (
+              <BonusTemplate
+                module="cards"
+                item={relation}
+                tracker="main"
+                modulePosition={modulePosition}
+                itemPosition={itemPosition}
+              />
+            )
           )}
           <div className={styles?.cardFooter || ''}>
             {relation?.status !== 'not_recommended' && showOperatorCta && (
@@ -153,6 +171,8 @@ TemplateThree.propTypes = {
   showOperatorCta: PropTypes.bool,
   operatorLogoWidth: PropTypes.string,
   operatorLogoHeight: PropTypes.string,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateThree;

package/src/components/atoms/cards/operator-card/template-two/index.js

@@ -31,6 +31,8 @@ const TemplateTwo = ({
   width = '54',
   height = '36',
   BonusTemplate = BonusTemplateDefault,
+  modulePosition,
+  itemPosition,
 }) => {
   const ribbons = item?.relation?.ribbons || [];
   const { relation, path } = item;
@@ -62,6 +64,8 @@ const TemplateTwo = ({
         showRatingLabel={showRatingLabel}
         showRatingDecimal={showRatingDecimal}
         module="cards"
+        modulePosition={modulePosition}
+        itemPosition={itemPosition}
       />
 
       <div className={styles?.cardContent || ''}>
@@ -72,6 +76,8 @@ const TemplateTwo = ({
             ctaBtn
             item={relation}
             tracker="main"
+            modulePosition={modulePosition}
+            itemPosition={itemPosition}
           />
         ) : (
           !isInactive && (
@@ -81,6 +87,8 @@ const TemplateTwo = ({
               ctaBtn
               item={relation}
               tracker="main"
+              modulePosition={modulePosition}
+              itemPosition={itemPosition}
             />
           )
         )}
@@ -126,7 +134,7 @@ const TemplateTwo = ({
       <Tnc operator={item?.relation} isFixed />
 
       {hasVariableComponent && (
-        <VariableComponent item={item} page={page} featured={false} template="templateTwo" />
+        <VariableComponent item={item} page={page} featured={false} template="templateTwo"  />
       )}
     </div>
   );
@@ -177,6 +185,8 @@ TemplateTwo.propTypes = {
   height: PropTypes.string,
   operatorLogoWidth: PropTypes.string,
   operatorLogoHeight: PropTypes.string,
+  modulePosition: PropTypes.number,
+  itemPosition: PropTypes.number,
 };
 
 export default TemplateTwo;

package/src/components/atoms/cards/operators-table/index.js

@@ -9,7 +9,7 @@ import PrettyLink from '~atoms/pretty-link';
 
 import styles from './table.module.scss';
 
-const CasinosTable = ({ module, page }) => {
+const CasinosTable = ({ module, page,  modulePosition  }) => {
   const { items } = module || {};
 
   const oneLiner = ({ one_liner }) => {
@@ -62,6 +62,7 @@ const CasinosTable = ({ module, page }) => {
                     tracker="main"
                     clickedElement="operator_table_cta"
                     className="table-operator-card-gtm btn-cta"
+                    modulePosition={modulePosition}
                   >
                     {`${useTranslate('visit_table', 'Visit')} ${item?.relation?.name}`}
                   </PrettyLink>
@@ -83,4 +84,5 @@ CasinosTable.propTypes = {
   page: PropTypes.shape({
     template: PropTypes.string,
   }),
+  modulePosition: PropTypes.number,
 };

package/src/components/atoms/cards/popup-card/index.js

@@ -23,6 +23,7 @@ const PopupCard = ({
   tncFixed = true,
   width = '98',
   height = '98',
+  itemPosition
 }) => {
   const operatorName = item.name;
   const oneLiner = item?.one_liners?.main?.one_liner;
@@ -42,7 +43,7 @@ const PopupCard = ({
         )}
         {showName && <p className={styles?.name || ''}>{operatorName}</p>}
       </div>
-      <Bonus module="popup" item={item} tracker={tracker} />
+      <Bonus module="popup" item={item} tracker={tracker}  itemPosition={itemPosition} />
       <div className={styles?.buttonContainer || ''}>
         <OperatorCta
           tracker={tracker}
@@ -59,6 +60,7 @@ const PopupCard = ({
           }}
           gtmClass="popup-operator-cta-gtm"
           pageTemplate={template}
+          itemPosition={itemPosition}
         />
         {showReviewLink && (
           <ReviewLink
@@ -112,6 +114,7 @@ PopupCard.propTypes = {
   showRoundedRating: PropTypes.bool,
   width: PropTypes.string,
   height: PropTypes.string,
+  itemPosition: PropTypes.number,
 };
 
 export default PopupCard;

package/src/components/atoms/coupon/index.js

@@ -16,6 +16,8 @@ const Coupon = ({
   checkIcon = <CheckCircleIcon />,
   showIcon = true,
 }) => {
+  if (!code) return;
+
   const [copySuccess, setCopySuccess] = useState('');
 
   const copyToClipBoard = async (copyMe) => {

package/src/components/atoms/operator-bonuses/index.js

@@ -10,7 +10,7 @@ import styles from './operator-bonuses.module.scss';
 
 import { getBonus } from '~helpers/getters';
 
-const OperatorBonuses = ({ operator }) => {
+const OperatorBonuses = ({ operator , modulePosition}) => {
   const onliner = getBonus('main', operator);
   const status = operator?.status;
   const isPlaceholder = status === 'coming_soon';
@@ -71,6 +71,8 @@ const OperatorBonuses = ({ operator }) => {
             }}
             operator={operator}
             tracker="main"
+            module="welcome_bonus"
+            modulePosition={modulePosition}
           />
         )}
       </div>

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

@@ -20,23 +20,26 @@ const RecommendedOperators = ({
   tncFixed = false,
   operatorLogoWidth,
   operatorLogoHeight,
+  modulePosition
 }) => (
   <div className={styles.reccommendedCasinos}>
     <h3>{title}</h3>
-    {operators.slice(0, 3).map((operator) => {
+    {operators.slice(0, 3).map((operator, index) => {
       const couponCode = getExtraField(operator.extra_fields, 'coupon_code');
 
       return (
-        <div>
+        <div className={styles.row || ''}>
           <OperatorDetails
             showRating={showRating}
             item={operator}
             showAuthor={showAuthor}
             showReviewLink={false}
-            costumeStyle={styles.operatorDetails}
+            costumeStyle={styles.operatorDetails || ''}
             module="wagering_calculator"
             imageWidth={operatorLogoWidth}
             imageHeight={operatorLogoHeight}
+            modulePosition={modulePosition}
+            itemPosition={index + 1}
           />
           <div className={styles.operatorBonus}>
             <PrettyLink
@@ -45,29 +48,35 @@ const RecommendedOperators = ({
               module="wagering_calculator"
               tracker="main"
               clickedElement="oneliner"
+              modulePosition={modulePosition}
+              itemPosition={index + 1}
             >
               <Bonus item={operator} tracker="main" />
             </PrettyLink>
 
             <TermsConditions operator={operator} isFixed={tncFixed} />
           </div>
-          {showCouponCode && (
+          {(showCouponCode && couponCode) && (
             <div className={styles.couponCtaContainer}>
-              {showCouponCode && <Coupon code={couponCode} />}
+              <Coupon code={couponCode} />
               <OperatorCta
                 operator={operator}
                 tracker="main"
                 buttonType={buttonType}
                 module="wagering_calculator"
+                modulePosition={modulePosition}
+                itemPosition={index + 1}
               />
             </div>
           )}
-          {!showCouponCode && (
+          {(!showCouponCode || !couponCode) && (
             <OperatorCta
               operator={operator}
               tracker="main"
               buttonType={buttonType}
               module="wagering_calculator"
+              modulePosition={modulePosition}
+              itemPosition={index + 1}
             />
           )}
         </div>
@@ -90,6 +99,7 @@ RecommendedOperators.propTypes = {
       name: PropTypes.string,
     }),
   ]),
-  operatorLogoWidth: PropTypes.string,
-  operatorLogoHeight: PropTypes.string,
+  operatorLogoWidth: PropTypes.number,
+  operatorLogoHeight: PropTypes.number,
+  modulePosition: PropTypes.number,
 };