Invoice Picker Subscription Contact Block for React

From the INVOICES array at the top of the file: each has a month, a value and its lines in cents. The amounts shown on the cells and the total in the panel are both worked out from those lines, so they always agree. Replace the array with the visitor's real invoices from your billing system; the months and amounts here are example data.

They are a single-choice Listbox: Tab reaches the list, arrow keys move between invoices, and a chosen invoice cannot be unchosen (it can only be changed). Submitting with none chosen puts focus on the list and says which question is open.

Until an invoice is chosen it says "Choose an invoice to see its lines." Afterwards it lists the lines with their amounts and the total. It keeps a minimum height so choosing a one-line invoice and then a three-line one does not push the form around much.

Nowhere yet. The submit waits 800 milliseconds as a stand-in for a request, then shows a confirmation that echoes the invoice, its total and the reason. Replace the timer in submit with your call: details holds the invoice value, the reason, the message, the name and the email.

Yes, on all seven targets. The invoice list is the same component everywhere; the reason Select is the one place the libraries differ in code, with the same labels, keyboard and checks.

The invoices stack one per row with a gap that keeps their overshoot lines apart, the panel follows, and the name and email stack. The button goes full width and nothing scrolls sideways at 320 pixels.