Overage Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its base price per month, included gigabytes at that price, the overage rate in dollars per gigabyte past it, a call to action, and the text for the table's retention, seats, alerts and support rows. The chart, the price, the summary line and the "bill at twice the allowance" row are all computed from those numbers by billAt, so changing a rate redraws the wedge and updates every figure. The ROWS array holds the table's rows; add one with a label and a function of the plan.

It's one inline SVG stretched over the plot: two filled paths for the allowance and the overage, a line along the top of both and a hairline at the end of the allowance, with strokes that stay one pixel wide however the plot scales. The horizontal axis always runs to three times the plan's allowance, and the vertical axis from zero to the bill at that point with some headroom, so every plan is drawn at the same size and the labels, a base price, a rate and an axis in gigabytes or terabytes, carry the plan's real numbers. The chart reads left to right in every language, so numbers are not mirrored in a right-to-left layout.

The plot is an image with a sentence for its name that carries everything it shows: "Monthly bill on Team by gigabytes ingested: $399 flat up to 500 GB, then $0.60 for each extra gigabyte, reaching $999 at 1.5 TB." The labels drawn on it are hidden from screen readers so nothing is read twice, the table below repeats the same numbers as real data, and the plan switch is a radio group that arrow keys move through. The chart's colours are greys, and the lines and the order of the shading, not hue, tell the allowance from the overage.

The call to action is a real link for the plan being shown: point its href at your checkout with the plan id (/checkout?plan=team). It's a ShineButton with render set to an a element and nativeButton={false}. Bill the overage with a metered price in your payment provider, at the rate shown for the plan, reported from your pipeline at the end of the period.

The plan switch stretches to the full width under the heading, and the selected plan's price and button come before the chart so the call to action is on the first screen. The chart is a little shorter and the table keeps all three plans in three narrow columns, with short values and the units in the row labels, so nothing scrolls sideways. In the table, the selected plan's column follows the switch.

Draw it when buyers worry about the bill past the allowance: a flat block and a rising wedge show at a glance how much of the price is fixed and how steeply it grows, which a list of rates leaves to arithmetic. Keep the table for the exact numbers, and use a usage slider when you want visitors to put in their own volume and read one total.