Volume Discount Pricing With a Descending Chart Block for React

Edit the BRACKETS array at the top of the file: each bracket has the seat count it starts at, the seat count it ends at (null for the last), its price per seat, the popular flag and the href of its call to action. The chart's bar heights, the ranges, the savings against the first bracket and the screen-reader text are worked out from the array, so adding a fifth bracket needs only a new entry and a fifth chart column (grid-cols-4 becomes grid-cols-5).

Yes, from zero: the tallest bar is the first bracket's price and each other bar is its price as a share of it, so $3 is half as tall as $6. A chart that starts above zero would make a saving look bigger than it is. The prices and the ranges are printed on the chart as well as in the rows.

Each call to action is a real link to its bracket's href. It's a ShineButton with render set to an a element and nativeButton={false}. Point each one at checkout with the bracket in the address (/checkout?from=11), and let your billing provider price the seats with graduated or volume pricing, so the bracket on the page and the bracket you bill come from one rule.

The chart is decorative and hidden from assistive technology, because the rows carry the same information as text: every bracket's range as a heading, its saving and its price. Each button's hidden text names its bracket and price ("Choose 11–50 seats at $5 a seat"), so the four "Choose" buttons are distinct. There is no client code in the block, so it works with scripts off.

The chart sits above the rows and is a little over 170 pixels tall, with the bar labels at a smaller size; the rows follow with their range and saving on the start side and the price and button on the end, so the primary button is well inside the first screen and a half of an iPhone. In right-to-left pages the rows mirror, and the prices and ranges stay left to right.