Merge Accounts 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 Review duplicates 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 MergeFields component and share the block's state, so a value chosen in the copy is chosen 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.

By comparing the two accounts' values in the file: a field whose two values are equal is a Same row, and every other row is a conflict with one radio for each account. Last seen starts on the newer date, as a rule in your app might set it, and says so with a Newer badge; the other three start with nothing chosen, so the count reads 4 conflicts, 1 resolved. The Result column is not a copy of anything: it prints the value for the side you picked, or Choose one.

Because a merge with an unanswered question would have to guess. Until every conflict has a pick the button keeps its place on the page with a quiet look, and the line beside the count names what is left ("Still to choose: Name, Phone and Plan"). Pressing it anyway says the same in the status line and moves focus to the first conflict that is still open, so the next step is one key away.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first conflict, and Escape, Cancel and the close button return focus to the Review duplicates button. Each radio is a native radio named for its field and its account ("Phone, account B: +1 555 0177"), the arrow keys move between the two accounts of a row, the table has a caption and row headers, and what changes is spoken once in a polite status line (inside the dialog while it is open). The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

Everything. Nothing merges and nothing is deleted: the two accounts are typed in the file, and Merge accounts only changes this block's state and the drawn contact. In your app send the choices to your API, keep one contact and move the other's notes, deals and history onto it, keep the removed contact's id so old links still resolve, and ask for a second confirmation if your merge cannot be undone.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them. The table becomes one card per field from the same markup: the field's name, the two accounts' values as two full-width choices, and the Result under them; fields that match shrink to one line. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.