gatsby-matrix-theme 53.13.1 → 53.13.3

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [53.13.3](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.13.2...v53.13.3) (2026-04-06)
+
+
+### Bug Fixes
+
+* add rtp fol calculator ([c1b0a35](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/c1b0a35f67bb91669f32ea265a71d5fde8e5b729))
+* improve code ([ed93f35](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/ed93f35975fe55162c88beb3e802655b496b1972))
+
+
+* Merge branch 'en-405-wagering-calculator' into 'master' ([f1e794a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/f1e794a3519135383c4f13ea5877d8a2ec531a2f))
+
+## [53.13.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.13.1...v53.13.2) (2026-04-03)
+
+
+### Config
+
+* update core theme ([a54b9e1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/a54b9e1453ce36ff4cf6a15dd92dbb8ec12c51dd))
+* update gatsby theme version ([4fce504](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/4fce504de245594bbd6709049249020fcd53e5b6))
+
 ## [53.13.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.13.0...v53.13.1) (2026-04-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.13.1",
+  "version": "53.13.3",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "^44.19.1",
+    "gatsby-core-theme": "^44.20.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect } 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';
@@ -10,22 +10,25 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 import RecomendedOperators from '../../atoms/recommended-operators';
 import styles from './wagering-calculator.module.scss';
 import { getRecommendedToplist } from '../../../helpers/common';
