Invitation-code gate Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with your own call. A yes reply carries the guest names and meals and the email; a no reply carries the name and the email. The block does not promise a saved seat beyond the confirmation on the page.

The card prints ODT-202. The field is six characters, ODT202, with a mark between the two groups of three; the hyphen is not a character you type. The hint says "Try ODT-202". A complete code that isn't those six characters shows "That code doesn't match the card." A match unlocks the reply and moves focus to Attending. Changing the code so it no longer matches locks the reply again. Sending before a match focuses the code and shows the error. The button stays available either way.

After a match, Attending is Yes or No and has to be chosen. Yes shows a guest count from 1 to 4. That many name fields appear, the first labelled "Your name", and each has its own meal group so the choices don't collide. Lowering the count hides the extra guests and keeps what was typed if you raise it again. No hides the guest fields and asks for one name. Email is required in both cases.

The form has noValidate. Before the code matches, submit only checks the code. After it matches, problems checks Attending, then either every shown guest's name and meal or the single name, and an email with an @ and a domain. Each problem appears under its field with an icon, and focus moves to the first one. Typing, or choosing a meal or Yes or No, clears that message.

A yes reply thanks the first guest by first name and lists every guest with the meal in parentheses. A no reply says we'll miss them and repeats the name. It's a status region that takes focus, and "Send another reply" locks the card again and puts focus on the heading. It does not invent a table number.

The frame is a single column, centred, at most a narrow measure. Guest fields stack. The reply button is full width. The header fades up once; with reduced motion it simply appears. rsvp@calista.example and +1 (555) 010-0190, under the button, are fictional.