Guide a multi-product reservation flow
Guide reservations through products in order, preserve each draft, validate before advancing, and submit one combined payload.Description
Requirements
Export ReservationFlow from src/App.tsx.
Present products in caller order with an accurate current-step indicator.
Preserve answers when navigating backward and forward between products.
Block Next and identify missing required fields for the current product.
Submit one immutable record containing current answers for every product.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.
Back navigation
Fill Product A, advance, then go Back
Product A's answers remain populated
Present products in caller order with an accurate current-step indicator.
Final submit
All required fields for two products are complete
submit receives both product records once
Preserve answers when navigating backward and forward between products.
Constraints
Use React state and effects only where the observable component contract requires themUse injected adapters instead of accessing network, storage, timers, or browser globals directlyKeep one authoritative state transition for each user or adapter event
Hints
Hint 1
Start with the product-step-order behavior and make its observable result deterministic.
Hint 2
Model retains-product-drafts independently before combining it with the remaining states.
Hint 3
Verify the boundary described by submits-combined-reservation without changing caller-owned input.