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 confetti from "canvas-confetti";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { CountdownBanner } from "@/components/homepage/CountdownBanner";
|
import { CountdownBanner } from "@/components/homepage/CountdownBanner";
|
||||||
import { PerformerForm } from "@/components/registration/PerformerForm";
|
import { PerformerForm } from "@/components/registration/PerformerForm";
|
||||||
import { SuccessScreen } from "@/components/registration/SuccessScreen";
|
|
||||||
import { TypeSelector } from "@/components/registration/TypeSelector";
|
import { TypeSelector } from "@/components/registration/TypeSelector";
|
||||||
import { WatcherForm } from "@/components/registration/WatcherForm";
|
import { WatcherForm } from "@/components/registration/WatcherForm";
|
||||||
import { authClient } from "@/lib/auth-client";
|
|
||||||
import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
|
import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
|
||||||
|
|
||||||
function fireConfetti() {
|
function fireConfetti() {
|
||||||
@@ -38,14 +35,16 @@ function fireConfetti() {
|
|||||||
|
|
||||||
type RegistrationType = "performer" | "watcher";
|
type RegistrationType = "performer" | "watcher";
|
||||||
|
|
||||||
interface SuccessState {
|
function redirectToSignup(email: string) {
|
||||||
token: string;
|
const params = new URLSearchParams({
|
||||||
email: string;
|
signup: "1",
|
||||||
name: string;
|
email,
|
||||||
|
next: "/account",
|
||||||
|
});
|
||||||
|
window.location.href = `/login?${params.toString()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function EventRegistrationForm() {
|
export default function EventRegistrationForm() {
|
||||||
const { data: session } = authClient.useSession();
|
|
||||||
const { isOpen } = useRegistrationOpen();
|
const { isOpen } = useRegistrationOpen();
|
||||||
const confettiFired = useRef(false);
|
const confettiFired = useRef(false);
|
||||||
|
|
||||||
@@ -59,30 +58,6 @@ export default function EventRegistrationForm() {
|
|||||||
const [selectedType, setSelectedType] = useState<RegistrationType | null>(
|
const [selectedType, setSelectedType] = useState<RegistrationType | null>(
|
||||||
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) {
|
if (!isOpen) {
|
||||||
return (
|
return (
|
||||||
@@ -113,54 +88,17 @@ export default function EventRegistrationForm() {
|
|||||||
Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
|
Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
|
||||||
</p>
|
</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 && <TypeSelector onSelect={setSelectedType} />}
|
||||||
{selectedType === "performer" && (
|
{selectedType === "performer" && (
|
||||||
<PerformerForm
|
<PerformerForm
|
||||||
onBack={() => setSelectedType(null)}
|
onBack={() => setSelectedType(null)}
|
||||||
onSuccess={(token, email, name) =>
|
onSuccess={(_token, email, _name) => redirectToSignup(email)}
|
||||||
setSuccessState({ token, email, name })
|
|
||||||
}
|
|
||||||
prefillFirstName={prefillFirstName}
|
|
||||||
prefillLastName={prefillLastName}
|
|
||||||
prefillEmail={prefillEmail}
|
|
||||||
isLoggedIn={isLoggedIn}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{selectedType === "watcher" && (
|
{selectedType === "watcher" && (
|
||||||
<WatcherForm
|
<WatcherForm
|
||||||
onBack={() => setSelectedType(null)}
|
onBack={() => setSelectedType(null)}
|
||||||
prefillFirstName={prefillFirstName}
|
onSuccess={(_token, email, _name) => redirectToSignup(email)}
|
||||||
prefillLastName={prefillLastName}
|
|
||||||
prefillEmail={prefillEmail}
|
|
||||||
isLoggedIn={isLoggedIn}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -22,24 +22,13 @@ interface PerformerErrors {
|
|||||||
interface Props {
|
interface Props {
|
||||||
onBack: () => void;
|
onBack: () => void;
|
||||||
onSuccess: (token: string, email: string, name: string) => void;
|
onSuccess: (token: string, email: string, name: string) => void;
|
||||||
prefillFirstName?: string;
|
|
||||||
prefillLastName?: string;
|
|
||||||
prefillEmail?: string;
|
|
||||||
isLoggedIn?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function PerformerForm({
|
export function PerformerForm({ onBack, onSuccess }: Props) {
|
||||||
onBack,
|
|
||||||
onSuccess,
|
|
||||||
prefillFirstName = "",
|
|
||||||
prefillLastName = "",
|
|
||||||
prefillEmail = "",
|
|
||||||
isLoggedIn = false,
|
|
||||||
}: Props) {
|
|
||||||
const [data, setData] = useState({
|
const [data, setData] = useState({
|
||||||
firstName: prefillFirstName,
|
firstName: "",
|
||||||
lastName: prefillLastName,
|
lastName: "",
|
||||||
email: prefillEmail,
|
email: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
artForm: "",
|
artForm: "",
|
||||||
experience: "",
|
experience: "",
|
||||||
@@ -265,15 +254,14 @@ export function PerformerForm({
|
|||||||
id="p-email"
|
id="p-email"
|
||||||
name="email"
|
name="email"
|
||||||
value={data.email}
|
value={data.email}
|
||||||
onChange={isLoggedIn ? undefined : handleChange}
|
onChange={handleChange}
|
||||||
onBlur={isLoggedIn ? undefined : handleBlur}
|
onBlur={handleBlur}
|
||||||
readOnly={isLoggedIn}
|
|
||||||
placeholder="jouw@email.be"
|
placeholder="jouw@email.be"
|
||||||
autoComplete="email"
|
autoComplete="email"
|
||||||
inputMode="email"
|
inputMode="email"
|
||||||
aria-required="true"
|
aria-required="true"
|
||||||
aria-invalid={touched.email && !!errors.email}
|
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 && (
|
{touched.email && errors.email && (
|
||||||
<span className="text-red-300 text-sm" role="alert">
|
<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 { useMutation } from "@tanstack/react-query";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { authClient } from "@/lib/auth-client";
|
|
||||||
import {
|
import {
|
||||||
calculateDrinkCard,
|
calculateDrinkCard,
|
||||||
type GuestEntry,
|
type GuestEntry,
|
||||||
@@ -12,8 +11,7 @@ import {
|
|||||||
validatePhone,
|
validatePhone,
|
||||||
validateTextField,
|
validateTextField,
|
||||||
} from "@/lib/registration";
|
} from "@/lib/registration";
|
||||||
import { useRegistrationOpen } from "@/lib/useRegistrationOpen";
|
import { orpc } from "@/utils/orpc";
|
||||||
import { client, orpc } from "@/utils/orpc";
|
|
||||||
import { GiftSelector } from "./GiftSelector";
|
import { GiftSelector } from "./GiftSelector";
|
||||||
import { GuestList } from "./GuestList";
|
import { GuestList } from "./GuestList";
|
||||||
|
|
||||||
@@ -26,236 +24,16 @@ interface WatcherErrors {
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onBack: () => void;
|
onBack: () => void;
|
||||||
prefillFirstName?: string;
|
onSuccess: (token: string, email: string, name: string) => void;
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Main watcher form ──────────────────────────────────────────────────────
|
// ── Main watcher form ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
export function WatcherForm({
|
export function WatcherForm({ onBack, onSuccess }: Props) {
|
||||||
onBack,
|
|
||||||
prefillFirstName = "",
|
|
||||||
prefillLastName = "",
|
|
||||||
prefillEmail = "",
|
|
||||||
isLoggedIn = false,
|
|
||||||
}: Props) {
|
|
||||||
const [data, setData] = useState({
|
const [data, setData] = useState({
|
||||||
firstName: prefillFirstName,
|
firstName: "",
|
||||||
lastName: prefillLastName,
|
lastName: "",
|
||||||
email: prefillEmail,
|
email: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
extraQuestions: "",
|
extraQuestions: "",
|
||||||
});
|
});
|
||||||
@@ -265,40 +43,15 @@ export function WatcherForm({
|
|||||||
const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
|
const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
|
||||||
const [giftAmount, setGiftAmount] = useState(0);
|
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({
|
const submitMutation = useMutation({
|
||||||
...orpc.submitRegistration.mutationOptions(),
|
...orpc.submitRegistration.mutationOptions(),
|
||||||
onSuccess: async (result) => {
|
onSuccess: (result) => {
|
||||||
if (!result.managementToken) return;
|
if (result.managementToken) {
|
||||||
try {
|
onSuccess(
|
||||||
const redirectUrl = isLoggedIn
|
result.managementToken,
|
||||||
? `${window.location.origin}/account?topup=success`
|
data.email.trim(),
|
||||||
: undefined;
|
`${data.firstName.trim()} ${data.lastName.trim()}`.trim(),
|
||||||
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");
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
@@ -408,19 +161,6 @@ export function WatcherForm({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<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 */}
|
{/* Back + type header */}
|
||||||
<div className="mb-8 flex items-center gap-4">
|
<div className="mb-8 flex items-center gap-4">
|
||||||
<button
|
<button
|
||||||
@@ -550,15 +290,14 @@ export function WatcherForm({
|
|||||||
id="w-email"
|
id="w-email"
|
||||||
name="email"
|
name="email"
|
||||||
value={data.email}
|
value={data.email}
|
||||||
onChange={isLoggedIn ? undefined : handleChange}
|
onChange={handleChange}
|
||||||
onBlur={isLoggedIn ? undefined : handleBlur}
|
onBlur={handleBlur}
|
||||||
readOnly={isLoggedIn}
|
|
||||||
placeholder="jouw@email.be"
|
placeholder="jouw@email.be"
|
||||||
autoComplete="email"
|
autoComplete="email"
|
||||||
inputMode="email"
|
inputMode="email"
|
||||||
aria-required="true"
|
aria-required="true"
|
||||||
aria-invalid={touched.email && !!errors.email}
|
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 && (
|
{touched.email && errors.email && (
|
||||||
<span className="text-red-300 text-sm" role="alert">
|
<span className="text-red-300 text-sm" role="alert">
|
||||||
@@ -659,7 +398,7 @@ export function WatcherForm({
|
|||||||
Bezig...
|
Bezig...
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
"Bevestigen & betalen"
|
"Bevestigen"
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
<a
|
<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 { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||||
import {
|
import {
|
||||||
Calendar,
|
Calendar,
|
||||||
@@ -74,6 +74,22 @@ function AccountPage() {
|
|||||||
const [showQr, setShowQr] = useState(false);
|
const [showQr, setShowQr] = useState(false);
|
||||||
const [showTopUp, setShowTopUp] = 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({
|
const sessionQuery = useQuery({
|
||||||
queryKey: ["session"],
|
queryKey: ["session"],
|
||||||
queryFn: () => authClient.getSession(),
|
queryFn: () => authClient.getSession(),
|
||||||
@@ -276,6 +292,58 @@ function AccountPage() {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</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>
|
||||||
) : (
|
) : (
|
||||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { randomUUID } from "node:crypto";
|
import { randomUUID } from "node:crypto";
|
||||||
|
import { sendPaymentConfirmationEmail } from "@kk/api/email";
|
||||||
import { creditRegistrationToAccount } from "@kk/api/routers/index";
|
import { creditRegistrationToAccount } from "@kk/api/routers/index";
|
||||||
import { db } from "@kk/db";
|
import { db } from "@kk/db";
|
||||||
import { drinkkaart, drinkkaartTopup, registration } from "@kk/db/schema";
|
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}`,
|
`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
|
// If this is a watcher with a drink card value, try to credit their
|
||||||
// drinkkaart immediately — but only if they already have an account.
|
// drinkkaart immediately — but only if they already have an account.
|
||||||
if (
|
if (
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ const baseUrl = env.BETTER_AUTH_URL ?? "https://kunstenkamp.be";
|
|||||||
function registrationConfirmationHtml(params: {
|
function registrationConfirmationHtml(params: {
|
||||||
firstName: string;
|
firstName: string;
|
||||||
manageUrl: string;
|
manageUrl: string;
|
||||||
|
signupUrl: string;
|
||||||
wantsToPerform: boolean;
|
wantsToPerform: boolean;
|
||||||
artForm?: string | null;
|
artForm?: string | null;
|
||||||
giftAmount?: number;
|
giftAmount?: number;
|
||||||
@@ -99,13 +100,26 @@ function registrationConfirmationHtml(params: {
|
|||||||
</table>
|
</table>
|
||||||
${paymentSummary}
|
${paymentSummary}
|
||||||
<p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
<p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
Wil je je gegevens later nog aanpassen of je inschrijving annuleren? Gebruik dan de knop hieronder. De link is uniek voor jou — deel hem niet.
|
Maak een account aan om je inschrijving te beheren en (voor bezoekers) je Drinkkaart te activeren.
|
||||||
</p>
|
</p>
|
||||||
<!-- CTA button -->
|
<!-- Account creation CTA -->
|
||||||
<table cellpadding="0" cellspacing="0">
|
<table cellpadding="0" cellspacing="0" style="margin-bottom:16px;">
|
||||||
<tr>
|
<tr>
|
||||||
<td style="border-radius:2px;background:#ffffff;">
|
<td style="border-radius:2px;background:#ffffff;">
|
||||||
<a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
|
<a href="${params.signupUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
|
||||||
|
Account aanmaken
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
Wil je je gegevens later nog aanpassen of je inschrijving annuleren? Gebruik dan de knop hieronder. De link is uniek voor jou — deel hem niet.
|
||||||
|
</p>
|
||||||
|
<!-- Manage CTA button -->
|
||||||
|
<table cellpadding="0" cellspacing="0">
|
||||||
|
<tr>
|
||||||
|
<td style="border-radius:2px;background:rgba(255,255,255,0.15);">
|
||||||
|
<a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#ffffff;text-decoration:none;">
|
||||||
Beheer mijn inschrijving
|
Beheer mijn inschrijving
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -280,6 +294,8 @@ export async function sendConfirmationEmail(params: {
|
|||||||
artForm?: string | null;
|
artForm?: string | null;
|
||||||
giftAmount?: number;
|
giftAmount?: number;
|
||||||
drinkCardValue?: number;
|
drinkCardValue?: number;
|
||||||
|
/** Pre-filled signup URL, e.g. /login?signup=1&email=…&next=/account */
|
||||||
|
signupUrl?: string;
|
||||||
}) {
|
}) {
|
||||||
const transport = getTransport();
|
const transport = getTransport();
|
||||||
if (!transport) {
|
if (!transport) {
|
||||||
@@ -287,6 +303,9 @@ export async function sendConfirmationEmail(params: {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
|
const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
|
||||||
|
const signupUrl =
|
||||||
|
params.signupUrl ??
|
||||||
|
`${baseUrl}/login?signup=1&email=${encodeURIComponent(params.to)}&next=/account`;
|
||||||
await transport.sendMail({
|
await transport.sendMail({
|
||||||
from,
|
from,
|
||||||
to: params.to,
|
to: params.to,
|
||||||
@@ -294,6 +313,7 @@ export async function sendConfirmationEmail(params: {
|
|||||||
html: registrationConfirmationHtml({
|
html: registrationConfirmationHtml({
|
||||||
firstName: params.firstName,
|
firstName: params.firstName,
|
||||||
manageUrl,
|
manageUrl,
|
||||||
|
signupUrl,
|
||||||
wantsToPerform: params.wantsToPerform,
|
wantsToPerform: params.wantsToPerform,
|
||||||
artForm: params.artForm,
|
artForm: params.artForm,
|
||||||
giftAmount: params.giftAmount,
|
giftAmount: params.giftAmount,
|
||||||
@@ -444,3 +464,220 @@ export async function sendReminderEmail(params: {
|
|||||||
html: reminderHtml({ firstName: params.firstName }),
|
html: reminderHtml({ firstName: params.firstName }),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function paymentReminderHtml(params: {
|
||||||
|
firstName: string;
|
||||||
|
accountUrl: string;
|
||||||
|
manageUrl: string;
|
||||||
|
drinkCardValue?: number;
|
||||||
|
giftAmount?: number;
|
||||||
|
}) {
|
||||||
|
const formatEuro = (cents: number) =>
|
||||||
|
`€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
|
||||||
|
|
||||||
|
const giftCents = params.giftAmount ?? 0;
|
||||||
|
const drinkCardCents = (params.drinkCardValue ?? 0) * 100;
|
||||||
|
const totalCents = drinkCardCents + giftCents;
|
||||||
|
const totalStr = totalCents > 0 ? formatEuro(totalCents) : "";
|
||||||
|
|
||||||
|
const amountLine = totalStr
|
||||||
|
? `<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
Je betaling van <strong style="color:#ffffff;">${totalStr}</strong> staat nog open. Log in op je account om te betalen.
|
||||||
|
</p>`
|
||||||
|
: `<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
Je betaling staat nog open. Log in op je account om te betalen.
|
||||||
|
</p>`;
|
||||||
|
|
||||||
|
return `<!DOCTYPE html>
|
||||||
|
<html lang="nl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Herinnering: betaling open</title>
|
||||||
|
</head>
|
||||||
|
<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:40px 48px 32px;">
|
||||||
|
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
|
||||||
|
<h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Betaling nog open</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:0 48px 32px;">
|
||||||
|
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
Hoi ${params.firstName},
|
||||||
|
</p>
|
||||||
|
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
Je hebt je ingeschreven voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong>, maar we hebben nog geen betaling ontvangen.
|
||||||
|
</p>
|
||||||
|
${amountLine}
|
||||||
|
<!-- Pay CTA -->
|
||||||
|
<table cellpadding="0" cellspacing="0" style="margin-bottom:16px;">
|
||||||
|
<tr>
|
||||||
|
<td style="border-radius:2px;background:#ffffff;">
|
||||||
|
<a href="${params.accountUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
|
||||||
|
Betaal nu
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">
|
||||||
|
Je inschrijving beheren? <a href="${params.manageUrl}" style="color:rgba(255,255,255,0.6);">Klik hier</a>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
|
||||||
|
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);line-height:1.6;">
|
||||||
|
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a><br/>
|
||||||
|
Kunstenkamp vzw — Een initiatief voor en door kunstenaars.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function sendPaymentReminderEmail(params: {
|
||||||
|
to: string;
|
||||||
|
firstName: string;
|
||||||
|
managementToken: string;
|
||||||
|
drinkCardValue?: number;
|
||||||
|
giftAmount?: number;
|
||||||
|
}) {
|
||||||
|
const transport = getTransport();
|
||||||
|
if (!transport) {
|
||||||
|
console.warn("SMTP not configured — skipping payment reminder email");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const accountUrl = `${baseUrl}/account`;
|
||||||
|
const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
|
||||||
|
await transport.sendMail({
|
||||||
|
from,
|
||||||
|
to: params.to,
|
||||||
|
subject: "Herinnering: betaling open — Open Mic Night",
|
||||||
|
html: paymentReminderHtml({
|
||||||
|
firstName: params.firstName,
|
||||||
|
accountUrl,
|
||||||
|
manageUrl,
|
||||||
|
drinkCardValue: params.drinkCardValue,
|
||||||
|
giftAmount: params.giftAmount,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function paymentConfirmationHtml(params: {
|
||||||
|
firstName: string;
|
||||||
|
manageUrl: string;
|
||||||
|
drinkCardValue?: number;
|
||||||
|
giftAmount?: number;
|
||||||
|
}) {
|
||||||
|
const formatEuro = (cents: number) =>
|
||||||
|
`€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
|
||||||
|
|
||||||
|
const giftCents = params.giftAmount ?? 0;
|
||||||
|
const drinkCardCents = (params.drinkCardValue ?? 0) * 100;
|
||||||
|
const totalCents = drinkCardCents + giftCents;
|
||||||
|
|
||||||
|
const paymentSummary =
|
||||||
|
totalCents > 0
|
||||||
|
? `<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:16px 0;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:20px 24px;">
|
||||||
|
<p style="margin:0 0 12px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Betaling ontvangen</p>
|
||||||
|
${drinkCardCents > 0 ? `<p style="margin:0 0 8px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.5;">Drinkkaart: <span style="color:#ffffff;font-weight:500;">${formatEuro(drinkCardCents)}</span></p>` : ""}
|
||||||
|
${giftCents > 0 ? `<p style="margin:0 0 8px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.5;">Vrijwillige gift: <span style="color:#ffffff;font-weight:500;">${formatEuro(giftCents)}</span></p>` : ""}
|
||||||
|
<p style="margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1);font-size:18px;color:#ffffff;font-weight:600;">Totaal: ${formatEuro(totalCents)}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>`
|
||||||
|
: "";
|
||||||
|
|
||||||
|
return `<!DOCTYPE html>
|
||||||
|
<html lang="nl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Betaling ontvangen</title>
|
||||||
|
</head>
|
||||||
|
<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
|
||||||
|
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
|
||||||
|
<tr>
|
||||||
|
<td align="center">
|
||||||
|
<table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
|
||||||
|
<tr>
|
||||||
|
<td style="padding:40px 48px 32px;">
|
||||||
|
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
|
||||||
|
<h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Betaling ontvangen!</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:0 48px 32px;">
|
||||||
|
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
Hoi ${params.firstName},
|
||||||
|
</p>
|
||||||
|
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
|
||||||
|
We hebben je betaling voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> in goede orde ontvangen. Tot dan!
|
||||||
|
</p>
|
||||||
|
${paymentSummary}
|
||||||
|
<!-- Manage CTA -->
|
||||||
|
<table cellpadding="0" cellspacing="0">
|
||||||
|
<tr>
|
||||||
|
<td style="border-radius:2px;background:rgba(255,255,255,0.15);">
|
||||||
|
<a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#ffffff;text-decoration:none;">
|
||||||
|
Beheer mijn inschrijving
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
|
||||||
|
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);line-height:1.6;">
|
||||||
|
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a><br/>
|
||||||
|
Kunstenkamp vzw — Een initiatief voor en door kunstenaars.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function sendPaymentConfirmationEmail(params: {
|
||||||
|
to: string;
|
||||||
|
firstName: string;
|
||||||
|
managementToken: string;
|
||||||
|
drinkCardValue?: number;
|
||||||
|
giftAmount?: number;
|
||||||
|
}) {
|
||||||
|
const transport = getTransport();
|
||||||
|
if (!transport) {
|
||||||
|
console.warn("SMTP not configured — skipping payment confirmation email");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
|
||||||
|
await transport.sendMail({
|
||||||
|
from,
|
||||||
|
to: params.to,
|
||||||
|
subject: "Betaling ontvangen — Open Mic Night",
|
||||||
|
html: paymentConfirmationHtml({
|
||||||
|
firstName: params.firstName,
|
||||||
|
manageUrl,
|
||||||
|
drinkCardValue: params.drinkCardValue,
|
||||||
|
giftAmount: params.giftAmount,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import { z } from "zod";
|
|||||||
import {
|
import {
|
||||||
sendCancellationEmail,
|
sendCancellationEmail,
|
||||||
sendConfirmationEmail,
|
sendConfirmationEmail,
|
||||||
|
sendPaymentReminderEmail,
|
||||||
sendReminderEmail,
|
sendReminderEmail,
|
||||||
sendUpdateEmail,
|
sendUpdateEmail,
|
||||||
} from "../email";
|
} from "../email";
|
||||||
@@ -975,5 +976,40 @@ export async function runSendReminders(): Promise<{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Payment reminders: watchers with pending payment older than 3 days
|
||||||
|
const threeDaysAgo = now - 3 * 24 * 60 * 60 * 1000;
|
||||||
|
const unpaidWatchers = await db
|
||||||
|
.select()
|
||||||
|
.from(registration)
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(registration.registrationType, "watcher"),
|
||||||
|
eq(registration.paymentStatus, "pending"),
|
||||||
|
isNull(registration.paymentReminderSentAt),
|
||||||
|
lte(registration.createdAt, new Date(threeDaysAgo)),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
for (const reg of unpaidWatchers) {
|
||||||
|
if (!reg.managementToken) continue;
|
||||||
|
try {
|
||||||
|
await sendPaymentReminderEmail({
|
||||||
|
to: reg.email,
|
||||||
|
firstName: reg.firstName,
|
||||||
|
managementToken: reg.managementToken,
|
||||||
|
drinkCardValue: reg.drinkCardValue ?? undefined,
|
||||||
|
giftAmount: reg.giftAmount ?? undefined,
|
||||||
|
});
|
||||||
|
await db
|
||||||
|
.update(registration)
|
||||||
|
.set({ paymentReminderSentAt: new Date() })
|
||||||
|
.where(eq(registration.id, reg.id));
|
||||||
|
sent++;
|
||||||
|
} catch (err) {
|
||||||
|
errors.push(`payment-reminder ${reg.email}: ${String(err)}`);
|
||||||
|
console.error(`Failed to send payment reminder to ${reg.email}:`, err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return { sent, skipped: false, errors };
|
return { sent, skipped: false, errors };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
-- Migration: add payment_reminder_sent_at column to registration table
|
||||||
|
ALTER TABLE registration ADD COLUMN payment_reminder_sent_at INTEGER;
|
||||||
@@ -37,6 +37,9 @@ export const registration = sqliteTable(
|
|||||||
drinkkaartCreditedAt: integer("drinkkaart_credited_at", {
|
drinkkaartCreditedAt: integer("drinkkaart_credited_at", {
|
||||||
mode: "timestamp_ms",
|
mode: "timestamp_ms",
|
||||||
}),
|
}),
|
||||||
|
paymentReminderSentAt: integer("payment_reminder_sent_at", {
|
||||||
|
mode: "timestamp_ms",
|
||||||
|
}),
|
||||||
createdAt: integer("created_at", { mode: "timestamp_ms" })
|
createdAt: integer("created_at", { mode: "timestamp_ms" })
|
||||||
.default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
|
.default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
|
||||||
.notNull(),
|
.notNull(),
|
||||||
|
|||||||
Reference in New Issue
Block a user