npm - @design.estate/dees-document - Versions diffs - 1.0.91 - Mend

@design.estate/dees-document 1.0.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist_bundle/bundle.js +865 -0
package/dist_bundle/bundle.js.map +7 -0
package/dist_ts/00_commitinfo_data.d.ts +8 -0
package/dist_ts/00_commitinfo_data.js +9 -0
package/dist_ts/classes.pdfservice.d.ts +23 -0
package/dist_ts/classes.pdfservice.js +39 -0
package/dist_ts/helpers.d.ts +1 -0
package/dist_ts/helpers.js +6 -0
package/dist_ts/index.d.ts +2 -0
package/dist_ts/index.js +3 -0
package/dist_ts/paths.d.ts +4 -0
package/dist_ts/paths.js +7 -0
package/dist_ts/plugins.d.ts +9 -0
package/dist_ts/plugins.js +13 -0
package/dist_ts_web/00_commitinfo_data.d.ts +8 -0
package/dist_ts_web/00_commitinfo_data.js +9 -0
package/dist_ts_web/elements/contentinvoice.d.ts +34 -0
package/dist_ts_web/elements/contentinvoice.js +335 -0
package/dist_ts_web/elements/document.d.ts +20 -0
package/dist_ts_web/elements/document.js +157 -0
package/dist_ts_web/elements/index.d.ts +8 -0
package/dist_ts_web/elements/index.js +9 -0
package/dist_ts_web/elements/letterheader.d.ts +16 -0
package/dist_ts_web/elements/letterheader.js +123 -0
package/dist_ts_web/elements/page.d.ts +19 -0
package/dist_ts_web/elements/page.js +144 -0
package/dist_ts_web/elements/pagecontainer.d.ts +14 -0
package/dist_ts_web/elements/pagecontainer.js +66 -0
package/dist_ts_web/elements/pagecontent.d.ts +18 -0
package/dist_ts_web/elements/pagecontent.js +144 -0
package/dist_ts_web/elements/pagefooter.d.ts +16 -0
package/dist_ts_web/elements/pagefooter.js +130 -0
package/dist_ts_web/elements/pageheader.d.ts +16 -0
package/dist_ts_web/elements/pageheader.js +95 -0
package/dist_ts_web/elements/shared/demoletter.d.ts +2 -0
package/dist_ts_web/elements/shared/demoletter.js +117 -0
package/dist_ts_web/elements/shared/index.d.ts +5 -0
package/dist_ts_web/elements/shared/index.js +6 -0
package/dist_ts_web/index.d.ts +1 -0
package/dist_ts_web/index.js +2 -0
package/dist_ts_web/pages/index.d.ts +2 -0
package/dist_ts_web/pages/index.js +3 -0
package/dist_ts_web/pages/page1.d.ts +1 -0
package/dist_ts_web/pages/page1.js +18 -0
package/dist_ts_web/pages/page2.d.ts +1 -0
package/dist_ts_web/pages/page2.js +5 -0
package/dist_ts_web/plugins.d.ts +7 -0
package/dist_ts_web/plugins.js +11 -0
package/dist_watch/bundle.js +21871 -0
package/dist_watch/bundle.js.map +7 -0
package/dist_watch/index.html +28 -0
package/license +19 -0
package/npmextra.json +20 -0
package/package.json +65 -0
package/readme.md +7 -0
package/ts/00_commitinfo_data.ts +8 -0
package/ts/classes.pdfservice.ts +51 -0
package/ts/helpers.ts +6 -0
package/ts/index.ts +2 -0
package/ts/paths.ts +9 -0
package/ts/plugins.ts +26 -0
package/ts_web/00_commitinfo_data.ts +8 -0
package/ts_web/elements/contentinvoice.ts +385 -0
package/ts_web/elements/document.ts +168 -0
package/ts_web/elements/index.ts +8 -0
package/ts_web/elements/letterheader.ts +125 -0
package/ts_web/elements/page.ts +142 -0
package/ts_web/elements/pagecontainer.ts +69 -0
package/ts_web/elements/pagecontent.ts +147 -0
package/ts_web/elements/pagefooter.ts +132 -0
package/ts_web/elements/pageheader.ts +96 -0
package/ts_web/elements/shared/demoletter.ts +121 -0
package/ts_web/elements/shared/index.ts +6 -0
package/ts_web/index.ts +1 -0
package/ts_web/pages/index.ts +2 -0
package/ts_web/pages/page1.ts +18 -0
package/ts_web/pages/page2.ts +5 -0
package/ts_web/plugins.ts +15 -0

