Moheeb Zara
da25950988
Phase 4 self-audit: alreadySubmitted was a page-load snapshot, so a member who submitted a form/waiver step then navigated Back and Forward would insert a second submission. Track submitted steps in session state and treat them as already-submitted.
356 lines
14 KiB
TypeScript
356 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { toast } from 'sonner'
|
|
import { BrandMark } from '@/components/brand-mark'
|
|
import { SafeMarkdown } from '@/components/safe-markdown'
|
|
import { FormRenderer } from '@/components/forms/form-renderer'
|
|
import type { FormField } from '@/lib/forms-schema'
|
|
import {
|
|
markOnboardingStepDone,
|
|
finishOnboarding,
|
|
skipOnboarding,
|
|
updateMyProfile,
|
|
submitForm,
|
|
} from '@/lib/actions'
|
|
|
|
type StepType = 'welcome' | 'code_of_conduct' | 'profile' | 'payment' | 'content' | 'form'
|
|
|
|
interface StepFormDef {
|
|
id: string
|
|
title: string
|
|
kind: string
|
|
legalText: string | null
|
|
fields: FormField[]
|
|
}
|
|
|
|
interface Step {
|
|
id: string
|
|
step_type: StepType
|
|
title: string
|
|
body: string | null
|
|
config: Record<string, unknown>
|
|
is_required: boolean
|
|
formDef?: StepFormDef | null
|
|
alreadySubmitted?: boolean
|
|
}
|
|
|
|
interface Props {
|
|
spaceName: string
|
|
steps: Step[]
|
|
canSkip: boolean
|
|
profile: {
|
|
display_name: string
|
|
handle: string
|
|
bio: string
|
|
skills: string[]
|
|
interests: string[]
|
|
}
|
|
}
|
|
|
|
export function OnboardingFlow({ spaceName, steps, canSkip, profile: initialProfile }: Props) {
|
|
const router = useRouter()
|
|
const [index, setIndex] = useState(0)
|
|
const [busy, setBusy] = useState(false)
|
|
const [acked, setAcked] = useState<Record<string, boolean>>({})
|
|
const [profile, setProfile] = useState(initialProfile)
|
|
// Controlled raw text for the skills field so edits survive navigating
|
|
// Back/forward and the user sees exactly what they typed (no normalize).
|
|
const [skillsText, setSkillsText] = useState(initialProfile.skills.join(', '))
|
|
const [formAnswers, setFormAnswers] = useState<Record<string, Record<string, unknown>>>({})
|
|
const [formConsent, setFormConsent] = useState<Record<string, boolean>>({})
|
|
// Form steps already submitted in THIS session. Prevents a second insert if
|
|
// the member navigates Back then Forward over a form/waiver step (the
|
|
// server-side alreadySubmitted prop is a snapshot from page load).
|
|
const [submittedNow, setSubmittedNow] = useState<Record<string, boolean>>({})
|
|
|
|
const step = steps[index]
|
|
const isLast = index === steps.length - 1
|
|
const requireAck = step.config?.require_ack === true
|
|
const ackLabel = (step.config?.ack_label as string) || 'I have read and agree'
|
|
const ackOk = !requireAck || acked[step.id]
|
|
|
|
const isFormStep = step.step_type === 'form'
|
|
const formDef = step.formDef ?? null
|
|
const effectiveSubmitted = step.alreadySubmitted === true || submittedNow[step.id] === true
|
|
const formActionable = isFormStep && !!formDef && !effectiveSubmitted
|
|
const isWaiver = formDef?.kind === 'waiver'
|
|
const consentOk = !formActionable || !isWaiver || formConsent[step.id] === true
|
|
|
|
async function advance() {
|
|
setBusy(true)
|
|
await markOnboardingStepDone(step.id)
|
|
setBusy(false)
|
|
if (isLast) {
|
|
await finish()
|
|
} else {
|
|
setIndex(i => i + 1)
|
|
}
|
|
}
|
|
|
|
async function finish() {
|
|
setBusy(true)
|
|
const result = await finishOnboarding()
|
|
setBusy(false)
|
|
if (result.error) { toast.error(result.error); return }
|
|
router.push('/dashboard')
|
|
}
|
|
|
|
async function handleSkipAll() {
|
|
setBusy(true)
|
|
const result = await skipOnboarding()
|
|
setBusy(false)
|
|
if (result.error) { toast.error(result.error); return }
|
|
router.push('/dashboard')
|
|
}
|
|
|
|
async function saveProfileAndAdvance() {
|
|
setBusy(true)
|
|
const result = await updateMyProfile({
|
|
display_name: profile.display_name.trim() || undefined,
|
|
handle: profile.handle.trim() || null,
|
|
bio: profile.bio.trim() || null,
|
|
skills: profile.skills,
|
|
interests: profile.interests,
|
|
})
|
|
if ('error' in result && result.error) { setBusy(false); toast.error(result.error); return }
|
|
await markOnboardingStepDone(step.id)
|
|
setBusy(false)
|
|
if (isLast) await finish()
|
|
else setIndex(i => i + 1)
|
|
}
|
|
|
|
async function submitFormStep() {
|
|
setBusy(true)
|
|
// No form to fill (already done, or misconfigured/unpublished): treat as a
|
|
// plain non-blocking step so a member is never trapped.
|
|
if (formActionable && formDef) {
|
|
const res = await submitForm({
|
|
formId: formDef.id,
|
|
answers: formAnswers[step.id] ?? {},
|
|
consent: isWaiver ? formConsent[step.id] === true : undefined,
|
|
})
|
|
if ('error' in res && res.error) {
|
|
setBusy(false)
|
|
toast.error(res.error)
|
|
return
|
|
}
|
|
setSubmittedNow(p => ({ ...p, [step.id]: true }))
|
|
}
|
|
await markOnboardingStepDone(step.id)
|
|
setBusy(false)
|
|
if (isLast) await finish()
|
|
else setIndex(i => i + 1)
|
|
}
|
|
|
|
const progressPct = Math.round(((index) / steps.length) * 100)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-sidebar flex flex-col">
|
|
<header className="px-4 md:px-6 py-4 flex items-center gap-2 border-b border-sidebar-border">
|
|
<BrandMark className="w-5 h-5 text-primary" />
|
|
<span className="font-mono text-sm font-bold text-white">{spaceName}</span>
|
|
{canSkip && (
|
|
<button
|
|
onClick={handleSkipAll}
|
|
disabled={busy}
|
|
className="ml-auto font-mono text-[11px] text-sidebar-foreground/60 hover:text-white transition"
|
|
>
|
|
Skip for now
|
|
</button>
|
|
)}
|
|
</header>
|
|
|
|
<div className="h-1 bg-sidebar-border">
|
|
<div className="h-1 bg-primary transition-all duration-300" style={{ width: `${progressPct}%` }} />
|
|
</div>
|
|
|
|
<main className="flex-1 flex items-start justify-center p-4 md:p-8">
|
|
<div className="w-full max-w-2xl bg-card border border-border rounded-lg mt-6 md:mt-12">
|
|
<div className="px-6 py-4 border-b border-border flex items-center justify-between">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
|
Step {index + 1} of {steps.length}
|
|
</p>
|
|
{step.is_required && (
|
|
<span className="font-mono text-[10px] text-amber-600">required</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="px-6 py-6">
|
|
<h1 className="font-sans text-xl font-semibold text-foreground mb-4">{step.title}</h1>
|
|
|
|
{step.step_type === 'profile' ? (
|
|
<div className="space-y-4">
|
|
{step.body && <SafeMarkdown>{step.body}</SafeMarkdown>}
|
|
<div>
|
|
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Display name</label>
|
|
<input
|
|
type="text"
|
|
value={profile.display_name}
|
|
onChange={e => setProfile({ ...profile, display_name: e.target.value })}
|
|
maxLength={100}
|
|
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Handle</label>
|
|
<input
|
|
type="text"
|
|
value={profile.handle}
|
|
onChange={e => setProfile({ ...profile, handle: e.target.value })}
|
|
maxLength={50}
|
|
placeholder="optional"
|
|
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Bio</label>
|
|
<textarea
|
|
value={profile.bio}
|
|
onChange={e => setProfile({ ...profile, bio: e.target.value })}
|
|
rows={3}
|
|
maxLength={2000}
|
|
placeholder="optional"
|
|
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">Skills (comma separated)</label>
|
|
<input
|
|
type="text"
|
|
value={skillsText}
|
|
onChange={e => {
|
|
setSkillsText(e.target.value)
|
|
setProfile({ ...profile, skills: e.target.value.split(',').map(s => s.trim()).filter(Boolean).slice(0, 40) })
|
|
}}
|
|
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : step.step_type === 'payment' ? (
|
|
<div className="space-y-4">
|
|
{step.body && <SafeMarkdown>{step.body}</SafeMarkdown>}
|
|
{typeof step.config?.payment_url === 'string' && step.config.payment_url && (
|
|
<a
|
|
href={step.config.payment_url as string}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 bg-primary text-white text-sm font-sans px-4 py-2 rounded hover:bg-primary/90 transition"
|
|
>
|
|
Set up payment
|
|
</a>
|
|
)}
|
|
</div>
|
|
) : step.step_type === 'form' ? (
|
|
<div className="space-y-4">
|
|
{step.body && <SafeMarkdown>{step.body}</SafeMarkdown>}
|
|
{!formDef ? (
|
|
<p className="font-sans text-sm text-muted-foreground">
|
|
This form is not available right now. You can continue.
|
|
</p>
|
|
) : effectiveSubmitted ? (
|
|
<p className="font-sans text-sm text-muted-foreground">
|
|
You have already completed this. You can continue.
|
|
</p>
|
|
) : (
|
|
<>
|
|
{isWaiver && formDef.legalText && (
|
|
<div className="max-h-72 overflow-y-auto whitespace-pre-wrap rounded border border-border bg-muted/30 p-3 font-sans text-sm">
|
|
{formDef.legalText}
|
|
</div>
|
|
)}
|
|
<FormRenderer
|
|
fields={formDef.fields}
|
|
values={formAnswers[step.id] ?? {}}
|
|
onChange={(k, v) =>
|
|
setFormAnswers(p => ({ ...p, [step.id]: { ...(p[step.id] ?? {}), [k]: v } }))
|
|
}
|
|
idPrefix={`ob-${step.id}`}
|
|
/>
|
|
{isWaiver && (
|
|
<label className="flex items-start gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={formConsent[step.id] === true}
|
|
onChange={e => setFormConsent(p => ({ ...p, [step.id]: e.target.checked }))}
|
|
className="mt-0.5"
|
|
/>
|
|
<span className="font-sans text-sm text-foreground">
|
|
I have read and agree to the terms above.
|
|
</span>
|
|
</label>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{step.body && <SafeMarkdown>{step.body}</SafeMarkdown>}
|
|
{requireAck && (
|
|
<label className="flex items-start gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={!!acked[step.id]}
|
|
onChange={e => setAcked({ ...acked, [step.id]: e.target.checked })}
|
|
className="mt-0.5"
|
|
/>
|
|
<span className="font-sans text-sm text-foreground">{ackLabel}</span>
|
|
</label>
|
|
)}
|
|
{requireAck && !acked[step.id] && (
|
|
<p className="font-sans text-xs text-muted-foreground">Check the box above to continue.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="px-6 py-4 border-t border-border flex items-center justify-between gap-3">
|
|
<button
|
|
onClick={() => setIndex(i => Math.max(0, i - 1))}
|
|
disabled={index === 0 || busy}
|
|
className="font-sans text-sm text-muted-foreground hover:text-foreground transition disabled:opacity-40"
|
|
>
|
|
Back
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
{step.step_type === 'payment' && !isLast && (
|
|
<button
|
|
onClick={advance}
|
|
disabled={busy}
|
|
className="font-sans text-sm text-muted-foreground hover:text-foreground transition px-3 py-2"
|
|
>
|
|
Remind me later
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={
|
|
step.step_type === 'profile'
|
|
? saveProfileAndAdvance
|
|
: step.step_type === 'form'
|
|
? submitFormStep
|
|
: advance
|
|
}
|
|
disabled={busy || !ackOk || !consentOk}
|
|
className="bg-primary text-white text-sm font-sans px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
|
>
|
|
{busy
|
|
? 'Saving...'
|
|
: isLast
|
|
? 'Finish'
|
|
: step.step_type === 'payment'
|
|
? 'I have set this up'
|
|
: formActionable
|
|
? isWaiver
|
|
? 'Sign & continue'
|
|
: 'Submit & continue'
|
|
: 'Continue'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|