Refund requestPro

Return part of an order in the thread: items, reason, where the money goes, and a tracker after.

Markdown

On this page

ProReturn part of an order: tick items, pick a reason and the refund does its sums, postage included.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/refund-request

Usage

tsx

import { RefundRequest } from "@/components/ui/chatcn/pro/refund-request"

<RefundRequest
  orderId="NF-20418"
  items={order.items}
  deadline="2 Dec"
  returnPostage={6.95}
  onSubmit={(request) => returns.create(request)}
/>

Tick what goes back; an item with more than one unit gets a stepper for how many. A locked item stays in the list, greyed, with the reason in full. Reasons are one tap each; those marked note open a short field, and those marked buyerPays take returnPostage off the refund, said on its own line. Refund to the original payment or to store credit with its bonus, and the total rolls as the sums change. The button names the amount. Pass steps to show the tracker instead of the form: requested, approved, on its way back, received, refunded, each with a date and a note, or declined with what to do next.

Examples

States

ProOn its way back, refunded, declined with what to do, a failed request, disabled.

Props

Prop	Type	Notes
`items`	`{ id, title, detail?, image?, price, quantity, locked? }[]`	Unit prices; `locked` says why it cannot go back
`orderId`, `deadline`	`string`	Header
`reasons`	`{ value, label, buyerPays?, note? }[]`	Six sensible defaults
`methods`	`{ value, label, detail?, bonus? }[]`	Original payment and store credit by default
`defaultQuantities`, `defaultReason`	`Record<string, number>`, `string`	The agent's guess
`returnPostage`	`number`	Taken off for `buyerPays` reasons
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`onSubmit`	`({ items, reason, note, method, amount }) => unknown \| Promise<unknown>`	Reject with an Error to show it
`steps`, `amount`	`{ status: "requested" \| "approved" \| "in-transit" \| "received" \| "refunded" \| "declined", date?, note? }[]`, `number`	Shows the tracker
`disabled`	`boolean`	Locks the form
`labels`	`Partial<RefundRequestLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	Each item, its stepper, the reasons, the refund methods, then the button
Space	Tick an item
Arrow keys	Move within reasons and methods (native radios)

Accessibility

Items are native checkboxes named with the product; locked ones are disabled with the reason as text.
Each stepper is a group named for its product.
The tracker is an ordered list; the current step has aria-current="step".
Sending and errors are status and alert messages that say what happens next.

Motion

The refund total rolls changed digits in 300 ms. The note field and the tracker fade up 4 px in 180 ms. Reduced motion swaps digits in place and keeps the fades.