patch: Add Processing status for invoices and update related componen…

…ts (#104)

src/routes/finder/src/components/Columns/invoices/Cells/index.ts

@@ -1,5 +1,4 @@
 export * from './Contract';
 export * from './BillingCycle';
 export * from './InvoicePreview';
-export * from './InvoiceStatus';
 export * from './Amount';

src/routes/finder/src/components/Columns/invoices/filterTypesPastInvoices.tsx

@@ -125,6 +125,7 @@ export const getFilterTypes = () => {
         { label: 'Scheduled', id: InvoiceStatus.Scheduled },
         { label: 'Void', id: InvoiceStatus.Void },
         { label: 'Overdue', id: InvoiceStatus.Overdue },
+        { label: 'Processing', id: InvoiceStatus.PaymentProcessing },
         { label: 'Paid', id: InvoiceStatus.Paid },
       ],
     },

src/routes/finder/src/components/Columns/invoices/sortFns.ts

@@ -14,9 +14,10 @@ export const getInvoicesSortFn = (columnId: string) =>
           .with(InvoiceStatus.OnHold, () => 2)
           .with(InvoiceStatus.Scheduled, () => 3)
           .with(InvoiceStatus.Void, () => 4)
-          .with(InvoiceStatus.Paid, () => 5)
-          .with(InvoiceStatus.Due, () => 6)
-          .with(InvoiceStatus.Overdue, () => 7)
+          .with(InvoiceStatus.PaymentProcessing, () => 5)
+          .with(InvoiceStatus.Paid, () => 6)
+          .with(InvoiceStatus.Due, () => 7)
+          .with(InvoiceStatus.Overdue, () => 8)
           .otherwise(() => null),
     )
 

src/routes/invoices/src/components/shared/PaymentStatusSelect/PaymentStatusSelect.tsx

@@ -28,15 +28,16 @@ export const PaymentStatusSelect = observer(
     const invoiceStatus = invoice?.value?.status;
     const Status = renderStatusNode(invoiceStatus) ?? <>{invoiceStatus}</>;
     const isPaid = invoiceStatus === InvoiceStatus.Paid;
+    const isProcessing = invoiceStatus === InvoiceStatus.PaymentProcessing;
 
-    if (!invoice) return;
+    if (!invoice) return null;
 
     return (
       <Menu>
         <MenuButton
           asChild
           onClick={(e) => e.stopPropagation()}
-          disabled={invoiceStatus === InvoiceStatus.Scheduled}
+          disabled={invoiceStatus === InvoiceStatus.Scheduled || isProcessing}
         >
           {cloneElement(Status, {
             className: cn(

src/routes/src/components/Invoice/Cells/status/StatusCell.tsx

@@ -1,8 +1,5 @@
-import { Clock } from '@ui/media/icons/Clock';
+import { Icon } from '@ui/media/Icon';
 import { InvoiceStatus } from '@graphql/types';
-import { InfoCircle } from '@ui/media/icons/InfoCircle';
-import { CheckCircle } from '@ui/media/icons/CheckCircle';
-import { SlashCircle01 } from '@ui/media/icons/SlashCircle01';
 import { ClockFastForward } from '@ui/media/icons/ClockFastForward';
 import { Tag, TagLabel, TagLeftIcon } from '@ui/presentation/Tag/Tag';
 
@@ -17,6 +14,7 @@ export function renderStatusNode(type: InvoiceStatus | null | undefined) {
       return (
         <Tag variant='outline' colorScheme='grayModern'>
           <TagLeftIcon>
+            <Icon name='clock-fast-forward' />
             <ClockFastForward />
           </TagLeftIcon>
           <TagLabel>Draft</TagLabel>
@@ -26,7 +24,7 @@ export function renderStatusNode(type: InvoiceStatus | null | undefined) {
       return (
         <Tag variant='outline' colorScheme='success'>
           <TagLeftIcon>
-            <CheckCircle />
+            <Icon name='check-circle' />
           </TagLeftIcon>
           <TagLabel>Paid</TagLabel>
         </Tag>
@@ -35,7 +33,7 @@ export function renderStatusNode(type: InvoiceStatus | null | undefined) {
       return (
         <Tag variant='outline' colorScheme='primary'>
           <TagLeftIcon>
-            <Clock />
+            <Icon name='clock' />
           </TagLeftIcon>
           <TagLabel>Due</TagLabel>
         </Tag>
@@ -44,7 +42,7 @@ export function renderStatusNode(type: InvoiceStatus | null | undefined) {
       return (
         <Tag variant='outline' colorScheme='grayModern'>
           <TagLeftIcon>
-            <SlashCircle01 />
+            <Icon name='slash-circle-01' />
           </TagLeftIcon>
           <TagLabel>Voided</TagLabel>
         </Tag>
@@ -53,7 +51,7 @@ export function renderStatusNode(type: InvoiceStatus | null | undefined) {
       return (
         <Tag variant='outline' colorScheme='grayModern'>
           <TagLeftIcon>
-            <ClockFastForward />
+            <Icon name='clock-fast-forward' />
           </TagLeftIcon>
           <TagLabel>Scheduled</TagLabel>
         </Tag>
@@ -62,11 +60,20 @@ export function renderStatusNode(type: InvoiceStatus | null | undefined) {
       return (
         <Tag variant='outline' colorScheme='warning'>
           <TagLeftIcon>
-            <InfoCircle />
+            <Icon name='info-circle' />
           </TagLeftIcon>
           <TagLabel>Overdue</TagLabel>
         </Tag>
       );
+    case InvoiceStatus.PaymentProcessing:
+      return (
+        <Tag variant='outline' colorScheme='grayModern'>
+          <TagLeftIcon>
+            <Icon name='clock-fast-forward' />
+          </TagLeftIcon>
+          <TagLabel>Processing</TagLabel>
+        </Tag>
+      );
     default:
       return null;
   }

src/ui/media/Icon/Icon.tsx

@@ -247,8 +247,11 @@ export type IconName =
   | 'x-square'
   | 'brackets-plus'
   | 'file-plus-02'
-  | 'filter-lines';
-
+  | 'filter-lines'
+  | 'clock-fast-forward'
+  | 'slash-circle-01'
+  | 'info-circle'
+  | 'refresh-cw-02';
 interface IconProps extends SVGAttributes<SVGElement> {
   name: IconName;
   className?: string;