@design.estate/dees-document 3.1.2 → 3.3.0

package/ts_web/elements/contentinvoice.ts

@@ -61,6 +61,14 @@ const accountingDocContents: Record<
     requestsPayment: true,
     printsRelatedDocuments: false,
   },
+  // a complete invoice in place of one that lacked a detail or stated one
+  // incorrectly (§ 31 Abs. 5 UStDV); it names that invoice in its own block,
+  // renderCorrection(), not among the related documents
+  "corrected-invoice": {
+    introStatement: "invoice@@introStatement",
+    requestsPayment: true,
+    printsRelatedDocuments: false,
+  },
   // reduces what the recipient owes: nothing to pay, and it names the document it corrects
   creditnote: {
     introStatement: "creditnote@@introStatement",
@@ -97,6 +105,160 @@ const relatedDocumentLabels: Record<
   references: "relatedDocument.references",
 };
 
+/** A column that takes the width of its widest cell. */
+interface IFittedColumn {
+  /** the cells of the column, the header included */
+  cellSelector: string;
+  /** the custom property the grid reads the column's width from */
+  widthProperty: string;
+  /** the width the column never goes below, in px */
+  minWidth: number;
+}
+
+/** The fitted columns of a table and the room the rest of a row takes. */
+interface IColumnLayout {
+  columns: IFittedColumn[];
+  /** the columns of fixed width, together, in px */
+  fixedWidth: number;
+  /** the least room the flexible column (the description) keeps, in px */
+  flexibleMinWidth: number;
+}
+
+/**
+ * The positions: number 40 px and VAT rate 50 px fixed, the description
+ * flexible with at least 120 px (as the grid in the styles declares); the
+ * last column is the one the sums line up with.
+ */
+const positionColumns: IColumnLayout = {
+  columns: [
+    { cellSelector: ".quantityCell", widthProperty: "--quantity-column-width", minWidth: 50 },
+    { cellSelector: ".unitCell", widthProperty: "--unit-column-width", minWidth: 50 },
+    { cellSelector: ".unitPriceCell", widthProperty: "--unit-price-column-width", minWidth: 100 },
+    { cellSelector: ".amountCell", widthProperty: "--amount-column-width", minWidth: 100 },
+  ],
+  fixedWidth: 90,
+  flexibleMinWidth: 120,
+};
+
+/**
+ * A reminder's claims, and its charges and sums, which share the last column;
+ * the document label is flexible with at least 150 px (as the grid in the
+ * styles declares).
+ */
+const reminderColumns: IColumnLayout = {
+  columns: [
+    { cellSelector: ".issueDateCell", widthProperty: "--issue-date-column-width", minWidth: 80 },
+    { cellSelector: ".dueDateCell", widthProperty: "--due-date-column-width", minWidth: 80 },
+    { cellSelector: ".grossCell", widthProperty: "--gross-column-width", minWidth: 100 },
+    { cellSelector: ".amountCell", widthProperty: "--amount-column-width", minWidth: 100 },
+  ],
+  fixedWidth: 0,
+  flexibleMinWidth: 150,
+};
+
+/** The smallest font a cell is set in to fit its column, in px. */
+const MIN_FITTED_FONT_SIZE = 8;
+
+/**
+ * The width a cell's text needs, its padding included, measured on the text
+ * itself, so it is the same whether the text fits its column or overflows it.
+ */
+const neededWidth = (cellArg: HTMLElement): number => {
+  const range = document.createRange();
+  range.selectNodeContents(cellArg);
+  const style = getComputedStyle(cellArg);
+  return Math.ceil(
+    range.getBoundingClientRect().width +
+      parseFloat(style.paddingLeft) +
+      parseFloat(style.paddingRight)
+  );
+};
+
+/**
+ * Widths for columns that want `wantedArg` and get at least `minimumsArg`,
+ * within `availableArg`: what is left above the minimums is granted in equal
+ * shares, a column never getting more than it wants.
+ */
+const shareWidth = (
+  wantedArg: number[],
+  minimumsArg: number[],
+  availableArg: number
+): number[] => {
+  const widths = [...minimumsArg];
+  let remaining =
+    availableArg - minimumsArg.reduce((sumArg, widthArg) => sumArg + widthArg, 0);
+  let open = widths.map((_, index) => index).filter((index) => wantedArg[index] > widths[index]);
+  while (open.length > 0 && remaining >= 1) {
+    const share = remaining / open.length;
+    for (const index of open) {
+      const grant = Math.min(share, wantedArg[index] - widths[index]);
+      widths[index] += grant;
+      remaining -= grant;
+    }
+    open = open.filter((index) => wantedArg[index] - widths[index] >= 1);
+  }
+  return widths.map((widthArg) => Math.floor(widthArg));
+};
+
+/**
+ * Sets a cell whose text is wider than its column in a smaller font, down to
+ * `MIN_FITTED_FONT_SIZE`, and lets it wrap within the column when even that
+ * is too wide.
+ */
+const fitCellText = (cellArg: HTMLElement, columnWidthArg: number): void => {
+  const needed = neededWidth(cellArg);
+  if (needed <= columnWidthArg) {
+    return;
+  }
+  const style = getComputedStyle(cellArg);
+  const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+  const fontSize =
+    (parseFloat(style.fontSize) * (columnWidthArg - padding)) / (needed - padding);
+  if (fontSize >= MIN_FITTED_FONT_SIZE) {
+    cellArg.style.fontSize = `${Math.floor(fontSize * 10) / 10}px`;
+    return;
+  }
+  cellArg.style.fontSize = `${MIN_FITTED_FONT_SIZE}px`;
+  cellArg.style.whiteSpace = "normal";
+  cellArg.style.overflowWrap = "anywhere";
+};
+
+/** The kind of a reminded document, as the claims table names it. */
+const claimDocumentLabels: Record<
+  plugins.tsclass.finance.TPaymentReminderClaim["documentType"],
+  plugins.shared.translation.TranslationKey
+> = {
+  invoice: "paymentReminder@@claim.invoice",
+  "corrected-invoice": "paymentReminder@@claim.correctedInvoice",
+  debitnote: "paymentReminder@@claim.debitnote",
+};
+
+/** The words for a detail of § 14 Abs. 4 Satz 1 UStG a corrected invoice supplies or corrects. */
+const correctionDetailLabels: Record<
+  plugins.tsclass.finance.TInvoiceMandatoryDetail,
+  plugins.shared.translation.TranslationKey
+> = {
+  parties: "correctedInvoice.detail.parties",
+  "supplier-tax-number": "correctedInvoice.detail.supplierTaxNumber",
+  "issue-date": "correctedInvoice.detail.issueDate",
+  "invoice-number": "correctedInvoice.detail.invoiceNumber",
+  "supply-description": "correctedInvoice.detail.supplyDescription",
+  "supply-date": "correctedInvoice.detail.supplyDate",
+  "net-amount": "correctedInvoice.detail.netAmount",
+  tax: "correctedInvoice.detail.tax",
+  "retention-note": "correctedInvoice.detail.retentionNote",
+  "special-case-detail": "correctedInvoice.detail.specialCaseDetail",
+};
+
+/** What was done with a detail: supplied when it was missing, corrected when it was incorrect. */
+const correctionDefectLabels: Record<
+  plugins.tsclass.finance.TInvoiceCorrection["defect"],
+  plugins.shared.translation.TranslationKey
+> = {
+  missing: "correctedInvoice.defect.missing",
+  incorrect: "correctedInvoice.defect.incorrect",
+};
+
 @customElement("dedocument-contentinvoice")
 export class DeContentInvoice extends DeesElement {
   public static demo = () => html`
@@ -135,6 +297,18 @@ export class DeContentInvoice extends DeesElement {
       : null;
   }
 
+  /** The payment reminder this content prints, or null. */
+  private get paymentReminder(): plugins.tsclass.finance.TPaymentReminder | null {
+    return plugins.shared.isPaymentReminder(this.letterData)
+      ? this.letterData
+      : null;
+  }
+
+  /** The currency of the letter's amounts: an accounting document's or a reminder's. */
+  private get currency(): string | undefined {
+    return this.accountingDoc?.currency ?? this.paymentReminder?.currency;
+  }
+
   /**
    * The document builds this element for every letter; one that is no
    * accounting document, and one of a type this version does not know, keep
@@ -174,7 +348,7 @@ export class DeContentInvoice extends DeesElement {
 
       .grid {
         display: grid;
-        grid-template-columns: 40px auto 50px 50px 100px 50px 100px;
+        grid-template-columns: 40px minmax(120px, 1fr) var(--quantity-column-width, 50px) var(--unit-column-width, 50px) var(--unit-price-column-width, 100px) 50px var(--amount-column-width, 100px);
       }
 
       .topLine {
@@ -194,6 +368,16 @@ export class DeContentInvoice extends DeesElement {
         border-right: none;
       }
 
+      /*
+       * the description takes the room the other columns leave, at least its
+       * minimum, and wraps within it, so a long one never widens the table
+       * beyond the page
+       */
+      .lineItem.descriptionCell {
+        white-space: normal;
+        overflow-wrap: anywhere;
+      }
+
       .value.rightAlign,
       .lineItem.rightAlign {
         text-align: right;
@@ -211,6 +395,36 @@ export class DeContentInvoice extends DeesElement {
         box-sizing: content-box;
       }
 
+      .claimGrid {
+        display: grid;
+        grid-template-columns: minmax(150px, 1fr) var(--issue-date-column-width, 80px) var(--due-date-column-width, 80px) var(--gross-column-width, 100px) var(--amount-column-width, 100px);
+      }
+
+      .chargeGrid {
+        display: grid;
+        grid-template-columns: auto var(--amount-column-width, 100px);
+      }
+
+      .chargeGrid.dataHeader {
+        margin-top: 12px;
+      }
+
+      /* a charge's description and basis wrap: the basis of default interest is longer than a line */
+      .lineItem.chargeText {
+        white-space: normal;
+      }
+
+      .chargeBasis {
+        margin-top: 2px;
+        font-size: 11px;
+        color: #555;
+      }
+
+      /* a provision is not split across lines */
+      .citation {
+        white-space: nowrap;
+      }
+
       .sums {
         margin-top: 5px;
         font-size: 12px;
@@ -220,7 +434,7 @@ export class DeContentInvoice extends DeesElement {
       .sums .sumline {
         margin-top: 3px;
         display: grid;
-        grid-template-columns: auto 100px;
+        grid-template-columns: auto var(--amount-column-width, 100px);
       }
 
       .sums .sumline .label {
@@ -264,6 +478,19 @@ export class DeContentInvoice extends DeesElement {
         margin-top: 4px;
       }
 
+      .correction {
+        margin-bottom: 12px;
+      }
+
+      .correctionTitle {
+        font-weight: bold;
+      }
+
+      .correctionDetails ul {
+        margin: 2px 0 0 0;
+        padding-left: 18px;
+      }
+
       .relatedDocuments .label {
         font-weight: bold;
       }
@@ -294,7 +521,7 @@ export class DeContentInvoice extends DeesElement {
    * an unknown or missing currency falls back to a plain decimal number.
    */
   protected formatPrice(value: number): string {
-    const currency = this.accountingDoc?.currency;
+    const currency = this.currency;
     const locale = localeForLanguage(this.documentSettings?.languageCode);
     if (currency) {
       try {
@@ -306,6 +533,39 @@ export class DeContentInvoice extends DeesElement {
     return new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
   }
 
+  /**
+   * Formats a quantity in the document's language with every decimal it
+   * carries: 12.5 prints as "12,5" in German and "12.5" in English, and no
+   * stated quantity is rounded. The decimals are those of the shortest
+   * representation of the number, the one `String()` gives, as the unit name
+   * counts them for its singular or plural.
+   */
+  protected formatQuantity(quantityArg: number): string {
+    const fractionDigits = plugins.shared.quantityFractionDigits(quantityArg);
+    return new Intl.NumberFormat(
+      localeForLanguage(this.documentSettings?.languageCode),
+      {
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+      }
+    ).format(quantityArg);
+  }
+
+  /** Formats a rate in percent, with as many decimals as it states, up to four. */
+  protected formatPercent(percentArg: number): string {
+    return new Intl.NumberFormat(
+      localeForLanguage(this.documentSettings?.languageCode),
+      { style: "percent", maximumFractionDigits: 4 }
+    ).format(percentArg / 100);
+  }
+
+  /** Formats a day in the document's language and date style. */
+  protected formatDay(timestampArg: number): string {
+    return new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+      dateStyle: this.documentSettings.dateStyle,
+    }).format(new Date(timestampArg));
+  }
+
   public getTotalNet = (): number => {
     let totalNet = 0;
 
@@ -485,24 +745,25 @@ export class DeContentInvoice extends DeesElement {
     }
   }
 
-  /** The due date, which only an accounting document has: it counts from its date. */
-  private renderPaymentTerms(
-    accountingDocArg: plugins.tsclass.finance.TAccountingDoc
-  ): TemplateResult {
+  /**
+   * The due date, which only an accounting document and a payment reminder
+   * have: it counts `dueInDays` from the letter's date.
+   */
+  private renderPaymentTerms(optionsArg: {
+    date: number;
+    dueInDays: number;
+    labelKey: plugins.shared.translation.TranslationKey;
+    textKey: plugins.shared.translation.TranslationKey;
+  }): TemplateResult {
     return html`<div class="infoBox">
       <div>
         <div>
-          <div class="label">
-            ${this.translateKey("invoice@@payment.terms")}
-          </div>
+          <div class="label">${this.translateKey(optionsArg.labelKey)}</div>
           <span>
-            ${this.translateKey("invoice@@payment.terms.direct")}
-            ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
-              dateStyle: this.documentSettings.dateStyle,
-            }).format(
-              new Date(accountingDocArg.date).setDate(
-                new Date(accountingDocArg.date).getDate() +
-                  accountingDocArg.dueInDays
+            ${this.translateKey(optionsArg.textKey)}
+            ${this.formatDay(
+              new Date(optionsArg.date).setDate(
+                new Date(optionsArg.date).getDate() + optionsArg.dueInDays
               )
             )}
           </span>
@@ -511,15 +772,39 @@ export class DeContentInvoice extends DeesElement {
     </div>`;
   }
 
-  private renderPaymentInfo(
-    accountingDocArg: plugins.tsclass.finance.TAccountingDoc
-  ): TemplateResult {
-    const bic = accountingDocArg.from.sepaConnection?.bic;
-    const name = accountingDocArg.from.name;
-    const iban = accountingDocArg.from.sepaConnection?.iban;
-    const currency = accountingDocArg.currency;
-    const totalGross = this.getTotalGross();
-    const reference = accountingDocArg.id;
+  /**
+   * The QR pay box. It is printed only when the payment has a valid EPC QR
+   * code: a euro amount to the sender's IBAN, which a document in another
+   * currency or without the sender's IBAN does not have.
+   */
+  private renderPaymentInfo(optionsArg: {
+    /** the sender, who is paid */
+    from: plugins.tsclass.business.TContact;
+    currency: string;
+    /** the amount to pay */
+    amount: number;
+    /** the number of the letter, the remittance information */
+    reference: string;
+  }): TemplateResult | null {
+    const bic = optionsArg.from.sepaConnection?.bic;
+    const name = optionsArg.from.name;
+    const iban = optionsArg.from.sepaConnection?.iban;
+    const currency = optionsArg.currency;
+    const totalGross = optionsArg.amount;
+    const reference = optionsArg.reference;
+    if (
+      typeof iban !== "string" ||
+      plugins.shared.buildEpcQrPayload({
+        bic,
+        name,
+        iban,
+        currency,
+        amount: totalGross,
+        remittanceInformation: reference,
+      }) === null
+    ) {
+      return null;
+    }
 
     return html`<div class="infoBox">
       <div>
@@ -539,6 +824,66 @@ export class DeContentInvoice extends DeesElement {
     </div>`;
   }
 
+  /**
+   * The reverse-charge statement. § 14a UStG requires the words
+   * "Steuerschuldnerschaft des Leistungsempfängers": Abs. 5 for a domestic
+   * supply whose recipient owes the tax under § 13b, Abs. 1 for a supply in
+   * another member state whose recipient owes the tax there, such as a
+   * business-to-business service under Art. 196 of the VAT Directive. They are
+   * printed on every reverse-charge document, and a document in another language adds its own
+   * line, in English "Reverse charge", the words of Art. 226 Nr. 11a of the VAT
+   * Directive (2006/112/EC).
+   */
+  private renderReverseChargeNote(): TemplateResult {
+    const localizedLine = this.translateKey("invoice@@vat.reverseCharge.note");
+    return html`<div class="taxNote">
+      <div>${plugins.shared.translation.REVERSE_CHARGE_STATUTORY_PHRASE_DE}</div>
+      ${localizedLine === plugins.shared.translation.REVERSE_CHARGE_STATUTORY_PHRASE_DE
+        ? null
+        : html`<div>${localizedLine}</div>`}
+    </div>`;
+  }
+
+  /**
+   * What makes a corrected invoice a correction (§ 31 Abs. 5 UStDV): its
+   * title, the invoice it corrects by number and issue date when the document
+   * states them ("spezifisch und eindeutig", Satz 2), and the details it
+   * supplies or corrects, in words. A received corrected invoice may name
+   * neither; then only the title is printed, and no reference is made up.
+   */
+  private renderCorrection(): TemplateResult | null {
+    const accountingDoc = this.accountingDoc;
+    if (accountingDoc?.accountingDocType !== "corrected-invoice") {
+      return null;
+    }
+    const reference = accountingDoc.correctedInvoice;
+    const corrections = accountingDoc.corrections ?? [];
+    return html`<div class="correction">
+      <div class="correctionTitle">
+        ${this.translateKey("correctedInvoice.title")}${reference
+          ? html` ${this.translateKey("correctedInvoice.reference")}
+            ${reference.documentId}${reference.issueDate !== undefined
+              ? html` ${this.translateKey("correctedInvoice.referenceDate")}
+                ${this.formatDay(reference.issueDate)}`
+              : null}`
+          : null}
+      </div>
+      ${corrections.length > 0
+        ? html`<div class="correctionDetails">
+            <div>${this.translateKey("correctedInvoice.corrections")}:</div>
+            <ul>
+              ${corrections.map(
+                (correctionArg) => html`<li>
+                  ${this.translateKey(correctionDetailLabels[correctionArg.detail])}:
+                  ${this.translateKey(correctionDefectLabels[correctionArg.defect])}
+                </li>`
+              )}
+            </ul>
+          </div>`
+        : null}
+    </div>`;
+  }
+
   /** The earlier documents a correction answers, by number and, when known, by date. */
   private renderRelatedDocuments(): TemplateResult | null {
     const relatedDocuments = this.accountingDoc?.relatedDocuments;
@@ -572,8 +917,8 @@ export class DeContentInvoice extends DeesElement {
    * pages and cannot split one, so a note is handed over token by token: a
    * paragraph in one piece could be taller than a page and would never fit.
    */
-  private renderNotes(): TemplateResult | null {
-    const notes = (this.accountingDoc?.notes ?? [])
+  private renderNotes(notesArg: string[] | undefined): TemplateResult | null {
+    const notes = (notesArg ?? [])
       .filter((noteArg): noteArg is string => typeof noteArg === "string")
       .map((noteArg) => noteArg.replace(/\r\n?/g, "\n").trim())
       .filter((noteArg) => noteArg.length > 0);
@@ -588,6 +933,240 @@ export class DeContentInvoice extends DeesElement {
     )}`;
   }
 
+  /**
+   * The document a reminder claims, as the claims table and the charges name
+   * it: its kind and its number.
+   */
+  private claimLabel(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder,
+    documentIdArg: string
+  ): string {
+    const claim = reminderArg.claims.find(
+      (claimArg) => claimArg.documentId === documentIdArg
+    );
+    if (!claim) {
+      return documentIdArg;
+    }
+    // a kind this version does not know is named as an invoice, as the letterhead and the content do
+    const label =
+      claimDocumentLabels[claim.documentType] ?? claimDocumentLabels.invoice;
+    return `${this.translateKey(label)} ${documentIdArg}`;
+  }
+
+  /**
+   * The ground of the claim: every reminded document with its number, its
+   * date, the date it fell due when it stated one, its gross total and what is
+   * still open on it.
+   */
+  private renderReminderClaims(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder
+  ): TemplateResult {
+    return html`<div class="claimGrid topLine dataHeader">
+        <div class="lineItem descriptionCell">
+          ${this.translateKey("paymentReminder@@claim.document")}
+        </div>
+        <div class="lineItem rightAlign issueDateCell">
+          ${this.translateKey("paymentReminder@@claim.issueDate")}
+        </div>
+        <div class="lineItem rightAlign dueDateCell">
+          ${this.translateKey("paymentReminder@@claim.dueDate")}
+        </div>
+        <div class="lineItem rightAlign grossCell">
+          ${this.translateKey("paymentReminder@@claim.totalGross")}
+        </div>
+        <div class="lineItem rightAlign amountCell">
+          ${this.translateKey("paymentReminder@@claim.outstanding")}
+        </div>
+      </div>
+      ${reminderArg.claims.map(
+        (claimArg) => html`<div class="claimGrid needsDataHeader">
+          <div class="lineItem descriptionCell">
+            ${this.claimLabel(reminderArg, claimArg.documentId)}
+          </div>
+          <div class="lineItem rightAlign issueDateCell">
+            ${this.formatDay(claimArg.issueDate)}
+          </div>
+          <div class="lineItem rightAlign dueDateCell">
+            ${claimArg.dueDate !== undefined
+              ? this.formatDay(claimArg.dueDate)
+              : "–"}
+          </div>
+          <div class="lineItem rightAlign grossCell">
+            ${this.formatPrice(claimArg.totalGross)}
+          </div>
+          <div class="lineItem rightAlign amountCell">
+            ${this.formatPrice(claimArg.outstandingAmount)}
+          </div>
+        </div>`
+      )}`;
+  }
+
+  /**
+   * What a charge rests on, as the reminder states it: default interest its
+   * computation (principal, rate a year with the base rate and the surcharge
+   * points of § 288 Abs. 1 or 2 BGB, first and last day), the default lump sum
+   * its provision, and every charge the claim it accrues on. A cost with lump
+   * sums credited against it lists them (§ 288 Abs. 5 Satz 3 BGB); its amount
+   * is already the cost less them.
+   */
+  private renderChargeBasis(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder,
+    chargeArg: plugins.tsclass.finance.TPaymentReminderCharge
+  ): TemplateResult | null {
+    switch (chargeArg.chargeType) {
+      case "default-interest": {
+        const interest = chargeArg.interest;
+        return html`<div class="chargeBasis">
+          ${this.claimLabel(reminderArg, chargeArg.claimDocumentId)}:
+          ${this.formatPrice(interest.principal)} ×
+          ${this.formatPercent(interest.ratePercent)}
+          ${this.translateKey("paymentReminder@@interest.perYear")}
+          (${this.translateKey("paymentReminder@@interest.baseRate")}
+          ${this.formatPercent(interest.baseRatePercent)}
+          ${this.translateKey("paymentReminder@@interest.plus")}
+          ${interest.surchargePoints}
+          ${this.translateKey("paymentReminder@@interest.points")},
+          <span class="citation"
+            >${plugins.shared.defaultInterestCitations[interest.legalBasis]}</span
+          >),
+          ${this.formatDay(interest.from)} – ${this.formatDay(interest.to)}
+        </div>`;
+      }
+      case "default-lump-sum":
+        return html`<div class="chargeBasis">
+          ${this.claimLabel(reminderArg, chargeArg.claimDocumentId)},
+          <span class="citation"
+            >${plugins.shared.DEFAULT_LUMP_SUM_CITATION}</span
+          >
+        </div>`;
+      case "reminder-fee":
+      case "other-cost": {
+        const offsets = chargeArg.lumpSumOffsets ?? [];
+        if (chargeArg.claimDocumentId === undefined && offsets.length === 0) {
+          return null;
+        }
+        return html`${chargeArg.claimDocumentId !== undefined
+          ? html`<div class="chargeBasis">
+              ${this.claimLabel(reminderArg, chargeArg.claimDocumentId)}
+            </div>`
+          : null}
+        ${offsets.map(
+          (offsetArg) => html`<div class="chargeBasis">
+            ${this.translateKey("paymentReminder@@charge.lumpSumOffset")}
+            ${this.claimLabel(reminderArg, offsetArg.claimDocumentId)}:
+            ${this.formatPrice(offsetArg.amount)}
+            (<span class="citation"
+              >${plugins.shared.LUMP_SUM_OFFSET_CITATION}</span
+            >)
+          </div>`
+        )}`;
+      }
+    }
+  }
+
+  /** One row per charge: its description, what it rests on, and its amount. */
+  private renderReminderCharges(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder
+  ): TemplateResult | null {
+    if (reminderArg.charges.length === 0) {
+      return null;
+    }
+    return html`<div class="chargeGrid topLine dataHeader">
+        <div class="lineItem">
+          ${this.translateKey("paymentReminder@@charge.description")}
+        </div>
+        <div class="lineItem rightAlign amountCell">
+          ${this.translateKey("paymentReminder@@charge.amount")}
+        </div>
+      </div>
+      ${reminderArg.charges.map(
+        (chargeArg) => html`<div class="chargeGrid needsDataHeader">
+          <div class="lineItem chargeText">
+            <div>${chargeArg.description}</div>
+            ${this.renderChargeBasis(reminderArg, chargeArg)}
+          </div>
+          <div class="lineItem rightAlign amountCell">
+            ${this.formatPrice(chargeArg.amount)}
+          </div>
+        </div>`
+      )}`;
+  }
+
+  /** The sums of a reminder: the open claims, the charges and the total payable, without VAT. */
+  private renderReminderSums(
+    totalsArg: plugins.shared.IPaymentReminderTotals,
+    hasChargesArg: boolean
+  ): TemplateResult {
+    return html`<div class="sums">
+      <div class="sumline">
+        <div class="label">
+          ${this.translateKey("paymentReminder@@paymentReminder.sum.claims")}
+        </div>
+        <div class="value rightAlign amountCell">
+          ${this.formatPrice(totalsArg.claimsOutstanding)}
+        </div>
+      </div>
+      ${hasChargesArg
+        ? html`<div class="sumline">
+            <div class="label">
+              ${this.translateKey("paymentReminder@@paymentReminder.sum.charges")}
+            </div>
+            <div class="value rightAlign amountCell">
+              ${this.formatPrice(totalsArg.charges)}
+            </div>
+          </div>`
+        : null}
+      <div class="sumline">
+        <div class="label">
+          ${this.translateKey("paymentReminder@@paymentReminder.sum.payable")}
+        </div>
+        <div class="value value--total rightAlign amountCell">
+          ${this.formatPrice(totalsArg.payable)}
+        </div>
+      </div>
+    </div>`;
+  }
+
+  /**
+   * A payment reminder: the issuer's intro or the standard one, the reminded
+   * documents, the charges, the sums, the notes, the new payment deadline and
+   * the QR pay box for the total payable with the reminder's number.
+   */
+  private renderPaymentReminder(
+    reminderArg: plugins.tsclass.finance.TPaymentReminder
+  ): TemplateResult {
+    const totals = plugins.shared.getPaymentReminderTotals(reminderArg);
+    return html`
+      <div>
+        ${reminderArg.topText ??
+        this.translateKey("paymentReminder@@introStatement")}
+      </div>
+      ${this.renderReminderClaims(reminderArg)}
+      ${this.renderReminderCharges(reminderArg)}
+      ${this.renderReminderSums(totals, reminderArg.charges.length > 0)}
+      <div class="divider"></div>
+
+      <!-- NOTES -->
+      ${this.renderNotes(reminderArg.notes)}
+
+      <!-- PAYMENT DEADLINE -->
+      ${this.renderPaymentTerms({
+        date: reminderArg.date,
+        dueInDays: reminderArg.dueInDays,
+        labelKey: "paymentReminder@@paymentReminder.deadline",
+        textKey: "paymentReminder@@paymentReminder.deadline.text",
+      })}
+
+      <!-- PAYMENT INFO -->
+      ${this.renderPaymentInfo({
+        from: reminderArg.from,
+        currency: reminderArg.currency,
+        amount: totals.payable,
+        reference: reminderArg.id,
+      })}
+    `;
+  }
+
   private renderReferencedContract(): TemplateResult | null {
     return null;
     // return this.documentSettings.enableInvoiceContractRefSection &&
@@ -610,29 +1189,42 @@ export class DeContentInvoice extends DeesElement {
 
   public async attachInvoiceDom() {
     const contentNodes = await this.getContentNodes();
+    const paymentReminder = this.paymentReminder;
+    if (paymentReminder) {
+      render(this.renderPaymentReminder(paymentReminder), contentNodes.currentContent);
+      this.fitColumns(
+        contentNodes.currentContent,
+        ".claimGrid.dataHeader",
+        reminderColumns
+      );
+      return;
+    }
     const accountingDoc = this.accountingDoc;
     render(
       html`
+        ${this.renderCorrection()}
         <div>${this.translateKey(this.docContent.introStatement)}</div>
         ${this.renderRelatedDocuments()}
         <div class="grid topLine dataHeader">
           <div class="lineItem rightAlign">
             ${this.translateKey("invoice@@item.position")}
           </div>
-          <div class="lineItem">
+          <div class="lineItem descriptionCell">
             ${this.translateKey("invoice@@description")}
           </div>
-          <div class="lineItem rightAlign">
+          <div class="lineItem rightAlign quantityCell">
             ${this.translateKey("invoice@@quantity")}
           </div>
-          <div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
-          <div class="lineItem rightAlign">
+          <div class="lineItem unitCell">
+            ${this.translateKey("invoice@@unit.type")}
+          </div>
+          <div class="lineItem rightAlign unitPriceCell">
             ${this.translateKey("invoice@@price.unit.net")}
           </div>
           <div class="lineItem rightAlign">
             ${this.translateKey("invoice@@vat.short")}
           </div>
-          <div class="lineItem rightAlign">
+          <div class="lineItem rightAlign amountCell">
             ${this.translateKey("invoice@@price.total.net")}
           </div>
         </div>
@@ -640,16 +1232,24 @@ export class DeContentInvoice extends DeesElement {
           (invoiceItem, index) => html`
             <div class="grid needsDataHeader">
               <div class="lineItem rightAlign">${index + 1}</div>
-              <div class="lineItem">${invoiceItem.name}</div>
-              <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
-              <div class="lineItem">${invoiceItem.unitType}</div>
-              <div class="lineItem rightAlign">
+              <div class="lineItem descriptionCell">${invoiceItem.name}</div>
+              <div class="lineItem rightAlign quantityCell">
+                ${this.formatQuantity(invoiceItem.unitQuantity)}
+              </div>
+              <div class="lineItem unitCell">
+                ${plugins.shared.unitName(
+                  this.documentSettings.languageCode,
+                  invoiceItem.unitType,
+                  invoiceItem.unitQuantity
+                )}
+              </div>
+              <div class="lineItem rightAlign unitPriceCell">
                 ${this.formatPrice(invoiceItem.unitNetPrice)}
               </div>
               <div class="lineItem rightAlign">
                 ${invoiceItem.vatPercentage}%
               </div>
-              <div class="lineItem rightAlign">
+              <div class="lineItem rightAlign amountCell">
                 ${this.formatPrice(
                   invoiceItem.unitQuantity * invoiceItem.unitNetPrice
                 )}
@@ -662,7 +1262,7 @@ export class DeContentInvoice extends DeesElement {
             <div class="label">
               ${this.translateKey("invoice@@sum.total.net")}
             </div>
-            <div class="value value--total rightAlign">
+            <div class="value value--total rightAlign amountCell">
               ${this.formatPrice(this.getTotalNet())}
             </div>
           </div>
@@ -684,7 +1284,7 @@ export class DeContentInvoice extends DeesElement {
                       `
                     : html``}
                 </div>
-                <div class="value rightAlign">
+                <div class="value rightAlign amountCell">
                   ${this.formatPrice(vatGroupArg.vatAmountSum)}
                 </div>
               </div>
@@ -692,36 +1292,100 @@ export class DeContentInvoice extends DeesElement {
           })}
           <div class="sumline">
             <div class="label">${this.translateKey("invoice@@totalGross")}</div>
-            <div class="value value--total rightAlign">
+            <div class="value value--total rightAlign amountCell">
               ${this.formatPrice(this.getTotalGross())}
             </div>
           </div>
         </div>
         <div class="divider"></div>
 
-        ${accountingDoc?.reverseCharge
-          ? html`<div class="taxNote">
-              ${this.translateKey("invoice@@vat.reverseCharge.note")}
-            </div>`
-          : ``}
+        ${accountingDoc?.reverseCharge ? this.renderReverseChargeNote() : ``}
 
         <!-- REFERENCED CONTRACT -->
         ${this.renderReferencedContract()}
 
         <!-- NOTES -->
-        ${this.renderNotes()}
+        ${this.renderNotes(accountingDoc?.notes)}
 
         <!-- PAYMENT TERMS -->
         ${accountingDoc && this.docContent.requestsPayment
-          ? this.renderPaymentTerms(accountingDoc)
+          ? this.renderPaymentTerms({
+              date: accountingDoc.date,
+              dueInDays: accountingDoc.dueInDays,
+              labelKey: "invoice@@payment.terms",
+              textKey: "invoice@@payment.terms.direct",
+            })
           : null}
 
         <!-- PAYMENT INFO -->
         ${accountingDoc && this.docContent.requestsPayment
-          ? this.renderPaymentInfo(accountingDoc)
+          ? this.renderPaymentInfo({
+              from: accountingDoc.from,
+              currency: accountingDoc.currency,
+              amount: this.getTotalGross(),
+              reference: accountingDoc.id,
+            })
           : null}
       `,
       contentNodes.currentContent
     );
+    this.fitColumns(
+      contentNodes.currentContent,
+      ".grid.dataHeader",
+      positionColumns
+    );
+  }
+
+  /**
+   * Sizes the columns of a table to their widest cell. Every row is a grid of
+   * its own, so the rows only line up when a column has one width for all of
+   * them; each page renders every row before it is trimmed, so every page
+   * measures the same widths.
+   *
+   * A column is never narrower than its minimum. The widths the columns ask
+   * for beyond their minimums are granted out of the row's width less its
+   * fixed columns and the minimum of its flexible column (the description),
+   * in equal shares, so the table always fits the page. A cell whose text is
+   * still wider than its column, such as an amount beyond hundreds of
+   * billions, is set in a smaller font, down to 8 px, and wraps inside its
+   * column once that is not enough, so it never runs into its neighbour.
+   */
+  private fitColumns(
+    containerArg: HTMLElement,
+    headerRowSelectorArg: string,
+    layoutArg: IColumnLayout
+  ): void {
+    const cellsOf = (columnArg: IFittedColumn): HTMLElement[] =>
+      Array.from(containerArg.querySelectorAll<HTMLElement>(columnArg.cellSelector));
+    for (const column of layoutArg.columns) {
+      this.style.removeProperty(column.widthProperty);
+      for (const cell of cellsOf(column)) {
+        cell.style.removeProperty("font-size");
+        cell.style.removeProperty("white-space");
+        cell.style.removeProperty("overflow-wrap");
+      }
+    }
+    const headerRow = containerArg.querySelector<HTMLElement>(headerRowSelectorArg);
+    if (!headerRow || headerRow.clientWidth === 0) {
+      // not laid out: the columns keep their minimums
+      return;
+    }
+    const wanted = layoutArg.columns.map((columnArg) =>
+      cellsOf(columnArg).reduce(
+        (widestArg, cellArg) => Math.max(widestArg, neededWidth(cellArg)),
+        columnArg.minWidth
+      )
+    );
+    const widths = shareWidth(
+      wanted,
+      layoutArg.columns.map((columnArg) => columnArg.minWidth),
+      headerRow.clientWidth - layoutArg.fixedWidth - layoutArg.flexibleMinWidth
+    );
+    layoutArg.columns.forEach((columnArg, index) => {
+      this.style.setProperty(columnArg.widthProperty, `${widths[index]}px`);
+      for (const cell of cellsOf(columnArg)) {
+        fitCellText(cell, widths[index]);
+      }
+    });
   }
 }