Order Tracking
Order tracking: stages, carrier, tracking number and history. Pro · Shop and payments › Cart and orders
Order status page: placed → paid → shipped → out for delivery → delivered, with timestamps, the delivery estimate, carrier and tracking number, scan history, items and help actions.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add order-trackingnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { OrderTracking } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
orderNumber * | string | Order number in the heading, formatted by labels.order. | |
status * | 'placed' | 'paid' | 'shipped' | 'outForDelivery' | 'delivered' | Furthest stage reached. | |
timestamps | Partial<Record<OrderTrackingStage, DateInput>> | {} | When each stage was reached. |
exception | ReactNode | A delivery problem at the current stage (failed attempt, address issue); shown as a warning. | |
eta | DateInput | { from: DateInput; to: DateInput } | Expected delivery: a day, or a window. | |
carrier | OrderTrackingCarrier | Carrier section: name, a copyable tracking number and, with url, a link to the carrier's tracking page. | |
events | OrderTrackingEvent[] | [] | Carrier scan events, newest first. The first three show until expanded. |
items | OrderTrackingItem[] | [] | Products in the shipment, with thumbnail, variant, quantity and line total. |
currency | string | 'USD' | Currency of item prices. Default USD. |
shippingAddress | ReactNode | Delivery address in a "Shipping to" section, rendered inside <address>. | |
actions | ReactNode | Help buttons ("Contact support", "Start a return"). | |
headingLevel | 2 | 3 | 4 | 2 | Heading level of the order title; sections use the next level. Default 2. |
locale | string | BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's. | |
labels | Partial<OrderTrackingLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Shopping Cart Drawer — Slide-out cart
- Checkout Summary — Order summary at checkout
- Checkout Form — Checkout: shipping, address type, payment and field validation
- Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
- Product Card — Product card
- Product Grid — Product catalog
- Product Filters — Catalog filters
- Product Spotlight — Featured product: tagged photo, price, rating and actions
- Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
- Guided Product Finder — Product finder wizard: branching questions and why a product fits
- Location Card — Store location: distance, opening hours, pickup options and ordering
- Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless
Previous: Checkout Form · Next: Invoice · All Shop and payments