gatsby-matrix-theme 7.1.13 → 7.1.16

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [7.1.16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.15...v7.1.16) (2022-05-30)
+
+
+### Bug Fixes
+
+* updated to latest core version ([7e01099](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7e01099905afd0064226d175a60498ff14bd47fc))
+
+## [7.1.15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.14...v7.1.15) (2022-05-27)
+
+
+### Bug Fixes
+
+* add translate for toggle button ([0464483](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0464483c2ac776aee2b9d461a72c737b6d8fee6b))
+* fixed logic of anchor ([0c45039](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0c450393bfe8c9deb00569115773367efc48558d))
+* udpate variantone to expect prop ([bbac40d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bbac40d3f5242b1a5443a544248f3accf2da0c5c))
+* update showLaunchDate ([9eaf100](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9eaf1003e7ab4fb4d75e0be49c67df00c6117210))
+* update variant one and its style to match il and nsa ([b605272](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b605272235cfe5aacbcbfd133b853873f4179c87))
+
+
+* Merge branch 'tm-2062-change-toplist-logo' into 'master' ([fee0d3e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fee0d3e2962b5e834e3ec1468dd7e59c233b52a4))
+* Merge branch 'tm-2894-popup-design' into 'master' ([aa0d98c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa0d98c173162ad6c16893de006ea2770c3873b2))
+* Merge branch 'tm-2907-anchor' into 'master' ([720818e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/720818eec7ab3754550f881b3e0f7b6c23c9fcab))
+
+## [7.1.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.13...v7.1.14) (2022-05-26)
+
+
+### Bug Fixes
+
+* add privacyText ([e54910f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e54910f1f2dfab1c611d7615f263e22ac2bd46f0))
+* clean up the code ([8363435](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/83634355e60027bf4cf5e5d50194cd9e0de54eee))
+* cleanup ([be930bb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/be930bb11c4d595b0942152bc61816be895fc5ee))
+* fix bug ([43d433e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/43d433e7f89299d88cef87e59d8977605a03a292))
+* fix the logic ([1928992](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1928992b62f8688afc9480390e5706e2ae073fd7))
+* fix validation ([083924d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/083924d90aed68d03cc2b7bd975a968df374d74f))
+* validation email ([6d8da87](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6d8da87172a1539fcf463c8ca11700d5e0ec1baf))
+
+
+* Merge branch 'jetmir/fixLogicNewsletter' into 'master' ([19cd274](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/19cd274d4e4f8d1173d10e8c6b1c955451eccd6d))
+
 ## [7.1.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.12...v7.1.13) (2022-05-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.13",
+  "version": "7.1.16",
   "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.7"
+    "gatsby-core-theme": "^7.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

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

