Refund Timeline Success Block for React

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.

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.

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.

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.

The axis wraps into two rows of five days with the heavier stretch running across both, the list stays one row per fact, and the Shine Button ends on the first screen. The page still fills the screen's height and sits a little above the middle, so nothing jumps.

The Shine Button and the "Contact Satchelry" text link are links to your own routes. The button is a Shine Button with render set to an a element and nativeButton={false}.