Janady13/thatstupidcomputer / apps/web/src/components/DemoForm.tsx

1import { useEffect, useRef, useState, type FormEvent } from 'react'; 2import { Link } from 'react-router'; 3import { useAnimation } from '../animation/orchestration/AnimationProvider'; 4import { analytics } from '../measurement'; 5import { Icon } from './Icons'; 6import { applyDemoIntent, parseDemoIntent, type DemoIntent } from './demo-intent.mjs'; 7import { DemoCompanion } from './DemoCompanion'; 8import { INQUIRY_FORM_ID, type ProjectIntent } from '../../../../packages/site/inquiry.mjs'; 9 10type ProjectType = ProjectIntent; 11type Fields = { name: string; email: string; business: string; website: string; projectType: ProjectType; message: string; consent: boolean; companyWebsite: string }; 12type FieldErrors = Partial<Record<keyof Fields, string>>; 13const initial: Fields = { name: '', email: '', business: '', website: '', projectType: 'unsure', message: '', consent: false, companyWebsite: '' }; 14 15function validate(fields: Fields): FieldErrors { 16 const errors: FieldErrors = {}; 17 if (fields.name.trim().length < 2) errors.name = 'Please enter your name.'; 18 if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(fields.email.trim())) errors.email = 'Please enter a valid email address.'; 19 if (fields.business.trim().length < 2) errors.business = 'What is your business called?'; 20 if (fields.website.trim()) { 21 try { const url = new URL(fields.website.trim()); if (!['https:', 'http:'].includes(url.protocol) || !url.hostname.includes('.')) throw new Error(); } 22 catch { errors.website = 'Enter a full website address, such as https://example.com, or leave this blank.'; } 23 } 24 if (fields.message.trim().length < 10) errors.message = 'Tell us a little more (at least 10 characters).'; 25 if (!fields.consent) errors.consent = 'Please agree so we can respond to your request.'; 26 return errors; 27} 28 29export function DemoForm({ submissionId: suppliedId = '', email, intentSearch = '' }: { submissionId?: string; email?: string; intentSearch?: string }) { 30 const [fields, setFields] = useState<Fields>(initial); 31 const [errors, setErrors] = useState<FieldErrors>({}); 32 const [status, setStatus] = useState<'idle' | 'pending' | 'accepted' | 'error'>('idle'); 33 const [message, setMessage] = useState(''); 34 const [enhanced, setEnhanced] = useState(false); 35 const [submissionId, setSubmissionId] = useState(suppliedId); 36 const [intent, setIntent] = useState<DemoIntent | null>(null); 37 const edited = useRef(false); 38 const intentApplied = useRef(false); 39 const form = useRef<HTMLFormElement>(null); 40 const feedback = useRef<HTMLDivElement>(null); 41 const pending = useRef(false); 42 const activeRequest = useRef<AbortController | null>(null); 43 const { cue } = useAnimation(); 44 useEffect(() => { setEnhanced(true); if (!suppliedId) setSubmissionId(globalThis.crypto?.randomUUID?.() ?? ''); return () => activeRequest.current?.abort(); }, [suppliedId]); 45 useEffect(() => { 46 // Initial HTML and hydration always agree. The character's finite choice is 47 // applied once after hydration, only while the whole form remains untouched. 48 if (intentApplied.current || edited.current) return; 49 const next = parseDemoIntent(intentSearch); 50 if (!next) return; 51 intentApplied.current = true; 52 setFields(previous => applyDemoIntent(previous, next, edited.current)); 53 setIntent(next); 54 }, [intentSearch]); 55 useEffect(() => { if (status === 'accepted' || (status === 'error' && Object.keys(errors).length === 0)) feedback.current?.focus(); }, [status, errors]); 56 57 function update<K extends keyof Fields>(key: K, value: Fields[K]) { 58 edited.current = true; 59 if (key === 'projectType') setIntent(null); 60 setFields(previous => ({ ...previous, [key]: value })); 61 setErrors(previous => ({ ...previous, [key]: undefined })); 62 if (status === 'error') { setStatus('idle'); setMessage(''); } 63 } 64 65 function focusError(next: FieldErrors) { 66 const key = Object.keys(next)[0]; 67 requestAnimationFrame(() => form.current?.querySelector<HTMLElement>(`[name="${key}"]`)?.focus()); 68 } 69 70 async function submit(event: FormEvent<HTMLFormElement>) { 71 event.preventDefault(); 72 if (pending.current) return; 73 const nextErrors = validate(fields); 74 setErrors(nextErrors); 75 if (Object.keys(nextErrors).length) { 76 setStatus('error'); setMessage('A couple of details need your attention.'); focusError(nextErrors); 77 analytics.demoSubmitError('validation'); return; 78 } 79 pending.current = true; setStatus('pending'); setMessage('Sending your request…'); cue('inquiry.pending'); 80 const controller = new AbortController(); activeRequest.current = controller; 81 const timeout = window.setTimeout(() => controller.abort(), 25000); 82 try { 83 const response = await fetch('/api/demo', { 84 method: 'POST', credentials: 'same-origin', signal: controller.signal, 85 headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, 86 body: JSON.stringify({ ...fields, name: fields.name.trim(), email: fields.email.trim(), business: fields.business.trim(), website: fields.website.trim(), message: fields.message.trim(), submissionId }), 87 }); 88 const result = await response.json().catch(() => null); 89 if (response.ok && result?.ok === true && result.status === 'accepted' && typeof result.requestId === 'string') { 90 setStatus('accepted'); setMessage('Your demo request has been accepted.'); cue('inquiry.accepted'); analytics.generateLead('smtp_accepted', result.requestId); 91 } else { 92 const safeErrors: FieldErrors = {}; 93 for (const key of Object.keys(initial) as (keyof Fields)[]) if (typeof result?.fieldErrors?.[key] === 'string') safeErrors[key] = result.fieldErrors[key]; 94 setErrors(safeErrors); setStatus('error'); cue('inquiry.failed'); 95 const fallback = response.status === 429 ? 'Too many requests arrived at once. Please wait a few minutes and try again.' : response.status === 503 ? 'The message service is temporarily unavailable. Your request has not been confirmed. Please try again shortly.' : 'Your request could not be confirmed. Please try again.'; 96 setMessage(typeof result?.message === 'string' ? result.message : fallback); 97 analytics.demoSubmitError(response.status === 429 ? 'rate_limited' : response.status === 503 ? 'unavailable' : Object.keys(safeErrors).length ? 'validation' : 'server'); 98 if (Object.keys(safeErrors).length) focusError(safeErrors); 99 } 100 } catch { 101 setStatus('error'); setMessage('The connection was interrupted before we could confirm your request. It may still have been sent. Your details are still here; please avoid sending it again immediately.'); cue('inquiry.failed'); analytics.demoSubmitError('network'); 102 } finally { window.clearTimeout(timeout); activeRequest.current = null; pending.current = false; } 103 } 104 105 const field = (name: keyof Fields) => ({ id: `demo-${name}`, name, 'aria-invalid': !!errors[name], 'aria-describedby': errors[name] ? `demo-${name}-error` : undefined }); 106 const error = (name: keyof Fields) => errors[name] ? <span className="field-error" id={`demo-${name}-error`}>{errors[name]}</span> : null; 107 108 if (status === 'accepted') return <div className="form-accepted" ref={feedback} tabIndex={-1} role="status"> 109 <DemoCompanion status="accepted" intent={intent} /> 110 <span className="accepted-mark"><Icon name="check" width="36" height="36" /></span> 111 <p className="eyebrow">A very good first step</p><h2>Message accepted.<br />Computer delighted.</h2> 112 <p>Thanks for the introduction. Your demo request has been accepted for sending, and we’ll use the details you shared to follow up by email.</p> 113 <p className="small-note">No need to send it twice. Go enjoy being good at your business.</p> 114 <Link className="button button-dark" to="/">Back to the workshop <Icon name="arrow" /></Link> 115 </div>; 116 117 return <form id={INQUIRY_FORM_ID} className="demo-form" action="/api/demo" method="post" onSubmit={submit} noValidate={enhanced} ref={form} aria-label="Request your website demo" aria-busy={status === 'pending'}> 118 <DemoCompanion status={status} intent={intent} /> 119 <input type="hidden" name="submissionId" value={submissionId} /> 120 <div className="form-trap" aria-hidden="true"><label htmlFor="company-website">Company website<input id="company-website" name="companyWebsite" tabIndex={-1} autoComplete="off" value={fields.companyWebsite} onChange={event => update('companyWebsite', event.target.value)} /></label></div> 121 <p className="form-key">All fields required unless marked optional.</p> 122 <div className="form-grid"> 123 <label className="form-field" htmlFor="demo-name"><span>Your name</span><input {...field('name')} autoComplete="name" required minLength={2} maxLength={100} value={fields.name} onChange={event => update('name', event.target.value)} placeholder="The human behind the business" />{error('name')}</label> 124 <label className="form-field" htmlFor="demo-email"><span>Email address</span><input {...field('email')} type="email" autoComplete="email" required maxLength={254} value={fields.email} onChange={event => update('email', event.target.value)} placeholder="you@yourbusiness.com" />{error('email')}</label> 125 <label className="form-field" htmlFor="demo-business"><span>Business name</span><input {...field('business')} autoComplete="organization" required minLength={2} maxLength={160} value={fields.business} onChange={event => update('business', event.target.value)} placeholder="What should we call your business?" />{error('business')}</label> 126 <label className="form-field" htmlFor="demo-website"><span>Current website <em>optional</em></span><input {...field('website')} type="url" autoComplete="url" maxLength={300} value={fields.website} onChange={event => update('website', event.target.value)} placeholder="https://yourbusiness.com" />{error('website')}</label> 127 </div> 128 <label className="form-field" htmlFor="demo-projectType"><span>What can we help with?</span><select {...field('projectType')} value={fields.projectType} onChange={event => update('projectType', event.target.value as ProjectType)} required><option value="unsure">Help me figure that out</option><option value="design">A new website</option><option value="rescue">Rescue my current website</option><option value="search">Help customers find me</option><option value="care">Keep my website working</option></select>{error('projectType')}</label> 129 <label className="form-field" htmlFor="demo-message"><span>What would a better website do for you?</span><textarea {...field('message')} rows={4} required minLength={10} maxLength={4000} value={fields.message} onChange={event => update('message', event.target.value)} placeholder="More inquiries? A clearer story? An end to saying ‘please ignore our website’? Tell us a little about it." />{error('message')}</label> 130 <div className="consent-field"><label htmlFor="demo-consent"><input {...field('consent')} type="checkbox" value="true" required checked={fields.consent} onChange={event => update('consent', event.target.checked)} /><span>I agree to the use of these details to respond to my request. <Link to="/privacy/" target="_blank" rel="noopener">Privacy details<span className="sr-only"> (opens in a new tab)</span></Link>.</span></label>{error('consent')}</div> 131 <div ref={feedback} tabIndex={-1} className={`form-feedback ${status === 'error' ? 'is-error' : ''}`} aria-live="polite" role={status === 'error' ? 'alert' : 'status'}>{message}</div> 132 <button type="submit" className="button button-rust form-submit" disabled={status === 'pending'}>{status === 'pending' ? 'Sending your request…' : 'Get my demo'}<Icon name={status === 'pending' ? 'clock' : 'arrow'} /></button> 133 <p className="form-reassurance">A conversation about your business. No obligation to commission a project.</p> 134 {email && <p className="form-alternative">Prefer email? <a href={`mailto:${email}`}>{email}</a></p>} 135 </form>; 136} 137