Guest Checkout Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the cart: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Check out 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 IdentifyFields component and share the block's state, so an email typed in the copy, and the mode chosen, are 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.

All three panels are on the page at once in one grid cell. The one you chose is shown; the other two are invisible and inert, so they take no focus, are skipped by screen readers and don't change the height. The email value is shared: type it in Guest, switch to Sign in, and it is still there. Each panel has its own field ids and names, so autofill and the browser's password manager know which is which, with the standard autocomplete values for a username, a new password and a current one.

When you press the button, or Enter in a field. Guest wants an email that looks like one. Sign in wants that and a password. Create account wants the email and a password of 8 or more characters with at least one number, and says so in the same slot under the field. Each problem has its own sentence, and focus goes to the first field with one. Once a message shows, it follows your typing and clears when the field is right.

No. Guest continues at once; Sign in and Create account wait about two thirds of a second, with the button showing its busy state, and then the cart's stepper moves to Shipping and prints a line such as "Signed in as you@example.com, in this demo". Nothing is sent, nobody is signed in and nothing is saved; "Forgot password?" only says that reset isn't connected here. In your app call your sign-in and sign-up endpoints from submit after the checks, show their refusals in the field they belong to, and move the cart on only when they succeed.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the email field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Check out. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The modes are a radio group you move through with the arrow keys, each field's hint or 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.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with the mode's button on top, and the recap, the modes and the fields scroll above them. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.