bermudalambandClaude Opus 5
1fa723bd19
Follow-up to #92, which shipped the editable templates as a column of stacked cards. With six templates the cart reminder sat below five editors, so reaching it meant scrolling past all of them and which one you were editing was knowable only from a card title you had already scrolled past. They are tabs now, and the Default/Customised tag moves onto the tab label, so which templates have been changed is visible without opening each one. The larger gap was that there was no way to see what the email would look like. The editor is a markdown textarea; what gets sent is rendered HTML with placeholders substituted and, for the two favorite templates, a consent footer appended by the server. An admin editing copy could not tell whether the result read correctly. POST /api/admin/email-templates/:key/preview renders the draft in the editor rather than what is stored, so the effect of an edit is visible before committing to it. It renders on the server deliberately: renderTemplate is the only thing in the system that turns this markdown into HTML, and markdown-it is configured there with html: false, which is the control that stops an admin putting script into a customer's inbox. A renderer in the browser would be a second implementation of both, and a preview that disagreed with the mailer would be worse than none. It does not enforce required placeholders - saving refuses a body that dropped one, and previewing it is how the admin sees what they have done. The preview renders into a sandboxed iframe rather than through dangerouslySetInnerHTML. The markup is safe by construction, but an email is its own styling context: rendered inline, the admin theme's CSS would change how it looks and the preview would lie about the result. Sample values live beside the template definitions rather than in the route, so adding a placeholder puts the missing sample next to the change that needs it. A unit test asserts every available placeholder has one, because a missing sample renders a literal {{placeholder}} into the preview and teaches the admin their copy is broken when it is not. This also fixes a test that has been failing on main. email-templates.spec.ts located the Save button by filtering .ant-card for the template name, which matched an outer card containing every template's Save button - six of them - and died on a strict mode violation, taking two more tests with it as unrun. Only the active tab's editor is mounted now, so the labels are unambiguous and the filter is gone. Verification: eight end-to-end tests, four for editing and four for the preview, covering the draft being previewed rather than the stored copy, sample values replacing placeholders, raw HTML being escaped exactly as the mailer escapes it, and the consent footer appearing on a favorite template and not on a password reset. The full suite goes from 100 passed / 3 failed / 2 unrun to 112 passed / 2 failed / 0 unrun; the two that remain are the pre-existing password-reset failures that need a database on port 55432 and fail identically on main. 38 backend unit tests pass, tsc and ESLint are clean. Closes #119 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
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);
|
|
}
|
|
|
|
export interface RenderedEmail {
|
|
subject: string;
|
|
html: string;
|
|
}
|
|
|
|
// Rendered by the server, which owns the only markdown renderer in the system
|
|
// and the html: false setting that keeps script out of a customer's inbox. A
|
|
// preview rendered in the browser would be a second implementation of both, and
|
|
// one that disagreed with the mailer would be worse than none.
|
|
export async function previewEmailTemplate(
|
|
key: string,
|
|
subject: string,
|
|
body: string
|
|
): Promise<RenderedEmail> {
|
|
const res = await expectOk(
|
|
await fetch(`/api/admin/email-templates/${key}/preview`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ subject, body })
|
|
}),
|
|
'could not render the preview'
|
|
);
|
|
return json<RenderedEmail>(res);
|
|
}
|