package/dist_watch/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!--gitzone element-->
+<!-- made by Task Venture Capital GmbH -->
+<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<html lang="en">
+  <head>
+    <!--Lets set some basic meta tags-->
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body>
+  </body>
+</html>

package/license ADDED Viewed

@@ -0,0 +1,19 @@
+Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/npmextra.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "gitzone": {
+    "projectType": "wcc",
+    "module": {
+      "githost": "gitlab.com",
+      "gitscope": "designestate/private",
+      "gitrepo": "dedocument-catalog",
+      "description": "a catalog for creating documents like invoices",
+      "npmPackagename": "@designestate_private/dedocument-catalog",
+      "license": "MIT",
+      "projectDomain": "design.estate",
+      "shortDescription": "undefined variable"
+    }
+  },
+  "npmci": {
+    "npmGlobalTools": [],
+    "npmAccessLevel": "private",
+    "npmRegistryUrl": "verdaccio2.lossless.one"
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,65 @@
+{
+  "name": "@design.estate/dees-document",
+  "version": "1.0.91",
+  "private": false,
+  "description": "a catalog for creating documents like invoices",
+  "main": "dist_ts_web/index.js",
+  "typings": "dist_ts_web/index.d.ts",
+  "exports": {
+    "./ts": "./dist_ts/index.js",
+    "./ts_web": "./dist_ts_web/index.js"
+  },
+  "scripts": {
+    "test": "npm run build && tstest test/",
+    "build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element"
+  },
+  "author": "Lossless GmbH",
+  "license": "MIT",
+  "dependencies": {
+    "@design.estate/dees-domtools": "^2.0.34",
+    "@design.estate/dees-element": "^2.0.23",
+    "@design.estate/dees-wcctools": "^1.0.76",
+    "@git.zone/tsrun": "^1.2.44",
+    "@push.rocks/smartfile": "^10.0.26",
+    "@push.rocks/smartjson": "^5.0.10",
+    "@push.rocks/smartpath": "^5.0.5",
+    "@push.rocks/smartpdf": "^3.0.16",
+    "@push.rocks/smarttime": "^4.0.1",
+    "@tsclass/tsclass": "^4.0.46",
+    "@types/qrcode": "^1.5.2",
+    "qrcode": "^1.5.3"
+  },
+  "devDependencies": {
+    "@git.zone/tsbuild": "^2.1.66",
+    "@git.zone/tsbundle": "^2.0.8",
+    "@git.zone/tstest": "^1.0.77",
+    "@git.zone/tswatch": "^2.0.7",
+    "@push.rocks/projectinfo": "^5.0.1",
+    "@push.rocks/tapbundle": "^5.0.8"
+  },
+  "files": [
+    "ts/**/*",
+    "ts_web/**/*",
+    "dist/**/*",
+    "dist_*/**/*",
+    "dist_ts/**/*",
+    "dist_ts_web/**/*",
+    "assets/**/*",
+    "cli.js",
+    "npmextra.json",
+    "readme.md"
+  ],
+  "browserslist": [
+    "last 1 Chrome versions"
+  ],
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/designestate/private/dedocument-catalog.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
+  },
+  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme"
+}

package/readme.md ADDED Viewed

@@ -0,0 +1,7 @@
+# @design.estate/private/dedocument-catalog
+a catalog for creating documents like invoices
+## Usage
+Use TypeScript for best in class intellisense
+For further information read the linked docs at the top of this readme.

package/ts/00_commitinfo_data.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-document',
+  version: '1.0.91',
+  description: 'a catalog for creating documents like invoices'
+}