@@ -10,12 +10,13 @@ import styles from './newsletter-form.module.scss';
 const NewsletterForm = ({
   handleApi,
   setErr,
+  setLogading,
   redirectUrl,
-  privacyText,
+  privacyText = 'By subscribing, you confirm that you are over 18 years of age and that you accept our',
   formText = {
     placeholderName: 'John Doe',
     placeholderEmail: 'johndoe@email.com',
-    placeholderPhoneNumber: '123456789',
+    placeholderPhoneNumber: '08XXXXXXXX',
     buttonText: 'Submit',
     thankYouText: null,
     textAboveEmail: 'Email address',
@@ -23,8 +24,6 @@ const NewsletterForm = ({
     textAbovePhoneNumber: 'Phone number',
     mainText: 'You get more than 405 free spins',
     subscribeText: 'Subscribe to our newsletter and get more than 405 free spins instantly.',
-    redirectUrl,
-    privacyText,
   },
 }) => {
   // eslint-disable-next-line react/destructuring-assignment
@@ -32,7 +31,7 @@ const NewsletterForm = ({
   const form = useRef(null);
   const [ip, setIP] = useState('');
   const [error, setError] = useState(false);
-  const [toggleSubscribe, setToggleSubscribe] = useState(false);
+  const [loading, setLoading] = useState(false);
   const { translations } = useContext(Context) || {};
 
   const validationForm = (e) => {
@@ -48,7 +47,7 @@ const NewsletterForm = ({
       e.name.classList.remove(styles.error);
     }
 
-    if (!e.email.value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) {
+    if (!e.phone?.value && !e.email.value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) {
       emailValidate = false;
       e.email.classList.add(styles.error);
     } else {
@@ -56,7 +55,7 @@ const NewsletterForm = ({
       e.email.classList.remove(styles.error);
     }
 
-    if (e.phone) {
+    if (e.phone && !e.email?.value) {
       if (!e.phone.value && e.phone.value.trim() === '') {
         numberValidate = false;
         e.phone.classList.add(styles.error);
@@ -67,7 +66,6 @@ const NewsletterForm = ({
     }
 
     if (nameValidate && (emailValidate || numberValidate)) {
-      setToggleSubscribe(true);
       return true;
     }
     return false;
@@ -91,6 +89,7 @@ const NewsletterForm = ({
   const bacomApi = async (name, email) => {
     // eslint-disable-next-line no-bitwise
     const timestamp = (Date.now() / 1000) | 0;
+    setLoading(true);
     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}`,
       {
@@ -103,6 +102,7 @@ const NewsletterForm = ({
     ).then((res) =>
       res.text().then((text) => {
         text === 'OK' ? (window.location.href = redirectUrl) : setError(true);
+        setLoading(false);
       })
     );
   };
@@ -123,49 +123,54 @@ const NewsletterForm = ({
 
   return (
     <>
-      {!toggleSubscribe && <p className={styles.maintext}>{formText.mainText}</p>}
-      {!toggleSubscribe && (
-        <p
-          dangerouslySetInnerHTML={{ __html: formText.subscribeText }}
-          className={styles.subscribe}
-        />
-      )}
-      {!error && !toggleSubscribe ? (
-        <form ref={form} onSubmit={handelSubmit}>
-          {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={formText.placeholderEmail}
-            type="email"
-            name="email"
+      {!error ? (
+        <>
+          <p className={styles.maintext}>{formText.mainText}</p>
+          <p
+            dangerouslySetInnerHTML={{ __html: formText.subscribeText }}
+            className={styles.subscribe}
           />
-          {formText.textAbovePhoneNumber ? (
-            <p className={styles.textAboveInput}>{formText.textAbovePhoneNumber}</p>
-          ) : null}
 
-          {formText.placeholderPhoneNumber && (
+          <form ref={form} onSubmit={handelSubmit}>
+            {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={formText.placeholderPhoneNumber}
-              type="tel"
-              name="phone"
+              placeholder={formText.placeholderEmail}
+              type="email"
+              name="email"
+            />
+            {formText.textAbovePhoneNumber ? (
+              <p className={styles.textAboveInput}>{formText.textAbovePhoneNumber}</p>
+            ) : null}
+
+            {formText.placeholderPhoneNumber && (
+              <input
+                className={styles.input}
+                placeholder={formText.placeholderPhoneNumber}
+                type="tel"
+                name="phone"
+              />
+            )}
+            <PrivacyandSuccess
+              loading={setLogading || loading}
+              btnText={formText.buttonText}
+              privacyText={privacyText}
             />
-          )}
-          <PrivacyandSuccess btnText={formText.buttonText} privacyText={formText.privacyText} />
-        </form>
+          </form>
+        </>
       ) : (
         <span>
           {translate(
@@ -194,6 +199,7 @@ NewsletterForm.propTypes = {
   setErr: PropTypes.bool,
   redirectUrl: PropTypes.string,
   privacyText: PropTypes.string,
+  setLogading: PropTypes.bool,
 };
 
 export default NewsletterForm;

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

@@ -3,18 +3,19 @@ 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, btnText }) => (
+const PrivacyandSuccess = ({ privacyText, btnText, loading }) => (
   <div className={styles.display}>
     {privacyText ? (
       <p className={styles.privacytext} dangerouslySetInnerHTML={{ __html: privacyText }} />
     ) : null}
-    <Button className={styles.button} btnText={btnText} isButton />
+    <Button disabled={loading} className={styles.button} btnText={btnText} isButton />
   </div>
 );
 
 PrivacyandSuccess.propTypes = {
   privacyText: PropTypes.string,
   btnText: PropTypes.string,
+  loading: PropTypes.bool,
 };
 
 export default PrivacyandSuccess;

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

@@ -11,21 +11,7 @@ import Button from '../../atoms/newsletter/toggle-button/index';
 import Form from '../../atoms/newsletter/form/index';
 import styles from './newsletter.module.scss';
 
-const Newsletter = ({
-  page,
-  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',
-  footer = false,
-}) => {
+const Newsletter = ({ page, openBtnText = 'Unlock Exclusive Bonuses', footer = false }) => {
   const [toggleNewsetter, setToggleNewsletter] = useState(false);
   const redirectUrl =
     page?.path === '/'
@@ -56,19 +42,7 @@ const Newsletter = ({
             : styles.newsletter
         }
       >
-        <Form
-          placeholderName={placeholderName}
-          textAboveName={textAboveName}
-          placeholderEmail={placeholderEmail}
-          textAboveEmail={textAboveEmail}
-          placeholderPhoneNumber={placeholderPhoneNumber}
-          textAbovePhoneNumber={textAbovePhoneNumber}
-          buttonText={buttonText}
-          redirectUrl={redirectUrl}
-          privacyText={privacyText}
-          mainText={mainText}
-          subscribeText={subscribeText}
-        />
+        <Form redirectUrl={redirectUrl} />
         {!footer ? (
           <MdClose className={styles.closeBtn} onClick={() => setToggleNewsletter(false)} />
         ) : null}
@@ -78,17 +52,7 @@ const Newsletter = ({
 };
 
 Newsletter.propTypes = {
-  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,
-  mainText: PropTypes.string,
-  subscribeText: PropTypes.string,
   page: PropTypes.shape({
     path: PropTypes.string,
     template: PropTypes.string,

package/src/components/molecules/toplist/row/variant-one.js

@@ -28,13 +28,14 @@ export default function Row({
   layout = 'list',
   number = 1,
   isPPC = false,
+  showLaunchDate = true,
 }) {
   const itemName = item.name;
   const itemRating = item.rating;
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || '/';
-  const logoUrl = item.logo_url;
   const pros = item.extra_fields?.pro_1 || item.extra_fields?.pro_2 || item.extra_fields?.pro_3;
   const { translations } = useContext(Context) || {};
+  const tandcEnabled = item?.extra_fields?.terms_and_conditions_text_enabled === '1';
   let sellingPoints = item.selling_points;
   if (pros) {
     sellingPoints = [
@@ -45,18 +46,24 @@ export default function Row({
   }
   const trackerType = tracker.toLowerCase().replace(' ', '_');
   const prettyLink = prettyTracker(item, trackerType);
+  const hasRibbon = getExtraField(item.extra_fields, 'ribbon_text');
+  const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
+
   const launchDate = getLaunchDate(item.founded);
-  const logUrlObject = item?.logo_url_object;
 
   return (
-    <div className={`${styles.row} ${layout === 'grid' ? styles.grid : ''}`}>
+    <div
+      className={`${styles.row} ${layout === 'grid' ? styles.grid : ''} ${
+        showLaunchDate ? styles.launchDate : ''
+      } ${!tandcEnabled ? styles.rowNoTandC : ''}`}
+    >
       {layout === 'grid' && (
         <div className={`${styles.numbers} ${styles[`num_${number}`]}`} id={`num_${number}`}>
           {number}
         </div>
       )}
-      <div className={styles.ribbon}>
-        {getExtraField(item.extra_fields, 'ribbon_text') && (
+      {hasRibbon && (
+        <div className={styles.ribbon}>
           <Link to={reviewPath} className="toplist-variant-one-gtm">
             <Label
               title={getExtraField(item.extra_fields, 'ribbon_text')}
@@ -67,8 +74,8 @@ export default function Row({
               }
             />
           </Link>
-        )}
-      </div>
+        </div>
+      )}
 
       <div className={styles.casinoDetails}>
         <a
@@ -79,10 +86,13 @@ export default function Row({
           className="toplist-variant-one-gtm logo-cta"
         >
           <LazyImage
-            alt={getAltText(logUrlObject, itemName)}
-            width={128}
-            height={40}
-            src={imagePrettyUrl(logoUrl, 128, 60)}
+            alt={getAltText(imageObject, item.name)}
+            src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 80).replace(
+              'filters:format(webp)/',
+              ''
+            )}
+            width={80}
+            height={800}
           />
         </a>
         <div>
@@ -94,53 +104,53 @@ export default function Row({
           >
             {itemName}
           </a>
-          <StarRating numOfStars={5} rating={itemRating} />
+          <StarRating numOfStars={5} rating={itemRating} showLabel />
+          {!isPPC && (
+            <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
+              {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
+            </Link>
+          )}
         </div>
       </div>
-      <div className={styles.bonus}>
-        <a
-          href={prettyLink}
-          target="_blank"
-          rel="noreferrer"
-          className="toplist-variant-one-gtm bonus-cta"
-        >
-          <Bonus item={item} tracker={oneliner} />
-        </a>
-        {!isPPC && (
-          <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
-            {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
-          </Link>
-        )}
-      </div>
-      <div className={styles.pros}>
-        <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
-      </div>
-      <div className={styles.launchDate}>
-        {launchDate && (
-          <>
-            <p>{translate(translations, 'launch_date', 'Launch Date')}</p>
-            <p>{launchDate}</p>
-          </>
-        )}
-      </div>
-      <div className={styles.cta}>
-        <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
-        {!isPPC && (
-          <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
-            {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
-          </Link>
-        )}
-      </div>
-      <div className={styles.tandc}>
-        {item?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
-          <Tnc onlyMobile={layout === 'list'} operator={item} />
+
+      <a
+        href={prettyLink}
+        target="_blank"
+        rel="noreferrer"
+        className={`toplist-variant-one-gtm bonus-cta ${styles.bonus} ${
+          showLaunchDate ? styles.bonusLaunch : ''
+        } ${hasRibbon ? styles.withRibbon : ''}`}
+      >
+        <Bonus item={item} tracker={oneliner} />
+        {showLaunchDate && (
+          <span>
+            {translate(translations, 'launch_date', 'Launch Date')}: {launchDate}
+          </span>
         )}
-      </div>
+      </a>
+      <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
+
+      {showLaunchDate && (
+        <div className={styles.launchDate}>
+          {launchDate && (
+            <>
+              <p className={styles.launchDateLabel}>
+                {translate(translations, 'launch_date', 'Launch Date')}
+              </p>
+              <p>{launchDate}</p>
+            </>
+          )}
+        </div>
+      )}
+      <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
+
+      {tandcEnabled && <Tnc onlyMobile={layout === 'list'} operator={item} />}
     </div>
   );
 }
 
 Row.propTypes = {
+  showLaunchDate: PropTypes.bool,
   tracker: PropTypes.string,
   oneliner: PropTypes.string,
   layout: PropTypes.oneOf(['list', 'grid']),
@@ -150,7 +160,6 @@ Row.propTypes = {
     name: PropTypes.string,
     logo_url: PropTypes.string,
     rating: PropTypes.string,
-    logo_url_object: PropTypes.shape({}),
     selling_points: PropTypes.arrayOf(PropTypes.string),
     review_link: PropTypes.string,
     one_liners: PropTypes.shape({
@@ -166,6 +175,11 @@ Row.propTypes = {
       pro_2: PropTypes.string,
       pro_3: PropTypes.string,
     }),
+    // eslint-disable-next-line react/forbid-prop-types
+    standardised_logo_url_object: PropTypes.object,
+    // eslint-disable-next-line react/forbid-prop-types
+    logo_url_object: PropTypes.object,
+
     bonus: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     relation: PropTypes.shape({
       rating: PropTypes.string,