Usage Alerts Billing Block for React

The file starts with the plan's QUOTA (10 million checks a month here), the FIRST_THRESHOLDS (an id, whether it's on, and the percentage as typed), FIRST_RECIPIENTS and the two CHANNELS. Replace them with the account's saved alerts. The save handler checks the form and then shows a confirmation; it doesn't send anything, so post the thresholds, recipients, channel and webhook address to your API from there, and show your own error if the request fails.

With email chosen it needs at least one recipient, and with webhook chosen it needs a full address that starts with https://. If either is missing it says so in the status line and moves focus to the field. Each percentage is held between 1 and 100 by its number input. The recipient chips take an address on Enter, on a comma, on blur or on paste, turn down addresses that aren't valid or are already listed with a line under the field, and stop at five.

A polite live region under the bands reads out what was saved: "Saved. We’ll alert 2 recipients by email at 50%, 80%, and 100% of 10M checks." It lists only the thresholds that are switched on, names the webhook when that channel is chosen, and says "Saved. Usage alerts are off." when none is on. Any change afterwards clears it.

The section is headed by an h2 and each band by an h3. Each switch is named "Alert 1", "Alert 2" and "Alert 3", and each number input "Alert 1 threshold, percent of monthly checks". The chips' input is named "Alert recipients", and the radio group "Send alerts by", with each card's title and description read with its radio. The webhook field has a visible label and is disabled, not hidden, while email is chosen, so the layout never shifts.

So the save button is the one colored control. The switches and the selected radio use your foreground color, and the chosen channel's card takes a neutral tint instead of the preset's primary one. If you want them in your accent, delete the NEUTRAL_SWITCH and NEUTRAL_RADIO classes and the CHOICE one.

The heading starts near the top and the save button comes within the first one and a half screens. Each band's title sits above its controls, the channel cards stack, and each threshold row wraps so its switch, input and check count never scroll sideways.