Merge pull request #190 from Web-Dev-Path/bug/MailChimp-not-saving-name

Fixing Mailchimp not saving name. Refactor reCaptcha file structure.

CHANGELOG.md

@@ -119,4 +119,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Lower the file names of GitHub.svg, LikedIn.svg, and YouTube.svg.
 - Fixed Google Analytics 4 Integration
 - Fixed CHANGELOG.md inconsistency
+- Contact and Subscribe forms are saving Name on Mailchimp
 - Fixed Who We Are section on mobile.

components/ContactUsForm/index.js → components/ContactUs/ContactUsForm/index.js

@@ -1,39 +1,10 @@
 import { useForm } from 'react-hook-form';
-import { useRef } from 'react';
-import MailchimpSubscribe from 'react-mailchimp-subscribe';
-import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { SubmitButton } from '@/components/buttons/SubmitButton';
 import S from './styles';
 
-export const ContactUsFormSubscribe = ({ setMsg }) => {
-  return (
-    <MailchimpSubscribe
-      url={process.env.NEXT_PUBLIC_MAILCHIMP_URL}
-      render={({ subscribe, status, message }) => {
-        console.info(`MailChimp (contact form): ${status} - ${message}`);
-        return (
-          <>
-            <ContactUsForm
-              subscribe={formData => subscribe(formData)}
-              setResponseMessage={setMsg}
-            />
-            {status === 'error' && (
-              <S.ResponseOnErrorMsg>
-                {`Newsletter subscription error: ${message}`}
-              </S.ResponseOnErrorMsg>
-            )}
-          </>
-        );
-      }}
-    />
-  );
-};
-
-function ContactUsForm({ subscribe, setResponseMessage }) {
-  const contactReCaptchaRef = useRef();
-
+function ContactUsForm({ subscribe, setResponseMessage, getReCaptchaToken }) {
   const {
     register,
     handleSubmit,
@@ -51,10 +22,14 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
   async function onSubmit(data) {
     setResponseMessage(['Submitting...']);
 
-    contactReCaptchaRef.current.reset();
-    const gReCaptchaToken = await contactReCaptchaRef.current.executeAsync();
+    const gReCaptchaToken = await getReCaptchaToken();
 
-    const res = await fetch('/api/contact', {
+    if (!gReCaptchaToken) {
+      setResponseMessage(['Please, refresh your screen and try it again.']);
+      return;
+    }
+
+    const res = await fetch('/api/validateReCaptcha', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -83,7 +58,10 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
     }
 
     if (data.Subscribe) {
-      subscribe({ EMAIL: data.Email });
+      subscribe({
+        EMAIL: data.Email,
+        MERGE1: data.Name,
+      });
     }
     reset();
   }
@@ -167,14 +145,10 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
             Subscribe to our DevNews!
           </S.SubscribeWrapper>
           <SubmitButton label='Submit' disabled={isSubmitting} />
-
-          <ReCAPTCHA
-            ref={contactReCaptchaRef}
-            size='invisible'
-            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
-          />
         </S.Form>
       </Container>
     </RevealContentContainer>
   );
 }
+
+export default ContactUsForm;

components/ContactUs/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Mailchimp from '../Mailchimp';
+import ContactUsForm from '@/components/ContactUs/ContactUsForm';
+
+const ContactUs = ({ setMsg }) => {
+  return <Mailchimp child={<ContactUsForm setResponseMessage={setMsg} />} />;
+};
+
+export default ContactUs;

components/Mailchimp/index.js

@@ -0,0 +1,47 @@
+import MailchimpSubscribe from 'react-mailchimp-subscribe';
+import { cloneElement, useRef } from 'react';
+import GoogleReCAPTCHA from 'react-google-recaptcha';
+
+const MAILCHIMP_URL = process.env.NEXT_PUBLIC_MAILCHIMP_URL;
+const RECAPTCHA_SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
+
+const Mailchimp = ({ child }) => {
+  const reCAPTCHARef = useRef(null);
+  let childToBeRendered = cloneElement(child);
+
+  const getReCaptchaToken = async () => {
+    await reCAPTCHARef.current.reset();
+    const token = await reCAPTCHARef.current.executeAsync();
+    return token;
+  };
+
+  return (
+    <MailchimpSubscribe
+      url={MAILCHIMP_URL}
+      render={({ subscribe, status, message }) => {
+        childToBeRendered = {
+          ...childToBeRendered,
+          props: {
+            ...child.props,
+            subscribe,
+            status,
+            message,
+            getReCaptchaToken,
+          },
+        };
+
+        return (
+          <GoogleReCAPTCHA
+            ref={reCAPTCHARef}
+            size='invisible'
+            sitekey={RECAPTCHA_SITE_KEY}
+          >
+            {childToBeRendered}
+          </GoogleReCAPTCHA>
+        );
+      }}
+    />
+  );
+};
+
+export default Mailchimp;

components/mailchimp/NewsletterForm/index.js → components/NewsletterSubscribe/NewsletterForm/index.js

@@ -1,50 +1,41 @@
-import { createRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { decode } from 'html-entities';
-import ReCAPTCHA from 'react-google-recaptcha';
 import { NewsLetterSubmitButton } from '@/components/buttons/SubmitButton';
 import S from './styles';
 
-const SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
-
-const NewsletterForm = ({ status, message, onValidated }) => {
+const NewsletterForm = ({ status, message, subscribe, getReCaptchaToken }) => {
   const [error, setError] = useState(null);
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
-  const recaptchaRef = createRef();
+  const [reCaptchaFail, setReCaptchaFail] = useState(false);
+
+  useEffect(() => {
+    if (status === 'success') {
+      setName('');
+      setEmail('');
+    }
+  }, [status]);
 
-  const onReCAPTCHAChange = async captchaCode => {
+  const validateReCaptcha = async () => {
     // If the reCAPTCHA code is null or undefined indicating that
     // the reCAPTCHA was expired then return early
-    if (!captchaCode) {
-      return;
-    }
+    const gReCaptchaToken = await getReCaptchaToken();
+    if (!gReCaptchaToken) return false;
+
     try {
-      const response = await fetch('/api/register', {
+      const response = await fetch('/api/validateReCaptcha', {
         method: 'POST',
-        body: JSON.stringify({ email, name, captcha: captchaCode }),
+        body: JSON.stringify({ email, name, gReCaptchaToken }),
         headers: {
           'Content-Type': 'application/json',
         },
       });
-      if (response.ok) {
-        // If the response is ok than show the success console.log
-        console.log('Email registered successfully');
-      } else {
-        // Else throw an error with the message returned
-        const error = await response.json();
-        throw new Error(error.message);
-      }
+
+      return response.ok ? true : false;
     } catch (error) {
       console.log(error?.message || 'Something went wrong');
-    } finally {
-      // Reset the reCAPTCHA when the request has failed or succeeded
-      if (recaptchaRef?.current) {
-        recaptchaRef.current.reset();
-      }
-
-      setEmail('');
-      setName('');
+      return false;
     }
   };
 
@@ -53,9 +44,10 @@ const NewsletterForm = ({ status, message, onValidated }) => {
    *
    * @return {{value}|*|boolean|null}
    */
-  const handleFormSubmit = event => {
+  const handleFormSubmit = async event => {
     event.preventDefault();
 
+    setReCaptchaFail(false);
     setError(null);
 
     if (!name) {
@@ -68,14 +60,18 @@ const NewsletterForm = ({ status, message, onValidated }) => {
       return null;
     }
 
-    recaptchaRef.current.execute();
-
-    const isFormValidated = onValidated({ EMAIL: email });
-
-    event.target.reset();
+    const confirmValidateRecaptcha = await validateReCaptcha();
+    if (!confirmValidateRecaptcha) {
+      setReCaptchaFail(true);
+    } else {
+      subscribe({
+        EMAIL: email,
+        MERGE1: name,
+      });
 
-    // On success return true
-    return name && email && email.indexOf('@') > -1 && isFormValidated;
+      event.target.reset();
+      setReCaptchaFail(false);
+    }
   };
 
   /**
@@ -144,16 +140,15 @@ const NewsletterForm = ({ status, message, onValidated }) => {
               onKeyUp={event => handleInputKeyEvent(event)}
             />
             <NewsLetterSubmitButton label='Subscribe' />
-
-            <ReCAPTCHA
-              ref={recaptchaRef}
-              size='invisible'
-              sitekey={SITE_KEY}
-              onChange={onReCAPTCHAChange}
-            />
           </S.Form>
 
           <S.FormInfo>
+            {reCaptchaFail && (
+              <S.FormSending>
+                Please, refresh your screen and try it again.
+              </S.FormSending>
+            )}
+
             {status === 'sending' && <S.FormSending>Sending...</S.FormSending>}
             {status === 'error' || error ? (
               <S.FormError

components/NewsletterSubscribe/index.js

@@ -0,0 +1,8 @@
+import Mailchimp from '../Mailchimp';
+import NewsletterForm from '@/components/NewsletterSubscribe/NewsletterForm';
+
+const NewsletterSubscribe = () => {
+  return <Mailchimp child={<NewsletterForm />} />;
+};
+
+export default NewsletterSubscribe;

components/layout/Footer/index.js

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { linksNav, linksSocial } from '@/utils/links';
-import NewsletterSubscribe from '@/components/mailchimp/NewsletterSubscribe';
+import NewsletterSubscribe from '@/components/NewsletterSubscribe';
 import Container from '@/components/containers/Container';
 import S from './styles';