Newsletters

Connected Newsletters to Mailchimp.
G-Yachts · Aug 11, 2024 · 45e9ec2 · 45e9ec2
1 parent cde51d2
commit 45e9ec2
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 111 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -76,6 +76,9 @@ jobs:
           echo "ADMIN_IP=${{secrets.ADMIN_IP}}" >> .env
           echo "PUBLIC_API_IP=${{secrets.PUBLIC_API_IP}}" >> .env
           echo "ADMIN_API_IP=${{secrets.ADMIN_API_IP}}" >> .env
+          echo "MAILCHIMP_API_KEY=${{secrets.MAILCHIMP_API_KEY}}" >> .env
+          echo "MAILCHIMP_LIST_ID=${{secrets.MAILCHIMP_LIST_ID}}" >> .env
+          echo "MAILCHIMP_SERVER=${{secrets.MAILCHIMP_SERVER}}" >> .env
 
           # WEB
           echo "NEXT_PUBLIC_ADMIN_BASE_URI=http://admin:3000" >> .env

diff --git a/web/actions/contact.ts b/web/actions/contact.ts
@@ -3,60 +3,52 @@
 import { getClient } from "@/apollo";
 import { gql } from "@apollo/client";
 import { checkField } from "@/utils/contact";
+import mailchimp from "@mailchimp/mailchimp_marketing";
+const md5 = require("md5");
 
