mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-03-06 13:44:06 +00:00
added form but still getting 404 error
This commit is contained in:
oriofir
parent
a10c055f5d
commit
a8c4ba5b1d
@ -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;
|
||||
|
||||
|
||||
@ -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&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>
|
||||
)}
|
||||
|
||||
39
src/pages/api/emailSignup.tsx
Normal file
39
src/pages/api/emailSignup.tsx
Normal file
@ -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 })
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user