update response message style

Author: cherylli

components/ContactUsForm.js

@@ -1,78 +1,87 @@
 import { useForm } from 'react-hook-form';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import MailchimpSubscribe from 'react-mailchimp-subscribe';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Container from '@/components/containers/Container';
 import contactUsFormStyles from '@/styles/Contact.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import SubmitButton from '@/components/buttons/SubmitButton';
 
-export const ContactUsFormSubscribe = ({setMsg, setSubStatus, setSubMsg}) => {
+export const ContactUsFormSubscribe = ({ setMsg }) => {
   return (
     <MailchimpSubscribe
       url={process.env.NEXT_PUBLIC_MAILCHIMP_URL}
       render={({ subscribe, status, message }) => {
-        setSubStatus(status)
-        setSubMsg(message)
+        console.info(`MailChimp (contact form): ${status} - ${message}`);
         return (
-          <ContactUsForm
-            subscribe={formData => subscribe(formData)}
-            setResponseMessage={setMsg}
-          />
+          <>
+            <ContactUsForm
+              subscribe={formData => subscribe(formData)}
+              setResponseMessage={setMsg}
+            />
+            {status === 'error' && (
+              <div
+                className={contactUsFormStyles.contact__respseonErrorMessage}
+              >
+                {`Newsletter subscription error: ${message}`}
+              </div>
+            )}
+          </>
         );
-      }
-      }
+      }}
     />
   );
-
 };
 
 function ContactUsForm({ subscribe, setResponseMessage }) {
-  const contactReCaptchaRef = useRef()
+  const contactReCaptchaRef = useRef();
 
   const {
     register,
     handleSubmit,
     reset,
-    formState: { errors, isSubmitting }
+    formState: { errors, isSubmitting },
   } = useForm({
     defaultValues: {
       Name: '',
       Email: '',
       Subject: '',
-      Message: ''
-    }
+      Message: '',
+    },
   });
 
   async function onSubmit(data) {
-    setResponseMessage(['Submitting...'])
+    setResponseMessage(['Submitting...']);
 
-    contactReCaptchaRef.current.reset()
-    const gReCaptchaToken = await contactReCaptchaRef.current.executeAsync()
+    contactReCaptchaRef.current.reset();
+    const gReCaptchaToken = await contactReCaptchaRef.current.executeAsync();
 
     const res = await fetch('/api/contact', {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         name: data.Name,
         email: data.Email,
         subject: data.Subject,
         message: data.Message,
         subscribe: data.Subscribe,
-        gReCaptchaToken
-      })
+        gReCaptchaToken,
+      }),
     });
 
     if (res.ok) {
-      setResponseMessage(['Your message was sent successfully. We will be in touch with you as soon as possible.'])
+      setResponseMessage([
+        'Your message was sent successfully. We will be in touch with you as soon as possible.',
+      ]);
     } else {
       const jsonRes = await res.json();
-       setResponseMessage([
-        "Error Submitting Message",
+      setResponseMessage([
+        'Error Submitting Message',
         `Status Code: ${res.status} - ${jsonRes.message}`,
-        "Please contact support at [email protected]"])
+        'Please contact support at [email protected]',
+      ]);
     }
 
     if (data.Subscribe) {
@@ -81,7 +90,7 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
     reset();
   }
 
-  console.info('these are errors;', errors);
+  console.info('Contact Form: these are errors;', errors);
 
   return (
     <RevealContentContainer>
@@ -98,25 +107,25 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
               minLength: 2,
               maxLength: 80,
               //no white space pattern
-              pattern: /[^\s-]/i
+              pattern: /[^\s-]/i,
             })}
             className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__name}`}
           />
           <p className={contactUsFormStyles.contact__errorMessage}>
             {errors.Name?.type === 'required'
               ? 'Name is required'
               : errors.Name?.type === 'pattern'
-                ? 'No whitespace'
-                : errors.Name?.type === 'minLength'
-                  ? 'Must be more than 1 character'
-                  : undefined}
+              ? 'No whitespace'
+              : errors.Name?.type === 'minLength'
+              ? 'Must be more than 1 character'
+              : undefined}
           </p>
           <input
             type='email'
             placeholder='email'
             {...register('Email', {
               required: true,
-              pattern: /^\S+@\S+$/i
+              pattern: /^\S+@\S+$/i,
             })}
             className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__email}`}
           />