-export const legacy = async (
-  formData: FormData,
-  params: {
-    prefix?: string;
-    locale: string;
-    page?: string;
-  },
-) => {
-  if (formData.get("surname")) {
-    const rawFormData = {
-      name: formData.get("name"),
-      surname: formData.get("surname"),
-      email: formData.get("email"),
-    };
-  }
+export const subscribe = async (formData: FormData) => {
+  mailchimp.setConfig({
+    apiKey: process.env.MAILCHIMP_API_KEY,
+    server: process.env.MAILCHIMP_SERVER,
+  });
 
-  const rawFormData = {
-    name: formData.get("name"),
-    email: formData.get("email"),
-    tel: params.prefix! + formData.get("tel"),
-    message: formData.get("message"),
-    inquiry: {
-      buying: formData.get("buying") === "on",
-      selling: formData.get("selling") === "on",
-      chartering: formData.get("chartering") === "on",
-      other: formData.get("other") === "on",
-    },
-    newsletter: formData.get("newsletter") === "on",
-    status: "unclaimed",
+  const listId = checkField(process.env.MAILCHIMP_LIST_ID);
+  const subscribingUser = {
+    firstName: checkField(formData.get("name")),
+    lastName: checkField(formData.get("surname")),
+    email: checkField(formData.get("email")),
+    tel: formData.get("tel"),
   };
 
-  /*
-  const customer = await Customer.findOne({ email: rawFormData.email }).exec();
-  if (customer) {
-    customer.name = rawFormData.name;
-    customer.email = rawFormData.email;
-    customer.tel = rawFormData.tel;
-    customer.message = rawFormData.message;
-    customer.inquiry = rawFormData.inquiry;
-    customer.newsletter = rawFormData.newsletter;
-    customer.status = rawFormData.status;
-    customer.save();
-    return;
-  }
+  const addListMember = async () => {
+    await mailchimp.lists.addListMember(listId, {
+      email_address: subscribingUser.email,
+      status: "subscribed",
+      merge_fields: {
+        FNAME: subscribingUser.firstName,
+        LNAME: subscribingUser.lastName,
+        PHONE: subscribingUser.tel,
+      },
+    });
+  };
 
-  await Newsletter.findOneAndDelete({
-    email: rawFormData.email,
-  });
-  await Customer.create(rawFormData);*/
-};
+  try {
+    const res = await mailchimp.lists.getListMember(
+      listId,
+      md5(subscribingUser.email),
+    );
 
-export const newsletter = async (formData: FormData) => {
-  // TODO: Need to connect MailChimp!
+    if (res.status !== "subscribed" && res.status !== "pending") {
+      await addListMember();
+    }
+  } catch (e: any) {
+    if (e.status === 404) {
+      await addListMember();
+    } else {
+      console.error(e);
+      throw e;
+    }
+  }
 };
 
 export const contact = async ({
@@ -90,6 +82,7 @@ export const contact = async ({
       page: string;
       status: "pending";
       tel?: string;
+      newsletter: boolean;
     };
   } = {
     data: {
@@ -98,11 +91,13 @@ export const contact = async ({
       message: checkField(formData.get("message")),
       page: params.page,
       status: "pending",
+      newsletter: formData.get("newsletter") === "on",
     },
   };
 
   if (formData.get("tel") && params.prefix) {
     variables.data.tel = `${params.prefix} ${formData.get("tel")}`;
+    formData.set("tel", variables.data.tel);
   }
 
   const { data } = await client.mutate({
@@ -111,7 +106,17 @@ export const contact = async ({
   });
 
   if (formData.get("newsletter") === "on") {
-    await newsletter(formData);
+    const splitName = (
+      name: string,
+    ): { firstName: string; lastName: string } => {
+      const [firstName, ...lastNameParts] = name.split(" ");
+      const lastName = lastNameParts.join(" ");
+      return { firstName, lastName };
+    };
+    const { firstName, lastName } = splitName(checkField(formData.get("name")));
+    formData.set("name", firstName);
+    formData.set("surname", lastName || "");
+    await subscribe(formData);
   }
 
   return data.createMessage;

diff --git a/web/components/nav/contact.tsx b/web/components/nav/contact.tsx
@@ -16,6 +16,7 @@ import submitted from "@/public/imagery/optimized/contact/submitted.json";
 import { handleMouseMove } from "@/utils/mouseCoords";
 import { useParams } from "next/navigation";
 import { usePath } from "@/utils/contact";
+import { useViewContext } from "@/context/view";
 
 export const Input = ({
   props,
@@ -120,7 +121,7 @@ const Submit = () => {
           className={"h-[1.5rem]"}
         />
       ) : (
-        <p>{t("form.submit")}</p>
+        <p className={"uppercase"}>{t("form.submit")}</p>
       )}
     </button>
   );
@@ -135,7 +136,8 @@ const Contact = () => {
     animationRef = useRef<LottieRefCurrentProps>(null),
     { pending } = useFormStatus(),
     [sent, setSent] = useState<boolean>(false),
-    params = useParams();
+    params = useParams(),
+    { openView } = useViewContext();
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -389,8 +391,24 @@ const Contact = () => {
                 />
                 <label htmlFor={"law"}>
                   {t.rich("form.law", {
-                    confidentiality: (chunks) => <a href={"#"}>{chunks}</a>,
-                    guidelines: (chunks) => <a href={"#"}>{chunks}</a>,
+                    confidentiality: (chunks) => (
+                      <button
+                        type={"button"}
+                        onClick={() => openView("privacy")}
+                        className={"uppercase underline"}
+                      >
+                        {chunks}
+                      </button>
+                    ),
+                    guidelines: (chunks) => (
+                      <button
+                        type={"button"}
+                        onClick={() => openView("terms")}
+                        className={"uppercase underline"}
+                      >
+                        {chunks}
+                      </button>
+                    ),
                   })}
                 </label>
               </div>

diff --git a/web/components/newsletter.tsx b/web/components/newsletter.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { Input } from "@/components/nav/contact";
-import { newsletter } from "@/actions/contact";
+import { subscribe } from "@/actions/contact";
 import { useRef, useState } from "react";
 import { motion } from "framer-motion";
 import Lottie, { LottieRefCurrentProps } from "lottie-react";
@@ -93,7 +93,7 @@ const Newsletter = () => {
             exit={{ opacity: 0 }}
             transition={{ duration: 0.5, ease: "easeInOut" }}
             action={async (formData) => {
-              await newsletter(formData).then(() => setRegistred(true));
+              await subscribe(formData).then(() => setRegistred(true));
             }}
             className={
               "h-max lg:w-[33vw] w-[92vw] bg-white flex flex-col justify-start items-center lg:px-[4vw] px-[4vw] lg:py-[4vh] py-[4vw] gap-[3vh]"