"use client"; /** * The interactive layer of the invitation page (FR-2.1, FR-2.6, FR-2.7, FR-1.12, task 7.4). * * Everything here sits *on top of* server-rendered text — the names, date, venue and * contact number are already in the HTML before this mounts, so the invitation is readable * even if JavaScript never runs. * * The `form` stage renders into `RsvpSurface` rather than into the page flow. Every other * stage keeps the behaviour it had, in the footer where the call to action lives — and the * surface floats *above* whichever of them applies, so a guest updating an existing answer * still sees that answer behind the form rather than having it replaced by a blank one. */ import { useCallback, useRef, useState } from "react"; import { RsvpForm } from "./RsvpForm"; import { RsvpSurface } from "./RsvpSurface"; import type { Dictionary } from "@/lib/i18n"; import type { InvitationView } from "@/lib/view-models"; type Stage = "idle" | "form" | "success" | "declined"; export function InvitationInteractive({ invitation, dict, }: { invitation: InvitationView; dict: Dictionary; }) { const initialStage: Stage = invitation.state === "already_responded" ? "success" : invitation.state === "declined" ? "declined" : "idle"; const [stage, setStage] = useState(initialStage); const [partySize, setPartySize] = useState(invitation.currentRsvp?.partySize ?? 1); const [calendarUrl, setCalendarUrl] = useState(`/api/ics/${invitation.token}`); const [busy, setBusy] = useState(false); // Whether the guest has typed anything, so dismissal can warn instead of discarding. // A ref rather than state: it changes on every keystroke and nothing renders from it. const touched = useRef(false); /** Backdrop and Escape ask first once a field has been touched (task 7.5). A guest who * has filled in three fields and brushes the backdrop must not lose them silently. */ const confirmClose = useCallback( () => !touched.current || window.confirm(dict.discardChanges), [dict.discardChanges], ); const closeForm = useCallback(() => { touched.current = false; setStage(initialStage); }, [initialStage]); const fireConfetti = useCallback(async () => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const { default: confetti } = await import("canvas-confetti"); confetti({ particleCount: 120, spread: 70, origin: { y: 0.6 } }); }, []); async function handleDecline() { if (busy) return; setBusy(true); try { const response = await fetch(`/api/rsvp/${encodeURIComponent(invitation.token)}/decline`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ reason: null }), }); if (response.ok) setStage("declined"); } finally { setBusy(false); } } return ( <> {/* Called, not rendered as `