gatsby-matrix-theme 7.1.58 → 7.1.60

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [7.1.60](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.59...v7.1.60) (2022-09-21)
+
+
+### Bug Fixes
+
+* add colors variable and finish the logic ([adc0675](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/adc0675b18b6510ac62f1d4541576441b1a11727))
+* add recommend module ([582f052](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/582f052fdc98beca3775354108dd3d95e97cff27))
+* add translates key ([c9add58](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c9add58d24d08c36cfc9492a65c0bc0809c68250))
+* fix a bug ([3b01993](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3b01993f0b0dde7c2fab6cec970d266dbe5257d4))
+* make style ([3f0f144](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3f0f1445683a1d6e66c74be4fe459e02d650cb45))
+* test api ([c2dff0e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c2dff0ec2e39ddc49c2642d9da0a1bd190641c48))
+* update endpoint ([e38528d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e38528dd179dd272c7fe5b507ccdd98185a38211))
+* update my branch from master ([7781568](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7781568f3334fc3cea4bc951f4bc8f332f75155e))
+* use feedbackCounter label ([7351d3b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7351d3b6f4e67526fad569f58049b3db470c4f47))
+
+
+### Config
+
+* update core theme  with lates version ([c962b1c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c962b1c36dbbba4be72e506563f599e16aee4e00))
+
+
+* Merge branch 'tm-2815-do-you-recommend' into 'master' ([abb19b5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/abb19b57f6adb23383a55fdd6c172a811439cab7))
+* Merge branch 'master' into tm-2815-do-you-recommend ([53360a3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/53360a312667eea07b7a91ebcf9b83da8ccf564c))
+
+## [7.1.59](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.58...v7.1.59) (2022-09-12)
+
+
+### Bug Fixes
+
+* author cards ([5c50ffc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5c50ffc41dd719220cd867c18fb67325e750b39b))
+* newsletter form ([3133f28](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3133f28e896303b71974ddfd282022544b718d56))
+* update-core-version ([40fa9d5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/40fa9d5b399ff057eb3646fc0be0a04277059d8b))
+
+
+* Merge branch 'core-version-update' into 'master' ([edca65f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/edca65ffacfb50474bc8b6cf27a7e013e31433de))
+* Merge branch 'tm-3014-sign-up-form' into 'master' ([44aa2f7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/44aa2f7e7c56fcd50bff5d5ca1fa2f030b9d818e))
+
 ## [7.1.58](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.57...v7.1.58) (2022-09-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.58",
+  "version": "7.1.60",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "11.0.6",
+    "gatsby-core-theme": "11.0.8",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -16,7 +16,7 @@ import Author from '../../../../gatsby-core-theme/components/atoms/author';
 import BaseCard from '../base-card';
 import styles from './article-card.module.scss';
 
