Multi-step form

1type SubmitState = { status: 'idle' } | { status: 'submitting' } |2  { status: 'error'; message: string } | { status: 'success'; orderId: string };3type WizardState = {4  values: FormValues; touched: Set<keyof FormValues>;5  errors: Partial<Record<keyof FormValues, string>>;6  stepId: StepId; completed: Set<StepId>; submit: SubmitState;7};

1import { useReducer, useRef } from "react";2
3type Values = { email: string; address: string; country: string; taxId: string };4type StepId = "account" | "shipping" | "tax" | "review";5type Errors = Partial<Record<keyof Values, string>>;6type Step = {7  title: string;8  fields: (keyof Values)[];9  validate: (v: Values) => Errors;10  next: (v: Values) => StepId | null; // null means 'this is the last step'11};12
13const steps: Record<StepId, Step> = {14  account: {15    title: "Account",16    fields: ["email"],17    validate: (v) => (/^[^@\s]+@[^@\s]+$/.test(v.email) ? {} : { email: "Enter a valid email" }),18    next: () => "shipping",19  },20  shipping: {21    title: "Shipping",22    fields: ["address", "country"],23    validate: (v) => ({24      ...(v.address ? {} : { address: "Address is required" }),25      ...(v.country ? {} : { country: "Country is required" }),26    }),27    next: (v) => (v.country === "US" ? "tax" : "review"),28  },29  tax: {30    title: "Tax",31    fields: ["taxId"],32    validate: (v) => (v.taxId ? {} : { taxId: "Tax ID is required in the US" }),33    next: () => "review",34  },35  review: { title: "Review", fields: [], validate: () => ({}), next: () => null },36};37
38type Submit =39  | { status: "idle" } | { status: "submitting" }40  | { status: "error"; message: string } | { status: "success"; orderId: string };41type State = { values: Values; errors: Errors; stepId: StepId; history: StepId[]; submit: Submit };42type Action =43  | { type: "change"; field: keyof Values; value: string }44  | { type: "invalid"; errors: Errors }45  | { type: "advance"; to: StepId }46  | { type: "back" }47  | { type: "submit"; state: Submit };48
49function reducer(state: State, action: Action): State {50  switch (action.type) {51    case "change":52      return {53        ...state,54        values: { ...state.values, [action.field]: action.value },55        errors: { ...state.errors, [action.field]: undefined },56      };57    case "invalid":58      return { ...state, errors: action.errors };59    case "advance":60      return { ...state, stepId: action.to, history: [...state.history, state.stepId], errors: {} };61    case "back": {62      const history = [...state.history];63      const prev = history.pop();64      return prev ? { ...state, stepId: prev, history, errors: {} } : state;65    }66    case "submit":67      return { ...state, submit: action.state };68  }69}70
71export function Wizard({ placeOrder }: {72  placeOrder: (v: Values, idempotencyKey: string) => Promise<{ orderId: string }>;73}) {74  const [state, dispatch] = useReducer(reducer, {75    values: { email: "", address: "", country: "", taxId: "" },76    errors: {}, stepId: "account", history: [], submit: { status: "idle" },77  });78  const step = steps[state.stepId];79  const idempotencyKey = useRef(crypto.randomUUID()).current; // same key for every retry80
81  function focusFirstError(errors: Errors) {82    const first = Object.keys(errors)[0];83    if (first) requestAnimationFrame(() =>84      document.querySelector<HTMLElement>('[name="' + first + '"]')?.focus(),85    );86  }87
88  async function submit() {89    if (state.submit.status === "submitting") return; // client-side double-click guard90    dispatch({ type: "submit", state: { status: "submitting" } });91    try {92      const { orderId } = await placeOrder(state.values, idempotencyKey);93      dispatch({ type: "submit", state: { status: "success", orderId } });94    } catch {95      dispatch({ type: "submit", state: { status: "error", message: "Could not place the order." } });96    }97  }98
99  function onNext() {100    const errors = step.validate(state.values);101    if (Object.keys(errors).length > 0) {102      dispatch({ type: "invalid", errors });103      focusFirstError(errors);104      return;105    }106    const to = step.next(state.values);107    if (to) dispatch({ type: "advance", to });108    else submit();109  }110
111  if (state.submit.status === "success") {112    return <p role="status">Order {state.submit.orderId} placed.</p>;113  }114
115  return (116    <form onSubmit={(e) => { e.preventDefault(); onNext(); }}>117      <ol aria-label="Progress">118        {(Object.keys(steps) as StepId[]).map((id) => (119          <li key={id} aria-current={id === state.stepId ? "step" : undefined}>{steps[id].title}</li>120        ))}121      </ol>122
123      <h2>{step.title}</h2>124
125      {step.fields.map((field) => (126        <label key={field}>127          {field}128          <input129            name={field}130            value={state.values[field]}131            aria-invalid={Boolean(state.errors[field])}132            onChange={(e) => dispatch({ type: "change", field, value: e.target.value })}133          />134          {state.errors[field] && <span role="alert">{state.errors[field]}</span>}135        </label>136      ))}137
138      {state.submit.status === "error" && <p role="alert">{state.submit.message}</p>}139
140      <button type="button" disabled={state.history.length === 0} onClick={() => dispatch({ type: "back" })}>141        Back142      </button>143      <button type="submit" disabled={state.submit.status === "submitting"}>144        {step.next(state.values) === null ? "Place order" : "Next"}145      </button>146    </form>147  );148}