gatsby-matrix-theme 23.0.3 → 23.0.4

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [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.4",
   "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,94 @@
+/* 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 } }) => {
+    const resultCalc =
+      (elements.bonus.value +
+        (elements.calc_select.value !== 'bonus' ? elements.deposit.value : 0)) *
+      elements.wagering.value *
+      (10 / elements.contribution.value);
+    setResult(Math.round(resultCalc));
+  };
+
+  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 htmlFor="deposit">
+          {translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}
+        </label>
+        <input id="deposit" type="number" />
+        <label htmlFor="bonus">
+          {translate(translations, 'wagecalc_bonus_amount', 'Bonus amount')}
+        </label>
+        <input id="bonus" type="number" />
+        <label htmlFor="wagering">{translate(translations, 'wagecalc_wagering', 'Wagering')}</label>
+        <input id="wagering" type="number" />
+        <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 htmlFor="contribution">
+          {translate(translations, 'wagecalc_contribution', 'Contribution %')}
+        </label>
+        <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>{infoText}</p>
+          </div>
+        )}
+        {result && (
+          <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,200 @@
+.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;
+  }
+  button[type='submit'] {
+    margin-top: 1.6rem;
+    padding: 1.6rem;
+  }
+  @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;
+  }
+}
+
+.mainTitle {
+  line-height: 3.4rem;
+  font-size: 2.4rem;
+}
+
+.infoTitle {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+h2,
+label {
+  font-weight: 700;
+  text-transform: capitalize;
+  color: var(--color-71);
+}
+
+h2 {
+  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;
+}
+
+p {
+  padding-right: 1.6rem;
+  overflow: scroll;
+  text-align: justify;
+}
+
+svg {
+  cursor: pointer;
+}
+
+label,
+input,
+select,
+button[type='submit'] {
+  @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: .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;