Merge pull request #59 from MarianaSouza/feature/integrate-mailchimp

Integrating MailChimp

Author: mariana-caldas

.env-template

@@ -0,0 +1,7 @@
+
+# When updating the Subscribe MailChimp functionality present on the footer:
+# 1 Ask for the url link on Slack
+# 2 Create your local `.env` with the url credentials that will not be tracked into our repository for security reasons
+
+NEXT_PUBLIC_MAILCHIMP_URL={Add the url link}
+

.gitignore

@@ -1,3 +1,4 @@
 .next
 node_modules
+.env
 

components/Footer.js

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import footerStyles from "../styles/Footer.module.scss";
 import { linksNav, linksSocial } from "../utils/links";
+import NewsletterSubscribe from "./mailchimp/NewsletterSubscribe";
 
 export default function Footer() {
   return (
@@ -30,10 +31,7 @@ export default function Footer() {
             <p className={footerStyles.text}>
               Get the answer to the most common questions directly to your email
             </p>
-            <form>
-              <input type="email" placeholder="Email" />
-              <button>Subscribe</button>
-            </form>
+            < NewsletterSubscribe />
             <p>*Unsubscribe anytime</p>
           </div>
           <div className={footerStyles.socialMedia}>

components/mailchimp/NewsletterForm.js

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { decode } from 'html-entities';
+import newsletterStyles from "../../styles/Newsletter.module.scss";
+
+const NewsletterForm = ( { status, message, onValidated }) => {
+
+  const [ error, setError ] = useState(null);
+  const [ email, setEmail ] = useState(null);
+
+  /**
+   * Handle form submit.
+   *
+   * @return {{value}|*|boolean|null}
+   */
+  const handleFormSubmit = () => {
+
+    setError(null);
+
+    if ( ! email ) {
+      setError( 'Please enter a valid email address' );
+      return null;
+    }
+
+    const isFormValidated = onValidated({ EMAIL: email });
+
+    // On success return true
+    return email && email.indexOf("@") > -1 && isFormValidated;
+  }
+
+  /**
+   * Handle Input Key Event.
+   *
+   * @param event
+   */
+  const handleInputKeyEvent = ( event ) => {
+    setError(null);
+    // Number 13 is the "Enter" key on the keyboard
+    if (event.keyCode === 13) {
+      // Cancel the default action, if needed
+      event.preventDefault();
+      // Trigger the button element with a click
+      handleFormSubmit();
+    }
+  }
+
+  /**
+   * Extract message from string.
+   *
+   * @param {String} message
+   * @return {null|*}
+   */
+  const getMessage = (message) => {
+    if ( !message ) {
+      return null;
+    }
+    const result = message?.split('-') ?? null;
+    if ( "0" !== result?.[0]?.trim() ) {
+      return decode(message);
+    }
+    const formattedMessage = result?.[1]?.trim() ?? null;
+    return formattedMessage ? decode( formattedMessage ) : null;
+  }
+
+  return (
+    <>
+      <div>
+        <input
+          onChange={(event) => setEmail(event?.target?.value ?? '')}
+          type="email"
+          placeholder="Your email"
+          onKeyUp={(event) => handleInputKeyEvent(event)}
+        />
+        <button onClick={handleFormSubmit}>
+          Submit
+        </button>
+      </div>
+      <div className={ newsletterStyles.newsletterFormInfo }>
+        {status === "sending" && <div className={ newsletterStyles.newsletterFormSending }>Sending...</div>}
+        {status === "error" || error ? (
+          <div
+            className={ newsletterStyles.newsletterFormError }
+            dangerouslySetInnerHTML={{ __html: error || getMessage( message ) }}
+          />
+        ) : null }
+        {status === "success" && status !== "error" && !error && (
+          <div className={ newsletterStyles.newsletterFormSuccess } dangerouslySetInnerHTML={{ __html: decode(message) }} />
+        )}
+      </div>
+    </>
+  );
+}
+
+export default NewsletterForm;

components/mailchimp/NewsletterSubscribe.js

@@ -0,0 +1,25 @@
+import MailchimpSubscribe from 'react-mailchimp-subscribe';
+import NewsletterForm from './NewsletterForm';
+
+const NewsletterSubscribe = () => {
+
+  const MAILCHIMP_URL = process.env.NEXT_PUBLIC_MAILCHIMP_URL;
+
+  return (
+    <MailchimpSubscribe
+      url={ MAILCHIMP_URL }
+      render={(props) => {
+        const { subscribe, status, message } = props || {};
+        return (
+          <NewsletterForm
+            status={ status }
+            message={ message }
+            onValidated={ formData => subscribe( formData ) }
+          />
+        );
+      } }
+    />
+  );
+};
+
+export default NewsletterSubscribe;