Simplify registration flow: mandatory signup redirect, payment emails, payment reminder cron

- EventRegistrationForm/WatcherForm/PerformerForm: remove session/login nudge/SuccessScreen;
  both roles redirect to /login?signup=1&email=<email>&next=/account after submit
- SuccessScreen.tsx deleted (no longer used)
- account.tsx: add 'Betaal nu' CTA via checkoutMutation (shown when watcher + paymentStatus pending)
- DB schema: add paymentReminderSentAt column to registration table
- Migration: 0008_payment_reminder_sent_at.sql
- email.ts: update registrationConfirmationHtml / sendConfirmationEmail with signupUrl param;
  add sendPaymentReminderEmail and sendPaymentConfirmationEmail functions
- routers/index.ts: wire payment reminder into runSendReminders() — queries watchers
  with paymentStatus pending, paymentReminderSentAt IS NULL, createdAt <= now-3days
- mollie.ts webhook: call sendPaymentConfirmationEmail after marking registration paid

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

@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
-import { authClient } from "@/lib/auth-client";
 import {
 	calculateDrinkCard,
 	type GuestEntry,
@@ -12,8 +11,7 @@ import {
 	validatePhone,
 	validateTextField,
 } from "@/lib/registration";
-import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
-import { client, orpc } from "@/utils/orpc";
+import { orpc } from "@/utils/orpc";
 import { GiftSelector } from "./GiftSelector";
 import { GuestList } from "./GuestList";
 
@@ -26,236 +24,16 @@ interface WatcherErrors {
 
 interface Props {
 	onBack: () => void;
-	prefillFirstName?: string;
-	prefillLastName?: string;
-	prefillEmail?: string;
-	isLoggedIn?: boolean;
-}
-
-// ── Account creation modal shown after successful registration ─────────────
-
-interface AccountModalProps {
-	prefillName: string;
-	prefillEmail: string;
-	onDone: () => void;
-}
-
-function AccountModal({
-	prefillName,
-	prefillEmail,
-	onDone,
-}: AccountModalProps) {
-	const [name, setName] = useState(prefillName);
-	const [email] = useState(prefillEmail); // email is fixed (tied to registration)
-	const [password, setPassword] = useState("");
-	const [confirmPassword, setConfirmPassword] = useState("");
-	const [passwordError, setPasswordError] = useState<string | undefined>();
-	const { isOpen } = useRegistrationOpen();
-
-	const signupMutation = useMutation({
-		mutationFn: async () => {
-			if (password.length < 8)
-				throw new Error("Wachtwoord moet minstens 8 tekens zijn");
-			if (password !== confirmPassword)
-				throw new Error("Wachtwoorden komen niet overeen");
-			const result = await authClient.signUp.email({ email, password, name });
-			if (result.error) throw new Error(result.error.message);
-			return result.data;
-		},
-		onSuccess: () => {
-			toast.success(
-				"Account aangemaakt! Je wordt nu doorgestuurd naar betaling.",
-			);
-			onDone();
-		},
-		onError: (error) => {
-			toast.error(`Account aanmaken mislukt: ${error.message}`);
-		},
-	});
-
-	const handlePasswordChange = (val: string) => {
-		setPassword(val);
-		if (passwordError) setPasswordError(undefined);
-	};
-
-	const handleConfirmChange = (val: string) => {
-		setConfirmPassword(val);
-		if (passwordError) setPasswordError(undefined);
-	};
-
-	const handleSignup = (e: React.FormEvent) => {
-		e.preventDefault();
-		if (!isOpen) {
-			toast.error("Registratie is nog niet open");
-			return;
-		}
-		if (password.length < 8) {
-			setPasswordError("Wachtwoord moet minstens 8 tekens zijn");
-			return;
-		}
-		if (password !== confirmPassword) {
-			setPasswordError("Wachtwoorden komen niet overeen");
-			return;
-		}
-		signupMutation.mutate();
-	};
-
-	// Receive the checkout URL from parent by exposing a setter via ref pattern
-	// (simpler: the parent renders the modal and passes a prop)
-
-	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4">
-			<div className="w-full max-w-md rounded-2xl border border-white/10 bg-[#1a3d40] p-8 shadow-2xl">
-				{/* Header */}
-				<div className="mb-6 flex items-start gap-4">
-					<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-teal-400/20 text-teal-300 text-xl">
-						✓
-					</div>
-					<div>
-						<h2 className="font-['Intro',sans-serif] text-2xl text-white">
-							Inschrijving gelukt!
-						</h2>
-						<p className="mt-1 text-sm text-white/60">
-							Maak een gratis account aan om je Drinkkaart bij te houden.
-						</p>
-					</div>
-				</div>
-
-				{/* Value prop */}
-				<div className="mb-6 rounded-lg border border-teal-400/20 bg-teal-400/10 p-4">
-					<ul className="space-y-1.5 text-sm text-white/80">
-						<li className="flex items-center gap-2">
-							<span className="text-teal-300">✓</span>
-							Zie je drinkkaart-saldo en QR-code
-						</li>
-						<li className="flex items-center gap-2">
-							<span className="text-teal-300">✓</span>
-							Laad je kaart op vóór het evenement
-						</li>
-						<li className="flex items-center gap-2">
-							<span className="text-teal-300">✓</span>
-							Beheer je inschrijving op één plek
-						</li>
-					</ul>
-				</div>
-
-				{/* Signup form */}
-				<form onSubmit={handleSignup} className="space-y-4">
-					{/* Name */}
-					<div>
-						<label
-							className="mb-1.5 block text-sm text-white/60"
-							htmlFor="modal-name"
-						>
-							Naam
-						</label>
-						<input
-							id="modal-name"
-							type="text"
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							required
-							className="w-full rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-white placeholder:text-white/30 focus:border-teal-400/60 focus:outline-none"
-						/>
-					</div>
-
-					{/* Email (read-only) */}
-					<div>
-						<label
-							className="mb-1.5 block text-sm text-white/60"
-							htmlFor="modal-email"
-						>
-							Email
-						</label>
-						<input
-							id="modal-email"
-							type="email"
-							value={email}
-							readOnly
-							className="w-full cursor-not-allowed rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-white/60"
-						/>
-					</div>
-
-					{/* Password */}
-					<div>
-						<label
-							className="mb-1.5 block text-sm text-white/60"
-							htmlFor="modal-password"
-						>
-							Wachtwoord
-						</label>
-						<input
-							id="modal-password"
-							type="password"
-							placeholder="Minstens 8 tekens"
-							value={password}
-							onChange={(e) => handlePasswordChange(e.target.value)}
-							required
-							minLength={8}
-							className="w-full rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-white placeholder:text-white/30 focus:border-teal-400/60 focus:outline-none"
-						/>
-					</div>
-
-					{/* Confirm password */}
-					<div>
-						<label
-							className="mb-1.5 block text-sm text-white/60"
-							htmlFor="modal-confirm"
-						>
-							Bevestig wachtwoord
-						</label>
-						<input
-							id="modal-confirm"
-							type="password"
-							placeholder="Herhaal je wachtwoord"
-							value={confirmPassword}
-							onChange={(e) => handleConfirmChange(e.target.value)}
-							required
-							className="w-full rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-white placeholder:text-white/30 focus:border-teal-400/60 focus:outline-none"
-						/>
-					</div>
-
-					{passwordError && (
-						<p className="text-red-300 text-sm">{passwordError}</p>
-					)}
-
-					<button
-						type="submit"
-						disabled={signupMutation.isPending}
-						className="w-full rounded-lg bg-white py-3 font-['Intro',sans-serif] text-[#214e51] transition-all hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
-					>
-						{signupMutation.isPending
-							? "Bezig..."
-							: "Account aanmaken & betalen"}
-					</button>
-				</form>
-
-				{/* Skip */}
-				<button
-					type="button"
-					onClick={onDone}
-					className="mt-4 w-full text-center text-sm text-white/40 transition-colors hover:text-white/70"
-				>
-					Overslaan, verder naar betaling →
-				</button>
-			</div>
-		</div>
-	);
+	onSuccess: (token: string, email: string, name: string) => void;
 }
 
 // ── Main watcher form ──────────────────────────────────────────────────────
 
-export function WatcherForm({
-	onBack,
-	prefillFirstName = "",
-	prefillLastName = "",
-	prefillEmail = "",
-	isLoggedIn = false,
-}: Props) {
+export function WatcherForm({ onBack, onSuccess }: Props) {
 	const [data, setData] = useState({
-		firstName: prefillFirstName,
-		lastName: prefillLastName,
-		email: prefillEmail,
+		firstName: "",
+		lastName: "",
+		email: "",
 		phone: "",
 		extraQuestions: "",
 	});
@@ -265,40 +43,15 @@ export function WatcherForm({
 	const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
 	const [giftAmount, setGiftAmount] = useState(0);
 
-	// Modal state: shown after successful registration while we fetch checkout URL
-	const [modalState, setModalState] = useState<{
-		prefillName: string;
-		prefillEmail: string;
-		checkoutUrl: string;
-	} | null>(null);
-
 	const submitMutation = useMutation({
 		...orpc.submitRegistration.mutationOptions(),
-		onSuccess: async (result) => {
-			if (!result.managementToken) return;
-			try {
-				const redirectUrl = isLoggedIn
-					? `${window.location.origin}/account?topup=success`
-					: undefined;
-				const checkout = await client.getCheckoutUrl({
-					token: result.managementToken,
-					redirectUrl,
-				});
-				if (isLoggedIn) {
-					// Already logged in — skip the account-creation modal, go straight to checkout
-					window.location.href = checkout.checkoutUrl;
-				} else {
-					// Show the account-creation modal before redirecting to checkout
-					setModalState({
-						prefillName:
-							`${data.firstName.trim()} ${data.lastName.trim()}`.trim(),
-						prefillEmail: data.email.trim(),
-						checkoutUrl: checkout.checkoutUrl,
-					});
-				}
-			} catch (error) {
-				console.error("Checkout error:", error);
-				toast.error("Er is iets misgegaan bij het aanmaken van de betaling");
+		onSuccess: (result) => {
+			if (result.managementToken) {
+				onSuccess(
+					result.managementToken,
+					data.email.trim(),
+					`${data.firstName.trim()} ${data.lastName.trim()}`.trim(),
+				);
 			}
 		},
 		onError: (error) => {
@@ -408,19 +161,6 @@ export function WatcherForm({
 
 	return (
 		<div>
-			{/* Account-creation interstitial modal */}
-			{modalState && (
-				<AccountModal
-					prefillName={modalState.prefillName}
-					prefillEmail={modalState.prefillEmail}
-					onDone={() => {
-						const url = modalState.checkoutUrl;
-						setModalState(null);
-						window.location.href = url;
-					}}
-				/>
-			)}
-
 			{/* Back + type header */}
 			<div className="mb-8 flex items-center gap-4">
 				<button
@@ -550,15 +290,14 @@ export function WatcherForm({
 							id="w-email"
 							name="email"
 							value={data.email}
-							onChange={isLoggedIn ? undefined : handleChange}
-							onBlur={isLoggedIn ? undefined : handleBlur}
-							readOnly={isLoggedIn}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							placeholder="jouw@email.be"
 							autoComplete="email"
 							inputMode="email"
 							aria-required="true"
 							aria-invalid={touched.email && !!errors.email}
-							className={`${inputCls(!!touched.email && !!errors.email)}${isLoggedIn ? "cursor-not-allowed opacity-60" : ""}`}
+							className={inputCls(!!touched.email && !!errors.email)}
 						/>
 						{touched.email && errors.email && (
 							<span className="text-red-300 text-sm" role="alert">
@@ -659,7 +398,7 @@ export function WatcherForm({
 								Bezig...
 							</span>
 						) : (
-							"Bevestigen & betalen"
+							"Bevestigen"
 						)}
 					</button>
 					<a