package/ts/classes.pdfservice.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import * as plugins from './plugins.js';
+import * as paths from './paths.js';
+import * as helpers from './helpers.js';
+export interface IPdfServiceConstructorOptions {
+}
+/**
+ * a pdf service for generating pdfs
+ */
+export class PdfService {
+  // INSTANCE
+  options: IPdfServiceConstructorOptions;
+  public smartpdfInstance: plugins.smartpdf.SmartPdf;
+  constructor(optionsArg: IPdfServiceConstructorOptions) {
+    this.options = optionsArg;
+  }
+  /**
+   * starts the  PdfService
+   */
+  public async start() {
+    this.smartpdfInstance = new plugins.smartpdf.SmartPdf();
+    await this.smartpdfInstance.start();
+  }
+  /**
+   * stops the PdfService
+   */
+  public async stop() {
+    await this.smartpdfInstance.stop();
+  }
+  /**
+   * creates an letter
+   */
+  public async createPdfFromLetterObject(letterDataArg: plugins.tsclass.business.ILetter) {
+    const html = `
+      <script type="module">
+        ${await helpers.getBundleAsString()}
+      </script>
+      <dedocument-dedocument printMode letterData="${plugins.smartjson.stringifyBase64(letterDataArg)}"></dedocument-dedocument>
+    `;
+    // console.log(html);
+    const pdfResult = await this.smartpdfInstance.getA4PdfResultForHtmlString(html);
+    return pdfResult;
+  }
+}

package/ts/helpers.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import * as plugins from './plugins.js';
+import * as paths from './paths.js';
+export const getBundleAsString = async () => {
+  return plugins.smartfile.fs.toStringSync(paths.bundleFile);
+}

package/ts/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './helpers.js';
2	+ export * from './classes.pdfservice.js';

package/ts/paths.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import * as plugins from './plugins.js';
+export const packageDir = plugins.path.join(plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url), '../');
+export const nogitDir = plugins.path.join(packageDir, '.nogit/');
+plugins.smartfile.fs.ensureDirSync(nogitDir);
+export const bundleDir = plugins.path.join(packageDir, './dist_bundle');
+export const bundleFile = plugins.path.join(bundleDir, './bundle.js');

package/ts/plugins.ts ADDED Viewed

@@ -0,0 +1,26 @@
+// node native
+import * as path from 'path';
+export {
+  path
+}
+// @push.rocks/scope
+import * as smartfile from '@push.rocks/smartfile';
+import * as smartjson from '@push.rocks/smartjson';
+import * as smartpath from '@push.rocks/smartpath';
+import * as smartpdf from '@push.rocks/smartpdf';
+export {
+  smartfile,
+  smartpath,
+  smartjson,
+  smartpdf,
+}
+// @tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+export {
+  tsclass,
+}

package/ts_web/00_commitinfo_data.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-document',
+  version: '1.0.91',
+  description: 'a catalog for creating documents like invoices'
+}

package/ts_web/elements/contentinvoice.ts ADDED Viewed

