Pricing Updates Changelog Block for React

Edit PLANS at the top of the file, newest first. Each plan has a name, an effective day as an ISO date, a reason, and a monthly and a yearly price, each a from (the old price) and a to (the new one) in whole dollars. The change (Up or Down and the amount) and the count in the header are worked out from those numbers, so they cannot disagree with the rows.

The old price is struck through in a muted weight and the new one is bold, and each has a hidden word for screen readers ("Was" and "Now"), so the pair reads aloud as a change. The direction is an arrow and a word, never red and green. Each price is its own left-to-right span, so a right-to-left layout keeps the dollar sign in front of the digits.

It re-reads every row for the interval you pick: the old price, the new price and the change. The new prices roll to their new digits in place, and every row keeps its height and column widths, so nothing shifts. The choice stays in the component: nothing is sent, and a polite hidden line announces which interval is showing. Arrow keys move between the two options.

Each day is written in the data as an ISO date and spelled out by a small helper, never computed from today, so the page reads the same on the server and in every browser, and the time element keeps the machine-readable day.

Below md the reason is dropped, the prices stack with the old one above the new one and the change sits under them, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the rows mirror and the prices keep their left-to-right order.

The header and the rows fade up once on load, and the digits roll when you switch the interval. With reduced motion the entrance is off and the numbers change at once.