Two Plans Pricing Block for React

Edit PLANS at the top of the file. Each plan has its name, description, monthly price and annual price (the monthly amount when billed yearly), a featureHeading, a list of features, cta, href, an optional badge and featured, which raises the panel and fills the button. A plan whose monthly price is 0 shows "Free" instead of a number. The currency sign is CURRENCY, PHONE_FEATURES is how many features a phone shows before the toggle, and billedOf writes the line under each price.

It's a SegmentGroup labelled "Billing period": a group of two radio options, so arrow keys move between them and the choice is announced as "Annually, 2 of 2". Choosing one sets the billing state, Team's price rolls from 16 to 13 with SlidingNumber, and the line under it changes to "Billed annually at $156/year". The price row keeps a fixed height so the plans don't move.

The plans stack with Team first, since it's the recommended one, so its button is reached within the first screen and a half, and Personal follows. Team's list shows its first five features and an "All 7 features" button reveals the rest; the button is a native button that reports whether the list is open. From the md breakpoint the plans sit side by side in their own order, Personal first, and every feature shows.

From the md breakpoint each plan spans two rows of a shared grid with grid-rows-subgrid, so the headers line up and the prices, buttons and feature lists start at the same height, however long a description is. The name row keeps the height of the badge on both plans for the same reason.

Each call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Build the href from the plan and the billing state, for example /checkout?plan=team&billing=annually, and map each pair to its price on the server, so the page never decides what a customer is charged.