feat: enhance translation and invoice layout
This commit is contained in:
@@ -9,22 +9,21 @@ import {
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
render,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as plugins from '../plugins.js';
|
||||
} from "@design.estate/dees-element";
|
||||
import * as plugins from "../plugins.js";
|
||||
|
||||
import { dedocumentSharedStyle } from '../style.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>
|
||||
@@ -59,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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -80,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;
|
||||
|
||||
@@ -109,7 +200,7 @@ export class DeContentInvoice extends DeesElement {
|
||||
public getVatGroups = () => {
|
||||
const vatGroups: {
|
||||
vatPercentage: number;
|
||||
items: plugins.tsclass.finance.IInvoice['items'];
|
||||
items: plugins.tsclass.finance.IInvoice["items"];
|
||||
vatAmountSum: number;
|
||||
}[] = [];
|
||||
|
||||
@@ -119,7 +210,9 @@ 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);
|
||||
taxAmounts.includes(item.vatPercentage)
|
||||
? null
|
||||
: taxAmounts.push(item.vatPercentage);
|
||||
}
|
||||
|
||||
for (const taxAmount of taxAmounts) {
|
||||
@@ -128,7 +221,10 @@ export class DeContentInvoice extends DeesElement {
|
||||
);
|
||||
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,
|
||||
@@ -136,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,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -156,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
|
||||
@@ -166,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
|
||||
@@ -178,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;
|
||||
}
|
||||
@@ -193,275 +296,198 @@ 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?.content.invoiceData.dueInDays
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
private renderPaymentInfo(): TemplateResult {
|
||||
const bic =
|
||||
this.letterData?.content.invoiceData.billedBy.sepaConnection.bic;
|
||||
const name = this.letterData?.content.invoiceData.billedBy.name;
|
||||
const iban =
|
||||
this.letterData?.content.invoiceData.billedBy.sepaConnection.iban;
|
||||
const currency = this.letterData?.content.invoiceData.currency;
|
||||
const totalGross = this.getTotalGross();
|
||||
const reference = this.letterData?.content.invoiceData.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 this.documentSettings.enableInvoiceContractRefSection &&
|
||||
this.letterData?.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.letterData?.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:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.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 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.'
|
||||
)}
|
||||
${this.translateKey("invoice@@item.position")}
|
||||
</div>
|
||||
<div class="lineItem">
|
||||
${plugins.shared.translation.translate(
|
||||
this.documentSettings.languageCode,
|
||||
'description',
|
||||
'Description'
|
||||
)}
|
||||
${this.translateKey("invoice@@description")}
|
||||
</div>
|
||||
<div class="lineItem rightAlign">
|
||||
${plugins.shared.translation.translate(
|
||||
this.documentSettings.languageCode,
|
||||
'quantity',
|
||||
'Quantity'
|
||||
)}
|
||||
${this.translateKey("invoice@@quantity")}
|
||||
</div>
|
||||
<div class="lineItem">
|
||||
${plugins.shared.translation.translate(
|
||||
this.documentSettings.languageCode,
|
||||
'unitType',
|
||||
'Unit Type'
|
||||
)}
|
||||
<div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
|
||||
<div class="lineItem rightAlign">
|
||||
${this.translateKey("invoice@@price.unit.net")}
|
||||
</div>
|
||||
<div class="lineItem rightAlign">
|
||||
${plugins.shared.translation.translate(
|
||||
this.documentSettings.languageCode,
|
||||
'unitNetPrice',
|
||||
'Unit Net Price'
|
||||
)}
|
||||
${this.translateKey("invoice@@vat.short")}
|
||||
</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'
|
||||
)}
|
||||
${this.translateKey("invoice@@price.total.net")}
|
||||
</div>
|
||||
</div>
|
||||
${(() => {
|
||||
let counter = 1;
|
||||
return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
|
||||
const isHighlighted = false; // TODO: implement rest of highlight logic
|
||||
return html`
|
||||
<div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
|
||||
<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?.content.invoiceData?.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.content.invoiceData.items.indexOf(item) + 1
|
||||
)
|
||||
.join(", ");
|
||||
return html`
|
||||
<div class="sumline">
|
||||
<div class="label">
|
||||
Vat ${vatGroupArg.vatPercentage}%
|
||||
${this.translateKey("vat.short")}
|
||||
${vatGroupArg.vatPercentage}%
|
||||
${this.documentSettings.vatGroupPositions
|
||||
? html`
|
||||
<br /><span style="font-weight: normal"
|
||||
>(on item positions: ${itemNumbers})</span
|
||||
>(${this.translateKey("invoice@@vat.position")}:
|
||||
${itemNumbers})</span
|
||||
>
|
||||
`
|
||||
: html``}
|
||||
</div>
|
||||
<div class="value">${vatGroupArg.vatAmountSum} EUR</div>
|
||||
<div class="value rightAlign">
|
||||
${this.formatPrice(vatGroupArg.vatAmountSum)}
|
||||
</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>
|
||||
`
|
||||
? 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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user