refactoring: migrating to react-query to manage service-side state.

client/src/containers/Alerts/AccountActivateAlert.js

@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
 
+import { useActivateAccount } from 'hooks/query';
 import { compose } from 'utils';
-
 /**
  * Account activate alert.
  */
@@ -20,11 +18,12 @@ function AccountActivateAlert({
 
   // #withAlertActions
   closeAlert,
-
-  requestActivateAccount,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: activateAccount,
+    isLoading 
+  } = useActivateAccount();
 
   // Handle alert cancel.
   const handleCancel = () => {
@@ -33,22 +32,17 @@ function AccountActivateAlert({
 
   // Handle activate account confirm.
   const handleConfirmAccountActivate = () => {
-    setLoading(true);
-    requestActivateAccount(accountId)
-      .then(() => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_account_has_been_successfully_activated',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('accounts-table');
-      })
-      .catch((error) => {})
-      .finally(() => {
-        closeAlert('account-activate');
-        setLoading(false);
+    activateAccount(accountId).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_account_has_been_successfully_activated',
+        }),
+        intent: Intent.SUCCESS,
       });
+      closeAlert('account-activate');
+    }).finally(() => {
+      closeAlert('account-activate');
+    });
   };
 
   return (
@@ -71,5 +65,4 @@ function AccountActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions,
 )(AccountActivateAlert);

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
 import { handleDeleteErrors } from 'containers/Accounts/utils';
 
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
+import { useDeleteAccount } from 'hooks/query';
+
 import { compose } from 'utils';
 
 /**
@@ -26,40 +26,32 @@ function AccountDeleteAlert({
   isOpen,
   payload: { accountId },
 
-  // #withAccountsActions
-  requestDeleteAccount,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    isLoading,
+    mutateAsync: deleteAccount,
+  } = useDeleteAccount();
 
   // handle cancel delete account alert.
   const handleCancelAccountDelete = () => {
     closeAlert(name);
   };
-
   // Handle confirm account delete.
   const handleConfirmAccountDelete = () => {
-    setLoading(true);
-    requestDeleteAccount(accountId)
-      .then(() => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_account_has_been_successfully_deleted',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('accounts-table');
-      })
-      .catch((errors) => {
-        handleDeleteErrors(errors);
-      })
-      .finally(() => {
-        setLoading(false);
-        closeAlert(name);
+    deleteAccount(accountId).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_account_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
       });
+      closeAlert(name);
+    }).catch(errors => {
+      handleDeleteErrors(errors);
+    });
   };
 
   return (
@@ -85,5 +77,4 @@ function AccountDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions,
 )(AccountDeleteAlert);

client/src/containers/Alerts/AccountInactivateAlert.js

@@ -1,50 +1,50 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withAccountsActions from 'containers/Accounts/withAccountsActions';
 
 import { compose } from 'utils';
+import { useInactivateAccount } from 'hooks/query';
 
+/**
+ * Account inactivate alert.
+ */
 function AccountInactivateAlert({
   name,
+
+  // #withAlertStoreConnect
   isOpen,
   payload: { accountId },
 
   // #withAlertActions
   closeAlert,
-
-  // #withAccountsActions
-  requestInactiveAccount,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: inactivateAccount,
+    isLoading
+  } = useInactivateAccount();
 
   const handleCancelInactiveAccount = () => {
     closeAlert('account-inactivate');
   };
 
   const handleConfirmAccountActive = () => {
-    setLoading(true);
-    requestInactiveAccount(accountId)
-      .then(() => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_account_has_been_successfully_inactivated',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('accounts-table');
-      })
-      .catch((error) => {})
-      .finally(() => {
-        setLoading(false);
-        closeAlert('account-inactivate');
+    inactivateAccount(accountId).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_account_has_been_successfully_inactivated',
+        }),
+        intent: Intent.SUCCESS,
       });
