diff --git a/public/js/app.ts b/public/js/app.ts
index 2f60f60..53ec3ca 100644
--- a/public/js/app.ts
+++ b/public/js/app.ts
@@ -32,7 +32,9 @@ function showToast(message: string, type: "success" | "error" = "success") {
function refreshPreview() {
try {
const data = extractFormData();
- updatePdfPreview(data);
+ void updatePdfPreview(data).catch((err) => {
+ console.error("PDF generation error:", err);
+ });
} catch (err) {
console.error("PDF generation error:", err);
}
@@ -233,10 +235,10 @@ function setupShareAndDownload() {
}
if (downloadBtn) {
- downloadBtn.addEventListener("click", () => {
+ downloadBtn.addEventListener("click", async () => {
try {
const data = extractFormData();
- downloadPdf(data);
+ await downloadPdf(data);
showToast("PDF downloaded!", "success");
} catch (err) {
console.error("Download error:", err);
@@ -407,6 +409,7 @@ function getDefaultData(): InvoiceData {
vatTableSummaryIsVisible: true,
paymentMethod: "Bank Transfer",
paymentMethodFieldIsVisible: true,
+ paymentUrl: "",
notes: "",
notesFieldIsVisible: true,
personAuthorizedToReceiveFieldIsVisible: true,
diff --git a/public/js/form.ts b/public/js/form.ts
index 39a0fb8..a38d5dc 100644
--- a/public/js/form.ts
+++ b/public/js/form.ts
@@ -104,6 +104,7 @@ export function populateForm(data: InvoiceData): void {
// Payment & notes
setInputValue("paymentMethod", data.paymentMethod ?? "");
+ setInputValue("paymentUrl", data.paymentUrl ?? "");
setTextareaValue("invoiceNotes", data.notes ?? "");
// Visibility checkboxes
@@ -226,6 +227,7 @@ export function extractFormData(): InvoiceData {
vatTableSummaryIsVisible: getCheckbox("vatTableSummaryIsVisible"),
paymentMethod: getInputValue("paymentMethod"),
paymentMethodFieldIsVisible: getCheckbox("paymentMethodFieldIsVisible"),
+ paymentUrl: getInputValue("paymentUrl") || undefined,
notes: getTextareaValue("invoiceNotes"),
notesFieldIsVisible: getCheckbox("notesFieldIsVisible"),
personAuthorizedToReceiveFieldIsVisible: getCheckbox("personAuthorizedToReceiveFieldIsVisible"),
diff --git a/public/js/pdf-generator.ts b/public/js/pdf-generator.ts
index 5e899e4..a0e24e8 100644
--- a/public/js/pdf-generator.ts
+++ b/public/js/pdf-generator.ts
@@ -2,6 +2,7 @@ import { INVOICE_PDF_TRANSLATIONS } from './i18n';
import type { TranslationSet as TranslationStrings } from './i18n';
import { formatNumber, formatDate, formatCurrency } from './utils';
import type { InvoiceData, InvoiceItem } from '../../src/types';
+import QRCode from 'qrcode';
// jsPDF and jspdf-autotable are loaded as UMD globals via script tags
declare const jspdf: { jsPDF: any };
@@ -68,6 +69,26 @@ function drawHLine(doc: any, y: number, color: string = LIGHT_GRAY): void {
doc.line(MARGIN, y, PAGE_WIDTH - MARGIN, y);
}
+async function generatePaymentQrDataUrl(paymentUrl?: string): Promise
{
+ const trimmed = paymentUrl?.trim();
+ if (!trimmed) return undefined;
+
+ try {
+ return await QRCode.toDataURL(trimmed, {
+ errorCorrectionLevel: 'M',
+ margin: 1,
+ width: 256,
+ color: {
+ dark: '#000000',
+ light: '#FFFFFF',
+ },
+ });
+ } catch (e) {
+ console.warn('Failed to generate payment QR code:', e);
+ return undefined;
+ }
+}
+
// ─────────────────────────────────────────────────────────────────────────────
// Section renderers
// ─────────────────────────────────────────────────────────────────────────────
@@ -671,10 +692,11 @@ function drawPaymentTotals(
doc: any,
data: InvoiceData,
t: TranslationStrings,
- startY: number
+ startY: number,
+ paymentQrDataUrl?: string
): number {
let y = startY;
- y = checkPageBreak(doc, y, 80);
+ y = checkPageBreak(doc, y, paymentQrDataUrl ? 150 : 80);
const formattedTotal = formatNumber(data.total);
const currencyCode = data.currency;
@@ -684,28 +706,52 @@ function drawPaymentTotals(
doc.setFontSize(12);
doc.setTextColor(BLACK);
const toPayText = `${t.paymentTotals.toPay}: ${formattedTotal} ${currencyCode}`;
- doc.text(toPayText, MARGIN, y);
+ const toPayY = y;
+ doc.text(toPayText, MARGIN, toPayY);
// Underline beneath the "To Pay" text
const toPayWidth = doc.getTextWidth(toPayText);
doc.setDrawColor(BLACK);
doc.setLineWidth(1);
- doc.line(MARGIN, y + 2, MARGIN + toPayWidth, y + 2);
+ doc.line(MARGIN, toPayY + 2, MARGIN + toPayWidth, toPayY + 2);
- y += 20;
+ let leftY = toPayY + 20;
+ let rightY = toPayY;
// "Paid: 0.00 {currency}"
doc.setFont('OpenSans', 'normal');
doc.setFontSize(9);
doc.setTextColor(DARK_GRAY);
- doc.text(`${t.paymentTotals.paid}: ${formatNumber(0)} ${currencyCode}`, MARGIN, y);
- y += 14;
+ doc.text(`${t.paymentTotals.paid}: ${formatNumber(0)} ${currencyCode}`, MARGIN, leftY);
+ leftY += 14;
// "Left to Pay: {total} {currency}"
- doc.text(`${t.paymentTotals.leftToPay}: ${formattedTotal} ${currencyCode}`, MARGIN, y);
- y += 20;
+ doc.text(`${t.paymentTotals.leftToPay}: ${formattedTotal} ${currencyCode}`, MARGIN, leftY);
+ leftY += 20;
- return y;
+ if (paymentQrDataUrl) {
+ try {
+ const qrWidth = 90;
+ const qrX = PAGE_WIDTH - MARGIN - qrWidth;
+ const qrY = toPayY - 10;
+ doc.addImage(paymentQrDataUrl, 'PNG', qrX, qrY, qrWidth, qrWidth, undefined, 'FAST');
+ rightY = qrY + qrWidth + 10;
+
+ if (data.notesFieldIsVisible && data.notes) {
+ doc.setFont('OpenSans', 'normal');
+ doc.setFontSize(7);
+ doc.setTextColor(MEDIUM_GRAY);
+ const noteWidth = 170;
+ const noteLines = doc.splitTextToSize(data.notes, noteWidth);
+ doc.text(noteLines, PAGE_WIDTH - MARGIN, rightY, { align: 'right' });
+ rightY += noteLines.length * 9 + 10;
+ }
+ } catch (e) {
+ console.warn('Failed to add payment QR code to PDF:', e);
+ }
+ }
+
+ return Math.max(leftY, rightY);
}
function drawSignatureSection(
@@ -839,13 +885,14 @@ function drawFooter(doc: any, data: InvoiceData, t: TranslationStrings): void {
* Generate and return the jsPDF document object.
* Does NOT save or create blob — just returns doc.
*/
-export function generatePdf(data: InvoiceData): any {
+export async function generatePdf(data: InvoiceData): Promise {
const { jsPDF } = jspdf;
const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
registerFonts(doc);
const t: TranslationStrings = INVOICE_PDF_TRANSLATIONS[data.language];
const taxLabel = data.taxLabelText || 'VAT';
+ const paymentQrDataUrl = await generatePaymentQrDataUrl(data.paymentUrl);
let y = MARGIN;
@@ -862,13 +909,15 @@ export function generatePdf(data: InvoiceData): any {
y = drawPaymentAndVatSummary(doc, data, t, taxLabel, y);
// (e) Payment Totals
- y = drawPaymentTotals(doc, data, t, y);
+ y = drawPaymentTotals(doc, data, t, y, paymentQrDataUrl);
// (f) Signature Section
y = drawSignatureSection(doc, data, t, y);
// (g) Notes
- y = drawNotes(doc, data, y);
+ if (!paymentQrDataUrl) {
+ y = drawNotes(doc, data, y);
+ }
// (h) Footer (on every page)
drawFooter(doc, data, t);
@@ -879,8 +928,8 @@ export function generatePdf(data: InvoiceData): any {
/**
* Generate the PDF and return it as a Blob.
*/
-export function generatePdfBlob(data: InvoiceData): Blob {
- const doc = generatePdf(data);
+export async function generatePdfBlob(data: InvoiceData): Promise {
+ const doc = await generatePdf(data);
return doc.output('blob') as Blob;
}
@@ -888,8 +937,8 @@ export function generatePdfBlob(data: InvoiceData): Blob {
* Generate the PDF, create a blob URL, and trigger a download.
* Filename: invoice-{language}-{invoiceNumberValue}.pdf
*/
-export function downloadPdf(data: InvoiceData): void {
- const blob = generatePdfBlob(data);
+export async function downloadPdf(data: InvoiceData): Promise {
+ const blob = await generatePdfBlob(data);
const url = URL.createObjectURL(blob);
const invoiceNumber = data.invoiceNumberObject?.value || 'draft';
const filename = `invoice-${data.language}-${invoiceNumber}.pdf`;
@@ -908,8 +957,8 @@ export function downloadPdf(data: InvoiceData): void {
* using a data URL. This avoids the blob URL approach which causes
* Firefox/Waterfox to download the PDF instead of displaying it inline.
*/
-export function updatePreview(data: InvoiceData): void {
- const doc = generatePdf(data);
+export async function updatePreview(data: InvoiceData): Promise {
+ const doc = await generatePdf(data);
const dataUrl = doc.output('dataurlstring') as string;
const iframe = document.getElementById('pdf-preview') as HTMLIFrameElement | null;
diff --git a/public/js/url-sharing.ts b/public/js/url-sharing.ts
index 0755a91..b6f7dd6 100644
--- a/public/js/url-sharing.ts
+++ b/public/js/url-sharing.ts
@@ -12,7 +12,7 @@ export const INVOICE_KEY_COMPRESSION_MAP: Record = {
vatTableSummaryIsVisible: "o", paymentMethod: "p", paymentMethodFieldIsVisible: "q",
paymentDue: "r", stripePayOnlineUrl: "s", notes: "t", notesFieldIsVisible: "u",
personAuthorizedToReceiveFieldIsVisible: "v", personAuthorizedToIssueFieldIsVisible: "w",
- taxLabelText: "1",
+ taxLabelText: "1", paymentUrl: "9",
label: "x", value: "y",
id: "z", name: "A", address: "B", vatNo: "C", vatNoFieldIsVisible: "D",
email: "E", accountNumber: "F", accountNumberFieldIsVisible: "G",
diff --git a/public/key-map.json b/public/key-map.json
index 2f1a3df..aa68c00 100644
--- a/public/key-map.json
+++ b/public/key-map.json
@@ -23,6 +23,7 @@
"personAuthorizedToReceiveFieldIsVisible": "v",
"personAuthorizedToIssueFieldIsVisible": "w",
"taxLabelText": "1",
+ "paymentUrl": "9",
"label": "x",
"value": "y",
"id": "z",
diff --git a/src/types.ts b/src/types.ts
index 1e53c0f..ba446e9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -145,6 +145,7 @@ export interface InvoiceData {
paymentMethod?: string;
paymentMethodFieldIsVisible: boolean;
paymentDue: string;
+ paymentUrl?: string;
stripePayOnlineUrl?: string;
notes?: string;
notesFieldIsVisible: boolean;