OrderConfirmation
The thank-you screen: the order number, where the receipt went, and the tracker.
SourcePackage @weft-js/warp
Preview
tsx
import { OrderConfirmation } from '@weft-js/warp'export function Placed() { return ( <OrderConfirmation orderId="T-2041" email={PEOPLE[0]!.email} stage="packed" note="Standard delivery, arrives Thu 6 Nov." onTrack={() => {}} onContinue={() => {}} /> )}const PEOPLE = [ { id: 'mara', name: 'Mara Lindqvist', email: 'mara@weft.dev', role: 'Owner', team: 'Platform', initials: 'ML' }, { id: 'jun', name: 'Jun Tanaka', email: 'jun@weft.dev', role: 'Admin', team: 'Platform', initials: 'JT' }, { id: 'priya', name: 'Priya Raman', email: 'priya@weft.dev', role: 'Member', team: 'Web', initials: 'PR' }, { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@weft.dev', role: 'Member', team: 'Web', initials: 'TO' }, { id: 'lena', name: 'Lena Fischer', email: 'lena@weft.dev', role: 'Member', team: 'Data', initials: 'LF' }, { id: 'noor', name: 'Noor Haddad', email: 'noor@weft.dev', role: 'Viewer', team: 'Data', initials: 'NH' }, { id: 'sam', name: 'Sam Okafor', email: 'sam@weft.dev', role: 'Member', team: 'Mobile', initials: 'SO' }, { id: 'ines', name: 'Inés Vidal', email: 'ines@weft.dev', role: 'Viewer', team: 'Mobile', initials: 'IV' },]Installation
npm install @weft-js/warpUsage
tsx
import { OrderConfirmation } from '@weft-js/warp'<OrderConfirmation orderId="T-2041" email={PEOPLE[0]!.email} stage="packed" note="Standard delivery, arrives Thu 6 Nov." onTrack={() => {}} onContinue={() => {}} />Accessibility
- It is announced politely when it appears.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
orderId | string | — | The order number. |
email | string | — | Where the receipt went. |
note | string | — | A line about delivery. |
stage | OrderStage | — | How far along the order is. |
summary | unknown | — | The lines and totals, if you want them here. |
titleId | string | — | An id for the heading. |
| Event | Type | Default | Description |
|---|---|---|---|
onTrack | (() => void) | — | Shows Track order. |
onContinue | (() => void) | — | Shows Continue shopping. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="confirmation"] [data-part="mark"]
markstep-title
RelatedOrder trackerCheckout