shadcn.io is not affiliated with official shadcn/ui
Refund Timeline Success Block for Ark UI
A confirmation page for a refund: the amount in the headline, ten business days drawn on an axis with the days the bank usually posts it, and a list of the refund, the card and a reference you can copy.
Installation
Overview
Tell a customer when their money lands with this refund confirmation page for React with Ark UI. It's the page Satchelry, a bag shop, shows after a refund: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. A success mark in a muted tile sits over the headline, which carries the amount, and one sentence says what was refunded. Under it, ten business days run along an axis from the day the refund was sent, weekends skipped: the first day is a solid node, the days banks usually post it (the third to the fifth) are drawn heavier, and a legend names both with their dates. A Data List gives the refund, the card it went back to with a two-letter tile in place of a logo, and a reference with a Copy Button. The Shine Button opens the billing history, the only colored control. It's built from Data List, Copy Button, Shine Button and Guides, with a CSS entrance only. For any store, marketplace or app that refunds.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was refunded: the page only describes a refund that already happened for a made-up customer. The one thing that really acts is the copy button, which puts the reference on the clipboard and says so in a polite status message (or says it could not). To wire it, replace the REFUND constant with what your payments provider returned: the amount in cents, the card's brand and last four digits, your order number and the refund's reference, and set AS_OF to the day the refund was created, read on the server so the page is the same for everyone. Point the button at your billing history.
How are the business days worked out?
From AS_OF and SHOWN: the helper walks forward one UTC day at a time, keeps the days that are not a Saturday or a Sunday and stops when it has ten, so the dates never depend on the visitor's clock or time zone. The days banks usually post it are typed in WINDOW (days 3 to 5 after the refund was sent). Bank holidays are not skipped; if your bank closes for them, add a list of holiday dates to the helper.
Why does it say usually, and never that the money has arrived?
A page rendered once can't know when a bank posts a refund, and banks differ, so the strip shows the window the processor usually quotes and the sentence says "usually". The axis marks the days; it doesn't track the payment. For a live status, load the refund's state from your provider and move the marker or swap the headline.
How is the amount shown in other languages?
The amount is kept in whole cents and formatted with Intl.NumberFormat, then wrapped in one left-to-right span, so the symbol, digits and decimals stay together in a right-to-left layout. The card's name and number sit in an isolated run for the same reason, and the dates are real time elements.