shadcn.io is not affiliated with official shadcn/ui
Payout Route Success Block for React Aria
A full-height confirmation for a payout that is on its way: three stops from the platform through the processor to the bank, each with its day and an arrival window that skips weekends, and the gross, fee and net behind the amount.
Installation
Overview
Show a creator where their money is, with this payout sent page for React with React Aria. It fills the screen between the page's two side rails and one band with a plus mark at each end, in a medium centred column. A check in a muted tile, the net amount in the heading and a sentence with the arrival window come first. A corner-marked panel follows in three bands: its heading, the route, and the sums. The route is three stops, Mintbranch, the payment processor and the bank, each with a two-letter tile in place of a logo, joined by a line that is solid as far as the money has gone, with a check on the stop it has passed and a hollow dot on the ones still ahead. The sums are the earnings, the fee and what is paid out, with the payout number and a Copy Button beside it. The Shine Button that opens the payout history is the only colored control. It's built from Copy Button, Shine Button and Guides, with a CSS entrance only. For marketplaces, creator platforms, affiliate programmes and any app that pays people out.
FAQ
What stays in the page, and how do I wire it for real?
Everything: the page describes a payout that was already sent for a fictional account, so nothing is paid or moved, and it holds no state. The only thing the browser really does is the clipboard: the Copy Button writes the payout number. Render the page once your payment provider reports the payout created, and fill GROSS, FEE_BP, PAYOUT_ID, ACCOUNT and STOPS from its payout object; the View payout history link is a placeholder href.
How are the fee and the amount paid out worked out?
In whole cents, so there is no floating-point error: the fee is the earnings times FEE_BP basis points (400 is 4%) rounded to a cent, and the amount paid out is the earnings minus the fee. The heading and the last row of the sums read the same number, and the fee row keeps its minus sign inside a left-to-right span, with "Minus" in text for a screen reader.
Where does the arrival window come from?
From a fixed day, never the visitor's clock. addBusinessDays counts forward from AS_OF and skips Saturdays and Sundays, so the processor releases a business day later and the bank gets the money two to three business days after the send: a payout sent on a Wednesday is expected between Friday and Monday. It doesn't know your bank's holidays, so if your provider returns an expected arrival date, use it in place of the helper.
How is the route drawn, and is it readable without the picture?
The three stops are an ordered list with a label, and each one's text says what happens there and when ("Sent, Oct 14, 09:12 UTC", "Releases, Oct 15", "Arrives, Oct 16 to Oct 19"). The tiles and the line are decoration: weight carries the order, since the stop the money has passed is filled and joined by a solid line and the others are hollow and joined by a hairline, never colour. The lettermark tiles are placeholders for logos you have the rights to use.