shadcn.io is not affiliated with official shadcn/ui
Refund Request Checkout Block for Radix UI
A homewares refund by condition: five order lines checked against a 30-day window and a sale-is-final rule, ticked lines open a quantity stepper and Unopened, Opened or Used (100%, 90%, 70%), and a card or store credit with a 5% bonus changes a total worked out in cents.
Installation
Overview
Make a refund depend on what is actually coming back, with this refund request for React with Radix UI. A compact header from Jessop and Lane, a homewares shop, sits over a hairline frame with a plus mark on each corner. Five order lines are checked against two typed rules before anything can be ticked: items bought in the sale are final, and an item delivered more than 30 days before the order date is out of its return window. Those show a dash and the reason in words. The others have a Checkbox; ticking one opens, under it, a quantity stepper (up to the quantity ordered) and three condition choices, Unopened, Opened and Used, with the share that comes back (100%, 90% and 70%) and one sentence saying what was kept. Glassware cannot be returned used. A second group chooses where the refund goes, the original card or store credit with a 5% bonus, and the total, worked out in whole cents and rounded half up per line, counts up and down (Counting Number). The foot has a polite status line and Request refund, the only Shine Button. For returns in any shop where condition matters.
FAQ
How is a line judged returnable?
reasonOf returns a sentence or an empty string. A line with final set is refused as a sale item. Otherwise the delivery date plus WINDOW_DAYS is compared with AS_OF, the order date, using whole day numbers from Date.UTC, never the clock; a line past its window says on which date the window ended. A line with no reason is returnable. Change the constants and the data, and every sentence follows.
How is the refund worked out?
For each ticked line: price times quantity returned times the share for its condition, divided by 100 and rounded half up to the cent, all in whole numbers. The total is the sum of the lines; store credit adds 5% of that sum, also rounded half up. The panel shows the worth of what comes back, what was kept for condition, the bonus and the refund, and each line states its own deduction in words ("Opened: 90% of $72.00 comes back, $7.20 kept.").
Why are the conditions radio buttons, and why can Used be unavailable?
Exactly one condition applies, so native radios fit: one tab stop per group, the arrow keys to move and a spoken group name ("Condition of Glass carafe"). The Used option is disabled with its reason in text ("Not taken back used") for a line whose usedOk flag is false, rather than hidden, so people see why it is missing.
How does the quantity stepper behave at its limits?
It runs from 1 to the quantity on the order. At either end the button stays in place and reads as unavailable, and pressing it says in the status line why ("Your order had 2 of Stoneware mug set."). To return none, untick the line.
How does it look on a phone?
Each line stacks its tick, name and refund; the condition options stack in one column under the stepper; the method group sits above the totals. The foot is pinned to the bottom of the screen with the status line above a full-width Request refund.
What stays local in the demo, and how do I wire it up?
Everything. Request refund only says "Return started in this demo" and the amount; nothing is sent and no money moves. In your app, send the chosen lines, quantities, conditions and method to your returns API, re-check the rules on the server, and show a refusal in the status line.