fix: add tags to new email reminders (#250)

Signed-off-by: david <[email protected]>

components/Input/EmailInput.tsx

@@ -19,7 +19,7 @@ export function EmailInput({
   placeholder = "Enter your email",
   errorOrigin = "remind",
 }: Props) {
-  const { addErrorMessage, removeErrorMessage } = useErrorContext(errorOrigin);
+  const { addErrorMessage, clearErrorMessages } = useErrorContext(errorOrigin);
   // see https://www.w3.org/TR/2012/WD-html-markup-20120329/input.email.html#input.email.attrs.value.single
   const isEmailRegex =
     /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
@@ -36,7 +36,7 @@ export function EmailInput({
 
   useEffect(() => {
     if (debouncedIsEmail) {
-      removeErrorMessage(errorMessage);
+      clearErrorMessages();
     } else {
       addErrorMessage(errorMessage);
     }

components/Panel/RemindMePanel/RemindMePanel.tsx

@@ -1,8 +1,9 @@
 import { Button, Checkbox, EmailInput, PanelErrorBanner } from "components";
+import { useErrorContext } from "hooks";
 import { mobileAndUnder } from "constant";
 import { config } from "helpers";
 import Check from "public/assets/icons/check.svg";
-import { FormEvent, useState } from "react";
+import { FormEvent, useState, useEffect } from "react";
 import styled from "styled-components";
 import { useMailChimpForm } from "use-mailchimp-form";
 import { PanelFooter } from "../PanelFooter";
@@ -12,17 +13,30 @@ import { PanelSectionText, PanelSectionTitle, PanelWrapper } from "../styles";
 export function RemindMePanel() {
   const [email, setEmail] = useState("");
   const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+  const { addErrorMessage, clearErrorMessages, removeErrorMessage } =
+    useErrorContext("remind");
 
   const url = config.mailchimpUrl ?? "";
+  const tags = config.mailchimpTags ?? "";
 
-  const { loading, success, message, handleSubmit } = useMailChimpForm(url);
+  const { loading, success, message, handleSubmit, error } =
+    useMailChimpForm(url);
 
   function onSubmit(e: FormEvent<HTMLFormElement>) {
+    clearErrorMessages();
     e.preventDefault();
-
-    handleSubmit({ EMAIL: email });
+    handleSubmit({ EMAIL: email, tags });
   }
 
+  useEffect(() => {
+    if (!error) {
+      removeErrorMessage(message);
+    } else {
+      addErrorMessage(message);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error, message]);
+
   if (url === "") return null;
 
   return (

helpers/config.ts

@@ -26,6 +26,7 @@ const Env = ss.object({
   NEXT_PUBLIC_DESIGNATED_VOTING_FACTORY_V1_ADDRESS: ss.optional(ss.string()),
   NEXT_PUBLIC_PHASE_LENGTH: ss.optional(ss.string()),
   NEXT_PUBLIC_MAILCHIMP_URL: ss.optional(ss.string()),
+  NEXT_PUBLIC_MAILCHIMP_TAGS: ss.optional(ss.string()),
 });
 export type Env = ss.Infer<typeof Env>;
 
@@ -59,6 +60,7 @@ export const env = ss.create(
       process.env.NEXT_PUBLIC_DESIGNATED_VOTING_FACTORY_V1_ADDRESS,
     NEXT_PUBLIC_PHASE_LENGTH: process.env.NEXT_PUBLIC_PHASE_LENGTH,
     NEXT_PUBLIC_MAILCHIMP_URL: process.env.NEXT_PUBLIC_MAILCHIMP_URL,
+    NEXT_PUBLIC_MAILCHIMP_TAGS: process.env.NEXT_PUBLIC_MAILCHIMP_TAGS,
   },
   Env
 );
@@ -84,6 +86,7 @@ const AppConfig = ss.object({
   designatedVotingFactoryV1Address: ss.string(),
   phaseLength: ss.number(),
   mailchimpUrl: ss.optional(ss.string()),
+  mailchimpTags: ss.optional(ss.string()),
 });
 export type AppConfig = ss.Infer<typeof AppConfig>;
 
@@ -119,6 +122,7 @@ export const appConfig = ss.create(
       ),
     phaseLength: Number(env.NEXT_PUBLIC_PHASE_LENGTH || 86400),
     mailchimpUrl: env.NEXT_PUBLIC_MAILCHIMP_URL,
+    mailchimpTags: env.NEXT_PUBLIC_MAILCHIMP_TAGS,
   },
   AppConfig
 );