gatsby-matrix-theme 34.0.16 → 34.0.18

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [34.0.18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.17...v34.0.18) (2023-10-19)
+
+
+### Bug Fixes
+
+* add extra field an experience ([5acb766](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5acb766040b96e76078b8e33f14f7d54acebdff7))
+* add partnership template ([d77090e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d77090e944c50eaf5c4c65ba0c5621bec068922c))
+* add storybook ([14eb1d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/14eb1d0ca572773ff5449baa6e1c884309354fb0))
+* feedback module ([73a0645](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/73a06455c948dbacf7e287387c934afbef2c53b6))
+* make style ([a1b1213](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1b1213904bf27cf1499ff012a91899e5218e626))
+* make style and sperate logic ([16bac27](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/16bac2772fb50f5ac243ac4a65c9f1f8a9e47d46))
+* make test ([5968a75](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5968a751ec2b3769946ae05b18b708b9542fa518))
+* module see more ([85871a2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/85871a22f28791f33866e0e194d97548469349c2))
+* remove console.log ([561437a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/561437a55b9faa268567d5f0b6c2fd8d2a845942))
+
+
+* Merge branch 'tm-3609-feedback' into 'master' ([40d8339](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/40d8339bf23760f027675bc56b45dce207dd4d6d))
+* Merge branch 'operator-summery' into 'master' ([33892e6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/33892e6392fd98fe2da3edac572bf8557eccc192))
+
+## [34.0.17](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.16...v34.0.17) (2023-10-18)
+
+
+### Bug Fixes
+
+* triggering deployment ([105af69](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/105af695714ef09e03bdfa4125740349bc99326f))
+* update core theme version ([70469c3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/70469c318773a865ced70b5620444d8cd0e7ea70))
+
 ## [34.0.16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.15...v34.0.16) (2023-10-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.16",
+  "version": "34.0.18",
   "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": "30.0.7",
+    "gatsby-core-theme": "30.0.8",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/cards/operator-card/template-two/template-two.module.scss

