zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify mails and add reminders

Browse Source
This commit is contained in:
ッ
2026-03-11 13:39:27 +01:00
parent 0c8e827cda
commit 5e5efcaf6f
5 changed files with 535 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

856
packages/api/src/email.ts
View File

@@ -1,6 +1,10 @@
import { env } from "@kk/env/server";
import nodemailer from "nodemailer";
// ---------------------------------------------------------------------------
// Transport
// ---------------------------------------------------------------------------
// Singleton transport — created once per module, reused across all email sends.
// Re-creating it on every call causes EventEmitter listener accumulation in
// long-lived Cloudflare Worker processes, triggering memory leak warnings.
@@ -27,46 +31,134 @@ function getTransport(): nodemailer.Transporter | null {
const from = env.SMTP_FROM ?? "Kunstenkamp <info@kunstenkamp.be>";
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;
drinkCardValue?: number;
}) {
const role = params.wantsToPerform
? `Optreden${params.artForm ? ` — ${params.artForm}` : ""}`
: "Toeschouwer";
// ---------------------------------------------------------------------------
// Primitives
// ---------------------------------------------------------------------------
const giftCents = params.giftAmount ?? 0;
// drinkCardValue is stored in euros (e.g., 5), giftAmount in cents (e.g., 5000)
const drinkCardCents = (params.drinkCardValue ?? 0) * 100;
const hasPayment = drinkCardCents > 0 || giftCents > 0;
/** Format a cent amount as a Euro string, e.g. 500 → "€5", 550 → "€5,50". */
function formatEuro(cents: number): string {
return `€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
}
const formatEuro = (cents: number) =>
`€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
/**
* A shaded info box with a small uppercase label and a bold value.
*
* @example
* infoBox("Jouw rol", "Optreden — Muziek")
* infoBox("Inschrijvingen openen", "maandag 16 maart 2026 om 19:00")
*/
function infoBox(label: string, value: string): string {
return `<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
<tr>
<td style="padding:20px 24px;">
<p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">${label}</p>
<p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${value}</p>
</td>
</tr>
</table>`;
}
const paymentSummary = hasPayment
? `<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</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(drinkCardCents + giftCents)}</p>
</td>
</tr>
</table>`
: "";
/**
* A CTA button.
*
* - `"primary"` — white background, teal text (main action)
* - `"secondary"` — translucent white background, white text (secondary action)
*/
function ctaButton(
href: string,
label: string,
style: "primary" | "secondary" = "primary",
): string {
const bg = style === "primary" ? "#ffffff" : "rgba(255,255,255,0.15)";
const color = style === "primary" ? "#214e51" : "#ffffff";
return `<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-radius:2px;background:${bg};">
<a href="${href}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:${color};text-decoration:none;">
${label}
</a>
</td>
</tr>
</table>`;
}
/**
* A small muted link line rendered below a CTA button, e.g. "Of kopieer deze link: …"
*/
function ctaSubtext(text: string): string {
return `<p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">${text}</p>`;
}
/**
* A standard body paragraph (16 px, 85% white, 1.6 line-height).
* Pass raw HTML as the content, e.g. include `<strong>` tags freely.
*/
function p(content: string): string {
return `<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">${content}</p>`;
}
/**
* Payment summary box (drinkcard + gift + total).
* Returns an empty string when both amounts are zero.
*/
function paymentSummaryBox(
drinkCardCents: number,
giftCents: number,
heading = "Betaling",
): string {
if (drinkCardCents === 0 && giftCents === 0) return "";
const total = drinkCardCents + giftCents;
return `<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;">${heading}</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(total)}</p>
</td>
</tr>
</table>`;
}
// ---------------------------------------------------------------------------
// Layout shell
// ---------------------------------------------------------------------------
/**
* Wraps content in the full Kunstenkamp email chrome:
* outer grey background → teal card → header → body → footer.
*
* @param title HTML `<title>` value
* @param heading Large white `<h1>` in the card header
* @param bodyHtml Everything between the header and the footer
* @param footerLines Optional extra lines rendered above the default contact
* line in the footer (e.g. unsubscribe notice). Pass an
* array of plain strings or HTML snippets.
* @param headerLabel Small uppercase label above the heading (default: "Kunstenkamp")
*/
function emailLayout({
title,
heading,
bodyHtml,
footerLines = [],
headerLabel = "Kunstenkamp",
}: {
title: string;
heading: string;
bodyHtml: string;
footerLines?: string[];
headerLabel?: string;
}): string {
const extraFooter = footerLines
.map((line) => `${line}<br/>`)
.join("\n ");
return `<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bevestiging inschrijving</title>
<title>${title}</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;">
@@ -76,64 +168,21 @@ function registrationConfirmationHtml(params: {
<!-- Header -->
<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;">Je inschrijving is bevestigd!</h1>
<p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">${headerLabel}</p>
<h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">${heading}</h1>
</td>
</tr>
<!-- Body -->
<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 inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> in goede orde ontvangen.
</p>
<!-- Registration summary -->
<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
<tr>
<td style="padding:20px 24px;">
<p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Jouw rol</p>
<p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${role}</p>
</td>
</tr>
</table>
${paymentSummary}
<p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
Maak een account aan om je inschrijving te beheren en (voor bezoekers) je Drinkkaart te activeren.
</p>
<!-- Account creation CTA -->
<table cellpadding="0" cellspacing="0" style="margin-bottom:16px;">
<tr>
<td style="border-radius:2px;background:#ffffff;">
<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>
</tr>
</table>
<p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">
Of kopieer deze link: <span style="color:rgba(255,255,255,0.6);">${params.manageUrl}</span>
</p>
${bodyHtml}
</td>
</tr>
<!-- Footer -->
<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;">
${extraFooter}
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>
@@ -147,6 +196,73 @@ function registrationConfirmationHtml(params: {
</html>`;
}
// ---------------------------------------------------------------------------
// Shared role / payment helpers
// ---------------------------------------------------------------------------
function roleLabel(wantsToPerform: boolean, artForm?: string | null): string {
return wantsToPerform
? `Optreden${artForm ? ` — ${artForm}` : ""}`
: "Toeschouwer";
}
function toCents(
drinkCardValue: number | undefined,
giftAmount: number | undefined,
): { drinkCardCents: number; giftCents: number } {
// drinkCardValue is stored in euros (e.g., 5); giftAmount in cents (e.g., 5000)
return {
drinkCardCents: (drinkCardValue ?? 0) * 100,
giftCents: giftAmount ?? 0,
};
}
// ---------------------------------------------------------------------------
// Email composers
// ---------------------------------------------------------------------------
function registrationConfirmationHtml(params: {
firstName: string;
manageUrl: string;
signupUrl: string;
wantsToPerform: boolean;
artForm?: string | null;
giftAmount?: number;
drinkCardValue?: number;
}): string {
const { drinkCardCents, giftCents } = toCents(
params.drinkCardValue,
params.giftAmount,
);
const body = [
p(`Hoi ${params.firstName},`),
p(
`We hebben je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> in goede orde ontvangen.`,
),
infoBox("Jouw rol", roleLabel(params.wantsToPerform, params.artForm)),
paymentSummaryBox(drinkCardCents, giftCents),
p(
"Maak een account aan om je inschrijving te beheren en (voor bezoekers) je Drinkkaart te activeren.",
),
ctaButton(params.signupUrl, "Account aanmaken"),
`<div style="margin-top:16px;"></div>`,
p(
"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.",
),
ctaButton(params.manageUrl, "Beheer mijn inschrijving", "secondary"),
ctaSubtext(
`Of kopieer deze link: <span style="color:rgba(255,255,255,0.6);">${params.manageUrl}</span>`,
),
].join("\n");
return emailLayout({
title: "Bevestiging inschrijving",
heading: "Je inschrijving is bevestigd!",
bodyHtml: body,
});
}
function updateConfirmationHtml(params: {
firstName: string;
manageUrl: string;
@@ -154,138 +270,199 @@ function updateConfirmationHtml(params: {
artForm?: string | null;
giftAmount?: number;
drinkCardValue?: number;
}) {
const role = params.wantsToPerform
? `Optreden${params.artForm ? ` — ${params.artForm}` : ""}`
: "Toeschouwer";
}): string {
const { drinkCardCents, giftCents } = toCents(
params.drinkCardValue,
params.giftAmount,
);
const giftCents = params.giftAmount ?? 0;
// drinkCardValue is stored in euros (e.g., 5), giftAmount in cents (e.g., 5000)
const drinkCardCents = (params.drinkCardValue ?? 0) * 100;
const hasPayment = drinkCardCents > 0 || giftCents > 0;
const body = [
p(`Hoi ${params.firstName},`),
p(
`Je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is succesvol bijgewerkt.`,
),
infoBox("Jouw rol", roleLabel(params.wantsToPerform, params.artForm)),
paymentSummaryBox(drinkCardCents, giftCents),
ctaButton(params.manageUrl, "Bekijk mijn inschrijving"),
].join("\n");
const formatEuro = (cents: number) =>
`€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
const paymentSummary = hasPayment
? `<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</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(drinkCardCents + giftCents)}</p>
</td>
</tr>
</table>`
: "";
return `<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Inschrijving bijgewerkt</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;">Inschrijving bijgewerkt</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 inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is succesvol bijgewerkt.
</p>
<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
<tr>
<td style="padding:20px 24px;">
<p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Jouw rol</p>
<p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${role}</p>
</td>
</tr>
</table>
${paymentSummary}
<table cellpadding="0" cellspacing="0">
<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;">
Bekijk 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);">
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>`;
return emailLayout({
title: "Inschrijving bijgewerkt",
heading: "Inschrijving bijgewerkt",
bodyHtml: body,
});
}
function cancellationHtml(params: { firstName: string }) {
return `<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Inschrijving geannuleerd</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;">Inschrijving geannuleerd</h1>
</td>
</tr>
<tr>
<td style="padding:0 48px 40px;">
<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 inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is geannuleerd.
</p>
<p style="margin:0;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
Van gedachten veranderd? Je kunt je altijd opnieuw inschrijven via <a href="${baseUrl}/#registration" style="color:#ffffff;">kunstenkamp.be</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);">
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>`;
function cancellationHtml(params: { firstName: string }): string {
const body = [
p(`Hoi ${params.firstName},`),
p(
`Je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is geannuleerd.`,
),
p(
`Van gedachten veranderd? Je kunt je altijd opnieuw inschrijven via <a href="${baseUrl}/#registration" style="color:#ffffff;">kunstenkamp.be</a>.`,
),
].join("\n");
return emailLayout({
title: "Inschrijving geannuleerd",
heading: "Inschrijving geannuleerd",
bodyHtml: body,
});
}
function reminder24hHtml(params: { firstName?: string | null }): string {
const greeting = params.firstName ? `Hoi ${params.firstName},` : "Hoi!";
const openDateStr = "maandag 16 maart 2026 om 19:00";
const registrationUrl = `${baseUrl}/#registration`;
const body = [
p(greeting),
p(
`Morgen openen de inschrijvingen voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong>. Zet je wekker!`,
),
infoBox("Inschrijvingen openen", openDateStr),
p("Wees er snel bij — de plaatsen zijn beperkt!"),
ctaButton(registrationUrl, "Bekijk de pagina"),
ctaSubtext(
`Of ga naar: <span style="color:rgba(255,255,255,0.6);">${registrationUrl}</span>`,
),
].join("\n");
return emailLayout({
title: "Nog 24 uur — inschrijvingen openen morgen!",
heading: "Nog 24 uur!",
bodyHtml: body,
footerLines: [
"Je ontvangt dit bericht omdat je een herinnering hebt aangevraagd.",
],
});
}
function reminderHtml(params: { firstName?: string | null }): string {
const greeting = params.firstName ? `Hoi ${params.firstName},` : "Hoi!";
const openDateStr = "maandag 16 maart 2026 om 19:00";
const registrationUrl = `${baseUrl}/#registration`;
const body = [
p(greeting),
p(
`Over ongeveer <strong style="color:#ffffff;">1 uur</strong> openen de inschrijvingen voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong>.`,
),
infoBox("Inschrijvingen openen", openDateStr),
p("Wees er snel bij — de plaatsen zijn beperkt!"),
ctaButton(registrationUrl, "Schrijf je in"),
ctaSubtext(
`Of ga naar: <span style="color:rgba(255,255,255,0.6);">${registrationUrl}</span>`,
),
].join("\n");
return emailLayout({
title: "Nog 1 uur — inschrijvingen openen straks!",
heading: "Nog 1 uur!",
bodyHtml: body,
footerLines: [
"Je ontvangt dit bericht omdat je een herinnering hebt aangevraagd.",
],
});
}
function subscriptionConfirmationHtml(params: { email: string }): string {
const openDateStr = "maandag 16 maart 2026 om 19:00";
const registrationUrl = `${baseUrl}/#registration`;
const body = [
p(
`We sturen een herinnering naar <strong style="color:#ffffff;">${params.email}</strong> wanneer de inschrijvingen openen.`,
),
infoBox("Inschrijvingen openen", openDateStr),
p(
"Je ontvangt twee herinneringen: één 24 uur van tevoren en één 1 uur voor de opening.",
),
p("Wees er snel bij — de plaatsen zijn beperkt!"),
ctaButton(registrationUrl, "Bekijk de pagina"),
].join("\n");
return emailLayout({
title: "Herinnering ingepland — Open Mic Night",
heading: "Je herinnering is ingepland!",
bodyHtml: body,
footerLines: [
"Je ontvangt dit bericht omdat je een herinnering hebt aangevraagd op kunstenkamp.be.",
],
});
}
function paymentReminderHtml(params: {
firstName: string;
accountUrl: string;
manageUrl: string;
drinkCardValue?: number;
giftAmount?: number;
}): string {
const { drinkCardCents, giftCents } = toCents(
params.drinkCardValue,
params.giftAmount,
);
const totalCents = drinkCardCents + giftCents;
const amountLine =
totalCents > 0
? p(
`Je betaling van <strong style="color:#ffffff;">${formatEuro(totalCents)}</strong> staat nog open. Log in op je account om te betalen.`,
)
: p("Je betaling staat nog open. Log in op je account om te betalen.");
const body = [
p(`Hoi ${params.firstName},`),
p(
`Je hebt je ingeschreven voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong>, maar we hebben nog geen betaling ontvangen.`,
),
amountLine,
ctaButton(params.accountUrl, "Betaal nu"),
ctaSubtext(
`Je inschrijving beheren? <a href="${params.manageUrl}" style="color:rgba(255,255,255,0.6);">Klik hier</a>`,
),
].join("\n");
return emailLayout({
title: "Herinnering: betaling open",
heading: "Betaling nog open",
bodyHtml: body,
});
}
function paymentConfirmationHtml(params: {
firstName: string;
manageUrl: string;
drinkCardValue?: number;
giftAmount?: number;
}): string {
const { drinkCardCents, giftCents } = toCents(
params.drinkCardValue,
params.giftAmount,
);
const body = [
p(`Hoi ${params.firstName},`),
p(
`We hebben je betaling voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> in goede orde ontvangen. Tot dan!`,
),
paymentSummaryBox(drinkCardCents, giftCents, "Betaling ontvangen"),
ctaButton(params.manageUrl, "Beheer mijn inschrijving", "secondary"),
].join("\n");
return emailLayout({
title: "Betaling ontvangen",
heading: "Betaling ontvangen!",
bodyHtml: body,
});
}
// ---------------------------------------------------------------------------
// Public send functions
// ---------------------------------------------------------------------------
export async function sendConfirmationEmail(params: {
to: string;
firstName: string;
@@ -369,83 +546,39 @@ export async function sendCancellationEmail(params: {
});
}
function reminderHtml(params: { firstName?: string | null }) {
const greeting = params.firstName ? `Hoi ${params.firstName},` : "Hoi!";
// Registration opens at 2026-03-16T19:00:00+01:00
const openDateStr = "maandag 16 maart 2026 om 19:00";
const registrationUrl = `${baseUrl}/#registration`;
export async function sendSubscriptionConfirmationEmail(params: {
to: string;
}) {
const transport = getTransport();
if (!transport) {
console.warn(
"SMTP not configured — skipping subscription confirmation email",
);
return;
}
await transport.sendMail({
from,
to: params.to,
subject: "Herinnering ingepland — Open Mic Night",
html: subscriptionConfirmationHtml({ email: params.to }),
});
}
return `<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nog 1 uur — inschrijvingen openen straks!</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;">
<!-- Header -->
<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;">Nog 1 uur!</h1>
</td>
</tr>
<!-- Body -->
<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;">
${greeting}
</p>
<p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
Over ongeveer <strong style="color:#ffffff;">1 uur</strong> openen de inschrijvingen voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong>.
</p>
<!-- Time box -->
<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
<tr>
<td style="padding:20px 24px;">
<p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Inschrijvingen openen</p>
<p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${openDateStr}</p>
</td>
</tr>
</table>
<p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
Wees er snel bij — de plaatsen zijn beperkt!
</p>
<!-- CTA button -->
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-radius:2px;background:#ffffff;">
<a href="${registrationUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
Schrijf je in
</a>
</td>
</tr>
</table>
<p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">
Of ga naar: <span style="color:rgba(255,255,255,0.6);">${registrationUrl}</span>
</p>
</td>
</tr>
<!-- Footer -->
<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;">
Je ontvangt dit bericht omdat je een herinnering hebt aangevraagd.<br/>
Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a><br/>
Kunstenkamp — Een initiatief voor en door kunstenaars.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>`;
export async function sendReminder24hEmail(params: {
to: string;
firstName?: string | null;
}) {
const transport = getTransport();
if (!transport) {
console.warn("SMTP not configured — skipping 24h reminder email");
return;
}
await transport.sendMail({
from,
to: params.to,
subject: "Nog 24 uur — inschrijvingen openen morgen!",
html: reminder24hHtml({ firstName: params.firstName }),
});
}
export async function sendReminderEmail(params: {
@@ -465,87 +598,6 @@ export async function sendReminderEmail(params: {
});
}
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;
@@ -574,88 +626,6 @@ export async function sendPaymentReminderEmail(params: {
});
}
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;

163
packages/api/src/routers/index.ts
View File

@@ -22,18 +22,26 @@ import {
sendCancellationEmail,
sendConfirmationEmail,
sendPaymentReminderEmail,
sendReminder24hEmail,
sendReminderEmail,
sendSubscriptionConfirmationEmail,
sendUpdateEmail,
} from "../email";
import { adminProcedure, protectedProcedure, publicProcedure } from "../index";
import { generateQrSecret } from "../lib/drinkkaart-utils";
import { drinkkaartRouter } from "./drinkkaart";
// Registration opens at this date — reminders fire 1 hour before
// Registration opens at this date — reminders fire 24 hours and 1 hour before
const REGISTRATION_OPENS_AT = new Date("2026-03-16T19:00:00+01:00");
const REMINDER_WINDOW_START = new Date(
const REMINDER_1H_WINDOW_START = new Date(
REGISTRATION_OPENS_AT.getTime() - 60 * 60 * 1000,
);
const REMINDER_24H_WINDOW_START = new Date(
REGISTRATION_OPENS_AT.getTime() - 25 * 60 * 60 * 1000,
);
const REMINDER_24H_WINDOW_END = new Date(
REGISTRATION_OPENS_AT.getTime() - 23 * 60 * 60 * 1000,
);
// ---------------------------------------------------------------------------
// Shared helpers
@@ -827,9 +835,10 @@ export const appRouter = {
// ---------------------------------------------------------------------------
/**
* Subscribe an email address to receive a reminder 1 hour before registration
* opens. Silently deduplicates — if the email is already subscribed, returns
* ok:true without error. Returns ok:false if registration is already open.
* Subscribe an email address to receive reminders before registration opens:
* one 24 hours before and one 1 hour before. Silently deduplicates — if the
* email is already subscribed, returns ok:true without error. Returns
* ok:false if registration is already open.
*/
subscribeReminder: publicProcedure
.input(z.object({ email: z.string().email() }))
@@ -858,6 +867,11 @@ export const appRouter = {
email: input.email,
});
// Fire-and-forget — don't let a mail failure block the response
sendSubscriptionConfirmationEmail({ to: input.email }).catch((err) =>
console.error("Failed to send subscription confirmation email:", err),
);
return { ok: true };
}),
@@ -867,8 +881,9 @@ export const appRouter = {
* header. Should be called by a Cloudflare Cron Trigger at the top of
* every hour, or directly via `POST /api/cron/reminders`.
*
* Only sends when the current time is within the 1-hour reminder window
* (between REGISTRATION_OPENS_AT - 1h and REGISTRATION_OPENS_AT).
* Fires two waves:
* - 24 hours before: window [REGISTRATION_OPENS_AT - 25h, REGISTRATION_OPENS_AT - 23h)
* - 1 hour before: window [REGISTRATION_OPENS_AT - 1h, REGISTRATION_OPENS_AT)
*/
sendReminders: publicProcedure
.input(z.object({ secret: z.string() }))
@@ -879,34 +894,61 @@ export const appRouter = {
}
const now = Date.now();
const windowStart = REMINDER_WINDOW_START.getTime();
const windowEnd = REGISTRATION_OPENS_AT.getTime();
const in24hWindow =
now >= REMINDER_24H_WINDOW_START.getTime() &&
now < REMINDER_24H_WINDOW_END.getTime();
const in1hWindow =
now >= REMINDER_1H_WINDOW_START.getTime() &&
now < REGISTRATION_OPENS_AT.getTime();
// Only send during the reminder window
if (now < windowStart || now >= windowEnd) {
if (!in24hWindow && !in1hWindow) {
return { sent: 0, skipped: true, reason: "outside_window" as const };
}
// Fetch all unsent reminders
const pending = await db
.select()
.from(reminder)
.where(isNull(reminder.sentAt));
let sent = 0;
const errors: string[] = [];
for (const row of pending) {
try {
await sendReminderEmail({ to: row.email });
await db
.update(reminder)
.set({ sentAt: new Date() })
.where(eq(reminder.id, row.id));
sent++;
} catch (err) {
errors.push(`${row.email}: ${String(err)}`);
console.error(`Failed to send reminder to ${row.email}:`, err);
if (in24hWindow) {
// Fetch reminders where the 24h email has not been sent yet
const pending = await db
.select()
.from(reminder)
.where(isNull(reminder.sent24hAt));
for (const row of pending) {
try {
await sendReminder24hEmail({ to: row.email });
await db
.update(reminder)
.set({ sent24hAt: new Date() })
.where(eq(reminder.id, row.id));
sent++;
} catch (err) {
errors.push(`24h ${row.email}: ${String(err)}`);
console.error(`Failed to send 24h reminder to ${row.email}:`, err);
}
}
}
if (in1hWindow) {
// Fetch reminders where the 1h email has not been sent yet
const pending = await db
.select()
.from(reminder)
.where(isNull(reminder.sentAt));
for (const row of pending) {
try {
await sendReminderEmail({ to: row.email });
await db
.update(reminder)
.set({ sentAt: new Date() })
.where(eq(reminder.id, row.id));
sent++;
} catch (err) {
errors.push(`1h ${row.email}: ${String(err)}`);
console.error(`Failed to send 1h reminder to ${row.email}:`, err);
}
}
}
@@ -1032,32 +1074,59 @@ export async function runSendReminders(): Promise<{
errors: string[];
}> {
const now = Date.now();
const windowStart = REMINDER_WINDOW_START.getTime();
const windowEnd = REGISTRATION_OPENS_AT.getTime();
const in24hWindow =
now >= REMINDER_24H_WINDOW_START.getTime() &&
now < REMINDER_24H_WINDOW_END.getTime();
const in1hWindow =
now >= REMINDER_1H_WINDOW_START.getTime() &&
now < REGISTRATION_OPENS_AT.getTime();
if (now < windowStart || now >= windowEnd) {
if (!in24hWindow && !in1hWindow) {
return { sent: 0, skipped: true, reason: "outside_window", errors: [] };
}
const pending = await db
.select()
.from(reminder)
.where(isNull(reminder.sentAt));
let sent = 0;
const errors: string[] = [];
for (const row of pending) {
try {
await sendReminderEmail({ to: row.email });
await db
.update(reminder)
.set({ sentAt: new Date() })
.where(eq(reminder.id, row.id));
sent++;
} catch (err) {
errors.push(`${row.email}: ${String(err)}`);
console.error(`Failed to send reminder to ${row.email}:`, err);
if (in24hWindow) {
const pending = await db
.select()
.from(reminder)
.where(isNull(reminder.sent24hAt));
for (const row of pending) {
try {
await sendReminder24hEmail({ to: row.email });
await db
.update(reminder)
.set({ sent24hAt: new Date() })
.where(eq(reminder.id, row.id));
sent++;
} catch (err) {
errors.push(`24h ${row.email}: ${String(err)}`);
console.error(`Failed to send 24h reminder to ${row.email}:`, err);
}
}
}
if (in1hWindow) {
const pending = await db
.select()
.from(reminder)
.where(isNull(reminder.sentAt));
for (const row of pending) {
try {
await sendReminderEmail({ to: row.email });
await db
.update(reminder)
.set({ sentAt: new Date() })
.where(eq(reminder.id, row.id));
sent++;
} catch (err) {
errors.push(`1h ${row.email}: ${String(err)}`);
console.error(`Failed to send 1h reminder to ${row.email}:`, err);
}
}
}

2
packages/db/src/migrations/0009_reminder_24h.sql Normal file
View File

@@ -0,0 +1,2 @@
-- Add sent_24h_at column to track whether the 24-hour-before reminder was sent
ALTER TABLE `reminder` ADD `sent_24h_at` integer;

3
packages/db/src/schema/reminders.ts
View File

@@ -6,6 +6,9 @@ export const reminder = sqliteTable(
{
id: text("id").primaryKey(), // UUID
email: text("email").notNull(),
/** Set when the 24-hours-before reminder has been sent. */
sent24hAt: integer("sent_24h_at", { mode: "timestamp_ms" }),
/** Set when the 1-hour-before reminder has been sent. */
sentAt: integer("sent_at", { mode: "timestamp_ms" }),
createdAt: integer("created_at", { mode: "timestamp_ms" })
.default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)

2
packages/infra/alchemy.run.ts
View File

@@ -35,7 +35,7 @@ export const web = await TanStackStart("web", {
// Cron secret for protected scheduled endpoints
CRON_SECRET: getEnvVar("CRON_SECRET"),
},
// Fire every hour so the reminder check can run at 18:00 on 2026-03-16
// Fire every hour so reminder checks can run at 19:00 on 2026-03-15 (24h) and 18:00 on 2026-03-16 (1h)
crons: ["0 * * * *"],
domains: ["kunstenkamp.be", "www.kunstenkamp.be"],
});