Mailchimp API (#40)

src/components/common/footer/footer.module.scss

@@ -74,7 +74,7 @@
     }
   }
 
-  form {
+  .form {
     @include respond-to('mobile') {
       width: 100%;
     }
@@ -82,6 +82,15 @@
     position: relative;
     margin: tovw(62px, 'default', 48px) auto 0;
     width: max-content;
+
+    > div {
+      position: absolute;
+      bottom: -80%;
+      color: var(--color-white);
+      font-size: tovw(14px, 'default', 12px);
+      text-transform: uppercase;
+      font-family: var(--font-dm-mono);
+    }
   }
 
   input {

src/components/common/footer/index.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import MailchimpSubscribe from 'react-mailchimp-subscribe'
 
 import { ArrowLink } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
@@ -18,6 +19,62 @@ import {
 } from './footer'
 import s from './footer.module.scss'
 
+type FormProps = {
+  className?: string
+  message: string
+  onSubmitted?: ({ EMAIL }: { EMAIL: string }) => void
+  status: 'success' | 'error' | 'sending'
+  style?: React.CSSProperties
+}
+
+const SimpleForm = ({
+  className,
+  message,
+  onSubmitted,
+  status,
+  style
+}: FormProps) => {
+  let input: HTMLInputElement | null
+
+  const submit = () => {
+    if (!onSubmitted) return
+    input &&
+      input.value.indexOf('@') > -1 &&
+      onSubmitted({
+        EMAIL: input.value
+      })
+  }
+
+  useEffect(() => {
+    if (!input) return
+    if (status === 'success') {
+      input.value = ''
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status])
+
+  return (
+    <div className={clsx(s['form'], className)} style={style}>
+      {status === 'sending' && <div>sending...</div>}
+      {status === 'error' && (
+        <div dangerouslySetInnerHTML={{ __html: message }} />
+      )}
+      {status === 'success' && (
+        <div dangerouslySetInnerHTML={{ __html: message }} />
+      )}
+      <input
+        ref={(node) => (input = node)}
+        type="email"
+        placeholder="Enter your email to stay updated"
+      />
+      <button onClick={submit}>
+        <ArrowLink />
+        <span className="sr-only">Send</span>
+      </button>
+    </div>
+  )
+}
+
 export const Footer = () => {
   const router = useRouter()
 
@@ -44,6 +101,9 @@ export const Footer = () => {
     }
   }, [router?.pathname])
 
+  const url =
+    'https://studio.us14.list-manage.com/subscribe/post?u=7a2779bd6fa5b8739b990d2b1&amp;id=2286437d2a'
+
   return (
     <>
       {show && (
@@ -70,17 +130,18 @@ export const Footer = () => {
             >
               Sign-up to our <br /> Newsletter
             </Heading>
-            <form action="">
-              <input
-                placeholder="Enter your email to stay updated"
-                required
-                type="email"
-              />
-              <button>
-                <ArrowLink />
-                <span className="sr-only">Send</span>
-              </button>
-            </form>
+
+            <MailchimpSubscribe
+              url={url}
+              // @ts-ignore
+              render={({ subscribe, status, message }) => (
+                <SimpleForm
+                  onSubmitted={(formData) => subscribe(formData)}
+                  status={status}
+                  message={message}
+                />
+              )}
+            />
           </Container>
         </Section>
       )}