Order Confirmation Billing Block for React

The constants at the top hold the plan: PLAN_CENTS, SEAT_CENTS and SEATS, the add-on's price, LEFT and CYCLE (the days remaining and the cycle's length, for the proration), TAX_PERCENT and the three dates. The lines in WHENS are built from them, along with each line's explanation, and the totals are sums of the lines, so changing a price changes every figure that depends on it.

A monthly price times the days remaining over the days in the cycle, rounded to the cent, as the Why text for each line shows. Tax is the rate times that column's subtotal, rounded once. The header's "Charged today" is the Today column's total, so it can't disagree with the lines below it.

So asking never moves anything. If each line opened its own text, the columns would grow and push the button down. Here "Why" fills a band of fixed height under the columns, the line you asked about is marked as pressed, and a polite status message says what is showing.

Nothing is provisioned or charged: the button says "Workspace opened in this demo." Wire it to a link to the workspace your server created, and send the order number to your receipt email. Show the card brand and the last four digits only; collect and store cards only in your payment provider's hosted fields.

Each column has a heading and a date, each line's Why button names the line and its amount for a screen reader, and the total of a column that costs nothing says "Nothing to pay" instead of a bare zero. Status is words and weight, not colour. Amounts are in one direction.

The three columns stack with a hairline between them, in the order they happen, and the explanation band follows. The foot with the workspace button is pinned to the bottom of the screen.