424 lines
16 KiB
TypeScript
424 lines
16 KiB
TypeScript
import { redirect } from "next/navigation"
|
|
|
|
import {
|
|
getInvitationInteractions,
|
|
replaceInvitationInteractions,
|
|
} from "@/lib/db/queries/interactions"
|
|
import { getInvitationByToken, submitInvitationResponse } from "@/lib/db/queries/invitations"
|
|
import { getPhotoUploadByInvitationId } from "@/lib/db/queries/uploads"
|
|
import { getGuestDictionary } from "@/lib/i18n/get-dictionary"
|
|
import { getRsvpDeadline, isRsvpClosed } from "@/lib/rsvp-deadline"
|
|
import { PhotoUpload } from "@/components/invite/photo-upload"
|
|
import {
|
|
interactionSubmissionSchema,
|
|
} from "@/lib/validation/interactions"
|
|
import {
|
|
mealPreferenceSchema,
|
|
submitInvitationResponseSchema,
|
|
type MealPreference,
|
|
} from "@/lib/validation/response"
|
|
|
|
export const dynamic = "force-dynamic"
|
|
|
|
const mealOptions: MealPreference[] = ["meat", "fish", "vegetarian", "vegan", "kids", "other"]
|
|
|
|
function formatDateForInput(value: Date | string | null | undefined) {
|
|
if (!value) return ""
|
|
|
|
if (value instanceof Date) {
|
|
return value.toISOString().slice(0, 10)
|
|
}
|
|
|
|
return value
|
|
}
|
|
|
|
function getOptionalString(formData: FormData, key: string) {
|
|
return formData.get(key)?.toString() ?? ""
|
|
}
|
|
|
|
function getTransportHelp(value: FormDataEntryValue | null) {
|
|
if (value === "yes") return true
|
|
if (value === "no") return false
|
|
return null
|
|
}
|
|
|
|
function getToastRequestFromFormData(formData: FormData) {
|
|
if (!formData.has("wantsToast")) return null
|
|
|
|
const speakerName = getOptionalString(formData, "toastSpeakerName")
|
|
if (!speakerName) return null
|
|
|
|
const memberId = getOptionalString(formData, "toastMemberId")
|
|
|
|
return {
|
|
memberId: memberId || null,
|
|
speakerName,
|
|
estimatedMinutes: getOptionalString(formData, "toastEstimatedMinutes"),
|
|
}
|
|
}
|
|
|
|
function deadlineMessage(template: string) {
|
|
const deadline = getRsvpDeadline()
|
|
return template.replace("{date}", deadline ?? "the deadline")
|
|
}
|
|
|
|
async function submitRsvpAction(token: string, formData: FormData) {
|
|
"use server"
|
|
|
|
if (isRsvpClosed()) {
|
|
redirect(`/invite/${token}?error=closed`)
|
|
}
|
|
|
|
const invitation = await getInvitationByToken(token)
|
|
|
|
if (!invitation) {
|
|
redirect(`/invite/${token}?error=invalid`)
|
|
}
|
|
|
|
const members = invitation.members.map((member) => {
|
|
const attendingValue = formData.get(`attending-${member.id}`)
|
|
|
|
if (attendingValue !== "yes" && attendingValue !== "no") {
|
|
redirect(`/invite/${token}?error=generic`)
|
|
}
|
|
|
|
const attending = attendingValue === "yes"
|
|
const rawMealPreference = formData.get(`meal-${member.id}`)?.toString() ?? ""
|
|
const mealPreference = mealPreferenceSchema.safeParse(rawMealPreference)
|
|
|
|
return {
|
|
memberId: member.id,
|
|
attending,
|
|
mealPreference: attending && mealPreference.success ? mealPreference.data : null,
|
|
dietaryRestrictions: getOptionalString(formData, `dietary-${member.id}`),
|
|
}
|
|
})
|
|
|
|
const parsed = submitInvitationResponseSchema.safeParse({
|
|
token,
|
|
members,
|
|
arrivalDate: formData.get("arrivalDate"),
|
|
departureDate: formData.get("departureDate"),
|
|
stayLocation: formData.get("stayLocation"),
|
|
needsTransportHelp: getTransportHelp(formData.get("needsTransportHelp")),
|
|
messageToCouple: formData.get("messageToCouple"),
|
|
})
|
|
|
|
if (!parsed.success) {
|
|
redirect(`/invite/${token}?error=generic`)
|
|
}
|
|
|
|
const interactions = interactionSubmissionSchema.safeParse({
|
|
invitationId: invitation.invitation.id,
|
|
toastRequest: getToastRequestFromFormData(formData),
|
|
})
|
|
|
|
if (!interactions.success) {
|
|
redirect(`/invite/${token}?error=generic`)
|
|
}
|
|
|
|
await submitInvitationResponse(parsed.data)
|
|
await replaceInvitationInteractions(interactions.data)
|
|
redirect(`/invite/${token}?submitted=1`)
|
|
}
|
|
|
|
export default async function InvitePage({
|
|
params,
|
|
searchParams,
|
|
}: {
|
|
params: Promise<{ token: string }>
|
|
searchParams: Promise<{ submitted?: string; error?: string }>
|
|
}) {
|
|
const [{ token }, { submitted, error }] = await Promise.all([params, searchParams])
|
|
const detail = await getInvitationByToken(token)
|
|
|
|
if (!detail) {
|
|
const dictionary = getGuestDictionary("en")
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-stone-50 px-6 py-12">
|
|
<section className="max-w-lg rounded-3xl border bg-white p-8 text-center shadow-sm">
|
|
<p className="text-sm uppercase tracking-[0.3em] text-stone-500">
|
|
{dictionary.hero.eyebrow}
|
|
</p>
|
|
<h1 className="mt-4 text-3xl font-semibold text-stone-950">
|
|
{dictionary.invalid.title}
|
|
</h1>
|
|
<p className="mt-3 text-stone-600">{dictionary.invalid.description}</p>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
const dictionary = getGuestDictionary(detail.invitation.language)
|
|
const [interactions, photoUpload] = await Promise.all([
|
|
getInvitationInteractions(detail.invitation.id),
|
|
getPhotoUploadByInvitationId(detail.invitation.id),
|
|
])
|
|
const closed = isRsvpClosed()
|
|
const action = submitRsvpAction.bind(null, token)
|
|
const greeting = dictionary.hero.greeting.replace("{name}", detail.invitation.display_name)
|
|
const toastRequest = interactions.toastRequests[0]
|
|
|
|
return (
|
|
<main className="min-h-screen bg-stone-50 text-stone-950">
|
|
<section className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-12">
|
|
<div className="rounded-[2rem] bg-white p-8 shadow-sm ring-1 ring-stone-200 md:p-12">
|
|
<p className="text-sm font-medium uppercase tracking-[0.3em] text-stone-500">
|
|
{dictionary.hero.eyebrow}
|
|
</p>
|
|
<h1 className="mt-5 max-w-3xl text-4xl font-semibold tracking-tight md:text-6xl">
|
|
{dictionary.hero.title}
|
|
</h1>
|
|
<p className="mt-6 text-xl font-medium text-stone-800">{greeting}</p>
|
|
<p className="mt-3 max-w-2xl text-stone-600">{dictionary.hero.description}</p>
|
|
</div>
|
|
|
|
{submitted ? (
|
|
<div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-emerald-950">
|
|
{dictionary.form.submitted}
|
|
</div>
|
|
) : null}
|
|
|
|
{error ? (
|
|
<div className="rounded-2xl border border-red-200 bg-red-50 px-5 py-4 text-red-950">
|
|
{error === "closed" ? dictionary.errors.closed : dictionary.errors.generic}
|
|
</div>
|
|
) : null}
|
|
|
|
<section className="grid gap-4 md:grid-cols-3">
|
|
<div className="rounded-3xl border bg-white p-6 shadow-sm">
|
|
<p className="text-sm text-stone-500">{dictionary.wedding.dateLabel}</p>
|
|
<p className="mt-2 font-medium">{dictionary.wedding.dateValue}</p>
|
|
</div>
|
|
<div className="rounded-3xl border bg-white p-6 shadow-sm">
|
|
<p className="text-sm text-stone-500">{dictionary.wedding.locationLabel}</p>
|
|
<p className="mt-2 font-medium">{dictionary.wedding.locationValue}</p>
|
|
</div>
|
|
<div className="rounded-3xl border bg-white p-6 shadow-sm">
|
|
<p className="text-sm text-stone-500">{dictionary.wedding.accommodationLabel}</p>
|
|
<p className="mt-2 font-medium">{dictionary.wedding.accommodationValue}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<form action={action} className="space-y-8">
|
|
<section className="rounded-[2rem] border bg-white p-6 shadow-sm md:p-8">
|
|
<div className="flex flex-col gap-2 border-b pb-6">
|
|
<h2 className="text-2xl font-semibold">{dictionary.sections.rsvp}</h2>
|
|
<p className="text-stone-600">
|
|
{closed
|
|
? dictionary.deadline.closed
|
|
: deadlineMessage(dictionary.deadline.open)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="divide-y">
|
|
{detail.members.map((member) => (
|
|
<fieldset className="space-y-5 py-6" disabled={closed} key={member.id}>
|
|
<legend className="text-lg font-semibold">{member.name}</legend>
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">{dictionary.form.attending}</p>
|
|
<div className="flex gap-4">
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
name={`attending-${member.id}`}
|
|
value="yes"
|
|
defaultChecked={member.attending === true}
|
|
required
|
|
/>
|
|
{dictionary.form.yes}
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
name={`attending-${member.id}`}
|
|
value="no"
|
|
defaultChecked={member.attending === false}
|
|
required
|
|
/>
|
|
{dictionary.form.no}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.form.mealPreference}</span>
|
|
<select
|
|
name={`meal-${member.id}`}
|
|
defaultValue={member.meal_preference ?? ""}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
>
|
|
<option value="">{dictionary.form.mealPlaceholder}</option>
|
|
{mealOptions.map((meal) => (
|
|
<option key={meal} value={meal}>
|
|
{dictionary.meals[meal]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.form.dietaryRestrictions}</span>
|
|
<input
|
|
name={`dietary-${member.id}`}
|
|
defaultValue={member.dietary_restrictions ?? ""}
|
|
placeholder={dictionary.form.noRestrictions}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<fieldset disabled={closed} className="rounded-[2rem] border bg-white p-6 shadow-sm md:p-8">
|
|
<div className="border-b pb-6">
|
|
<h2 className="text-2xl font-semibold">{dictionary.sections.travel}</h2>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-5 md:grid-cols-2">
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.form.arrivalDate}</span>
|
|
<input
|
|
type="date"
|
|
name="arrivalDate"
|
|
defaultValue={formatDateForInput(detail.response?.arrival_date)}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.form.departureDate}</span>
|
|
<input
|
|
type="date"
|
|
name="departureDate"
|
|
defaultValue={formatDateForInput(detail.response?.departure_date)}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.form.stayLocation}</span>
|
|
<input
|
|
name="stayLocation"
|
|
defaultValue={detail.response?.stay_location ?? ""}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">{dictionary.form.needsTransportHelp}</p>
|
|
<div className="flex gap-4">
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
name="needsTransportHelp"
|
|
value="yes"
|
|
defaultChecked={detail.response?.needs_transport_help === true}
|
|
/>
|
|
{dictionary.form.yes}
|
|
</label>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="radio"
|
|
name="needsTransportHelp"
|
|
value="no"
|
|
defaultChecked={detail.response?.needs_transport_help === false}
|
|
/>
|
|
{dictionary.form.no}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="space-y-2 md:col-span-2">
|
|
<span className="text-sm font-medium">{dictionary.form.messageToCouple}</span>
|
|
<textarea
|
|
name="messageToCouple"
|
|
defaultValue={detail.response?.message_to_couple ?? ""}
|
|
rows={4}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset disabled={closed} className="rounded-[2rem] border bg-white p-6 shadow-sm md:p-8">
|
|
<div className="border-b pb-6">
|
|
<h2 className="text-2xl font-semibold">{dictionary.sections.interactions}</h2>
|
|
<p className="mt-2 text-stone-600">{dictionary.interactions.intro}</p>
|
|
</div>
|
|
|
|
<div className="mt-8 space-y-10">
|
|
<section className="space-y-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold">{dictionary.interactions.toastTitle}</h3>
|
|
<p className="text-sm text-stone-600">
|
|
{dictionary.interactions.toastDescription}
|
|
</p>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2">
|
|
<input type="checkbox" name="wantsToast" defaultChecked={Boolean(toastRequest)} />
|
|
{dictionary.interactions.wantsToast}
|
|
</label>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.interactions.speakerName}</span>
|
|
<input
|
|
name="toastSpeakerName"
|
|
defaultValue={toastRequest?.speaker_name ?? ""}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
<label className="space-y-2">
|
|
<span className="text-sm font-medium">{dictionary.interactions.estimatedMinutes}</span>
|
|
<input
|
|
name="toastEstimatedMinutes"
|
|
type="number"
|
|
min="1"
|
|
defaultValue={toastRequest?.estimated_minutes ?? ""}
|
|
className="w-full rounded-xl border bg-white px-3 py-2"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<select name="toastMemberId" defaultValue={toastRequest?.member_id ?? ""} className="hidden">
|
|
<option value="" />
|
|
{detail.members.map((member) => (
|
|
<option key={member.id} value={member.id}>
|
|
{member.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</section>
|
|
|
|
</div>
|
|
</fieldset>
|
|
|
|
<PhotoUpload
|
|
token={token}
|
|
labels={dictionary.upload}
|
|
disabled={closed}
|
|
existingFilename={photoUpload?.original_filename ?? null}
|
|
/>
|
|
|
|
{!closed ? (
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
className="rounded-full bg-stone-950 px-6 py-3 font-medium text-white transition hover:bg-stone-800"
|
|
>
|
|
{dictionary.form.submit}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|