OrderConfirmation
The thank-you screen: the order number, where the receipt went, and the tracker.
SourcePackage @kerf-js/veneer
Preview
tsx
import { OrderConfirmation } from '@kerf-js/veneer'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@kerf.dev', role: 'Owner', team: 'Platform', initials: 'ML', }, { id: 'jun', name: 'Jun Tanaka', email: 'jun@kerf.dev', role: 'Admin', team: 'Platform', initials: 'JT', }, { id: 'priya', name: 'Priya Raman', email: 'priya@kerf.dev', role: 'Member', team: 'Web', initials: 'PR', }, { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@kerf.dev', role: 'Member', team: 'Web', initials: 'TO', }, { id: 'lena', name: 'Lena Fischer', email: 'lena@kerf.dev', role: 'Member', team: 'Data', initials: 'LF', }, { id: 'noor', name: 'Noor Haddad', email: 'noor@kerf.dev', role: 'Viewer', team: 'Data', initials: 'NH', }, { id: 'sam', name: 'Sam Okafor', email: 'sam@kerf.dev', role: 'Member', team: 'Mobile', initials: 'SO', }, { id: 'ines', name: 'Inés Vidal', email: 'ines@kerf.dev', role: 'Viewer', team: 'Mobile', initials: 'IV', },]Installation
npm install @kerf-js/veneerUsage
tsx
import { OrderConfirmation } from '@kerf-js/veneer'<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="step-title"]
step-title
RelatedOrder trackerCheckout