Order confirmation
Mobile app: every screen, state and flow in Order confirmation.
1 screens and overlays, 11 states, 2 flows. Frames show a real screenshot where one was captured and a wireframe card where the state needs data or conditions a device run cannot produce.
Flows
Order confirmation
Order Confirmed!
Loading your order
Polling every 3 s; message shows attempt n/10
Not reachable on a device: Transient loader; needs throttled network
Order Confirmed!
Order Confirmed!
Order document exists, even if payment status is pending
Needs data: Capture audit 2026-10-30. ios: Real checkout/payment required; do not bypass route allowlist. android: Real checkout/payment required; do not bypass route allowlist.
Branches and edge cases
Order Confirmed!
Order Processing timeout
No order after 30 s; screen flips to success if webhook lands later
Not reachable on a device: Needs a network fault, crash, race or code change to show
Order Confirmed!
Unable to load order details
Missing shopifyOrderId or order not visible; Please try again later
Needs data: Capture audit 2026-10-30. ios: Real checkout/payment required; do not bypass route allowlist. android: Real checkout/payment required; do not bypass route allowlist.
Order Confirmed!
No stamp or reward message
Screen shows no stamp earned, voucher used or points copy
Needs data: Capture audit 2026-10-30. ios: Real checkout/payment required; do not bypass route allowlist. android: Real checkout/payment required; do not bypass route allowlist.
Flow diagram
Checkout to first order view
Order Confirmed!
Loading your order (attempt n/10)
Waiting for webhook to create the order
Not reachable on a device: Transient loader; needs throttled network
Order Confirmed!
Order Confirmed!
Order document exists, even if payment status is pending
Needs data: Capture audit 2026-10-30. ios: Real checkout/payment required; do not bypass route allowlist. android: Real checkout/payment required; do not bypass route allowlist.
Branches and edge cases
Order Confirmed!
Order Processing
30s timeout; History and Shopping buttons
Not reachable on a device: Needs a network fault, crash, race or code change to show
Order Confirmed!
Unable to load order details
Missing shopifyOrderId or order not visible; Please try again later
Needs data: Capture audit 2026-10-30. ios: Real checkout/payment required; do not bypass route allowlist. android: Real checkout/payment required; do not bypass route allowlist.
Order Confirmed!
No header or back control
Only Android hardware back leaves without a button; no deep link entry
Needs data: Capture audit 2026-10-30. ios: Real checkout/payment required; do not bypass route allowlist. android: Real checkout/payment required; do not bypass route allowlist.
Flow diagram
Screens and states
Order Confirmed!
Order Confirmed!
Needs data: Needs a real completed checkout or a real shopifyOrderId
(app)/order-confirmationOrder Confirmed!
Post checkout confirmation with order number, total and next-step buttons
src/app/(app)/order-confirmation.tsxEntry
- Bag checkout completion (replace)
Exits
- View Order Details → /(app)/orders/[id]
- Continue Shopping → Home
- View Order History → /(app)/orders
- Back to Home → Home
- Notification permission modal after 1.2 s
States · 11
src/app/(app)/order-confirmation.tsx:37src/features/orders/hooks/use-convex-orders.ts:436src/app/(app)/order-confirmation.tsx:83packages/backend/convex/webhooks/shopify.ts:1507src/app/(app)/order-confirmation.tsx:109src/shared/utils/route-validation.ts:33src/features/notifications/hooks/use-offer-notifications-after-order.ts:12src/app/(app)/order-confirmation.tsxsrc/app/(app)/order-confirmation.tsx:37src/app/(app)/order-confirmation.tsx:43src/app/(app)/order-confirmation.tsx:54