Payout Route Success Block for React

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.

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.

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.

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.

The route stays on one line as three narrow columns, with each stop's name and day wrapping under its tile, so the whole page, down to the View payout history button, fits the first screen and nothing scrolls sideways at 320 pixels.