feat: Improve Payment Status Indicators on Invoice Dashboard

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -21,6 +21,7 @@
   // Icons
   import Check from "@requestnetwork/shared-icons/check.svelte";
   import Download from "@requestnetwork/shared-icons/download.svelte";
+  import InfoCircle from "@requestnetwork/shared-icons/info-circle.svelte";
   // Utils
   import { formatDate } from "@requestnetwork/shared-utils/formatDate";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
@@ -53,7 +54,6 @@
   let currency: CurrencyTypes.CurrencyDefinition | undefined =
     getCurrencyFromManager(request.currencyInfo, currencyManager);
   let paymentCurrencies: (CurrencyTypes.CurrencyDefinition | undefined)[] = [];
-  let statuses: any = [];
   let isPaid = false;
   let loading = false;
   let requestData: any = null;
@@ -72,6 +72,23 @@
   let paymentNetworkExtension:
     | Types.Extension.IPaymentNetworkState<any>
     | undefined;
+  let statuses: any[] = [
+    {
+      name: "SIGN_TRANSACTION",
+      message: "Sign Transaction",
+      done: false,
+    },
+    {
+      name: "PAYMENT_DETECTED",
+      message: "Payment Detected",
+      done: false,
+    },
+    {
+      name: "CORRECT_NETWORK",
+      message: "Correct Network",
+      done: false,
+    },
+  ];
 
   const generateDetailParagraphs = (info: any) => {
     const fullName = [info?.firstName, info?.lastName]
@@ -124,6 +141,7 @@
 
   onMount(() => {
     checkInvoice();
+    updateStatuses();
   });
 
   $: request, checkInvoice();
@@ -193,7 +211,7 @@
         unsupportedNetwork = true;
       }
     } finally {
-      loading = false;
+      // loading = false;
     }
   };
 
@@ -204,7 +222,7 @@
         requestData?.requestId!
       );
 
-      statuses = [...statuses, "Waiting for payment"];
+      // statuses = [...statuses, "SIGN_TRANSACTION"];
 
       let paymentSettings = undefined;
       if (
@@ -233,13 +251,14 @@
       );
       await paymentTx.wait();
 
-      statuses = [...statuses, "Payment detected"];
+      // statuses = [...statuses, "PAYMENT_DETECTED"];
+
       while (requestData.balance?.balance! < requestData.expectedAmount) {
         requestData = await _request?.refresh();
         await new Promise((resolve) => setTimeout(resolve, 1000));
       }
 
-      statuses = [...statuses, "Payment confirmed"];
+      // statuses = [...statuses, "CORRECT_NETWORK"];
       isPaid = true;
       loading = false;
       statuses = [];
@@ -351,6 +370,28 @@
       ? `${integerPart}.${decimalPart.substring(0, maxDecimalDigits)}`
       : value;
   }
+
+  const currentStatusIndex = statuses.length - 1;
+
+  const getStatusColor = (index: number) => {
+    if (statuses[index].done) return "green";
+    return "blue";
+  };
+
+  const updateStatuses = async () => {
+    statuses[0].done = true;
+    statuses = statuses;
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    statuses[1].done = true;
+    statuses = statuses;
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    statuses[2].done = true;
+    statuses = statuses;
+  };
 </script>
 
 <div
@@ -572,23 +613,30 @@
   <div class="status-container">
     <div class="statuses">
       {#if statuses.length > 0 && loading}
-        {#each statuses as status, index (index)}
-          <div class="status">
-            {status || "-"}
-            {#if (index === 0 && statuses.length === 2) || (index === 1 && statuses.length === 3)}
-              <i>
-                <Check />
-              </i>
-            {/if}
-          </div>
-        {/each}
+        <div class="status-wrapper">
+          <ol class="status-list">
+            {#each statuses as status, index}
+              <li class="status-item">
+                <span class={`status-icon-wrapper ${getStatusColor(index)}`}>
+                  {#if status.done}
+                    <Check />
+                  {:else}
+                    <InfoCircle />
+                  {/if}
+                </span>
+                <span class="status-text">{status.message}</span>
+                {#if index < 2}
+                  <div class={`progress-line ${getStatusColor(index)}`}></div>
+                {/if}
+              </li>
+            {/each}
+          </ol>
+        </div>
       {/if}
     </div>
 
     <div class="invoice-view-actions">
-      {#if loading}
-        <div class="loading">Loading...</div>
-      {:else if !correctChain && !isPayee}
+      {#if !correctChain && !isPayee}
         <Button
           type="button"
           text="Switch Network"
@@ -812,7 +860,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    justify-content: space-between;
+    justify-content: center;
     margin-top: 1rem;
   }
 
@@ -851,17 +899,6 @@
     height: fit-content !important;
   }
 
-  .loading {
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-align: center;
-    border-radius: 0.5rem;
-    background-color: var(--mainColor);
-    color: white;
-    animation: pulse 1s infinite;
-  }
-
   .unsupported-network {
     font-size: 12px;
     color: #e89e14ee;
@@ -908,4 +945,63 @@
   .email-link:hover {
     text-decoration: underline;
   }
+
+  .status-wrapper {
+    margin-bottom: 32px;
+  }
+
+  .status-list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+  }
+
+  .status-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-align: center; /* Center text under icons */
+    width: 150px;
+  }
+
+  .progress-line {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 6px;
+    background-color: #759aff; /* Default line color */
+    z-index: 0;
+    transform: translateX(-50%);
+    width: 180px;
+    border-radius: 100px;
+    z-index: 10;
+  }
+
+  .status-icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 29px;
+    height: 29px;
+    background-color: #dbeafe;
+    border-radius: 9999px;
+    padding: 4px;
+    box-shadow: 0 0 0 8px white;
+    position: relative;
+    z-index: 20;
+  }
+
+  .status-text {
+    font-size: 14px; /* Adjust font size */
+    color: #272d41; /* Text color */
+    position: absolute;
+    top: -30px;
+    left: -25px;
+  }
+
+  .checkmark {
+    margin-left: 5px; /* Space between icon and checkmark */
+    color: #58e1a5; /* Checkmark color */
+  }
 </style>