Trial Pace Onboarding Block for React

From three constants: STARTED_ON, TRIAL_DAYS and AS_OF. The days gone are the whole days between the first and the last, the days remaining are the trial's length less those, and the end date is the start plus the length, all as day numbers from Date.UTC, so there is no time zone or clock involved. In your app set AS_OF to the current date (and read it on the server, so the first paint agrees) and STARTED_ON to the account's trial start.

The tick is where the bar would be today if the whole limit were used evenly over the trial: days gone over trial length. A bar past it is over pace, and the sentence says so. The sentence takes what is used so far, works out the daily rate and says on which day the limit would be reached if that rate held, "before the trial ends", on its last day, or never within it ("last the whole trial"). It is arithmetic on typed usage, not a prediction, and says "at this pace".

In the demo it lengthens the trial by seven days as if the request were granted: the days remaining roll up, the end date moves, the ticks move back and the sentences change. Pressing it again withdraws the request and everything returns. The status line says so ("Requested in this demo") because nothing is sent. In your app, send the request to your team and leave the figures alone until it is approved.

The usage numbers, the dates, the request and the Choose a plan press all live in the page; nothing is bought, requested or stored. Fill LIMITS from your metering, point Choose a plan at your plan picker and the ghost button at your sales form or extension endpoint.

Each limit is a heading with its count in text, and the bar is decorative because the count and the sentence say the same in words; colour carries nothing, only the bar's length and the tick. Both buttons are ordinary buttons reached by Tab, and the status line is a polite live region that is empty until you press one.

The panel keeps its single column. The days remaining and the end date are on top, each limit row stacks its heading, bar and sentence, and in the foot Choose a plan is first and full width with the ghost button under it. The sentences reserve two lines so a longer one never moves the row beneath.