Challenge: Multi-Step Order Form
Build a transaction-safe, accessible multi-step React Order Form (Cart, Shipping, Payment, Review). Keep draft state in the parent, run step validation plus async promo checks without UI stalls, and submit with a React 19 transaction (useActionState, useOptimistic, useTransition) that locks duplicates and shows pending → confirmed (or rollback) results.
We'll cover the following...
Problem statement
A multi-step order form (wizard checkout) UI is required with four steps: Cart, Shipping, Payment, and Review and Submit. The interface must remain responsive while users move between steps, while validation runs (including async promo checks), and while the final submission is processed as a transaction. When validation fails, we must surface errors without collapsing the UI into global spinners or losing draft state. When submissions are in flight, duplicate submissions must be prevented, and the UI must clearly distinguish pending from confirmed ...