Dynamic Tiers Pricing Block for React

Edit the TIERS array at the top of the file. Each band has an id, a label for its range, the from user it starts after, the to user it ends at (null for the last, open-ended band) and its rate in dollars per user; a rate of 0 shows "Free". Keep the bands in order and make each from the previous to. The cost of a band is the users inside it times its rate, worked out in whole cents, and the bill is the sum of the bands, so nothing else needs editing. PRESETS holds the shortcut buttons, MAX_USERS the most the input takes, and OPEN_SPAN how many users fill the last band's bar.

In graduated pricing each band is billed at its own rate, so the first 10,000 users stay free and the next 40,000 stay at $0.02 however large you grow: 120,000 users cost $0 + 40,000 × $0.02 + 70,000 × $0.012 = $1,640. In volume pricing the one rate for your total applies to every user, which makes a bill jump at each threshold. The bars show the difference: a user is only ever counted in one band.

It's a text field with a numeric keyboard on phones. It keeps digits only, takes up to seven of them, shows plain digits while you type so the caret never jumps, and groups them with commas once you leave it. The bands and the bill update as you type; presets set the field and the bill at once. The Input is named by its FieldLabel, and described by the note under the section that explains how users are counted.

The bands are an ordered list with an h3 for each range, then its rate, the cost and "40,000 × $0.02". The bars are decorative and hidden. The bill is read as "$1,640 per month", and a polite live region says "120,000 monthly active users cost $1,640 a month" once you leave the field, press Enter or pick a preset, not at every digit.

The call to action is a link, so point its href at your sign-up route; the free band means it can honestly say "Start with 10,000 free users". It's a ShineButton with render set to an a element and nativeButton={false}.

Yes. The bars fill from the reading direction's start, the number input and every price stay left to right, so digits and the dollar sign keep their order, and the range labels and "× rate" lines are isolated so they don't reorder in Arabic or Hebrew layouts.