fix: [M3-7008] - Invoice and Payment id wrapping in generated PDFs (#…

…9702) * don't enforce a max width on the title * improve positioning logic * Added changeset: Payment confirmation number covered in Payment Receipts --------- Co-authored-by: Banks Nussman <[email protected]>
linode · Sep 22, 2023 · a04069d · a04069d
1 parent e95f5fc
commit a04069d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 13 deletions.
diff --git a/packages/manager/.changeset/pr-9702-fixed-1695158299608.md b/packages/manager/.changeset/pr-9702-fixed-1695158299608.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Payment confirmation number covered in Payment Receipts ([#9702](https://github.com/linode/manager/pull/9702))
diff --git a/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts b/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
@@ -162,11 +162,13 @@ const addTitle = (doc: jsPDF, y: number, ...textStrings: Title[]) => {
   textStrings.forEach((eachString) => {
     doc.text(eachString.text, eachString.leftMargin || pageMargin, y, {
       charSpace: 0.75,
-      maxWidth: 100,
     });
+    y += 12;
   });
   // reset text format
   doc.setFont(baseFont, 'normal');
+
+  return y;
 };
 
 // M3-6177 only make one request to get the logo
@@ -273,15 +275,20 @@ export const printInvoice = async (
       );
       const rightHeaderYPosition = addRightHeader(doc, account);
 
-      addTitle(doc, Math.max(leftHeaderYPosition, rightHeaderYPosition) + 4, {
-        text: `Invoice: #${invoiceId}`,
-      });
+      const titlePosition = addTitle(
+        doc,
+        Math.max(leftHeaderYPosition, rightHeaderYPosition) + 12,
+        {
+          text: `Invoice: #${invoiceId}`,
+        }
+      );
 
       createInvoiceItemsTable({
         doc,
         flags,
         items: itemsChunk,
         regions,
+        startY: titlePosition,
         timezone,
       });
 
@@ -336,11 +343,16 @@ export const printPayment = (
       countryTax
     );
     const rightHeaderYPosition = addRightHeader(doc, account);
-    addTitle(doc, Math.max(leftHeaderYPosition, rightHeaderYPosition) + 12, {
-      text: `Receipt for Payment #${payment.id}`,
-    });
 
-    createPaymentsTable(doc, payment, timezone);
+    const titleYPosition = addTitle(
+      doc,
+      Math.max(leftHeaderYPosition, rightHeaderYPosition) + 12,
+      {
+        text: `Receipt for Payment #${payment.id}`,
+      }
+    );
+
+    createPaymentsTable(doc, payment, titleYPosition, timezone);
     createFooter(doc, baseFont, account.country, payment.date);
     createPaymentsTotalsTable(doc, payment);
 

diff --git a/packages/manager/src/features/Billing/PdfGenerator/utils.ts b/packages/manager/src/features/Billing/PdfGenerator/utils.ts
@@ -44,6 +44,7 @@ const formatDateForTable = (
 export const createPaymentsTable = (
   doc: JSPDF,
   payment: Payment,
+  startY: number,
   timezone?: string
 ) => {
   autoTable(doc, {
@@ -63,7 +64,7 @@ export const createPaymentsTable = (
     headStyles: {
       fillColor: '#444444',
     },
-    startY: 165,
+    startY,
     styles: {
       lineWidth: 1,
     },
@@ -95,6 +96,10 @@ interface CreateInvoiceItemsTableOptions {
    * Used to add Region labels to the `Region` column
    */
   regions: Region[];
+  /**
+   * The start position of the table on the Y axis
+   */
+  startY: number;
   timezone?: string;
 }
 
@@ -104,7 +109,7 @@ interface CreateInvoiceItemsTableOptions {
 export const createInvoiceItemsTable = (
   options: CreateInvoiceItemsTableOptions
 ) => {
-  const { doc, flags, items, regions, timezone } = options;
+  const { doc, flags, items, regions, timezone, startY } = options;
 
   autoTable(doc, {
     body: items.map((item) => {
@@ -182,7 +187,7 @@ export const createInvoiceItemsTable = (
     headStyles: {
       fillColor: '#444444',
     },
-    startY: 165,
+    startY,
     styles: {
       lineWidth: 1,
     },

diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
@@ -998,8 +998,11 @@ export const handlers = [
     return res(ctx.delay(5000), ctx.json(transfer));
   }),
   rest.get('*/account/payments', (req, res, ctx) => {
+    const paymentWithLargeId = paymentFactory.build({
+      id: 123_456_789_123_456,
+    });
     const payments = paymentFactory.buildList(5);
-    return res(ctx.json(makeResourcePage(payments)));
+    return res(ctx.json(makeResourcePage([paymentWithLargeId, ...payments])));
   }),
   rest.get('*/account/invoices', (req, res, ctx) => {
     const linodeInvoice = invoiceFactory.build({
@@ -1010,7 +1013,15 @@ export const handlers = [
       date: '2022-12-16T18:04:01',
       label: 'AkamaiInvoice',
     });
-    return res(ctx.json(makeResourcePage([linodeInvoice, akamaiInvoice])));
+    const invoiceWithLargerId = invoiceFactory.build({
+      id: 123_456_789_123_456,
+      label: 'Invoice with Large ID',
+    });
+    return res(
+      ctx.json(
+        makeResourcePage([linodeInvoice, akamaiInvoice, invoiceWithLargerId])
+      )
+    );
   }),
   rest.get('*/account/invoices/:invoiceId', (req, res, ctx) => {
     const linodeInvoice = invoiceFactory.build({