gatsby-matrix-theme 23.0.3 → 23.0.5

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [23.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v23.0.4...v23.0.5) (2023-05-24)
+
+
+### Code Refactoring
+
+* update wagering calculator calculations and scroll ([5a883e1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a883e1f74a5ca285ec0c7fc1398c35959d2e664))
+* update wagering calculator with classes ([7ec5203](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7ec5203b05342b1a54c7e2c330da76471fc94736))
+
+
+* Merge branch 'tm-3094-wagering-calculator' into 'master' ([1b8f484](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1b8f4849e0c0115e6571215092ee8cb6b2165bfa))
+
+## [23.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v23.0.3...v23.0.4) (2023-05-23)
+
+
+### Bug Fixes
+
+* added results in wagering calculator ([3813c82](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3813c829cfc71775ea374179bff698ac4751dcd7))
+* operator cards bug ([a4ebaf7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a4ebaf75f0c8990876bf009f21fa7e81986235e5))
+* wagering fixes ([1f0579b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f0579b73ca7902db9cbd132f67e7479e28aadd0))
+* welcome bonus ([ed68600](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed686003b4c87f0099bfe8991845cfed9b4586c5))
+
+
+### Code Refactoring
+
+* add wagering calculator into modules ([95eaf0e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/95eaf0e6da046854c0d0edc8dc7994f094242d70))
+* update matrix theme with wagering calculator ([d39170e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d39170e6832854c137b9b8ceddbb14830bd29cec))
+* update wagering calculator with styles ([79db240](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/79db240bc423d23ee65c70dbef70d50a07c73bc9))
+
+
+* Merge branch 'welcome-bonus' into 'master' ([0003199](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0003199313c259058d55c9e3d8cf07590682599d))
+* Merge branch 'tm-3094-wagering-calculator' into 'master' ([00500e9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/00500e9c9890b910b011dc5e4ef0625911ed94f4))
+* Merge branch 'master' into tm-3094-wagering-calculator ([a25c655](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a25c655f130ae2733401e48ed83dd417cd5288bd))
+
 ## [23.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v23.0.2...v23.0.3) (2023-05-18)
 
 

package/package.json

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

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

