Annual Discount Billing Block for Svelte

LINES at the top of the file holds one entry per line of the next twelve months in cents: its name, a note, year (what it costs over the term at today's set-up) and covered, whether the discount can apply to it. HEADLINE is the percent your yearly plan advertises. The effective percent, the saving and the yearly column are derived from them, so a different plan needs no other change.

Because a yearly discount only touches the lines it covers. Here usage is billed at the monthly rate whatever the cycle, so 20% of $492 is $98.40, which is 17% of the $588 the account is expected to pay. The table shows each line both ways so the gap is visible, and unticking a line shows what the discount would be without it.

Usage is the one line the discount does not cover, so its checkbox is disabled and a hidden sentence tells screen readers "Usage is not discounted." It is also an estimate: it is shown at this month's rate, and the real figure moves with use.

It only answers in the status line: "Scheduled in this demo only." Nothing is saved or charged. In your app, send the ticked lines to your billing provider in schedule, change the plan at the renewal and show the provider's answer in the same status line. The button is aria-disabled rather than disabled when nothing is ticked, so it stays focusable and says why.

The two figure cells stack, the Billed monthly column drops out of the table so each line keeps its name, its box and its yearly amount, the Segment Group fills the width, and the status line and the button stay pinned in a foot at the bottom of the screen.