@@ -0,0 +1,385 @@
+/**
+ * content for invoices
+ */
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  unsafeCSS,
+  render,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import * as plugins from '../plugins.js';
+import * as shared from './shared/index.js';
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-contentinvoice': DeContentInvoice;
+  }
+}
+@customElement('dedocument-contentinvoice')
+export class DeContentInvoice extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demoContainer {
+        background: white;
+        padding: 50px;
+      }
+    </style>
+    <div class="demoContainer">
+      <dedocument-contentinvoice></dedocument-contentinvoice>
+    </div>
+  `;
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public letterData: plugins.tsclass.business.ILetter;
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        color: #333;
+      }
+      .trimmedContent {
+        display: none;
+      }
+      .repeatedContent {
+      }
+    `,
+  ];
+  public render(): TemplateResult {
+    return html`
+      <div class="trimmedContent"></div>
+      <div class="repeatedContent"></div>
+      <div class="currentContent"></div>
+    `;
+  }
+  public getTotalNet = (): number => {
+    let totalNet = 0;
+    if (!this.letterData) {
+      return totalNet;
+    }
+    for (const item of this.letterData.content.invoiceData.items) {
+      totalNet += item.unitNetPrice * item.unitQuantity;
+    }
+    return totalNet;
+  };
+  public getTotalGross = (): number => {
+    let totalVat = 0;
+    if (!this.letterData) {
+      return totalVat;
+    }
+    for (const taxgroup of this.getVatGroups()) {
+      totalVat += taxgroup.vatAmountSum;
+    }
+    return this.getTotalNet() + totalVat;
+  };
+  public getVatGroups = () => {
+    const vatGroups: {
+      vatPercentage: number;
+      items: plugins.tsclass.finance.IInvoice['items'];
+      vatAmountSum: number;
+    }[] = [];
+    if (!this.letterData) {
+      return vatGroups;
+    }
+    const taxAmounts: number[] = [];
+    for (const item of this.letterData.content.invoiceData.items) {
+      taxAmounts.includes(item.vatPercentage) ? null : taxAmounts.push(item.vatPercentage);
+    }
+    for (const taxAmount of taxAmounts) {
+      const matchingItems = this.letterData.content.invoiceData.items.filter(
+        (itemArg) => itemArg.vatPercentage === taxAmount
+      );
+      let sum = 0;
+      for (const matchingItem of matchingItems) {
+        sum += matchingItem.unitNetPrice * matchingItem.unitQuantity * (taxAmount / 100);
+      }
+      vatGroups.push({
+        items: matchingItems,
+        vatPercentage: taxAmount,
+        vatAmountSum: Math.round(sum * 100) / 100,
+      });
+    }
+    return vatGroups;
+  };
+  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,
+    };
+  }
+  public async getContentLength() {
+    await this.elementDomReady;
+    return (await this.getContentNodes()).currentContent.children.length;
+  }
+  public async trimEndByOne() {
+    await this.elementDomReady;
+    this.shadowRoot
+      .querySelector('.trimmedContent')
+      .append(
+        (await this.getContentNodes()).currentContent.children.item(
+          (await this.getContentNodes()).currentContent.children.length - 1
+        )
+      );
+  }
+  public async trimStartToOffset(contentOffsetArg: number) {
+    await this.elementDomReady;
+    const beginningLength = (await this.getContentNodes()).currentContent.children.length;
+    while (
+      (await this.getContentNodes()).currentContent.children.length !==
+      beginningLength - contentOffsetArg
+    ) {
+      (await this.getContentNodes()).trimmedContent.append(
+        (await this.getContentNodes()).currentContent.children.item(0)
+      );
+      console.log('hey' + this.shadowRoot.children.length);
+    }
+    if (
+      (await this.getContentNodes()).currentContent.children
+        .item(0)
+        .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')) {
+          (await this.getContentNodes()).repeatedContent.append(element);
+          break;
+        }
+        startPoint--;
+      }
+    }
+  }
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    this.attachInvoiceDom();
+  }
+  public async attachInvoiceDom() {
+    const contentNodes = await this.getContentNodes();
+    render(
+      html`
+        <style>
+          .grid {
+            display: grid;
+            grid-template-columns: 40px auto 80px 80px 90px 90px;
+          }
+          .topLine {
+            margin-top: 5px;
+            background: #e7e7e7;
+            font-weight: bold;
+          }
+          .lineItem {
+            font-size: 12px;
+            padding: 5px;
+          }
+          .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 class="grid topLine dataHeader">
+          <div class="lineItem">Item Pos.</div>
+          <div class="lineItem">Description</div>
+          <div class="lineItem">Quantity</div>
+          <div class="lineItem">Unit Type</div>
+          <div class="lineItem">Unit Net Price</div>
+          <div class="lineItem">Total Net Price</div>
+        </div>
+        ${(() => {
+          let counter = 1;
+          return this.letterData?.content.invoiceData?.items?.map(
+            (invoiceItem) => html`
+              <div class="grid invoiceLine needsDataHeader">
+                <div class="lineItem">${counter++}</div>
+                <div class="lineItem">${invoiceItem.name}</div>
+                <div class="lineItem">${invoiceItem.unitQuantity}</div>
+                <div class="lineItem">${invoiceItem.unitType}</div>
+                <div class="lineItem">${invoiceItem.unitNetPrice} ${invoiceItem.currency}</div>
+                <div class="lineItem">
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${invoiceItem.currency}
+                </div>
+              </div>
+            `
+          );
+        })()}
+        <div class="sums">
+          <div class="sumline">
+            <div class="label">Total net</div>
+            <div class="value">${this.getTotalNet()} EUR</div>
+          </div>
+          ${this.getVatGroups().map((vatGroupArg) => {
+            let itemNumbers = '';
+            for (const item of vatGroupArg.items) {
+              const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
+              itemNumbers += ` ${itemIndex + 1},`;
+            }
+            return html`
+              <div class="sumline">
+                <div class="label">
+                  Vat ${vatGroupArg.vatPercentage}%<br />
+                  <span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
+                </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>
+        </div>
+        <div class="divider"></div>
+        ${this.letterData?.content.invoiceData.reverseCharge
+          ? html`
+              <div class="taxNote">
+                VAT arises on a reverse charge basis and is payable by the customer.
+              </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.items[0].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>
+      `,
+      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);
+        console.log('success!');
+      }
+    );
+    contentNodes.currentContent.querySelector('.paymentCode').append(canvas);
+  }
+}