Skip to main content

​
OrderConfirmation

The confirmation screen displayed after a successful order placement. Shows the order number, item summary, estimated ready/delivery time, and real-time status updates.

​
Preview

View in Storybook

​
Import

import { OrderConfirmation } from '@/components/OrderConfirmation'

​
Usage

<OrderConfirmation
  order={placedOrder}
  onTrackOrder={handleTrackOrder}
/>

​
Props

​
order
Order
required
The placed order object with items, totals, status, and fulfillment details.
​
onTrackOrder
() => void
Optional callback to navigate to the order tracking view.

​
Behavior

  • Displays order number with a checkmark success animation
  • Shows estimated ready time or delivery ETA
  • Lists ordered items with quantities and prices
  • Real-time status updates via polling or WebSocket
  • “Track your order” CTA for delivery orders
  • “Order again” button to reorder the same items