fix: added missing functions, updated styles for every status

Author: sstefdev

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

@@ -15,13 +15,15 @@
   import { CurrencyTypes } from "@requestnetwork/types";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   // Components
+  import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
   // Icons
   import Check from "@requestnetwork/shared-icons/check.svelte";
   import Download from "@requestnetwork/shared-icons/download.svelte";
   // Utils
+  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { formatDate } from "@requestnetwork/shared-utils/formatDate";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
@@ -367,9 +369,7 @@
   </div>
   <h2 class="invoice-number">
     Invoice #{request?.contentData?.invoiceNumber || "-"}
-    <p class={`invoice-status ${isPaid ? "bg-green" : "bg-zinc"}`}>
-      {isPaid ? "Paid" : "Created"}
-    </p>
+    <StatusLabel status={checkStatus(request)} />
     <Tooltip text="Download PDF">
       <Download
         onClick={async () => {
@@ -646,21 +646,6 @@
     height: 13px;
   }
 
-  .invoice-status {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1;
-    text-align: center;
-    border-radius: 8px;
-    color: #ffffff;
-    width: fit-content;
-    margin: 0;
-  }
-
   .invoice-address {
     display: flex;
     flex-direction: column;

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

@@ -9,6 +9,7 @@
   import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
   import Input from "@requestnetwork/shared-components/input.svelte";
   import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
+  import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
   import Skeleton from "@requestnetwork/shared-components/skeleton.svelte";
   import Toaster from "@requestnetwork/shared-components/sonner.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
@@ -34,11 +35,12 @@
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
+  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
   import { CurrencyManager } from "@requestnetwork/currency";
   import { onDestroy, onMount, tick } from "svelte";
   import { formatUnits } from "viem";
-  import { capitalize, debounce, formatAddress } from "../utils";
+  import { debounce, formatAddress } from "../utils";
   import { Drawer, InvoiceView } from "./dashboard";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CurrencyTypes } from "@requestnetwork/types";
@@ -381,17 +383,6 @@
   const handleRemoveSelectedRequest = () => {
     activeRequest = undefined;
   };
-
-  const checkStatus = (request: any) => {
-    switch (request?.balance?.balance > 0) {
-      case true:
-        return request?.balance?.balance >= request?.expectedAmount
-          ? "Paid"
-          : "Partially Paid";
-      default:
-        return capitalize(request?.state);
-    }
-  };
 </script>
 
 <div
@@ -653,7 +644,7 @@
                       type={signer === request.payer?.value ? "OUT" : "IN"}
                     />
                   </td>
-                  <td> {checkStatus(request)}</td>
+                  <td><StatusLabel status={checkStatus(request)} /></td>
                   <td
                     ><Tooltip text="Download PDF">
                       <Download

shared/components/status-label.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { capitalize } from "../utils/capitalize";
+
   export let status: string;
 
   let statusClass = "";
@@ -14,7 +16,7 @@
       case "accepted":
         statusClass = "status-accepted";
         break;
-      case "created":
+      case "awaiting payment":
         statusClass = "status-created";
         break;
       case "canceled":
@@ -30,60 +32,72 @@
         statusClass = "status-pending";
         break;
       default:
-        statusClass = "";
+        statusClass = "status-created";
     }
   }
 </script>
 
 <div class={`status-indicator ${statusClass}`}>
-  {status}
+  {capitalize(status)}
 </div>
 
 <style>
   .status-indicator {
     text-align: center;
     padding: 6px 12px;
     text-align: center;
-    min-width: 84px;
+    width: fit-content;
     border-radius: 8px;
+    font-weight: 500;
   }
 
   .status-paid {
     color: #328965;
-    background-color: #58e1a5;
+    background-color: rgba(88, 225, 165, 0.15);
   }
 
   .status-partially-paid {
-    background: linear-gradient(135deg, green 50%, white 50%);
+    color: #328965;
+    background: linear-gradient(
+      135deg,
+      rgba(88, 225, 165, 0.2) 25%,
+      white 25%,
+      white 50%,
+      rgba(88, 225, 165, 0.2) 50%,
+      rgba(88, 225, 165, 0.2) 75%,
+      white 75%,
+      white 100%
+    );
+    background-size: 20px 20px;
   }
 
   .status-accepted {
     color: #006ebe;
-    background-color: #5abaff;
+    background-color: rgba(90, 186, 255, 0.15);
   }
 
   .status-created {
     color: #c99101;
-    background-color: #ffc531;
+    background-color: rgba(255, 197, 49, 0.15);
   }
 
   .status-canceled {
     color: #212121;
-    background-color: #252525;
+    background-color: rgba(37, 37, 37, 0.15);
   }
 
   .status-rejected {
     color: #d9601c;
-    background-color: #ff8743;
+    background-color: rgba(255, 135, 67, 0.15);
   }
 
   .status-overdue {
     color: #d91c1c;
-    background-color: #ff3131;
+    background-color: rgba(255, 49, 49, 0.15);
   }
 
   .status-pending {
     color: #7b7b7b;
-    background-color: #e0e0e0;
+    background-color: rgba(224, 224, 224, 0.15);
   }
 </style>

shared/utils/capitalize.ts

@@ -0,0 +1,2 @@
+export const capitalize = (str: string) =>
+  (str && str[0].toUpperCase() + str.slice(1)) || "";

shared/utils/checkStatus.ts

@@ -0,0 +1,37 @@
+import { capitalize } from "./capitalize";
+import { Types } from "@requestnetwork/request-client.js";
+
+export const checkStatus = (request: Types.IRequestDataWithEvents | null) => {
+  const balance = BigInt(request?.balance?.balance ?? 0);
+  const expectedAmount = BigInt(request?.expectedAmount ?? 0);
+  const today = new Date();
+  const dueDate = new Date(request?.contentData?.paymentTerms?.dueDate);
+  const isPaid = balance >= expectedAmount ? "Paid" : "Partially Paid";
+
+  const eventStatus = {
+    reject: "Rejected",
+    cancel: "Canceled",
+  };
+
+  for (const [event, status] of Object.entries(eventStatus)) {
+    if (
+      request?.events?.some(
+        (e: { name?: string }) => e?.name?.toLowerCase() === event.toLowerCase()
+      )
+    ) {
+      return capitalize(status);
+    }
+  }
+
+  if (dueDate < today) {
+    if (balance === BigInt(0)) {
+      return "Overdue";
+    }
+    return isPaid;
+  } else {
+    if (balance === BigInt(0)) {
+      return "Awaiting Payment";
+    }
+    return isPaid;
+  }
+};