Order receiptPro

The receipt after a purchase: lines, totals on leaders, refunds, payment and a return window that drains.

Markdown

On this page

ProTwo items with a welcome code, totals on leaders and the return window running.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/order-receipt

Usage

tsx

import { OrderReceipt } from "@/components/ui/chatcn/pro/order-receipt"

<OrderReceipt
  merchant="Northfold Supply"
  orderId="NF-20481"
  lines={order.lines}
  shipping={0}
  tax={24.36}
  paidWith="Card ending 4417"
  returnWindow={{ days: 30, daysLeft: 27, until: "3 Dec" }}
  onStartReturn={startReturn}
/>

Totals sit on dotted leaders, the way paper receipts guide the eye from label to amount, with the currency sign and cents a shade lighter so the column reads by its whole numbers. The total is computed from the lines, shipping, discount and tax unless you pass total. Refunded lines are struck through with a Refunded tag, and refundedAmount adds Refunded and Net paid rows. The return window is a thin meter that drains with the days left and turns amber in the last fifth; past the date it says the window closed and Start a return goes away. Long orders fold after visibleLines.

Examples

States

ProPartly refunded and long, refunded with the window closed, loading and error.

Props

Prop	Type	Notes
`merchant`, `orderId`, `placedAt`	`string`	Header; the order id copies
`status`	`"paid" \| "refunded" \| "partially-refunded" \| "cancelled"`	Default `paid`
`lines`	`{ id, title, detail?, image?, price, quantity?, refunded? }[]`	Unit prices; line totals multiply
`shipping`, `discount`, `discountLabel`, `tax`, `taxLabel`, `total`		`0` shipping reads Free
`refundedAmount`	`number`	Adds Refunded and Net paid
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`paidWith`, `shipTo`	`string`	No network logos
`returnWindow`, `onStartReturn`	`{ days, daysLeft, until }`, `() => void`	The meter
`email`, `phone`	`string`	Merchant contact links
`visibleLines`	`number`	Default 3
`loading`, `error`, `onRetry`		States
`labels`	`Partial<OrderReceiptLabels>`	Every string, for translation

Accessibility

Totals are a description list, so each amount is read with its label; leaders are hidden.
Prices read as one amount each; the struck price of a refunded line is followed by Refunded.
The fold button uses aria-expanded and aria-controls.

Motion

None beyond the copy button's check. Receipts are records; they arrive still.