110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState, type FormEvent } from 'react'
|
|
import { Check } from 'lucide-react'
|
|
import { CTAButton } from './cta-button'
|
|
|
|
type Mode = 'button' | 'input' | 'submitting' | 'success' | 'error'
|
|
|
|
type BetaSignupProps = {
|
|
subject: string
|
|
message: string
|
|
buttonClassName?: string
|
|
submitClassName?: string
|
|
inputClassName?: string
|
|
helperTextClassName?: string
|
|
successClassName?: string
|
|
errorClassName?: string
|
|
formClassName?: string
|
|
wrapperClassName?: string
|
|
}
|
|
|
|
export function BetaSignup({
|
|
subject,
|
|
message,
|
|
buttonClassName = '',
|
|
submitClassName = '',
|
|
inputClassName = '',
|
|
helperTextClassName = 'text-xs text-muted-foreground/60 font-serif',
|
|
successClassName = 'inline-flex items-center gap-2 rounded-md border border-primary/20 bg-primary/[0.05] px-5 py-2.5 font-sans text-sm text-primary font-medium',
|
|
errorClassName = 'text-xs text-red-400/80 font-sans text-center',
|
|
formClassName = 'flex items-center gap-2',
|
|
wrapperClassName = 'flex flex-col items-center gap-2',
|
|
}: BetaSignupProps) {
|
|
const [mode, setMode] = useState<Mode>('button')
|
|
const [email, setEmail] = useState('')
|
|
const [error, setError] = useState('')
|
|
|
|
async function onSubmit(e: FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
if (mode === 'submitting') return
|
|
setMode('submitting')
|
|
setError('')
|
|
|
|
try {
|
|
const res = await fetch('https://api.web3forms.com/submit', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Accept: 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
access_key: '85d3252e-5890-450c-aa93-12dc89c7c9b5',
|
|
subject,
|
|
from_name: 'Greywall waitlist',
|
|
email,
|
|
message,
|
|
botcheck: '',
|
|
}),
|
|
})
|
|
|
|
const data = await res.json()
|
|
if (data.success) {
|
|
setMode('success')
|
|
setEmail('')
|
|
} else {
|
|
setMode('error')
|
|
setError(data.message || 'Something went wrong. Try again?')
|
|
}
|
|
} catch {
|
|
setMode('error')
|
|
setError('Network error. Try again?')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={wrapperClassName}>
|
|
{mode === 'button' && (
|
|
<CTAButton onClick={() => setMode('input')} className={buttonClassName}>
|
|
Talk to us
|
|
<span aria-hidden="true">→</span>
|
|
</CTAButton>
|
|
)}
|
|
{(mode === 'input' || mode === 'submitting') && (
|
|
<form onSubmit={onSubmit} className={formClassName}>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="you@company.com"
|
|
autoFocus
|
|
className={inputClassName}
|
|
/>
|
|
<CTAButton type="submit" disabled={mode === 'submitting'} className={submitClassName}>
|
|
{mode === 'submitting' ? '...' : 'Join'}
|
|
</CTAButton>
|
|
</form>
|
|
)}
|
|
{mode === 'success' && (
|
|
<div className={successClassName}>
|
|
<Check className="h-4 w-4" />
|
|
Thanks — we'll be in touch.
|
|
</div>
|
|
)}
|
|
{mode === 'error' && <p className={errorClassName}>{error}</p>}
|
|
<p className={helperTextClassName}>Running Greywall across multiple teams? We're building a managed governance layer.</p>
|
|
</div>
|
|
)
|
|
}
|