98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '../ui/button'
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
|
|
|
|
interface GuestBookEntry {
|
|
id: string
|
|
fName: string
|
|
lName: string
|
|
}
|
|
|
|
interface EventGuest {
|
|
id: string
|
|
rsvp: 'YES' | 'NO' | 'PENDING'
|
|
eventId: string
|
|
guestBookEntryId: string
|
|
guestBookEntry: GuestBookEntry
|
|
}
|
|
|
|
interface Props {
|
|
eventGuests: EventGuest[]
|
|
}
|
|
|
|
export default function EventRsvpModal({ eventGuests }: Props) {
|
|
|
|
const handleRsvpChange = async (
|
|
guest: EventGuest,
|
|
rsvp: 'YES' | 'NO' | 'PENDING'
|
|
) => {
|
|
try {
|
|
const res = await fetch(
|
|
`/api/events/${guest.eventId}/guests/${guest.guestBookEntryId}/rsvp`,
|
|
{
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ rsvp })
|
|
}
|
|
)
|
|
|
|
if (!res.ok) throw new Error('Failed to update RSVP')
|
|
toast.success(`RSVP updated for ${guest.guestBookEntry.fName} ${guest.guestBookEntry.lName}`)
|
|
} catch (err) {
|
|
console.error('RSVP update error:', err)
|
|
toast.error('Failed to update RSVP')
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant="secondary">Manage Guest RSVPs</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className='max-w-2xl'>
|
|
<DialogHeader>
|
|
<DialogTitle>Manage Guest RSVPs</DialogTitle>
|
|
<DialogDescription>
|
|
Update RSVP statuses for each guest attending this event.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className='space-y-4 max-h-[400px] overflow-y-auto pr-1'>
|
|
{eventGuests.length && eventGuests.map(guest => (
|
|
<div key={guest.id} className="flex justify-between items-center bg-muted p-3 rounded-md">
|
|
<div>
|
|
<p className="font-medium">{guest.guestBookEntry.fName + " " + guest.guestBookEntry.lName}</p>
|
|
</div>
|
|
<Select
|
|
defaultValue={guest.rsvp}
|
|
onValueChange={(value) =>
|
|
handleRsvpChange(guest, value as 'YES' | 'NO' | 'PENDING')
|
|
}
|
|
>
|
|
<SelectTrigger className="w-[120px]">
|
|
<SelectValue placeholder="Select status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="PENDING">Pending</SelectItem>
|
|
<SelectItem value="YES">Yes</SelectItem>
|
|
<SelectItem value="NO">No</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<DialogFooter className="mt-4">
|
|
<DialogClose asChild>
|
|
<Button variant="ghost">Close</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|