@hartl-services/medusa-base 1.0.0 → 1.1.0

package/dist/documents/templates/layout.js

@@ -1,96 +1,141 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDocumentLayout = void 0;
+exports.createDocumentLayout = exports.formatCountryName = void 0;
 const html_utils_1 = require("./html-utils");
 const formatCountryName = (countryCode) => new Intl.DisplayNames("de", { type: "region" }).of(countryCode.toUpperCase()) ?? countryCode.toUpperCase();
-const renderMerchantAddress = (merchant) => [
-    merchant.address_line1,
-    merchant.address_line2,
-    [merchant.postal_code, merchant.city].join(" "),
-    formatCountryName(merchant.country_code),
-]
-    .filter((part) => Boolean(part))
+exports.formatCountryName = formatCountryName;
+const joinLines = (lines) => lines
+    .filter((line) => Boolean(line))
     .map(html_utils_1.escapeHtml)
     .join("<br />");
-/** Legal footer: name, UID, company register, contact and bank details that are set. */
+const renderFooterColumn = (heading, lines) => {
+    const content = joinLines(lines);
+    if (!content) {
+        return "";
+    }
+    const title = heading
+        ? `<div class="footer-heading">${(0, html_utils_1.escapeHtml)(heading)}</div>`
+        : "";
+    return `<div class="footer-column">${title}${content}</div>`;
+};
+/**
+ * Legal footer in three columns: sender with UID and company register,
+ * contact, bank. Packing lists (`includeLegalDetails: false`) show only the
+ * sender's name and address.
+ */
 const renderMerchantFooter = (merchant, includeLegalDetails) => {
+    const sender = `<div class="footer-column"><strong>${(0, html_utils_1.escapeHtml)(merchant.legal_name)}</strong><br />${joinLines([
+        merchant.address_line1,
+        merchant.address_line2,
+        `${merchant.postal_code} ${merchant.city}`,
+        (0, exports.formatCountryName)(merchant.country_code),
+        ...(includeLegalDetails
+            ? [
+                merchant.vat_number ? `UID: ${merchant.vat_number}` : null,
+                merchant.company_register_number
+                    ? `Firmenbuchnummer: ${merchant.company_register_number}`
+                    : null,
+                merchant.company_register_court
+                    ? `Firmenbuchgericht: ${merchant.company_register_court}`
+                    : null,
+            ]
+            : []),
+    ])}</div>`;
     if (!includeLegalDetails) {
-        return (0, html_utils_1.escapeHtml)(merchant.legal_name);
+        return sender;
     }
-    const register = [
-        merchant.company_register_number
-            ? `Firmenbuchnummer: ${merchant.company_register_number}`
-            : null,
-        merchant.company_register_court
-            ? `Firmenbuchgericht: ${merchant.company_register_court}`
-            : null,
-    ];
-    const lines = [
-        [
-            merchant.legal_name,
-            merchant.vat_number ? `UID: ${merchant.vat_number}` : null,
-            ...register,
-        ],
-        [merchant.email, merchant.phone, merchant.website],
-        [
-            merchant.iban ? `IBAN: ${merchant.iban}` : null,
+    return [
+        sender,
+        renderFooterColumn("Kontakt", [
+            merchant.phone,
+            merchant.email,
+            merchant.website,
+        ]),
+        // The heading names the IBAN; only the BIC keeps its label.
+        renderFooterColumn("Bankverbindung", [
+            merchant.iban,
             merchant.bic ? `BIC: ${merchant.bic}` : null,
-        ],
-    ];
-    return lines
-        .map((parts) => parts
-        .filter((part) => Boolean(part))
-        .map(html_utils_1.escapeHtml)
-        .join(" · "))
-        .filter(Boolean)
-        .join("<br />");
+        ]),
+    ].join("");
 };
+const renderLetterhead = (merchant, settings) => settings.logo_src
+    ? `<img class="logo" src="${(0, html_utils_1.escapeHtml)(settings.logo_src)}" alt="${(0, html_utils_1.escapeHtml)(merchant.legal_name)}" />`
+    : `<div class="logo-text">${(0, html_utils_1.escapeHtml)(merchant.legal_name)}</div>`;
 const renderMetadata = (metadata) => metadata
-    .map(({ label, value }) => `<div><strong>${(0, html_utils_1.escapeHtml)(label)}:</strong> ${(0, html_utils_1.escapeHtml)(value)}</div>`)
+    .map(({ label, value }) => `<tr><th scope="row">${(0, html_utils_1.escapeHtml)(label)}</th><td>${(0, html_utils_1.escapeHtml)(value)}</td></tr>`)
     .join("");
 /**
- * `includeLegalDetails` adds UID, company register, contact and bank details
- * to the footer (financial documents); packing lists show only the name.
+ * A4 with only a bottom page margin, which holds the page number
+ * (`@bottom-right`; `counter(pages)` works only in page margin boxes). `.page`
+ * carries the other margins and repeats them on every printed page
+ * (`box-decoration-break: clone`); the fixed footer is positioned in the page
+ * area, `--footer-height` reserves its space at the bottom of each page.
  */
