Invoice Preview Pricing Block for React

Edit the arrays at the top of the file. PLANS holds each plan's name, tagline, call to action and whether it's the popular one, and HEADCOUNTS the choices in the headcount switch. GROUPS holds the bands, each with its lines: a line has a label, a unit description and a value per plan id. A value is a charge, { flat, perEmployee, note }: flat is a monthly amount, perEmployee an amount multiplied by the headcount, note what the line covers ("5 included"), and any of them can be left out; null draws a dash for a plan that doesn't have the line. Add a plan and TypeScript points at every line that still needs a value for it.

They're added up, not typed in: totalOf sums every line's flat and perEmployee × headcount for a plan, so at 25 employees Plus is $79 + $225 + $75 + $25 = $404 and the figure at the top of its column always agrees with the Monthly total row at the foot. Lines with only a note add nothing. Change a rate and both totals follow, and the headcount switch rolls them to the new amount.

Plan names are column headers, line names are row headers (with their unit) and each band's name heads the rows under it, so a cell reads as "Plus, Employees, $225, 25 × $9"; a dash reads "Not included". The table is named by its headcount ("Monthly invoices for 25 employees"), the headcount switch is a radio group that arrow keys move through, and each call to action names its plan, as in "Start free month, Plus plan". Totals are plain text under the rolling digits, so they are read once, in full.

Below the md breakpoint the table gives way to a second view of the same data: a Segment Group of the three plan names, with the recommended plan selected, over one plan's invoice as a list of lines with its total and call to action at the top. Nothing scrolls sideways. The headcount switch stays above both views, so changing it updates whichever invoice is showing.

Set popular: true on that plan and false on the others: its column gets the soft tint, the Best value badge and the primary call to action. The phone tabs open on Plus, set by the initial useState. Each call to action is a link: point its href at your checkout with the plan and headcount (/checkout?plan=plus&employees=25) and Premium at your sales form. It's a ShineButton with render set to an a element and nativeButton={false}.

Show the invoice when a plan's price is made of several parts (a platform fee, a price for each person, add-ons, a support tier) and buyers ask where the money goes: watching each line add up to the total builds trust, and the headcount switch answers "what will it cost for us?" without a calculator. Use a feature comparison table when plans differ by what's included rather than by what each part costs.