Multi-Step Wizard

'use server'
import { z } from 'zod'
import { withZod } from 'hookform-action-core/with-zod'

// Single schema covering all wizard steps
const onboardingSchema = z.object({
  // Step 1: Personal Info
  firstName: z.string().min(2, 'First name must be at least 2 characters'),
  lastName:  z.string().min(2, 'Last name must be at least 2 characters'),
  email:     z.string().email('Enter a valid email address'),
  // Step 2: Company
  company: z.string().min(1, 'Company name is required'),
  role:    z.string().min(1, 'Role is required'),
  // Step 3: Plan
  plan: z.enum(['free', 'pro', 'enterprise'], {
    errorMap: () => ({ message: 'Please select a plan' }),
  }),
})

export const onboardingAction = withZod(onboardingSchema, async (data) => {
  // All fields are available and typed here
  await createAccount(data)
  return { success: true }
})

'use client'
import { useActionForm } from 'hookform-action'
import { useState } from 'react'
import { onboardingAction } from './actions'

// Map each step index to the fields it owns
const STEP_FIELDS = {
  0: ['firstName', 'lastName', 'email'],
  1: ['company', 'role'],
  2: ['plan'],
} as const

export function OnboardingWizard() {
  const [step, setStep] = useState(0)

  const {
    register,
    handleSubmit,
    trigger,
    clearPersistedData,
    formState: { errors, isPending, isSubmitSuccessful },
  } = useActionForm(onboardingAction, {
    defaultValues: {
      firstName: '', lastName: '', email: '',
      company: '', role: '',
      plan: '',
    },
    // Automatically save progress to sessionStorage
    persistKey: 'onboarding-wizard',
    persistDebounce: 250,
    onSuccess: () => {
      // Remove the draft once the wizard is complete
      clearPersistedData()
    },
  })

  // Validate only the current step's fields before advancing
  const handleNext = async () => {
    const fields = STEP_FIELDS[step as 0 | 1 | 2]
    const valid = await trigger(fields as never[])
    if (valid) setStep((s) => s + 1)
  }

  if (isSubmitSuccessful) {
    return (
      <div className="text-center py-16">
        <p className="text-2xl font-bold text-green-400">🎉 Welcome aboard!</p>
        <p className="text-gray-400 mt-2">Your account is ready.</p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit()}>
      {/* Progress indicator */}
      <div className="flex gap-2 mb-8">
        {['Personal', 'Company', 'Plan'].map((label, i) => (
          <div key={label} className="flex items-center gap-2 flex-1">
            <div
              className={
                i <= step
                  ? 'w-6 h-6 rounded-full bg-brand-600 text-white text-xs flex items-center justify-center'
                  : 'w-6 h-6 rounded-full bg-gray-800 text-gray-500 text-xs flex items-center justify-center'
              }
            >
              {i + 1}
            </div>
            <span className={i <= step ? 'text-sm text-gray-200' : 'text-sm text-gray-600'}>
              {label}
            </span>
          </div>
        ))}
      </div>

      {/* Step 1 */}
      {step === 0 && (
        <div className="space-y-4">
          <div>
            <label>First Name</label>
            <input {...register('firstName')} />
            {errors.firstName && <p className="text-red-400">{errors.firstName.message}</p>}
          </div>
          <div>
            <label>Last Name</label>
            <input {...register('lastName')} />
            {errors.lastName && <p className="text-red-400">{errors.lastName.message}</p>}
          </div>
          <div>
            <label>Email</label>
            <input type="email" {...register('email')} />
            {errors.email && <p className="text-red-400">{errors.email.message}</p>}
          </div>
        </div>
      )}

      {/* Step 2 */}
      {step === 1 && (
        <div className="space-y-4">
          <div>
            <label>Company</label>
            <input {...register('company')} />
            {errors.company && <p className="text-red-400">{errors.company.message}</p>}
          </div>
          <div>
            <label>Role</label>
            <input {...register('role')} />
            {errors.role && <p className="text-red-400">{errors.role.message}</p>}
          </div>
        </div>
      )}

      {/* Step 3 */}
      {step === 2 && (
        <div className="space-y-3">
          <label>Choose a plan</label>
          {(['free', 'pro', 'enterprise'] as const).map((p) => (
            <label key={p} className="flex items-center gap-2">
              <input type="radio" value={p} {...register('plan')} />
              {p.charAt(0).toUpperCase() + p.slice(1)}
            </label>
          ))}
          {errors.plan && <p className="text-red-400">{errors.plan.message}</p>}
        </div>
      )}

      {/* Navigation */}
      <div className="flex gap-3 mt-8">
        {step > 0 && (
          <button type="button" onClick={() => setStep((s) => s - 1)}>
            Back
          </button>
        )}
        {step < 2 ? (
          <button type="button" onClick={handleNext}>
            Next
          </button>
        ) : (
          <button type="submit" disabled={isPending}>
            {isPending ? 'Creating account…' : 'Complete Setup'}
          </button>
        )}
      </div>
    </form>
  )
}