Updated Card Billing Success Block for React

The whole panel: it describes a card that was already saved for a fictional account, so no card was stored or charged, and flipping a switch only changes the page's state and says so in the status line ("Nothing changed in this demo"). The card shows only its brand, its last four digits and its expiry, which is all your payment provider returns, and the page never takes a number: collect the card with your provider's hosted fields, which is a separate step. To wire it, call your billing API from flip to move that subscription's payment method, and update the row from the response.

That subscription keeps charging the old card, so the line under it changes to "Stays on" the old card and the total of the next charges drops by its amount. The panel starts with every switch on, because a new card usually replaces the old one everywhere. Edit PLANS for your subscriptions (an amount in cents, an ISO day, a name, a note) and NEW_CARD and OLD_CARD for the two cards.

From the switches, never typed: "3 of 3 subscriptions" counts the ones that are on and "Next charges on this card" sums their amounts in whole cents, so both follow every flip. Amounts are written with Intl.NumberFormat in a fixed en-US locale, each in a left-to-right span, and dates are fixed ISO strings written in UTC in time elements.

Each is named by what it does ("Charge Visa ending 4242 for Weekly box"), toggles with Space and keeps its state when you tab away, and the polite status line speaks the result of each flip. The Switch takes checked and onCheckedChange. It's drawn in the text color so the foot's button stays the only colored control.

The cells stack: the card and the note about it first, then the subscriptions, then the foot. The status line keeps room for two lines so a message never moves the button, and nothing scrolls sideways at 320 pixels.