Subscription Required Error Block for React

Because a member can't buy anything: the way to unblock them is a person, so the page names the two people who can and writes the message for them. It says what the plan is, what is needed and what the visitor's role is, then stops. A comparison of plans belongs on your pricing and billing pages, where someone who can act is looking at it.

It checks that the message says something (an empty one is named under the field and the field is focused), then records the request in the page's state and says "Recorded in this demo for Odile and Teodor. Nothing was sent." Undo takes it back, and a second press says it is already recorded. To wire it for real, send the text to the owners' billing contact from your server where the code says so, and show the pending state from the response.

It is a demo control: your app knows the visitor's role, so a real page shows one side only. Switching it clears any result, so the two states never mix. As an owner you see the price per member and for the workspace, both from PRO_CENTS (2400) and MEMBERS (6) in whole cents, formatted with Intl.NumberFormat, so 6 times $24.00 is $144.00 with no rounding. Upgrade to Pro records the upgrade the same way and says nothing was charged; replace it with a call to your billing provider.

Yes: it writes the text as it is now, including your edits, to the clipboard, and says so in the page's status line. If the browser refuses (no permission, or a page that isn't served over HTTPS) the line says that instead, and the text stays in the field to select by hand.

No: a component can't. Send the real HTTP status from your server, a 403 for a role that can't change the plan, or whichever status your API uses for plan limits, so clients and crawlers don't see a 200 with an error drawn on it.

The ask comes right after the facts, and the button is pinned to the foot of the screen until you reach it. What Pro adds shows its first two rows with one constant button, All five Pro features, that opens the rest (it announces whether it is expanded). The longer sentence under the heading is kept for screen readers only.