@design.estate/dees-document 1.6.8 → 2.0.2

package/ts_web/elements/contentinvoice.ts

@@ -9,23 +9,21 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager,
-  unsafeCSS,
   render,
   domtools,
-} from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-
-import { dedocumentSharedStyle } from '../style.js';
+} from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";
 
+import { dedocumentSharedStyle } from "../style.js";
+import type { TranslationKey } from "ts_shared/translation.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dedocument-contentinvoice': DeContentInvoice;
+    "dedocument-contentinvoice": DeContentInvoice;
   }
 }
 
-@customElement('dedocument-contentinvoice')
+@customElement("dedocument-contentinvoice")
 export class DeContentInvoice extends DeesElement {
   public static demo = () => html`
     <style>
@@ -43,13 +41,13 @@ export class DeContentInvoice extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.finance.TInvoice;
 
   @property({
     type: Object,
     reflect: true,
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -60,15 +58,96 @@ export class DeContentInvoice extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
-      :host {
-        color: #333;
-      }
-
       .trimmedContent {
         display: none;
       }
 
-      .repeatedContent {
+      .grid {
+        display: grid;
+        grid-template-columns: 40px auto 50px 50px 100px 50px 100px;
+      }
+
+      .topLine {
+        margin-top: 5px;
+        background: #e7e7e7;
+        font-weight: bold;
+      }
+
+      .lineItem {
+        font-size: 12px;
+        padding: 5px;
+        border-right: 1px dashed #ccc;
+        white-space: nowrap;
+      }
+
+      .lineItem:last-child {
+        border-right: none;
+      }
+
+      .value.rightAlign,
+      .lineItem.rightAlign {
+        text-align: right;
+      }
+
+      .invoiceLine {
+        background: #ffffff00;
+        border-bottom: 1px dotted #ccc;
+      }
+
+      .invoiceLine.highlighted {
+        transition: background 0.2s;
+        background: #ffc18f;
+        border: 1px solid #ff9d4d;
+        box-sizing: content-box;
+      }
+
+      .sums {
+        margin-top: 5px;
+        font-size: 12px;
+        padding-left: 50%;
+      }
+
+      .sums .sumline {
+        margin-top: 3px;
+        display: grid;
+        grid-template-columns: auto 100px;
+      }
+
+      .sums .sumline .label {
+        padding: 2px 5px;
+        border-right: 1px solid #ccc;
+        text-align: right;
+        font-weight: bold;
+      }
+
+      .sums .sumline .value {
+        padding: 2px 5px;
+      }
+
+      .sums .sumline .value--total {
+        font-weight: bold;
+      }
+
+      .divider {
+        margin-top: 8px;
+        border-top: 1px dotted #ccc;
+      }
+
+      .taxNote {
+        font-size: 12px;
+        padding: 4px;
+        background: #eeeeeb;
+        text-align: center;
+      }
+
+      .infoBox {
+        margin-top: 22px;
+        line-height: 1.4em;
+      }
+
+      .infoBox .label {
+        padding-bottom: 2px;
+        font-weight: bold;
       }
     `,
   ];
