fix(server): Handle the delete error when the matched transaction

packages/webapp/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.tsx

@@ -12,6 +12,7 @@ import { useDeletePaymentMade } from '@/hooks/query';
 
 import { compose } from '@/utils';
 import { DRAWERS } from '@/constants/drawers';
+import { handleDeleteErrors } from './_utils';
 
 /**
  * Payment made delete alert.
@@ -47,6 +48,15 @@ function PaymentMadeDeleteAlert({
         });
         closeDrawer(DRAWERS.PAYMENT_MADE_DETAILS);
       })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
       .finally(() => {
         closeAlert(name);
       });

packages/webapp/src/containers/Alerts/PaymentMades/_utils.ts

@@ -0,0 +1,11 @@
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+
+export const handleDeleteErrors = (errors: any) => {
+  if (errors.find((e: any) => e.type === 'CANNOT_DELETE_TRANSACTION_MATCHED')) {
+    AppToaster.show({
+      intent: Intent.DANGER,
+      message: 'Cannot delete a transaction matched with a bank transaction.',
+    });
+  }
+};