import { useForm, Head } from '@inertiajs/react'; import { RSVP_THEMES, FONT_STYLES, BUTTON_STYLES, type RsvpThemeKey, type FontStyleKey, type ButtonStyleKey, } from '@/lib/rsvp-themes'; import { useTranslator, useLocale } from '@/lib/i18n'; interface Props { guest: { id: string; first_name: string; last_name?: string; party_count: number; rsvp_status: string; meal_preference?: string; dietary_notes?: string; }; wedding: { partner_a_name: string; partner_b_name: string; wedding_date?: string; venue_name?: string; venue_city?: string; venue_country?: string; }; settings?: { heading?: string; body?: string; image_url?: string; theme?: string; font_style?: string; button_style?: string; }; } export default function RsvpShow({ guest, wedding, settings }: Props) { const tr = useTranslator(); const locale = useLocale(); const { data, setData, post, processing, wasSuccessful } = useForm({ rsvp_status: guest.rsvp_status, meal_preference: guest.meal_preference ?? '', dietary_notes: guest.dietary_notes ?? '', }); // Theme resolution with sane defaults. const themeKey: RsvpThemeKey = (settings?.theme as RsvpThemeKey | undefined) ?? 'rose'; const fontKey: FontStyleKey = (settings?.font_style as FontStyleKey | undefined) ?? 'serif'; const btnKey: ButtonStyleKey = (settings?.button_style as ButtonStyleKey | undefined) ?? 'rounded'; const t = RSVP_THEMES[themeKey] ?? RSVP_THEMES.rose; const font = FONT_STYLES[fontKey] ?? FONT_STYLES.serif; const btn = BUTTON_STYLES[btnKey] ?? BUTTON_STYLES.rounded; const heading = settings?.heading ?? tr('rsvp.heading_placeholder'); const body = settings?.body ?? tr('rsvp.message_placeholder'); const coupleNames = `${wedding.partner_a_name} & ${wedding.partner_b_name}`; function handleSubmit(e: React.FormEvent) { e.preventDefault(); post('', { preserveScroll: true }); } const dateStr = wedding.wedding_date ? new Date(wedding.wedding_date).toLocaleDateString(locale === 'fr' ? 'fr-FR' : 'en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : null; const venue = [wedding.venue_name, wedding.venue_city, wedding.venue_country].filter(Boolean).join(', '); // Resolve OG image to an absolute URL so WhatsApp/Facebook can fetch it. const ogImage = settings?.image_url ? (settings.image_url.startsWith('http') ? settings.image_url : `${typeof window !== 'undefined' ? window.location.origin : ''}${settings.image_url}`) : null; const ogTitle = `${heading} — ${coupleNames}`; const ogDesc = body; return ( <> {`${ogTitle}`} {ogImage && } {ogImage && }
{/* Top strip */}

{wedding.partner_a_name}{' '} &{' '} {wedding.partner_b_name}

RSVP
{settings?.image_url && (
)}

{tr('rsvp.eyebrow_invited')}

{heading}

{dateStr && (

{dateStr}

)} {venue && (

{venue}

)} {body && (

{body}

)}
{wasSuccessful ? (

{tr('rsvp.thank_you')}

{tr('rsvp.thank_you_prefix')}{' '} {guest.first_name}.

{data.rsvp_status === 'confirmed' ? tr('rsvp.confirmed_msg') : tr('rsvp.declined_msg')}

) : (

{tr('rsvp.hi', { name: guest.first_name })}

{(['confirmed', 'declined', 'maybe'] as const).map((status) => { const active = data.rsvp_status === status; return ( ); })}
{data.rsvp_status === 'confirmed' && ( <>