fix(DEV-12651): add option to delete canceled payables

team-monite · Dec 19, 2024 · f12478d · f12478d
1 parent eafa0e3
commit f12478d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 12 deletions.
diff --git a/packages/sdk-react/src/components/payables/PayableDetails/PayableDetails.tsx b/packages/sdk-react/src/components/payables/PayableDetails/PayableDetails.tsx
@@ -53,6 +53,7 @@ const PayableDetailsBase = ({
   onRejected,
   onApproved,
   onReopened,
+  onDeleted,
   onPay,
   onPayUS,
 }: PayablesDetailsProps) => {
@@ -73,6 +74,7 @@ const PayableDetailsBase = ({
       approveInvoice,
       cancelInvoice,
       reopenInvoice,
+      deleteInvoice,
       isPaymentLinkAvailable,
       modalComponent,
     },
@@ -89,6 +91,7 @@ const PayableDetailsBase = ({
     onRejected,
     onApproved,
     onReopened,
+    onDeleted,
     onPay,
     onPayUS,
   });
@@ -156,6 +159,7 @@ const PayableDetailsBase = ({
           approveInvoice={approveInvoice}
           reopenInvoice={reopenInvoice}
           cancelInvoice={cancelInvoice}
+          deleteInvoice={deleteInvoice}
           payInvoice={payInvoice}
           payableDetailsFormId={payableDetailsFormId}
           onClose={onClose}

diff --git a/...eact/src/components/payables/PayableDetails/PayableDetailsHeader/PayableDetailsHeader.tsx b/...eact/src/components/payables/PayableDetails/PayableDetailsHeader/PayableDetailsHeader.tsx
@@ -33,6 +33,7 @@ export interface PayablesDetailsHeaderProps {
   approveInvoice: () => void;
   cancelInvoice: () => void;
   reopenInvoice: () => void;
+  deleteInvoice: () => void;
   payInvoice: () => void;
   /** The "id" of the form used to edit the Payable */
   payableDetailsFormId: string;
@@ -51,6 +52,7 @@ export const PayableDetailsHeader = ({
   approveInvoice,
   cancelInvoice,
   reopenInvoice,
+  deleteInvoice,
   payInvoice,
   payableDetailsFormId,
   isPaymentLinkAvailable,
@@ -111,6 +113,15 @@ export const PayableDetailsHeader = ({
       onClick: cancelInvoice,
       children: t(i18n)`Cancel bill`,
     },
+    delete: {
+      variant: 'text',
+      color: 'error',
+      onClick: () => {
+        deleteInvoice();
+        onClose && onClose();
+      },
+      children: t(i18n)`Delete bill`,
+    },
     pay: {
       variant: 'contained',
       onClick: payInvoice,

diff --git a/packages/sdk-react/src/components/payables/PayableDetails/usePayableDetails.tsx b/packages/sdk-react/src/components/payables/PayableDetails/usePayableDetails.tsx
@@ -26,6 +26,7 @@ export type PayableDetailsPermissions =
   | 'reject'
   | 'approve'
   | 'reopen'
+  | 'delete'
   | 'pay';
 
 export type UsePayableDetailsProps = {
@@ -142,6 +143,14 @@ export type UsePayableDetailsProps = {
    */
   onReopened?: (id: string) => void;
 
+  /** Callback function that is called when the payable is deleted
+   *
+   * @param {string} id - The ID of the payable
+   *
+   * @returns {void}
+   */
+  onDeleted?: (id: string) => void;
+
   /**
    * Callback function that is called when the user press the Pay button
    *
@@ -174,6 +183,7 @@ export function usePayableDetails({
   onRejected,
   onApproved,
   onReopened,
+  onDeleted,
   onPay,
   onPayUS,
 }: UsePayableDetailsProps) {
@@ -307,6 +317,12 @@ export function usePayableDetails({
     entityUserId: payable?.was_created_by_user_id,
   });
 
+  const { data: isDeleteAvailable } = useIsActionAllowed({
+    method: 'payable',
+    action: 'delete',
+    entityUserId: payable?.was_created_by_user_id,
+  });
+
   const createMutation = api.payables.postPayables.useMutation(
     {},
     {
@@ -465,6 +481,14 @@ export function usePayableDetails({
     }
   );
 
+  const deleteMutation = api.payables.deletePayablesId.useMutation(undefined, {
+    onSuccess: () =>
+      Promise.all([api.payables.getPayables.invalidateQueries(queryClient)]),
+    onError: (error) => {
+      toast.error(getAPIErrorMessage(i18n, error));
+    },
+  });
+
   const status = payable?.status;
 
   useEffect(() => {
@@ -560,11 +584,18 @@ export function usePayableDetails({
       }
 
       case 'rejected': {
-        if (isReopenAvailable) {
+        if (isDeleteAvailable) {
           setPermissions(['reopen']);
         }
         break;
       }
+
+      case 'canceled': {
+        if (isDeleteAvailable) {
+          setPermissions(['delete']);
+        }
+        break;
+      }
     }
 
     setIsPermissionsLoading(false);
@@ -577,6 +608,7 @@ export function usePayableDetails({
     isSubmitAvailable,
     isUpdatesAvailable,
     isReopenAvailable,
+    isDeleteAvailable,
     status,
     payableId,
   ]);
@@ -858,6 +890,21 @@ export function usePayableDetails({
     }
   };
 
+  const deleteInvoice = async () => {
+    if (payableId) {
+      await deleteMutation.mutateAsync(
+        {
+          path: { payable_id: payableId },
+        },
+        {
+          onSuccess: () => {
+            onDeleted?.(payableId);
+          },
+        }
+      );
+    }
+  };
+
   const payInvoice = useCallback(() => {
     if (payable) {
       // TODO: remove onPayUS prop
@@ -889,6 +936,7 @@ export function usePayableDetails({
       approveInvoice,
       reopenInvoice,
       cancelInvoice,
+      deleteInvoice,
       payInvoice,
       handlePay,
       modalComponent,

diff --git a/packages/sdk-react/src/components/payables/Payables.tsx b/packages/sdk-react/src/components/payables/Payables.tsx
@@ -28,6 +28,7 @@ export type PayablesProps = Pick<
   | 'onRejected'
   | 'onApproved'
   | 'onReopened'
+  | 'onDeleted'
   | 'onPay'
   | 'onPayUS'
 >;
@@ -47,6 +48,7 @@ const PayablesBase = ({
   onRejected,
   onApproved,
   onReopened,
+  onDeleted,
   onPay,
   onPayUS,
 }: PayablesProps) => {
@@ -58,6 +60,14 @@ const PayablesBase = ({
     open: boolean;
   }>({ invoiceId: undefined, open: false });
 
+  const closeEditDialog = () => {
+    setInvoiceIdDialog((prev) => ({
+      ...prev,
+      open: false,
+      invoiceId: undefined,
+    }));
+  };
+
   const [isCreateInvoiceDialogOpen, setIsCreateInvoiceDialogOpen] =
     useState(false);
 
@@ -166,27 +176,26 @@ const PayablesBase = ({
         className={className + '-Dialog-PayableDetails'}
         open={invoiceIdDialog.open}
         container={root}
-        onClose={() => {
-          setInvoiceIdDialog((prev) => ({ ...prev, open: false }));
-        }}
-        onClosed={() => {
-          setInvoiceIdDialog((prev) =>
-            prev.open ? prev : { open: false, invoiceId: undefined }
-          );
-        }}
+        onClose={closeEditDialog}
+        onClosed={closeEditDialog}
         fullScreen
       >
         <PayableDetails
           id={invoiceIdDialog.invoiceId}
-          onClose={() => {
-            setInvoiceIdDialog((prev) => ({ ...prev, open: false }));
-          }}
+          onClose={closeEditDialog}
           onSaved={onSaved}
           onCanceled={onCanceled}
           onSubmitted={onSubmitted}
           onRejected={onRejected}
           onApproved={onApproved}
           onReopened={onReopened}
+          onDeleted={(payableId) => {
+            onDeleted?.(payableId);
+            closeEditDialog();
+            toast(t(i18n)`Bill #${payableId} has been deleted`, {
+              duration: 5000,
+            });
+          }}
           onPay={onPay}
           onPayUS={onPayUS}
         />