@@ -129,24 +138,24 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
             {...register('Subject', {
               required: true,
               minLength: 2,
-              pattern: /[^\s-]/i
+              pattern: /[^\s-]/i,
             })}
             className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__subject}`}
           />
           <p className={contactUsFormStyles.contact__errorMessage}>
             {errors.Subject?.type === 'required'
               ? 'Subject is required'
               : errors.Subject?.type === 'pattern'
-                ? 'No whitespace'
-                : errors.Subject?.type === 'minLength'
-                  ? 'Must be more than 1 character'
-                  : undefined}
+              ? 'No whitespace'
+              : errors.Subject?.type === 'minLength'
+              ? 'Must be more than 1 character'
+              : undefined}
           </p>
           <textarea
             {...register('Message', {
               required: true,
               minLength: 2,
-              pattern: /[^\s-]/i
+              pattern: /[^\s-]/i,
             })}
             placeholder='Write your message here'
             className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__message}`}
@@ -155,10 +164,10 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
             {errors.Message?.type === 'required'
               ? 'Message is required'
               : errors.Message?.type === 'pattern'
-                ? 'No whitespace'
-                : errors.Message?.type === 'minLength'
-                  ? 'Must be more than 1 character'
-                  : undefined}
+              ? 'No whitespace'
+              : errors.Message?.type === 'minLength'
+              ? 'Must be more than 1 character'
+              : undefined}
           </p>
           <div className={contactUsFormStyles.contact__subscribe}>
             <input

pages/contact.js

@@ -1,34 +1,29 @@
 import { useState } from 'react';
-import { ContactUsFormSubscribe } from '../components/ContactUsForm';
+import { ContactUsFormSubscribe } from '@/components/ContactUsForm';
 import contactUsFormStyles from '@/styles/Contact.module.scss';
 import Bracket from '@/components/decorations/Bracket';
 
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
-  const [subStatus, setSubStatus] = useState('');
-  const [subMsg, setSubMsg] = useState('');
 
   return (
     <div className={contactUsFormStyles.contact}>
       <div className={contactUsFormStyles.contact__formAndDecorations}>
         <Bracket className={contactUsFormStyles.contact__yellowBracket} />
-        <div>
-          <ContactUsFormSubscribe
-            setMsg={setMessage}
-            setSubStatus={setSubStatus}
-            setSubMsg={setSubMsg} />
-        </div>
+        <ContactUsFormSubscribe setMsg={setMessage} />
         <img
           src='/images/svg/yellow-colon.svg'
           className={contactUsFormStyles.contact__yellowColon}
         />
         <div className={contactUsFormStyles.contact__response_message}>
-          {message?.map(m => <>{m}<br /></>)}
-          {subStatus && <><b>Subscription Status: </b> {subStatus}<br /></>}
-          {subMsg}
+          {message?.map((m, i) => (
+            <span key={i}>
+              {m}
+              <br />
+            </span>
+          ))}
         </div>
       </div>
-
     </div>
   );
 }

styles/Contact.module.scss

@@ -143,11 +143,25 @@
   }
 
   &__response_message {
+    position: absolute;
+    right: 8%;
+    bottom: -5%;
+    width: 26rem;
+    margin: auto;
+
+    @include mobile {
+      position: unset;
+      margin-top: 1rem;
+    }
+  }
+
+  &__respseonErrorMessage {
     position: absolute;
     right: 8%;
     bottom: -15%;
     width: 26rem;
     margin: auto;
+    color: $error;
 
     @include mobile {
       position: unset;

styles/_variables.scss

@@ -17,6 +17,7 @@ $dark-bg-color: #023047;
 $light-bg-color: #8cd5e8;
 $primary-accent-color: #ffcc4c;
 $secondary-accent-color: #19aad1;
+$error: #ab5252;
 $black: #000000;
 $white: #ffffff;
 $transparent: transparent;