From bb293717a6891579016fb199b71ae867febd4828 Mon Sep 17 00:00:00 2001 From: sstefdev Date: Sat, 23 Nov 2024 00:13:33 +0100 Subject: [PATCH 1/2] feat: added status label component --- shared/components/status-label.svelte | 89 +++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 shared/components/status-label.svelte diff --git a/shared/components/status-label.svelte b/shared/components/status-label.svelte new file mode 100644 index 00000000..855dac72 --- /dev/null +++ b/shared/components/status-label.svelte @@ -0,0 +1,89 @@ + + +
+ {status} +
+ + From 72dc6543f15b920758677fc0f1be7c05338eb51e Mon Sep 17 00:00:00 2001 From: sstefdev Date: Sun, 24 Nov 2024 09:36:01 +0100 Subject: [PATCH 2/2] fix: added missing functions, updated styles for every status --- .../src/lib/dashboard/invoice-view.svelte | 21 ++-------- .../src/lib/view-requests.svelte | 17 ++------- shared/components/status-label.svelte | 38 +++++++++++++------ shared/utils/capitalize.ts | 2 + shared/utils/checkStatus.ts | 37 ++++++++++++++++++ 5 files changed, 72 insertions(+), 43 deletions(-) create mode 100644 shared/utils/capitalize.ts create mode 100644 shared/utils/checkStatus.ts diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte index 76419657..f58227a2 100644 --- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte +++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte @@ -15,6 +15,7 @@ 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"; @@ -22,6 +23,7 @@ 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 @@

Invoice #{request?.contentData?.invoiceNumber || "-"} -

- {isPaid ? "Paid" : "Created"} -

+ { @@ -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; diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte index 2d2fdd34..f8425e89 100644 --- a/packages/invoice-dashboard/src/lib/view-requests.svelte +++ b/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); - } - };
- {checkStatus(request)} + + 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,13 +32,13 @@ statusClass = "status-pending"; break; default: - statusClass = ""; + statusClass = "status-created"; } }
- {status} + {capitalize(status)}
diff --git a/shared/utils/capitalize.ts b/shared/utils/capitalize.ts new file mode 100644 index 00000000..30824cd3 --- /dev/null +++ b/shared/utils/capitalize.ts @@ -0,0 +1,2 @@ +export const capitalize = (str: string) => + (str && str[0].toUpperCase() + str.slice(1)) || ""; diff --git a/shared/utils/checkStatus.ts b/shared/utils/checkStatus.ts new file mode 100644 index 00000000..2bba38e9 --- /dev/null +++ b/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; + } +};