From abf19644261f08e63d8961da04a4875abdabb8d5 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 27 Sep 2024 16:01:28 +0300
Subject: [PATCH 1/4] feat: add receipt export and viewing on request scan

---
 .../src/lib/dashboard/invoice-view.svelte     |  5 +-
 .../src/lib/view-requests.svelte              | 10 +-
 packages/invoice-dashboard/src/utils/index.ts |  1 -
 .../lib/components/payment-complete.svelte    | 79 ++++++++++++++-
 .../components/payment-confirmation.svelte    |  3 +
 .../src/lib/payment-widget.svelte             | 12 ++-
 .../src/lib/react/PaymentWidget.d.ts          |  2 +
 .../payment-widget/src/lib/utils/request.ts   | 10 +-
 .../src => shared}/utils/generateInvoice.ts   | 99 ++++++++++++-------
 .../src => shared}/utils/getCurrency.ts       |  0
 10 files changed, 173 insertions(+), 48 deletions(-)
 rename {packages/invoice-dashboard/src => shared}/utils/generateInvoice.ts (55%)
 rename {packages/invoice-dashboard/src => shared}/utils/getCurrency.ts (100%)

diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
index 510f2239..eefc3663 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -20,13 +20,14 @@
   // Utils
   import { formatDate } from "@requestnetwork/shared-utils/formatDate";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
+  import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
+  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
   // Types
   import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
 
   import { onMount } from "svelte";
   import { formatUnits } from "viem";
-  import { exportToPDF, walletClientToSigner } from "../../utils";
-  import { getCurrencyFromManager } from "../../utils/getCurrency";
+  import { walletClientToSigner } from "../../utils";
 
   export let config;
   export let wallet: WalletState | undefined;
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index bb5e9ef5..d043b57f 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -25,14 +25,16 @@
   // Utils
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
+  import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
+  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
 
   import { CurrencyManager } from "@requestnetwork/currency";
   import type { RequestNetwork } from "@requestnetwork/request-client.js";
   import { Types } from "@requestnetwork/request-client.js";
   import { onMount } from "svelte";
   import { formatUnits } from "viem";
-  import { capitalize, debounce, exportToPDF, formatAddress } from "../utils";
-  import { getCurrencyFromManager } from "../utils/getCurrency";
+  import { capitalize, debounce, formatAddress } from "../utils";
+
   import { Drawer, InvoiceView } from "./dashboard";
 
   export let config: IConfig;
@@ -515,8 +517,8 @@
                         <span
                           >{formatAddress(
                             currentTab === "Pay"
-                              ? (request.payee?.value ?? "")
-                              : (request.payer?.value ?? "")
+                              ? request.payee?.value ?? ""
+                              : request.payer?.value ?? ""
                           )}</span
                         >
                         <Copy
diff --git a/packages/invoice-dashboard/src/utils/index.ts b/packages/invoice-dashboard/src/utils/index.ts
index 8c51d54e..d4900482 100644
--- a/packages/invoice-dashboard/src/utils/index.ts
+++ b/packages/invoice-dashboard/src/utils/index.ts
@@ -1,5 +1,4 @@
 export { debounce } from "./debounce";
 export { formatAddress } from "./formatAddress";
-export { exportToPDF } from "./generateInvoice";
 export { publicClientToProvider, walletClientToSigner } from "./wallet-utils";
 export { capitalize } from "./capitalize";
diff --git a/packages/payment-widget/src/lib/components/payment-complete.svelte b/packages/payment-widget/src/lib/components/payment-complete.svelte
index c395f46a..132b713e 100644
--- a/packages/payment-widget/src/lib/components/payment-complete.svelte
+++ b/packages/payment-widget/src/lib/components/payment-complete.svelte
@@ -1,5 +1,31 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
+  import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
+  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
+  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
+
+  export let createdRequest: any;
+  export let enablePdfReceipt: boolean = true;
+  export let enableRequestScanLink: boolean = true;
+  export let sellerLogo: string | undefined;
+
+  async function handleDownloadReceipt() {
+    if (createdRequest) {
+      try {
+        const currencyManager = initializeCurrencyManager([]);
+
+        const currencyData = createdRequest?.inMemoryInfo?.requestData;
+
+        await exportToPDF(
+          currencyData,
+          getCurrencyFromManager(currencyData.currencyInfo, currencyManager),
+          sellerLogo!
+        );
+      } catch (error) {
+        console.error("Error downloading receipt:", error);
+      }
+    }
+  }
 </script>
 
 <div class="payment-complete" transition:fade={{ duration: 300 }}>
