This commit is contained in:
Raul Lugo
@@ -0,0 +1,201 @@
|
||||
import Link from "next/link"
|
||||
import { redirect } from "next/navigation"
|
||||
|
||||
import { createInvitationWithMembers } from "@/lib/db/queries/invitations"
|
||||
import { supportedLanguages } from "@/lib/i18n/config"
|
||||
import { createInvitationSchema } from "@/lib/validation/invitation"
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
function getMembersFromFormData(formData: FormData) {
|
||||
return Array.from({ length: 8 }, (_, index) =>
|
||||
formData.get(`member-${index}`)?.toString().trim(),
|
||||
).filter((value): value is string => Boolean(value))
|
||||
}
|
||||
|
||||
async function createInvitationAction(formData: FormData) {
|
||||
"use server"
|
||||
|
||||
const parsed = createInvitationSchema.safeParse({
|
||||
displayName: formData.get("displayName"),
|
||||
language: formData.get("language"),
|
||||
contactEmail: formData.get("contactEmail"),
|
||||
contactPhone: formData.get("contactPhone"),
|
||||
maxPartySize: formData.get("maxPartySize"),
|
||||
allowMemberEdits: formData.has("allowMemberEdits"),
|
||||
notes: formData.get("notes"),
|
||||
members: getMembersFromFormData(formData),
|
||||
})
|
||||
|
||||
if (!parsed.success) {
|
||||
const message = parsed.error.issues[0]?.message ?? "Invalid invitation data"
|
||||
redirect(`/admin/guests/new?error=${encodeURIComponent(message)}`)
|
||||
}
|
||||
|
||||
const invitation = await createInvitationWithMembers(parsed.data)
|
||||
redirect(`/admin/guests/${invitation.id}?created=1`)
|
||||
}
|
||||
|
||||
export default async function NewGuestPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ error?: string }>
|
||||
}) {
|
||||
const { error } = await searchParams
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">New invitation</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Create a private invite link and define the people included in it.
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/guests">Back to list</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Could not create invitation</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
<form action={createInvitationAction}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Invitation details</CardTitle>
|
||||
<CardDescription>
|
||||
The selected language will control the guest-facing invitation page.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-8">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2 sm:col-span-2">
|
||||
<Label htmlFor="displayName">Display name</Label>
|
||||
<Input
|
||||
id="displayName"
|
||||
name="displayName"
|
||||
placeholder="Ana & Luis or The Garcia Family"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="language">Language</Label>
|
||||
<Select name="language" required>
|
||||
<SelectTrigger id="language" className="w-full">
|
||||
<SelectValue placeholder="Select language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{supportedLanguages.map((language) => (
|
||||
<SelectItem key={language.code} value={language.code}>
|
||||
{language.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="maxPartySize">Max party size</Label>
|
||||
<Input
|
||||
id="maxPartySize"
|
||||
name="maxPartySize"
|
||||
type="number"
|
||||
min="1"
|
||||
defaultValue="1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contactEmail">Contact email</Label>
|
||||
<Input id="contactEmail" name="contactEmail" type="email" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contactPhone">Contact phone</Label>
|
||||
<Input id="contactPhone" name="contactPhone" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 sm:col-span-2">
|
||||
<Label htmlFor="notes">Admin notes</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
name="notes"
|
||||
placeholder="Anything only admins need to remember."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 rounded-md border p-4 sm:col-span-2">
|
||||
<Checkbox id="allowMemberEdits" name="allowMemberEdits" />
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="allowMemberEdits">Allow guest member edits</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Useful for flexible +1s. Guest editing is not implemented until the RSVP milestone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h2 className="font-medium">Initial members</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add at least one person. The first member is marked as the primary contact.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{Array.from({ length: 8 }, (_, index) => (
|
||||
<div className="space-y-2" key={index}>
|
||||
<Label htmlFor={`member-${index}`}>
|
||||
Member {index + 1}
|
||||
{index === 0 ? " (primary)" : ""}
|
||||
</Label>
|
||||
<Input
|
||||
id={`member-${index}`}
|
||||
name={`member-${index}`}
|
||||
placeholder={index === 0 ? "Ana Garcia" : "Optional"}
|
||||
required={index === 0}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="justify-end gap-3">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/guests">Cancel</Link>
|
||||
</Button>
|
||||
<Button type="submit">Create invitation</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user