Trial Banner Billing Block for React

A TRIAL constant at the top of the file holds the plan's name, the whole daysLeft, the trial's length in days and the ISO endsOn date; the bar's fill is length - daysLeft days of length. CHANGES lists what moves to the free plan, one label and value each. Replace them with the subscription's trial dates, and pass them in as props if the shell fetches them. Mind your own time zone rules for "days left": the block only shows the number you give it.

It writes today's date, in UTC, to the browser's local storage under osprey-mail:trial-banner-dismissed, and the banner stays hidden for the rest of that UTC day. The next day it shows again. A banner dismissed earlier today appears in the server's markup and hides right after the page loads, so it can show for a moment; if you read the dismissal on the server, pass it in and remove the effect. If the browser blocks storage, the banner stays hidden until the page reloads. Rename the key for your app.

To the "Show it again" button that takes the banner's place, so a keyboard user isn't dropped at the top of the page. Pressing that button brings the banner back and puts focus on its dismiss button. The dismiss button is named "Dismiss the trial banner for today".

The banner is headed by an h2 that reads as the days left. The bar only repeats "Day 9 of 14", which is on the page as text, so it is hidden from assistive technology rather than announced twice. What changes is a description list, so each value is read with its label, and the end date sits in a time element.

"Add payment method" is a link, so point it at your payment method page or checkout. It's a Shine Button with render set to an a element and nativeButton={false}. The dismiss and "Show it again" are buttons.

It's short: the heading starts near the top and the button sits within the first screen. The bar, the list of changes and the button stack in a column at full width, and the list wraps onto as many lines as it needs.