-const ArticleCard = ({ item, width, height, authorImage = true }) => {
+const ArticleCard = ({ item, width, height, authorImage = false }) => {
   const { author, created_at, title, path, banner } = item;
   const pictureSource = {
     webp: '../../../../../../../images/default-article.webp',

package/src/components/atoms/feedback/feedback.module.scss

@@ -0,0 +1,136 @@
+.container {
+  margin: 0 auto;
+  max-width: var(--main-container-max);
+}
+
+.feedbackBox {
+  margin: 0px 2.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 3.2rem 2rem;
+  background-color: var(--background-feedback-color, #f1f2f9);
+  text-align: center;
+  > span {
+    padding-bottom: 4rem;
+    display: flex;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 2.4rem;
+    line-height: 3.6rem;
+    color: var(--title-feedback-color, #1a1c1f);
+  }
+  .formBox {
+    display: flex;
+    justify-content: center;
+    .disabled{
+      background: #ddddddb4;
+      svg{
+        opacity: 0.4;
+      }
+    }
+ 
+    > span {
+      background: #ffffff;
+      border-radius: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      min-width: 5.2rem;
+      height: 5.2rem;
+      border: 2px solid #E3E6EF;
+      cursor: pointer;
+      @include flex-direction(column);
+      @include flex-align(center, center);
+      @include min(tablet) {
+        min-width: 9.2rem;
+        height: 9.2rem;
+      }
+
+      &.like {
+        background: var(--like-backgorund-feedback, #5ce482);
+        color: var(--like-color,#ffffff);
+      }
+
+      &.dislike {
+        background: var(--dislike-backgorund-feedback, #ff6860);
+        color: var(--dislike-feedback ,#ffffff);
+      }
+
+      > svg {
+        width: 3.6rem;
+        height: 3.6rem;
+      }
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      padding: 0rem 2rem;
+
+      .number {
+        font-weight: 600;
+        font-size: 2.4rem;
+        line-height: 4.8rem;
+        color: var(--number-feedback-color,#323c46);
+      }
+      .text {
+        font-weight: 600;
+        font-size: 1.4rem;
+        line-height: 30px;
+        color: var(--text-feedback-color,#323c46);
+      }
+      @include min(tablet) {
+        padding: 0rem 3.8rem;
+        .number {
+          font-size: 3.2rem;
+        }
+        .text {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
+
+  .details {
+    padding-top: 1.6rem;
+    text-align: center;
+    font-weight: 400;
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+    color: var(--detailsText-feedback-color,#323c46);
+  }
+  .voted {
+    display: flex;
+    padding-top: 2rem;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    > span {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 30px;
+      color:var(--thanksText-feedback-color,#1a1c1f);
+    }
+    .error{
+      color: var(--thanksText-feedback-color,red);
+    }
+    > p {
+      font-weight: 400;
+      font-size: 1.6rem;
+      line-height: 2.4rem;
+      color: var(--messageText-feedback-color,#323c46);
+      a{
+        margin-left: 0.4rem;
+        text-decoration: underline;
+      }
+    }
+    @include min(tablet){
+      padding-top: 4rem;
+      p{
+        font-size: 1.4rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+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 FeetBack = ({ 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);
+      });
+  }
+
+  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" />
+          </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" />
+          </span>
+        </div>
+        {voted === null ? (
+          <div className={styles.details}>{`${trueVotes} ${translate(
+            translations,
+            'of_feedback',
+            'of'
+          )} ${trueVotes + falseVotes} ${translate(
+            translations,
+            'user_recomend_feedback',
+            'users recommend this casino'
+          )} `}</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>
+  );
+};
+
+FeetBack.propTypes = {
+  pageId: PropTypes.number,
+  casinoTitle: PropTypes.string,
+  trueVotes: PropTypes.number,
+  falseVotes: PropTypes.number,
+  contactUs: PropTypes.string,
+};
+
+export default FeetBack;

package/src/components/molecules/newsletter/index.js

@@ -51,7 +51,7 @@ const Newsletter = ({ page, openBtnText = 'Unlock Bonuses', footer = false }) =>
             : styles.newsletter
         }
       >
-        <Form redirectUrl={redirectUrl} ppcPage={ppcPage} />
+        <Form redirectUrl={redirectUrl} ppcPage={ppcPage} footer={footer} />
         {!footer ? (
           <MdClose className={styles.closeBtn} onClick={() => setToggleNewsletter(false)} />
         ) : null}

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

@@ -28,6 +28,9 @@ const Main = ({ section = {}, pageContext = {}, showNewsletter = true }) => {
     ? loadable(() => import(`gatsby-core-theme/src/components/atoms/not-found`))
     : null;
   const AuthorBox = page.author_id ? loadable(() => import(`~atoms/author-box`)) : null;
+  const Feedback =
+    page?.sections?.main?.feedbackCounter &&
+    loadable(() => import(`../../../../components/atoms/feedback`));
 
   return (
     <main className={styles.modulePage}>
@@ -41,6 +44,14 @@ const Main = ({ section = {}, pageContext = {}, showNewsletter = true }) => {
       {showNewsletter && <Newsletter page={page} />}
       {NewsletterSuccess && showNewsletter && <NewsletterSuccess />}
       {AuthorBox && <AuthorBox author={page.author} page={page} />}
+      {Feedback && (
+        <Feedback
+          trueVotes={page?.true_votes}
+          falseVotes={page?.false_votes}
+          pageId={page?.id}
+          casinoTitle={page?.title}
+        />
+      )}
     </main>
   );
 };

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.eee2bd5c.iframe.bundle.js"></script><script src="252.a9c1a24e.iframe.bundle.js"></script><script src="main.bea31413.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.eee2bd5c.iframe.bundle.js"></script><script src="252.a9c1a24e.iframe.bundle.js"></script><script src="main.d8589f9c.iframe.bundle.js"></script></body></html>