Seat Management Billing Block for React

Edit MEMBERS (each has a name, email, initials and starting role), ROLES, SEAT_PRICE, PAID_START for the seats the account pays for, and DAYS_LEFT and PERIOD_DAYS for the proration. Seats are used by everyone who isn't a viewer, so changing a role to Viewer frees a seat at once, and the in-use count and the progress bar follow.

Adding seats charges the difference now, for the part of the period that remains: the added seats times the price times the days remaining over the days in the period. Removing seats takes effect at renewal, with no refund for this period. The new monthly price is simply the seats times the seat price. These are the rules the example uses; make them match your billing provider's proration settings before you show them to customers.

The stepper can't go below the number of people who use a seat. Typing a lower number is held at that count and says how many people need a seat, and that moving someone to Viewer lowers it. The top limit is 100 seats.

Its label says the change ("Add 2 seats", "Remove 1 seat") and it's disabled while there's nothing to save. Pressing it makes the new count the seats you pay for and announces it; send the change to your billing provider there. The example starts with two seats added to show the cost before saving.

Each role select is named for its member ("Role for Daniel Reyes"), the seats field has its own stepper buttons, and a polite status message reads out the seats in use, the new total and what it costs whenever one changes. The progress bar repeats what the text says, so it's hidden from assistive technology.

The seats panel comes first, so the stepper and the cost are on the first screen, then the members, each as two lines: the person, and under them the role and the badge. The total and the save button stay on a bar at the foot of the panel while you scroll through the members.