From a8c4ba5b1d23bab59b591a1394a37fb7b2e2ae7a Mon Sep 17 00:00:00 2001
From: oriofir <97814056+oriofir@users.noreply.github.com>
Date: Fri, 16 Sep 2022 09:44:31 -0700
Subject: [PATCH] added form but still getting 404 error

---
 .../common/footer/footer.module.scss          |  11 +-
 src/components/common/footer/index.tsx        | 201 +++++++++++-------
 src/pages/api/emailSignup.tsx                 |  39 ++++
 3 files changed, 169 insertions(+), 82 deletions(-)
 create mode 100644 src/pages/api/emailSignup.tsx

diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss
index 0290d93..795b521 100644
--- a/src/components/common/footer/footer.module.scss
+++ b/src/components/common/footer/footer.module.scss
@@ -87,6 +87,7 @@
     border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
     border-radius: 0;
     background: transparent;
+    padding-top: tovw(10px, 'default', 10px);
     padding-bottom: tovw(10px, 'default', 10px);
     width: tovw(440px, 'default', 320px);
     letter-spacing: tovw(-1px, 'default', -1px);
@@ -101,15 +102,17 @@
 
     & + button {
       position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-80%);
+      top: 62%;
+
+      // right: 0;
+      // transform: translateY(60%);
+      transform: translateX(-80%);
       margin: 0;
       border: none;
       background: none;
       cursor: pointer;
       padding: 0;
-      width: tovw(18px, 'default', 11px);
+      width: tovw(18px, 'default', 12px);
       height: tovw(18px, 'default', 11px);
       appearance: none;
 
diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 3d52e97..31db368 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -1,12 +1,10 @@
 import useAxios from 'axios-hooks'
-import clsx from 'clsx'
+// import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
 import { useEffect, useRef, useState } from 'react'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import HubspotForm from 'react-hubspot-form'
 