@@ -57,7 +57,9 @@ const TemplateFour = ({
             src={imagePrettyUrl(relation?.standardised_logo_url_object?.filename, 88, 88)}
             alt={getAltText(relation?.standardised_logo_url_object, name)}
           />
-          {showRibbon && ribbons.length > 0 && <span className={styles.ribbon}>{ribbons[0]}</span>}
+          {showRibbon && ribbons && ribbons.length > 0 && (
+            <span className={styles.ribbon}>{ribbons[0]}</span>
+          )}
         </Link>
         <Link to={reviewPath} title={name} className="operator-card-gtm">
           {name}

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

@@ -68,7 +68,9 @@ const TemplateOne = ({
             src={imagePrettyUrl(relation?.standardised_logo_url_object?.filename, 88, 88)}
             alt={getAltText(relation?.standardised_logo_url_object, name)}
           />
-          {showRibbon && ribbons.length > 0 && <span className={styles.ribbon}>{ribbons[0]}</span>}
+          {showRibbon && ribbons && ribbons.length > 0 && (
+            <span className={styles.ribbon}>{ribbons[0]}</span>
+          )}
         </Link>
         <Link to={reviewPath} title={name} className="operator-card-gtm">
           {name}

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

@@ -56,7 +56,9 @@ const TemplateThree = ({
             src={imagePrettyUrl(relation?.standardised_logo_url_object?.filename, 88, 88)}
             alt={getAltText(relation?.standardised_logo_url_object, name)}
           />
-          {showRibbon && ribbons.length > 0 && <span className={styles.ribbon}>{ribbons[0]}</span>}
+          {showRibbon && ribbons && ribbons.length > 0 && (
+            <span className={styles.ribbon}>{ribbons[0]}</span>
+          )}
         </Link>
         <Link to={reviewPath} title={name} className="operator-card-gtm">
           {name}

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

@@ -63,7 +63,9 @@ const TemplateTwo = ({
               alt={getAltText(relation?.standardised_logo_url_object, name)}
             />
           </Link>
-          {showRibbon && ribbons.length > 0 && <span className={styles.ribbon}>{ribbons[0]}</span>}
+          {showRibbon && ribbons && ribbons.length > 0 && (
+            <span className={styles.ribbon}>{ribbons[0]}</span>
+          )}
         </div>
         <div className={styles?.cardContentTop || ''}>
           <Link to={reviewPath} title={name} className="operator-card-gtm">

package/src/components/atoms/operator-score-gauge/index.js

@@ -15,18 +15,6 @@ const OperatorScoreGauge = ({ operator, onHeader = false }) => {
           startGradientColor={onHeader ? '#4ecdc4' : '#ccced9'}
           endGradientColor={onHeader ? '#1a535c' : '#4ecdc4'}
         />
-        <div className={`${styles?.backCircle || ''} ${styles?.textCircle || ''}`}>
-          <CircleRating
-            rating={rating}
-            radius={onHeader ? 150 : 230}
-            strokeWidth={onHeader ? '22' : '45'}
-            gradientId={onHeader ? 'diagonal-gradient' : 'white-diagonal'}
-            backgroundColor={onHeader ? '' : '#082030'}
-          />
-          <span className={styles?.ratingText || ''}>
-            <span>{rating}</span>/10
-          </span>
-        </div>
         <div className={`${styles?.frontCircle || ''} ${styles?.textCircle || ''}`}>
           <CircleRating
             rating={rating}

package/src/components/atoms/operator-score-gauge/operator-score-gauge.module.scss

@@ -21,24 +21,7 @@
     position: absolute;
   }
 
-  .backCircle {
-    opacity: 0.1;
-    position: absolute;
-    display: none;
-    svg {
-      height: 50rem;
-      width: 50rem;
-
-      circle {
-        cx: 260;
-      }
-    }
-
-    .ratingText {
-      font-size: 10rem;
-      color: #ccced9;
-    }
-  }
+ 
   .frontCircle {
     width: 18rem;
     height: 18rem;

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

@@ -0,0 +1,96 @@
+/* eslint-disable no-nested-ternary */
+import React, { useState, useContext } 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 } from 'gatsby-core-theme/src/helpers/getters';
+import Button from 'gatsby-core-theme/src/components/atoms/button';
+import styles from './wagering-calculator.module.scss';
+
+const WageringCalculator = ({
+  mainTitle = 'Wagering Requirement Calculator',
+  infoIcon,
+  infoTitle,
+  infoText,
+}) => {
+  const [isInfoOpen, setIsInfoOpen] = useState(false);
+  const [result, setResult] = useState(null);
+  const { translations } = useContext(Context);
+  const InfoIcon = infoIcon || AiOutlineQuestionCircle;
+
+  const Calculate = ({ target: { elements } }) => {
+    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) || 1))
+      )
+    );
+  };
+
+  return (
+    <form
+      className={styles.container}
+      onSubmit={Calculate}
+      // eslint-disable-next-line
+      action="javascript:void(0);"
+      target="_self"
+    >
+      <h2 className={styles.mainTitle}>
+        {mainTitle}
+        {infoTitle && infoText && <InfoIcon onClick={() => setIsInfoOpen(true)} />}
+      </h2>
+      <label className={styles.label} htmlFor="deposit">
+        {translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}
+      </label>
+      <input className={styles.input} id="deposit" type="number" />
+      <label className={styles.label} htmlFor="bonus">
+        {translate(translations, 'wagecalc_bonus_amount', 'Bonus amount')}
+      </label>
+      <input className={styles.input} id="bonus" type="number" />
+      <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">
+        <option value="bonus">{translate(translations, 'wagecalc_bonus', 'Bonus')}</option>
+        <option value="bonus_deposit">
+          {translate(translations, 'wagecalc_deposit_bonus', 'Deposit + Bonus')}
+        </option>
+      </select>
+      <label className={styles.label} htmlFor="contribution">
+        {translate(translations, 'wagecalc_contribution', 'Contribution %')}
+      </label>
+      <input className={styles.input} id="contribution" type="number" max="100" />
+      <Button
+        isButton
+        primaryColor
+        btnText={translate(translations, 'wagecalc_calculate', 'Calculate')}
+      />
+      {isInfoOpen && (
+        <div className={styles.container}>
+          <h2 className={styles.infoTitle}>{infoTitle}</h2>
+          <MdClose onClick={() => setIsInfoOpen(false)} />
+          <p className={styles.infoText}>{infoText}</p>
+        </div>
+      )}
+      {typeof result === 'number' && (
+        <div className={styles.resultContainer}>
+          <span>{translate(translations, 'wagecalc_result', 'Result')}</span>
+          <span>{result}</span>
+        </div>
+      )}
+    </form>
+  );
+};
+
+WageringCalculator.propTypes = {
+  mainTitle: PropTypes.string,
+  infoTitle: PropTypes.string,
+  infoText: PropTypes.string,
+  infoIcon: PropTypes.element,
+};
+
+export default WageringCalculator;

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

@@ -0,0 +1,202 @@
+.container {
+  margin: 0 auto;
+  padding: 1.6rem;
+  max-width: 34.3rem;
+  display: flex;
+  flex-direction: column;
+  border-radius: 1.2rem;
+  box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.09);
+  background-color: var(--color-4);
+  @include min(tablet) {
+    padding: 2.4rem;
+    max-width: 96rem;
+  }
+}
+
+form.container {
+  position: relative;
+  svg {
+    margin-left: 1.2rem;
+    height: 2.67rem;
+    width: 2.67rem;
+    vertical-align: text-bottom;
+    cursor: pointer;
+  }
+  button[type='submit'] {
+    margin-top: 1.6rem;
+    padding: 1.6rem;
+    @include min(tablet) {
+      width: calc(50% - 1.2rem);
+    }
+  }
+  @include min(tablet) {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+
+div.container {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  svg {
+    position: absolute;
+    top: 1.99rem;
+    right: 1.99rem;
+    cursor: pointer;
+  }
+}
+
+.mainTitle {
+  line-height: 3.4rem;
+  font-size: 2.4rem;
+}
+
+.infoTitle {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+.mainTitle,
+.infoTitle,
+.label {
+  font-weight: 700;
+  text-transform: capitalize;
+  color: var(--color-71);
+}
+
+.mainTitle,
+.infoTitle {
+  margin-top: 0;
+  margin-bottom: 2.4rem;
+  width: 100%;
+}
+
+.label {
+  line-height: 2.6rem;
+  font-size: 1.6rem;
+  @include min(tablet) {
+    margin-top: 1.6rem;
+  }
+}
+
+.input,
+.select {
+  padding: 16px;
+  height: 5.9rem;
+  background: var(--color-63);
+  border-radius: 4px;
+}
+
+.input {
+  margin: 0.8rem 0;
+}
+
+.select {
+  margin-top: 3.4rem;
+  margin-bottom: 2.4rem;
+}
+
+.infoText {
+  padding-right: 1.6rem;
+  overflow-y: auto;
+  text-align: justify;
+}
+
+.label,
+.input,
+.select {
+  @include min(tablet) {
+    width: calc(50% - 1.2rem);
+  }
+}
+
+@include min(tablet) {
+  .label:nth-child(2) {
+    order: 1;
+  }
+  .label:nth-child(4) {
+    order: 2;
+  }
+  .label:nth-child(6) {
+    width: 100%;
+    order: 5;
+  }
+  .label:nth-child(9) {
+    width: 100%;
+    order: 8;
+  }
+  .input:nth-child(3) {
+    order: 3;
+  }
+  .input:nth-child(5) {
+    order: 4;
+  }
+  .input:nth-child(7) {
+    order: 6;
+  }
+  .input:nth-child(10) {
+    margin-bottom: 0;
+    order: 9;
+  }
+  .select {
+    margin: 0.8rem 0;
+    order: 7;
+  }
+  form.container button[type='submit'] {
+    margin-top: 0.8rem;
+    order: 10;
+  }
+}
+
+.resultContainer {
+  position: relative;
+  order: 11;
+  margin-top: 3.2rem;
+  width: 100%;
+  @include flex-align(center, space-between);
+  padding: 1.6rem;
+  color: #090e13;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 34px;
+  flex-direction: column;
+  gap: 1rem;
+
+  @include min(tablet) {
+    flex-direction: row;
+    gap: 0;
+  }
+
+  &:before {
+    content: '';
+    border-radius: 12px;
+    display: block;
+    background-color: var(--primary-color);
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  > span {
+    z-index: 2;
+  }
+
+  > span:last-child {
+    flex-basis: 50%;
+    background: #ffffff;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 38px;
+    padding: 0.8rem;
+    @include flex-align(center, center);
+  }
+}

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

@@ -0,0 +1,56 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { AiOutlineQuestionCircle } from '@react-icons/all-files/ai/AiOutlineQuestionCircle';
+import WageringCalculator from '.';
+
+export default {
+  title: 'Matrix-Theme/Modules/Template Blocks/Wagering Calculator',
+  component: WageringCalculator,
+  argTypes: {
+    mainTitle: {
+      name: 'mainTitle',
+      type: { name: 'string', required: false },
+      description: 'Main Block Title',
+      defaultValue: 'Wagering Requirement Calculator',
+    },
+    infoIcon: {
+      name: 'infoIcon',
+      type: { name: 'object', required: false },
+      description: 'Info Block Icon',
+      defaultValue: AiOutlineQuestionCircle,
+    },
+    infoTitle: {
+      name: 'infoTitle',
+      type: { name: 'string', required: false },
+      description: 'Info Block Title',
+      defaultValue: 'Example: 20x wagering requirement',
+    },
+    infoText: {
+      name: 'infoText',
+      type: { name: 'string', required: false },
+      description: 'Info Block Text',
+      defaultValue:
+        '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.',
+    },
+  },
+};
+
+const Template = (args) => (
+  <Context.Provider value={{}}>
+    <WageringCalculator {...args} />
+  </Context.Provider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  translations: {
+    wagecalc_deposit_amount: 'Deposit amount',
+    wagecalc_bonus_amount: 'Bonus amount',
+    wagecalc_wagering: 'Wagering',
+    wagecalc_bonus: 'Bonus',
+    wagecalc_deposit_bonus: 'Deposit + Bonus',
+    wagecalc_contribution: 'Contribution %',
+    wagecalc_calculate: 'Calculate',
+  },
+};

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

@@ -0,0 +1,54 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MdInfo } from '@react-icons/all-files/md/MdInfo';
+import MainProvider from '~context/MainProvider';
+import WageringCalculator from '.';
+
+const props = {
+  mainTitle: 'Test Main Title',
+  infoTitle: 'Test Info Title',
+  infoText: 'Test Info Text',
+  infoIcon: MdInfo,
+};
+
+describe('Wagering Calculator', () => {
+  test('Template Block', async () => {
+    const { container, getByText, queryByText } = render(
+      <MainProvider value={{}}>
+        <WageringCalculator {...props} />
+      </MainProvider>
+    );
+
+    expect(getByText('Test Main Title')).toBeTruthy();
+
+    const infoIcon = container.querySelector('svg');
+    fireEvent.click(infoIcon);
+    expect(getByText('Test Info Title')).toBeTruthy();
+    expect(getByText('Test Info Text')).toBeTruthy();
+
+    const icons = container.querySelectorAll('svg');
+    fireEvent.click(icons[1]);
+    expect(queryByText('Test Info Title')).not.toBeInTheDocument();
+    expect(queryByText('Test Info Text')).not.toBeInTheDocument();
+
+    const inputs = container.querySelectorAll('input');
+    inputs.forEach((input, i) => {
+      input.value = i + 1;
+    });
+    expect(container.querySelector('.resultContainer')).toBeFalsy();
+    const calculate = container.querySelector('button');
+    fireEvent.click(calculate);
+    const select = container.querySelector('select');
+    select.selectedIndex = 1;
+    fireEvent.click(calculate);
+    await waitFor(() => {
+      expect(container.querySelector('.resultContainer')).toBeTruthy();
+    });
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -94,6 +94,8 @@ const Modules = ({ module, page, pageContext, index, exclOperator }) => {
         return loadable(() => import('../../../../components/molecules/game-score-gauge'));
       case 'newsletter_optin':
         return loadable(() => import('../../../../components/molecules/newsletter-optin'));
+      case 'wagering_calculator':
+        return loadable(() => import('../../../../components/molecules/wagering-calculator'));
       default:
         return null;
     }

package/src/gatsby-core-theme/styles/utils/variables/_colors.scss

@@ -61,6 +61,7 @@
     --color-60: var(--color-58);
     --color-61: #5545A9;
     --color-62: #131313;
+    --color-63: #f8f7f5;
     
     //feedback-module
     --color-70: #9747ff;