feat:simplify dx and improve payment functions

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

@@ -0,0 +1,463 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+	inputCls,
+	validateEmail,
+	validatePhone,
+	validateTextField,
+} from "@/lib/registration";
+import { orpc } from "@/utils/orpc";
+
+interface PerformerErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	artForm?: string;
+	isOver16?: string;
+}
+
+interface Props {
+	onBack: () => void;
+	onSuccess: (token: string) => void;
+}
+
+export function PerformerForm({ onBack, onSuccess }: Props) {
+	const [data, setData] = useState({
+		firstName: "",
+		lastName: "",
+		email: "",
+		phone: "",
+		artForm: "",
+		experience: "",
+		isOver16: false,
+		extraQuestions: "",
+	});
+	const [errors, setErrors] = useState<PerformerErrors>({});
+	const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+	const submitMutation = useMutation({
+		...orpc.submitRegistration.mutationOptions(),
+		onSuccess: (result) => {
+			if (result.managementToken) onSuccess(result.managementToken);
+		},
+		onError: (error) => {
+			toast.error(`Er is iets misgegaan: ${error.message}`);
+		},
+	});
+
+	function validate(): boolean {
+		const errs: PerformerErrors = {
+			firstName: validateTextField(data.firstName, true, "Voornaam"),
+			lastName: validateTextField(data.lastName, true, "Achternaam"),
+			email: validateEmail(data.email),
+			phone: validatePhone(data.phone),
+			artForm: !data.artForm.trim() ? "Kunstvorm is verplicht" : undefined,
+			isOver16: !data.isOver16
+				? "Je moet 16 jaar of ouder zijn om op te treden"
+				: undefined,
+		};
+		setErrors(errs);
+		setTouched({
+			firstName: true,
+			lastName: true,
+			email: true,
+			phone: true,
+			artForm: true,
+			isOver16: true,
+		});
+		return !Object.values(errs).some(Boolean);
+	}
+
+	function handleChange(
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		const { name, value, type } = e.target;
+		const newValue =
+			type === "checkbox" ? (e.target as HTMLInputElement).checked : value;
+		setData((prev) => ({ ...prev, [name]: newValue }));
+
+		if (type !== "checkbox" && touched[name]) {
+			const fieldError: Record<string, string | undefined> = {
+				firstName: validateTextField(
+					name === "firstName" ? value : data.firstName,
+					true,
+					"Voornaam",
+				),
+				lastName: validateTextField(
+					name === "lastName" ? value : data.lastName,
+					true,
+					"Achternaam",
+				),
+				email: validateEmail(name === "email" ? value : data.email),
+				phone: validatePhone(name === "phone" ? value : data.phone),
+				artForm:
+					name === "artForm" && !value.trim()
+						? "Kunstvorm is verplicht"
+						: undefined,
+			};
+			setErrors((prev) => ({ ...prev, [name]: fieldError[name] }));
+		}
+	}
+
+	function handleBlur(
+		e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		const { name, value } = e.target;
+		setTouched((prev) => ({ ...prev, [name]: true }));
+		const errMap: Record<string, string | undefined> = {
+			firstName: validateTextField(value, true, "Voornaam"),
+			lastName: validateTextField(value, true, "Achternaam"),
+			email: validateEmail(value),
+			phone: validatePhone(value),
+			artForm: !value.trim() ? "Kunstvorm is verplicht" : undefined,
+		};
+		setErrors((prev) => ({ ...prev, [name]: errMap[name] }));
+	}
+
+	function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		if (!validate()) {
+			toast.error("Controleer je invoer");
+			return;
+		}
+		submitMutation.mutate({
+			firstName: data.firstName.trim(),
+			lastName: data.lastName.trim(),
+			email: data.email.trim(),
+			phone: data.phone.trim() || undefined,
+			registrationType: "performer",
+			artForm: data.artForm.trim() || undefined,
+			experience: data.experience.trim() || undefined,
+			isOver16: data.isOver16,
+			extraQuestions: data.extraQuestions.trim() || undefined,
+		});
+	}
+
+	return (
+		<div>
+			{/* Back + type header */}
+			<div className="mb-8 flex items-center gap-4">
+				<button
+					type="button"
+					onClick={onBack}
+					className="flex items-center gap-2 text-white/60 transition-colors hover:text-white"
+				>
+					<svg
+						className="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={2}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+						/>
+					</svg>
+					Terug
+				</button>
+				<div className="h-px flex-1 bg-white/10" />
+				<div className="flex items-center gap-2">
+					<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-400/20 text-amber-300">
+						<svg
+							className="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={1.5}
+							aria-hidden="true"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
+							/>
+						</svg>
+					</div>
+					<span className="font-['Intro',sans-serif] text-amber-300">
+						Ik wil optreden
+					</span>
+				</div>
+			</div>
+
+			<form onSubmit={handleSubmit} className="flex flex-col gap-6" noValidate>
+				{/* Name row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-firstName" className="text-white text-xl">
+							Voornaam <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="p-firstName"
+							name="firstName"
+							value={data.firstName}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="Jouw voornaam"
+							autoComplete="given-name"
+							aria-required="true"
+							aria-invalid={touched.firstName && !!errors.firstName}
+							className={inputCls(!!touched.firstName && !!errors.firstName)}
+						/>
+						{touched.firstName && errors.firstName && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.firstName}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-lastName" className="text-white text-xl">
+							Achternaam <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="p-lastName"
+							name="lastName"
+							value={data.lastName}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="Jouw achternaam"
+							autoComplete="family-name"
+							aria-required="true"
+							aria-invalid={touched.lastName && !!errors.lastName}
+							className={inputCls(!!touched.lastName && !!errors.lastName)}
+						/>
+						{touched.lastName && errors.lastName && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.lastName}
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Contact row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-email" className="text-white text-xl">
+							E-mail <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="email"
+							id="p-email"
+							name="email"
+							value={data.email}
+							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)}
+						/>
+						{touched.email && errors.email && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.email}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-phone" className="text-white text-xl">
+							Telefoon
+						</label>
+						<input
+							type="tel"
+							id="p-phone"
+							name="phone"
+							value={data.phone}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="06-12345678"
+							autoComplete="tel"
+							inputMode="tel"
+							aria-invalid={touched.phone && !!errors.phone}
+							className={inputCls(!!touched.phone && !!errors.phone)}
+						/>
+						{touched.phone && errors.phone && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.phone}
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Performer-specific fields */}
+				<div className="border border-amber-400/20 bg-amber-400/5 p-6">
+					<p className="mb-5 text-amber-300/80 text-sm uppercase tracking-wider">
+						Optreden details
+					</p>
+					<div className="flex flex-col gap-6">
+						<div className="flex flex-col gap-2">
+							<label htmlFor="p-artForm" className="text-white text-xl">
+								Kunstvorm <span className="text-red-300">*</span>
+							</label>
+							<input
+								type="text"
+								id="p-artForm"
+								name="artForm"
+								value={data.artForm}
+								onChange={handleChange}
+								onBlur={handleBlur}
+								placeholder="Muziek, Theater, Dans, etc."
+								autoComplete="off"
+								list="artFormSuggestions"
+								aria-required="true"
+								aria-invalid={touched.artForm && !!errors.artForm}
+								className={inputCls(!!touched.artForm && !!errors.artForm)}
+							/>
+							<datalist id="artFormSuggestions">
+								<option value="Muziek" />
+								<option value="Theater" />
+								<option value="Dans" />
+								<option value="Beeldende Kunst" />
+								<option value="Woordkunst" />
+								<option value="Comedy" />
+							</datalist>
+							{touched.artForm && errors.artForm && (
+								<span className="text-red-300 text-sm" role="alert">
+									{errors.artForm}
+								</span>
+							)}
+						</div>
+
+						<div className="flex flex-col gap-2">
+							<label htmlFor="p-experience" className="text-white text-xl">
+								Ervaring
+							</label>
+							<input
+								type="text"
+								id="p-experience"
+								name="experience"
+								value={data.experience}
+								onChange={handleChange}
+								onBlur={handleBlur}
+								placeholder="Beginner / Gevorderd / Professional"
+								autoComplete="off"
+								list="experienceSuggestions"
+								className={inputCls(false)}
+							/>
+							<datalist id="experienceSuggestions">
+								<option value="Beginner" />
+								<option value="Gevorderd" />
+								<option value="Professional" />
+							</datalist>
+						</div>
+
+						{/* Age confirmation */}
+						<div>
+							<label
+								htmlFor="p-isOver16"
+								className="flex cursor-pointer items-start gap-4"
+							>
+								<div className="relative mt-0.5 flex shrink-0">
+									<input
+										type="checkbox"
+										id="p-isOver16"
+										name="isOver16"
+										checked={data.isOver16}
+										onChange={handleChange}
+										className="peer sr-only"
+									/>
+									<div
+										className={`h-6 w-6 border-2 bg-transparent transition-colors peer-checked:bg-amber-400 peer-focus:ring-2 peer-focus:ring-amber-400/50 peer-focus:ring-offset-2 peer-focus:ring-offset-[#214e51] ${touched.isOver16 && errors.isOver16 ? "border-red-400" : "border-white/50 peer-checked:border-amber-400"}`}
+									/>
+									<svg
+										className="pointer-events-none absolute top-0 left-0 h-6 w-6 scale-0 text-[#214e51] transition-transform peer-checked:scale-100"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="3"
+										aria-hidden="true"
+									>
+										<polyline points="20 6 9 17 4 12" />
+									</svg>
+								</div>
+								<div className="flex flex-col gap-1">
+									<span className="text-lg text-white">
+										Ik ben 16 jaar of ouder{" "}
+										<span className="text-red-300">*</span>
+									</span>
+									<span className="text-sm text-white/60">
+										Je moet minimaal 16 jaar oud zijn om op te treden.
+									</span>
+								</div>
+							</label>
+							{touched.isOver16 && errors.isOver16 && (
+								<span className="mt-2 block text-red-300 text-sm" role="alert">
+									{errors.isOver16}
+								</span>
+							)}
+						</div>
+					</div>
+				</div>
+
+				{/* Extra questions */}
+				<div className="flex flex-col gap-2 border border-white/10 p-6">
+					<label htmlFor="p-extraQuestions" className="text-white text-xl">
+						Vragen of opmerkingen
+					</label>
+					<textarea
+						id="p-extraQuestions"
+						name="extraQuestions"
+						value={data.extraQuestions}
+						onChange={handleChange}
+						onBlur={handleBlur}
+						placeholder="Heb je nog vragen of iets dat we moeten weten?"
+						rows={3}
+						autoComplete="off"
+						className="resize-none bg-transparent text-lg text-white transition-all placeholder:text-white/40 focus:outline-none"
+					/>
+				</div>
+
+				<div className="flex flex-col items-center gap-4 pt-4">
+					<button
+						type="submit"
+						disabled={submitMutation.isPending}
+						aria-busy={submitMutation.isPending}
+						className="bg-amber-400 px-12 py-4 font-['Intro',sans-serif] text-[#1a3d40] text-xl transition-all hover:scale-105 hover:bg-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-400/50 focus:ring-offset-2 focus:ring-offset-[#214e51] disabled:cursor-not-allowed disabled:opacity-50 md:text-2xl"
+					>
+						{submitMutation.isPending ? (
+							<span className="flex items-center gap-2">
+								<svg
+									className="h-5 w-5 animate-spin"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									aria-label="Laden"
+								>
+									<circle
+										className="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										strokeWidth="4"
+									/>
+									<path
+										className="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									/>
+								</svg>
+								Bezig...
+							</span>
+						) : (
+							"Bevestigen"
+						)}
+					</button>
+					<a
+						href="/contact"
+						className="text-sm text-white/60 transition-colors hover:text-white"
+					>
+						Nog vragen? Neem contact op
+					</a>
+				</div>
+			</form>
+		</div>
+	);
+}