From 737d779352ad1c8e26f4ce282e62da162e8504aa Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Fri, 30 Jun 2023 13:48:25 -0400
Subject: [PATCH 1/2] only request image once for invoice pdf

---
 .../BillingActivityPanel.tsx                  |  9 +++--
 .../Billing/InvoiceDetail/InvoiceDetail.tsx   |  4 +--
 .../Billing/PdfGenerator/PdfGenerator.ts      | 34 ++++++++++++++++---
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
index ab6667a8ff9..ea657e28c2d 100644
--- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx
@@ -239,10 +239,15 @@ export const BillingActivityPanel = (props: Props) => {
       pdfLoading.add(id);
 
       getAllInvoiceItems(invoiceId)
-        .then((invoiceItems) => {
+        .then(async (invoiceItems) => {
           pdfLoading.delete(id);
 
-          const result = printInvoice(account!, invoice, invoiceItems, taxes);
+          const result = await printInvoice(
+            account!,
+            invoice,
+            invoiceItems,
+            taxes
+          );
 
           if (result.status === 'error') {
             pdfErrors.add(id);
diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
index 9c414c9781c..a80a0117194 100644
--- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
+++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -76,14 +76,14 @@ export const InvoiceDetail = () => {
     requestData();
   }, []);
 
-  const printInvoicePDF = (
+  const printInvoicePDF = async (
     account: Account,
     invoice: Invoice,
     items: InvoiceItem[]
   ) => {
     const taxes =
       flags[getShouldUseAkamaiBilling(invoice.date) ? 'taxes' : 'taxBanner'];
-    const result = printInvoice(account, invoice, items, taxes);
+    const result = await printInvoice(account, invoice, items, taxes);
 
     setPDFGenerationError(result.status === 'error' ? result.error : undefined);
   };
diff --git a/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts b/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
index 2b1fee400d2..3b135169f4b 100644
--- a/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
+++ b/packages/manager/src/features/Billing/PdfGenerator/PdfGenerator.ts
@@ -4,6 +4,7 @@ import {
   InvoiceItem,
   Payment,
 } from '@linode/api-v4/lib/account';
+import axios from 'axios';
 import jsPDF from 'jspdf';
 import { splitEvery } from 'ramda';
 import { ADDRESSES } from 'src/constants';
@@ -13,6 +14,7 @@ import formatDate from 'src/utilities/formatDate';
 import { getShouldUseAkamaiBilling } from '../billingUtils';
 import AkamaiLogo from './akamai-logo.png';
 import {
+  PdfResult,
   createFooter,
   createInvoiceItemsTable,
   createInvoiceTotalsTable,
@@ -20,7 +22,6 @@ import {
   createPaymentsTotalsTable,
   dateConversion,
   pageMargin,
-  PdfResult,
 } from './utils';
 
 const baseFont = 'helvetica';
@@ -164,13 +165,25 @@ const addTitle = (doc: jsPDF, y: number, ...textStrings: Title[]) => {
   doc.setFont(baseFont, 'normal');
 };
 
-export const printInvoice = (
+// M3-6177 only make one request to get the logo
+const getAkamaiLogo = () => {
+  return axios
+    .get(AkamaiLogo, { responseType: 'blob' })
+    .then((res) => {
+      return URL.createObjectURL(res.data);
+    })
+    .catch(() => {
+      return AkamaiLogo;
+    });
+};
+
+export const printInvoice = async (
   account: Account,
   invoice: Invoice,
   items: InvoiceItem[],
   taxes: FlagSet['taxBanner'] | FlagSet['taxes'],
   timezone?: string
-): PdfResult => {
+): Promise<PdfResult> => {
   try {
     const itemsPerPage = 12;
     const date = formatDate(invoice.date, {
@@ -217,9 +230,20 @@ export const printInvoice = (
       ? taxes?.provincial_tax_ids?.[account.state]
       : undefined;
 
+    const AkamaiLogoURL = await getAkamaiLogo();
+
     // Create a separate page for each set of invoice items
     itemsChunks.forEach((itemsChunk, index) => {
-      doc.addImage(AkamaiLogo, 'JPEG', 160, 10, 120, 40, undefined, "MEDIUM");
+      doc.addImage(
+        AkamaiLogoURL,
+        'JPEG',
+        160,
+        10,
+        120,
+        40,
+        undefined,
+        'MEDIUM'
+      );
 
       const leftHeaderYPosition = addLeftHeader(
         doc,
@@ -277,7 +301,7 @@ export const printPayment = (
     });
     doc.setFontSize(10);
 
-    doc.addImage(AkamaiLogo, 'JPEG', 160, 10, 120, 40, undefined, "MEDIUM");
+    doc.addImage(AkamaiLogo, 'JPEG', 160, 10, 120, 40, undefined, 'MEDIUM');
 
     const leftHeaderYPosition = addLeftHeader(
       doc,

From a3397239274a07a5f62bf5d8974ae3cc904c931c Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Fri, 30 Jun 2023 13:59:04 -0400
Subject: [PATCH 2/2] Added changeset: Only request logo once for invoice pdf

---
 packages/manager/.changeset/pr-9355-fixed-1688147944694.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9355-fixed-1688147944694.md

diff --git a/packages/manager/.changeset/pr-9355-fixed-1688147944694.md b/packages/manager/.changeset/pr-9355-fixed-1688147944694.md
new file mode 100644
index 00000000000..62e5bb64338
--- /dev/null
+++ b/packages/manager/.changeset/pr-9355-fixed-1688147944694.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Only request logo once for invoice pdf ([#9355](https://github.com/linode/manager/pull/9355))