Quick Transfer 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 Send money 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 TransferFields component and share the block's state, so an amount typed 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.

Money that has moved can't be called back, so Send only happens from a summary. The compose view and the review view sit in one cell, the one you aren't on invisible and inert, so the dialog keeps its height; the primary button is the same button that changes its label from Review to Send $40.00, so focus stays where your hands are. Back returns to the amount with everything kept, and what is on screen at each step is also said in the dialog's polite status.

Whole dollars. The field and the chips add up in cents, the amount can't be zero, and one over the balance says "Not enough balance: $1,240.00 available." in the line under it, with focus on the field when you press Review. The fee is $0.00 between accounts of the app, and the balance after is worked out from the amount as you type. Prices and balances are formatted with Intl.NumberFormat in one left-to-right run, so they never reorder in a right-to-left page.

Everything. No money moves: Send only lowers the balance behind the dialog and adds a row, Ravi Nair: -$40.00, and says, in the polite status, that nothing was sent. The balance and the five people are typed in the file. In your app send the transfer to your server with a key that makes a retry safe, wait for its answer, and update the balance and the activity from what comes back; keep the review step.

Yes. The five people are one native radio group (arrow keys move between them, and Tab reaches the chosen one), named by their full names, and the row scrolls so the focused one is always in view. The real dialog is named by its title and described by its sentence, focus starts on the chosen person and stays inside until it closes, and Escape, Cancel and the close button return focus to Send money. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned, the people, the amount and the note scrolling above them; the row of people scrolls sideways. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.