feat:UX and fix drinkkaart payment logic

apps/web/src/components/homepage/EventRegistrationForm.tsx

@@ -1,23 +1,43 @@
+import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 import { PerformerForm } from "@/components/registration/PerformerForm";
 import { SuccessScreen } from "@/components/registration/SuccessScreen";
 import { TypeSelector } from "@/components/registration/TypeSelector";
 import { WatcherForm } from "@/components/registration/WatcherForm";
+import { authClient } from "@/lib/auth-client";
 
 type RegistrationType = "performer" | "watcher";
 
+interface SuccessState {
+	token: string;
+	email: string;
+	name: string;
+}
+
 export default function EventRegistrationForm() {
+	const { data: session } = authClient.useSession();
 	const [selectedType, setSelectedType] = useState<RegistrationType | null>(
 		null,
 	);
-	const [successToken, setSuccessToken] = useState<string | null>(null);
+	const [successState, setSuccessState] = useState<SuccessState | null>(null);
 
-	if (successToken) {
+	const isLoggedIn = !!session?.user;
+	const user = session?.user as { name?: string; email?: string } | undefined;
+
+	// Split "Jan De Smet" → firstName="Jan", lastName="De Smet"
+	const nameParts = (user?.name ?? "").trim().split(/\s+/);
+	const prefillFirstName = nameParts[0] ?? "";
+	const prefillLastName = nameParts.slice(1).join(" ");
+	const prefillEmail = user?.email ?? "";
+
+	if (successState) {
 		return (
 			<SuccessScreen
-				token={successToken}
+				token={successState.token}
+				email={successState.email}
+				name={successState.name}
 				onReset={() => {
-					setSuccessToken(null);
+					setSuccessState(null);
 					setSelectedType(null);
 				}}
 			/>
@@ -33,21 +53,62 @@ export default function EventRegistrationForm() {
 				<h2 className="mb-2 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
 					Schrijf je nu in!
 				</h2>
-				<p className="mb-12 max-w-3xl text-lg text-white/80 md:text-xl">
+				<p className="mb-8 max-w-3xl text-lg text-white/80 md:text-xl">
 					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
 				</p>
 
+				{/* Login nudge — shown only to guests */}
+				{!isLoggedIn && (
+					<div className="mb-10 flex flex-col gap-3 rounded-lg border border-[#52979b]/40 bg-[#52979b]/10 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+						<p className="text-sm text-white/80">
+							<span className="mr-1 font-semibold text-teal-300">
+								Al een account?
+							</span>
+							Log in om je gegevens automatisch in te vullen en je Drinkkaart
+							direct te activeren na registratie.
+						</p>
+						<div className="flex shrink-0 items-center gap-3 text-sm">
+							<Link
+								to="/login"
+								className="font-medium text-teal-300 underline-offset-2 transition-colors hover:underline"
+							>
+								Inloggen
+							</Link>
+							<span className="text-white/30">·</span>
+							<Link
+								to="/login"
+								search={{ signup: "1" }}
+								className="text-white/60 transition-colors hover:text-white"
+							>
+								Nog geen account? Aanmaken
+							</Link>
+						</div>
+					</div>
+				)}
+
 				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
 
 				{selectedType === "performer" && (
 					<PerformerForm
 						onBack={() => setSelectedType(null)}
-						onSuccess={setSuccessToken}
+						onSuccess={(token, email, name) =>
+							setSuccessState({ token, email, name })
+						}
+						prefillFirstName={prefillFirstName}
+						prefillLastName={prefillLastName}
+						prefillEmail={prefillEmail}
+						isLoggedIn={isLoggedIn}
 					/>
 				)}
 
 				{selectedType === "watcher" && (
-					<WatcherForm onBack={() => setSelectedType(null)} />
+					<WatcherForm
+						onBack={() => setSelectedType(null)}
+						prefillFirstName={prefillFirstName}
+						prefillLastName={prefillLastName}
+						prefillEmail={prefillEmail}
+						isLoggedIn={isLoggedIn}
+					/>
 				)}
 			</div>
 		</section>