gatsby-matrix-theme 7.0.4 → 7.1.2

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+## [7.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.1...v7.1.2) (2022-05-18)
+
+
+### Config
+
+* update core theme ([7f208e4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f208e4045fbf260eab56ac1bfe261d4c5c4ee1c))
+
+
+* Merge branch 'update-core-version' into 'master' ([bf2ae7f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bf2ae7f51c1a321a5fc9aa62758a0ffcbfec1414))
+
+## [7.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.0...v7.1.1) (2022-05-18)
+
+
+### Bug Fixes
+
+* featured image for google crawler ([4978292](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/49782922e7f106f3306b0781c036c2500b238bbd))
+* updated to latest core version ([47dc76f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/47dc76f2dfd6aa6dd411815d4e337112f4cec183))
+
+
+* Merge branch 'tm-2782-featured-image-fix' into 'master' ([23d42f8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/23d42f877b346d9ed0a20748e2f4e84ff606f396))
+
+# [7.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.0.4...v7.1.0) (2022-05-18)
+
+
+### Bug Fixes
+
+* add design ([d91051e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d91051ebf129f4d38f15c15755a91bdc237bfd4a))
+* add form module to make it reusable ([d195203](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d195203b93fcd8174b0dafc660c13478973ae520))
+* create an object for string props ([6667979](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/66679796955539989478575e9f4d525d6e8f2045))
+* make file more reusable ([1278885](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/12788854e6e493b48863559ebea42cf96eb2577a))
+* the undefined returning ([6519f88](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6519f88f67dd399a21e5aaff2c87f867549ca037))
+* used button component ([7fcbbdc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7fcbbdcc3b6dea27ab1ab2007e9250c7553112c6))
+
+
+* Merge branch 'tm-2563-sign-up-form-and-bacom' into 'master' ([d750bdb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d750bdb4151657211afeda86afee206fa0d0ae7b))
+* Merge branch 'tm-2895-undefined-bonus-one-linter-for-il-pop-up' into 'master' ([3e30db5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3e30db549ad84a4111f6a7d12a67f33ee52e6b19))
+
+
+### Features
+
+* update singup ([eb49db1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eb49db11da3bfbbf97f72ca0ce556162f09bf978))
+* update singup, made it more reusable ([e43e06b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e43e06b177bf11ec32f21744289314092c916349))
+
 ## [7.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.0.3...v7.0.4) (2022-05-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.0.4",
+  "version": "7.1.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -29,7 +29,7 @@
     "react": "^17.0.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^7.0.3"
+    "gatsby-core-theme": "^7.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/cards/base-card/base-card.module.scss

