No Subscriptions Empty State Block for React

Nothing leaves the page. The plan is a row kept in the page's state, the ten subscribers are a typed example, and the status line says "Nobody is billed." To wire it for real, create the plan with your billing provider where the code says so, list what it returns instead of the typed row, and keep the price you charge in whole cents on your side too.

In whole cents, never in floating point: a price like 29.00 is 2900 cents, ten subscribers are 29000, shown as $290.00 a month. A yearly price keeps the same sum a year and adds the monthly equivalent rounded to the nearest cent (about $24.17 a month), so the line reads the same way whichever interval you pick. One number formatter writes every figure, in a left-to-right span, so the digits stay Western digits in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.

It is only a picture of the plan: the name, the interval chip, the price and a Subscribe look-alike that cannot be pressed. It fills as you type, with a dashed box where nothing is typed yet, and it is hidden from assistive technology because the line under it and the fields say the same things in words. The coin above it is one drawing whose classes change, so nothing swaps or moves.

A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason in the line above it: "Name the plan." or "Price like 29.00." Pressing it anyway, or Enter in a field, says the same in the status message, marks the field invalid and moves focus to it. Once both are right the line goes away and the button turns on.

No. The form stays where it is and is only locked until you press Start over, the list row is the same height empty or filled, and the button keeps its place with a new label. Start over clears the fields, puts Monthly back, dashes the coin again and moves focus to the plan name.

Tab runs through the plan name, the price, the Monthly and Yearly choice (arrow keys move between them), Create subscription and Start over. The choice is a labelled radio group, the line under the button is tied to both fields, and one polite status message says what happened. After creating, focus moves to the new row in the list.