Trial Expired Error Block for React

From three typed ISO dates and one constant: the day the trial ended, "today" for the page and the retention length. The kept-until date, the days used (3 of 30) and the days remaining are all derived from them with UTC arithmetic, never from the visitor's clock, so the server and every browser print the same thing. Change TRIAL_ENDED, AS_OF and KEPT_DAYS to your own, or pass real values from your account API.

It records the choice in the page's state and says "Pro chosen in this demo. Nothing was charged." Undo takes it back, and picking the other plan clears it, because it is a different choice. A second press on the same choice says it is already recorded. To wire it for real, start the subscription with your billing provider where the code says so, and send the visitor to its hosted checkout; the page never takes a card number.

Each plan has a typed seat limit, and the line under it is derived: Starter seats 3 of your 8 teammates, Pro seats all 8. Nothing is stored twice, so changing the teammate count or a limit changes the sentences. The cells are native radio buttons in one group, so the arrow keys move between them and the focus ring follows.

A real file: plotsprig-boards.json, built at module scope from the typed boards and written by the Download Trigger when you press it. In your product, point it at your export endpoint, or generate the file from the account's data on request; keep it available for as long as the retention line promises.

The three counts stay in one row, the plan cells stack, and the Shine Button is pinned to the foot of the screen until you reach it. Undo sits beside it.

No: a component can't. Send the real HTTP status from your server, 402 where your API uses it for an ended trial or 403 where it doesn't, so clients don't see a 200 with an error drawn on it.