Merge pull request #123 from LaconicNetwork/revert-122-oriofir/hubspot
Revert "Oriofir/hubspot"
This commit is contained in:
olive kimoto
GitHub
commit
9e7fc27e7f
1093
package-lock.json
generated
1093
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -29,15 +29,12 @@
|
||||
"@reach/dialog": "^0.17.0",
|
||||
"@types/lodash": "^4.14.182",
|
||||
"@types/marked": "^4.0.3",
|
||||
"axios": "^0.27.2",
|
||||
"axios-hooks": "^3.1.5",
|
||||
"clsx": "^1.1.1",
|
||||
"datocms-structured-text-to-html-string": "^2.0.4",
|
||||
"datocms-structured-text-to-plain-text": "^2.0.4",
|
||||
"graphql": "^16.3.0",
|
||||
"graphql-request": "^4.2.0",
|
||||
"gsap": "./src/lib/gsap/gsap-bonus.tgz",
|
||||
"hubspot": "^2.3.14",
|
||||
"keen-slider": "^6.6.9",
|
||||
"lodash": "^4.17.21",
|
||||
"marked": "^4.0.14",
|
||||
@ -52,9 +49,7 @@
|
||||
"react-fast-marquee": "^1.3.1",
|
||||
"react-google-recaptcha": "^2.1.0",
|
||||
"react-google-recaptcha-v3": "^1.0.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-hook-form": "^7.30.0",
|
||||
"react-hubspot-form": "^1.3.7",
|
||||
"react-mailchimp-subscribe": "^2.1.3",
|
||||
"react-merge-refs": "^1.1.0",
|
||||
"react-query": "^3.35.0",
|
||||
|
||||
@ -87,7 +87,6 @@
|
||||
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);
|
||||
@ -102,17 +101,15 @@
|
||||
|
||||
& + button {
|
||||
position: absolute;
|
||||
top: 62%;
|
||||
|
||||
// right: 0;
|
||||
// transform: translateY(60%);
|
||||
transform: translateX(-80%);
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-80%);
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: tovw(18px, 'default', 12px);
|
||||
width: tovw(18px, 'default', 11px);
|
||||
height: tovw(18px, 'default', 11px);
|
||||
appearance: none;
|
||||
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
/* eslint-disable no-console */
|
||||
|
||||
// import { Client } from '@hubspot/api-client'
|
||||
import useAxios from 'axios-hooks'
|
||||
// import Hubspot from 'hubspot'
|
||||
// import clsx from 'clsx'
|
||||
import clsx from 'clsx'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import MailchimpSubscribe from 'react-mailchimp-subscribe'
|
||||
|
||||
// import MailchimpSubscribe from 'react-mailchimp-subscribe'
|
||||
import { ArrowLink } from '~/components/icons/arrow'
|
||||
import { Isotype, LogoFooter } from '~/components/icons/logo'
|
||||
import {
|
||||
@ -30,83 +25,68 @@ 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(() => {
|
||||
if (!input) return
|
||||
if (status === 'success') {
|
||||
input.value = ''
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [status])
|
||||
|
||||
// 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])
|
||||
|
||||
// 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>
|
||||
// )
|
||||
// }
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
success: boolean
|
||||
aboutLinks: { href: string; title: string }[]
|
||||
communityLinks: { href: string; title: string }[]
|
||||
connectLinks: { href: string; title: string }[]
|
||||
@ -124,45 +104,6 @@ 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>()
|
||||
|
||||
// const YOUR_ACCESS_TOKEN = process.env.HUBSPOT_API_KEY
|
||||
|
||||
// const hubspotClient = new hubspot.Client({
|
||||
// accessToken: YOUR_ACCESS_TOKEN
|
||||
// })
|
||||
|
||||
// hubspotClient.apiRequest({
|
||||
// method: 'POST',
|
||||
// path: '/api/emailSignup',
|
||||
// body: { key: 'value' }
|
||||
// })
|
||||
|
||||
// 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')
|
||||
@ -210,8 +151,8 @@ export const Footer = ({ data }: Props) => {
|
||||
)
|
||||
}, [show])
|
||||
|
||||
// const url =
|
||||
// 'https://xylm.us20.list-manage.com/subscribe/post?u=97d7d4662c941dd625d4c4261&id=b72fe1118a'
|
||||
const url =
|
||||
'https://xylm.us20.list-manage.com/subscribe/post?u=97d7d4662c941dd625d4c4261&id=b72fe1118a'
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -228,34 +169,7 @@ export const Footer = ({ data }: Props) => {
|
||||
>
|
||||
Sign-up for our <br /> Newsletter
|
||||
</Heading>
|
||||
|
||||
<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
|
||||
<MailchimpSubscribe
|
||||
url={url}
|
||||
// @ts-ignore
|
||||
render={({ subscribe, status, message }) => (
|
||||
@ -265,7 +179,7 @@ export const Footer = ({ data }: Props) => {
|
||||
message={message}
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
/>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import axios from 'axios'
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
const DEV_KEY = process.env.HUBSPOT_API_KEY
|
||||
const HUBSPOT_PORTAL_ID = '22316985'
|
||||
const HUBSPOT_FORM_GUID = '5d0cab17-2376-44bc-bbe9-cb477bff0360'
|
||||
type Response = {
|
||||
success: boolean
|
||||
email?: string
|
||||
}
|
||||
|
||||
export default async (req: NextApiRequest, res: NextApiResponse<Response>) => {
|
||||
const { email, pageUri } = req.body
|
||||
const { method } = req
|
||||
|
||||
if (method !== 'POST') {
|
||||
return res.status(405).end()
|
||||
}
|
||||
|
||||
if (typeof email !== 'string') {
|
||||
return res.status(400).json({ success: false })
|
||||
}
|
||||
|
||||
try {
|
||||
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=${DEV_KEY}`,
|
||||
data: {
|
||||
fields: [{ name: 'email', value: email }],
|
||||
context: { pageUri }
|
||||
},
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
res.status(200).json({ success: true, email })
|
||||
} catch (error) {
|
||||
return res.status(500).json({ success: false })
|
||||
}
|
||||
}
|
||||
11
src/types/index.d.ts
vendored
11
src/types/index.d.ts
vendored
@ -1,11 +0,0 @@
|
||||
export {}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
hbspt: string
|
||||
}
|
||||
|
||||
interface HubspotForm {
|
||||
'react-hubspot-form': any
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user