Savings Goal Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Add to goal button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same DepositFields component and share the block's state, so a deposit chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Two rings share one cell. The lower one is the lighter ring and takes the saved total plus the deposit, and it carries the percent in its middle; the upper one is solid and takes the saved total alone, so the difference between them is what you are about to add. Both are the catalog's Circular Progress, restyled to foreground weights so the Shine Button stays the only primary colour. Money is whole cents throughout (money prints it, percentOf rounds the share), and the rings move through the component's own stroke transition, which is switched off for people who ask for reduced motion: the figures and the percent change at once instead. The rings are decorative and hidden from assistive technology; the figures and the line under them say the same things in text.

A quick deposit is always good, unless it is more than what is still to go, which says so ("Only $20 to go: choose Custom for less."). Custom turns the number field on and moves focus into it; it must be a whole number of dollars from $1 up to what is still to go, checked when you press Add to goal, with its message in a slot under the row that is always there, so the dialog never changes height. Once a message shows it follows your choice and clears as soon as it is fixed. A met goal answers every deposit with "The goal is already met."

From AS_OF, a fixed date the block treats as today, so the preview and its poster never age. The weekly amount is divided into what is left after the deposit, rounded up to whole weeks, and that many weeks are added with UTC date arithmetic (addDays), the first deposit a week from AS_OF. In your app replace AS_OF with today's date and pass the goal's own numbers. The sentence is the same text everywhere, and the date is wrapped so it stays in one piece in a right-to-left layout.

No. Add to goal adds the deposit to the goal's saved total in local state, closes the dialog, says in a polite status message that no money moved, and the drawn list behind it shows the new bar and amount. In your app send the deposit to your server in add, take the amount from the response (the server owns the balance), and show a refusal in the same message slot with the dialog still open. The weekly choice here only feeds the finish sentence; to make it a real standing order, send it with the deposit.

Yes. The real dialog is named by its title and described by its sentence, focus starts at the deposit choices and stays inside until it closes, and Escape, Cancel and the close button all return focus to Add to goal. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The deposits and the weekly amounts are groups you move through with the arrow keys, the number field's message is tied to it with aria-describedby, and one polite status message reports the result. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.