{navItems.map((navItem) => (
- {navItem.heading}
+ {navItem.heading}
{navItem.links.map((link) => (
-
+
))}
))}
-
+
diff --git a/src/components/HubspotForm.tsx b/src/components/HubspotForm.tsx
new file mode 100644
index 00000000..d5e4e187
--- /dev/null
+++ b/src/components/HubspotForm.tsx
@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+
+import styled from 'styled-components'
+
+const HubspotFormSC = styled.div(({ theme: _ }) => ({
+ display: 'flex',
+ justifyContent: 'center',
+ width: '100%',
+}))
+
+export function HubspotForm({
+ region = 'na1',
+ portalId = '22363579',
+ formId,
+}: {
+ region?: string
+ portalId?: string
+ formId: string
+}) {
+ const id = `hbspt-f-${portalId}-${formId}`
+
+ useEffect(() => {
+ const createForm = () => {
+ console.log('createForm', window.hbspt)
+ const ret = window?.hbspt?.forms?.create({
+ region,
+ portalId,
+ formId,
+ target: `#${id}`,
+ })
+
+ console.log('createForm return', ret)
+ }
+
+ if (window?.hbspt?.forms.create) {
+ createForm()
+
+ return
+ }
+ const script = document.createElement('script')
+
+ script.src = 'https://js.hsforms.net/forms/v2.js'
+ document.body.appendChild(script)
+
+ script.addEventListener('load', createForm)
+
+ return () => {
+ script.removeEventListener('load', createForm)
+ }
+ }, [formId, id, portalId, region])
+
+ return
+}
diff --git a/src/components/NewsletterSignupForm.tsx b/src/components/NewsletterSignupForm.tsx
new file mode 100644
index 00000000..e5a468af
--- /dev/null
+++ b/src/components/NewsletterSignupForm.tsx
@@ -0,0 +1,200 @@
+import {
+ type FormEventHandler,
+ useCallback,
+ useEffect,
+ useId,
+ useRef,
+ useState,
+} from 'react'
+
+import {
+ ArrowRightIcon,
+ Input,
+ Tooltip,
+ usePrevious,
+} from '@pluralsh/design-system'
+
+import ReCAPTCHA from 'react-google-recaptcha'
+
+import { isValidEmail } from '@src/utils/text'
+
+import { FooterHeading, FooterNavLink } from './FooterNav'
+import { ResponsiveText } from './Typography'
+
+const NEWSLETTER_FORM_NAME = 'newsletter-signup'
+
+export function NewsletterSignupForm() {
+ const [email, setEmail] = useState('')
+ const prevEmail = usePrevious(email)
+ const recaptchaRef = useRef<{ reset: () => void } | null>(null)
+ const [recaptchaVal, setRecaptchaVal] = useState('')
+
+ const emailInputId = useId()
+ const [response, setResponse] = useState<{
+ type: 'success' | 'error'
+ message: string
+ } | null>(null)
+
+ useEffect(() => {
+ // Clear response if email field is changed,
+ if (
+ email !== prevEmail &&
+ // unless field was changed to empty because of successful submission
+ !(response?.type === 'success' && !email)
+ ) {
+ setResponse(null)
+ }
+ }, [email, prevEmail, response?.type])
+
+ function setError(error: string | Error) {
+ setResponse({
+ type: 'error',
+ message: `There was a problem subscribing to the newsletter: ${error}`,
+ })
+ }
+ const submitEmail = useCallback
>(
+ (event) => {
+ event.preventDefault()
+ setResponse(null)
+
+ const formData = new FormData(event.target as HTMLFormElement)
+
+ if (!recaptchaVal) {
+ setResponse({
+ type: 'error',
+ message:
+ 'Please complete the reCAPTCHA before submitting your email.',
+ })
+
+ return
+ }
+
+ if (!isValidEmail(formData.get('email')?.toString())) {
+ setResponse({
+ type: 'error',
+ message: 'Please enter a valid email address.',
+ })
+
+ return
+ }
+ const body = new URLSearchParams(formData as any).toString()
+
+ recaptchaRef?.current?.reset()
+ setRecaptchaVal('')
+
+ if (process.env.NODE_ENV === 'development') {
+ setResponse({
+ type: 'error',
+ message: 'Must be server-deployed to submit form.',
+ })
+
+ return
+ }
+ fetch('/forms/newsletter.html', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body,
+ })
+ .then((e) => {
+ console.log('e', e)
+ console.log('e.ok', e.ok)
+ console.log('e.status', e.status)
+ console.log('e.statusText', e.statusText)
+ if (e.ok) {
+ setResponse({
+ type: 'success',
+ message: 'Thank you for subscribing to the newsletter',
+ })
+ setEmail('')
+ } else {
+ setError(e.statusText)
+ }
+ })
+ .catch((error) => {
+ console.log('error', error)
+ setError(error)
+ })
+ },
+ [recaptchaVal]
+ )
+
+ return (
+
+ )
+}
diff --git a/src/components/types/window.d.ts b/src/components/types/window.d.ts
index e4de222e..7a159b9c 100644
--- a/src/components/types/window.d.ts
+++ b/src/components/types/window.d.ts
@@ -30,6 +30,7 @@ interface Window {
}
// Hubspot
_hsq?: any[]
+ hbspt?: { forms: { create: (any) => Record } }
// Gtag
dataLayer?: any[]
}
diff --git a/src/generated/pages.json b/src/generated/pages.json
index 74f0099e..caf652ca 100644
--- a/src/generated/pages.json
+++ b/src/generated/pages.json
@@ -5,6 +5,12 @@
{
"path": "/community"
},
+ {
+ "path": "/contact-sales"
+ },
+ {
+ "path": "/contact"
+ },
{
"path": "/"
},