@@ -19,9 +45,24 @@
   </div>
   <h2>Payment Complete</h2>
   <p>Thank you for your payment. Your transaction was successful.</p>
+
+  {#if enablePdfReceipt || (enableRequestScanLink && createdRequest)}
+    <div class="buttons-container">
+      {#if enablePdfReceipt}
+        <button on:click={handleDownloadReceipt}>Download Receipt</button>
+      {/if}
+      {#if enableRequestScanLink && createdRequest}
+        <a
+          href={`https://scan.request.network/request/${createdRequest.requestId}`}
+        >
+          View on Request Scan
+        </a>
+      {/if}
+    </div>
+  {/if}
 </div>
 
-<style>
+<style lang="scss">
   .payment-complete {
     display: flex;
     flex-direction: column;
@@ -41,6 +82,42 @@
     border-radius: 50%;
   }
 
+  .buttons-container {
+    display: flex;
+    gap: 16px;
+    margin-top: 24px;
+
+    button,
+    a {
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition: background-color 0.3s ease;
+    }
+
+    button {
+      background-color: #0bb489;
+      color: white;
+      border: none;
+      cursor: pointer;
+
+      &:hover {
+        background-color: darken(#0bb489, 10%);
+      }
+    }
+
+    a {
+      background-color: #f5f5f5;
+      color: #333;
+
+      &:hover {
+        background-color: darken(#f5f5f5, 10%);
+      }
+    }
+  }
+
   h2 {
     margin-top: 1rem;
     font-size: 1.5rem;
diff --git a/packages/payment-widget/src/lib/components/payment-confirmation.svelte b/packages/payment-widget/src/lib/components/payment-confirmation.svelte
index 2ec6cd8a..a2ebea16 100644
--- a/packages/payment-widget/src/lib/components/payment-confirmation.svelte
+++ b/packages/payment-widget/src/lib/components/payment-confirmation.svelte
@@ -39,6 +39,7 @@
   export let invoiceNumber: string | undefined;
   export let feeAddress: string;
   export let feeAmountInUSD: number;
+  export let createdRequest: any;
 
   const COUNTDOWN_INTERVAL = 30;
 
@@ -275,6 +276,8 @@
             persistRequest,
           });
 
+          createdRequest = request;
+
           if (onPaymentSuccess) {
             onPaymentSuccess(request);
           }
diff --git a/packages/payment-widget/src/lib/payment-widget.svelte b/packages/payment-widget/src/lib/payment-widget.svelte
index c0b502ea..2250ca8c 100644
--- a/packages/payment-widget/src/lib/payment-widget.svelte
+++ b/packages/payment-widget/src/lib/payment-widget.svelte
@@ -39,6 +39,8 @@
   export let invoiceNumber: string | undefined = undefined;
   export let feeAddress: string = ethers.constants.AddressZero;
   export let feeAmountInUSD: number = 0;
+  export let enablePdfReceipt: boolean = true;
+  export let enableRequestScanLink: boolean = true;
 
   // State
   let web3Modal: Web3Modal | null = null;
@@ -47,7 +49,7 @@
   let selectedCurrency: Currency | null = null;
   let connectionCheckInterval: ReturnType<typeof setInterval> | null = null;
   let currentPaymentStep: PaymentStep = "currency";
-
+  let createdRequest: any;
   let scrollPosition = 0;
 
   // Effects
@@ -246,12 +248,18 @@
         onPaymentError={onError}
         bind:currentPaymentStep
         bind:isConnected
+        bind:createdRequest
         {sellerInfo}
         buyerInfo={currentBuyerInfo}
         {invoiceNumber}
       />
     {:else}
-      <PaymentComplete />
+      <PaymentComplete
+        {createdRequest}
+        {enablePdfReceipt}
+        {enableRequestScanLink}
+        sellerLogo={sellerInfo.logo}
+      />
     {/if}
   </Modal>
 </section>
diff --git a/packages/payment-widget/src/lib/react/PaymentWidget.d.ts b/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
index 171f49a6..8e581ffb 100644
--- a/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
+++ b/packages/payment-widget/src/lib/react/PaymentWidget.d.ts
@@ -23,6 +23,8 @@ export interface PaymentWidgetProps {
   invoiceNumber?: string;
   feeAddress?: string;
   feeAmountInUSD?: number;
+  enablePdfReceipt?: boolean;
+  enableRequestScanLink?: boolean;
 }
 
 /**
diff --git a/packages/payment-widget/src/lib/utils/request.ts b/packages/payment-widget/src/lib/utils/request.ts
index cd3e5514..b3ce4c86 100644
--- a/packages/payment-widget/src/lib/utils/request.ts
+++ b/packages/payment-widget/src/lib/utils/request.ts
@@ -276,7 +276,7 @@ export const handleRequestPayment = async ({
     skipPersistence: true,
   });
 
-  const inMemoryRequest =
+  let inMemoryRequest =
     await inMemoryRequestNetwork.createRequest(requestParameters);
 
   const signer = await ethersProvider!.getSigner();
@@ -328,6 +328,14 @@ export const handleRequestPayment = async ({
     await persistingRequestNetwork.persistRequest(inMemoryRequest);
   }
 
+  if (inMemoryRequest?.inMemoryInfo?.requestData) {
+    inMemoryRequest.inMemoryInfo.requestData = {
+      ...inMemoryRequest.inMemoryInfo.requestData,
+      payer: requestParameters.requestInfo.payer,
+      payee: requestParameters.requestInfo.payee,
+    };
+  }
+
   return inMemoryRequest;
 };
 
diff --git a/packages/invoice-dashboard/src/utils/generateInvoice.ts b/shared/utils/generateInvoice.ts
similarity index 55%
rename from packages/invoice-dashboard/src/utils/generateInvoice.ts
rename to shared/utils/generateInvoice.ts
index 18f61d0f..bfbd2d70 100644
--- a/packages/invoice-dashboard/src/utils/generateInvoice.ts
+++ b/shared/utils/generateInvoice.ts
@@ -1,6 +1,5 @@
 import { formatUnits } from "viem";
-import { loadScript } from "./loadScript";
-import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
+import { calculateItemTotal } from "./invoiceTotals";
 
 declare global {
   interface Window {
@@ -8,6 +7,16 @@ declare global {
   }
 }
 
+const loadScript = (src: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+    document.head.appendChild(script);
+  });
+};
+
 async function ensureHtml2PdfLoaded() {
   if (typeof window.html2pdf === "undefined") {
     await loadScript(
@@ -19,7 +28,7 @@ async function ensureHtml2PdfLoaded() {
 export const exportToPDF = async (
   invoice: any,
   currency: any,
-  logo: string
+  logo: string | undefined
 ) => {
   await ensureHtml2PdfLoaded();
 
@@ -40,15 +49,31 @@ export const exportToPDF = async (
   const content = `
     <html>
     <head>
-      <link rel="preconnect" href="https://fonts.googleapis.com" /> 
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-      <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
+      <meta charset="UTF-8">
       <style>
-        body { font-family: 'Urbanist', sans-serif; }
+        @import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
+        body { 
+          font-family: 'Urbanist', sans-serif; 
+          font-size: 10px; 
+        }
+        table { 
+          table-layout: fixed; 
+          width: 100%; 
+          border-collapse: collapse;
+        }
+        td, th { 
+          word-wrap: break-word; 
+          border: 1px solid #ddd; 
+          padding: 4px;
+        }
+        th {
+          background-color: #f2f2f2;
+          text-align: left;
+        }
       </style>
     </head>
     <body>
-    <div id="invoice" style="max-width: 800px; margin: 0 auto; padding: 20px;">
+    <div id="invoice" style="max-width: 680px; margin: 0 auto; padding: 20px;">
       <div style="display: flex; justify-content: space-between; align-items: start;">
         ${logo ? `<img src="${logo}" alt="Logo" style="width: 50px; height: 50px;">` : ""}
         <div style="text-align: right;">
@@ -57,43 +82,43 @@ export const exportToPDF = async (
         </div>
       </div>
 
-      <h1 style="text-align: center; color: #333; font-size: 28px; font-weight: bold; margin-bottom: 14px;">INVOICE #${
+      <h1 style="text-align: center; color: #333; font-size: 24px; font-weight: bold; margin-bottom: 14px;">INVOICE #${
         invoice.contentData?.invoiceNumber || "-"
       }</h1>
 
       <div style="display: flex; justify-content: space-between; margin-bottom: 20px; background-color: #FBFBFB; padding: 10px;">
-        <div>
+        <div style="width: 48%;">
           <strong>From:</strong><br>
-          <p style="font-size: 14px">${invoice.payee?.value || "-"}</p>
-          ${invoice.contentData?.sellerInfo?.firstName || ""} ${invoice.contentData?.sellerInfo?.lastName || ""}<br>
-          ${renderAddress(invoice.contentData?.sellerInfo)}<br>
-          ${invoice.contentData?.sellerInfo?.taxRegistration ? `VAT: ${invoice.contentData.sellerInfo.taxRegistration}` : ""}
+          <p style="font-size: 10px; margin: 3px 0; word-break: break-all;">${invoice.payee?.value || "-"}</p>
+          <p style="font-size: 10px; margin: 3px 0;">${invoice.contentData?.sellerInfo?.firstName || ""} ${invoice.contentData?.sellerInfo?.lastName || ""}</p>
+          <p style="font-size: 10px; margin: 3px 0;">${renderAddress(invoice.contentData?.sellerInfo)}</p>
+          ${invoice.contentData?.sellerInfo?.taxRegistration ? `<p style="font-size: 10px; margin: 3px 0;">VAT: ${invoice.contentData.sellerInfo.taxRegistration}</p>` : ""}
         </div>
 
-        <div>
+        <div style="width: 48%;">
           <strong>To:</strong><br>
-          <p style="font-size: 14px">${invoice.payer?.value || "-"}</p>
-          ${invoice.contentData?.buyerInfo?.firstName || ""} ${invoice.contentData?.buyerInfo?.lastName || ""}<br>
-          ${renderAddress(invoice.contentData?.buyerInfo)}<br>
-          ${invoice.contentData?.buyerInfo?.taxRegistration ? `VAT: ${invoice.contentData.buyerInfo.taxRegistration}` : ""}
+          <p style="font-size: 10px; margin: 3px 0; word-break: break-all;">${invoice.payer?.value || "-"}</p>
+          <p style="font-size: 10px; margin: 3px 0;">${invoice.contentData?.buyerInfo?.firstName || ""} ${invoice.contentData?.buyerInfo?.lastName || ""}</p>
+          <p style="font-size: 10px; margin: 3px 0;">${renderAddress(invoice.contentData?.buyerInfo)}</p>
+          ${invoice.contentData?.buyerInfo?.taxRegistration ? `<p style="font-size: 10px; margin: 3px 0;">VAT: ${invoice.contentData.buyerInfo.taxRegistration}</p>` : ""}
         </div>
       </div>
       
-      <div style="margin-bottom: 20px;">
+      <div style="margin-bottom: 20px; font-size: 10px;">
         <strong>Payment Chain:</strong> ${invoice.currencyInfo?.network || "-"}<br>
         <strong>Invoice Currency:</strong> ${invoice.currency || "-"}<br>
         <strong>Invoice Type:</strong> Regular Invoice
       </div>
       
-      <table style="width: 100%; border-collapse: collapse;">
+      <table>
         <thead>
-          <tr style="background-color: #f2f2f2;">
-            <th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Description</th>
-            <th style="border: 1px solid #ddd; padding: 8px; text-align: right;">Quantity</th>
-            <th style="border: 1px solid #ddd; padding: 8px; text-align: right;">Unit Price</th>
-            <th style="border: 1px solid #ddd; padding: 8px; text-align: right;">Discount</th>
-            <th style="border: 1px solid #ddd; padding: 8px; text-align: right;">Tax</th>
-            <th style="border: 1px solid #ddd; padding: 8px; text-align: right;">Amount</th>
+          <tr>
+            <th style="width: 25%;">Description</th>
+            <th style="width: 10%; text-align: right;">Quantity</th>
+            <th style="width: 20%; text-align: right;">Unit Price</th>
+            <th style="width: 15%; text-align: right;">Discount</th>
+            <th style="width: 10%; text-align: right;">Tax</th>
+            <th style="width: 20%; text-align: right;">Amount</th>
           </tr>
         </thead>
         <tbody>
@@ -101,22 +126,22 @@ export const exportToPDF = async (
             .map(
               (item: any) => `
             <tr>
-              <td style="border: 1px solid #ddd; padding: 8px;">${item.name || "-"}</td>
-              <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">${item.quantity || "-"}</td>
-              <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">${
+              <td>${item.name || "-"}</td>
+              <td style="text-align: right;">${item.quantity || "-"}</td>
+              <td style="text-align: right;">${
                 item.unitPrice
                   ? formatUnits(BigInt(item.unitPrice), currency?.decimals || 0)
                   : "-"
               }</td>
-              <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">${
+              <td style="text-align: right;">${
                 item.discount
                   ? formatUnits(BigInt(item.discount), currency?.decimals || 0)
                   : "-"
               }</td>
-              <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">${
+              <td style="text-align: right;">${
                 item.tax?.amount ? `${item.tax.amount}%` : "-"
               }</td>
-              <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">${
+              <td style="text-align: right;">${
                 item
                   ? formatUnits(
                       BigInt(calculateItemTotal(item)),
@@ -131,8 +156,8 @@ export const exportToPDF = async (
         </tbody>
         <tfoot>
           <tr>
-            <td colspan="5" style="border: 1px solid #ddd; padding: 8px; text-align: right;"><strong>Due:</strong></td>
-            <td style="border: 1px solid #ddd; padding: 8px; text-align: right;"><strong>${
+            <td colspan="5" style="text-align: right;"><strong>Due:</strong></td>
+            <td style="text-align: right;"><strong>${
               invoice.expectedAmount
                 ? `${formatUnits(BigInt(invoice.expectedAmount), currency?.decimals || 0)} ${invoice.currency || ""}`
                 : "-"
@@ -143,7 +168,7 @@ export const exportToPDF = async (
       
       ${
         invoice.contentData?.note
-          ? `<div style="margin-top: 20px;">
+          ? `<div style="margin-top: 20px; font-size: 10px;">
         <h3>Note:</h3>
         <p>${invoice.contentData.note}</p>
       </div>`
diff --git a/packages/invoice-dashboard/src/utils/getCurrency.ts b/shared/utils/getCurrency.ts
similarity index 100%
rename from packages/invoice-dashboard/src/utils/getCurrency.ts
rename to shared/utils/getCurrency.ts

From 76ced699cf4fd0c44eb0d120e4b71932d00939c2 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Fri, 27 Sep 2024 16:30:25 +0300
Subject: [PATCH 2/4] fix: open request scan link in a new tab

---
 .../payment-widget/src/lib/components/payment-complete.svelte   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/payment-widget/src/lib/components/payment-complete.svelte b/packages/payment-widget/src/lib/components/payment-complete.svelte
index 132b713e..649764e0 100644
--- a/packages/payment-widget/src/lib/components/payment-complete.svelte
+++ b/packages/payment-widget/src/lib/components/payment-complete.svelte
@@ -53,6 +53,8 @@
       {/if}
       {#if enableRequestScanLink && createdRequest}
         <a
+          target="_blank"
+          rel="noopener noreferrer"
           href={`https://scan.request.network/request/${createdRequest.requestId}`}
         >
           View on Request Scan

From 87296adca07843b969d504cd728d7dbb23b2ca0c Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Wed, 2 Oct 2024 16:16:59 +0300
Subject: [PATCH 3/4] fix: add extra checks on logo

---
 .../payment-widget/src/lib/components/payment-complete.svelte | 4 ++--
 shared/utils/generateInvoice.ts                               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/payment-widget/src/lib/components/payment-complete.svelte b/packages/payment-widget/src/lib/components/payment-complete.svelte
index 649764e0..722a6457 100644
--- a/packages/payment-widget/src/lib/components/payment-complete.svelte
+++ b/packages/payment-widget/src/lib/components/payment-complete.svelte
@@ -7,7 +7,7 @@
   export let createdRequest: any;
   export let enablePdfReceipt: boolean = true;
   export let enableRequestScanLink: boolean = true;
-  export let sellerLogo: string | undefined;
+  export let sellerLogo: string = "";
 
   async function handleDownloadReceipt() {
     if (createdRequest) {
@@ -19,7 +19,7 @@
         await exportToPDF(
           currencyData,
           getCurrencyFromManager(currencyData.currencyInfo, currencyManager),
-          sellerLogo!
+          sellerLogo
         );
       } catch (error) {
         console.error("Error downloading receipt:", error);
diff --git a/shared/utils/generateInvoice.ts b/shared/utils/generateInvoice.ts
index bfbd2d70..b328f9f1 100644
--- a/shared/utils/generateInvoice.ts
+++ b/shared/utils/generateInvoice.ts
@@ -75,7 +75,7 @@ export const exportToPDF = async (
     <body>
     <div id="invoice" style="max-width: 680px; margin: 0 auto; padding: 20px;">
       <div style="display: flex; justify-content: space-between; align-items: start;">
-        ${logo ? `<img src="${logo}" alt="Logo" style="width: 50px; height: 50px;">` : ""}
+        ${logo && logo.length > 0 ? `<img src="${logo}" alt="Logo" style="width: 50px; height: 50px;">` : ""}
         <div style="text-align: right;">
           <p>Issued on ${formatDate(invoice.contentData?.creationDate)}</p>
           <p>Payment due by ${formatDate(invoice.contentData?.paymentTerms?.dueDate)}</p>

From 4744d62fd0d4d4d9e8f607d1ec8ba45e1e7f53d1 Mon Sep 17 00:00:00 2001
From: Aimen Sahnoun <aimensahnoun@outlook.com>
Date: Thu, 3 Oct 2024 12:36:28 +0300
Subject: [PATCH 4/4] feat: add sonner when errors happens

---
 .../lib/components/payment-complete.svelte    | 11 ++++++-
 shared/components/app.css                     | 31 -------------------
 shared/components/sonner.svelte               |  2 --
 shared/components/tailwind.config.ts          |  2 --
 4 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/packages/payment-widget/src/lib/components/payment-complete.svelte b/packages/payment-widget/src/lib/components/payment-complete.svelte
index 722a6457..73e9fca3 100644
--- a/packages/payment-widget/src/lib/components/payment-complete.svelte
+++ b/packages/payment-widget/src/lib/components/payment-complete.svelte
@@ -3,6 +3,8 @@
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
+  import Toaster from "@requestnetwork/shared-components/sonner.svelte";
+  import { toast } from "svelte-sonner";
 
   export let createdRequest: any;
   export let enablePdfReceipt: boolean = true;
@@ -22,12 +24,19 @@
           sellerLogo
         );
       } catch (error) {
-        console.error("Error downloading receipt:", error);
+        toast.error(`Failed to export PDF`, {
+          description: `${error}`,
+          action: {
+            label: "X",
+            onClick: () => console.info("Close"),
+          },
+        });
       }
     }
   }
 </script>
 
+<Toaster />
 <div class="payment-complete" transition:fade={{ duration: 300 }}>
   <div class="checkmark-container">
     <svg
diff --git a/shared/components/app.css b/shared/components/app.css
index d5d13890..83c03692 100644
--- a/shared/components/app.css
+++ b/shared/components/app.css
@@ -35,37 +35,6 @@
 
     --radius: 0.5rem;
   }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: hsl(212.7, 26.8%, 83.9);
-  }
 }
 
 @layer base {
diff --git a/shared/components/sonner.svelte b/shared/components/sonner.svelte
index 1fc9b499..c96b54ff 100644
--- a/shared/components/sonner.svelte
+++ b/shared/components/sonner.svelte
@@ -3,14 +3,12 @@
     Toaster as Sonner,
     type ToasterProps as SonnerProps,
   } from "svelte-sonner";
-  import { mode } from "mode-watcher";
 
   type $$Props = SonnerProps;
   import "./app.css";
 </script>
 
 <Sonner
-  theme={$mode}
   class="toaster group"
   toastOptions={{
     classes: {
diff --git a/shared/components/tailwind.config.ts b/shared/components/tailwind.config.ts
index b656a366..f9828a03 100644
--- a/shared/components/tailwind.config.ts
+++ b/shared/components/tailwind.config.ts
@@ -2,9 +2,7 @@ import { fontFamily } from "tailwindcss/defaultTheme";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: ["class"],
   content: ["./src/**/*.{html,js,svelte,ts}"],
-  safelist: ["dark"],
   theme: {
     container: {
       center: true,