feat: invitation deletion

2026-08-11 22:18:25 +02:00
parent d4c542b93b
commit aed8684e09
7 changed files with 377 additions and 2 deletions
@@ -0,0 +1,75 @@
+"use client"
+
+import { useActionState, useState } from "react"
+import { useFormStatus } from "react-dom"
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import type { DeleteInvitationActionState } from "@/app/admin/guests/[id]/actions"
+import { deleteInvitationAction } from "@/app/admin/guests/[id]/actions"
+
+interface DeleteInvitationDialogProps {
+  invitationId: string
+  displayName: string
+}
+
+const initialState: DeleteInvitationActionState = { error: null }
+
+function DeleteSubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button type="submit" variant="destructive" disabled={pending}>
+      {pending ? "Deleting..." : "Delete permanently"}
+    </Button>
+  )
+}
+
+export function DeleteInvitationDialog({
+  invitationId,
+  displayName,
+}: DeleteInvitationDialogProps) {
+  const [open, setOpen] = useState(false)
+  const [state, formAction] = useActionState(deleteInvitationAction, initialState)
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete group</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <form action={formAction} className="space-y-4">
+          <input type="hidden" name="invitationId" value={invitationId} />
+
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {displayName}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently removes this invitation group, its members, RSVP information,
+              toast requests, and uploaded photo. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          {state.error ? (
+            <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {state.error}
+            </p>
+          ) : null}
+
+          <AlertDialogFooter>
+            <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
+            <DeleteSubmitButton />
+          </AlertDialogFooter>
+        </form>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}