Promo appliedPro

A promo code as a ticket stub: the saving, the new total against the old, and codes the agent found.

Markdown

On this page

ProThe agent found two codes: apply one and the new total rolls in against the old one.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/promo-applied

Usage

tsx

import { PromoApplied } from "@/components/ui/chatcn/pro/promo-applied"

<PromoApplied
  subtotal={138}
  suggestions={foundCodes}
  onApply={(code) => store.checkCode(code)}
  onPromoChange={(promo) => cart.setPromo(promo)}
/>

Before a code is in, the card is a field plus any codes the agent found, each with what it saves and one Apply. Applied, it becomes a ticket: the code on a stub with a perforated edge and two notches, the description and its terms, the saving, and You pay with the new total rolling in against the struck old one. A code with minSpend above the subtotal stays pending: the stub greys, an amber line says exactly how much more to add, and a thin bar fills toward it. onApply resolves with the promo or rejects with an Error whose message is shown under the field, for an expired or unknown code.

Examples

States

ProApplied, waiting on a bigger order, a long offer, an expired code, disabled.

Props

Prop	Type	Notes
`subtotal`	`number`	Order total before any code
`promo`, `defaultPromo`, `onPromoChange`	`{ code, description, savings, ends?, scope?, minSpend? } \| null`	The applied code
`suggestions`	`Promo[]`	Codes found for this order
`onApply`	`(code) => Promo \| Promise<Promo>`	Check a typed or suggested code
`onRemove`	`(code) => void`	The stub's remove button
`defaultCode`, `error`	`string`	Prefill the field; show an error from your side
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`disabled`	`boolean`	Locks the field and buttons
`labels`	`Partial<PromoAppliedLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	The field, Apply, then each found code's Apply
Enter	Apply the typed code

Accessibility

The field has a real label and aria-invalid with the error linked.
Each found code's Apply button is named with the code.
You pay is a status message; the struck total is read as the old amount, not as a strike.
Pending and applied are said in words on the stub, not by color alone.

Motion

The ticket fades up 4 px in 180 ms and the new total rolls changed digits in 300 ms. The pending bar scales in 300 ms. Reduced motion swaps digits in place and keeps the fades.