Feature/92 editable email templates #112
Generated
+119
@@ -8,10 +8,12 @@
|
||||
"name": "redefined-designs-backend",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@types/markdown-it": "^14.2.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"express": "^4.19.2",
|
||||
"express-rate-limit": "^8.6.2",
|
||||
"markdown-it": "^15.0.0",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"node-cron": "^3.0.3",
|
||||
"node-pg-migrate": "^7.6.1",
|
||||
@@ -1944,6 +1946,28 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/linkify-it": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||
"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/markdown-it": {
|
||||
"version": "14.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.2.0.tgz",
|
||||
"integrity": "sha512-NoQ2yGlLWj4wpxMs+TYmRKk3thDrQ97agr7sFqfLsAlvoS8SNQuTrlObhFqG9iugdTtgOE9jpJ6FNM4ZGsa5xQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/linkify-it": "^5",
|
||||
"@types/mdurl": "^2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/mdurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
|
||||
"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/methods": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/methods/-/methods-1.1.4.tgz",
|
||||
@@ -3401,6 +3425,18 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
|
||||
"integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/error-ex": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
|
||||
@@ -5562,6 +5598,25 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/linkify-it": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-6.1.0.tgz",
|
||||
"integrity": "sha512-wJ/TwpSDTLepCrQoYWYIExIKg5Zchex2Nn5yk2mFnB+6PtdkHtyLx742md9csRjjOnGkKIS/RrbY7l8D6gT9Vw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/puzrin"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/markdown-it"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"uc.micro": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||
@@ -5645,6 +5700,49 @@
|
||||
"tmpl": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it": {
|
||||
"version": "15.0.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-15.0.0.tgz",
|
||||
"integrity": "sha512-Lf8ajvVNdRpzSNB4VegxNy7gjs8gU35l4b4+ET49LrQC5PKYwLZ72u60LeJ9gv3qiaesuYjJWCyVeQmv/QWKQw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/puzrin"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/markdown-it"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"argparse": "^3.0.0",
|
||||
"entities": "^8.0.0",
|
||||
"linkify-it": "^6.0.0",
|
||||
"mdurl": "^2.1.0",
|
||||
"punycode.js": "^2.3.1",
|
||||
"uc.micro": "^3.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"markdown-it": "bin/markdown-it.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it/node_modules/argparse": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-3.0.0.tgz",
|
||||
"integrity": "sha512-BOp5NMrHqKxmq/OLr+clzzrRxgOKSLkcjmkWuChp7Irqwn4s74WjOBPIgWfA/HMcBnVkZ5XEuf9uUqzlpfCQ6A==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/puzrin"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/nodeca"
|
||||
}
|
||||
],
|
||||
"license": "Python-2.0"
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
@@ -5654,6 +5752,12 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/mdurl": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.1.0.tgz",
|
||||
"integrity": "sha512-1+HBaOx0zi/dQWht8rNv9MYf9qqpqL/kxI0hXImU6Y547zM6Sni8BQibt7ifgMcYtQg41ao3Ivd6cnSM86inpg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
@@ -6472,6 +6576,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/punycode.js": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
|
||||
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/pure-rand": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
|
||||
@@ -7428,6 +7541,12 @@
|
||||
"typescript": ">=4.8.4 <6.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/uc.micro": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-3.0.0.tgz",
|
||||
"integrity": "sha512-U3PppEkleoTnIfi8BozMx3yju3qc/L6SwqWo2Sw+54PX+PX0q9I+r1Um5HCmqD7n9VDX5/v3vQH/AjA6deDdtw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/uglify-js": {
|
||||
"version": "3.19.3",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
|
||||
|
||||
@@ -22,10 +22,12 @@
|
||||
"migrate:create": "node-pg-migrate create --migration-file-language js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/markdown-it": "^14.2.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"express": "^4.19.2",
|
||||
"express-rate-limit": "^8.6.2",
|
||||
"markdown-it": "^15.0.0",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"node-cron": "^3.0.3",
|
||||
"node-pg-migrate": "^7.6.1",
|
||||
|
||||
@@ -6,6 +6,7 @@ import { router as cartCheckoutRouter, webhookRouter as cartCheckoutWebhookRoute
|
||||
import adminRouter from './routes/admin';
|
||||
import adminCustomersRouter from './routes/adminCustomers';
|
||||
import adminSettingsRouter from './routes/adminSettings';
|
||||
import adminEmailTemplatesRouter from './routes/adminEmailTemplates';
|
||||
import adminCategoriesRouter from './routes/adminCategories';
|
||||
import adminTagsRouter from './routes/adminTags';
|
||||
import filtersRouter from './routes/filters';
|
||||
@@ -54,6 +55,7 @@ app.use('/api/checkout/cart', cartCheckoutRouter);
|
||||
// instead of being quietly public. See middleware/adminGate.ts and #63.
|
||||
app.use('/api/admin/customers', requireAdminGate, adminCustomersRouter);
|
||||
app.use('/api/admin/settings', requireAdminGate, adminSettingsRouter);
|
||||
app.use('/api/admin/email-templates', requireAdminGate, adminEmailTemplatesRouter);
|
||||
app.use('/api/admin/categories', requireAdminGate, adminCategoriesRouter);
|
||||
app.use('/api/admin/tags', requireAdminGate, adminTagsRouter);
|
||||
app.use('/api/admin', requireAdminGate, adminRouter);
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
import MarkdownIt from 'markdown-it';
|
||||
|
||||
/**
|
||||
* The five customer emails, their default copy, and the rules for editing it.
|
||||
*
|
||||
* Bodies are markdown rather than HTML. `html: false` is markdown-it's default
|
||||
* and is the point of choosing it: raw HTML in a stored body is escaped, not
|
||||
* passed through, so editing copy from the settings screen cannot put script
|
||||
* into a customer's inbox. That is a stronger guarantee than sanitising output
|
||||
* afterwards, because there is no output to sanitise.
|
||||
*/
|
||||
const md = new MarkdownIt({ html: false, linkify: true });
|
||||
|
||||
export type TemplateKey =
|
||||
| 'verification'
|
||||
| 'passwordReset'
|
||||
| 'favoriteSold'
|
||||
| 'favoriteWithdrawn'
|
||||
| 'cartReminder';
|
||||
|
||||
export interface TemplateDefinition {
|
||||
/** Shown in the admin so a card is identifiable without reading its body. */
|
||||
label: string;
|
||||
/**
|
||||
* Placeholders a body must contain. Saving without one is refused: a reset
|
||||
* email with no link still sends, still looks fine in the log, and is useless
|
||||
* to everyone who receives it.
|
||||
*/
|
||||
required: readonly string[];
|
||||
/** Every placeholder this template understands, for the admin to see. */
|
||||
available: readonly string[];
|
||||
defaultSubject: string;
|
||||
defaultBody: string;
|
||||
/**
|
||||
* Appended after rendering and deliberately not editable. The favorite alerts
|
||||
* carry a consent notice explaining why the customer is receiving them, which
|
||||
* is a compliance artifact rather than copy — editing wording should not be
|
||||
* able to delete the sentence that makes the email lawful to send.
|
||||
*/
|
||||
footer?: string;
|
||||
}
|
||||
|
||||
const FAVORITE_CONSENT_FOOTER =
|
||||
'<p>You are receiving this because you asked to be told when a favorited item becomes ' +
|
||||
'unavailable. You can turn these off on your account page.</p>';
|
||||
|
||||
export const TEMPLATES: Record<TemplateKey, TemplateDefinition> = {
|
||||
verification: {
|
||||
label: 'Email verification',
|
||||
required: ['verifyUrl'],
|
||||
available: ['greeting', 'verifyUrl'],
|
||||
defaultSubject: 'Confirm your email address',
|
||||
defaultBody:
|
||||
'{{greeting}}\n\n' +
|
||||
'Please confirm this address so we know we can reach you.\n\n' +
|
||||
'[Confirm my email]({{verifyUrl}})\n\n' +
|
||||
'This link expires in 24 hours.'
|
||||
},
|
||||
|
||||
passwordReset: {
|
||||
label: 'Password reset',
|
||||
required: ['resetUrl'],
|
||||
available: ['greeting', 'resetUrl'],
|
||||
defaultSubject: 'Reset your Redefined Designs password',
|
||||
defaultBody:
|
||||
'Someone asked to reset the password for this account.\n\n' +
|
||||
'[Choose a new password]({{resetUrl}}). This link expires in one hour.\n\n' +
|
||||
"If this wasn't you, you can ignore this email — your password has not changed."
|
||||
},
|
||||
|
||||
favoriteSold: {
|
||||
label: 'Favorited item sold',
|
||||
required: ['itemName'],
|
||||
available: ['itemName', 'siteUrl'],
|
||||
defaultSubject: '"{{itemName}}" has been sold',
|
||||
defaultBody:
|
||||
'An item you favorited has been sold to another customer, so it is no longer available.\n\n' +
|
||||
'**{{itemName}}**\n\n' +
|
||||
'Every piece is one of a kind, so this one will not be restocked. You can browse what is ' +
|
||||
'still available at [Redefined Designs]({{siteUrl}}).',
|
||||
footer: FAVORITE_CONSENT_FOOTER
|
||||
},
|
||||
|
||||
favoriteWithdrawn: {
|
||||
label: 'Favorited item withdrawn',
|
||||
required: ['itemName'],
|
||||
available: ['itemName', 'siteUrl'],
|
||||
defaultSubject: '"{{itemName}}" is no longer available',
|
||||
defaultBody:
|
||||
'An item you favorited has been withdrawn and is no longer available.\n\n' +
|
||||
'**{{itemName}}**\n\n' +
|
||||
'You can browse what is still available at [Redefined Designs]({{siteUrl}}).',
|
||||
footer: FAVORITE_CONSENT_FOOTER
|
||||
},
|
||||
|
||||
cartReminder: {
|
||||
label: 'Cart reminder',
|
||||
required: ['itemList', 'cartUrl'],
|
||||
available: ['greeting', 'itemList', 'cartUrl'],
|
||||
defaultSubject: 'Items waiting in your cart',
|
||||
defaultBody:
|
||||
'{{greeting}}\n\n' +
|
||||
'You still have items in your cart at Redefined Designs:\n\n' +
|
||||
'{{itemList}}\n\n' +
|
||||
'[View your cart]({{cartUrl}}) before your reservation expires.'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* The `{{greeting}}` value: "Hi Thom," when a first name is known, "Hi,"
|
||||
* otherwise.
|
||||
*
|
||||
* One placeholder rather than a bare name, so a template author writes
|
||||
* `{{greeting}}` on its own line instead of `Hi {{firstName}},` — which reads
|
||||
* as "Hi ," for anyone who registered before first names were required (#106).
|
||||
*/
|
||||
export function greeting(firstName: string | null | undefined): string {
|
||||
const name = (firstName ?? '').trim();
|
||||
return name ? `Hi ${name},` : 'Hi,';
|
||||
}
|
||||
|
||||
/** Matches `{{name}}`, tolerating whitespace inside the braces. */
|
||||
const PLACEHOLDER = /\{\{\s*(\w+)\s*\}\}/g;
|
||||
|
||||
/**
|
||||
* Which of a template's required placeholders a candidate body is missing.
|
||||
*
|
||||
* Returns all of them rather than the first, so a save that dropped two says so
|
||||
* once instead of over two attempts.
|
||||
*/
|
||||
export function missingPlaceholders(key: TemplateKey, body: string): string[] {
|
||||
const present = new Set<string>();
|
||||
for (const match of body.matchAll(PLACEHOLDER)) {
|
||||
present.add(match[1]);
|
||||
}
|
||||
return TEMPLATES[key].required.filter((name) => !present.has(name));
|
||||
}
|
||||
|
||||
function substitute(text: string, values: Record<string, string>): string {
|
||||
return text.replace(PLACEHOLDER, (whole, name: string) =>
|
||||
Object.prototype.hasOwnProperty.call(values, name) ? values[name] : whole
|
||||
);
|
||||
}
|
||||
|
||||
export interface StoredTemplate {
|
||||
subject?: string | null;
|
||||
body?: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Produces the subject and HTML for one email.
|
||||
*
|
||||
* Values are substituted into the markdown *before* rendering, which is why a
|
||||
* value that should become a list has to arrive as markdown — emitting HTML
|
||||
* here would be escaped and shown to the customer as literal tags.
|
||||
*
|
||||
* An absent or blank stored value falls back to the built-in default, so an
|
||||
* unconfigured install behaves exactly as it did before any of this existed.
|
||||
*/
|
||||
export function renderTemplate(
|
||||
key: TemplateKey,
|
||||
stored: StoredTemplate,
|
||||
values: Record<string, string>
|
||||
): { subject: string; html: string } {
|
||||
const definition = TEMPLATES[key];
|
||||
const subjectSource = stored.subject?.trim() ? stored.subject : definition.defaultSubject;
|
||||
const bodySource = stored.body?.trim() ? stored.body : definition.defaultBody;
|
||||
|
||||
const html = md.render(substitute(bodySource, values)) + (definition.footer ?? '');
|
||||
|
||||
return { subject: substitute(subjectSource, values), html };
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
import { pool } from './db';
|
||||
import { sendMail } from './mailer';
|
||||
import { renderTemplate, TemplateKey } from './emailTemplates';
|
||||
import { loadStoredTemplate } from './routes/adminEmailTemplates';
|
||||
|
||||
// Shown to the customer when they opt in, and stored verbatim against their
|
||||
// consent so the record says what they actually agreed to — the same pattern
|
||||
@@ -42,15 +44,24 @@ export async function collectFavoriteRecipients(
|
||||
// thing the customer asked to hear about. Sent independently so one bad
|
||||
// address cannot stop the rest — and whatever prompted this has already
|
||||
// happened regardless of whether the mail goes out.
|
||||
function send(recipients: FavoriteRecipient[], subject: (name: string) => string, body: (name: string) => string): void {
|
||||
async function send(recipients: FavoriteRecipient[], key: TemplateKey): Promise<void> {
|
||||
if (!recipients.length) return;
|
||||
|
||||
// Loaded once for the batch rather than per recipient: the copy is the same
|
||||
// for everyone, only the item name differs.
|
||||
const stored = await loadStoredTemplate(key);
|
||||
const siteUrl = process.env.PUBLIC_URL ?? '';
|
||||
|
||||
for (const recipient of recipients) {
|
||||
sendMail(recipient.email, subject(recipient.item_name), body(recipient.item_name))
|
||||
const { subject, html } = renderTemplate(key, stored, {
|
||||
itemName: recipient.item_name,
|
||||
siteUrl
|
||||
});
|
||||
sendMail(recipient.email, subject, html)
|
||||
.catch(err => console.error('favorite alert failed', err));
|
||||
}
|
||||
}
|
||||
|
||||
const FOOTER = `<p>You are receiving this because you asked to be told when a favorited item becomes
|
||||
unavailable. You can turn these off on your account page.</p>`;
|
||||
|
||||
// Called *after* the sale has been committed, never inside the transaction.
|
||||
// Emailing about a sale that then rolled back would be worse than a late
|
||||
@@ -60,27 +71,16 @@ const FOOTER = `<p>You are receiving this because you asked to be told when a fa
|
||||
// longer available reads as a bug.
|
||||
export async function notifyFavoritersOfSale(itemIds: number[], buyerId: number | null): Promise<void> {
|
||||
const recipients = await collectFavoriteRecipients(itemIds, buyerId);
|
||||
send(
|
||||
recipients,
|
||||
name => `"${name}" has been sold`,
|
||||
name => `<p>An item you favorited has been sold to another customer, so it is no longer available.</p>
|
||||
<p><b>${name}</b></p>
|
||||
<p>Every piece is one of a kind, so this one will not be restocked. You can browse what is
|
||||
still available at <a href="${process.env.PUBLIC_URL}">Redefined Designs</a>.</p>
|
||||
${FOOTER}`
|
||||
);
|
||||
await send(recipients, 'favoriteSold');
|
||||
}
|
||||
|
||||
// Sent when an item is withdrawn from sale rather than sold. Recipients must be
|
||||
// collected before the delete, since the favorites rows cascade with the item.
|
||||
export function notifyFavoritersOfRemoval(recipients: FavoriteRecipient[]): void {
|
||||
send(
|
||||
recipients,
|
||||
name => `"${name}" is no longer available`,
|
||||
name => `<p>An item you favorited has been withdrawn and is no longer available.</p>
|
||||
<p><b>${name}</b></p>
|
||||
<p>You can browse what is still available at
|
||||
<a href="${process.env.PUBLIC_URL}">Redefined Designs</a>.</p>
|
||||
${FOOTER}`
|
||||
);
|
||||
// Async now that the copy is loaded from the database before rendering. It was
|
||||
// previously synchronous in dispatch — the sends were fire-and-forget, but they
|
||||
// were *started* before the caller returned. Leaving it fire-and-forget would
|
||||
// mean the response can beat the mail out of the door, which is a behaviour
|
||||
// change nobody asked for and which the withdrawal test caught.
|
||||
export async function notifyFavoritersOfRemoval(recipients: FavoriteRecipient[]): Promise<void> {
|
||||
await send(recipients, 'favoriteWithdrawn');
|
||||
}
|
||||
|
||||
@@ -346,7 +346,7 @@ router.delete('/items/:id', asyncRoute(async (req: Request, res: Response) => {
|
||||
|
||||
// Sent only once the delete has succeeded, so nobody hears about a withdrawal
|
||||
// that did not happen.
|
||||
notifyFavoritersOfRemoval(recipients);
|
||||
await notifyFavoritersOfRemoval(recipients);
|
||||
res.status(204).end();
|
||||
}));
|
||||
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import { Router, Request, Response } from 'express';
|
||||
import { pool } from '../db';
|
||||
import { asyncRoute } from '../asyncRoute';
|
||||
import { TEMPLATES, TemplateKey, StoredTemplate, missingPlaceholders } from '../emailTemplates';
|
||||
|
||||
const router = Router();
|
||||
|
||||
const KEYS = Object.keys(TEMPLATES) as TemplateKey[];
|
||||
|
||||
// Stored in admin_settings rather than a table of their own: it is already a
|
||||
// key/value store with a settled read/write shape, and five templates is not a
|
||||
// schema.
|
||||
const settingKey = (key: TemplateKey, part: 'subject' | 'body') => `email_${key}_${part}`;
|
||||
|
||||
function isTemplateKey(value: unknown): value is TemplateKey {
|
||||
return typeof value === 'string' && (KEYS as string[]).includes(value);
|
||||
}
|
||||
|
||||
export async function loadStoredTemplate(key: TemplateKey): Promise<StoredTemplate> {
|
||||
const { rows } = await pool.query(`SELECT key, value FROM admin_settings WHERE key = ANY($1)`, [
|
||||
[settingKey(key, 'subject'), settingKey(key, 'body')]
|
||||
]);
|
||||
const stored: StoredTemplate = {};
|
||||
for (const row of rows) {
|
||||
if (row.key === settingKey(key, 'subject')) stored.subject = row.value;
|
||||
if (row.key === settingKey(key, 'body')) stored.body = row.value;
|
||||
}
|
||||
return stored;
|
||||
}
|
||||
|
||||
// Returns the definitions alongside whatever is stored, so the admin screen can
|
||||
// show the placeholders a template accepts and which of them it must keep,
|
||||
// rather than the editor having to know.
|
||||
router.get('/', asyncRoute(async (_req: Request, res: Response) => {
|
||||
const { rows } = await pool.query(
|
||||
`SELECT key, value FROM admin_settings WHERE key LIKE 'email\\_%'`
|
||||
);
|
||||
const stored = new Map<string, string>(rows.map((r) => [r.key, r.value]));
|
||||
|
||||
res.json(
|
||||
KEYS.map((key) => ({
|
||||
key,
|
||||
label: TEMPLATES[key].label,
|
||||
required: TEMPLATES[key].required,
|
||||
available: TEMPLATES[key].available,
|
||||
defaultSubject: TEMPLATES[key].defaultSubject,
|
||||
defaultBody: TEMPLATES[key].defaultBody,
|
||||
// Null rather than the default, so the admin can tell "not customised"
|
||||
// from "customised to exactly the default text".
|
||||
subject: stored.get(settingKey(key, 'subject')) ?? null,
|
||||
body: stored.get(settingKey(key, 'body')) ?? null
|
||||
}))
|
||||
);
|
||||
}));
|
||||
|
||||
router.put('/:key', asyncRoute(async (req: Request, res: Response) => {
|
||||
const key = req.params.key;
|
||||
if (!isTemplateKey(key)) {
|
||||
return res.status(404).json({ error: 'unknown template' });
|
||||
}
|
||||
|
||||
const subject = typeof req.body?.subject === 'string' ? req.body.subject.trim() : '';
|
||||
const body = typeof req.body?.body === 'string' ? req.body.body.trim() : '';
|
||||
|
||||
if (!subject) {
|
||||
return res.status(400).json({ error: 'a subject is required' });
|
||||
}
|
||||
if (!body) {
|
||||
return res.status(400).json({ error: 'a body is required' });
|
||||
}
|
||||
|
||||
// The rule that makes this feature safe rather than a way to break password
|
||||
// resets from a settings screen. A body without its link still sends, still
|
||||
// looks correct in the log, and is useless to everyone who receives it — so
|
||||
// the save is refused rather than warned about.
|
||||
const missing = missingPlaceholders(key, body);
|
||||
if (missing.length) {
|
||||
const named = missing.map((name) => '{{' + name + '}}').join(' and ');
|
||||
return res.status(400).json({ error: `the body must keep ${named}` });
|
||||
}
|
||||
|
||||
for (const [part, value] of [
|
||||
['subject', subject],
|
||||
['body', body]
|
||||
] as const) {
|
||||
await pool.query(
|
||||
`INSERT INTO admin_settings (key, value, updated_at) VALUES ($1, $2, now())
|
||||
ON CONFLICT (key) DO UPDATE SET value = $2, updated_at = now()`,
|
||||
[settingKey(key, part), value]
|
||||
);
|
||||
}
|
||||
|
||||
res.json({ key, subject, body });
|
||||
}));
|
||||
|
||||
// Restores the built-in copy by removing the stored rows, rather than by
|
||||
// writing the default into them — so "not customised" stays distinguishable
|
||||
// from "customised back to the original wording".
|
||||
router.delete('/:key', asyncRoute(async (req: Request, res: Response) => {
|
||||
const key = req.params.key;
|
||||
if (!isTemplateKey(key)) {
|
||||
return res.status(404).json({ error: 'unknown template' });
|
||||
}
|
||||
|
||||
await pool.query(`DELETE FROM admin_settings WHERE key = ANY($1)`, [
|
||||
[settingKey(key, 'subject'), settingKey(key, 'body')]
|
||||
]);
|
||||
|
||||
res.json({ key, subject: null, body: null });
|
||||
}));
|
||||
|
||||
export default router;
|
||||
@@ -4,6 +4,8 @@ import crypto from 'node:crypto';
|
||||
import { pool } from '../db';
|
||||
import { requireCustomer } from '../middleware/customerAuth';
|
||||
import { sendMail } from '../mailer';
|
||||
import { renderTemplate, greeting } from '../emailTemplates';
|
||||
import { loadStoredTemplate } from './adminEmailTemplates';
|
||||
import { MARKETING_CONSENT_TEXT, isValidEmail } from '../utils';
|
||||
import { FAVORITE_ALERTS_CONSENT_TEXT } from '../favoriteAlerts';
|
||||
import { asyncRoute } from '../asyncRoute';
|
||||
@@ -103,11 +105,12 @@ router.post('/register', asyncRoute(async (req: Request, res: Response) => {
|
||||
[verifyToken, customer.id, new Date(Date.now() + 24 * 60 * 60 * 1000)]
|
||||
);
|
||||
const verifyUrl = `${process.env.PUBLIC_URL}/verify-email?token=${verifyToken}`;
|
||||
sendMail(
|
||||
customer.email,
|
||||
'Verify your Redefined Designs account',
|
||||
`<p>Welcome! Please <a href="${verifyUrl}">verify your email</a> to finish setting up your account.</p>`
|
||||
).catch(err => console.error('verify email send failed', err));
|
||||
const verifyTemplate = renderTemplate('verification', await loadStoredTemplate('verification'), {
|
||||
greeting: greeting(customer.first_name),
|
||||
verifyUrl
|
||||
});
|
||||
sendMail(customer.email, verifyTemplate.subject, verifyTemplate.html)
|
||||
.catch(err => console.error('verify email send failed', err));
|
||||
|
||||
const sessionToken = await createSession(customer.id);
|
||||
setSessionCookie(res, sessionToken);
|
||||
@@ -154,13 +157,12 @@ router.post('/request-password-reset', passwordResetRequestLimiter, asyncRoute(a
|
||||
);
|
||||
|
||||
const resetUrl = `${process.env.PUBLIC_URL}/reset-password?token=${token}`;
|
||||
sendMail(
|
||||
customer.email,
|
||||
'Reset your Redefined Designs password',
|
||||
`<p>Someone asked to reset the password for this account.</p>
|
||||
<p><a href="${resetUrl}">Choose a new password</a>. This link expires in one hour.</p>
|
||||
<p>If this wasn't you, you can ignore this email — your password has not changed.</p>`
|
||||
).catch(err => console.error('password reset email send failed', err));
|
||||
const resetTemplate = renderTemplate('passwordReset', await loadStoredTemplate('passwordReset'), {
|
||||
greeting: greeting(customer.first_name),
|
||||
resetUrl
|
||||
});
|
||||
sendMail(customer.email, resetTemplate.subject, resetTemplate.html)
|
||||
.catch(err => console.error('password reset email send failed', err));
|
||||
}
|
||||
|
||||
res.json({ status: 'sent' });
|
||||
|
||||
+19
-9
@@ -2,6 +2,8 @@ import cron from 'node-cron';
|
||||
import app from './app';
|
||||
import { pool } from './db';
|
||||
import { sendMail } from './mailer';
|
||||
import { renderTemplate, greeting } from './emailTemplates';
|
||||
import { loadStoredTemplate } from './routes/adminEmailTemplates';
|
||||
import { validateEnv } from './envValidation';
|
||||
|
||||
// Release cart holds whose expiry has passed.
|
||||
@@ -39,16 +41,24 @@ async function sendCartReminders(): Promise<void> {
|
||||
byEmail.get(row.email)!.items.push({ name: row.item_name, expiresAt: row.expires_at, cartItemId: row.cart_item_id });
|
||||
}
|
||||
|
||||
// Loaded once rather than per recipient: the copy is shared, only the
|
||||
// greeting and the item list differ.
|
||||
const stored = await loadStoredTemplate('cartReminder');
|
||||
|
||||
for (const [email, data] of byEmail) {
|
||||
const itemList = data.items.map(i => `<li>${i.name} — reserved until ${i.expiresAt.toLocaleString()}</li>`).join('');
|
||||
await sendMail(
|
||||
email,
|
||||
'Items waiting in your cart',
|
||||
`<p>Hi${data.firstName ? ' ' + data.firstName : ''},</p>
|
||||
<p>You still have items in your cart at Redefined Designs:</p>
|
||||
<ul>${itemList}</ul>
|
||||
<p><a href="${process.env.PUBLIC_URL}/cart">View your cart</a> before your reservation expires.</p>`
|
||||
);
|
||||
// Markdown, not HTML. Values are substituted into the template source
|
||||
// before it is rendered, and the renderer escapes raw HTML — so an <li>
|
||||
// here would reach the customer as literal angle brackets.
|
||||
const itemList = data.items
|
||||
.map(i => `- ${i.name} — reserved until ${i.expiresAt.toLocaleString()}`)
|
||||
.join('\n');
|
||||
|
||||
const { subject, html } = renderTemplate('cartReminder', stored, {
|
||||
greeting: greeting(data.firstName),
|
||||
itemList,
|
||||
cartUrl: `${process.env.PUBLIC_URL}/cart`
|
||||
});
|
||||
await sendMail(email, subject, html);
|
||||
const ids = data.items.map(i => i.cartItemId);
|
||||
await pool.query(`UPDATE cart_items SET last_reminder_sent_at = now() WHERE id = ANY($1::int[])`, [ids]);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,177 @@
|
||||
import request from 'supertest';
|
||||
import app from '../../src/app';
|
||||
import { pool } from '../../src/db';
|
||||
import { resetDb, closeDb } from './setup/testDb';
|
||||
import { renderTemplate } from '../../src/emailTemplates';
|
||||
import { loadStoredTemplate } from '../../src/routes/adminEmailTemplates';
|
||||
|
||||
beforeEach(async () => {
|
||||
// resetDb clears stored email templates as well, so a template saved by one
|
||||
// test cannot change the mail another asserts on.
|
||||
await resetDb();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await pool.end();
|
||||
await closeDb();
|
||||
});
|
||||
|
||||
const VALID_RESET_BODY = 'New copy. [Choose a new password]({{resetUrl}}) within the hour.';
|
||||
|
||||
describe('GET /api/admin/email-templates', () => {
|
||||
it('lists every template with its defaults and placeholder rules', async () => {
|
||||
const res = await request(app).get('/api/admin/email-templates');
|
||||
|
||||
expect(res.status).toBe(200);
|
||||
expect(res.body.map((t: { key: string }) => t.key).sort()).toEqual([
|
||||
'cartReminder',
|
||||
'favoriteSold',
|
||||
'favoriteWithdrawn',
|
||||
'passwordReset',
|
||||
'verification'
|
||||
]);
|
||||
|
||||
const reset = res.body.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
expect(reset.required).toEqual(['resetUrl']);
|
||||
expect(reset.defaultBody).toContain('{{resetUrl}}');
|
||||
});
|
||||
|
||||
// Null rather than the default text, so the screen can tell "never edited"
|
||||
// from "edited to something identical to the default".
|
||||
it('reports an uncustomised template as null rather than as its default', async () => {
|
||||
const res = await request(app).get('/api/admin/email-templates');
|
||||
const reset = res.body.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
|
||||
expect(reset.subject).toBeNull();
|
||||
expect(reset.body).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('PUT /api/admin/email-templates/:key', () => {
|
||||
it('stores a replacement subject and body', async () => {
|
||||
const res = await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: 'Your reset link', body: VALID_RESET_BODY });
|
||||
|
||||
expect(res.status).toBe(200);
|
||||
|
||||
const listed = await request(app).get('/api/admin/email-templates');
|
||||
const reset = listed.body.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
expect(reset.subject).toBe('Your reset link');
|
||||
expect(reset.body).toBe(VALID_RESET_BODY);
|
||||
});
|
||||
|
||||
// The rule that keeps this from being a way to break password resets from a
|
||||
// settings screen.
|
||||
it('refuses a body that has dropped the required placeholder', async () => {
|
||||
const res = await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: 'Your reset link', body: 'Just click the thing.' });
|
||||
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.error).toContain('{{resetUrl}}');
|
||||
});
|
||||
|
||||
it('names every missing placeholder, not just the first', async () => {
|
||||
const res = await request(app)
|
||||
.put('/api/admin/email-templates/cartReminder')
|
||||
.send({ subject: 'Your cart', body: 'You left things behind.' });
|
||||
|
||||
expect(res.status).toBe(400);
|
||||
expect(res.body.error).toContain('{{itemList}}');
|
||||
expect(res.body.error).toContain('{{cartUrl}}');
|
||||
});
|
||||
|
||||
it('refuses an empty subject or body', async () => {
|
||||
const noSubject = await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: ' ', body: VALID_RESET_BODY });
|
||||
expect(noSubject.status).toBe(400);
|
||||
|
||||
const noBody = await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: 'Something', body: ' ' });
|
||||
expect(noBody.status).toBe(400);
|
||||
});
|
||||
|
||||
it('refuses a template key it does not recognise', async () => {
|
||||
const res = await request(app)
|
||||
.put('/api/admin/email-templates/invoiceOverdue')
|
||||
.send({ subject: 'x', body: 'y' });
|
||||
|
||||
expect(res.status).toBe(404);
|
||||
});
|
||||
|
||||
// Nothing is stored when a save is refused, or a half-applied edit would sit
|
||||
// there looking accepted.
|
||||
it('stores nothing when it refuses', async () => {
|
||||
await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: 'Your reset link', body: 'No link here.' });
|
||||
|
||||
const { rows } = await pool.query(`SELECT key FROM admin_settings WHERE key LIKE 'email%'`);
|
||||
expect(rows).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('DELETE /api/admin/email-templates/:key', () => {
|
||||
it('restores the built-in copy by forgetting the stored rows', async () => {
|
||||
await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: 'Custom', body: VALID_RESET_BODY });
|
||||
|
||||
const res = await request(app).delete('/api/admin/email-templates/passwordReset');
|
||||
expect(res.status).toBe(200);
|
||||
|
||||
const listed = await request(app).get('/api/admin/email-templates');
|
||||
const reset = listed.body.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
expect(reset.subject).toBeNull();
|
||||
expect(reset.body).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
// The point of the whole feature: what is stored is what customers receive.
|
||||
describe('what a stored template does to the email that gets sent', () => {
|
||||
it('is used in place of the default once saved', async () => {
|
||||
await request(app)
|
||||
.put('/api/admin/email-templates/passwordReset')
|
||||
.send({ subject: 'Reset requested', body: VALID_RESET_BODY });
|
||||
|
||||
const { subject, html } = renderTemplate(
|
||||
'passwordReset',
|
||||
await loadStoredTemplate('passwordReset'),
|
||||
{ greeting: 'Hi Thom,', resetUrl: 'https://shop.test/r?token=abc' }
|
||||
);
|
||||
|
||||
expect(subject).toBe('Reset requested');
|
||||
expect(html).toContain('New copy.');
|
||||
expect(html).toContain('https://shop.test/r?token=abc');
|
||||
});
|
||||
|
||||
it('falls back to the built-in copy when nothing is stored', async () => {
|
||||
const { subject, html } = renderTemplate(
|
||||
'passwordReset',
|
||||
await loadStoredTemplate('passwordReset'),
|
||||
{ greeting: 'Hi,', resetUrl: 'https://shop.test/r?token=abc' }
|
||||
);
|
||||
|
||||
expect(subject).toBe('Reset your Redefined Designs password');
|
||||
expect(html).toContain('Choose a new password');
|
||||
});
|
||||
|
||||
// Editing the copy must not be able to remove the sentence that explains why
|
||||
// the email is lawful to send.
|
||||
it('keeps the consent footer on a favorite alert whose body was replaced', async () => {
|
||||
await request(app)
|
||||
.put('/api/admin/email-templates/favoriteSold')
|
||||
.send({ subject: 'Gone', body: 'Sorry, {{itemName}} sold.' });
|
||||
|
||||
const { html } = renderTemplate('favoriteSold', await loadStoredTemplate('favoriteSold'), {
|
||||
itemName: 'Oak table',
|
||||
siteUrl: 'https://shop.test'
|
||||
});
|
||||
|
||||
expect(html).toContain('Sorry, Oak table sold.');
|
||||
expect(html).toContain('account page');
|
||||
});
|
||||
});
|
||||
@@ -33,6 +33,14 @@ export async function resetDb(): Promise<void> {
|
||||
tags, categories
|
||||
RESTART IDENTITY CASCADE
|
||||
`);
|
||||
|
||||
// admin_settings is not truncated — it holds the seeded cart_expiry_hours
|
||||
// default that other suites read. But the email template rows in it are test
|
||||
// data like any other, and a stored template outliving the suite that wrote
|
||||
// it silently changes the mail every later suite asserts on. That is not
|
||||
// hypothetical: a subject of "Gone" written by the template tests reached the
|
||||
// favorite-alert tests and made five of them fail somewhere else entirely.
|
||||
await testPool.query(`DELETE FROM admin_settings WHERE key LIKE 'email\_%'`);
|
||||
}
|
||||
|
||||
export async function closeDb(): Promise<void> {
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
import {
|
||||
TEMPLATES,
|
||||
TemplateKey,
|
||||
missingPlaceholders,
|
||||
renderTemplate
|
||||
} from '../../src/emailTemplates';
|
||||
|
||||
const KEYS: TemplateKey[] = [
|
||||
'verification',
|
||||
'passwordReset',
|
||||
'favoriteSold',
|
||||
'favoriteWithdrawn',
|
||||
'cartReminder'
|
||||
];
|
||||
|
||||
describe('the built-in templates', () => {
|
||||
it.each(KEYS)('%s has a default subject and body', (key) => {
|
||||
expect(TEMPLATES[key].defaultSubject.trim()).not.toBe('');
|
||||
expect(TEMPLATES[key].defaultBody.trim()).not.toBe('');
|
||||
});
|
||||
|
||||
// A default that would be refused on save is a default nobody can edit and
|
||||
// put back.
|
||||
it.each(KEYS)('%s default body satisfies its own required placeholders', (key) => {
|
||||
expect(missingPlaceholders(key, TEMPLATES[key].defaultBody)).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('missingPlaceholders', () => {
|
||||
it('names the placeholder a body has dropped', () => {
|
||||
expect(missingPlaceholders('passwordReset', 'Hello, no link here.')).toEqual(['resetUrl']);
|
||||
});
|
||||
|
||||
it('is satisfied once the placeholder is present', () => {
|
||||
expect(missingPlaceholders('passwordReset', 'Reset it [here]({{resetUrl}}).')).toEqual([]);
|
||||
});
|
||||
|
||||
it('reports every missing placeholder rather than the first', () => {
|
||||
const missing = missingPlaceholders('cartReminder', 'You have things.');
|
||||
expect(missing).toContain('itemList');
|
||||
expect(missing).toContain('cartUrl');
|
||||
});
|
||||
|
||||
it('tolerates whitespace inside the braces', () => {
|
||||
expect(missingPlaceholders('passwordReset', 'Go [here]({{ resetUrl }}).')).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('renderTemplate', () => {
|
||||
const resetValues = { resetUrl: 'https://shop.test/reset-password?token=abc' };
|
||||
|
||||
it('substitutes a placeholder into the rendered body', () => {
|
||||
const { html } = renderTemplate('passwordReset', {}, resetValues);
|
||||
expect(html).toContain('https://shop.test/reset-password?token=abc');
|
||||
expect(html).not.toContain('{{resetUrl}}');
|
||||
});
|
||||
|
||||
it('renders markdown as HTML', () => {
|
||||
const { html } = renderTemplate(
|
||||
'passwordReset',
|
||||
{ body: 'Use **this** [link]({{resetUrl}}).' },
|
||||
resetValues
|
||||
);
|
||||
expect(html).toContain('<strong>this</strong>');
|
||||
expect(html).toContain('<a href="https://shop.test/reset-password?token=abc"');
|
||||
});
|
||||
|
||||
// The reason markdown-it runs with html disabled. An admin editing copy must
|
||||
// not be able to put script into a customer's inbox, and sanitising after the
|
||||
// fact is a weaker guarantee than never emitting it.
|
||||
it('escapes raw HTML in a stored body rather than passing it through', () => {
|
||||
const { html } = renderTemplate(
|
||||
'passwordReset',
|
||||
{ body: '<script>alert(1)</script> [link]({{resetUrl}})' },
|
||||
resetValues
|
||||
);
|
||||
expect(html).not.toContain('<script>');
|
||||
expect(html).toContain('<script>');
|
||||
});
|
||||
|
||||
it('falls back to the built-in body when nothing is stored', () => {
|
||||
const stored = renderTemplate('passwordReset', {}, resetValues);
|
||||
const explicit = renderTemplate(
|
||||
'passwordReset',
|
||||
{ body: TEMPLATES.passwordReset.defaultBody },
|
||||
resetValues
|
||||
);
|
||||
expect(stored.html).toBe(explicit.html);
|
||||
});
|
||||
|
||||
it('uses a stored subject over the default, and substitutes into it', () => {
|
||||
const { subject } = renderTemplate(
|
||||
'favoriteSold',
|
||||
{ subject: '{{itemName}} is gone' },
|
||||
{ itemName: 'Oak table', siteUrl: 'https://shop.test' }
|
||||
);
|
||||
expect(subject).toBe('Oak table is gone');
|
||||
});
|
||||
|
||||
// Values are substituted into the markdown source, so a value that needs to
|
||||
// become a list has to arrive as markdown. Emitting HTML here would be
|
||||
// escaped and shown to the customer as literal tags.
|
||||
it('renders a markdown list supplied as a placeholder value', () => {
|
||||
const { html } = renderTemplate(
|
||||
'cartReminder',
|
||||
{},
|
||||
{
|
||||
greeting: 'Hi Thom,',
|
||||
itemList: '- Oak table\n- Brass lamp',
|
||||
cartUrl: 'https://shop.test/cart'
|
||||
}
|
||||
);
|
||||
expect(html).toContain('<ul>');
|
||||
expect(html).toContain('<li>Oak table</li>');
|
||||
});
|
||||
|
||||
// The consent sentence explains why the email is lawful to send. It is
|
||||
// appended by the server precisely so that editing the copy cannot remove it.
|
||||
it.each(['favoriteSold', 'favoriteWithdrawn'] as TemplateKey[])(
|
||||
'appends the unremovable consent footer to %s',
|
||||
(key) => {
|
||||
const { html } = renderTemplate(
|
||||
key,
|
||||
{ body: 'Short replacement copy about {{itemName}}.' },
|
||||
{ itemName: 'Oak table', siteUrl: 'https://shop.test' }
|
||||
);
|
||||
expect(html).toContain('favorited');
|
||||
expect(html).toContain('account page');
|
||||
}
|
||||
);
|
||||
|
||||
it('does not append that footer to templates it does not belong to', () => {
|
||||
const { html } = renderTemplate('passwordReset', {}, resetValues);
|
||||
expect(html).not.toContain('account page');
|
||||
});
|
||||
|
||||
// An unsubstituted placeholder in the output means a caller forgot a value,
|
||||
// and shipping "{{resetUrl}}" to a customer is worse than failing.
|
||||
it('leaves no unsubstituted placeholders when every value is supplied', () => {
|
||||
const { html, subject } = renderTemplate(
|
||||
'cartReminder',
|
||||
{},
|
||||
{ greeting: 'Hi Thom,', itemList: '- One thing', cartUrl: 'https://shop.test/cart' }
|
||||
);
|
||||
expect(html).not.toMatch(/\{\{\s*\w+\s*\}\}/);
|
||||
expect(subject).not.toMatch(/\{\{\s*\w+\s*\}\}/);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
import { useState } from 'react';
|
||||
import Card from 'antd/es/card';
|
||||
import Input from 'antd/es/input';
|
||||
import Button from 'antd/es/button';
|
||||
import Space from 'antd/es/space';
|
||||
import Tag from 'antd/es/tag';
|
||||
import Typography from 'antd/es/typography';
|
||||
import message from 'antd/es/message';
|
||||
import { EmailTemplate, saveEmailTemplate, resetEmailTemplate } from './emailTemplatesApi';
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
type Props = Readonly<{
|
||||
template: EmailTemplate;
|
||||
onChanged: (updated: EmailTemplate) => void;
|
||||
}>;
|
||||
|
||||
export default function EmailTemplateCard({ template, onChanged }: Props) {
|
||||
// Falls back to the default so the editor starts from the real copy rather
|
||||
// than an empty box. `subject`/`body` being null means "never customised",
|
||||
// which is why the badge below can say so.
|
||||
const [subject, setSubject] = useState(template.subject ?? template.defaultSubject);
|
||||
const [body, setBody] = useState(template.body ?? template.defaultBody);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const customised = template.subject !== null || template.body !== null;
|
||||
|
||||
async function handleSave() {
|
||||
setSaving(true);
|
||||
try {
|
||||
const updated = await saveEmailTemplate(template.key, subject, body);
|
||||
onChanged(updated);
|
||||
message.success(`${template.label} saved`);
|
||||
} catch (err) {
|
||||
// The server's refusal names the placeholder that is missing, which is
|
||||
// the only useful thing to say here — so it is shown rather than replaced
|
||||
// with something generic.
|
||||
message.error((err as Error).message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReset() {
|
||||
setSaving(true);
|
||||
try {
|
||||
const restored = await resetEmailTemplate(template.key);
|
||||
setSubject(template.defaultSubject);
|
||||
setBody(template.defaultBody);
|
||||
onChanged(restored);
|
||||
message.success(`${template.label} restored to the default`);
|
||||
} catch (err) {
|
||||
message.error((err as Error).message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
style={{ marginBottom: 16 }}
|
||||
title={
|
||||
<Space>
|
||||
{template.label}
|
||||
{customised ? <Tag color="blue">Customised</Tag> : <Tag>Default</Tag>}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Paragraph type="secondary" style={{ marginBottom: 8 }}>
|
||||
Markdown. Placeholders are replaced when the email is sent
|
||||
{template.required.length > 0 && (
|
||||
<>
|
||||
{' '}— <Text strong>{template.required.map((n) => `{{${n}}}`).join(' and ')}</Text>{' '}
|
||||
{template.required.length === 1 ? 'is' : 'are'} required and cannot be removed
|
||||
</>
|
||||
)}
|
||||
.
|
||||
</Paragraph>
|
||||
|
||||
<Space wrap size={[4, 4]} style={{ marginBottom: 12 }}>
|
||||
{template.available.map((name) => (
|
||||
<Tag key={name} style={{ fontFamily: 'monospace' }}>{`{{${name}}}`}</Tag>
|
||||
))}
|
||||
</Space>
|
||||
|
||||
<Input
|
||||
aria-label={`${template.label} subject`}
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Subject"
|
||||
style={{ marginBottom: 8 }}
|
||||
/>
|
||||
<Input.TextArea
|
||||
aria-label={`${template.label} body`}
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
autoSize={{ minRows: 6, maxRows: 16 }}
|
||||
style={{ fontFamily: 'monospace', marginBottom: 12 }}
|
||||
/>
|
||||
|
||||
<Space>
|
||||
<Button type="primary" loading={saving} onClick={handleSave}>
|
||||
Save
|
||||
</Button>
|
||||
{/* Only offered when there is something to restore, so the button is
|
||||
not a no-op that looks like it did something. */}
|
||||
{customised && (
|
||||
<Button loading={saving} onClick={handleReset}>
|
||||
Restore default
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -6,12 +6,15 @@ import Typography from 'antd/es/typography';
|
||||
import message from 'antd/es/message';
|
||||
import Card from 'antd/es/card';
|
||||
import { fetchAdminSettings, updateAdminSettings } from './adminSettingsApi';
|
||||
import { EmailTemplate, fetchEmailTemplates } from './emailTemplatesApi';
|
||||
import EmailTemplateCard from './EmailTemplateCard';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
export default function Settings() {
|
||||
const [form] = Form.useForm();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [templates, setTemplates] = useState<EmailTemplate[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAdminSettings()
|
||||
@@ -23,6 +26,22 @@ export default function Settings() {
|
||||
.finally(() => setLoading(false));
|
||||
}, [form]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchEmailTemplates()
|
||||
.then(setTemplates)
|
||||
// Reported rather than swallowed: an empty list would otherwise read as
|
||||
// "there are no templates" instead of "they could not be loaded".
|
||||
.catch(() => message.error('Could not load the email templates'));
|
||||
}, []);
|
||||
|
||||
// Replaces the one that changed so the Customised badge and the Restore
|
||||
// button reflect what the server now holds, without refetching the rest.
|
||||
function handleTemplateChanged(updated: EmailTemplate) {
|
||||
setTemplates(current =>
|
||||
current.map(t => (t.key === updated.key ? { ...t, subject: updated.subject, body: updated.body } : t))
|
||||
);
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const values = await form.validateFields();
|
||||
await updateAdminSettings(values);
|
||||
@@ -30,6 +49,7 @@ export default function Settings() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<Card style={{ maxWidth: 480 }}>
|
||||
<Title level={4}>Cart Settings</Title>
|
||||
<Text type="secondary">
|
||||
@@ -42,5 +62,16 @@ export default function Settings() {
|
||||
<Button type="primary" onClick={handleSave} loading={loading}>Save</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Title level={4} style={{ marginTop: 32 }}>Customer emails</Title>
|
||||
<Text type="secondary">
|
||||
The wording customers receive. Leave one alone and it sends the built-in copy.
|
||||
</Text>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
{templates.map(template => (
|
||||
<EmailTemplateCard key={template.key} template={template} onChanged={handleTemplateChanged} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
export interface EmailTemplate {
|
||||
key: string;
|
||||
/** Human name for the card, so it is identifiable without reading the body. */
|
||||
label: string;
|
||||
/** Placeholders the body must keep. Saving without one is refused. */
|
||||
required: string[];
|
||||
/** Every placeholder this template understands. */
|
||||
available: string[];
|
||||
defaultSubject: string;
|
||||
defaultBody: string;
|
||||
/** Null when never customised, which is distinct from "same as the default". */
|
||||
subject: string | null;
|
||||
body: string | null;
|
||||
}
|
||||
|
||||
async function json<T>(res: Response): Promise<T> {
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
// The server's refusals say which placeholder is missing, and that message is
|
||||
// the whole point of the validation — so it is surfaced rather than replaced
|
||||
// with something generic.
|
||||
async function expectOk(res: Response, action: string): Promise<Response> {
|
||||
if (res.ok) return res;
|
||||
const detail = await res.json().catch(() => null);
|
||||
throw new Error(detail?.error ? String(detail.error) : action);
|
||||
}
|
||||
|
||||
export async function fetchEmailTemplates(): Promise<EmailTemplate[]> {
|
||||
const res = await expectOk(await fetch('/api/admin/email-templates'), 'could not load templates');
|
||||
return json<EmailTemplate[]>(res);
|
||||
}
|
||||
|
||||
export async function saveEmailTemplate(
|
||||
key: string,
|
||||
subject: string,
|
||||
body: string
|
||||
): Promise<EmailTemplate> {
|
||||
const res = await expectOk(
|
||||
await fetch(`/api/admin/email-templates/${key}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ subject, body })
|
||||
}),
|
||||
'could not save the template'
|
||||
);
|
||||
return json<EmailTemplate>(res);
|
||||
}
|
||||
|
||||
export async function resetEmailTemplate(key: string): Promise<EmailTemplate> {
|
||||
const res = await expectOk(
|
||||
await fetch(`/api/admin/email-templates/${key}`, { method: 'DELETE' }),
|
||||
'could not restore the default'
|
||||
);
|
||||
return json<EmailTemplate>(res);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { test, expect } from './fixtures';
|
||||
|
||||
const suffix = () => `t${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`;
|
||||
|
||||
// Each test leaves the templates as it found them, because they are stored in
|
||||
// admin_settings and would otherwise change the copy a later test reads.
|
||||
async function restore(page: import('@playwright/test').Page, key: string) {
|
||||
await page.request.delete(`/api/admin/email-templates/${key}`);
|
||||
}
|
||||
|
||||
async function openSettings(page: import('@playwright/test').Page) {
|
||||
await page.goto('/admin');
|
||||
await page.getByRole('tab', { name: 'Settings' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'Customer emails' })).toBeVisible();
|
||||
}
|
||||
|
||||
// Serial: these edit one shared stored template, and the suite runs fully
|
||||
// parallel by default — so run concurrently they would race, one asserting a
|
||||
// template is unset while another has just saved it.
|
||||
test.describe.configure({ mode: 'serial' });
|
||||
|
||||
test.describe('Editing the customer emails', () => {
|
||||
test.afterEach(async ({ page }) => {
|
||||
await restore(page, 'passwordReset');
|
||||
});
|
||||
|
||||
test('shows every template, marked default until it is edited', async ({ page }) => {
|
||||
await openSettings(page);
|
||||
|
||||
for (const label of [
|
||||
'Email verification',
|
||||
'Password reset',
|
||||
'Favorited item sold',
|
||||
'Favorited item withdrawn',
|
||||
'Cart reminder'
|
||||
]) {
|
||||
await expect(page.getByText(label, { exact: true })).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('saves a replacement subject and body', async ({ page }) => {
|
||||
const subject = `Reset ${suffix()}`;
|
||||
await openSettings(page);
|
||||
|
||||
await page.getByLabel('Password reset subject').fill(subject);
|
||||
await page
|
||||
.getByLabel('Password reset body')
|
||||
.fill('Fresh wording. [Choose a new password]({{resetUrl}}).');
|
||||
|
||||
const card = page.locator('.ant-card').filter({ hasText: 'Password reset' });
|
||||
await card.getByRole('button', { name: 'Save', exact: true }).click();
|
||||
|
||||
await expect(page.getByText('Password reset saved')).toBeVisible();
|
||||
|
||||
// Persisted, not merely accepted by the form.
|
||||
const stored = await (await page.request.get('/api/admin/email-templates')).json();
|
||||
const reset = stored.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
expect(reset.subject).toBe(subject);
|
||||
});
|
||||
|
||||
// The assertion that matters. A body without its link still sends and still
|
||||
// looks fine in the log, so the save has to be refused rather than warned
|
||||
// about — and the admin has to be told which placeholder is missing.
|
||||
test('refuses a body that drops the required placeholder, and says which', async ({ page }) => {
|
||||
await openSettings(page);
|
||||
|
||||
await page.getByLabel('Password reset body').fill('Just click the thing in your email.');
|
||||
|
||||
const card = page.locator('.ant-card').filter({ hasText: 'Password reset' });
|
||||
await card.getByRole('button', { name: 'Save', exact: true }).click();
|
||||
|
||||
await expect(page.getByText('the body must keep {{resetUrl}}')).toBeVisible();
|
||||
|
||||
// And nothing was stored.
|
||||
const stored = await (await page.request.get('/api/admin/email-templates')).json();
|
||||
const reset = stored.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
expect(reset.body).toBeNull();
|
||||
});
|
||||
|
||||
test('restores the built-in copy', async ({ page }) => {
|
||||
await page.request.put('/api/admin/email-templates/passwordReset', {
|
||||
data: { subject: 'Temporary', body: 'Temporary [link]({{resetUrl}}).' }
|
||||
});
|
||||
|
||||
await openSettings(page);
|
||||
const card = page.locator('.ant-card').filter({ hasText: 'Password reset' });
|
||||
await card.getByRole('button', { name: 'Restore default' }).click();
|
||||
|
||||
await expect(page.getByText('Password reset restored to the default')).toBeVisible();
|
||||
|
||||
const stored = await (await page.request.get('/api/admin/email-templates')).json();
|
||||
const reset = stored.find((t: { key: string }) => t.key === 'passwordReset');
|
||||
expect(reset.subject).toBeNull();
|
||||
expect(reset.body).toBeNull();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user