Trial Timeline Success Block for React

Nothing was started and no email will be sent: the page is a confirmation for a made-up account. The switch only changes the page: the mail mark on day 12 shows or hides, and a polite status message says what changed and that nothing is sent. To wire it, set AS_OF to the trial's start from your server, TRIAL_DAYS and PRICE from the plan, and save the switch's value as the customer's preference where remind is. Your own job then sends the email on the reminder date.

Every date is derived from AS_OF with UTC arithmetic: the fourteen cells are the start day plus 0 to 13 days, the last day is day 14, the first charge is the day after it and the reminder is three days before the charge (day 12). Changing TRIAL_DAYS or REMIND_BEFORE moves all of them, and nothing reads the clock, so the page is the same for every visitor.

No. The mail mark is always laid out and only made invisible when the reminder is off, so the cell keeps its height; the status line is announced, not drawn. The switch is named for assistive technology ("Email me 3 days before the first charge") and is neutral in color, so the Shine Button stays the page's only accent.

It's an ordered list: each cell is a list item with its weekday and date as a real time, and a hidden sentence that says which day of the trial it is, and for day 1 and the reminder day what that means. The marks themselves are decoration. The first-charge cell is the last item of the same list.

The strip wraps into two rows of seven days, the three features stack, and the Shine Button is pinned to the bottom of the screen while the page scrolls under it, so it is on the first screen. From the small breakpoint up the fourteen days sit in one row and the button sits in the flow.

The Shine Button is a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}; the switch takes checked and onCheckedChange.