Spend Cap Pricing Block for React

MIN, MAX and STEP set the slider's range and cap starts at 500 in useState. SPENT is the example month's spend so far, the figure the gauge fills towards; it is an example for the demo, so replace it with the account's real spend when you use the block in an app. THRESHOLDS lists the shares of the cap the alerts fire at, and MODES holds the two choices at the cap with their explanations.

With Pause jobs, spend stops growing at the cap, so lowering the cap below the month's spend fills the gauge and says "Cap reached. New jobs are paused." With Keep running, spend carries on past the cap: the gauge shows the full ring and the sentence says by how much the account is over. The thresholds follow the spend either way, and each one says whether it has been reached.

No: they only hold state in the demo. alerts is the list of thresholds switched on (80 and 100 to start); wire toggleAlert to your notifications API. Each switch is named with its threshold and amount ("Email me at 80% of the cap, $400"), so a screen reader hears what it controls, and its row says "Reached" or "Not reached" in text, never by colour alone.

The slider is labelled "Monthly spend cap" and reads its value as "$500 a month". The gauge is decorative; what it shows is text in its centre ("Example spend, $380, of $500 cap") and a polite live region under it carries the sentence about where the account stands, which changes with the cap and the choice at the cap.

"Start with a $500 cap" is a real link whose label follows the slider. It's a ShineButton with render set to an a element and nativeButton={false}. Add the cap and the choice at the cap to its href if sign-up should start with them set. The gauge, slider and switches are drawn in your foreground colour so the button stays the only primary element.

The cells stack: the gauge with its status first, then the alert list, the slider, the choice at the cap and the button, each one full width. The gauge keeps its size so the ring stays readable at 320 px.