Committed Spend Discount Pricing Block for React

Edit COMMITMENTS and UNITS at the top of the file. A commitment has its monthly amount, its discount in whole percent, an id and the chip's big short label. A unit has a name and its on-demand rate. Every committed price is worked out from the rate and the discount (discounted), the headline's "up to" figure is the largest discount, and the hours a commitment buys are its amount divided by the first unit's committed rate, so nothing drifts when you change a number. The selection starts on $2k.

rate writes a price with three to five decimals and never a rounding artefact: $0.048 stays $0.048, and $0.0064 at 24% off is $0.00486. The values are left to right and tabular, so the struck on-demand price and the committed price line up row by row. Change maximumFractionDigits in rate if you quote more precision.

Yes. The chips are a radio group named "Monthly commitment": Tab reaches the chosen one and the arrow keys move and select, and each chip reads as its amount, "a month" and its discount ("$2k a month, 15% off"). The discount reads as "15% off" (the number, the percent sign and the word), the struck prices read as "On demand" and the committed ones as "Committed", and nothing is announced while you move between chips, since the result is right there to read.

The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Build its href from the chosen commitment, for example /commit?amount=2000, and let your server map each amount to a discount in your billing system. Work the discount out again on the server; never trust a price sent from the page.

The chips become a two-by-two grid and the result stacks under them, so the call to action lands within the first screen and a half of an iPhone, and at 320 pixels the unit list keeps its three columns. From lg the chips and the result sit in one row, split by a hairline divider. Nothing sits beside the discount, so its width changing as it rolls moves nothing else.

Use chips when you sell a few fixed commitments, as here: each maps to one discount in your billing system and four choices are quick to compare. When any amount is valid and the discount grows smoothly with it, a slider fits better, as in the contract length slider block.