shadcn.io is not affiliated with official shadcn/ui
Order Cancellation Storefront Block for Ark UI
Cancel an order line by line: tick the lines that have not shipped, see the refund in whole cents for the card ending 4242, and confirm in an alert dialog that names every line.
Installation
Overview
Let shoppers stop what has not left the building, with this order cancellation for React with Ark UI. A header names the page and the shop, Sparrowfield, a toy maker. In a hairline frame with a plus mark on each corner, a list holds the order's lines, each with a drawn thumbnail, its quantity and price, and a Checkbox, unless a typed rule says the line can't be cancelled: a shipped line reads "Shipped Tuesday" and a made-to-order line reads "Made to order, already started", each with a dash where the box would be. The ticked lines add up to a refund in whole cents for the card ending 4242, and the delivery charge stays because other lines still ship. The foot's destructive Button opens an Alert Dialog that names the lines and the refund; confirming marks them Cancelled and the refund line says nothing was refunded in this demo. It's built from Checkbox, Alert Dialog, Button and Guides, with a CSS entrance only. For an order page, a toy shop or any store that ships in parts.
FAQ
Which lines can be cancelled?
That is a typed rule on each line: its stage is open, started (made to order) or shipped, and only an open line has a box. The reason shown ("Shipped Tuesday") is worked out from the ship date. Change reasonOf and ableOf to match your own policy, and enforce the same rule on the server.
How is the refund worked out?
It is the sum of the ticked lines, quantity times unit price, in whole cents. Delivery is refunded only when a whole order is cancelled, so here it stays charged and the page says why. The card is named in text only ("ending 4242"): no card number is ever asked for.
Why does the button open a dialog?
Cancelling can't be taken back, so the dialog names every line and the refund and offers Keep these lines first. The action is the catalog's destructive variant. After you confirm, the lines read Cancelled, the refund line states the amount "noted in this demo: nothing was refunded", and focus moves to the order heading.
What stays local, and how do I make it real?
Everything. The ticks and the cancelled state live in the block. Replace confirm with a call that cancels the lines by id and returns the refund, and show the result the same way.