Plan Price Editor Table Block for React

Each plan's price per interval becomes a monthly amount (a yearly price divided by twelve), and MRR next month is that amount times the plan's subscribers plus the people expected to join, in whole cents. With the switch on, all of them pay the typed price; with it off, existing subscribers pay the saved price and only the people joining pay the typed one.

It changes who pays the new price, and so how many subscribers the change reprices and how far MRR moves. Off is the cautious default: the same edit moves MRR by much less, and the strip says that existing subscribers keep their price.

Each plan's share is its MRR over the total, and the rounding is done by largest remainder: every share is rounded down and the missing points go to the plans with the biggest fractions, so the column never reads 99 or 101.

The plan keeps using its saved price in the sums, the field is marked invalid and a line under it says a price above 0 is needed. Save changes refuses and names the plan in the status line until it is fixed.

The Interval, Subscribers and Share columns go below the medium breakpoint: the interval and subscribers fold under the plan name and the share under the MRR. The Save changes and Reset buttons stay pinned to the bottom of the screen as one bar.

Nothing is billed and nothing is stored: the plans are typed in the file and Save changes only moves this page's saved prices. To wire it up, send the typed prices from the save handler to your billing API and replace the saved prices with what it returns; keep the derived MRR, shares and repriced count.