gatsby-matrix-theme 7.1.13 → 7.1.14

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [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.14",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

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/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.7aedec23.iframe.bundle.js"></script><script src="40.ddf44139.iframe.bundle.js"></script><script src="main.6d5b234e.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.7aedec23.iframe.bundle.js"></script><script src="40.ddf44139.iframe.bundle.js"></script><script src="main.18c621ed.iframe.bundle.js"></script></body></html>