@@ -217,7 +217,6 @@
 .tncCollapse {
   text-align: left;
 
-  // override colours from collapse module
   button {
     font-weight: 700;
     font-size: 1.2rem !important;

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

@@ -1,132 +1,17 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import React, { useState, useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'gatsby';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
-import { BiLike } from '@react-icons/all-files/bi/BiLike';
-import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
-
-import styles from './feedback.module.scss';
-
-const FeedBack = ({ pageId, casinoTitle, trueVotes, falseVotes, contactUs = '/contact-us' }) => {
-  const { translations } = useContext(Context) || {};
-  const [voted, setVote] = useState(null);
-  const [error, setError] = useState(null);
-  const [success, setSuccess] = useState(null);
-
-  async function addVote(feetBack) {
-    const votedUser = feetBack ? 1 : 0;
-    await fetch(`${process.env.GATSBY_API_URL}/sites/v0.1/page-votes`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        page_id: pageId,
-        vote: votedUser,
-      }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        setVote(feetBack);
-        // eslint-disable-next-line no-unused-expressions
-        !data?.success ? setError(data.errors[0]) : setSuccess(true);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+import TemplateTwo from './template-two';
+import TemplateOne from './template-one';
+
+export default function FeedBack({ templateName = 'template_two', ...rest }) {
+  switch (templateName) {
+    case 'template_two':
+      return <TemplateTwo {...rest} />;
+    default:
+      return <TemplateOne {...rest} />;
   }
-
-  const vote = (feetBack) => {
-    addVote(feetBack);
-  };
-
-  return (
-    <div className={styles?.container || ''}>
-      <div className={styles?.feedbackBox || ''}>
-        <span>
-          {translate(
-            translations,
-            'recomend_casino_title',
-            'Would you recomend [casinoTitle] ?'
-          ).replace('[casinoTitle]', casinoTitle)}
-        </span>
-        <div className={styles?.formBox || ''}>
-          <span
-            onClick={voted === null ? () => vote(true) : null}
-            className={`${voted ? styles?.like || '' : ''} ${
-              voted === false ? styles?.disabled || '' : ''
-            }`}
-            aria-hidden="true"
-          >
-            <BiLike color="#323C46" title="Like Icon" />
-          </span>
-          <div>
-            <span className={styles?.number || ''}>{voted ? trueVotes + 1 : trueVotes} </span>
-
-            <span className={styles?.text || ''}>
-              {voted || voted === undefined || voted === null
-                ? translate(translations, 'recomend_casino', 'Recommendations')
-                : translate(translations, 'dont_recomend_casino', 'Don’t Recommend it')}
-            </span>
-          </div>
-          <span
-            onClick={voted === null ? () => vote(false) : null}
-            className={`${!voted && voted !== null && styles.dislike} ${voted && styles.disabled}`}
-            aria-hidden="true"
-          >
-            <BiDislike color="#323C46" title="Dislike Icon" />
-          </span>
-        </div>
-        {voted === null ? (
-          <div className={styles?.details || ''}>{`${trueVotes} ${translate(
-            translations,
-            'of_feedback',
-            'of'
-          )} ${trueVotes + falseVotes} ${translate(
-            translations,
-            'user_recomend_feedback',
-            'users recommend [casinoTitle]'
-          ).replace('[casinoTitle]', casinoTitle)} `}</div>
-        ) : (
-          <div className={styles?.voted || ''}>
-            <span>{translate(translations, 'thanks_feedback', 'Thanks for your feedback!')}</span>
-            {error ? (
-              <p className={styles?.error || ''}>{translate(translations, 'error_info', error)}</p>
-            ) : (
-              <>
-                {success && (
-                  <p>
-                    {voted
-                      ? translate(
-                          translations,
-                          'positive_feedback',
-                          'What did you like about [casinoTitle]? Let us know, send us a message'
-                        ).replace('[casinoTitle]', casinoTitle)
-                      : translate(
-                          translations,
-                          'negative_feedback',
-                          'Sorry about your experience at [casinoTitle]. What happened? send us a message'
-                        ).replace('[casinoTitle]', casinoTitle)}
-                    <Link to={contactUs}> {translate(translations, 'hereText', 'here')} </Link>.
-                  </p>
-                )}
-              </>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+}
 
 FeedBack.propTypes = {
-  pageId: PropTypes.number,
-  casinoTitle: PropTypes.string,
-  trueVotes: PropTypes.number,
-  falseVotes: PropTypes.number,
-  contactUs: PropTypes.string,
+  templateName: PropTypes.string,
 };
-
-export default FeedBack;

package/src/components/atoms/feedback/template-one/index.js

@@ -0,0 +1,116 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { BiLike } from '@react-icons/all-files/bi/BiLike';
+import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
+import { addVote } from '../../../../services';
+
+import styles from './feedback.module.scss';
+
+const FeedBack = ({ pageId, casinoTitle, trueVotes, falseVotes, contactUs = '/contact-us' }) => {
+  const { translations } = useContext(Context) || {};
+  const [voted, setVote] = useState(null);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+
+  const vote = async (feetBack) => {
+    const res = await addVote(feetBack, pageId);
+    setVote(feetBack);
+
+    // eslint-disable-next-line no-unused-expressions
+    !res?.success ? setError(res?.errors[0]) : setSuccess(true);
+  };
+
+  return (
+    <div className={styles?.container || ''}>
+      <div className={styles?.feedbackBox || ''}>
+        <span>
+          {translate(
+            translations,
+            'recomend_casino_title',
+            'Would you recomend [casinoTitle] ?'
+          ).replace('[casinoTitle]', casinoTitle)}
+        </span>
+        <div className={styles?.formBox || ''}>
+          <span
+            onClick={voted === null ? () => vote(true) : null}
+            className={`${voted ? styles?.like || '' : ''} ${
+              voted === false ? styles?.disabled || '' : ''
+            }`}
+            aria-hidden="true"
+            data-testid="like-button"
+          >
+            <BiLike color="#323C46" title="Like Icon" />
+          </span>
+          <div>
+            <span className={styles?.number || ''}>{voted ? trueVotes + 1 : trueVotes} </span>
+
+            <span className={styles?.text || ''}>
+              {voted || voted === undefined || voted === null
+                ? translate(translations, 'recomend_casino', 'Recommendations')
+                : translate(translations, 'dont_recomend_casino', 'Don’t Recommend it')}
+            </span>
+          </div>
+          <span
+            onClick={voted === null ? () => vote(false) : null}
+            className={`${!voted && voted !== null && styles.dislike} ${voted && styles.disabled}`}
+            aria-hidden="true"
+            data-testid="dislike-button"
+          >
+            <BiDislike color="#323C46" title="Dislike Icon" />
+          </span>
+        </div>
+        {voted === null ? (
+          <div className={styles?.details || ''}>{`${trueVotes} ${translate(
+            translations,
+            'of_feedback',
+            'of'
+          )} ${trueVotes + falseVotes} ${translate(
+            translations,
+            'user_recomend_feedback',
+            'users recommend [casinoTitle]'
+          ).replace('[casinoTitle]', casinoTitle)} `}</div>
+        ) : (
+          <div className={styles?.voted || ''}>
+            <span>{translate(translations, 'thanks_feedback', 'Thanks for your feedback!')}</span>
+            {error ? (
+              <p className={styles?.error || ''}>{translate(translations, 'error_info', error)}</p>
+            ) : (
+              <>
+                {success && (
+                  <p>
+                    {voted
+                      ? translate(
+                          translations,
+                          'positive_feedback',
+                          'What did you like about [casinoTitle]? Let us know, send us a message'
+                        ).replace('[casinoTitle]', casinoTitle)
+                      : translate(
+                          translations,
+                          'negative_feedback',
+                          'Sorry about your experience at [casinoTitle]. What happened? send us a message'
+                        ).replace('[casinoTitle]', casinoTitle)}
+                    <Link to={contactUs}> {translate(translations, 'hereText', 'here')} </Link>.
+                  </p>
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+FeedBack.propTypes = {
+  pageId: PropTypes.number,
+  casinoTitle: PropTypes.string,
+  trueVotes: PropTypes.number,
+  falseVotes: PropTypes.number,
+  contactUs: PropTypes.string,
+};
+
+export default FeedBack;

package/src/components/atoms/feedback/template-one/template-one.stories.js

@@ -0,0 +1,46 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import TemplateOne from '.';
+
+export default {
+  title: 'Theme/Modules/Template Blocks/FeadBack Counter/Template One /Template One',
+  component: TemplateOne,
+  argTypes: {
+    title: 'Would you recommend (Casino Name)?',
+    pageId: 123,
+    trueVotes: 10,
+    falseVotes: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays authors cards',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateOne {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Would you recommend [operator_name]?',
+  pageId: 123,
+  trueVotes: 10,
+  falseVotes: 5,
+  casinoTitle: 'Wildz',
+};

package/src/components/atoms/feedback/template-one/template-one.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import FeedBack from '.';
+
+describe('FeedBack Component', () => {
+  it('renders correctly with initial state', () => {
+    const { getByText } = render(
+      <FeedBack pageId={123} casinoTitle="Wildz" trueVotes={10} falseVotes={5} />
+    );
+
+    expect(getByText('Would you recomend Wildz ?')).toBeInTheDocument();
+  });
+
+  it('handles like button click', async () => {
+    const { getByText, getByTestId } = render(
+      <FeedBack pageId={123} casinoTitle="Wildz" trueVotes={10} falseVotes={5} />
+    );
+
+    const likeButton = getByTestId('like-button');
+    await act(async () => {
+      fireEvent.click(likeButton);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Thanks for your feedback!')).toBeInTheDocument();
+    });
+  });
+
+  it('handles dislike button click', async () => {
+    const { getByText, getByTestId } = render(
+      <FeedBack pageId={123} casinoTitle="Wildz" trueVotes={10} falseVotes={5} />
+    );
+
+    const dislikeButton = getByTestId('dislike-button');
+    await act(async () => {
+      fireEvent.click(dislikeButton);
+    });
+
+    await waitFor(() => {
+      expect(getByText('Thanks for your feedback!')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/atoms/feedback/template-two/feedback.module.scss

@@ -0,0 +1,180 @@
+.feedbackBox {
+    border-radius: 10px;
+    background: #FFF;
+    box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.04), 0px 12px 16px -4px rgba(27, 27, 28, 0.07);
+    width: calc(100% - 3.2rem);
+    margin: 0 auto;
+    padding: 1.6rem;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    max-width:calc(var(--main-container-max) - 2.4rem);
+
+    @include min(tablet) {
+        display: grid;
+        grid-template-columns: 9.6rem 2.1fr .8fr 0.5fr;
+        grid-template-rows: repeat(2, auto);
+        align-items: center;
+    }
+
+    >img {
+        display: none;
+
+        @include min(tablet) {
+            display: block;
+            grid-column: 1;
+            grid-row: 1/3;
+            width: 8rem;
+            height: 8rem;
+            border-radius: .8rem;
+            margin-right: 1.6rem;
+        }
+    }
+}
+
+.title {
+    color: #1B1B1C;
+    font-size: 1.8rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.8rem;
+    margin-right: .8rem;
+
+    @include min(tablet) {
+        grid-column: 2/3;
+        grid-row: 1/2;
+        font-size: 1.8rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2.8rem;
+        margin-top: .5rem
+    }
+}
+
+.formBox {
+    @include flex-direction(row);
+    gap: .8rem;
+
+    @include min(tablet) {
+        grid-row: 1/3;
+    }
+}
+
+.button {
+    border-radius: 100px;
+    background: #ECECEC;
+    min-width: 5.6rem;
+    height: 5.6rem;
+    cursor: pointer;
+    @include flex-align(center, center);
+    @include min(tablet){
+        width: 6.4rem;
+        height: 6.4rem;
+    }
+
+    >svg {
+        width: 2.8rem;
+        height: 2.8rem;
+    }
+}
+
+.details {
+    border-radius: 4px;
+    background: var(--feedback-color-details, #D3DB34);
+    grid-column: 1/3;
+    color: #262629;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 2.2rem;
+    height: 3rem;
+    margin-top: 1.6rem;
+    @include flex-align(center, center);
+
+    @include min(tablet) {
+        @include flex-align(center, flex-start);
+        grid-column: 2/3;
+        grid-row: 2/3;
+        background-color: transparent;
+        margin-top: 0;
+        font-size: 1.4rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 2.2rem;
+    }
+}
+
+.like,
+.dislike {
+    background: var(--feedback-button, #136A43);
+
+    >svg {
+        fill: white;
+    }
+}
+
+.voted {
+    grid-column: 1/3;
+    margin-top: 2.4rem;
+    @include min(tablet){
+        grid-column: 2/3;
+        grid-row: 1/3;
+        margin-top: 0;
+    }
+
+    >span {
+        color: #1C1A28;
+        font-size: 1.8rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2.8rem;
+    }
+
+    >p {
+        color: #515156;
+        font-size: 1.4rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 2.2rem;
+        margin-top: 0.8rem;
+        @include min(tablet){
+            margin-top: 0;
+        }
+
+        >a {
+            margin-left: 0.5rem;
+        }
+    }
+}
+
+.userCount {
+    @include flex-direction(column);
+    color: #1B1B1C;
+    font-size: 1.8rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2.8rem;
+    display: none;
+
+    @include min(tablet) {
+        display: flex;
+        grid-column: 3;
+        grid-row: 1/3;
+        height: 100%;
+        margin-left: 4.8rem;
+        margin-right: 2.4rem;
+        @include flex-align(start, center);
+    }
+
+    >span {
+        color: #515156;
+        font-size: 1.6rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 2.6rem;
+    }
+}
+
+.showCounter {
+    display: flex;
+}