+    }).catch(() => {
+
+    }).finally(() => {
+      closeAlert('account-inactivate');
+    });
   };
 
   return (
@@ -67,5 +67,4 @@ function AccountInactivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions,
 )(AccountInactivateAlert);

client/src/containers/Alerts/Bills/BillDeleteAlert.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { useDeleteBill } from 'hooks/query';
+
+import { compose } from 'utils';
+
+/**
+ * Bill delete alert.
+ */
+function BillDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { billId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const { isLoading, mutateAsync: deleteBillMutate } = useDeleteBill();
+
+  // handle cancel Bill
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete invoice
+  const handleConfirmBillDelete = () => {
+    deleteBillMutate(billId).then(() => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_bill_has_been_deleted_successfully',
+        }),
+        intent: Intent.SUCCESS,
+      });
+    });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon={'trash'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBillDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_this_bill_you_will_able_to_restore_it'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BillDeleteAlert);

client/src/containers/Alerts/Bills/BillOpenAlert.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { useOpenBill } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Bill open alert.
+ */
+function BillOpenAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { billId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const { isLoading, mutateAsync: openBillMutate } = useOpenBill();
+
+  // Handle cancel open bill alert.
+  const handleCancelOpenBill = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm bill open.
+  const handleConfirmBillOpen = () => {
+    openBillMutate(billId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_bill_has_been_opened_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally((error) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelOpenBill}
+      onConfirm={handleConfirmBillOpen}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_open_this_bill'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BillOpenAlert);

client/src/containers/Alerts/Customers/CustomerDeleteAlert.js

@@ -13,8 +13,10 @@ import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 
+import { useDeleteCustomer } from 'hooks/query';
 import { compose } from 'utils';
 
+
 /**
  * Customer delete alert.
  */
@@ -31,7 +33,10 @@ function CustomerDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteCustomerMutate,
+    isLoading
+  } = useDeleteCustomer();
 
   // handle cancel delete  alert.
   const handleCancelDeleteAlert = () => {
@@ -40,8 +45,7 @@ function CustomerDeleteAlert({
 
   // handle confirm delete customer.
   const handleConfirmDeleteCustomer = useCallback(() => {
-    setLoading(true);
-    requestDeleteCustomer(customerId)
+    deleteCustomerMutate(customerId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -55,10 +59,9 @@ function CustomerDeleteAlert({
         transformErrors(errors);
       })
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [requestDeleteCustomer, customerId, formatMessage]);
+  }, [deleteCustomerMutate, customerId, closeAlert, name, formatMessage]);
 
   return (
     <Alert

client/src/containers/Alerts/Estimates/EstimateApproveAlert.js

@@ -1,17 +1,18 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
+import { useApproveEstimate } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
 /**
- * Estimate Approve alert.
+ * Estimate approve alert.
  */
 function EstimateApproveAlert({
   name,
@@ -27,7 +28,10 @@ function EstimateApproveAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deliverEstimateMutate,
+    isLoading,
+  } = useApproveEstimate();
 
   // handle cancel approve alert.
   const handleCancelApproveEstimate = () => {
@@ -35,8 +39,7 @@ function EstimateApproveAlert({
   };
   // Handle confirm estimate approve.
   const handleConfirmEstimateApprove = useCallback(() => {
-    setLoading(true);
-    requestApproveEstimate(estimateId)
+    deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -48,10 +51,9 @@ function EstimateApproveAlert({
       })
       .catch((error) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [estimateId, requestApproveEstimate, formatMessage]);
+  }, [estimateId, deliverEstimateMutate, closeAlert, name, formatMessage]);
 
   return (
     <Alert
@@ -74,5 +76,4 @@ function EstimateApproveAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateApproveAlert);

client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js

@@ -5,12 +5,12 @@ import {
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
+import { useDeleteEstimate } from 'hooks/query';
+
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
@@ -24,14 +24,11 @@ function EstimateDeleteAlert({
   isOpen,
   payload: { estimateId },
 
-  // #withEstimateActions
-  requestDeleteEstimate,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: deleteEstimateMutate, isLoading } = useDeleteEstimate();
 
   // handle cancel delete  alert.
   const handleCancelEstimateDelete = () => {
@@ -40,8 +37,7 @@ function EstimateDeleteAlert({
 
   // handle confirm delete estimate
   const handleConfirmEstimateDelete = useCallback(() => {
-    setLoading(true);
-    requestDeleteEstimate(estimateId)
+    deleteEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,14 +45,12 @@ function EstimateDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('estimates-table');
       })
       .catch(({ errors }) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [requestDeleteEstimate, formatMessage, estimateId]);
+  }, [deleteEstimateMutate, name, closeAlert, formatMessage, estimateId]);
 
   return (
     <Alert
@@ -81,5 +75,4 @@ function EstimateDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateDeleteAlert);

client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js

@@ -2,11 +2,12 @@ import React, { useCallback, useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
+import { useDeliverEstimate } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
@@ -20,14 +21,11 @@ function EstimateDeliveredAlert({
   isOpen,
   payload: { estimateId },
 
-  // #withEstimateActions
-  requestDeliveredEstimate,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: deliverEstimateMutate, isLoading } = useDeliverEstimate();
 
   // Handle cancel delivered estimate alert.
   const handleCancelDeliveredEstimate = () => {
@@ -36,8 +34,7 @@ function EstimateDeliveredAlert({
 
   // Handle confirm estimate delivered.
   const handleConfirmEstimateDelivered = useCallback(() => {
-    setLoading(true);
-    requestDeliveredEstimate(estimateId)
+    deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -50,9 +47,8 @@ function EstimateDeliveredAlert({
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [estimateId, requestDeliveredEstimate, formatMessage]);
+  }, [estimateId, deliverEstimateMutate, formatMessage]);
 
   return (
     <Alert
@@ -74,5 +70,4 @@ function EstimateDeliveredAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateDeliveredAlert);

client/src/containers/Alerts/Estimates/EstimateRejectAlert.js

@@ -1,8 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
 import { AppToaster } from 'components';
+import { useRejectEstimate } from 'hooks/query';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -27,7 +29,11 @@ function EstimateRejectAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: rejectEstimateMutate,
+    isLoading
+  } = useRejectEstimate();
+
   // Handle cancel reject estimate alert.
   const handleCancelRejectEstimate = () => {
     closeAlert(name);
@@ -35,7 +41,6 @@ function EstimateRejectAlert({
 
   // Handle confirm estimate reject.
   const handleConfirmEstimateReject = useCallback(() => {
-    setLoading(true);
     requestRejectEstimate(estimateId)
       .then(() => {
         AppToaster.show({
@@ -48,10 +53,9 @@ function EstimateRejectAlert({
       })
       .catch((error) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [estimateId, requestRejectEstimate, formatMessage]);
+  }, [estimateId, rejectEstimateMutate, formatMessage]);
 
   return (
     <Alert

client/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { usePublishExpense } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Expense bulk delete alert.
+ */
+function ExpenseBulkDeleteAlert({
+  closeAlert,
+
+  // #withAlertStoreConnect
+  name,
+  payload: { expenseId, selectedCount },
+  isOpen,
+}) {
+  // Handle confirm journals bulk delete.
+  const handleConfirmBulkDelete = () => {
+    // requestDeleteBulkExpenses(bulkDelete)
+    //   .then(() => {
+    //     AppToaster.show({
+    //       message: formatMessage(
+    //         { id: 'the_expenses_have_been_deleted_successfully' },
+    //         { count: selectedRowsCount },
+    //       ),
+    //       intent: Intent.SUCCESS,
+    //     });
+    //   })
+    //   .catch((error) => {
+    //   });
+  };
+
+  // Handle cancel bulk delete alert.
+  const handleCancelBulkDelete = () => {
+    closeAlert(name);
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: selectedCount }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+    >
+      <p>
+        <T id={'once_delete_these_expenses_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ExpenseBulkDeleteAlert);

client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { useDeleteExpense } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Expense delete alert.
+ */
+function ExpenseDeleteAlert({
+  // #withAlertActions
+  closeAlert,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { expenseId },
+}) {
+  const { formatMessage } = useIntl();
+  const {
+    mutateAsync: deleteExpenseMutate,
+    isLoading,
+    deleteExpense
+  } = useDeleteExpense();
+
+  // Handle cancel expense journal.
+  const handleCancelExpenseDelete = () => {
+    closeAlert('expense-delete');
+  };
+
+  // Handle confirm delete expense.
+  const handleConfirmExpenseDelete = () => {
+    deleteExpenseMutate(expenseId).then(() => {
+      AppToaster.show({
+        message: formatMessage(
+          { id: 'the_expense_has_been_deleted_successfully' },
+          { number: expenseId },
+        ),
+        intent: Intent.SUCCESS,
+      });
+    }).finally(() => {
+      closeAlert('expense-delete');
+    });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelExpenseDelete}
+      onConfirm={handleConfirmExpenseDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_this_expense_you_will_able_to_restore_it'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ExpenseDeleteAlert);

client/src/containers/Alerts/Expenses/ExpensePublishAlert.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { usePublishExpense } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Expense publish alert.
+ */
+function ExpensePublishAlert({
+  closeAlert,
+
+  // #withAlertStoreConnect
+  name,
+  payload: { expenseId },
+  isOpen,
+}) {
+  const { formatMessage } = useIntl();
+  const { mutateAsync: publishExpenseMutate, isLoading } = usePublishExpense();
+
+  const handleCancelPublishExpense = () => {
+    closeAlert('expense-publish');
+  };
+
+  // Handle publish expense confirm.
+  const handleConfirmPublishExpense = () => {
+    publishExpenseMutate(expenseId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_expense_has_been_published',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {});
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'publish'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelPublishExpense}
+      onConfirm={handleConfirmPublishExpense}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_publish_this_expense'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ExpensePublishAlert);

client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -6,7 +6,9 @@ import {
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
 import { AppToaster } from 'components';
+import { useDeleteInvoice } from 'hooks/query';
 
 import { handleDeleteErrors } from 'containers/Sales/Invoice/components';
 
@@ -26,14 +28,14 @@ function InvoiceDeleteAlert({
   isOpen,
   payload: { invoiceId },
 
-  // #withInvoiceActions
-  requestDeleteInvoice,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteInvoiceMutate,
+    isLoading
+  } = useDeleteInvoice();
 
   // handle cancel delete invoice  alert.
   const handleCancelDeleteAlert = () => {
@@ -41,9 +43,8 @@ function InvoiceDeleteAlert({
   };
 
   // handleConfirm delete invoice
-  const handleConfirmInvoiceDelete = useCallback(() => {
-    setLoading(true);
-    requestDeleteInvoice(invoiceId)
+  const handleConfirmInvoiceDelete = () => {
+    deleteInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -51,16 +52,14 @@ function InvoiceDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('invoices-table');
       })
       .catch((errors) => {
         handleDeleteErrors(errors);
       })
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [invoiceId, requestDeleteInvoice, formatMessage]);
+  };
 
   return (
     <Alert

client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js

@@ -1,7 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
+
+import { useDeliverInvoice } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
@@ -11,7 +12,7 @@ import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 import { compose } from 'utils';
 
 /**
- * Invoice  alert.
+ * Sale invoice alert.
  */
 function InvoiceDeliverAlert({
   name,
@@ -20,14 +21,14 @@ function InvoiceDeliverAlert({
   isOpen,
   payload: { invoiceId },
 
-  // #withInvoiceActions
-  requestDeliverInvoice,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deliverInvoiceMutate,
+    isLoading
+  } = useDeliverInvoice();
 
   // handle cancel delete deliver alert.
   const handleCancelDeleteAlert = () => {
@@ -35,9 +36,8 @@ function InvoiceDeliverAlert({
   };
 
   // Handle confirm invoice deliver.
-  const handleConfirmInvoiceDeliver = useCallback(() => {
-    setLoading(true);
-    requestDeliverInvoice(invoiceId)
+  const handleConfirmInvoiceDeliver = () => {
+    deliverInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,14 +45,12 @@ function InvoiceDeliverAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('invoices-table');
       })
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [invoiceId, requestDeliverInvoice, formatMessage]);
+  };
 
   return (
     <Alert

client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js

@@ -1,16 +1,17 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions';
+import {
+  useDeleteInventoryAdjustment
+} from 'hooks/query';
 
 import { compose } from 'utils';
 
@@ -23,23 +24,24 @@ function InventoryAdjustmentDeleteAlert({
   // #withAlertStoreConnect
   isOpen,
   payload: { inventoryId },
-  // #withInventoryAdjustmentActions
-  requestDeleteInventoryAdjustment,
 
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteInventoryAdjMutate,
+    isLoading
+  } = useDeleteInventoryAdjustment();
 
-  // handle cancel delete  alert.
+  // handle cancel delete alert.
   const handleCancelInventoryAdjustmentDelete = () => {
     closeAlert(name);
   };
 
+  // Handle the confirm delete of the inventory adjustment transaction.
   const handleConfirmInventoryAdjustmentDelete = () => {
-    setLoading(true);
-    requestDeleteInventoryAdjustment(inventoryId)
+    deleteInventoryAdjMutate(inventoryId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -47,11 +49,9 @@ function InventoryAdjustmentDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('inventory-adjustment-list');
       })
       .catch((errors) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
   };
@@ -81,5 +81,4 @@ function InventoryAdjustmentDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withInventoryAdjustmentActions,
 )(InventoryAdjustmentDeleteAlert);

client/src/containers/Alerts/Items/ItemActivateAlert.js

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
-import withItemsActions from 'containers/Items/withItemsActions';
+import {
+  useActivateItem,
+} from 'hooks/query';
+
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -20,14 +22,11 @@ function ItemActivateAlert({
   isOpen,
   payload: { itemId },
 
-  // #withItemsActions
-  requestActivateItem,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: activateItem, isLoading }  = useActivateItem();
   
   // Handle activate item alert cancel.
   const handleCancelActivateItem = () => {
@@ -36,8 +35,7 @@ function ItemActivateAlert({
 
   // Handle confirm item activated.
   const handleConfirmItemActivate = () => {
-    setLoading(true);
-    requestActivateItem(itemId)
+    activateItem(itemId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,12 +43,10 @@ function ItemActivateAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-table');
       })
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
   };
 
@@ -61,8 +57,8 @@ function ItemActivateAlert({
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancelActivateItem}
-      onConfirm={handleConfirmItemActivate}
       loading={isLoading}
+      onConfirm={handleConfirmItemActivate}
     >
       <p>
         <T id={'are_sure_to_activate_this_item'} />
@@ -74,5 +70,4 @@ function ItemActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemActivateAlert);

client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
 import { AppToaster } from 'components';
 
 import withItemsActions from 'containers/Items/withItemsActions';
@@ -54,7 +55,7 @@ function ItemBulkDeleteAlert({
     <Alert
       cancelButtonText={<T id={'cancel'} />}
       confirmButtonText={
-        <T id={'delete_count'} values={{ count: itemsIds.length }} />
+        <T id={'delete_count'} values={{ count: size(itemsIds) }} />
       }
       icon="trash"
       intent={Intent.DANGER}

client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js

@@ -5,6 +5,7 @@ import {
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
 import { AppToaster } from 'components';
 
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
@@ -59,7 +60,7 @@ function ItemCategoryBulkDeleteAlert({
     <Alert
       cancelButtonText={<T id={'cancel'} />}
       confirmButtonText={
-        <T id={'delete_count'} values={{ count: itemCategoriesIds.length }} />
+        <T id={'delete_count'} values={{ count: size(itemCategoriesIds) }} />
       }
       icon="trash"
       intent={Intent.DANGER}

client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js

@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-import { queryCache } from 'react-query';
 
-import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+import { useDeleteItemCategory } from 'hooks/query';
+import { AppToaster } from 'components';
+
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -24,14 +24,14 @@ function ItemCategoryDeleteAlert({
   isOpen,
   payload: { itemCategoryId },
 
-  // #withItemCategoriesActions
-  requestDeleteItemCategory,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteItemCategory,
+    isLoading,
+  } = useDeleteItemCategory();
 
   // handle cancel delete item category alert.
   const handleCancelItemCategoryDelete = () => {
@@ -40,8 +40,7 @@ function ItemCategoryDeleteAlert({
 
   // Handle alert confirm delete item category.
   const handleConfirmItemDelete = () => {
-    setLoading(true);
-    requestDeleteItemCategory(itemCategoryId)
+    deleteItemCategory(itemCategoryId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,11 +48,9 @@ function ItemCategoryDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-categories-list');
       })
       .catch(() => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
   };
@@ -81,5 +78,4 @@ function ItemCategoryDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemCategoriesActions,
 )(ItemCategoryDeleteAlert);

client/src/containers/Alerts/Items/ItemDeleteAlert.js

@@ -10,7 +10,9 @@ import { AppToaster } from 'components';
 
 import { handleDeleteErrors } from 'containers/Items/utils';
 
-import withItemsActions from 'containers/Items/withItemsActions';
+import {
+  useDeleteItem
+} from 'hooks/query';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -26,14 +28,11 @@ function ItemDeleteAlert({
   isOpen,
   payload: { itemId },
 
-  // #withItemsActions
-  requestDeleteItem,
-
   // #withAlertActions
   closeAlert,
 }) {
+  const { mutateAsync: deleteItem, isLoading } = useDeleteItem();
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete item alert.
   const handleCancelItemDelete = () => {
@@ -41,8 +40,7 @@ function ItemDeleteAlert({
   };
 
   const handleConfirmDeleteItem = () => {
-    setLoading(true);
-    requestDeleteItem(itemId)
+    deleteItem(itemId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -50,14 +48,12 @@ function ItemDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-table');
       })
       .catch(({ errors }) => {
         handleDeleteErrors(errors);
       })
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
   };
 
@@ -84,5 +80,4 @@ function ItemDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemDeleteAlert);

client/src/containers/Alerts/Items/ItemInactivateAlert.js

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
-import withItemsActions from 'containers/Items/withItemsActions';
+import { useInactivateItem } from 'hooks/query';
+
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -20,24 +20,20 @@ function ItemInactivateAlert({
   isOpen,
   payload: { itemId },
 
-  // #withItemsActions
-  requestInactiveItem,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: inactivateItem, isLoading } = useInactivateItem();
 
-  // handle cancel inactivate alert.
+  // Handle cancel inactivate alert.
   const handleCancelInactivateItem = () => {
     closeAlert(name);
   };
 
   // Handle confirm item Inactive.
   const handleConfirmItemInactive = () => {
-    setLoading(true);
-    requestInactiveItem(itemId)
+    inactivateItem(itemId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,11 +41,9 @@ function ItemInactivateAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-table');
       })
       .catch((error) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
   };
@@ -74,5 +68,4 @@ function ItemInactivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemInactivateAlert);

client/src/containers/Alerts/ManualJournals/JournalBulkDeleteAlert.js

@@ -0,0 +1,46 @@
+
+
+
+function JournalBulkDeleteAlert({}) {
+    // Handle confirm journals bulk delete.
+    const handleConfirmBulkDelete = useCallback(() => {
+      requestDeleteBulkManualJournals(bulkDelete)
+        .then(() => {
+          setBulkDelete(false);
+          AppToaster.show({
+            message: formatMessage(
+              { id: 'the_journals_has_been_deleted_successfully' },
+              { count: selectedRowsCount },
+            ),
+            intent: Intent.SUCCESS,
+          });
+        })
+        .catch((error) => {
+          setBulkDelete(false);
+        });
+    }, [
+      requestDeleteBulkManualJournals,
+      bulkDelete,
+      formatMessage,
+      selectedRowsCount,
+    ]);
+
+    
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: selectedRowsCount }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={bulkDelete}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+    >
+      <p>
+        <T id={'once_delete_these_journals_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}

client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useDeleteJournal } from 'hooks/query';
+
+import { AppToaster } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Journal delete alert.
+ */
+function JournalDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { manualJournalId, journalNumber },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const { mutate: deleteJournalMutate } = useDeleteJournal();
+
+  // Handle cancel delete manual journal.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete manual journal.
+  const handleConfirmManualJournalDelete = () => {
+    deleteJournalMutate(manualJournalId).then(() => {
+      AppToaster.show({
+        message: formatMessage(
+          { id: 'the_journal_has_been_deleted_successfully' },
+          { number: journalNumber },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      
+    });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmManualJournalDelete}
+    >
+      <p>
+        <T id={'once_delete_this_journal_you_will_able_to_restore_it'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(JournalDeleteAlert);

client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { usePublishJournal } from 'hooks/query';
+
+import { AppToaster } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Journal publish alert.
+ */
+function JournalPublishAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { manualJournalId, journalNumber },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const { mutate: publishJournalMutate, isLoading } = usePublishJournal();
+
+  // Handle cancel manual journal alert.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle publish manual journal confirm.
+  const handleConfirm = () => {
+    publishJournalMutate(manualJournalId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_manual_journal_has_been_published',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {
+        
+      })
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+  
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'publish'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_publish_this_manual_journal'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(JournalPublishAlert)

client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { useDeletePaymentMade } from 'hooks/query';
+
+import { compose } from 'utils';
+
+/**
+ * Payment made delete alert.
+ */
+function PaymentMadeDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { paymentMadeId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const {
+    mutateAsync: deletePaymentMadeMutate,
+    isLoading,
+  } = useDeletePaymentMade();
+
+  // Handle cancel payment made.
+  const handleCancelPaymentMadeDelete = () => {};
+
+  // Handle confirm delete payment made
+  const handleConfirmPaymentMadeDelete = () => {
+    deletePaymentMadeMutate(paymentMadeId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_payment_made_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon={'trash'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelPaymentMadeDelete}
+      onConfirm={handleConfirmPaymentMadeDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_this_payment_made_you_will_able_to_restore_it'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(PaymentMadeDeleteAlert);

client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js

@@ -1,16 +1,16 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
+
+import { useDeletePaymentReceive } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions';
 
 import { compose } from 'utils';
 
@@ -24,14 +24,14 @@ function PaymentReceiveDeleteAlert({
   isOpen,
   payload: { paymentReceiveId },
 
-  // #withPaymentReceivesActions
-  requestDeletePaymentReceive,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deletePaymentReceiveMutate,
+    isLoading,
+  } = useDeletePaymentReceive();
 
   // Handle cancel payment Receive.
   const handleCancelDeleteAlert = () => {
@@ -39,9 +39,8 @@ function PaymentReceiveDeleteAlert({
   };
 
   // Handle confirm delete payment receive.
-  const handleConfirmPaymentReceiveDelete = useCallback(() => {
-    setLoading(true);
-    requestDeletePaymentReceive(paymentReceiveId)
+  const handleConfirmPaymentReceiveDelete = () => {
+    deletePaymentReceiveMutate(paymentReceiveId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,14 +48,12 @@ function PaymentReceiveDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('paymentReceives-table');
       })
       .catch(() => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [paymentReceiveId, requestDeletePaymentReceive, formatMessage]);
+  };
 
   return (
     <Alert
@@ -81,5 +78,4 @@ function PaymentReceiveDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withPaymentReceivesActions,
 )(PaymentReceiveDeleteAlert);

client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js

@@ -1,12 +1,12 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
+
+import { useCloseReceipt } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
 
 import { compose } from 'utils';
 
@@ -20,24 +20,20 @@ function ReceiptCloseAlert({
   isOpen,
   payload: { receiptId },
 
-  // #withReceiptActions
-  requestCloseReceipt,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: closeReceiptMutate, isLoading } = useCloseReceipt();
 
-  // handle cancel delete  alert.
+  // handle cancel delete alert.
   const handleCancelDeleteAlert = () => {
     closeAlert(name);
   };
 
   // Handle confirm receipt close.
-  const handleConfirmReceiptClose = useCallback(() => {
-    setLoading(true);
-    requestCloseReceipt(receiptId)
+  const handleConfirmReceiptClose = () => {
+    closeReceiptMutate(receiptId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,14 +41,12 @@ function ReceiptCloseAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('receipts-table');
       })
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [receiptId, requestCloseReceipt, formatMessage]);
+  };
 
   return (
     <Alert
@@ -74,5 +68,4 @@ function ReceiptCloseAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withReceiptActions,
 )(ReceiptCloseAlert);

client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -6,11 +6,12 @@ import {
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
+import { useDeleteReceipt } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
 
 import { compose } from 'utils';
 
@@ -24,24 +25,23 @@ function NameDeleteAlert({
   isOpen,
   payload: { receiptId },
 
-  // #withReceiptActions
-  requestDeleteReceipt,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteReceiptMutate,
+    isLoading
+  } = useDeleteReceipt();
 
-  // handle cancel delete  alert.
+  // Handle cancel delete  alert.
   const handleCancelDeleteAlert = () => {
     closeAlert(name);
   };
 
-  // handle confirm delete receipt
-  const handleConfirmReceiptDelete = useCallback(() => {
-    setLoading(true);
-    requestDeleteReceipt(receiptId)
+  // Handle confirm delete receipt
+  const handleConfirmReceiptDelete = () => {
+    deleteReceiptMutate(receiptId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,14 +49,12 @@ function NameDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('receipts-table');
       })
       .catch(() => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [receiptId, requestDeleteReceipt, formatMessage]);
+  };
 
   return (
     <Alert
@@ -81,5 +79,4 @@ function NameDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withReceiptActions,
 )(NameDeleteAlert);

client/src/containers/Alerts/Vendors/VendorDeleteAlert.js

@@ -8,11 +8,11 @@ import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
 
-import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withVendorActions from 'containers/Vendors/withVendorActions';
-
 import { compose } from 'utils';
+import {
+  useDeleteVendor
+} from 'hooks/query';
 
 /**
  * Vendor delete alert.
@@ -24,24 +24,23 @@ function VendorDeleteAlert({
   isOpen,
   payload: { vendorId },
 
-  // #withVendorActions
-  requestDeleteVender,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteVendorMutate,
+    isLoading
+  } = useDeleteVendor();
 
   // Handle cancel delete the vendor.
   const handleCancelDeleteAlert = () => {
     closeAlert(name);
   };
 
-  // handle confirm delete vendor.
+  // Handle confirm delete vendor.
   const handleConfirmDeleteVendor = useCallback(() => {
-    setLoading(true);
-    requestDeleteVender(vendorId)
+    deleteVendorMutate(vendorId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -55,9 +54,8 @@ function VendorDeleteAlert({
       })
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [requestDeleteVender, vendorId, formatMessage]);
+  }, [deleteVendorMutate, name, closeAlert, vendorId, formatMessage]);
 
   return (
     <Alert
@@ -80,7 +78,5 @@ function VendorDeleteAlert({
 }
 
 export default compose(
-  withAlertStoreConnect(),
   withAlertActions,
-  withVendorActions,
 )(VendorDeleteAlert);