Limit Reached Billing Block for React

Two constants at the top of the file hold everything. BLOCKED has the action that was refused, the plan's limit and the ISO date a reminder lands on. COLUMNS has the two plans: their name, price line, badge text and three limit rows, the first of which is the one that blocked. Replace them with what your backend returns for the account and the limit, and pass them in as props if the prompt is rendered where the check fails.

It flips the reminder on or off in the block's own state: the line beside the buttons changes to "We’ll remind you on Monday, October 19." and the button reads "Undo reminder". Nothing is stored, so schedule the reminder in your own code from the same handler, toggleReminder. The line is a polite live region, so a screen reader announces the change, and focus stays on the button, which keeps its place.

Wherever the limit is hit: inline where the new-project button was, in the place of the blocked page, or inside a dialog. It has no page spine, only its own frame, so it sits inside whatever surface your app gives it. Pair it with a usage meters section, which shows a limit coming before it is reached.

The section is headed by an h2; the blocked action and each plan are h3s, and each plan is a labelled section with its limits as a description list, so a value is read with its term. The icon is decorative and hidden. The current-plan and next-plan badges are text, so the comparison doesn't depend on position or color.

"Upgrade to Pro" is a link and comes first, so it's the first stop for the keyboard; point it at your plan picker or checkout. It's a Shine Button with render set to an a element and nativeButton={false}. "Remind me later" is a real button.

The heading starts near the top and the two plan columns stack, so the buttons come a little after the first screen. They stack at full width, and nothing scrolls sideways.