-const createDocumentLayout = (merchant, includeLegalDetails) => ({ body, documentTitle, metadata, number, pageTitle }) => `<!doctype html>
-<html lang="de">
-  <head>
-    <meta charset="utf-8" />
-    <title>${(0, html_utils_1.escapeHtml)(pageTitle)} ${(0, html_utils_1.escapeHtml)(number)}</title>
-    <style>
-      @page { margin: 18mm; }
-      body { color: #1f2937; font-family: Arial, sans-serif; font-size: 11px; line-height: 1.45; }
-      h1 { font-size: 24px; margin: 0 0 6px; }
-      h2 { break-after: avoid; font-size: 12px; margin: 22px 0 6px; page-break-after: avoid; text-transform: uppercase; }
-      .header { border-bottom: 2px solid #111827; display: flex; gap: 32px; justify-content: space-between; padding-bottom: 16px; }
-      .document-metadata { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 18px 0 22px; }
-      .document-metadata div { min-width: 180px; }
-      .muted, .sku, .batch { color: #6b7280; }
-      .batch, .packing-batch { font-size: 10px; margin-top: 2px; }
+const DEFAULT_STYLESHEET = `
+      @page { size: A4; margin: 0 0 8mm 0; @bottom-right { color: #6b7280; content: "Seite " counter(page) " von " counter(pages); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 7.5pt; padding-right: 20mm; vertical-align: top; } }
+      :root { --accent: #111827; --text: #1f2937; --muted: #6b7280; --line: #d1d5db; --table-head: #f3f4f6; --page-x: 20mm; --page-top: 18mm; --footer-height: 30mm; }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body { color: var(--text); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+      .page { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: var(--page-top) var(--page-x) calc(var(--footer-height) + 8mm); }
+      .letterhead { margin-bottom: 14mm; min-height: 16mm; }
+      .logo { display: block; height: 22mm; max-width: 90mm; object-fit: contain; object-position: left center; width: auto; }
+      .logo-text { color: var(--accent); font-size: 20pt; font-weight: 700; letter-spacing: 0.02em; }
+      .document-head { break-inside: avoid; display: flex; gap: 12mm; justify-content: space-between; margin-bottom: 14mm; page-break-inside: avoid; }
+      .recipient { flex: 1 1 0; font-style: normal; padding-top: 9mm; }
+      .document-info { flex: 0 0 78mm; }
+      h1 { color: var(--accent); font-size: 16pt; font-weight: 400; letter-spacing: 0.08em; margin: 0 0 3mm; text-transform: uppercase; }
+      h2 { break-after: avoid; font-size: 10pt; margin: 8mm 0 2mm; page-break-after: avoid; }
+      .document-metadata { border-collapse: collapse; width: 100%; }
+      .document-metadata th, .document-metadata td { border: 0; font-weight: 400; padding: 0; text-align: left; vertical-align: top; }
+      .document-metadata td { text-align: right; }
+      .muted, .sku, .batch { color: var(--muted); }
+      .batch, .packing-batch { font-size: 8pt; margin-top: 1mm; }
       .packing-batch { display: flex; gap: 12px; justify-content: space-between; }
       table { border-collapse: collapse; page-break-inside: auto; width: 100%; }
       thead { display: table-header-group; }
       tfoot { display: table-footer-group; }
       tbody { page-break-inside: auto; }
       tr { break-inside: avoid; page-break-inside: avoid; }
-      th { background: #f3f4f6; font-size: 10px; text-align: left; text-transform: uppercase; }
-      th, td { border-bottom: 1px solid #d1d5db; padding: 8px 6px; vertical-align: top; }
+      .items th { background: var(--table-head); font-weight: 700; text-align: left; }
+      .items th.number { text-align: right; }
+      .items th, .items td { padding: 2.5mm 2mm; vertical-align: top; }
+      .items tbody.lines td { border-bottom: 1px solid var(--line); }
       .number { text-align: right; white-space: nowrap; }
-      .recipient, .tax-compliance, .totals { break-inside: avoid; page-break-inside: avoid; }
-      .totals { margin-left: auto; margin-top: 16px; width: 260px; }
-      .totals td { border: 0; padding: 3px 0; }
-      .totals tr:last-child td { border-top: 2px solid #111827; font-size: 14px; font-weight: 700; padding-top: 7px; }
-      footer { border-top: 1px solid #d1d5db; break-inside: avoid; color: #6b7280; font-size: 9px; margin-top: 28px; page-break-inside: avoid; padding-top: 10px; }
-    </style>
+      .money { white-space: nowrap; }
+      .items tbody.totals td { padding-bottom: 1.5mm; padding-top: 1.5mm; }
+      .items tbody.totals tr:first-child td { padding-top: 3mm; }
+      .items tbody.totals tr.grand-total td.label, .items tbody.totals tr.grand-total td.number { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); font-weight: 700; padding-bottom: 2mm; padding-top: 2mm; }
+      .payment-terms { margin-top: 10mm; white-space: pre-line; }
+      .recipient, .tax-compliance, .payment-terms, .items tbody.totals { break-inside: avoid; page-break-inside: avoid; }
+      .page-footer { align-items: flex-start; bottom: 4mm; color: var(--text); display: flex; font-size: 8pt; gap: 8mm; left: var(--page-x); line-height: 1.35; position: fixed; right: var(--page-x); }
+      .footer-column { flex: 1 1 0; }
+      .footer-heading { color: var(--muted); }
+`;
+/**
+ * `includeLegalDetails` adds UID, company register, contact and bank details
+ * to the footer (financial documents); packing lists show only the sender.
+ */
+const createDocumentLayout = (merchant, settings, includeLegalDetails, theme = {}) => ({ body, documentTitle, metadata, number, pageTitle, recipient }) => `<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <title>${(0, html_utils_1.escapeHtml)(pageTitle)} ${(0, html_utils_1.escapeHtml)(number)}</title>
+    <style>${DEFAULT_STYLESHEET}${theme.stylesheet ?? ""}</style>
   </head>
   <body>
-    <section class="header">
-      <div><h1>${(0, html_utils_1.escapeHtml)(documentTitle)}</h1><div class="muted">${(0, html_utils_1.escapeHtml)(number)}</div></div>
-      <div><strong>${(0, html_utils_1.escapeHtml)(merchant.legal_name)}</strong><br />${renderMerchantAddress(merchant)}</div>
-    </section>
-    <section class="document-metadata">${renderMetadata(metadata)}</section>
-    ${body}
-    <footer>${renderMerchantFooter(merchant, includeLegalDetails)}</footer>
+    <footer class="page-footer">${renderMerchantFooter(merchant, includeLegalDetails)}</footer>
+    <main class="page">
+      <header class="letterhead">${renderLetterhead(merchant, settings)}</header>
+      <section class="document-head">
+        <address class="recipient">${recipient ?? ""}</address>
+        <div class="document-info">
+          <h1>${(0, html_utils_1.escapeHtml)(documentTitle)}</h1>
+          <table class="document-metadata"><tbody>${renderMetadata(metadata)}</tbody></table>
+        </div>
+      </section>
+      ${body}
+    </main>
   </body>
 </html>`;
 exports.createDocumentLayout = createDocumentLayout;

package/dist/documents/templates/packing-list.js

@@ -10,15 +10,15 @@ const renderBatchAllocations = (line, timeZone) => {
     return line.batch_allocations
         .map((allocation) => `<div class="packing-batch">
         <strong>${(0, html_utils_1.escapeHtml)(allocation.lot_number)}</strong>
-        <span>MHD: ${(0, format_1.formatDate)(allocation.expiry_date, { timeZone })}</span>
+        <span>MHD: ${(0, html_utils_1.escapeHtml)((0, format_1.formatDocumentDate)(allocation.expiry_date, timeZone))}</span>
         <span>Menge: ${(0, html_utils_1.escapeHtml)(allocation.quantity)}</span>
       </div>`)
         .join("");
 };
 const renderLines = (input, timeZone) => input.lines
     .map((line) => `<tr>
-        <td>
-          <strong>${(0, html_utils_1.escapeHtml)(line.title)}</strong>
+        <td class="item">
+          <div class="item-title">${(0, html_utils_1.escapeHtml)(line.title)}</div>
           ${line.sku ? `<div class="sku">SKU: ${(0, html_utils_1.escapeHtml)(line.sku)}</div>` : ""}
         </td>
         <td>${renderBatchAllocations(line, timeZone)}</td>
@@ -26,12 +26,13 @@ const renderLines = (input, timeZone) => input.lines
       </tr>`)
     .join("");
 const renderPackingList = (input, layout, timeZone) => layout({
-    body: `<table>
-      <thead><tr><th>Bezeichnung</th><th>Charge</th><th class="number">Benötigte Menge</th></tr></thead>
-      <tbody>${renderLines(input, timeZone)}</tbody>
+    body: `<table class="items packing-items">
+      <thead><tr><th class="item">Bezeichnung</th><th>Charge</th><th class="number">Benötigte Menge</th></tr></thead>
+      <tbody class="lines">${renderLines(input, timeZone)}</tbody>
     </table>`,
     documentTitle: "Packliste",
     metadata: [
+        { label: "Packlistennummer", value: input.document.number },
         {
             label: "Bestellung",
             value: (0, html_utils_1.formatOrderReference)(input.order.display_id),
@@ -39,11 +40,12 @@ const renderPackingList = (input, layout, timeZone) => layout({
         { label: "Fulfillment", value: input.fulfillment.id },
         {
             label: "Erstellungsdatum",
-            value: (0, format_1.formatDate)(input.document.generated_at, { timeZone }),
+            value: (0, format_1.formatDocumentDate)(input.document.generated_at, timeZone),
         },
         { label: "Lagerplatz", value: input.fulfillment.location_name },
     ],
     number: input.document.number,
     pageTitle: "Packliste",
+    recipient: null,
 });
 exports.renderPackingList = renderPackingList;

package/dist/documents/types/documents.d.ts

@@ -161,11 +161,28 @@ export type DocumentMerchantOption = {
     };
     vatNumber?: string;
 };
+/**
+ * The Documents settings (Admin -> "Hartl Services Plugins" -> Dokumente) a
+ * render needs, read when a document is rendered. Not part of the stored
+ * snapshot: a regenerated document shows the current values.
+ */
+export type DocumentRenderSettings = {
+    /**
+     * The uploaded logo as a `data:` URL, ready for `<img src>`; `null` when no
+     * logo is set or it could not be loaded (the document then shows the
+     * merchant's legal name instead).
+     */
+    logo_src: string | null;
+    /** Payment terms printed below the totals of an invoice; `null` = none. */
+    payment_terms: string | null;
+};
 export type FinancialDocumentRenderInput = DocumentTemplateInput & {
     merchant: DocumentMerchant;
+    settings: DocumentRenderSettings;
 };
 export type PackingListRenderInput = PackingListTemplateInput & {
     merchant: DocumentMerchant;
+    settings: DocumentRenderSettings;
 };
 export type DocumentRenderInput = FinancialDocumentRenderInput | PackingListRenderInput;
 export type DocumentPdfOptions = {

package/dist/documents/types/html-factory.d.ts

@@ -5,3 +5,4 @@ import type { DocumentRenderInput } from "./documents";
  */
 export type DocumentHtmlFactory = (input: DocumentRenderInput) => string | Promise<string>;
 export declare const defineDocumentHtmlFactory: (factory: DocumentHtmlFactory) => DocumentHtmlFactory;
+export type { DocumentTheme } from "../templates/layout";

package/dist/email/types/shop-configuration.d.ts

@@ -1,3 +1,4 @@
+import type { ShopMasterData } from "../../public";
 import type { EmailKind } from "./email-kinds";
 import type { EmailRenderDataMap } from "./template-data";
 export type EmailTemplateContent = Readonly<{
@@ -5,10 +6,22 @@ export type EmailTemplateContent = Readonly<{
     subject: string;
     text: string;
 }>;
+/**
+ * The shop's master data ("Shop-Stammdaten") plus the `logo` URL of the
+ * E-Mail settings, read when the mail is sent. Every field may be missing; a
+ * layout shows what is there instead of failing.
+ */
+export type EmailShopDetails = Readonly<ShopMasterData & {
+    logo?: string;
+}>;
+/** Who reads a mail: a customer or the shop's own team. */
+export type EmailAudience = "customer" | "shop";
 export type EmailLayout = (input: Readonly<{
+    audience: EmailAudience;
     bodyHtml: string;
     preheader: string;
     subject: string;
+    shop: EmailShopDetails;
 }>) => string;
 export type EmailRendererMap = {
     readonly [Kind in EmailKind]: (data: EmailRenderDataMap[Kind]) => EmailTemplateContent;
@@ -19,6 +32,13 @@ export type EmailRendererMap = {
  * partial `renderers` map replaces only the listed kinds.
  */
 export type ShopEmailConfiguration = Readonly<{
+    /**
+     * Link to an order in the Medusa Admin; the shop's order notification shows
+     * an "Im Admin öffnen" button only when it is set.
+     */
+    adminOrderUrl?: (input: Readonly<{
+        orderId: string;
+    }>) => string;
     affiliatePortalUrl: string;
     displayName: string;
     inviteUrl: (input: Readonly<{
@@ -30,6 +50,11 @@ export type ShopEmailConfiguration = Readonly<{
         locale: string | null;
     }>) => string;
     renderers?: Partial<EmailRendererMap>;
+    /**
+     * IANA time zone of dates in the default templates (e.g. the order time in
+     * the shop's order notification); without it they are left out.
+     */
+    timeZone?: string;
 }>;
 /** A `ShopEmailConfiguration` with the defaults merged in; used internally. */
 export type ResolvedShopEmailConfiguration = Readonly<Omit<ShopEmailConfiguration, "layout" | "renderers"> & {