shadcn.io is not affiliated with official shadcn/ui
Dispute Resolution Storefront Block for React Aria
A damage case page for a furniture shop: a four-step case timeline, three offers (refund, replacement, store credit with a 10 percent bonus) with derived amounts and dates, a note and Accept offer that closes the case.
Installation
Overview
Show a customer where a complaint stands and what the shop will do, with this case page for React with React Aria. A header names the maker and the case. In a hairline frame with a plus mark on each corner, the first band is the case timeline: Submitted, Reviewed, Offer made and Closed, with typed dates and a current step worked out against a typed date. Under it the shop's three offers for an oak table with a split leg: a refund in 3 to 5 days, a replacement in 5 to 7 days, and store credit now with a 10 percent bonus, each with its amount and dates derived in cents from the price and the date, chosen with native radios. An optional note goes with the answer. Accept offer is the one Shine Button: it closes the case in the page, fills in the last step and locks the offers, and Reopen the case undoes it. Built from Textarea, Field, Button, Shine Button and Guides. For returns, claims and support portals.
FAQ
How are the amounts and dates worked out?
ITEM_CENTS is the table's price. A refund is that price, a replacement is no charge, and store credit adds BONUS_PERCENT percent rounded down, all in whole cents. Date ranges are the typed AS_OF plus each offer's days, in UTC, and the offers stay open for 13 days.
How does the timeline know the current step?
Each step has a typed date, or none. A step is done when its date is on or before AS_OF, and the current step is the last one done. Accepting gives the Closed step the same date, so it becomes current.
What does Accept offer do?
It closes the case in the page only: the Closed step fills in, the offers and the note lock, and the status says Accepted in this demo. Nothing is refunded, shipped or credited. Wire it by posting the case id, the offer id and the note to your case system.
Can the offers change with the case?
Yes. Offers are a typed list and detailText, amountOf and timingText read them, so a damage case, a late delivery and a wrong item can each carry their own set and rules.