Pricing With Calculator Block for React

For every plan it works out the whole bill for the numbers typed in: the plan's base price, plus a charge for each seat, each 100K events and each day of history past what that plan includes. The plan with the lowest total is the one stamped. That means the recommendation never jumps to a dearer plan, and the receipt always shows exactly what the stamped plan costs. If two plans tie, the cheaper base wins.

Edit the PLANS array: each plan has a base price, what it includes (seats, events in thousands, retention days) and what each unit past that costs (seatRate, eventRate per 100K, dayRate). LIMITS sets each field's minimum, maximum and starting value, and the fields list inside the component holds the labels, hints and step sizes. Each receipt line is rounded to a whole dollar, and the total is the sum of the lines shown, so the receipt always adds up.

What is typed is kept as text, and the bill uses it clamped to the field's range: an empty or unreadable field counts as the minimum, and a number past the maximum counts as the maximum. The steppers add and subtract one step (100 for events) and stop at the limits. The field itself is a real spinbutton on every base, named by its label.

Each stepper is named, and the plan strip is a list whose current item is marked and reads ", recommended". The stamp is read as "Recommended plan: Team", not the decorative text. A polite live region reads one message after each change: "Recommended plan: Scale. Total $339 a month." The receipt is a description list, so each line is read as a term and its amount.

The button is a real link and its label names the recommended plan. It's a ShineButton with render set to an a element and nativeButton={false}. Build the href from the typed numbers and the plan's id, for example /signup?plan=team&seats=12&events=1200&days=30, and let your server recompute the bill before it charges anything. On a phone the same link lives in the sticky bar, and the receipt's own button is hidden below md.

The totals roll to their new amounts, the plan pills change their border with a short transition, and the stamp drops in slightly large and fades to rest each time the recommendation changes. Under reduced motion the stamp and the pills change at once; the totals still change.