feat:gifts

apps/web/src/components/registration/GuestList.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
 	type GuestEntry,
 	type GuestErrors,
@@ -13,6 +14,8 @@ interface Props {
 	onRemove: (index: number) => void;
 	/** Optional suffix rendered after the guest count header (e.g. price warning) */
 	headerNote?: React.ReactNode;
+	/** Whether payment has already been made (disables removal without warning) */
+	isPaid?: boolean;
 }
 
 export function GuestList({
@@ -22,7 +25,29 @@ export function GuestList({
 	onAdd,
 	onRemove,
 	headerNote,
+	isPaid,
 }: Props) {
+	const [removingIndex, setRemovingIndex] = useState<number | null>(null);
+
+	const handleRemoveClick = (index: number) => {
+		if (isPaid) {
+			setRemovingIndex(index);
+		} else {
+			onRemove(index);
+		}
+	};
+
+	const confirmRemove = () => {
+		if (removingIndex !== null) {
+			onRemove(removingIndex);
+			setRemovingIndex(null);
+		}
+	};
+
+	const cancelRemove = () => {
+		setRemovingIndex(null);
+	};
+
 	return (
 		<div className="border border-teal-400/20 bg-teal-400/5 p-6">
 			<div className="mb-4 flex items-center justify-between">
@@ -60,6 +85,35 @@ export function GuestList({
 				)}
 			</div>
 
+			{/* Removal confirmation modal for paid registrations */}
+			{removingIndex !== null && (
+				<div className="mb-4 rounded border border-orange-400/30 bg-orange-400/10 p-4">
+					<p className="mb-2 font-medium text-orange-300 text-sm">
+						Let op: gast verwijderen
+					</p>
+					<p className="mb-4 text-sm text-white/70">
+						Als je al betaald hebt voor deze gast krijg je geen terugbetaling
+						bij het verwijderen.
+					</p>
+					<div className="flex gap-3">
+						<button
+							type="button"
+							onClick={confirmRemove}
+							className="rounded bg-orange-400/20 px-3 py-1.5 text-orange-300 text-sm hover:bg-orange-400/30"
+						>
+							Toch verwijderen
+						</button>
+						<button
+							type="button"
+							onClick={cancelRemove}
+							className="rounded border border-white/20 px-3 py-1.5 text-sm text-white/60 hover:bg-white/5"
+						>
+							Annuleren
+						</button>
+					</div>
+				</div>
+			)}
+
 			{guests.length === 0 && (
 				<p className="text-sm text-white/40">
 					Kom je met iemand mee? Voeg je medebezoekers toe. Elke extra persoon
@@ -82,7 +136,7 @@ export function GuestList({
 							</span>
 							<button
 								type="button"
-								onClick={() => onRemove(idx)}
+								onClick={() => handleRemoveClick(idx)}
 								className="flex items-center gap-1 text-red-400/70 text-sm transition-colors hover:text-red-300"
 							>
 								<svg