@@ -40,8 +40,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    .cardBackground,
-    .overlay {
+    .cardBackground {    
       width: 100%;
       height: 100%;
       border-radius: var(--border-radius);
@@ -50,8 +49,10 @@
       top: 0;
       object-fit: cover;
     }
-    .overlay {
-      background: linear-gradient(360deg, #000000 3.59%, rgba(0, 0, 0, 0.0001) 100%);
+
+    > img {
+      width: 100%;
+      height: 100%;
     }
   }
   .cardWrapper {

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

@@ -1,8 +1,8 @@
 import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import Image from 'gatsby-core-theme/src/hooks/gatsby-img';
-
+import LazyImage from '~hooks/lazy-image';
 import styles from './base-card.module.scss';
 
 const BaseCard = ({
@@ -14,11 +14,16 @@ const BaseCard = ({
   backgroundImage = null,
 }) => {
   const { path, title } = item;
-  const imgContent = (
-    <>
-      <Image filename={backgroundImage} alt={title} />
-      <div className={styles.overlay} />
-    </>
+  const imgContent = backgroundImage ? (
+    <LazyImage
+      src={`../../../../../../images/${backgroundImage}`}
+      alt={title}
+      width={321}
+      height={360}
+      target="_blank"
+    />
+  ) : (
+    <></>
   );
 
   return (

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

@@ -25,7 +25,7 @@ const OperatorCard = ({
   const reviewPath = path || relation.path;
   const status = relation?.status;
   const isInactive = status === 'inactive';
-  const backgroundImage = number === 1 ? 'featuredCasino' : null;
+  const backgroundImage = number === 1 ? 'default-article.webp' : null;
   const logUrlObject = relation?.logo_url_object;
   const { translations } = useContext(Context) || {};
   const StarRating = useOneStarRating

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

@@ -5,6 +5,7 @@ import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import { getAltText, imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
+import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import LazyImage from '~hooks/lazy-image';
 import Link from '~hooks/link';
 import styles from './popup-card.module.scss';
@@ -21,12 +22,7 @@ const PopupCard = ({
 
   const { logo_url: logoUrl, name } = item;
   const oneLiner = item?.one_liners?.main?.one_liner;
-  const secondLiner = item?.one_liners?.secondary?.one_liner;
   const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
-  const [one, second] = (oneLiner?.includes('+') && oneLiner?.split('+')) || [
-    oneLiner,
-    secondLiner,
-  ];
   const logUrlObject = item?.logo_url_object;
 
   return (
@@ -42,8 +38,7 @@ const PopupCard = ({
         {showName && <p className={styles.name}>{name}</p>}
       </div>
       <div className={styles.textContainer}>
-        <p className={styles.primaryText}>{one}</p>
-        <p className={styles.secondaryText}>{`+${second}`}</p>
+        <Bonus item={item} tracker={tracker} />
       </div>
       <div className={styles.buttonContainer}>
         <OperatorCta

package/src/components/atoms/newsletter/form/index.js

@@ -4,22 +4,41 @@ import React, { useRef, useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import PrivacyandSuccess from '../privacy&button/index';
 import styles from './newsletter-form.module.scss';
 
 const NewsletterForm = ({
-  placeholderName = 'Name',
-  placeholderEmail = 'Email',
-  buttonText = 'Submit',
+  handleApi,
+  mainText,
+  subscribeText,
+  setErr,
   redirectUrl,
+  formText = {
+    placeholderName: 'John Doe',
+    placeholderEmail: 'johndoe@email.com',
+    placeholderPhoneNumber: '123456789',
+    buttonText: 'Submit',
+    textAboveEmail: 'Email address',
+    textAboveName: 'Your name',
+    textAbovePhoneNumber: 'Phone number',
+    mainText,
+    subscribeText,
+    redirectUrl,
+  },
 }) => {
+  // eslint-disable-next-line react/destructuring-assignment
+
   const form = useRef(null);
   const [ip, setIP] = useState('');
   const [error, setError] = useState(false);
+  const [toggleSubscribe, setToggleSubscribe] = useState(false);
   const { translations } = useContext(Context) || {};
 
   const validationForm = (e) => {
     let nameValidate = false;
     let emailValidate = false;
+    let numberValidate = false;
+
     if (!e.name.value && e.name.value.trim() === '') {
       nameValidate = false;
       e.name.classList.add(styles.error);
@@ -35,7 +54,17 @@ const NewsletterForm = ({
       emailValidate = true;
       e.email.classList.remove(styles.error);
     }
-    if (nameValidate && emailValidate) {
+
+    if (!e.phone.value && e.phone.value.trim() === '') {
+      numberValidate = false;
+      e.phone.classList.add(styles.error);
+    } else {
+      numberValidate = true;
+      e.phone.classList.remove(styles.error);
+    }
+
+    if (nameValidate && emailValidate && numberValidate) {
+      setToggleSubscribe(true);
       return true;
     }
     return false;
@@ -59,7 +88,6 @@ const NewsletterForm = ({
   const bacomApi = async (name, email) => {
     // eslint-disable-next-line no-bitwise
     const timestamp = (Date.now() / 1000) | 0;
-
     await fetch(
       `https://bacom.dk/subscribe/gig/?firstname=${name}&user_ip=${ip}&ref_name=${process.env.BACOM_REF_NAME}&ref_url=${process.env.BACOM_REF_URL}&timestamp=${timestamp}&country=${process.env.COUNTRY}&email=${email}`,
       {
@@ -76,28 +104,61 @@ const NewsletterForm = ({
     );
   };
 
+  if (setErr) {
+    setError(true);
+  }
+
   const handelSubmit = (e) => {
     e.preventDefault();
     const { elements } = e.target;
     if (validationForm(elements)) {
-      bacomApi(elements.name.value, elements.email.value);
+      handleApi
+        ? handleApi(elements.name.value, elements.email.value, ip)
+        : bacomApi(elements.name.value, elements.email.value);
     }
   };
 
   return (
     <>
+      {toggleSubscribe ? (
+        <h1>Thank you</h1>
+      ) : (
+        <h1 className={styles.maintext}>{formText.mainText}</h1>
+      )}
+      {toggleSubscribe ? <p dangerouslySetInnerHTML={{ __html: formText.subscribeText }} /> : null}
       {!error ? (
         <form ref={form} onSubmit={handelSubmit}>
-          <input className={styles.input} placeholder={placeholderName} type="text" name="name" />
+          {formText.textAboveName ? (
+            <p className={styles.textAboveInput}>{formText.textAboveName}</p>
+          ) : null}
+
+          <input
+            className={styles.input}
+            placeholder={formText.placeholderName}
+            type="text"
+            name="name"
+          />
+          {formText.textAboveEmail ? (
+            <p className={styles.textAboveInput}>{formText.textAboveEmail}</p>
+          ) : null}
+
           <input
             className={styles.input}
-            placeholder={placeholderEmail}
+            placeholder={formText.placeholderEmail}
             type="email"
             name="email"
           />
-          <button className={styles.button} type="submit">
-            {buttonText}
-          </button>
+          {formText.textAbovePhoneNumber ? (
+            <p className={styles.textAboveInput}>{formText.textAbovePhoneNumber}</p>
+          ) : null}
+
+          <input
+            className={styles.input}
+            placeholder={formText.placeholderPhoneNumber}
+            type="tel"
+            name="phone"
+          />
+          <PrivacyandSuccess privacyText={formText.privacyText} />
         </form>
       ) : (
         <span>
@@ -112,9 +173,22 @@ const NewsletterForm = ({
   );
 };
 NewsletterForm.propTypes = {
-  placeholderName: PropTypes.string,
-  placeholderEmail: PropTypes.string,
-  buttonText: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  formText: (PropTypes.formText = {
+    placeholderName: PropTypes.string,
+    placeholderEmail: PropTypes.string,
+    buttonText: PropTypes.string,
+    placeholderPhoneNumber: PropTypes.string,
+    textAboveEmail: PropTypes.string,
+    textAboveName: PropTypes.string,
+    textAbovePhoneNumber: PropTypes.string,
+    privacyText: PropTypes.string,
+  }),
+  handleApi: PropTypes.func,
+  setErr: PropTypes.bool,
+  mainText: PropTypes.string,
+  subscribeText: PropTypes.string,
   redirectUrl: PropTypes.string,
 };
+
 export default NewsletterForm;

package/src/components/atoms/newsletter/form/newsletter-form.module.scss

@@ -1,29 +1,20 @@
-form{
-    @include min(tablet){
-        display: flex;
-    }
-    .input{
-        padding: 1.2rem;
-        border: 0;
-        border-radius: .5rem;
-        background-color: #f3f2f2;
-        font-size: 1.4rem;
-        margin-right: 1rem;
-        width: 100%;
-        margin-bottom: 1rem;
-        height: 4.4rem;
-    }
-    .button{
-        color: #fff;
-        background: #ff0036;
-        width: 100%;
-        padding: .6rem 0;
-        font-size: 1.5rem;
-        min-width: 25.6rem;
-        border-radius: 0.25rem;
-        height: 4.4rem;
-    }
-    .error{
-        border:1px solid #ff0036;
-    }
-}
+form {
+  @include min(tablet) {
+    display: flex;
+    flex-direction: column;
+  }
+  .input {
+    padding: 1.2rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background-color: #f3f2f2;
+    font-size: 1.4rem;
+    margin-right: 1rem;
+    width: 100%;
+    margin-bottom: 1rem;
+    height: 4.4rem;
+  }
+  .error {
+    border: 1px solid #ff0036;
+  }
+}

package/src/components/atoms/newsletter/privacy&button/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'gatsby-core-theme/src/components/atoms/button';
+import styles from './newsletter-privacy&button.module.scss';
+
+const PrivacyandSuccess = ({ privacyText }) => (
+  <div className={styles.display}>
+    {privacyText ? (
+      <p className={styles.privacytext} dangerouslySetInnerHTML={{ __html: privacyText }} />
+    ) : null}
+    <Button className={styles.button} btnText="Submit" isButton />
+  </div>
+);
+
+PrivacyandSuccess.propTypes = {
+  privacyText: PropTypes.string,
+};
+
+export default PrivacyandSuccess;

package/src/components/atoms/newsletter/privacy&button/newsletter-privacy&button.module.scss

@@ -0,0 +1,15 @@
+.display {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.button {
+  color: #fff;
+  background: #ff0036;
+  width: 100%;
+  padding: 0.6rem 0;
+  font-size: 1.5rem;
+  min-width: 25.6rem;
+  border-radius: 0.25rem;
+  height: 4.4rem;
+}

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

@@ -6,7 +6,6 @@ import React, { useState, useRef } from 'react';
 import { MdClose } from 'react-icons/md';
 import PropTypes from 'prop-types';
 import { debounce } from 'gatsby-core-theme/src/helpers/scroll';
-
 import { getUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Button from '../../atoms/newsletter/toggle-button/index';
 import Form from '../../atoms/newsletter/form/index';
@@ -17,7 +16,11 @@ const Newsletter = ({
   mainText = 'You get more than 405 free spins',
   subscribeText = 'Subscribe to our newsletter and get more than 405 free spins instantly.',
   placeholderName = 'Name',
+  textAboveName = 'Name',
   placeholderEmail = 'Email',
+  textAboveEmail = 'Something to be added',
+  placeholderPhoneNumber = '00000000',
+  textAbovePhoneNumber = 'Something to be added',
   privacyText = 'By subscribing, you confirm that you are over 18 years of age and that you accept our',
   openBtnText = 'FÅ 405 FREE SPINS UMIDDELBART',
   buttonText = 'Hent dine freespins',
@@ -42,7 +45,7 @@ const Newsletter = ({
         ) {
           setToggleOnScroll(true);
         } else {
-          // setToggleNewsletter(false);
+          setToggleNewsletter(false);
           setToggleOnScroll(false);
         }
       }
@@ -81,7 +84,11 @@ const Newsletter = ({
         {subscribeText ? <p className={styles.subscribe}>{subscribeText}</p> : null}
         <Form
           placeholderName={placeholderName}
+          textAboveName={textAboveName}
           placeholderEmail={placeholderEmail}
+          textAboveEmail={textAboveEmail}
+          placeholderPhoneNumber={placeholderPhoneNumber}
+          textAbovePhoneNumber={textAbovePhoneNumber}
           buttonText={buttonText}
           redirectUrl={redirectUrl}
         />
@@ -100,10 +107,14 @@ Newsletter.propTypes = {
   mainText: PropTypes.string,
   subscribeText: PropTypes.string,
   placeholderName: PropTypes.string,
+  textAboveName: PropTypes.string,
   placeholderEmail: PropTypes.string,
   privacyText: PropTypes.string,
   openBtnText: PropTypes.string,
   buttonText: PropTypes.string,
+  textAboveEmail: PropTypes.string,
+  placeholderPhoneNumber: PropTypes.string,
+  textAbovePhoneNumber: PropTypes.string,
   page: PropTypes.shape({
     path: PropTypes.string,
     template: PropTypes.string,
@@ -111,5 +122,4 @@ Newsletter.propTypes = {
   hideButtonOnScroll: PropTypes.bool,
   footer: PropTypes.bool,
 };
-
 export default Newsletter;

package/src/gatsby-core-theme/components/atoms/bonus/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getBonus } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './bonus.module.scss';
 
-export default function Bonus({ item, tracker }) {
-  const oneLiner = getBonus(tracker, item);
+export default function Bonus({ item }) {
+  const oneLiner = item?.one_liners?.main;
   const isInoperative = item?.status === 'inactive';
   if (!oneLiner) {
     return <></>;
@@ -30,6 +29,6 @@ export default function Bonus({ item, tracker }) {
 Bonus.propTypes = {
   item: PropTypes.shape({
     status: PropTypes.string,
+    one_liners: PropTypes.string,
   }),
-  tracker: PropTypes.string,
 };