Account Restored Invoice Success Block for React

Everything: the page describes an invoice that was already paid for a fictional account, so nothing is charged, restored or sent, and it holds no state. Render it after your billing provider reports the invoice paid and your own server has lifted the suspension, and fill INVOICE, SUSPENDED, SETTLED, CARD, NEXT and NEXT_AMOUNT from the invoice and subscription records. The Open the dashboard link is a placeholder href.

Edit CAPABILITIES, a plain list of names: both cards are drawn from it, so they always show the same capabilities, closed on the left card and open on the right. A capability that your plan never locked doesn't belong here; list only what the suspension took away. Each row says "Locked" or "Unlocked" in text a screen reader reads before the name, so the locks never carry the meaning alone.

Each Now row stacks a closed lock under an open one. On load the closed lock starts visible and fades out while the open one fades in, after a delay that grows by 100 milliseconds down the list, so the four open one after another, once. It's two CSS transitions with starting: styles, with no script and no loop. With reduced motion the transitions are off and the open locks are simply there when the page appears.

The suspension length is worked out from two fixed ISO dates (SUSPENDED and AS_OF), never the visitor's clock, so the sentence reads the same on every visit. Dates are written with Intl.DateTimeFormat in UTC and kept in time elements; amounts are whole cents written with Intl.NumberFormat, each in one left-to-right span so signs and digits keep their order on a right-to-left page.

The two cards stack with Before first, a rule between them, and the three facts become three rows. The heading, the sentence and the dashboard button are above both, so the action is on the first screen, and nothing scrolls sideways at 320 pixels.