Current Plan Billing Block for React

Everything comes from two constants at the top of the file. PLAN holds the plan's name, monthly price, the renewsOn and periodStart dates (ISO strings), the card's last four digits and the yearly price. QUOTAS lists each quota's label, used and limit, the noun a screen reader hears after the count, and the note under its bar. Replace them with your subscription and usage data, from your payment provider's subscription object and your own metering, and pass them in as props if the page fetches them.

Counts of ten thousand or more are compact, so 1,840,000 reads "1.84M" and 62,400 reads "62.4K"; smaller ones stay whole. Dates are formatted in UTC from their ISO strings, so the renewal date is the same day on the server and in every visitor's time zone, and each sits in a time element with its machine-readable date. The price keeps left-to-right order in a right-to-left layout.

They're links. "Change plan" is the one primary action and comes first, so it's the first stop for the keyboard and the top button on a phone; point it at your plan picker. "Manage billing", "Switch to yearly" and "View invoices" point at your billing portal or your own settings pages. Each is a Button or Shine Button with render set to an a element and nativeButton={false}.

The section is headed by an h2, with the plan and the usage as h3s. Each meter reads as its label and count, for example "Seats, 7 of 10 seats", followed by its note; the bars repeat what the numbers say, so they're hidden from assistive technology rather than announced twice. The plan's details are a description list, so each value is read with its term.

With Guides, in your border color. One layer on the panel draws its four sides, running a little past each corner with a plus mark there. Each band below the first draws its own top rule with a plus where it meets the frame. The panel is meant to sit inside your app's content area beside a sidebar, so no line runs out to the page's edges.

The heading starts near the top and the change-plan button comes within the first screen. The two actions stack at full width, the plan's details wrap, and the usage cells go from four in a row to two by two, so the whole panel stays short.