feat:UX and fix drinkkaart payment logic

2026-03-04 14:22:42 +01:00
parent 79869a9a21
commit f9d79c3879
26 changed files with 1432 additions and 283 deletions
--- a/apps/web/src/components/registration/PerformerForm.tsx
+++ b/apps/web/src/components/registration/PerformerForm.tsx
@@ -21,14 +21,25 @@ interface PerformerErrors {

 interface Props {
 	onBack: () => void;
-	onSuccess: (token: string) => void;
+	onSuccess: (token: string, email: string, name: string) => void;
+	prefillFirstName?: string;
+	prefillLastName?: string;
+	prefillEmail?: string;
+	isLoggedIn?: boolean;
 }

-export function PerformerForm({ onBack, onSuccess }: Props) {
+export function PerformerForm({
+	onBack,
+	onSuccess,
+	prefillFirstName = "",
+	prefillLastName = "",
+	prefillEmail = "",
+	isLoggedIn = false,
+}: Props) {
 	const [data, setData] = useState({
-		firstName: "",
-		lastName: "",
-		email: "",
+		firstName: prefillFirstName,
+		lastName: prefillLastName,
+		email: prefillEmail,
 		phone: "",
 		artForm: "",
 		experience: "",
@@ -42,7 +53,12 @@ export function PerformerForm({ onBack, onSuccess }: Props) {
 	const submitMutation = useMutation({
 		...orpc.submitRegistration.mutationOptions(),
 		onSuccess: (result) => {
-			if (result.managementToken) onSuccess(result.managementToken);
+			if (result.managementToken)
+				onSuccess(
+					result.managementToken,
+					data.email.trim(),
+					`${data.firstName.trim()} ${data.lastName.trim()}`.trim(),
+				);
 		},
 		onError: (error) => {
 			toast.error(`Er is iets misgegaan: ${error.message}`);
@@ -249,14 +265,15 @@ export function PerformerForm({ onBack, onSuccess }: Props) {
 							id="p-email"
 							name="email"
 							value={data.email}
-							onChange={handleChange}
-							onBlur={handleBlur}
+							onChange={isLoggedIn ? undefined : handleChange}
+							onBlur={isLoggedIn ? undefined : handleBlur}
+							readOnly={isLoggedIn}
 							placeholder="jouw@email.be"
 							autoComplete="email"
 							inputMode="email"
 							aria-required="true"
 							aria-invalid={touched.email && !!errors.email}
-							className={inputCls(!!touched.email && !!errors.email)}
+							className={`${inputCls(!!touched.email && !!errors.email)}${isLoggedIn ? "cursor-not-allowed opacity-60" : ""}`}
 						/>
 						{touched.email && errors.email && (
 							<span className="text-red-300 text-sm" role="alert">
--- a/apps/web/src/components/registration/SuccessScreen.tsx
+++ b/apps/web/src/components/registration/SuccessScreen.tsx
@@ -2,10 +2,12 @@ import { useState } from "react";

 interface Props {
 	token: string;
+	email?: string;
+	name?: string;
 	onReset: () => void;
 }

-export function SuccessScreen({ token, onReset }: Props) {
+export function SuccessScreen({ token, email, name, onReset }: Props) {
 	const manageUrl =
 		typeof window !== "undefined"
 			? `${window.location.origin}/manage/${token}`
@@ -33,6 +35,11 @@ export function SuccessScreen({ token, onReset }: Props) {
 		setDrinkkaartPromptDismissed(true);
 	};

+	// Build signup URL with pre-filled email query param so /login can pre-fill
+	const signupUrl = email
+		? `/login?signup=1&email=${encodeURIComponent(email)}`
+		: "/login?signup=1";
+
 	return (
 		<section
 			id="registration"
@@ -90,27 +97,46 @@ export function SuccessScreen({ token, onReset }: Props) {
 						</button>
 					</div>

-					{/* Drinkkaart account prompt */}
+					{/* Account creation prompt */}
 					{!drinkkaartPromptDismissed && (
-						<div className="mt-8 rounded-lg border border-white/20 bg-white/10 p-6">
-							<h3 className="mb-2 font-['Intro',sans-serif] text-lg text-white">
-								Wil je een Drinkkaart?
+						<div className="mt-8 rounded-xl border border-teal-400/30 bg-teal-400/10 p-6">
+							<h3 className="mb-1 font-['Intro',sans-serif] text-lg text-white">
+								Maak een gratis account aan
 							</h3>
 							<p className="mb-4 text-sm text-white/70">
-								Maak een gratis account aan om je digitale Drinkkaart te
-								activeren en saldo op te laden vóór het evenement.
+								Met een account zie je je inschrijving, activeer je je
+								Drinkkaart en laad je saldo op vóór het evenement.
 							</p>
-							<div className="flex flex-wrap gap-3">
+							<ul className="mb-5 space-y-1.5 text-sm text-white/70">
+								<li className="flex items-center gap-2">
+									<span className="text-teal-300">✓</span>
+									Beheer je inschrijving op één plek
+								</li>
+								<li className="flex items-center gap-2">
+									<span className="text-teal-300">✓</span>
+									Digitale Drinkkaart met QR-code
+								</li>
+								<li className="flex items-center gap-2">
+									<span className="text-teal-300">✓</span>
+									Saldo opladen vóór het evenement
+								</li>
+							</ul>
+							<div className="flex flex-wrap items-center gap-3">
 								<a
-									href="/login"
-									className="inline-flex items-center rounded-lg bg-white px-5 py-2.5 font-['Intro',sans-serif] text-[#214e51] text-sm transition-all hover:bg-gray-100"
+									href={signupUrl}
+									className="inline-flex items-center rounded-lg bg-white px-5 py-2.5 font-['Intro',sans-serif] text-[#214e51] text-sm transition-all hover:scale-105 hover:bg-gray-100"
 								>
 									Account aanmaken
+									{name && (
+										<span className="ml-1.5 font-normal text-xs opacity-60">
+											als {name}
+										</span>
+									)}
 								</a>
 								<button
 									type="button"
 									onClick={handleDismissPrompt}
-									className="text-sm text-white/50 underline underline-offset-2 transition-colors hover:text-white/80"
+									className="text-sm text-white/40 underline underline-offset-2 transition-colors hover:text-white/70"
 								>
 									Overslaan
 								</button>
--- a/apps/web/src/components/registration/WatcherForm.tsx
+++ b/apps/web/src/components/registration/WatcherForm.tsx
@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
+import { authClient } from "@/lib/auth-client";
 import {
 	calculateDrinkCard,
 	type GuestEntry,
@@ -24,13 +25,231 @@ interface WatcherErrors {

 interface Props {
 	onBack: () => void;
+	prefillFirstName?: string;
+	prefillLastName?: string;
+	prefillEmail?: string;
+	isLoggedIn?: boolean;
 }

-export function WatcherForm({ onBack }: Props) {
+// ── 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 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 (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>
+	);
+}
+
+// ── Main watcher form ──────────────────────────────────────────────────────
+
+export function WatcherForm({
+	onBack,
+	prefillFirstName = "",
+	prefillLastName = "",
+	prefillEmail = "",
+	isLoggedIn = false,
+}: Props) {
 	const [data, setData] = useState({
-		firstName: "",
-		lastName: "",
-		email: "",
+		firstName: prefillFirstName,
+		lastName: prefillLastName,
+		email: prefillEmail,
 		phone: "",
 		extraQuestions: "",
 	});
@@ -40,16 +259,37 @@ export function WatcherForm({ onBack }: Props) {
 	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;
-			// Redirect to Lemon Squeezy checkout immediately after registration
 			try {
+				const redirectUrl = isLoggedIn
+					? `${window.location.origin}/account?topup=success`
+					: undefined;
 				const checkout = await client.getCheckoutUrl({
 					token: result.managementToken,
+					redirectUrl,
 				});
-				window.location.href = checkout.checkoutUrl;
+				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");
@@ -162,6 +402,19 @@ export function WatcherForm({ onBack }: Props) {

 	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
@@ -291,14 +544,15 @@ export function WatcherForm({ onBack }: Props) {
 							id="w-email"
 							name="email"
 							value={data.email}
-							onChange={handleChange}
-							onBlur={handleBlur}
+							onChange={isLoggedIn ? undefined : handleChange}
+							onBlur={isLoggedIn ? undefined : handleBlur}
+							readOnly={isLoggedIn}
 							placeholder="jouw@email.be"
 							autoComplete="email"
 							inputMode="email"
 							aria-required="true"
 							aria-invalid={touched.email && !!errors.email}
-							className={inputCls(!!touched.email && !!errors.email)}
+							className={`${inputCls(!!touched.email && !!errors.email)}${isLoggedIn ? "cursor-not-allowed opacity-60" : ""}`}
 						/>
 						{touched.email && errors.email && (
 							<span className="text-red-300 text-sm" role="alert">