From 4faa0a84125c9f5e69aba1a02259bd6dcb05ef61 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Wed, 22 Jan 2025 15:18:31 +0100
Subject: [PATCH 1/3] feat: add success dialog for creation invoice

---
 package-lock.json                             |   4 +-
 .../src/lib/create-invoice-form.svelte        | 232 ++++++++++++++++--
 2 files changed, 220 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 52edcd3a..41ebbb80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11358,7 +11358,7 @@
     },
     "packages/create-invoice-form": {
       "name": "@requestnetwork/create-invoice-form",
-      "version": "0.12.0",
+      "version": "0.12.1",
       "license": "MIT",
       "dependencies": {
         "@requestnetwork/data-format": "0.19.5",
@@ -11378,7 +11378,7 @@
     },
     "packages/invoice-dashboard": {
       "name": "@requestnetwork/invoice-dashboard",
-      "version": "0.12.0",
+      "version": "0.13.0",
       "license": "MIT",
       "dependencies": {
         "@requestnetwork/payment-detection": "0.49.0",
diff --git a/packages/create-invoice-form/src/lib/create-invoice-form.svelte b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
index 5f12fb06..b034cd0e 100644
--- a/packages/create-invoice-form/src/lib/create-invoice-form.svelte
+++ b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
@@ -23,6 +23,7 @@
     initializeCreateInvoiceCurrencyManager,
   } from "@requestnetwork/shared-utils/index";
   // Components
+  import Share from "@requestnetwork/shared-icons/share.svelte";
   import { InvoiceForm, InvoiceView } from "./invoice";
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
@@ -30,6 +31,7 @@
   import { EncryptionTypes, CipherProviderTypes } from "@requestnetwork/types";
   import { onDestroy, onMount, tick } from "svelte";
   import { CurrencyManager } from "@requestnetwork/currency";
+  import { toast } from "svelte-sonner";
 
   interface CipherProvider extends CipherProviderTypes.ICipherProvider {
     disconnectWallet: () => void;
@@ -39,6 +41,7 @@
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: string[] = [];
+  export let singleInvoicePath = "/invoice";
   let cipherProvider: CipherProvider | undefined;
 
   let account: GetAccountReturnType | undefined =
@@ -61,6 +64,9 @@
 
   let defaultCurrencies: any[] = [];
 
+  let showSuccessDialog = false;
+  let createdRequestId = "";
+
   onMount(async () => {
     currencyManager = await initializeCreateInvoiceCurrencyManager(currencies);
 
@@ -340,6 +346,11 @@
         addToStatus(APP_STATUS.PERSISTING_ON_CHAIN);
         await request.waitForConfirmation();
         addToStatus(APP_STATUS.REQUEST_CONFIRMED);
+
+        // Show success dialog after confirmation
+        createdRequestId = request.requestId;
+        removeAllStatuses();
+        showSuccessDialog = true;
       } catch (error: any) {
         if (error.message.includes("Transaction confirmation not received")) {
           isTimeout = true;
@@ -351,6 +362,10 @@
       }
     }
   };
+
+  const handleCloseSuccessDialog = () => {
+    showSuccessDialog = false;
+  };
 </script>
 
 <div
@@ -392,19 +407,77 @@
     onClose={handleCloseInvoiceModal}
   >
     <Status config={activeConfig} statuses={appStatus} />
-    <div class="modal-footer">
-      <Button
-        type="button"
-        onClick={() => handleGoToDashboard(activeConfig.dashboardLink)}
-        text="Go to dashboard"
-        disabled={!appStatus.includes(APP_STATUS.REQUEST_CONFIRMED)}
-      />
-      <Button
-        type="button"
-        onClick={hanldeCreateNewInvoice}
-        text="Create a new invoice"
-        disabled={!appStatus.includes(APP_STATUS.REQUEST_CONFIRMED)}
-      />
+  </Modal>
+  <Modal
+    title="Invoice Created Successfully!"
+    config={activeConfig}
+    isOpen={showSuccessDialog}
+    onClose={handleCloseSuccessDialog}
+    width="600px"
+  >
+    <div class="success-modal">
+      <div class="checkmark-container">
+        <svg
+          class="checkmark"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 52 52"
+        >
+          <circle
+            class="checkmark__circle"
+            cx="26"
+            cy="26"
+            r="25"
+            fill="none"
+          />
+          <path
+            class="checkmark__check"
+            fill="none"
+            d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          />
+        </svg>
+      </div>
+      <p class="success-message">
+        Your invoice has been sent to<br />
+        {formData.payeeAddress}
+      </p>
+      <p class="share-tip">
+        Did you know that sharing your invoice via link cuts payment times by
+        77%? Give it a try.
+      </p>
+
+      <div class="share-buttons">
+        <div class="copy-button-wrapper">
+          <Share
+            onClick={() => {
+              const shareUrl = `${window.location.origin}${singleInvoicePath}/${createdRequestId}`;
+              navigator.clipboard.writeText(shareUrl);
+              toast.success("Share link copied to clipboard!");
+            }}
+          />
+        </div>
+      </div>
+
+      <div class="action-buttons">
+        <button
+          class="action-button primary-button"
+          on:click={() => handleGoToDashboard(activeConfig.dashboardLink)}
+        >
+          Back to Dashboard
+        </button>
+        <button
+          class="action-button primary-button"
+          on:click={hanldeCreateNewInvoice}
+        >
+          Create New Invoice
+        </button>
+        <button
+          class="action-button primary-button"
+          on:click={() =>
+            (window.location.href = `${window.location.origin}${singleInvoicePath}/${createdRequestId}`)}
+        >
+          View Invoice
+        </button>
+      </div>
     </div>
   </Modal>
   <Modal
@@ -439,7 +512,7 @@
   </Modal>
 </div>
 
-<style>
+<style lang="scss">
   @font-face {
     font-family: "Montserrat";
     src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
@@ -500,4 +573,135 @@
     width: fit-content !important;
     height: fit-content !important;
   }
+
+  .success-modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 600px;
+    padding: 32px;
+    text-align: center;
+    background: white;
+    border-radius: 8px;
+  }
+
+  .success-modal h2 {
+    font-size: 24px;
+    margin-bottom: 24px;
+    color: #333;
+  }
+
+  .checkmark-container {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #4caf50;
+    border-radius: 50%;
+    margin-bottom: 26px;
+  }
+
+  .checkmark {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 3;
+    stroke: #fff;
+    stroke-miterlimit: 10;
+    animation: scale 0.3s ease-in-out 0.9s both;
+  }
+
+  .checkmark__circle {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-width: 3;
+    stroke-miterlimit: 10;
+    stroke: #fff;
+    fill: none;
+    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  }
+
+  .checkmark__check {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+  }
+
+  .success-message {
+    margin-bottom: 24px;
+    color: #666;
+  }
+
+  .share-tip {
+    margin-bottom: 32px;
+    color: #666;
+    font-size: 14px;
+  }
+
+  .share-buttons {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 32px;
+  }
+
+  .copy-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+  }
+
+  .action-button {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .primary-button {
+    background: var(--mainColor);
+    color: white;
+  }
+
+  .primary-button:hover {
+    opacity: 0.9;
+  }
+
+  @media (max-width: 600px) {
+    .success-modal {
+      padding: 24px;
+    }
+
+    .action-buttons {
+      flex-direction: column;
+    }
+  }
+
+  @keyframes stroke {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes scale {
+    0%,
+    100% {
+      transform: none;
+    }
+    50% {
+      transform: scale3d(1.1, 1.1, 1);
+    }
+  }
 </style>

From f58679a33a3e67718ba731984e7036a875fc4011 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Wed, 22 Jan 2025 15:54:45 +0100
Subject: [PATCH 2/3] fix: update the types of create invoice, update styles
 and logic

---
 .../src/lib/create-invoice-form.svelte        | 46 +++++++++++--------
 .../src/lib/react/CreateInvoiceForm.d.ts      |  2 +
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/create-invoice-form.svelte b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
index b034cd0e..d0d24a2b 100644
--- a/packages/create-invoice-form/src/lib/create-invoice-form.svelte
+++ b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
@@ -23,6 +23,7 @@
     initializeCreateInvoiceCurrencyManager,
   } from "@requestnetwork/shared-utils/index";
   // Components
+  import Toaster from "@requestnetwork/shared-components/sonner.svelte";
   import Share from "@requestnetwork/shared-icons/share.svelte";
   import { InvoiceForm, InvoiceView } from "./invoice";
   import Button from "@requestnetwork/shared-components/button.svelte";
@@ -289,6 +290,7 @@
 
   const hanldeCreateNewInvoice = () => {
     removeAllStatuses();
+    handleCloseSuccessDialog();
     formData = getInitialFormData();
   };
 
@@ -413,7 +415,6 @@
     config={activeConfig}
     isOpen={showSuccessDialog}
     onClose={handleCloseSuccessDialog}
-    width="600px"
   >
     <div class="success-modal">
       <div class="checkmark-container">
@@ -446,32 +447,31 @@
       </p>
 
       <div class="share-buttons">
-        <div class="copy-button-wrapper">
-          <Share
-            onClick={() => {
-              const shareUrl = `${window.location.origin}${singleInvoicePath}/${createdRequestId}`;
-              navigator.clipboard.writeText(shareUrl);
-              toast.success("Share link copied to clipboard!");
-            }}
-          />
+        <div
+          class="copy-button-wrapper"
+          on:click={() => {
+            const shareUrl = `${window.location.origin}${singleInvoicePath}/${createdRequestId}`;
+            navigator.clipboard.writeText(shareUrl);
+            toast.success("Share link copied to clipboard!");
+          }}
+        >
+          Copy the Link
+          <Share />
         </div>
       </div>
 
       <div class="action-buttons">
         <button
-          class="action-button primary-button"
+          class="primary-button"
           on:click={() => handleGoToDashboard(activeConfig.dashboardLink)}
         >
           Back to Dashboard
         </button>
-        <button
-          class="action-button primary-button"
-          on:click={hanldeCreateNewInvoice}
-        >
+        <button class="primary-button" on:click={hanldeCreateNewInvoice}>
           Create New Invoice
         </button>
         <button
-          class="action-button primary-button"
+          class="primary-button"
           on:click={() =>
             (window.location.href = `${window.location.origin}${singleInvoicePath}/${createdRequestId}`)}
         >
@@ -510,6 +510,7 @@
       />
     </div>
   </Modal>
+  <Toaster />
 </div>
 
 <style lang="scss">
@@ -651,8 +652,14 @@
 
   .copy-button-wrapper {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
+    cursor: pointer;
+    background: #f6f6f7;
+    padding: 12px 24px;
+    border-radius: 8px;
+    width: 180px;
+    font-size: 14px;
   }
 
   .action-buttons {
@@ -671,8 +678,11 @@
   }
 
   .primary-button {
-    background: var(--mainColor);
-    color: white;
+    border: none;
+    background: transparent;
+    width: fit-content;
+    color: var(--mainColor);
+    cursor: pointer;
   }
 
   .primary-button:hover {
diff --git a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
index bc5a1885..b91c7c46 100644
--- a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
+++ b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
@@ -8,6 +8,7 @@ export interface CreateInvoiceFormProps {
   config: IConfig;
   wagmiConfig: WagmiConfig;
   requestNetwork: RequestNetwork | null | undefined;
+  singleInvoicePath: string;
   currencies?: string[];
 }
 
@@ -25,6 +26,7 @@ export interface CreateInvoiceFormProps {
  *   config={config}
  *   wagmiConfig={wagmiConfig}
  *   requestNetwork={requestNetwork}
+ *   singleInvoicePath={'/invoice'}
  *   currencies={['ETH-MAINNET', 'USDC-MAINNET', 'USDC-MATIC']}
  * />
  */

From 64a22ac3051df02a87a61c1a3780341dced57edd Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Wed, 22 Jan 2025 16:16:14 +0100
Subject: [PATCH 3/3] feat: add share button to single invoice

---
 .../single-invoice/src/lib/single-invoice.svelte     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index 5771e08e..03691211 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -28,8 +28,10 @@
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
+  import Toaster from "@requestnetwork/shared-components/sonner.svelte";
   // Icons
   import Download from "@requestnetwork/shared-icons/download.svelte";
+  import Share from "@requestnetwork/shared-icons/share.svelte";
   // Utils
   import {
     formatDate,
@@ -1045,6 +1047,15 @@
             }}
           />
         </Tooltip>
+        <Tooltip text="Share Invoice">
+          <Share
+            onClick={() => {
+              const shareUrl = `${window.location.origin}${window.location.pathname}`;
+              navigator.clipboard.writeText(shareUrl);
+              toast.success("Share link copied to clipboard!");
+            }}
+          />
+        </Tooltip>
       </h2>
       <div class="invoice-address">
         <h2>From:</h2>
@@ -1353,6 +1364,7 @@
     </div>
   </Modal>
 {/if}
+<Toaster />
 
 <style>
   .innerDrawer {