remove unnecessary state

package.json

@@ -23,6 +23,7 @@
     "@graphql-codegen/typescript-operations": "^2.3.5",
     "@hubspot/api-client": "^7.1.2",
     "@juggle/resize-observer": "^3.3.1",
+    "@mailchimp/mailchimp_marketing": "^3.0.80",
     "@notionhq/client": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^0.1.2",
     "@radix-ui/react-polymorphic": "^0.0.14",
@@ -64,6 +65,7 @@
     "@graphql-codegen/cli": "^2.6.2",
     "@next/bundle-analyzer": "^12.1.5",
     "@types/css-font-loading-module": "0.0.7",
+    "@types/mailchimp__mailchimp_marketing": "^3.0.6",
     "@types/node": "^17.0.25",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",

src/components/common/footer/index.tsx

@@ -152,7 +152,7 @@ export const Footer = ({ data }: Props) => {
   }, [show])
 
   const url =
-    'https://xylm.us20.list-manage.com/subscribe/post?u=97d7d4662c941dd625d4c4261&id=b72fe1118a'
+    'https://laconic.us8.list-manage.com/subscribe/post?u=d794a98f9fde12ec254350332&id=405947e375&f_id=00e16be0f0'
 
   return (
     <>

src/components/sections/contact/form/index.tsx

@@ -47,26 +47,21 @@ const CustomForm = ({ data }: FormProps) => {
 
   const { executeRecaptcha } = useGoogleReCaptcha()
 
-  function submitEnquiryForm(gReCaptchaToken: string) {
-    fetch('/api/inquiry', {
+  function submitEnquiryForm() {
+    fetch('/api/mailchimpcontact', {
       method: 'POST',
-      headers: {
-        Accept: 'application/json, text/plain, */*',
-        'Content-Type': 'application/json'
-      },
       body: JSON.stringify({
-        gRecaptchaToken: gReCaptchaToken
+        email: email,
+        message: text,
+        inquiry: selectedOption.value
       })
     })
-      .then((res) => res.json())
       .then((res) => {
-        // console.log(res, 'response from backend')
-        if (res?.status === 'success') {
-          setNotification(res?.message)
-        } else {
-          setNotification(res?.message)
-        }
+        // eslint-disable-next-line no-console
+        console.log('RESSSS', res)
+        setNotification("Thanks! We'll be in touch soon.")
       })
+      .catch((err) => console.error(err))
   }
 
   const handleSubmitForm = useCallback(
@@ -80,7 +75,7 @@ const CustomForm = ({ data }: FormProps) => {
       executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken) => {
         // eslint-disable-next-line no-console
         console.log(gReCaptchaToken, 'response Google reCaptcha server')
-        submitEnquiryForm(gReCaptchaToken)
+        submitEnquiryForm()
       })
     },
     [executeRecaptcha]
@@ -99,25 +94,25 @@ const CustomForm = ({ data }: FormProps) => {
 
       setIsSending(true)
 
-      const data = {
-        email: email,
-        message: text,
-        inquiry: selectedOption.value
-      }
-
-      await fetch(`${process.env.NEXT_PUBLIC_API}/api/contact`, {
+      fetch('/api/mailchimpcontact', {
         method: 'POST',
-        mode: 'no-cors',
-        body: JSON.stringify(data),
-        headers: {
-          'Content-Type': 'application/json'
-        }
+        body: JSON.stringify({
+          email: email,
+          message: text,
+          inquiry: selectedOption.value
+        })
       })
+        .then(() => {
+          // eslint-disable-next-line no-console
+          setNotification("Thanks! We'll be in touch soon.")
+        })
+        .catch((err) => console.error(err))
 
       setIsSending(false)
       setIsFormSent(true)
     } catch (error) {
-      // console.log(error)
+      // eslint-disable-next-line no-console
+      console.log(error)
     }
   }
 
@@ -164,6 +159,7 @@ const CustomForm = ({ data }: FormProps) => {
             name="message"
             id="message"
             rows={5}
+            maxLength={254}
             required
             value={text}
             onChange={(e) => setText(e.target.value)}

src/components/sections/partners/contact/index.tsx

@@ -58,31 +58,30 @@ const CustomForm = ({ data }: FormProps) => {
   const [errorMsg, setErrorMsg] = useState('')
   const [isFormSent, setIsFormSent] = useState(false)
   const [isSending, setIsSending] = useState(false)
-  const [notification, setNotification] = useState('')
-  // const reRef = useRef<ReCAPTCHA>()
 
   const { executeRecaptcha } = useGoogleReCaptcha()
 
   function submitEnquiryForm(gReCaptchaToken: string) {
-    fetch('/api/inquiry', {
+    // eslint-disable-next-line no-console
+    console.log('GERECAPTCHATOKEN: ', gReCaptchaToken)
+    fetch('/api/mailchimpinquiry', {
       method: 'POST',
-      headers: {
-        Accept: 'application/json, text/plain, */*',
-        'Content-Type': 'application/json'
-      },
       body: JSON.stringify({
-        gRecaptchaToken: gReCaptchaToken
+        name: name,
+        email: email,
+        role: role,
+        company: company,
+        jurisdiction: jurisdiction,
+        message: text,
+        inquiry: selectedOption.value
       })
     })
-      .then((res) => res.json())
       .then((res) => {
-        // console.log(res, 'response from backend')
-        if (res?.status === 'success') {
-          setNotification(res?.message)
-        } else {
-          setNotification(res?.message)
-        }
+        // eslint-disable-next-line no-console
+        console.log('RESSSS', res)
+        // setNotification("Thanks! We'll be in touch soon.")
       })
+      .catch((err) => console.error(err))
   }
 
   const handleSubmitForm = useCallback(
@@ -115,25 +114,34 @@ const CustomForm = ({ data }: FormProps) => {
 
       setIsSending(true)
 
-      const data = {
-        name: name,
-        email: email,
-        message: text,
-        inquiry: selectedOption.value,
-        jurisdiction: jurisdiction,
-        company: company,
-        role: role
-      }
+      // const data = {
+      //   name: name,
+      //   email: email,
+      //   message: text,
+      //   inquiry: selectedOption.value,
+      //   jurisdiction: jurisdiction,
+      //   company: company,
+      //   role: role
+      // }
 
-      // const token = await reRef.current.executeAsync()
-      await fetch(`${process.env.NEXT_PUBLIC_API}/api/inquiry`, {
+      fetch('/api/mailchimpinquiry', {
         method: 'POST',
-        mode: 'no-cors',
-        body: JSON.stringify(data),
-        headers: {
-          'Content-Type': 'application/json'
-        }
+        body: JSON.stringify({
+          name: name,
+          email: email,
+          role: role,
+          company: company,
+          jurisdiction: jurisdiction,
+          message: text,
+          inquiry: selectedOption.value
+        })
       })
+        .then((res) => {
+          // eslint-disable-next-line no-console
+          console.log('RESSSS', res)
+          // setNotification("Thanks! We'll be in touch soon.")
+        })
+        .catch((err) => console.error(err))
 
       setIsSending(false)
       setIsFormSent(true)
@@ -233,6 +241,7 @@ const CustomForm = ({ data }: FormProps) => {
             name="message"
             id="message"
             rows={5}
+            maxLength={254}
             required
             value={text}
             onChange={(e) => setText(e.target.value)}
@@ -253,7 +262,6 @@ const CustomForm = ({ data }: FormProps) => {
         <Button size="medium" variant="primary">
           {data?.contactButtonLabel}
         </Button>
-        {notification && <p>{notification}</p>}
       </form>
     </div>
   )

src/pages/api/mailchimpcontact.js

@@ -0,0 +1,25 @@
+const mailchimp = require('@mailchimp/mailchimp_marketing')
+
+mailchimp.setConfig({
+  apiKey: process.env.MAILCHIMP_API_KEY,
+  server: 'us8'
+})
+
+export default async function handler(req, res) {
+  const body = JSON.parse(req.body)
+  const email = body.email
+  const inquiry = body.inquiry
+  const message = body.message
+
+  // eslint-disable-next-line no-console
+  const response = await mailchimp.lists.addListMember('5b23f4626d', {
+    email_address: email, // MERGE0
+    status: 'subscribed',
+    merge_fields: {
+      INQUIRY: inquiry, // MERGE3
+      MESSAGE: message // MERGE4
+    }
+  })
+
+  res.status(200).json({ response })
+}

src/pages/api/mailchimpinquiry.js

@@ -0,0 +1,31 @@
+const mailchimp = require('@mailchimp/mailchimp_marketing')
+
+mailchimp.setConfig({
+  apiKey: process.env.MAILCHIMP_API_KEY,
+  server: 'us8'
+})
+
+export default async function handler(req, res) {
+  // eslint-disable-next-line no-console
+  const body = JSON.parse(req.body)
+  const inquiry = body.inquiry
+  const name = body.name
+  const email = body.email
+  const message = body.message
+  const role = body.role
+  const company = body.company
+  const jurisdiction = body.jurisdiction // JURIS
+  const response = await mailchimp.lists.addListMember('0c1f26e807', {
+    email_address: email, // MERGE0
+    status: 'subscribed',
+    merge_fields: {
+      NAME: name, // MERGE1
+      ROLE: role, // MERGE2
+      COMPANY: company, // MERGE3
+      JURIS: jurisdiction, // MERGE4
+      INQUIRY: inquiry, // MERGE5
+      MESSAGE: message // MERGE6
+    }
+  })
+  res.status(200).json({ name: response })
+}