Solution: Multi-Step Order Form

Use a parent-owned draft to keep Cart, Shipping, Payment, and Review responsive, run step-level and async promo validation without blocking navigation, and surface accessible errors without global spinners.

We'll cover the following...

Here is the multi-step order form implementation that uses a parent-owned draft to keep step navigation stable, runs step-scoped field validation to block invalid progression, performs async promo checks with stale request cancellation to avoid UI stalls, and applies a schema-level validation gate at submit time with an announced error summary. It treats submission as a coordinated transaction using React 19 (useActionState, useOptimistic, useTransition) to prevent duplicate in-flight submits, show a clear Submitting… state, and render an optimistic receipt that either confirms or rolls back without resetting the wizard or losing user input.