feat(email): per-variant paid/unpaid body templates in settings

The previous single body field could not distinguish 'use the default' from
'save the pre-filled default', so the first settings save locked the hint in
as a custom override for ALL orders — the paid/unpaid default logic never ran.

Give each payment state its own editable body field (emailBodyHtmlDePaid /
emailBodyHtmlEnPaid) with its own empty-fallback. A body submitted unchanged
from its built-in default is stored as empty, so 'use default' survives saves
and future default updates propagate.
This commit is contained in:
Gerhard Scheikl
2026-08-24 16:35:09 +02:00
parent ff5c435bd4
commit 602b336a94
5 changed files with 76 additions and 32 deletions
+54 -16
View File
@@ -17,8 +17,10 @@ import {
import { encryptField } from "../services/crypto/fieldCrypto.server";
import { RichTextEditor } from "../components/RichTextEditor";
import {
DEFAULT_EMAIL_BODY_DE,
DEFAULT_EMAIL_BODY_EN,
DEFAULT_EMAIL_BODY_DE_PAID,
DEFAULT_EMAIL_BODY_DE_UNPAID,
DEFAULT_EMAIL_BODY_EN_PAID,
DEFAULT_EMAIL_BODY_EN_UNPAID,
DEFAULT_EMAIL_SUBJECT_DE,
DEFAULT_EMAIL_SUBJECT_EN,
} from "../services/invoice/emailTemplates";
@@ -80,6 +82,15 @@ export const action = async ({ request }: ActionFunctionArgs) => {
return Number.isFinite(n) ? n : null;
};
// Email bodies are pre-filled with the built-in default in the editor. If the
// submitted value still equals that default, store an empty string instead so
// "empty = use built-in default" survives a save (and future default updates
// propagate). Only a genuinely edited body is persisted as a custom override.
const tpl = (k: string, builtIn: string) => {
const v = str(k);
return normaliseHtml(v) === normaliseHtml(builtIn) ? "" : v;
};
const vatId = str("vatId").toUpperCase();
if (vatId && !isValidAtVatId(vatId)) {
errors.vatId = "Expected format: ATU followed by 8 digits (e.g. ATU12345678).";
@@ -214,9 +225,11 @@ export const action = async ({ request }: ActionFunctionArgs) => {
smtpFromEmail: str("smtpFromEmail"),
smtpReplyTo: str("smtpReplyTo"),
emailSubjectDe: str("emailSubjectDe"),
emailBodyHtmlDe: str("emailBodyHtmlDe"),
emailBodyHtmlDe: tpl("emailBodyHtmlDe", DEFAULT_EMAIL_BODY_DE_UNPAID),
emailSubjectEn: str("emailSubjectEn"),
emailBodyHtmlEn: str("emailBodyHtmlEn"),
emailBodyHtmlEn: tpl("emailBodyHtmlEn", DEFAULT_EMAIL_BODY_EN_UNPAID),
emailBodyHtmlDePaid: tpl("emailBodyHtmlDePaid", DEFAULT_EMAIL_BODY_DE_PAID),
emailBodyHtmlEnPaid: tpl("emailBodyHtmlEnPaid", DEFAULT_EMAIL_BODY_EN_PAID),
autoEmailOnWireTransferPlaced: bool("autoEmailOnWireTransferPlaced"),
autoEmailOnFulfilledNonWireTransfer: bool("autoEmailOnFulfilledNonWireTransfer"),
};
@@ -421,43 +434,59 @@ export default function SettingsRoute() {
<s-stack direction="block" gap="base">
<s-paragraph>
These templates are used when sending the invoice PDF by email.
Leave a field empty to fall back to the built-in default. The
built-in default has two variants per language: orders that are
already paid are sent a body <em>without</em> the bank-transfer
reference hint, while outstanding (unpaid) orders include it.
A custom template you set here is used for both paid and unpaid
orders — the editor below shows the unpaid default.
There are two body variants per language: the <strong>unpaid</strong>
{" "}body is sent for outstanding orders and includes the
bank-transfer reference hint; the <strong>paid</strong> body is sent
for orders that are already settled (paid / refunded / voided) and
omits that hint. Leave any field empty to fall back to its built-in
default.
</s-paragraph>
<Field
label="Subject (German)"
name="emailSubjectDe"
defaultValue={settings.emailSubjectDe || DEFAULT_EMAIL_SUBJECT_DE}
helpText="Variables like {{invoiceNumber}} are substituted at send time."
helpText="Variables like {{invoiceNumber}} are substituted at send time. Used for both paid and unpaid."
/>
<RichTextEditor
name="emailBodyHtmlDe"
label="Body (German)"
defaultValue={settings.emailBodyHtmlDe || DEFAULT_EMAIL_BODY_DE}
label="Body (German, unpaid)"
defaultValue={settings.emailBodyHtmlDe || DEFAULT_EMAIL_BODY_DE_UNPAID}
variables={EMAIL_VARS}
minHeight={220}
logoDataUrl={logoPreviewDataUrl}
/>
<RichTextEditor
name="emailBodyHtmlDePaid"
label="Body (German, paid)"
defaultValue={settings.emailBodyHtmlDePaid || DEFAULT_EMAIL_BODY_DE_PAID}
variables={EMAIL_VARS}
minHeight={200}
logoDataUrl={logoPreviewDataUrl}
/>
<Field
label="Subject (English)"
name="emailSubjectEn"
defaultValue={settings.emailSubjectEn || DEFAULT_EMAIL_SUBJECT_EN}
helpText="Variables like {{invoiceNumber}} are substituted at send time."
helpText="Variables like {{invoiceNumber}} are substituted at send time. Used for both paid and unpaid."
/>
<RichTextEditor
name="emailBodyHtmlEn"
label="Body (English)"
defaultValue={settings.emailBodyHtmlEn || DEFAULT_EMAIL_BODY_EN}
label="Body (English, unpaid)"
defaultValue={settings.emailBodyHtmlEn || DEFAULT_EMAIL_BODY_EN_UNPAID}
variables={EMAIL_VARS}
minHeight={220}
logoDataUrl={logoPreviewDataUrl}
/>
<RichTextEditor
name="emailBodyHtmlEnPaid"
label="Body (English, paid)"
defaultValue={settings.emailBodyHtmlEnPaid || DEFAULT_EMAIL_BODY_EN_PAID}
variables={EMAIL_VARS}
minHeight={200}
logoDataUrl={logoPreviewDataUrl}
/>
</s-stack>
</s-section>
@@ -524,6 +553,15 @@ const EMAIL_VARS = [
{ token: "{{shopWebsite}}" },
];
/**
* Collapses insignificant differences (whitespace, attribute order is left
* as-is) so a rich-text-editor round-trip of an unchanged default still
* compares equal to the built-in template.
*/
function normaliseHtml(html: string): string {
return html.replace(/\s+/g, " ").trim();
}
interface FieldProps {
label: string;
name: string;
+12 -15
View File
@@ -91,26 +91,23 @@ export async function sendInvoiceEmail(
(language === "en" ? DEFAULT_EMAIL_SUBJECT_EN : DEFAULT_EMAIL_SUBJECT_DE);
const subject = renderTemplate(customSubject, vars, { html: false });
// Pick the default body variant for the invoice's payment state: orders that
// are already settled (paid / refunded / voided) get a body WITHOUT the
// Pick the body variant for the invoice's payment state: orders that are
// already settled (paid / refunded / voided) get a body WITHOUT the
// bank-transfer reference hint; outstanding orders (unpaid / partial) keep
// it. Legacy rows have an empty paymentStatus → treated as unpaid.
// A merchant-supplied custom template always wins over the defaults.
// it. Legacy invoice rows have an empty paymentStatus → treated as unpaid.
// Each variant has its own merchant-customisable field; empty falls back to
// the built-in default for that variant.
const isPaid =
invoice.paymentStatus === "paid" ||
invoice.paymentStatus === "refunded" ||
invoice.paymentStatus === "voided";
const defaultBody =
language === "en"
? isPaid
? DEFAULT_EMAIL_BODY_EN_PAID
: DEFAULT_EMAIL_BODY_EN_UNPAID
: isPaid
? DEFAULT_EMAIL_BODY_DE_PAID
: DEFAULT_EMAIL_BODY_DE_UNPAID;
const customBodyHtml =
(language === "en" ? settings.emailBodyHtmlEn : settings.emailBodyHtmlDe) ||
defaultBody;
const customBodyHtml = isPaid
? language === "en"
? settings.emailBodyHtmlEnPaid || DEFAULT_EMAIL_BODY_EN_PAID
: settings.emailBodyHtmlDePaid || DEFAULT_EMAIL_BODY_DE_PAID
: language === "en"
? settings.emailBodyHtmlEn || DEFAULT_EMAIL_BODY_EN_UNPAID
: settings.emailBodyHtmlDe || DEFAULT_EMAIL_BODY_DE_UNPAID;
const body = renderHtmlBody(renderTemplate(customBodyHtml, vars));
// If the rendered body references the inline logo, attach it.