shadcn.io is not affiliated with official shadcn/ui
Email Preferences Billing Block for Svelte
Renewal reminders drawn on a 15-day strip: pick 14, 7, 3 or 1 days before, turn on skip weekends to move marks to the Friday before, read the derived dates and count, then save.
Installation
Overview
Let customers see when they will be reminded, with this email preferences section for Svelte with Ark UI. It shows the account of Thornholm, a subscription tracker, that renews on Sun 15 Nov. A hairline frame with a plus mark on each corner starts with a strip of the 15 days up to the renewal: a mail mark sits on each day a reminder goes out, the renewal day carries a card mark, and weekends sit on a deeper tone. Below it a multiple Toggle Group picks how many days before (14, 7, 3, 1) and a Switch, "Skip weekends", moves any reminder that lands on a Saturday or Sunday to the Friday before; the marks, the sentence of dates under the strip and the count ("3 emails before this renewal") all come from one function. One quiet line says receipts, failed-payment and price-change notices are always sent. The action foot has the one Shine Button, Save reminders, and Discard. It's built from Toggle Group, Switch, Button, Shine Button and Guides, with a CSS entrance only. For notification settings and any subscription app.
FAQ
How are the reminder dates worked out?
sendOn subtracts the chosen number of days from RENEWAL with UTC date arithmetic. With the switch on, a Sunday moves back two days and a Saturday one day, so the 14-day reminder (Sun 1 Nov) becomes Fri 30 Oct. The strip, the dates beneath it and the count all use that one function, so they cannot disagree.
Why can I not turn every reminder off?
The toggle keeps at least one choice, and says so when you try to clear the last one. Receipts and failed-payment notices are sent whatever you pick, as the line under the controls says. Change that rule if your product allows no reminders.
What do Save and Discard do?
Save keeps the draft as the saved choice and says "Saved. Nothing was scheduled." Discard goes back to the saved choice. Both stay rendered and answer a press with a message when there is nothing to do. In your app send the saved choice to your server and schedule the emails from the renewal date.
What stays local?
The choices, the saved state and the status line; the renewal date is typed. The strip is a drawing for sighted users and the same facts are in the sentence of dates under it.