Gift Card 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 Buy a gift card 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 GiftFields component and share the block's state, so a name typed or a pattern chosen 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.

The card is a box in the theme's greys with the pattern painted behind its text by a CSS gradient: beans are a tiled oval, steam is arcs rising from the foot, stripe is a diagonal hatch. They live in PATTERNS as class names, so a new pattern is one entry. To print real artwork, put an image behind the same text and keep the text over a solid band so it stays readable. The card repeats what the fields say, so screen readers skip it and read the fields.

A preset is always good. Custom turns the number field on and moves focus into it; it must be a whole number from $5 to $200 (LOWEST and HIGHEST), checked when you press Add gift card, with its own message under the field, and the card and the total show dashes until the number is good. The field is always on the page, only switched off until you choose Custom, so choosing it moves nothing.

Send now says "Right away". Pick a date opens the calendar, shown as it would be on the day the block treats as now (AS_OF), with that day and every earlier day closed, whatever the visitor's own clock says; pressing Add gift card without a day says so under the calendar. The calendar is the catalog's own, inline in the dialog rather than a popup, which keeps it working inside a modal on every library. In your app disable days from your own cut-off, and let your server enforce it.

No. Add gift card queues one card in the block's state, the polite status message says so ("queued, in this demo. No email goes out and nothing was charged.") and the cart chip behind the dialog counts it. In your app create the card on your server in add, send the email on the delivery day from there, and take payment through your payment provider; show a failure in the field it belongs to, with the dialog still open.

Yes. The real dialog is named by its title and described by its sentence, focus starts at the first choice and stays inside until it closes, and Escape, Cancel and the close button all return focus to Buy a gift card. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The amount and pattern are groups you move through with the arrow keys, each field's message is tied to it with aria-describedby, the message counter is for the eyes while the field announces its limit once, 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.