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
This commit is contained in:
@@ -1,12 +1,9 @@
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import confetti from "canvas-confetti";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { CountdownBanner } from "@/components/homepage/CountdownBanner";
|
||||
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";
|
||||
import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
|
||||
|
||||
function fireConfetti() {
|
||||
@@ -38,14 +35,16 @@ function fireConfetti() {
|
||||
|
||||
type RegistrationType = "performer" | "watcher";
|
||||
|
||||
interface SuccessState {
|
||||
token: string;
|
||||
email: string;
|
||||
name: string;
|
||||
function redirectToSignup(email: string) {
|
||||
const params = new URLSearchParams({
|
||||
signup: "1",
|
||||
email,
|
||||
next: "/account",
|
||||
});
|
||||
window.location.href = `/login?${params.toString()}`;
|
||||
}
|
||||
|
||||
export default function EventRegistrationForm() {
|
||||
const { data: session } = authClient.useSession();
|
||||
const { isOpen } = useRegistrationOpen();
|
||||
const confettiFired = useRef(false);
|
||||
|
||||
@@ -59,30 +58,6 @@ export default function EventRegistrationForm() {
|
||||
const [selectedType, setSelectedType] = useState<RegistrationType | null>(
|
||||
null,
|
||||
);
|
||||
const [successState, setSuccessState] = useState<SuccessState | null>(null);
|
||||
|
||||
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={successState.token}
|
||||
email={successState.email}
|
||||
name={successState.name}
|
||||
onReset={() => {
|
||||
setSuccessState(null);
|
||||
setSelectedType(null);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isOpen) {
|
||||
return (
|
||||
@@ -113,54 +88,17 @@ export default function EventRegistrationForm() {
|
||||
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={(token, email, name) =>
|
||||
setSuccessState({ token, email, name })
|
||||
}
|
||||
prefillFirstName={prefillFirstName}
|
||||
prefillLastName={prefillLastName}
|
||||
prefillEmail={prefillEmail}
|
||||
isLoggedIn={isLoggedIn}
|
||||
onSuccess={(_token, email, _name) => redirectToSignup(email)}
|
||||
/>
|
||||
)}
|
||||
{selectedType === "watcher" && (
|
||||
<WatcherForm
|
||||
onBack={() => setSelectedType(null)}
|
||||
prefillFirstName={prefillFirstName}
|
||||
prefillLastName={prefillLastName}
|
||||
prefillEmail={prefillEmail}
|
||||
isLoggedIn={isLoggedIn}
|
||||
onSuccess={(_token, email, _name) => redirectToSignup(email)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -22,24 +22,13 @@ interface PerformerErrors {
|
||||
interface Props {
|
||||
onBack: () => void;
|
||||
onSuccess: (token: string, email: string, name: string) => void;
|
||||
prefillFirstName?: string;
|
||||
prefillLastName?: string;
|
||||
prefillEmail?: string;
|
||||
isLoggedIn?: boolean;
|
||||
}
|
||||
|
||||
export function PerformerForm({
|
||||
onBack,
|
||||
onSuccess,
|
||||
prefillFirstName = "",
|
||||
prefillLastName = "",
|
||||
prefillEmail = "",
|
||||
isLoggedIn = false,
|
||||
}: Props) {
|
||||
export function PerformerForm({ onBack, onSuccess }: Props) {
|
||||
const [data, setData] = useState({
|
||||
firstName: prefillFirstName,
|
||||
lastName: prefillLastName,
|
||||
email: prefillEmail,
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
artForm: "",
|
||||
experience: "",
|
||||
@@ -265,15 +254,14 @@ export function PerformerForm({
|
||||
id="p-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">
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
interface Props {
|
||||
token: string;
|
||||
email?: string;
|
||||
name?: string;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export function SuccessScreen({ token, email, name, onReset }: Props) {
|
||||
const manageUrl =
|
||||
typeof window !== "undefined"
|
||||
? `${window.location.origin}/manage/${token}`
|
||||
: `/manage/${token}`;
|
||||
|
||||
const [drinkkaartPromptDismissed, setDrinkkaartPromptDismissed] = useState(
|
||||
() => {
|
||||
try {
|
||||
return (
|
||||
typeof localStorage !== "undefined" &&
|
||||
localStorage.getItem("drinkkaart_prompt_dismissed") === "1"
|
||||
);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const handleDismissPrompt = () => {
|
||||
try {
|
||||
localStorage.setItem("drinkkaart_prompt_dismissed", "1");
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
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"
|
||||
className="relative z-30 flex w-full items-center justify-center bg-[#214e51]/96 px-6 py-16 md:px-12"
|
||||
>
|
||||
<div className="mx-auto w-full max-w-3xl">
|
||||
<div className="rounded-lg border border-white/20 bg-white/5 p-8 md:p-12">
|
||||
<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-green-400">
|
||||
<svg
|
||||
className="h-8 w-8"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
aria-label="Succes"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="mb-4 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
|
||||
Gelukt!
|
||||
</h2>
|
||||
<p className="mb-6 text-lg text-white/80">
|
||||
Je inschrijving is bevestigd. We sturen je zo dadelijk een
|
||||
bevestigingsmail.
|
||||
</p>
|
||||
<div className="mb-8 rounded-lg border border-white/10 bg-white/5 p-6">
|
||||
<p className="mb-2 text-sm text-white/60">
|
||||
Geen mail ontvangen? Gebruik deze link:
|
||||
</p>
|
||||
<a
|
||||
href={manageUrl}
|
||||
className="break-all text-sm text-white/80 underline underline-offset-2 hover:text-white"
|
||||
>
|
||||
{manageUrl}
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<a
|
||||
href={manageUrl}
|
||||
className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
|
||||
>
|
||||
Bekijk mijn inschrijving
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
|
||||
>
|
||||
Nog een inschrijving
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Account creation prompt */}
|
||||
{!drinkkaartPromptDismissed && (
|
||||
<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">
|
||||
Met een account zie je je inschrijving, activeer je je
|
||||
Drinkkaart en laad je saldo op vóór het evenement.
|
||||
</p>
|
||||
<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={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/40 underline underline-offset-2 transition-colors hover:text-white/70"
|
||||
>
|
||||
Overslaan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import {
|
||||
Calendar,
|
||||
@@ -74,6 +74,22 @@ function AccountPage() {
|
||||
const [showQr, setShowQr] = useState(false);
|
||||
const [showTopUp, setShowTopUp] = useState(false);
|
||||
|
||||
const checkoutMutation = useMutation({
|
||||
mutationFn: async (token: string) => {
|
||||
const result = await client.getCheckoutUrl({
|
||||
token,
|
||||
redirectUrl: `${window.location.origin}/account?topup=success`,
|
||||
});
|
||||
return result;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
window.location.href = data.checkoutUrl;
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Er is iets misgegaan bij het aanmaken van de betaling");
|
||||
},
|
||||
});
|
||||
|
||||
const sessionQuery = useQuery({
|
||||
queryKey: ["session"],
|
||||
queryFn: () => authClient.getSession(),
|
||||
@@ -276,6 +292,58 @@ function AccountPage() {
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pay now CTA — shown for watchers with pending payment */}
|
||||
{registration.registrationType === "watcher" &&
|
||||
registration.paymentStatus === "pending" &&
|
||||
registration.managementToken && (
|
||||
<div className="mt-5 rounded-lg border border-teal-400/30 bg-teal-400/10 p-4">
|
||||
<p className="mb-3 text-sm text-white/80">
|
||||
Je inschrijving is bevestigd maar de betaling staat nog
|
||||
open. Betaal nu om je Drinkkaart te activeren.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
disabled={checkoutMutation.isPending}
|
||||
onClick={() =>
|
||||
checkoutMutation.mutate(registration.managementToken!)
|
||||
}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2 font-semibold text-[#214e51] text-sm transition-colors hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{checkoutMutation.isPending ? (
|
||||
<>
|
||||
<svg
|
||||
className="h-4 w-4 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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>
|
||||
Laden...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Wallet className="h-4 w-4" />
|
||||
Betaal nu
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { randomUUID } from "node:crypto";
|
||||
import { sendPaymentConfirmationEmail } from "@kk/api/email";
|
||||
import { creditRegistrationToAccount } from "@kk/api/routers/index";
|
||||
import { db } from "@kk/db";
|
||||
import { drinkkaart, drinkkaartTopup, registration } from "@kk/db/schema";
|
||||
@@ -206,6 +207,20 @@ async function handleWebhook({ request }: { request: Request }) {
|
||||
`Payment successful for registration ${registrationToken}, payment ${payment.id}`,
|
||||
);
|
||||
|
||||
// Send payment confirmation email (fire-and-forget; don't block webhook)
|
||||
sendPaymentConfirmationEmail({
|
||||
to: regRow.email,
|
||||
firstName: regRow.firstName,
|
||||
managementToken: regRow.managementToken!,
|
||||
drinkCardValue: regRow.drinkCardValue ?? undefined,
|
||||
giftAmount: regRow.giftAmount ?? undefined,
|
||||
}).catch((err) =>
|
||||
console.error(
|
||||
`Failed to send payment confirmation email for ${regRow.email}:`,
|
||||
err,
|
||||
),
|
||||
);
|
||||
|
||||
// If this is a watcher with a drink card value, try to credit their
|
||||
// drinkkaart immediately — but only if they already have an account.
|
||||
if (
|
||||
|
||||
Reference in New Issue
Block a user