+import wageringCalculator from '../../../helpers/wagering-calculator';
+import WAGERING_INPUT_FIELDS from '../../../constants/wagering-calculator';
 
 const WageringCalculator = ({
-  mainTitle = 'Wagering Requirement Calculator',
+  mainTitle = 'Wagering RTP Calculator',
   infoIcon,
   infoTitle = 'Example: 20x Wagering Requirement',
   infoText = 'Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat.',
   pageContext = {},
   buttonType = 'primary',
-  modulePosition
+  modulePosition,
+  currency = '€'
 }) => {
-  const wgcContribution = useRef(null);
-  const wgcBonus = useRef(null);
-  const wgcCalcSelect = useRef(null);
-  const wgcDeposit = useRef(null);
-  const wgcWagering = useRef(null);
-
+  const [depositAmount, setDepositAmount] = useState('');
+  const [bonusAmount, setBonusAmount] = useState('');
+  const [type, setType] = useState('bonus');
+  const [contribution, setContribution] = useState('');
+  const [rtp, setRtp] = useState('');
+  const [rolloverTerms, setRolloverTerms] = useState('');
   const [isInfoOpen, setIsInfoOpen] = useState(false);
   const [showRecommendedOperators, setShowRecommendedOperators] = useState(false);
   const [result, setResult] = useState(null);
@@ -35,25 +38,58 @@ const WageringCalculator = ({
     ? getRecommendedToplist(pageContext.marketSections)
     : [];
 
-  const Calculate = () => {
-    // eslint-disable-next-line
-    wgcContribution.current.value && (wgcContribution.current.value = 100);
+  const capValue = (value, max) => {
+    const num = Number(value);
+    if (value === '' || Number.isNaN(num)) return value;
+    return num > max ? String(max) : value;
+  };
 
-    setResult(
-      Math.round(
-        (Number(wgcBonus.current.value) +
-          (wgcCalcSelect.current.value !== 'bonus' ? Number(wgcDeposit.current.value) : 0)) *
-          Number(wgcWagering.current.value) *
-          (100 / Number(wgcContribution.current.value))
-      )
-    );
-    setShowRecommendedOperators(true);
+  const stateByKey = {
+    depositAmount: [depositAmount, setDepositAmount],
+    bonusAmount: [bonusAmount, setBonusAmount],
+    contribution: [contribution, setContribution],
+    rtp: [rtp, setRtp],
+    rolloverTerms: [rolloverTerms, setRolloverTerms],
+  };
+
+  useEffect(() => {
+    const deposit = Number(depositAmount);
+    const bonus = Number(bonusAmount);
+    const contrib = Number(contribution);
+    const rtpVal = Number(rtp);
+    const rollover = Number(rolloverTerms);
+
+    if (bonus && contrib && rtpVal && rollover) {
+      const effectiveRTP = wageringCalculator({
+        depositAmount: deposit || 0,
+        bonusAmount: bonus,
+        type,
+        contribution: contrib,
+        rtp: rtpVal,
+        rolloverTerms: rollover,
+      });
+      setResult(effectiveRTP);
+      setShowRecommendedOperators(true);
+    } else {
+      setResult(null);
+    }
+  }, [depositAmount, bonusAmount, type, contribution, rtp, rolloverTerms]);
+
+  const resetFields = () => {
+    setDepositAmount('');
+    setBonusAmount('');
+    setType('bonus');
+    setContribution('');
+    setRtp('');
+    setRolloverTerms('');
+    setResult(null);
+    setShowRecommendedOperators(false);
   };
 
   return (
     <div>
       <div className={styles.container}>
-        <form target="_self">
+        <form target="_self" onSubmit={(e) => e.preventDefault()}>
           <span className={styles.mainTitle}>
             {useTranslate('wagecalc_main_title', mainTitle)}
             {infoTitle && infoText && (
@@ -65,80 +101,52 @@ const WageringCalculator = ({
               />
             )}
           </span>
-          <div className={styles.inputContainer}>
-            <label className={styles.label} htmlFor="wgc_deposit">
-              {useTranslate('wagecalc_deposit_amount', 'Deposit amount')}
-            </label>
-            <input
-              id="wgc_deposit"
-              className={styles.input}
-              ref={wgcDeposit}
-              type="number"
-              min={0}
-            />
-          </div>
-          <div className={styles.inputContainer}>
-            <label className={styles.label} htmlFor="bonus">
-              {useTranslate('wagecalc_bonus_amount', 'Bonus amount')}
-            </label>
-            <input
-              className={styles.input}
-              ref={wgcBonus}
-              type="number"
-              min={0}
-              required
-              id="bonus"
-            />
-          </div>
-          <div className={styles.inputContainer}>
-            <label className={styles.label} htmlFor="wagering">
-              {useTranslate('wagecalc_wagering', 'Wagering')}
-            </label>
-            <input
-              className={styles.input}
-              ref={wgcWagering}
-              type="number"
-              min={0}
-              required
-              id="wagering"
-            />
-          </div>
-          <div className={styles.inputContainer}>
-            <select
-              id="wgcCalcSelect"
-              className={styles.select}
-              ref={wgcCalcSelect}
-              onChange={({ target }) => {
-                const deposit = document.getElementById('wgc_deposit');
-                deposit.required = target.value !== 'bonus';
-                deposit.checkValidity();
-              }}
-              aria-label={useTranslate('wagecalc_select_label', 'Select an option')}
-            >
-              <option value="bonus">{useTranslate('wagecalc_bonus', 'Bonus')}</option>
-              <option value="bonus_deposit">
-                {useTranslate('wagecalc_deposit_bonus', 'Deposit + Bonus')}
-              </option>
-            </select>
-          </div>
-
-          <div className={styles.inputContainer}>
-            <label className={styles.label} htmlFor="contribution">
-              {useTranslate('wagecalc_contribution', 'Contribution %')}
-            </label>
-            <input
-              className={styles.input}
-              ref={wgcContribution}
-              type="number"
-              min={0}
-              max={100}
-              id="contribution"
-            />
-          </div>
-
+          {WAGERING_INPUT_FIELDS.map((field) => {
+            if (field.id === 'type') {
+              return (
+                <div key="type" className={styles.inputContainer}>
+                  <label className={styles.label} htmlFor="wgcCalcSelect">
+                    {useTranslate('wagecalc_type', 'Type')}
+                  </label>
+                  <select
+                    id="wgcCalcSelect"
+                    className={styles.select}
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                    aria-label={useTranslate('wagecalc_select_label', 'Select an option')}
+                  >
+                    <option value="bonus">{useTranslate('wagecalc_bonus', 'Bonus')}</option>
+                    <option value="bonus_deposit">
+                      {useTranslate('wagecalc_deposit_bonus', 'Deposit + Bonus')}
+                    </option>
+                  </select>
+                </div>
+              );
+            }
+            const [value, setValue] = stateByKey[field.stateKey];
+            return (
+              <div key={field.id} className={styles.inputContainer}>
+                <label className={styles.label} htmlFor={field.id}>
+                  {useTranslate(field.translationKey, field.defaultLabel)}
+                </label>
+                <input
+                  id={field.id}
+                  className={styles.input}
+                  value={value}
+                  onChange={(e) => setValue(
+                    field.max ? capValue(e.target.value, field.max) : e.target.value,
+                  )}
+                  type="number"
+                  min={0}
+                  max={field.max}
+                  required={field.required}
+                />
+              </div>
+            );
+          })}
           <Button
-            onClick={Calculate}
-            btnText={useTranslate('wagecalc_calculate', 'Calculate')}
+            onClick={resetFields}
+            btnText={useTranslate('wagecalc_reset', 'Reset')}
             isInternalLink={false}
             buttonType={buttonType}
             buttonSize="m"
@@ -146,9 +154,9 @@ const WageringCalculator = ({
 
           {!!result && !isInfoOpen && (
             <div className={styles.resultContainer}>
-              <span>{useTranslate('wagecalc_result', 'Results:')}</span>
+              <span>{useTranslate('wagecalc_result', 'Effective RTP:')}</span>
               <span>
-                {useTranslate('wagecalc_result_currency', '€')}
+                {currency}
                 {result}
               </span>
             </div>
@@ -189,6 +197,7 @@ WageringCalculator.propTypes = {
     marketSections: PropTypes.shape({}),
   }),
   modulePosition: PropTypes.number,
+  currency: PropTypes.string,
 };
 
 export default WageringCalculator;

package/src/constants/wagering-calculator.js

@@ -0,0 +1,39 @@
+const WAGERING_INPUT_FIELDS = [
+  {
+    id: 'wgc_deposit',
+    stateKey: 'depositAmount',
+    translationKey: 'wagecalc_deposit_amount',
+    defaultLabel: 'Deposit amount',
+  },
+  {
+    id: 'bonus',
+    stateKey: 'bonusAmount',
+    translationKey: 'wagecalc_bonus_amount',
+    defaultLabel: 'Bonus amount',
+    required: true,
+  },
+  { id: 'type' },
+  {
+    id: 'contribution',
+    stateKey: 'contribution',
+    translationKey: 'wagecalc_contribution',
+    defaultLabel: 'Game Contribution %',
+    max: 100,
+  },
+  {
+    id: 'rtp',
+    stateKey: 'rtp',
+    translationKey: 'wagecalc_rtp',
+    defaultLabel: 'RTP %',
+    max: 100,
+  },
+  {
+    id: 'wagering',
+    stateKey: 'rolloverTerms',
+    translationKey: 'wagecalc_wagering',
+    defaultLabel: 'Rollover Terms',
+    required: true,
+  },
+];
+
+export default WAGERING_INPUT_FIELDS;

package/src/helpers/wagering-calculator.js

@@ -0,0 +1,11 @@
+const wageringCalculator = ({ depositAmount, bonusAmount, type, contribution, rtp, rolloverTerms }) => {
+  const effectiveContribution = contribution === 0 ? 0 : contribution / 100;
+  if (effectiveContribution === 0) return 0;
+  const originalAmount = type === 'bonus'
+    ? (bonusAmount * rolloverTerms) / effectiveContribution
+    : ((bonusAmount + depositAmount) * rolloverTerms) / effectiveContribution;
+  const effectiveRTP = rtp ? Number((originalAmount / (rtp / 100)).toFixed(2)) : originalAmount;
+  return effectiveRTP;
+};
+
+module.exports = wageringCalculator;

package/src/helpers/wagering-calculator.test.js

@@ -0,0 +1,67 @@
+const wageringCalculator = require('./wagering-calculator');
+
+describe('wageringCalculator', () => {
+  it('returns 0 when contribution is 0', () => {
+    const result = wageringCalculator({
+      depositAmount: 100,
+      bonusAmount: 50,
+      type: 'bonus',
+      contribution: 0,
+      rtp: 96,
+      rolloverTerms: 20,
+    });
+    expect(result).toBe(0);
+  });
+
+  it('calculates correctly for bonus type', () => {
+    const result = wageringCalculator({
+      depositAmount: 100,
+      bonusAmount: 50,
+      type: 'bonus',
+      contribution: 100,
+      rtp: 96,
+      rolloverTerms: 20,
+    });
+    // (50 * 20) / 1 = 1000, then 1000 / (96/100) = 1041.67
+    expect(result).toBe(1041.67);
+  });
+
+  it('calculates correctly for bonus_deposit type', () => {
+    const result = wageringCalculator({
+      depositAmount: 100,
+      bonusAmount: 50,
+      type: 'bonus_deposit',
+      contribution: 100,
+      rtp: 96,
+      rolloverTerms: 20,
+    });
+    // ((50 + 100) * 20) / 1 = 3000, then 3000 / (96/100) = 3125
+    expect(result).toBe(3125);
+  });
+
+  it('returns originalAmount when rtp is 0', () => {
+    const result = wageringCalculator({
+      depositAmount: 100,
+      bonusAmount: 50,
+      type: 'bonus',
+      contribution: 100,
+      rtp: 0,
+      rolloverTerms: 20,
+    });
+    // (50 * 20) / 1 = 1000, rtp is falsy so returns 1000
+    expect(result).toBe(1000);
+  });
+
+  it('handles partial contribution percentage', () => {
+    const result = wageringCalculator({
+      depositAmount: 0,
+      bonusAmount: 100,
+      type: 'bonus',
+      contribution: 50,
+      rtp: 96,
+      rolloverTerms: 30,
+    });
+    // (100 * 30) / 0.5 = 6000, then 6000 / (96/100) = 6250
+    expect(result).toBe(6250);
+  });
+});