feat: add newsletter for regular updates

Author: tbor00

.env.example

@@ -0,0 +1,2 @@
+MAILCHIMP_API_KEY="1223123123123-12312312312dasasdaswaqde1212132bgvegthr45uy623"
+MAILCHIMP_LIST_ID="12312131231ascxaqsdedas"

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+.env

src/components/Newsletter.tsx

@@ -1,5 +1,13 @@
 import { useTranslation } from 'next-i18next'
-import { Button, Flex, Input } from 'dd360-ds'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  Button,
+  Flex,
+  Input,
+  Callout,
+  CalloutProps,
+  Transition
+} from 'dd360-ds'
 import { composeClasses } from 'dd360-ds/lib'
 import { useTheme } from '@/store/theme-store'
 
@@ -8,30 +16,105 @@ function Newsletter() {
   const {
     themeObject: { extendedPalette }
   } = useTheme()
+  const [emailVal, setEmailVal] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isMessageShown, setIsMessageShown] = useState(false)
+  const [messageType, setMessageType] = useState('')
+
+  const isDisabledBtn = emailVal === '' || isMessageShown
+
+  const sendSubmit = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/newsletter', {
+        method: 'POST',
+        body: emailVal
+      })
+
+      const data = await res.json()
+      if (data.status !== 'success') {
+        throw new Error('Failed')
+      }
+      setMessageType('success')
+    } catch (e) {
+      setMessageType('error')
+    } finally {
+      setIsMessageShown(true)
+      setIsLoading(false)
+    }
+  }, [emailVal])
+
+  const calloutProps = useMemo(() => {
+    return {
+      title:
+        messageType === 'success'
+          ? 'Thanks for subscribing!'
+          : 'Something went wrong!',
+      description:
+        messageType === 'success'
+          ? "We'll send you an email when we have news."
+          : "Oops, there was an error and we couldn't subscribe you. Please try again.",
+      variant:
+        messageType === 'success'
+          ? 'success'
+          : ('error' as CalloutProps['variant'])
+    }
+  }, [messageType])
+
+  useEffect(() => {
+    if (isMessageShown) {
+      const timer = setTimeout(() => {
+        setIsMessageShown(false)
+        setMessageType('')
+      }, 5000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [isMessageShown])
 
   return (
-    <Flex gap="3" className="flex-col sm:flex-row mt-8">
-      <Input
-        placeholder="hello@dd360.mx"
-        className={composeClasses(
-          'sm:mt-0 inline-block border-gray-500 w-full sm:max-w-[287px]',
-          extendedPalette.primaryText
-        )}
-        style={{
-          background: extendedPalette.inputBackground,
-          borderColor: extendedPalette.inputBorderHex
-        }}
-      />
-      <Button
-        className="leading-none text-gray-50 min-w-max"
-        rounded="lg"
-        paddingX="8"
-        paddingY="4"
-        style={{ maxWidth: 124 }}
-      >
-        {t('subscribe')}
-      </Button>
-    </Flex>
+    <>
+      <Flex gap="3" className="flex-col sm:flex-row mt-8">
+        <Input
+          placeholder="hello@dd360.mx"
+          type="email"
+          className={composeClasses(
+            'sm:mt-0 inline-block border-gray-500 w-full sm:max-w-[287px]',
+            extendedPalette.primaryText
+          )}
+          onChange={(e) => setEmailVal(e.target.value)}
+          onSubmit={(e) => {
+            e.preventDefault()
+            sendSubmit()
+          }}
+          value={emailVal}
+          style={{
+            background: extendedPalette.inputBackground,
+            borderColor: extendedPalette.inputBorderHex
+          }}
+        />
+        <Button
+          className="leading-none text-gray-50 min-w-max"
+          rounded="lg"
+          paddingX="8"
+          paddingY="4"
+          style={{ maxWidth: 124 }}
+          disabled={isDisabledBtn || isLoading}
+          isLoading={isLoading}
+          onClick={(e) => {
+            e.preventDefault()
+            sendSubmit()
+          }}
+        >
+          {t('subscribe')}
+        </Button>
+      </Flex>
+      {isMessageShown && (
+        <Transition show>
+          <Callout className="w-96 mt-4" {...calloutProps} />
+        </Transition>
+      )}
+    </>
   )
 }
 

src/pages/api/newsletter.ts

@@ -0,0 +1,48 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+const API_KEY = process.env.MAILCHIMP_API_KEY
+const LIST_ID = process.env.MAILCHIMP_LIST_ID
+const DATACENTER = API_KEY?.split('-')[1]
+
+function getRequestParams(email: string) {
+  const url = `https://${DATACENTER}.api.mailchimp.com/3.0/lists/${LIST_ID}/members`
+
+  const data = {
+    email_address: email,
+    status: 'subscribed'
+  }
+
+  const base64ApiKey = Buffer.from(`anystring:${API_KEY}`).toString('base64')
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: `Basic ${base64ApiKey}`
+  }
+
+  return { url, data, headers }
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<{ status: 'error' | 'success' }>
+) {
+  const email = req.body
+
+  try {
+    const { url, data, headers } = getRequestParams(email)
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({
+        email_address: data.email_address,
+        status: data.status
+      })
+    })
+
+    if (!response.ok) res.status(400).json({ status: 'error' })
+
+    res.status(200).json({ status: 'success' })
+  } catch (err) {
+    res.status(400).json({ status: 'error' })
+  }
+}