Coordinate payment-form readiness
Gate payment submission on the readiness of every required field and explain which fields are still unavailable.Description
Requirements
Export PaymentFormReadiness from src/App.tsx.
Match readiness by stable field name rather than array position.
Disable submission while any required field is missing or while a submission is pending.
List each missing required field in a named status region.
Enable and invoke onSubmit once all required fields are ready.
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.
Incomplete form
cardNumber is ready but postalCode is not
Submit is disabled and postalCode is named
Match readiness by stable field name rather than array position.
Complete form
All required fields become ready
Submit is enabled and invokes onSubmit once
Disable submission while any required field is missing or while a submission is pending.
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 tracks-field-readiness behavior and make its observable result deterministic.
Hint 2
Model disables-unready-action independently before combining it with the remaining states.
Hint 3
Verify the boundary described by enables-when-complete without changing caller-owned input.