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

packages/api/src/email.ts

@@ -30,6 +30,7 @@ const baseUrl = env.BETTER_AUTH_URL ?? "https://kunstenkamp.be";
 function registrationConfirmationHtml(params: {
 	firstName: string;
 	manageUrl: string;
+	signupUrl: string;
 	wantsToPerform: boolean;
 	artForm?: string | null;
 	giftAmount?: number;
@@ -99,13 +100,26 @@ function registrationConfirmationHtml(params: {
               </table>
               ${paymentSummary}
               <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>
-              <!-- CTA button -->
-              <table cellpadding="0" cellspacing="0">
+              <!-- Account creation CTA -->
+              <table cellpadding="0" cellspacing="0" style="margin-bottom:16px;">
                 <tr>
                   <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
                     </a>
                   </td>
@@ -280,6 +294,8 @@ export async function sendConfirmationEmail(params: {
 	artForm?: string | null;
 	giftAmount?: number;
 	drinkCardValue?: number;
+	/** Pre-filled signup URL, e.g. /login?signup=1&email=…&next=/account */
+	signupUrl?: string;
 }) {
 	const transport = getTransport();
 	if (!transport) {
@@ -287,6 +303,9 @@ export async function sendConfirmationEmail(params: {
 		return;
 	}
 	const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
+	const signupUrl =
+		params.signupUrl ??
+		`${baseUrl}/login?signup=1&email=${encodeURIComponent(params.to)}&next=/account`;
 	await transport.sendMail({
 		from,
 		to: params.to,
@@ -294,6 +313,7 @@ export async function sendConfirmationEmail(params: {
 		html: registrationConfirmationHtml({
 			firstName: params.firstName,
 			manageUrl,
+			signupUrl,
 			wantsToPerform: params.wantsToPerform,
 			artForm: params.artForm,
 			giftAmount: params.giftAmount,
@@ -444,3 +464,220 @@ export async function sendReminderEmail(params: {
 		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,
+		}),
+	});
+}

packages/api/src/routers/index.ts

@@ -10,6 +10,7 @@ import { z } from "zod";
 import {
 	sendCancellationEmail,
 	sendConfirmationEmail,
+	sendPaymentReminderEmail,
 	sendReminderEmail,
 	sendUpdateEmail,
 } 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 };
 }

packages/db/src/migrations/0008_payment_reminder_sent_at.sql

@@ -0,0 +1,2 @@
+-- Migration: add payment_reminder_sent_at column to registration table
+ALTER TABLE registration ADD COLUMN payment_reminder_sent_at INTEGER;

packages/db/src/schema/registrations.ts

@@ -37,6 +37,9 @@ export const registration = sqliteTable(
 		drinkkaartCreditedAt: integer("drinkkaart_credited_at", {
 			mode: "timestamp_ms",
 		}),
+		paymentReminderSentAt: integer("payment_reminder_sent_at", {
+			mode: "timestamp_ms",
+		}),
 		createdAt: integer("created_at", { mode: "timestamp_ms" })
 			.default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
 			.notNull(),