updated

client/next.config.js

@@ -25,6 +25,10 @@ const nextConfig = withStoreConfig({
         protocol: "https",
         hostname: "medusa-server-testing.s3.us-east-1.amazonaws.com",
       },
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+      },
     ],
   },
 })

client/src/modules/layout/templates/footer/NewsLetter.tsx

@@ -0,0 +1,46 @@
+"use client"
+import { Button, Input } from "@medusajs/ui"
+import axios from "axios"
+import { useState } from "react"
+
+export default function NewsletterForm() {
+  const [email, setEmail] = useState("")
+
+  function subscribe(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (!email) {
+      return
+    }
+
+    axios
+      .post(
+        `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/mailchimp/subscribe`,
+        {
+          email,
+        }
+      )
+      .then((e) => {
+        alert("Subscribed successfully!")
+        setEmail("")
+      })
+      .catch((e) => {
+        console.error(e)
+        alert("An error occurred")
+      })
+  }
+
+  return (
+    <form onSubmit={subscribe}>
+      <h2>Sign Up for our newsletter</h2>
+      <Input
+        type="email"
+        name="email"
+        id="email"
+        placeholder="example@gmail.com"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <Button type="submit">Subscribe</Button>
+    </form>
+  )
+}

client/src/modules/layout/templates/footer/index.tsx

@@ -4,6 +4,7 @@ import { getCategoriesList, getCollectionsList } from "@lib/data"
 
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
 import MedusaCTA from "@modules/layout/components/medusa-cta"
+import NewsletterForm from "./NewsLetter"
 
 export default async function Footer() {
   const { collections } = await getCollectionsList(0, 6)
@@ -21,6 +22,10 @@ export default async function Footer() {
               Medusa Store
             </LocalizedClientLink>
           </div>
+          {/* Newsletter */}
+          <div>
+            <NewsletterForm />
+          </div>
           <div className="text-small-regular gap-10 md:gap-x-16 grid grid-cols-2 sm:grid-cols-3">
             {product_categories && product_categories?.length > 0 && (
               <div className="flex flex-col gap-y-2">