Checkout Plan Picker Billing Block for React

Everything is at the top of the file. PLANS lists each plan's name, blurb, price per agent per month billed monthly (monthly) and billed yearly (yearly), and an optional tag. PERIODS gives each period its months and the date it renews, and PROMOS maps a code to the percent it takes off. The "save 20%" and "Yearly billing, 20% off" wording is typed text, so update it if you change the yearly prices.

Press Apply or Enter in the field. An empty field says "Enter a promo code" and an unknown code says it isn't valid or has expired, in an error tied to the field. A known code is applied: the field gives way to a line naming it and a Remove button, and the summary shows its discount. The lookup in PROMOS runs in the browser so the block works on its own; check codes on your server before you charge, and treat the discount here as a preview.

The list price is the plan's monthly price times the agents times the months the period covers. The billed amount uses the yearly price on a yearly period, so the difference shows as the yearly discount, and a promo's percent comes off that. Due today is the result, and "Then" gives the same amount for the next invoice on the date its period renews. Tax isn't added: the summary says it's worked out at payment, from the billing address. Wire the amounts to your own pricing so the page and your charge agree.

"Start" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your payment step and add the plan, the agents, the period and the applied code to its address so the next page charges what this one showed. There are two of the same link: the one in the summary and the one in the phone bar, and only one is visible at a time.

The plans are real radio buttons in a named group, so the arrow keys move between them, and the whole card is the label. The period is a named group of two options, the agents field has its own stepper buttons and takes typed numbers from 1 to 100, and the promo field's error is read with the field. Whenever the plan, the period, the agents or the code change, a polite status line says the plan, the agents and what's due today, so you hear the new total without leaving the control.

The cards, the period and the agents stack in one column, then the promo code and the summary. The summary's button is hidden at that size; the total and the same button sit on a bar that sticks to the bottom of the panel while you scroll, so you can pay from wherever you are in the form.