feat:gifts

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

@@ -12,6 +12,7 @@ import {
 	validateTextField,
 } from "@/lib/registration";
 import { client, orpc } from "@/utils/orpc";
+import { GiftSelector } from "./GiftSelector";
 import { GuestList } from "./GuestList";
 
 interface WatcherErrors {
@@ -37,6 +38,7 @@ export function WatcherForm({ onBack }: Props) {
 	const [touched, setTouched] = useState<Record<string, boolean>>({});
 	const [guests, setGuests] = useState<GuestEntry[]>([]);
 	const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
+	const [giftAmount, setGiftAmount] = useState(0);
 
 	const submitMutation = useMutation({
 		...orpc.submitRegistration.mutationOptions(),
@@ -152,6 +154,7 @@ export function WatcherForm({ onBack }: Props) {
 				phone: g.phone.trim() || undefined,
 			})),
 			extraQuestions: data.extraQuestions.trim() || undefined,
+			giftAmount,
 		});
 	}
 
@@ -214,8 +217,9 @@ export function WatcherForm({ onBack }: Props) {
 				<div>
 					<p className="font-semibold text-white">Drinkkaart inbegrepen</p>
 					<p className="text-sm text-white/70">
-						Je betaald bij inkom <strong className="text-teal-300">€5</strong>{" "}
-						(+ €2 per medebezoeker) dat gaat naar je drinkkaart.
+						Je betaald bij registratie{" "}
+						<strong className="text-teal-300">€5</strong> (+ €2 per
+						medebezoeker) dat gaat naar je drinkkaart.
 						{guests.length > 0 && (
 							<span className="ml-1 font-semibold text-teal-300">
 								Totaal: €{totalPrice} voor {1 + guests.length} personen.
@@ -354,6 +358,14 @@ export function WatcherForm({ onBack }: Props) {
 					/>
 				</div>
 
+				{/* Gift selector */}
+				<div className="border border-white/10 p-6">
+					<h3 className="mb-4 font-['Intro',sans-serif] text-white text-xl">
+						Vrijwillige Gift
+					</h3>
+					<GiftSelector value={giftAmount} onChange={setGiftAmount} />
+				</div>
+
 				<div className="flex flex-col items-center gap-4 pt-4">
 					<button
 						type="submit"