@@ -81,6 +160,17 @@ export class DeContentInvoice extends DeesElement {
     `;
   }
 
+  protected formatPrice(
+    value: number,
+    currency = "EUR",
+    lang = "de-DE"
+  ): string {
+    return new Intl.NumberFormat(lang, {
+      style: "currency",
+      currency,
+    }).format(value);
+  }
+
   public getTotalNet = (): number => {
     let totalNet = 0;
 
@@ -88,7 +178,7 @@ export class DeContentInvoice extends DeesElement {
       return totalNet;
     }
 
-    for (const item of this.letterData.content.invoiceData.items) {
+    for (const item of this.letterData.items) {
       totalNet += item.unitNetPrice * item.unitQuantity;
     }
     return totalNet;
@@ -110,7 +200,7 @@ export class DeContentInvoice extends DeesElement {
   public getVatGroups = () => {
     const vatGroups: {
       vatPercentage: number;
-      items: plugins.tsclass.finance.IInvoice['items'];
+      items: plugins.tsclass.finance.TInvoice["items"];
       vatAmountSum: number;
     }[] = [];
 
@@ -119,17 +209,22 @@ export class DeContentInvoice extends DeesElement {
     }
 
     const taxAmounts: number[] = [];
-    for (const item of this.letterData.content.invoiceData.items) {
-      taxAmounts.includes(item.vatPercentage) ? null : taxAmounts.push(item.vatPercentage);
+    for (const item of this.letterData.items) {
+      taxAmounts.includes(item.vatPercentage)
+        ? null
+        : taxAmounts.push(item.vatPercentage);
     }
 
     for (const taxAmount of taxAmounts) {
-      const matchingItems = this.letterData.content.invoiceData.items.filter(
+      const matchingItems = this.letterData.items.filter(
         (itemArg) => itemArg.vatPercentage === taxAmount
       );
       let sum = 0;
       for (const matchingItem of matchingItems) {
-        sum += matchingItem.unitNetPrice * matchingItem.unitQuantity * (taxAmount / 100);
+        sum +=
+          matchingItem.unitNetPrice *
+          matchingItem.unitQuantity *
+          (taxAmount / 100);
       }
       vatGroups.push({
         items: matchingItems,
@@ -137,15 +232,21 @@ export class DeContentInvoice extends DeesElement {
         vatAmountSum: Math.round(sum * 100) / 100,
       });
     }
-    return vatGroups;
+    return vatGroups.sort((a, b) => b.vatPercentage - a.vatPercentage);
   };
 
   public async getContentNodes() {
     await this.elementDomReady;
     return {
-      currentContent: this.shadowRoot.querySelector('.currentContent') as HTMLElement,
-      trimmedContent: this.shadowRoot.querySelector('.trimmedContent') as HTMLElement,
-      repeatedContent: this.shadowRoot.querySelector('.repeatedContent') as HTMLElement,
+      currentContent: this.shadowRoot.querySelector(
+        ".currentContent"
+      ) as HTMLElement,
+      trimmedContent: this.shadowRoot.querySelector(
+        ".trimmedContent"
+      ) as HTMLElement,
+      repeatedContent: this.shadowRoot.querySelector(
+        ".repeatedContent"
+      ) as HTMLElement,
     };
   }
 
@@ -157,7 +258,7 @@ export class DeContentInvoice extends DeesElement {
   public async trimEndByOne() {
     await this.elementDomReady;
     this.shadowRoot
-      .querySelector('.trimmedContent')
+      .querySelector(".trimmedContent")
       .append(
         (await this.getContentNodes()).currentContent.children.item(
           (await this.getContentNodes()).currentContent.children.length - 1
@@ -167,7 +268,8 @@ export class DeContentInvoice extends DeesElement {
 
   public async trimStartToOffset(contentOffsetArg: number) {
     await this.elementDomReady;
-    const beginningLength = (await this.getContentNodes()).currentContent.children.length;
+    const beginningLength = (await this.getContentNodes()).currentContent
+      .children.length;
     while (
       (await this.getContentNodes()).currentContent.children.length !==
       beginningLength - contentOffsetArg
@@ -179,13 +281,13 @@ export class DeContentInvoice extends DeesElement {
     if (
       (await this.getContentNodes()).currentContent.children
         .item(0)
-        .classList.contains('needsDataHeader')
+        .classList.contains("needsDataHeader")
     ) {
       const trimmedContent = (await this.getContentNodes()).trimmedContent;
       let startPoint = trimmedContent.children.length;
       while (startPoint > 0) {
         const element = trimmedContent.children.item(startPoint - 1);
-        if (element.classList.contains('dataHeader')) {
+        if (element.classList.contains("dataHeader")) {
           (await this.getContentNodes()).repeatedContent.append(element);
           break;
         }
@@ -194,209 +296,194 @@ export class DeContentInvoice extends DeesElement {
     }
   }
 
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+  public translateKey(key: TranslationKey): string {
+    return plugins.shared.translation.translate(
+      this.documentSettings.languageCode,
+      key
+    );
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ) {
     super.firstUpdated(_changedProperties);
     this.attachInvoiceDom();
   }
 
+  private renderPaymentTerms(): TemplateResult {
+    return html`<div class="infoBox">
+      <div>
+        <div>
+          <div class="label">
+            ${this.translateKey("invoice@@payment.terms")}
+          </div>
+          <span>
+            ${this.translateKey("invoice@@payment.terms.direct")}
+            ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+              dateStyle: this.documentSettings.dateStyle,
+            }).format(
+              new Date(this.letterData.date).setDate(
+                new Date(this.letterData.date).getDate() +
+                  this.letterData?.dueInDays
+              )
+            )}
+          </span>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  private renderPaymentInfo(): TemplateResult {
+    const bic = this.letterData?.from.sepaConnection.bic;
+    const name = this.letterData?.from.name;
+    const iban = this.letterData?.from.sepaConnection.iban;
+    const currency = this.letterData?.currency;
+    const totalGross = this.getTotalGross();
+    const reference = this.letterData?.id;
+
+    return html`<div class="infoBox">
+      <div>
+        <div>
+          <div class="label">${this.translateKey("invoice@@payment.qr")}</div>
+          <span> ${this.translateKey("invoice@@payment.qr.description")} </span>
+        </div>
+        <dedocument-paymentcode
+          bic="${bic}"
+          name="${name}"
+          iban="${iban}"
+          currency="${currency}"
+          totalGross="${totalGross}"
+          reference="${reference}"
+        />
+      </div>
+    </div>`;
+  }
+
+  private renderReferencedContract(): TemplateResult {
+    return null;
+    // return this.documentSettings.enableInvoiceContractRefSection &&
+    //   this.invoiceData?.content?.contractData?.contractDate
+    //   ? html`
+    //       <div class="infoBox">
+    //         <div class="label">
+    //           ${this.translateKey("invoice@@referencedContract")}
+    //         </div>
+    //         ${this.translateKey("invoice@@referencedContract.text")}
+    //         ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+    //           dateStyle: this.documentSettings.dateStyle,
+    //         }).format(
+    //           new Date(this.invoiceData?.content.contractData.contractDate)
+    //         )}.
+    //       </div>
+    //     `
+    //   : null;
+  }
+
   public async attachInvoiceDom() {
     const contentNodes = await this.getContentNodes();
     render(
       html`
-        <style>
-          .grid {
-            display: grid;
-            grid-template-columns: 40px auto 60px 60px 84px 84px 46px;
-          }
-          .topLine {
-            margin-top: 5px;
-            background: #e7e7e7;
-            font-weight: bold;
-          }
-          .lineItem {
-            font-size: 12px;
-            padding: 5px;
-            border-right: 1px dashed #ccc;
-          }
-
-          .lineItem.rightAlign {
-            text-align: right;
-          }
-
-          .invoiceLine {
-            border-bottom: 1px dotted #ccc;
-          }
-
-          .sums {
-            margin-top: 5px;
-            font-size: 12px;
-            padding-left: 50%;
-          }
-
-          .sums .sumline {
-            margin-top: 3px;
-            display: grid;
-            grid-template-columns: auto 90px;
-          }
-
-          .sums .sumline .label {
-            padding: 2px 5px;
-            border-right: 1px solid #ccc;
-            text-align: right;
-            font-weight: bold;
-          }
-
-          .sums .sumline .value {
-            padding: 2px 5px;
-            font-weight: bold;
-          }
-
-          .divider {
-            margin-top: 8px;
-            border-top: 1px dotted #ccc;
-          }
-
-          .taxNote {
-            font-size: 12px;
-            padding: 4px;
-            background: #eeeeeb;
-            text-align: center;
-          }
-
-          .infoBox {
-            border-radius: 7px;
-            border: 1px solid #ddd;
-            border-left: 3px solid #c5e1a5;
-            padding: 8px;
-            margin-top: 16px;
-            line-height: 1.4em;
-            font-size: 16px;
-          }
-
-          .infoBox .label {
-            padding-bottom: 2px;
-            font-size: 12px;
-            font-weight: bold;
-          }
-
-          .paymentCode {
-            text-align: center;
-            border-left: 2px solid #666;
-          }
-        </style>
-        <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
+        <div>${this.translateKey("invoice@@introStatement")}</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}</div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@item.position")}
+          </div>
+          <div class="lineItem">
+            ${this.translateKey("invoice@@description")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@quantity")}
+          </div>
+          <div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@price.unit.net")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@vat.short")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@price.total.net")}
+          </div>
         </div>
-        ${(() => {
-          let counter = 1;
-          return this.letterData?.content.invoiceData?.items?.map(
-            (invoiceItem) => html`
-              <div class="grid invoiceLine needsDataHeader">
-                <div class="lineItem rightAlign">${counter++}</div>
-                <div class="lineItem">${invoiceItem.name}</div>
-                <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
-                <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem rightAlign">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
-                <div class="lineItem rightAlign">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
-                </div>
-                <div class="lineItem rightAlign">
-                  ${invoiceItem.vatPercentage}%
-                </div>
+        ${this.letterData?.items?.map(
+          (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">
+                ${this.formatPrice(invoiceItem.unitNetPrice)}
+              </div>
+              <div class="lineItem rightAlign">
+                ${invoiceItem.vatPercentage}%
               </div>
-            `
-          );
-        })()}
+              <div class="lineItem rightAlign">
+                ${this.formatPrice(
+                  invoiceItem.unitQuantity * invoiceItem.unitNetPrice
+                )}
+              </div>
+            </div>
+          `
+        )}
         <div class="sums">
           <div class="sumline">
-            <div class="label">Total net</div>
-            <div class="value">${this.getTotalNet()} EUR</div>
+            <div class="label">
+              ${this.translateKey("invoice@@sum.total.net")}
+            </div>
+            <div class="value value--total rightAlign">
+              ${this.formatPrice(this.getTotalNet())}
+            </div>
           </div>
           ${this.getVatGroups().map((vatGroupArg) => {
-            let itemNumbers = '';
-            let first = true;
-            for (const item of vatGroupArg.items) {
-              const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
-              itemNumbers += `${first ? '' : ', '}${itemIndex + 1}`;
-              first = false;
-            }
+            let itemNumbers = vatGroupArg.items
+              .map((item) => this.letterData.items.indexOf(item) + 1)
+              .join(", ");
             return html`
               <div class="sumline">
                 <div class="label">
-                  Vat ${vatGroupArg.vatPercentage}%
-                  ${this.documentSettings.vatGroupPositions ? html`
-                    <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
-                  ` : html``}
+                  ${this.translateKey("vat.short")}
+                  ${vatGroupArg.vatPercentage}%
+                  ${this.documentSettings.vatGroupPositions
+                    ? html`
+                        <br /><span style="font-weight: normal"
+                          >(${this.translateKey("invoice@@vat.position")}:
+                          ${itemNumbers})</span
+                        >
+                      `
+                    : html``}
+                </div>
+                <div class="value rightAlign">
+                  ${this.formatPrice(vatGroupArg.vatAmountSum)}
                 </div>
-                <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
             `;
           })}
           <div class="sumline">
-            <div class="label">Total gross</div>
-            <div class="value">${this.getTotalGross()} EUR</div>
+            <div class="label">${this.translateKey("invoice@@totalGross")}</div>
+            <div class="value value--total rightAlign">
+              ${this.formatPrice(this.getTotalGross())}
+            </div>
           </div>
         </div>
         <div class="divider"></div>
-        ${this.letterData?.content.invoiceData.reverseCharge
-          ? html`
-              <div class="taxNote">
-                ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
-              </div>
-            `
+
+        ${this.letterData?.reverseCharge
+          ? html`<div class="taxNote">
+              ${this.translateKey("invoice@@vat.reverseCharge.note")}
+            </div>`
           : ``}
-        <div class="infoBox">
-          <div class="label">Payment Terms:</div>
-          Payment is due within 30 days starting from the reception of this invoice. Please use the
-          following SEPA details:
-          <br /><br />
-          Beneficiary: ${this.letterData?.from.name}<br />
-          IBAN: ${this.letterData?.from?.sepaConnection?.iban}<br />
-          BIC: ${this.letterData?.from?.sepaConnection?.bic}<br />
-          Description: ${this.letterData?.content.invoiceData?.id}<br />
-          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.currency}
-        </div>
-        ${this.letterData?.content?.contractData?.contractDate
-          ? html`
-              <div class="infoBox">
-                <div class="label">Referenced contract:</div>
-                This invoice is adhering to agreements made by contract between the parties on
-                ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
-              </div>
-            `
-          : html``}
-        <div class="infoBox paymentCode">
-          <div class="label">Sepa Payment Code:</div>
-        </div>
+
+        <!-- REFERENCED CONTRACT -->
+        ${this.renderReferencedContract()}
+
+        <!-- PAYMENT TERMS -->
+        ${this.renderPaymentTerms()}
+
+        <!-- PAYMENT INFO -->
+        ${this.renderPaymentInfo()}
       `,
       contentNodes.currentContent
     );
-    const canvas = document.createElement('canvas');
-    plugins.qrcode.toCanvas(
-      canvas,
-      `BCD
-001
-1
-SCT
-${this.letterData.content.invoiceData.billedBy.sepaConnection.bic}
-${this.letterData.content.invoiceData.billedBy.name}
-${this.letterData.content.invoiceData.billedBy.sepaConnection.iban}
-EUR${this.getTotalGross()}
-CHAR
-${this.letterData.content.invoiceData.id}
-${this.letterData.content.invoiceData.id}
-EPC QR Code`,
-      (error) => {
-        if (error) console.error(error);
-      }
-    );
-    contentNodes.currentContent.querySelector('.paymentCode').append(canvas);
   }
 }

package/ts_web/elements/document.demo.ts

@@ -1,7 +1,10 @@
-import * as plugins from '../plugins.js';
+import * as plugins from "../plugins.js";
 
-import { html } from '@design.estate/dees-element';
+import { html } from "@design.estate/dees-element";
 
 export const demoFunc = () => html`
-<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
-`;
+  <dedocument-dedocument
+    .format="${"a4"}"
+    .letterData=${plugins.shared.demoLetter}
+  ></dedocument-dedocument>
+`;