Add to Cart Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the shop: 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 cart button in the header 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 CartFields component and share the block's state, so a height picked 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.

HEIGHTS holds each height's price and stock, and FINISHES holds what each finish adds or takes off, so the unit price is the height's price plus the finish's change, and the total is the quantity times that. The stool at the start of the dialog redraws from the same height, and the finish rows show their change in dollars next to their name, so the number never surprises. Prices are whole dollars formatted with Intl.NumberFormat; swap in the currency and cents your shop uses.

The quantity is kept between 1 and the stock of the chosen height, and the line under the field says so in words ("Only 2 in stock. That is the most you can add.") whether the number was typed or stepped to the limit. The total always uses the kept number, and switching to a height with less stock pulls the quantity down with it. The line is a hint linked to the field, two lines high, so it never moves the total. In your app read the stock when the dialog opens and say if it changed before the order is placed.

Here it adds the quantity to the cart chip's count in local state, closes the dialog, and says in a polite status message what was added and that nothing was ordered in this demo. No request goes out and nothing is stored. In your app send the height, finish and quantity to your cart in add, update the cart from the response, and if the server refuses because the stock changed, show its reason in the stock line and keep the dialog open.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the height choices and stays inside until it closes, and Escape, Cancel and the close button all return focus to Add to cart. The height is a labelled group of two toggles, the finish a labelled radio group read as one question with a sentence per option, and the quantity a labelled number field with the stock line as its description. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on Add to cart.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Add to cart on top, and the fields scroll above them. The stools shrink to a short strip over the fields instead of a column beside them. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.