Select Quantity 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 Choose quantity 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 QuantityFields component and share the block's state, so a number 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.

From the TIERS list: each tier starts at a number of boxes and has a price in cents, and the quantity picks the last tier it has reached. Every figure is whole cents, formatted with Intl.NumberFormat, so $259.20 is 25920 and never a rounded float. The ranges ("10 to 24") are written from where the next tier begins, so they cannot disagree with the prices, and the saving is the quantity at the single-box price minus the total. Change TIERS and STOCK and the table, the hint, the totals and the button all follow.

Nothing stops you typing, and the figures beside the field already read the nearest valid number. When you leave the field it is held between 1 and the stock and says why, "Held at 120, the boxes in stock", or "Whole boxes only" for a fraction. The minus and plus buttons and the arrow keys move one box, Page Up and Page Down ten, and at either end the button goes quiet but stays focusable and tells you why when pressed. An empty field says "Enter 1 to 120 boxes" and takes focus back when you press Add.

All of it. The tiers, the stock and the cart count are typed in this file, and Add to cart only changes the chip on the drawn shop and says so in a polite message: nothing is ordered and no stock is held. In your app post the quantity from add, read the stock and the tiers from your catalogue, and re-check both on the server, which should own the price. The number field is controlled through its value, set from the block's text.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the number field and stays inside until the dialog closes, and Escape, Cancel and the close button return focus to Choose quantity. The ladder is a real table with a caption, the row in force is marked as current and has a ticked cell and an "(your price)" note for screen readers, and the price is read out once typing has rested for a moment, "24 boxes: $10.80 each, $259.20 in all". 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 the button.

The copy shown on load docks to the foot of the page as a bottom sheet, with Add to cart pinned under a scrolling body, and the ladder reads the same in the narrower column. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen. The side buttons and the field keep a touch-sized height.