Order Status
Customer order confirmation, package tracking and returns. Handles split shipments, delayed or failed deliveries, final-sale items and pending payments.
Order Status is the page a customer lands on after checkout and comes back to while they wait. OrderConfirmation says thanks by name, shows the order number, the email the receipt went to, the expected delivery dates, what they bought and where it’s going. A check mark draws in and the details rise into place in about 800 ms, and content is readable well before that.
OrderTracking follows Baymard’s six tracking essentials. Each package gets a card with a large delivery date, a progress bar that shows before anything ships, the carrier and a linked tracking number you can copy, what’s inside with thumbnails, and the full shipping history newest first. Split orders read Package 1 of 2, and items that haven’t shipped sit in their own Preparing to ship card.
Problems are spelled out rather than hidden. A delayed shipment turns its step amber and says the new date, a missed delivery says when the next attempt is, a cancelled order says whether the payment was released or refunded, and a pending payment says nothing ships until it clears.
ReturnRequest is a two-step return: pick items and quantities, then a reason and where the refund goes. Final-sale items, items still in transit and items past the return window stay visible but disabled, each with the reason. The refund estimate updates as you choose, including the discount and tax share and any return shipping fee, and the confirmation shows a drop-off code and the refund timeline.
Procurez-vous HextaUI Pro
Un seul paiement débloque tous les blocs, y compris les prochains. Voir les tarifs.
Ajouter le registre Pro à components.json
components.json Ajouter votre token
Créez un token sur votre page de compte et placez-le dans
.env.localsous le nomHEXTAUI_PRO_TOKEN.Ajouter le block
pnpm dlx shadcn@latest add @hextaui-pro/order-status
From the Shopify Customer Account API
Map a Customer Account API order to Order once. Line items, fulfillments with their tracking information and shipment events, and the latest shipment status come across as they are, so the status page reads straight from Shopify.
Tracking from EasyPost or AfterShip webhooks
Turn a tracker.updated webhook into fulfillment events and a shipment status. The same mapping works for AfterShip checkpoints. Store the result and OrderTracking shows the new date, step and history on the next render.
Returns through your API
ReturnRequest posts the chosen lines, reason and refund method to your endpoint and shows the label it returns. Throw with a message and it appears next to the submit button, with everything the customer picked still in place.
Anatomie
Les parties à composer, de l’extérieur vers l’intérieur.
| Partie | Description |
|---|---|
OrderConfirmation | The thank-you page: greeting, delivery estimate, summary, addresses, payment and an optional account prompt. |
OrderTracking | One card per package with the delivery date, progress, carrier, contents and history. |
ReturnRequest | A compact return wizard that ends with a drop-off code and refund timeline. |
Order | The shared order model, also used by the dashboard blocks. |
orderPackages, returnEligibility, estimateRefund | Group lines into packages, decide what can be returned and why, and work out a refund. |
OrderConfirmation
Also takes div props.
| Prop | Type | Par défaut |
|---|---|---|
orderThe order to confirm. paymentStatus pending or failed switches the heading and message. | Order | – |
deliveryEstimateISO dates for the delivery window. null hides it. | { from: string; to?: string } | null | order.estimatedDelivery |
celebrateA single, quiet confetti burst, once per session. Never fires with reduced motion. | boolean | false |
autoFocusMove focus to the heading on mount. | boolean | true |
onCreateAccountShows the guest account prompt. Throw to show the message under the field. | (password: string) => void | Promise<void> | – |
actionsButtons at the end, such as Track your order. | ReactNode | – |
localeLocale for dates and money. | Intl.LocalesArgument | "en-US" |
timeZoneTime zone for dates. Defaults to the viewer’s. | string | – |
labelsEvery user-facing string. | Partial<OrderConfirmationLabels> | – |
OrderTracking
Also takes div props.
| Prop | Type | Par défaut |
|---|---|---|
orderFulfillments become package cards; unshipped quantities become a Preparing to ship card. | Order | – |
nowUsed for today and tomorrow in delivery dates. | string | Date | Date.now() |
defaultExpandedOpen every shipping history instead of the latest two updates. | boolean | false |
actionsButtons beside the heading, such as Start a return. | ReactNode | – |
localeLocale for dates and money. | Intl.LocalesArgument | "en-US" |
timeZoneTime zone for event times. | string | – |
labelsStep names, statuses and messages. | Partial<OrderTrackingLabels> | – |
ReturnRequest
Also takes div props.
| Prop | Type | Par défaut |
|---|---|---|
orderThe order to return items from. | Order | – |
onSubmitCreate the return. Resolve with an id, code, carrier, dropOffBy, labelUrl or qrCodeUrl. Throw to show the message. | (request: ReturnRequestInput) => Promise<ReturnRequestResult | void> | – |
windowDaysDays after delivery that an item can be returned. | number | 30 |
eligibilityOverride the built-in rules for a line. | (line, order) => ReturnEligibility | undefined | – |
reasonsReason options. note shows a text box for details. | { value: string; label: string; note?: boolean }[] | – |
refundMethodsWhere the refund can go. | ("original" | "store_credit")[] | ["original", "store_credit"] |
returnShippingFeeTaken off refunds to the original payment. Store credit returns are free. | Money | null | null |
onCancelShows a Cancel button. | () => void | – |
onDoneShows a Done button after the return starts. | () => void | – |
supportHrefLink shown when nothing can be returned. | string | – |
nowUsed for the return window. | string | Date | Date.now() |
labelsEvery user-facing string. | Partial<ReturnRequestLabels> | – |
| Prop | Type | Par défaut |
|---|---|---|
linesEach with quantity, price, fulfilledQuantity, refundedQuantity and returnable. | OrderLine[] | – |
fulfillmentsPackages with status, carrier, trackingNumber, trackingUrl, estimatedDelivery, deliveredAt, lines and events. | Fulfillment[] | – |
refundsAmounts, lines and restock flags. | Refund[] | – |
paymentStatuspending, authorized, paid, partially_refunded, refunded, voided or failed. | PaymentStatus | – |
estimatedDeliveryThe window shown before anything ships. | { from: string; to?: string } | – |
cancelledAtSet for cancelled orders. | string | – |
| Touche | Action |
|---|---|
| Tab | Moves through tracking links, copy buttons, history toggles and return choices. |
| Space | Toggles an item in a return, opens a history, or picks a refund method. |
| ArrowUpArrowDown | Moves between reasons in the reason menu and between refund methods. |
| Enter | Activates links and buttons and submits the account form. |
- The confirmation heading takes focus on load, and each return step moves focus to its heading, so screen reader users hear where they are.
- Each progress bar is an ordered list. The current step has aria-current="step", and every step says whether it’s completed, current or upcoming, with its date.
- Status is never shown by color alone: delays and failed deliveries have an icon and words, and disabled return items say why. Tracking links say they open the carrier in a new tab.
- Copying a tracking or order number and changing the return selection are announced in a polite live region. Errors use role="alert". Every animation, including the check draw and confetti, is skipped with reduced motion.
Construit avec
Les composants HextaUI gratuits dont Order Status est constitué. Chacun s’installe séparément.
Code
9 fichiers, ajoutés à components/blocks/order-status.