Discount Badge Billing Block for React

Edit PLAN at the top of the file: the monthly price in cents and the percent off, and RENEWS for the renewal date. The yearly price, the amount saved, the free months, the badge texts and every line of the arithmetic are derived from them, so a different discount needs no other change. Add a way to say it by adding a Phrasing and its text in badgeText.

The same saving reads differently by audience. A percent is quick to compare, an amount is concrete, and months free suits a plan billed monthly. The list under the card shows that all three come from one number, so whichever you choose never contradicts the price.

It only says that yearly starts at your renewal in your app and that nothing was switched here, and the button then reads "Switch requested". In your app, send the choice to your billing provider in choose, change the plan at the renewal and show the provider's answer in the same status line.

The toggle group is named by its visible label and the pressed item is solid foreground, not colour alone. The struck-through price has a hidden "Was" and "a month" for screen readers, the marked line says "on the badge" in words, and the status line is a polite live region that is present from the start.

The badge moves under the price, the three choices share one row, the arithmetic stays a list, and the status line and the button stay pinned in a foot at the bottom of the screen.