+// import MailchimpSubscribe from 'react-mailchimp-subscribe'
 import { ArrowLink } from '~/components/icons/arrow'
 import { Isotype, LogoFooter } from '~/components/icons/logo'
 import {
@@ -28,84 +26,83 @@ import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
 
 import s from './footer.module.scss'
 
-type FormProps = {
-  className?: string
-  message: string
-  onSubmitted?: ({ EMAIL }: { EMAIL: string }) => void
-  status: 'success' | 'error' | 'sending'
-  style?: React.CSSProperties
-}
+// type FormProps = {
+//   className?: string
+//   message: string
+//   onSubmitted?: ({ EMAIL }: { EMAIL: string }) => void
+//   status: 'success' | 'error' | 'sending'
+//   style?: React.CSSProperties
+// }
 
-const SimpleForm = ({
-  className,
-  message,
-  onSubmitted,
-  status,
-  style
-}: FormProps) => {
-  let input: HTMLInputElement | null
+// const SimpleForm = ({
+//   className,
+//   message,
+//   onSubmitted,
+//   status,
+//   style
+// }: FormProps) => {
+//   let input: HTMLInputElement | null
 
-  const submit = (e: any) => {
-    e.preventDefault()
-    if (!onSubmitted) return
-    input &&
-      input.value.indexOf('@') > -1 &&
-      onSubmitted({
-        EMAIL: input.value
-      })
-  }
+//   const submit = (e: any) => {
+//     e.preventDefault()
+//     if (!onSubmitted) return
+//     input &&
+//       input.value.indexOf('@') > -1 &&
+//       onSubmitted({
+//         EMAIL: input.value
+//       })
+//   }
 
-  // useEffect(() => {
-  //   const script = document.createElement('script')
-  //   script.src = 'https://js.hsforms.net/forms/v2.js'
-  //   document.body.appendChild(script)
+// useEffect(() => {
+//   const script = document.createElement('script')
+//   script.src = 'https://js.hsforms.net/forms/v2.js'
+//   document.body.appendChild(script)
 
-  //   // @TS-ignore
-  //   if (window.hbspt) {
-  //     // @TS-ignore
-  //     window.hbspt.form.create({
-  //       portalId: '22316985',
-  //       formId: '7e20988-cdf6-497e-bfab-a0950d7d0c54',
-  //       target: '#hubspotForm'
-  //     })
-  //   }
-  // }, [])
+//   script.addEventListener('load', () => {
+//     // @TS-ignore
+//     if (window.hbspt) {
+//       // @TS-ignore
+//       window.hbspt.forms.create({
+//         portalId: '22316985',
+//         formId: '7e20988-cdf6-497e-bfab-a0950d7d0c54',
+//         target: '#hubspotForm'
+//       })
+//     }
+//   })
+// }, [])
 
-  useEffect(() => {
-    if (!input) return
-    if (status === 'success') {
-      input.value = ''
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status])
+//   useEffect(() => {
+//     if (!input) return
+//     if (status === 'success') {
+//       input.value = ''
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [status])
 
-  return (
-    <div className={clsx(s['form'], className)} style={style}>
-      {status === 'sending' && <div>sending...</div>}
-      {status === 'error' && (
-        <div dangerouslySetInnerHTML={{ __html: message }} />
-      )}
-      {status === 'success' && (
-        <div dangerouslySetInnerHTML={{ __html: message }} />
-      )}
-      <form action="/" onSubmit={(e) => submit(e)}>
-        <input
-          placeholder="Enter your email to stay updated"
-          ref={(node) => (input = node)}
-          required
-          type="email"
-        />
-        <button type="submit">
-          <ArrowLink />
-          <span className="sr-only">Send</span>
-        </button>
-      </form>
-    </div>
-  )
-}
+//   return (
+//     <div className={clsx(s['form'], className)} style={style}>
+//       {status === 'sending' && <div>sending...</div>}
+//       {status === 'error' && (
+//         <div dangerouslySetInnerHTML={{ __html: message }} />
+//       )}
+//       {status === 'success' && (
+//         <div dangerouslySetInnerHTML={{ __html: message }} />
+//       )}
+//       <form action="/" onSubmit={(e) => submit(e)}>
+//         <input
+//           placeholder="Enter your email to stay updated"
+//           ref={(node) => (input = node)}
+//           required
+//           type="email"
+//         />
+//       </form>
+//     </div>
+//   )
+// }
 
 interface Props {
   data: {
+    success: boolean
     aboutLinks: { href: string; title: string }[]
     communityLinks: { href: string; title: string }[]
     connectLinks: { href: string; title: string }[]
@@ -123,6 +120,33 @@ export const Footer = ({ data }: Props) => {
   const [show, setShow] = useState(true)
   const [is404, setIs404] = useState(false)
   const [themeLabel, setThemeLabel] = useState('')
+  const [email, setEmail] = useState('')
+  const [pageUri, setPageUri] = useState<string>()
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [{ loading }, refetch] = useAxios(
+    {
+      url: '/api/emailSignup',
+      method: 'POST',
+      data: { email, pageUri }
+    },
+    {
+      manual: true
+    }
+  )
+
+  // Clear the form on successful submitting it
+  useEffect(() => {
+    if (data?.success === true && !loading) {
+      setEmail('')
+    }
+  }, [data?.success, loading])
+
+  // Get the url the user is currently visiting.
+  // Optional, but enriches the data we have in HubSpot.
+  useEffect(() => {
+    setPageUri(window.location.href)
+  }, [])
 
   useEffect(() => {
     setThemeLabel(theme === 'dark' ? 'Dark mode' : 'Light mode')
@@ -170,8 +194,8 @@ export const Footer = ({ data }: Props) => {
     )
   }, [show])
 
-  const url =
-    'https://api.hsforms.com/submissions/v3/integration/submit/22316985/7e20988-cdf6-497e-bfab-a0950d7d0c54'
+  // const url =
+  //   'https://xylm.us20.list-manage.com/subscribe/post?u=97d7d4662c941dd625d4c4261&amp;id=b72fe1118a'
 
   return (
     <>
@@ -189,11 +213,32 @@ export const Footer = ({ data }: Props) => {
               Sign-up for our <br /> Newsletter
             </Heading>
 
-            <HubspotForm
+            <input
+              type={'email'}
+              placeholder={'Enter your email to stay updated'}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <button
+              type={'submit'}
+              onClick={() => refetch()}
+              disabled={loading}
+            >
+              <ArrowLink />
+              <span className="sr-only">Send</span>
+            </button>
+
+            {/* <HubspotForm
               portalId="22316985"
               formId="7e20988-cdf6-497e-bfab-a0950d7d0c54"
+              onSubmit={() => console.log('Submit!')}
+              onReady={(form) => {
+                return console.log('Form ready!')
+              }}
+              // loading={<div>Loading...</div>}
+            /> */}
+            {/* <MailchimpSubscribe
               url={url}
-              target="#hubspot"
               // @ts-ignore
               render={({ subscribe, status, message }) => (
                 <SimpleForm
@@ -202,7 +247,7 @@ export const Footer = ({ data }: Props) => {
                   message={message}
                 />
               )}
-            />
+            /> */}
           </Container>
         </Section>
       )}
diff --git a/src/pages/api/emailSignup.tsx b/src/pages/api/emailSignup.tsx
new file mode 100644
index 0000000..795e1be
--- /dev/null
+++ b/src/pages/api/emailSignup.tsx
@@ -0,0 +1,39 @@
+import axios from 'axios'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+const HUBSPOT_API_KEY = process.env.HUBSPOT_API_KEY
+const HUBSPOT_PORTAL_ID = '22316985' // Replace this
+const HUBSPOT_FORM_GUID = '5d0cab17-2376-44bc-bbe9-cb477bff0360' // Replace this
+
+type Response = {
+  success: boolean
+  email?: string
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse<Response>) => {
+  const { email, pageUri } = req.body
+
+  if (typeof email !== 'string') {
+    return res.status(400).json({ success: false })
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const response = await axios({
+      method: 'POST',
+      // eslint-disable-next-line no-useless-escape
+      url: `https://api.hsforms.com/submissions/v3/integration/secure/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_GUID}/?hapikey/=${HUBSPOT_API_KEY}`,
+      data: {
+        fields: [{ name: 'email', value: email }],
+        context: { pageUri }
+      },
+      headers: { 'Content-Type': 'application/json' }
+    })
+    // eslint-disable-next-line no-console
+    console.log(response)
+  } catch (error) {
+    return res.status(500).json({ success: false })
+  }
+
+  res.status(200).json({ success: true, email })
+}