Webinar Registered Success Block for React

Nothing was registered and no seat was held. The webinar, the host, the start (16:00 UTC, 45 minutes) and the join link (under .example, so the QR code leads nowhere) are typed constants. What the browser really does is real: Add to calendar downloads a genuine .ics file. To wire it, build the file on your server or from the registration record (the same helper can run in the page), put the registrant's own unique ID in UID, and point the QR code and the file at the registrant's personal join link.

One event in iCalendar format with CRLF between lines, as the standard asks: a UID, a DTSTAMP from the registration moment, the start and end in UTC, a summary, a description with the join link, a URL, a location and a 15-minute reminder. Long lines are folded at 75 characters and text is escaped. Because it is in UTC, the calendar app on the device converts it to the viewer's own zone, whatever the select shows. The file is named dawnlight-first-live-class.ics.

From a lookup, never from the browser's clock or time zone. The start is a typed number of minutes after midnight in UTC; each of the eight zones has a typed offset for the day of the webinar (Europe and the United States are still on daylight time that day, so it is in the offsets), and the sum gives the clock time and the weekday, which moves to the next day for Singapore, Tokyo and Sydney. Choosing a zone changes the ticket's second row and the page's live line, and nothing else. For a real product, take the offsets from each zone's rules at that moment with Intl.DateTimeFormat.

The ticket is a plain bordered box in the theme with two half-circles cut into its edge and a dashed line where the stub tears off; the cuts are decoration and hidden from assistive technology. The title is a heading, the times are a list of terms and values, the QR code is an image with a text name, and the caption says the code opens the join link. On a phone the stub sits under the ticket's text and the dashed line runs across.

The ticket stacks (text first, then the code), the select sits under it with its live line, and the one primary is pinned to the bottom of the screen while the page scrolls.

It is a Download Trigger with asChild around the Shine Button, on every library and framework, so it needs no link: pressing it saves the file and the page's live line says so. Give the file a name that tells the person which event it is.