Merge branch 'master' of https://github.com/abouolia/Ratteb

client/src/containers/Alerts/AccountActivateAlert.js

@@ -1,8 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -24,9 +21,10 @@ function AccountActivateAlert({
   // #withAlertActions
   closeAlert,
 
-  requestActivateAccount
+  requestActivateAccount,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // Handle alert cancel.
   const handleCancel = () => {
@@ -35,9 +33,9 @@ function AccountActivateAlert({
 
   // Handle activate account confirm.
   const handleConfirmAccountActivate = () => {
+    setLoading(true);
     requestActivateAccount(accountId)
       .then(() => {
-        closeAlert('account-activate');
         AppToaster.show({
           message: formatMessage({
             id: 'the_account_has_been_successfully_activated',
@@ -46,8 +44,10 @@ function AccountActivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
         closeAlert('account-activate');
+        setLoading(false);
       });
   };
 
@@ -59,6 +59,7 @@ function AccountActivateAlert({
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirmAccountActivate}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_activate_this_account'} />
@@ -70,5 +71,5 @@ function AccountActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountActivateAlert);

client/src/containers/Alerts/AccountBulkActivateAlert.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
-  useIntl
+  useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
@@ -22,22 +22,22 @@ function AccountBulkActivateAlert({
   // #withAlertActions
   closeAlert,
 
-  requestBulkActivateAccounts
+  requestBulkActivateAccounts,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
   // Handle alert cancel.
   const handleClose = () => {
     closeAlert(name);
-  }
+  };
 
   // Handle Bulk activate account confirm.
   const handleConfirmBulkActivate = () => {
+    setLoading(true);
     requestBulkActivateAccounts(accountsIds)
       .then(() => {
-        closeAlert(name);
-
         AppToaster.show({
           message: formatMessage({
             id: 'the_accounts_has_been_successfully_activated',
@@ -46,7 +46,9 @@ function AccountBulkActivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -61,6 +63,7 @@ function AccountBulkActivateAlert({
       isOpen={isOpen}
       onCancel={handleClose}
       onConfirm={handleConfirmBulkActivate}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_activate_this_accounts'} />
@@ -72,5 +75,5 @@ function AccountBulkActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountBulkActivateAlert);

client/src/containers/Alerts/AccountBulkDeleteAlert.js

@@ -1,8 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  useIntl
-} from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -27,9 +24,11 @@ function AccountBulkDeleteAlert({
   closeAlert,
 
   // #withAccountsActions
-  requestDeleteBulkAccounts
+  requestDeleteBulkAccounts,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
   const selectedRowsCount = 0;
 
   const handleCancel = () => {
@@ -37,9 +36,9 @@ function AccountBulkDeleteAlert({
   };
   // Handle confirm accounts bulk delete.
   const handleConfirmBulkDelete = () => {
+    setLoading(true);
     requestDeleteBulkAccounts(accountsIds)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_accounts_has_been_successfully_deleted',
@@ -49,8 +48,11 @@ function AccountBulkDeleteAlert({
         queryCache.invalidateQueries('accounts-table');
       })
       .catch((errors) => {
-        closeAlert(name);
         handleDeleteErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
       });
   };
 
@@ -65,6 +67,7 @@ function AccountBulkDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <T id={'once_delete_these_accounts_you_will_not_able_restore_them'} />
@@ -76,5 +79,5 @@ function AccountBulkDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountBulkDeleteAlert);

client/src/containers/Alerts/AccountBulkInactivateAlert.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
@@ -21,6 +21,7 @@ function AccountBulkInactivateAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
   // Handle alert cancel.
@@ -29,10 +30,9 @@ function AccountBulkInactivateAlert({
   };
   // Handle Bulk Inactive accounts confirm.
   const handleConfirmBulkInactive = () => {
+    setLoading(true);
     requestBulkInactiveAccounts(accountsIds)
       .then(() => {
-        closeAlert(name);
-
         AppToaster.show({
           message: formatMessage({
             id: 'the_accounts_have_been_successfully_inactivated',
@@ -41,7 +41,9 @@ function AccountBulkInactivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -56,6 +58,7 @@ function AccountBulkInactivateAlert({
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirmBulkInactive}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_inactive_this_accounts'} />

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
-  useIntl
+  useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
@@ -30,9 +30,10 @@ function AccountDeleteAlert({
   requestDeleteAccount,
 
   // #withAlertActions
-  closeAlert
+  closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete account alert.
   const handleCancelAccountDelete = () => {
@@ -41,9 +42,9 @@ function AccountDeleteAlert({
 
   // Handle confirm account delete.
   const handleConfirmAccountDelete = () => {
+    setLoading(true);
     requestDeleteAccount(accountId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_account_has_been_successfully_deleted',
@@ -54,6 +55,9 @@ function AccountDeleteAlert({
       })
       .catch((errors) => {
         handleDeleteErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -67,6 +71,7 @@ function AccountDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelAccountDelete}
       onConfirm={handleConfirmAccountDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage
@@ -74,11 +79,11 @@ function AccountDeleteAlert({
         />
       </p>
     </Alert>
-  )
+  );
 }
 
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountDeleteAlert);

client/src/containers/Alerts/AccountInactivateAlert.js

@@ -1,8 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -23,18 +20,18 @@ function AccountInactivateAlert({
 
   // #withAccountsActions
   requestInactiveAccount,
-
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   const handleCancelInactiveAccount = () => {
     closeAlert('account-inactivate');
   };
 
   const handleConfirmAccountActive = () => {
+    setLoading(true);
     requestInactiveAccount(accountId)
       .then(() => {
-        closeAlert('account-inactivate');
         AppToaster.show({
           message: formatMessage({
             id: 'the_account_has_been_successfully_inactivated',
@@ -43,7 +40,9 @@ function AccountInactivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert('account-inactivate');
       });
   };
@@ -56,6 +55,7 @@ function AccountInactivateAlert({
       isOpen={isOpen}
       onCancel={handleCancelInactiveAccount}
       onConfirm={handleConfirmAccountActive}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_inactive_this_account'} />
@@ -67,5 +67,5 @@ function AccountInactivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountInactivateAlert);

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

@@ -0,0 +1,81 @@
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+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 withCustomersActions from 'containers/Customers/withCustomersActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customer bulk delete alert.
+ */
+function CustomerBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { customersIds },
+  // #withCustomersActions
+  requestDeleteBulkCustomers,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  console.log(customersIds, 'EE');
+
+  // Handle confirm customers bulk delete.
+  const handleConfirmBulkDelete = useCallback(() => {
+    setLoading(true);
+    requestDeleteBulkCustomers(customersIds)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_customers_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        transformErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [requestDeleteBulkCustomers, customersIds, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_customers_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withCustomersActions,
+)(CustomerBulkDeleteAlert);

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

@@ -0,0 +1,87 @@
+import React, { useCallback, useState } 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 { transformErrors } from 'containers/Customers/utils';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withCustomersActions from 'containers/Customers/withCustomersActions';
+
+import { compose } from 'utils';
+
+/**
+ * Customer delete alert.
+ */
+function CustomerDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { customerId },
+  // #withCustomersActions
+  requestDeleteCustomer,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete customer.
+  const handleConfirmDeleteCustomer = useCallback(() => {
+    setLoading(true);
+    requestDeleteCustomer(customerId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_customer_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('customers-table');
+      })
+      .catch((errors) => {
+        transformErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [requestDeleteCustomer, customerId, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmDeleteCustomer}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_customer_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withCustomersActions,
+)(CustomerDeleteAlert);

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

@@ -0,0 +1,78 @@
+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 { 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.
+ */
+function EstimateApproveAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withEstimateActions
+  requestApproveEstimate,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel approve alert.
+  const handleCancelApproveEstimate = () => {
+    closeAlert(name);
+  };
+  // Handle confirm estimate approve.
+  const handleConfirmEstimateApprove = useCallback(() => {
+    setLoading(true);
+    requestApproveEstimate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_approved_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [estimateId, requestApproveEstimate, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'approve'} />}
+      icon="trash"
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      loading={isLoading}
+      onCancel={handleCancelApproveEstimate}
+      onConfirm={handleConfirmEstimateApprove}
+    >
+      <p>
+        <T id={'are_sure_to_approve_this_estimate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withEstimateActions,
+)(EstimateApproveAlert);

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useState } 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 withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
+
+import { compose } from 'utils';
+
+/**
+ * Estimate delete alert.
+ */
+function EstimateDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withEstimateActions
+  requestDeleteEstimate,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelEstimateDelete = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete estimate
+  const handleConfirmEstimateDelete = useCallback(() => {
+    setLoading(true);
+    requestDeleteEstimate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch(({ errors }) => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [requestDeleteEstimate, formatMessage, estimateId]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      loading={isLoading}
+      onCancel={handleCancelEstimateDelete}
+      onConfirm={handleConfirmEstimateDelete}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_estimate_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withEstimateActions,
+)(EstimateDeleteAlert);

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

@@ -0,0 +1,78 @@
+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 { 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 delivered alert.
+ */
+function EstimateDeliveredAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withEstimateActions
+  requestDeliveredEstimate,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // Handle cancel delivered estimate alert.
+  const handleCancelDeliveredEstimate = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm estimate delivered.
+  const handleConfirmEstimateDelivered = useCallback(() => {
+    setLoading(true);
+    requestDeliveredEstimate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_delivered_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [estimateId, requestDeliveredEstimate, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'deliver'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelDeliveredEstimate}
+      onConfirm={handleConfirmEstimateDelivered}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_deliver_this_estimate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withEstimateActions,
+)(EstimateDeliveredAlert);

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

@@ -0,0 +1,77 @@
+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 { 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 reject delete alerts.
+ */
+function EstimateRejectAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withEstimateActions
+  requestRejectEstimate,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+  // Handle cancel reject estimate alert.
+  const handleCancelRejectEstimate = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm estimate reject.
+  const handleConfirmEstimateReject = useCallback(() => {
+    setLoading(true);
+    requestRejectEstimate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_estimate_has_been_rejected_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [estimateId, requestRejectEstimate, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'reject'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelRejectEstimate}
+      onConfirm={handleConfirmEstimateReject}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_approve_this_estimate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withEstimateActions,
+)(EstimateRejectAlert);

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

@@ -0,0 +1,89 @@
+import React, { useCallback, useState } 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/Sales/Invoice/components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice delete alert.
+ */
+function InvoiceDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { invoiceId },
+
+  // #withInvoiceActions
+  requestDeleteInvoice,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete invoice  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete invoice
+  const handleConfirmInvoiceDelete = useCallback(() => {
+    setLoading(true);
+    requestDeleteInvoice(invoiceId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_invoice_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('invoices-table');
+      })
+      .catch((errors) => {
+        handleDeleteErrors(errors);
+      })
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [invoiceId, requestDeleteInvoice, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmInvoiceDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_invoice_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withInvoiceActions,
+)(InvoiceDeleteAlert);

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

@@ -0,0 +1,78 @@
+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 { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice  alert.
+ */
+function InvoiceDeliverAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { invoiceId },
+
+  // #withInvoiceActions
+  requestDeliverInvoice,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete deliver alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm invoice deliver.
+  const handleConfirmInvoiceDeliver = useCallback(() => {
+    setLoading(true);
+    requestDeliverInvoice(invoiceId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_invoice_has_been_delivered_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('invoices-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [invoiceId, requestDeliverInvoice, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'deliver'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmInvoiceDeliver}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_deliver_this_invoice'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withInvoiceActions,
+)(InvoiceDeliverAlert);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -30,6 +30,7 @@ function InventoryAdjustmentDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete  alert.
   const handleCancelInventoryAdjustmentDelete = () => {
@@ -37,9 +38,9 @@ function InventoryAdjustmentDeleteAlert({
   };
 
   const handleConfirmInventoryAdjustmentDelete = () => {
+    setLoading(true);
     requestDeleteInventoryAdjustment(inventoryId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_adjustment_has_been_deleted_successfully',
@@ -48,7 +49,9 @@ function InventoryAdjustmentDeleteAlert({
         });
         queryCache.invalidateQueries('inventory-adjustment-list');
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -62,6 +65,7 @@ function InventoryAdjustmentDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelInventoryAdjustmentDelete}
       onConfirm={handleConfirmInventoryAdjustmentDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage

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

@@ -1,8 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -30,6 +27,7 @@ function ItemActivateAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
   
   // Handle activate item alert cancel.
   const handleCancelActivateItem = () => {
@@ -38,9 +36,9 @@ function ItemActivateAlert({
 
   // Handle confirm item activated.
   const handleConfirmItemActivate = () => {
+    setLoading(true);
     requestActivateItem(itemId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_activated_successfully',
@@ -49,8 +47,10 @@ function ItemActivateAlert({
         });
         queryCache.invalidateQueries('items-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
         closeAlert(name);
+        setLoading(false);
       });
   };
 
@@ -62,6 +62,7 @@ function ItemActivateAlert({
       isOpen={isOpen}
       onCancel={handleCancelActivateItem}
       onConfirm={handleConfirmItemActivate}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_activate_this_item'} />

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
@@ -26,6 +26,7 @@ function ItemBulkDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel item bulk delete alert.
   const handleCancelBulkDelete = () => {
@@ -33,9 +34,9 @@ function ItemBulkDeleteAlert({
   };
   // Handle confirm items bulk delete.
   const handleConfirmBulkDelete = () => {
+    setLoading(true);
     requestDeleteBulkItems(itemsIds)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_items_has_been_deleted_successfully',
@@ -43,11 +44,12 @@ function ItemBulkDeleteAlert({
           intent: Intent.SUCCESS,
         });
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
-
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
@@ -59,6 +61,7 @@ function ItemBulkDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelBulkDelete}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <T id={'once_delete_these_items_you_will_not_able_restore_them'} />

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -30,6 +30,7 @@ function ItemCategoryBulkDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel bulk delete alert.
   const handleCancelBulkDelete = () => {
@@ -38,9 +39,9 @@ function ItemCategoryBulkDeleteAlert({
 
   // handle confirm itemCategories bulk delete.
   const handleConfirmBulkDelete = () => {
+    setLoading(true);
     requestDeleteBulkItemCategories(itemCategoriesIds)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_categories_has_been_deleted_successfully',
@@ -48,8 +49,10 @@ function ItemCategoryBulkDeleteAlert({
           intent: Intent.SUCCESS,
         });
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
         closeAlert(name);
+        setLoading(false);
       });
   };
   return (
@@ -63,6 +66,7 @@ function ItemCategoryBulkDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelBulkDelete}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -31,6 +31,7 @@ function ItemCategoryDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete item category alert.
   const handleCancelItemCategoryDelete = () => {
@@ -39,9 +40,9 @@ function ItemCategoryDeleteAlert({
 
   // Handle alert confirm delete item category.
   const handleConfirmItemDelete = () => {
+    setLoading(true);
     requestDeleteItemCategory(itemCategoryId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_category_has_been_deleted_successfully',
@@ -50,7 +51,9 @@ function ItemCategoryDeleteAlert({
         });
         queryCache.invalidateQueries('items-categories-list');
       })
-      .catch(() => {
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -64,6 +67,7 @@ function ItemCategoryDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelItemCategoryDelete}
       onConfirm={handleConfirmItemDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -33,6 +33,7 @@ function ItemDeleteAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete item alert.
   const handleCancelItemDelete = () => {
@@ -40,9 +41,9 @@ function ItemDeleteAlert({
   };
 
   const handleConfirmDeleteItem = () => {
+    setLoading(true);
     requestDeleteItem(itemId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_deleted_successfully',
@@ -53,7 +54,10 @@ function ItemDeleteAlert({
       })
       .catch(({ errors }) => {
         handleDeleteErrors(errors);
+      })
+      .finally(() => {
         closeAlert(name);
+        setLoading(false);
       });
   };
 
@@ -66,6 +70,7 @@ function ItemDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelItemDelete}
       onConfirm={handleConfirmDeleteItem}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage

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

@@ -1,8 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -30,6 +27,7 @@ function ItemInactivateAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel inactivate alert.
   const handleCancelInactivateItem = () => {
@@ -38,9 +36,9 @@ function ItemInactivateAlert({
 
   // Handle confirm item Inactive.
   const handleConfirmItemInactive = () => {
+    setLoading(true);
     requestInactiveItem(itemId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_inactivated_successfully',
@@ -49,7 +47,9 @@ function ItemInactivateAlert({
         });
         queryCache.invalidateQueries('items-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -62,6 +62,7 @@ function ItemInactivateAlert({
       isOpen={isOpen}
       onCancel={handleCancelInactivateItem}
       onConfirm={handleConfirmItemInactive}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_inactive_this_item'} />

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useState } 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 withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions';
+
+import { compose } from 'utils';
+
+/**
+ * Payment receive delete alert.
+ */
+function PaymentReceiveDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { paymentReceiveId },
+
+  // #withPaymentReceivesActions
+  requestDeletePaymentReceive,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // Handle cancel payment Receive.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete payment receive.
+  const handleConfirmPaymentReceiveDelete = useCallback(() => {
+    setLoading(true);
+    requestDeletePaymentReceive(paymentReceiveId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_payment_receive_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('paymentReceives-table');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [paymentReceiveId, requestDeletePaymentReceive, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmPaymentReceiveDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_payment_receive_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withPaymentReceivesActions,
+)(PaymentReceiveDeleteAlert);

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

@@ -0,0 +1,78 @@
+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 { 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';
+
+/**
+ * Receipt close alert.
+ */
+function ReceiptCloseAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { receiptId },
+
+  // #withReceiptActions
+  requestCloseReceipt,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm receipt close.
+  const handleConfirmReceiptClose = useCallback(() => {
+    setLoading(true);
+    requestCloseReceipt(receiptId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_receipt_has_been_closed_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('receipts-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [receiptId, requestCloseReceipt, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'close'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmReceiptClose}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_close_this_receipt'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withReceiptActions,
+)(ReceiptCloseAlert);

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useState } 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 withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice  alert.
+ */
+function NameDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { receiptId },
+
+  // #withReceiptActions
+  requestDeleteReceipt,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete receipt
+  const handleConfirmReceiptDelete = useCallback(() => {
+    setLoading(true);
+    requestDeleteReceipt(receiptId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_receipt_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('receipts-table');
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [receiptId, requestDeleteReceipt, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmReceiptDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_receipt_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withReceiptActions,
+)(NameDeleteAlert);

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

@@ -0,0 +1,86 @@
+import React, { useCallback, useState } from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+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';
+
+/**
+ * Vendor delete alert.
+ */
+function VendorDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorId },
+
+  // #withVendorActions
+  requestDeleteVender,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // Handle cancel delete the vendor.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete vendor.
+  const handleConfirmDeleteVendor = useCallback(() => {
+    setLoading(true);
+    requestDeleteVender(vendorId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_vendor_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        transformErrors(errors);
+      })
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [requestDeleteVender, vendorId, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmDeleteVendor}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_vendor_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withVendorActions,
+)(VendorDeleteAlert);

client/src/containers/Customers/CustomerActionsBar.js

@@ -14,33 +14,31 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import FilterDropdown from 'components/FilterDropdown';
+import { If, Icon, DashboardActionViewsList } from 'components';
-import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withCustomers from 'containers/Customers/withCustomers';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
 import { compose } from 'utils';
 
 const CustomerActionsBar = ({
-  // #withResourceDetail
-  resourceFields,
-
   // #withCustomers
   customersViews,
+  customersSelectedRows,
 
   //#withCustomersActions
   addCustomersTableQueries,
   changeCustomerView,
 
+  // #withAlertActions
+  openAlert,
+
   // #ownProps
-  selectedRows = [],
   onFilterChanged,
-  onBulkDelete,
 }) => {
-  const [filterCount, setFilterCount] = useState(0);
   const history = useHistory();
   const { formatMessage } = useIntl();
 
@@ -48,14 +46,10 @@ const CustomerActionsBar = ({
     history.push('/customers/new');
   }, [history]);
 
-
+  // Handle Customers bulk delete button click.,
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+  const handleBulkDelete = () => {
-    selectedRows,
+    openAlert('customers-bulk-delete', { customersIds: customersSelectedRows });
-  ]);
+  };
-
-  const handleBulkDelete = useCallback(() => {
-    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
-  }, [onBulkDelete, selectedRows]);
 
   const handleTabChange = (viewId) => {
     changeCustomerView(viewId.id || -1);
@@ -88,18 +82,12 @@ const CustomerActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={
+            text={`${formatMessage({ id: 'filters_applied' })}`}
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
-              )
-            }
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
 
-        <If condition={hasSelectedRows}>
+        <If condition={customersSelectedRows.length}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="trash-16" iconSize={16} />}
@@ -134,7 +122,9 @@ export default compose(
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   })),
-  withCustomers(({ customersViews }) => ({
+  withCustomers(({ customersViews, customersSelectedRows }) => ({
     customersViews,
+    customersSelectedRows,
   })),
+  withAlertActions,
 )(CustomerActionsBar);

client/src/containers/Customers/CustomerTable.js

@@ -204,7 +204,6 @@ const CustomerTable = ({
               noInitialFetch={true}
               columns={columns}
               data={customers}
-              // loading={customersLoading}
               onFetchData={handleFetchData}
               selectionColumn={true}
               expandable={false}

client/src/containers/Customers/CustomersAlerts.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import CustomerDeleteAlert from 'containers/Alerts/Customers/CustomerDeleteAlert';
+import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
+
+/**
+ * Customers alert.
+ */
+export default function ItemsAlerts() {
+  return (
+    <div>
+      <CustomerDeleteAlert name={'customer-delete'} />
+      <CustomerBulkDeleteAlert name={'customers-bulk-delete'} />
+    </div>
+  );
+}

client/src/containers/Customers/CustomersList.js

@@ -1,21 +1,13 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
-import { Intent, Alert } from '@blueprintjs/core';
 import { useQuery } from 'react-query';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 
-import AppToaster from 'components/AppToaster';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
-import CustomersTable from 'containers/Customers/CustomerTable';
 import CustomerActionsBar from 'containers/Customers/CustomerActionsBar';
-import CustomersViewsTabs from 'containers/Customers/CustomersViewsTabs';
+import CustomersAlerts from 'containers/Customers/CustomersAlerts';
-
+import CustomersViewPage from 'containers/Customers/CustomersViewPage';
 import withCustomers from 'containers/Customers/withCustomers';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
@@ -35,26 +27,17 @@ function CustomersList({
 
   // #withResourceActions
   requestFetchResourceViews,
-  requestFetchResourceFields,
 
   // #withCustomers
   customersTableQuery,
 
   // #withCustomersActions
   requestFetchCustomers,
-  requestDeleteCustomer,
-  requestDeleteBulkCustomers,
   addCustomersTableQueries,
 }) {
-  const [deleteCustomer, setDeleteCustomer] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
   const [tableLoading, setTableLoading] = useState(false);
-  const [bulkDelete, setBulkDelete] = useState(false);
-
   const { formatMessage } = useIntl();
 
-  const history = useHistory();
-
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'customers_list' }));
   }, [changePageTitle, formatMessage]);
@@ -70,178 +53,23 @@ function CustomersList({
     (key, query) => requestFetchCustomers({ ...query }),
   );
 
-  const handleEditCustomer = useCallback(
-    (customer) => {
-      history.push(`/customers/${customer.id}/edit`);
-    },
-    [history],
-  );
-
-  // Handle click delete customer.
-  const handleDeleteCustomer = useCallback(
-    (customer) => {
-      setDeleteCustomer(customer);
-    },
-    [setDeleteCustomer],
-  );
-
-  // Handle cancel delete the customer.
-  const handleCancelDeleteCustomer = useCallback(() => {
-    setDeleteCustomer(false);
-  }, [setDeleteCustomer]);
-
-  const transformErrors = (errors) => {
-    if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'customer_has_sales_invoices',
-        }),
-        intent: Intent.DANGER,
-      });
-    }
-  };
-
-  // handle confirm delete customer.
-  const handleConfirmDeleteCustomer = useCallback(() => {
-    requestDeleteCustomer(deleteCustomer.id)
-      .then(() => {
-        setDeleteCustomer(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_customer_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        setDeleteCustomer(false);
-        transformErrors(errors);
-      });
-  }, [requestDeleteCustomer, deleteCustomer, formatMessage]);
-
-  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (customer) => {
-      setSelectedRows(customer);
-    },
-    [setSelectedRows],
-  );
-
   useEffect(() => {
     if (tableLoading && !fetchCustomers.isFetching) {
       setTableLoading(false);
     }
   }, [tableLoading, fetchCustomers.isFetching]);
 
-  // Calculates the data table selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
-
-  // Handle Customers bulk delete button click.,
-  const handleBulkDelete = useCallback(
-    (customersIds) => {
-      setBulkDelete(customersIds);
-    },
-    [setBulkDelete],
-  );
-
-  // Handle cancel cusomters bulk delete.
-  const handleCancelBulkDelete = useCallback(() => {
-    setBulkDelete(false);
-  }, []);
-
-  const transformApiErrors = (errors) => {
-    if (
-      errors.find(
-        (error) => error.type === 'SOME.CUSTOMERS.HAVE.SALES_INVOICES',
-      )
-    ) {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'some_customers_have_sales_invoices',
-        }),
-        intent: Intent.DANGER,
-      });
-    }
-  };
-  // Handle confirm customers bulk delete.
-  const handleConfirmBulkDelete = useCallback(() => {
-    requestDeleteBulkCustomers(bulkDelete)
-      .then(() => {
-        setBulkDelete(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_customers_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        transformApiErrors(errors);
-        setBulkDelete(false);
-      });
-  }, [requestDeleteBulkCustomers, bulkDelete, formatMessage]);
-
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching}
       name={'customers-list'}
     >
-      <CustomerActionsBar
+      <CustomerActionsBar />
-        selectedRows={selectedRows}
-        onBulkDelete={handleBulkDelete}
-      />
 
       <DashboardPageContent>
-        <Switch>
+        <CustomersViewPage />
-          <Route
-            exact={true}
-            path={['/customers/:custom_view_id/custom_view', '/customers']}
-          >
-            <CustomersViewsTabs />
-            <CustomersTable
-              onDeleteCustomer={handleDeleteCustomer}
-              onEditCustomer={handleEditCustomer}
-              onSelectedRowsChange={handleSelectedRowsChange}
-            />
-          </Route>
-        </Switch>
-
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={deleteCustomer}
-          onCancel={handleCancelDeleteCustomer}
-          onConfirm={handleConfirmDeleteCustomer}
-        >
-          <p>
-            <FormattedHTMLMessage
-              id={'once_delete_this_customer_you_will_able_to_restore_it'}
-            />
-          </p>
-        </Alert>
-
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={`${formatMessage({
-            id: 'delete',
-          })} (${selectedRowsCount})`}
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={bulkDelete}
-          onCancel={handleCancelBulkDelete}
-          onConfirm={handleConfirmBulkDelete}
-        >
-          <p>
-            <T
-              id={'once_delete_these_customers_you_will_not_able_restore_them'}
-            />
-          </p>
-        </Alert>
       </DashboardPageContent>
+      <CustomersAlerts />
     </DashboardInsider>
   );
 }

client/src/containers/Customers/CustomersViewPage.js

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+import { Route, Switch, useHistory } from 'react-router-dom';
+
+import CustomersViewsTabs from 'containers/Customers/CustomersViewsTabs';
+import CustomersTable from 'containers/Customers/CustomerTable';
+
+import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { compose } from 'utils';
+
+function CustomersViewPage({
+  // #withAlertsActions.
+  openAlert,
+
+  // #withCustomersActions
+  setSelectedRowsCustomers,
+}) {
+  const history = useHistory();
+
+  // Handle click delete customer.
+  const handleDeleteCustomer = useCallback(
+    ({ id }) => {
+      openAlert('customer-delete', { customerId: id });
+    },
+    [openAlert],
+  );
+
+  // Handle select customer rows.
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedRowsIds = selectedRows.map((r) => r.id);
+    setSelectedRowsCustomers(selectedRowsIds);
+  };
+
+  const handleEditCustomer = useCallback(
+    (customer) => {
+      history.push(`/customers/${customer.id}/edit`);
+    },
+    [history],
+  );
+
+  return (
+    <Switch>
+      <Route
+        exact={true}
+        path={['/customers/:custom_view_id/custom_view', '/customers']}
+      >
+        <CustomersViewsTabs />
+        <CustomersTable
+          onDeleteCustomer={handleDeleteCustomer}
+          onEditCustomer={handleEditCustomer}
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
+      </Route>
+    </Switch>
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withCustomersActions,
+)(CustomersViewPage);

client/src/containers/Customers/utils.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { formatMessage } from 'services/intl';
+
+export const transformErrors = (errors) => {
+  if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
+    AppToaster.show({
+      message: formatMessage({
+        id: 'customer_has_sales_invoices',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+  if (
+    errors.find((error) => error.type === 'SOME.CUSTOMERS.HAVE.SALES_INVOICES')
+  ) {
+    AppToaster.show({
+      message: formatMessage({
+        id: 'some_customers_have_sales_invoices',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+};

client/src/containers/Customers/withCustomers.js

@@ -15,7 +15,6 @@ export default (mapState) => {
 
   const mapStateToProps = (state, props) => {
     const query = getCustomerTableQuery(state, props);
-
     const mapped = {
       customers: getCustomersList(state, props, query),
       customersViews: getResourceViews(state, props, 'customers'),
@@ -24,7 +23,7 @@ export default (mapState) => {
       customersLoading: state.customers.loading,
       customersItems: state.customers.items,
       customersCurrentViewId: getCustomersCurrentViewId(state, props),
-      // customerErrors: state.customers.errors,
+      customersSelectedRows: state.customers.selectedRows,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Customers/withCustomersActions.js

@@ -27,6 +27,11 @@ export const mapDispatchToProps = (dispatch) => ({
       currentViewId: parseInt(id, 10),
     });
   },
+  setSelectedRowsCustomers: (selectedRows) =>
+    dispatch({
+      type: t.CUSTOMER_SELECTED_ROWS_SET,
+      payload: { selectedRows },
+    }),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Items/ItemsAlerts.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import ItemDeleteAlert from 'containers/Alerts/Item/ItemDeleteAlert';
+import ItemDeleteAlert from 'containers/Alerts/Items/ItemDeleteAlert';
-import ItemInactivateAlert from 'containers/Alerts/Item/ItemInactivateAlert';
+import ItemInactivateAlert from 'containers/Alerts/Items/ItemInactivateAlert';
-import ItemActivateAlert from 'containers/Alerts/Item/ItemActivateAlert';
+import ItemActivateAlert from 'containers/Alerts/Items/ItemActivateAlert';
-import ItemBulkDeleteAlert from 'containers/Alerts/Item/ItemBulkDeleteAlert';
+import ItemBulkDeleteAlert from 'containers/Alerts/Items/ItemBulkDeleteAlert';
-import ItemCategoryDeleteAlert from 'containers/Alerts/Item/ItemCategoryDeleteAlert';
+import ItemCategoryDeleteAlert from 'containers/Alerts/Items/ItemCategoryDeleteAlert';
-import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Item/ItemCategoryBulkDeleteAlert';
+import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Items/ItemCategoryBulkDeleteAlert';
-import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Item/InventoryAdjustmentDeleteAlert';
+import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Items/InventoryAdjustmentDeleteAlert';
 
 /**
  * Items alert.

client/src/containers/Sales/Estimate/EstimateFormPage.js

@@ -23,7 +23,7 @@ function EstimateFormPage({
   requestFetchItems,
 
   // #withEstimateActions
-  requsetFetchEstimate,
+  requestFetchEstimate,
 
   // #withSettingsActions
   requestFetchOptions,
@@ -52,7 +52,7 @@ function EstimateFormPage({
 
   const fetchEstimate = useQuery(
     ['estimate', id],
-    (key, _id) => requsetFetchEstimate(_id),
+    (key, _id) => requestFetchEstimate(_id),
     { enabled: !!id },
   );
 

client/src/containers/Sales/Estimate/EstimatesAlerts.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import EstimateDeleteAlert from 'containers/Alerts/Estimates/EstimateDeleteAlert';
+import EstimateDeliveredAlert from 'containers/Alerts/Estimates/EstimateDeliveredAlert';
+import EstimateApproveAlert from 'containers/Alerts/Estimates/EstimateApproveAlert';
+import EstimateRejectAlert from 'containers/Alerts/Estimates/EstimateRejectAlert';
+
+/**
+ * Estimates alert.
+ */
+export default function EstimatesAlerts() {
+  return (
+    <div>
+      <EstimateDeleteAlert name={'estimate-delete'} />
+      <EstimateDeliveredAlert name={'estimate-deliver'} />
+      <EstimateApproveAlert name={'estimate-Approve'} />
+      <EstimateRejectAlert name={'estimate-reject'} />
+    </div>
+  );
+}

client/src/containers/Sales/Estimate/EstimatesList.js

@@ -8,6 +8,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
+import EstimatesAlerts from './EstimatesAlerts';
 import EstimatesDataTable from './EstimatesDataTable';
 import EstimateActionsBar from './EstimateActionsBar';
 import EstimateViewTabs from './EstimateViewTabs';
@@ -15,8 +16,9 @@ import EstimateViewTabs from './EstimateViewTabs';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withEstimates from './withEstimates';
-import withEstimateActions from './withEstimateActions';
+import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 import withViewsActions from 'containers/Views/withViewsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
@@ -32,9 +34,11 @@ function EstimatesList({
   estimatesTableQuery,
   estimateViews,
 
+  // #withAlertsActions.
+  openAlert,
+
   //#withEistimateActions
   requestFetchEstimatesTable,
-  requestDeleteEstimate,
   requestDeliverdEstimate,
   requestApproveEstimate,
   requestRejectEstimate,
@@ -42,7 +46,6 @@ function EstimatesList({
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deleteEstimate, setDeleteEstimate] = useState(false);
   const [deliverEstimate, setDeliverEstimate] = useState(false);
   const [approveEstimate, setApproveEstimate] = useState(false);
   const [rejectEstimate, setRejectEstimate] = useState(false);
@@ -70,111 +73,35 @@ function EstimatesList({
 
   // handle delete estimate click
   const handleDeleteEstimate = useCallback(
-    (estimate) => {
+    ({ id }) => {
-      setDeleteEstimate(estimate);
+      openAlert('estimate-delete', { estimateId: id });
     },
-    [setDeleteEstimate],
+    [openAlert],
   );
 
-  // handle cancel estimate
-  const handleCancelEstimateDelete = useCallback(() => {
-    setDeleteEstimate(false);
-  }, [setDeleteEstimate]);
-
-  // handle confirm delete estimate
-  const handleConfirmEstimateDelete = useCallback(() => {
-    requestDeleteEstimate(deleteEstimate.id).then(() => {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_estimate_has_been_deleted_successfully',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeleteEstimate(false);
-    });
-  }, [deleteEstimate, requestDeleteEstimate, formatMessage]);
-
   // Handle cancel/confirm estimate deliver.
-  const handleDeliverEstimate = useCallback((estimate) => {
+  const handleDeliverEstimate = useCallback(
-    setDeliverEstimate(estimate);
+    ({ id }) => {
-  }, []);
+      openAlert('estimate-deliver', { estimateId: id });
-
+    },
-  // Handle cancel deliver estimate alert.
+    [openAlert],
-  const handleCancelDeliverEstimate = useCallback(() => {
+  );
-    setDeliverEstimate(false);
-  }, []);
-
-  // Handle confirm estimate deliver.
-  const handleConfirmEstimateDeliver = useCallback(() => {
-    requestDeliverdEstimate(deliverEstimate.id)
-      .then(() => {
-        setDeliverEstimate(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_delivered_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('estimates-table');
-      })
-      .catch((error) => {
-        setDeliverEstimate(false);
-      });
-  }, [deliverEstimate, requestDeliverdEstimate, formatMessage]);
 
   // Handle cancel/confirm estimate approve.
-  const handleApproveEstimate = useCallback((estimate) => {
+  const handleApproveEstimate = useCallback(
-    setApproveEstimate(estimate);
+    ({ id }) => {
-  }, []);
+      openAlert('estimate-Approve', { estimateId: id });
-
+    },
-  // Handle cancel approve estimate alert.
+    [openAlert],
-  const handleCancelApproveEstimate = useCallback(() => {
+  );
-    setApproveEstimate(false);
-  }, []);
-
-  // Handle confirm estimate approve.
-  const handleConfirmEstimateApprove = useCallback(() => {
-    requestApproveEstimate(approveEstimate.id)
-      .then(() => {
-        setApproveEstimate(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_approved_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('estimates-table');
-      })
-      .catch((error) => {
-        setApproveEstimate(false);
-      });
-  }, [approveEstimate, requestApproveEstimate, formatMessage]);
 
   // Handle cancel/confirm estimate reject.
-  const handleRejectEstimate = useCallback((estimate) => {
+  const handleRejectEstimate = useCallback(
-    setRejectEstimate(estimate);
+    ({ id }) => {
-  }, []);
+      openAlert('estimate-reject', { estimateId: id });
-
+    },
-  // Handle cancel reject estimate alert.
+    [openAlert],
-  const handleCancelRejectEstimate = useCallback(() => {
+  );
-    setRejectEstimate(false);
-  }, []);
-
-  // Handle confirm estimate reject.
-  const handleConfirmEstimateReject = useCallback(() => {
-    requestRejectEstimate(rejectEstimate.id)
-      .then(() => {
-        setRejectEstimate(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_rejected_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('estimates-table');
-      })
-      .catch((error) => {});
-  }, [rejectEstimate, requestRejectEstimate, formatMessage]);
 
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, []);
@@ -224,56 +151,7 @@ function EstimatesList({
             />
           </Route>
         </Switch>
-
+        <EstimatesAlerts />
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deleteEstimate}
-          onCancel={handleCancelEstimateDelete}
-          onConfirm={handleConfirmEstimateDelete}
-        >
-          <p>
-            <T id={'once_delete_this_estimate_you_will_able_to_restore_it'} />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'deliver'} />}
-          intent={Intent.WARNING}
-          isOpen={deliverEstimate}
-          onCancel={handleCancelDeliverEstimate}
-          onConfirm={handleConfirmEstimateDeliver}
-        >
-          <p>
-            <T id={'are_sure_to_deliver_this_estimate'} />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'approve'} />}
-          intent={Intent.WARNING}
-          isOpen={approveEstimate}
-          onCancel={handleCancelApproveEstimate}
-          onConfirm={handleConfirmEstimateApprove}
-        >
-          <p>
-            <T id={'are_sure_to_approve_this_estimate'} />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'reject'} />}
-          intent={Intent.WARNING}
-          isOpen={rejectEstimate}
-          onCancel={handleCancelRejectEstimate}
-          onConfirm={handleConfirmEstimateReject}
-        >
-          <p>
-            <T id={'are_sure_to_approve_this_estimate'} />
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -288,4 +166,5 @@ export default compose(
     estimatesTableQuery,
     estimateViews,
   })),
+  withAlertsActions,
 )(EstimatesList);

client/src/containers/Sales/Estimate/withEstimateActions.js

@@ -7,18 +7,18 @@ import {
   fetchEstimatesTable,
   deliverEstimate,
   approveEstimate,
-  rejectEstimate
+  rejectEstimate,
 } from 'store/Estimate/estimates.actions';
 import t from 'store/types';
 
-const mapDipatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({
   requestSubmitEstimate: (form) => dispatch(submitEstimate({ form })),
-  requsetFetchEstimate: (id) => dispatch(fetchEstimate({ id })),
+  requestFetchEstimate: (id) => dispatch(fetchEstimate({ id })),
   requestEditEstimate: (id, form) => dispatch(editEstimate(id, form)),
   requestFetchEstimatesTable: (query = {}) =>
     dispatch(fetchEstimatesTable({ query: { ...query } })),
   requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
-  requestDeliverdEstimate: (id) => dispatch(deliverEstimate({ id })),
+  requestDeliveredEstimate: (id) => dispatch(deliverEstimate({ id })),
   requestApproveEstimate: (id) => dispatch(approveEstimate({ id })),
   requestRejectEstimate: (id) => dispatch(rejectEstimate({ id })),
 
@@ -38,6 +38,11 @@ const mapDipatchToProps = (dispatch) => ({
       type: t.ESTIMATE_NUMBER_CHANGED,
       payload: { isChanged },
     }),
+  setSelectedRowsEstimates: (selectedRows) =>
+    dispatch({
+      type: t.ESTIMATES_SELECTED_ROWS_SET,
+      payload: { selectedRows },
+    }),
 });
 
-export default connect(null, mapDipatchToProps);
+export default connect(null, mapDispatchToProps);

client/src/containers/Sales/Estimate/withEstimates.js

@@ -22,6 +22,7 @@ export default (mapState) => {
 
       estimateViews: getResourceViews(state, props, 'sale_estimate'),
       estimateItems: state.salesEstimates.items,
+      estimateSelectedRows: state.salesEstimates.selectedRows,
 
       estimatesTableQuery: query,
       estimatesPageination: getEstimatesPaginationMeta(state, props, query),

client/src/containers/Sales/Invoice/InvoicesAlerts.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import InvoiceDeleteAlert from 'containers/Alerts/Invoices/InvoiceDeleteAlert';
+import InvoiceDeliverAlert from 'containers/Alerts/Invoices/InvoiceDeliverAlert';
+
+/**
+ * Invoices alert.
+ */
+export default function ItemsAlerts() {
+  return (
+    <div>
+      <InvoiceDeleteAlert name={'invoice-delete'} />
+      <InvoiceDeliverAlert name={'invoice-deliver'} />
+    </div>
+  );
+}

client/src/containers/Sales/Invoice/InvoicesList.js

@@ -1,25 +1,24 @@
 import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery} from 'react-query';
-import { Alert, Intent } from '@blueprintjs/core';
 
 import 'style/pages/SaleInvoice/List.scss';
 
-import AppToaster from 'components/AppToaster';
+import { FormattedMessage as T, useIntl } from 'react-intl';
-import { FormattedMessage as T, useIntl } from 'react-intl'
-;
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import InvoicesDataTable from './InvoicesDataTable';
 import InvoiceActionsBar from './InvoiceActionsBar';
 import InvoiceViewTabs from './InvoiceViewTabs';
+import InvoicesAlerts from './InvoicesAlerts';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withInvoices from './withInvoices';
-import withInvoiceActions from './withInvoiceActions';
+import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 import withViewsActions from 'containers/Views/withViewsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
@@ -38,17 +37,17 @@ function InvoicesList({
   invoicesTableQuery,
   invoicesViews,
 
+  // #withAlertsActions.
+  openAlert,
+
   //#withInvoiceActions
   requestFetchInvoiceTable,
-  requestDeleteInvoice,
+  
-  requestDeliverInvoice,
   addInvoiceTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deleteInvoice, setDeleteInvoice] = useState(false);
+   const [selectedRows, setSelectedRows] = useState([]);
-  const [deliverInvoice, setDeliverInvoice] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'invoices_list' }));
@@ -68,89 +67,27 @@ function InvoicesList({
     ['invoices-table', invoicesTableQuery],
     (key, query) => requestFetchInvoiceTable({ ...query }),
   );
-  //handle dalete Invoice
+  //handle delete Invoice
   const handleDeleteInvoice = useCallback(
-    (invoice) => {
+    ({ id }) => {
-      setDeleteInvoice(invoice);
+      openAlert('invoice-delete', { invoiceId: id });
     },
-    [setDeleteInvoice],
+    [openAlert],
   );
 
-  // handle cancel Invoice
-  const handleCancelInvoiceDelete = useCallback(() => {
-    setDeleteInvoice(false);
-  }, [setDeleteInvoice]);
-
-  const handleDeleteErrors = (errors) => {
-    if (
-      errors.find(
-        (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
-      )
-    ) {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_invoice_cannot_be_deleted',
-        }),
-        intent: Intent.DANGER,
-      });
-    }
-  };
-
-  // handleConfirm delete invoice
-  const handleConfirmInvoiceDelete = useCallback(() => {
-    requestDeleteInvoice(deleteInvoice.id)
-      .then(() => {
-        setDeleteInvoice(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_invoice_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        handleDeleteErrors(errors);
-        setDeleteInvoice(false);
-      });
-  }, [deleteInvoice, requestDeleteInvoice, formatMessage]);
-  
   // Handle cancel/confirm invoice deliver.
-  const handleDeliverInvoice = useCallback((invoice) => {
+  const handleDeliverInvoice = useCallback(
-    setDeliverInvoice(invoice);
+    ({id}) => {
-  }, []);
+      openAlert('invoice-deliver', { invoiceId: id });
+    },
+    [openAlert],
+  );
 
-  // Handle cancel deliver invoice alert.
-  const handleCancelDeliverInvoice = useCallback(() => {
-    setDeliverInvoice(false);
-  }, []);
-
-  // Handle confirm invoiec deliver.
-  const handleConfirmInvoiceDeliver = useCallback(() => {
-    requestDeliverInvoice(deliverInvoice.id)
-      .then(() => {
-        setDeliverInvoice(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_invoice_has_been_delivered_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('invoices-table');
-      })
-      .catch((error) => {
-        // setDeliverInvoice(false);
-      });
-  }, [deliverInvoice, requestDeliverInvoice, formatMessage]);
 
   const handleEditInvoice = useCallback((invoice) => {
     history.push(`/invoices/${invoice.id}/edit`);
   });
 
-  // Calculates the selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, []);
 
@@ -167,7 +104,6 @@ function InvoicesList({
       name={'sales-invoices-list'}
     >
       <InvoiceActionsBar
-        // onBulkDelete={}
         selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
       />
@@ -187,31 +123,7 @@ function InvoicesList({
           </Route>
         </Switch>
 
-        <Alert
+        <InvoicesAlerts />
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deleteInvoice}
-          onCancel={handleCancelInvoiceDelete}
-          onConfirm={handleConfirmInvoiceDelete}
-        >
-          <p>
-            <T id={'once_delete_this_invoice_you_will_able_to_restore_it'} />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'deliver'} />}
-          intent={Intent.WARNING}
-          isOpen={deliverInvoice}
-          onCancel={handleCancelDeliverInvoice}
-          onConfirm={handleConfirmInvoiceDeliver}
-        >
-          <p>
-            <T id={'are_sure_to_deliver_this_invoice'} />
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -225,4 +137,5 @@ export default compose(
   withInvoices(({ invoicesTableQuery }) => ({
     invoicesTableQuery,
   })),
+  withAlertsActions,
 )(InvoicesList);

client/src/containers/Sales/Invoice/components.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Intent, Tag, ProgressBar } from '@blueprintjs/core';
 import { Choose, If, Icon } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { AppToaster } from 'components';
+import { formatMessage } from 'services/intl';
 
 const calculateStatus = (paymentAmount, balanceAmount) =>
   paymentAmount / balanceAmount;
@@ -60,3 +62,18 @@ export const statusAccessor = (row) => {
     </div>
   );
 };
+
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find(
+      (error) => error.type === 'INVOICE_HAS_ASSOCIATED_PAYMENT_ENTRIES',
+    )
+  ) {
+    AppToaster.show({
+      message: formatMessage({
+        id: 'the_invoice_cannot_be_deleted',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+};

client/src/containers/Sales/PaymentReceive/PaymentReceiveAlerts.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PaymentReceiveDeleteAlert from 'containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert';
+
+/**
+ * PaymentReceives alert.
+ */
+export default function EstimatesAlerts() {
+  return (
+    <div>
+      <PaymentReceiveDeleteAlert name={'payment-receive-delete'} />
+    </div>
+  );
+}

client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js

@@ -1,9 +1,7 @@
-import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery } from 'react-query';
-import { Alert, Intent } from '@blueprintjs/core';
 
-import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -11,12 +9,12 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import PaymentReceivesDataTable from './PaymentReceivesDataTable';
 import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
 import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
-
+import PaymentReceiveAlerts from './PaymentReceiveAlerts';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withPaymentReceives from './withPaymentReceives';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
-import withViewsActions from 'containers/Views/withViewsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
@@ -24,77 +22,40 @@ function PaymentReceiveList({
   // #withDashboardActions
   changePageTitle,
 
-  // #withViewsActions
-  requestFetchResourceViews,
-  requestFetchResourceFields,
-
   //#withPaymentReceives
   paymentReceivesTableQuery,
 
+  // #withAlertsActions.
+  openAlert,
+
   //#withPaymentReceivesActions
   requestFetchPaymentReceiveTable,
-  requestDeletePaymentReceive,
-  addPaymentReceivesTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deletePaymentReceive, setDeletePaymentReceive] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'payment_Receives_list' }));
   }, [changePageTitle, formatMessage]);
 
-  const fetchResourceViews = useQuery(
-    ['resource-views', 'payment_receives'],
-    (key, resourceName) => requestFetchResourceViews(resourceName),
-  );
-
-  const fetchResourceFields = useQuery(
-    ['resource-fields', 'payment_receives'],
-    (key, resourceName) => requestFetchResourceFields(resourceName),
-  );
-
   const fetchPaymentReceives = useQuery(
-    ['paymantReceives-table', paymentReceivesTableQuery],
+    ['paymentReceives-table', paymentReceivesTableQuery],
     () => requestFetchPaymentReceiveTable(),
   );
 
-  // Handle dalete Payment Receive
+  // Handle delete Payment Receive
   const handleDeletePaymentReceive = useCallback(
-    (paymentReceive) => {
+    ({ id }) => {
-      setDeletePaymentReceive(paymentReceive);
+      openAlert('payment-receive-delete', { paymentReceiveId: id });
     },
-    [setDeletePaymentReceive],
+    [openAlert],
   );
 
-  // Handle cancel payment Receive.
-  const handleCancelPaymentReceiveDelete = useCallback(() => {
-    setDeletePaymentReceive(false);
-  }, [setDeletePaymentReceive]);
-
-  // Handle confirm delete payment receive.
-  const handleConfirmPaymentReceiveDelete = useCallback(() => {
-    requestDeletePaymentReceive(deletePaymentReceive.id).then(() => {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_payment_receive_has_been_deleted_successfully',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeletePaymentReceive(false);
-    });
-  }, [deletePaymentReceive, requestDeletePaymentReceive, formatMessage]);
-
   const handleEditPaymentReceive = useCallback((payment) => {
     history.push(`/payment-receives/${payment.id}/edit`);
   });
 
-  // Calculates the selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]);
 
@@ -107,12 +68,8 @@ function PaymentReceiveList({
   );
 
   return (
-    <DashboardInsider
+    <DashboardInsider name={'payment_receives'}>
-      // loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
-      name={'payment_receives'}
-    >
       <PaymentReceiveActionsBar
-        // onBulkDelete={}
         selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
       />
@@ -133,19 +90,7 @@ function PaymentReceiveList({
             />
           </Route>
         </Switch>
-        <Alert
+        <PaymentReceiveAlerts />
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deletePaymentReceive}
-          onCancel={handleCancelPaymentReceiveDelete}
-          onConfirm={handleConfirmPaymentReceiveDelete}
-        >
-          <p>
-            <T id={'once_delete_this_payment_receive_you_will_able_to_restore_it'} />
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -155,8 +100,8 @@ export default compose(
   withResourceActions,
   withPaymentReceivesActions,
   withDashboardActions,
-  withViewsActions,
   withPaymentReceives(({ paymentReceivesTableQuery }) => ({
     paymentReceivesTableQuery,
   })),
+  withAlertsActions,
 )(PaymentReceiveList);

client/src/containers/Sales/Receipt/ReceiptsAlerts.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReceiptDeleteAlert from 'containers/Alerts/Receipts/ReceiptDeleteAlert';
+import ReceiptCloseAlert from 'containers/Alerts/Receipts/ReceiptCloseAlert';
+
+/**
+ * Receipts alerts.
+ */
+export default function ReceiptsAlerts() {
+  return (
+    <div>
+      <ReceiptDeleteAlert name={'receipt-delete'} />
+      <ReceiptCloseAlert name={'receipt-close'} />
+    </div>
+  );
+}

client/src/containers/Sales/Receipt/ReceiptsList.js

@@ -1,9 +1,7 @@
-import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery } from 'react-query';
-import { Alert, Intent } from '@blueprintjs/core';
 
-import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -11,12 +9,14 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ReceiptsDataTable from './ReceiptsDataTable';
 import ReceiptActionsBar from './ReceiptActionsBar';
 import ReceiptViewTabs from './ReceiptViewTabs';
+import ReceiptsAlerts from './ReceiptsAlerts';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withReceipts from './withReceipts';
 import withReceiptActions from './withReceiptActions';
 import withViewsActions from 'containers/Views/withViewsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
@@ -26,21 +26,19 @@ function ReceiptsList({
 
   // #withViewsActions
   requestFetchResourceViews,
-  requestFetchResourceFields,
 
   //#withReceipts
   receiptTableQuery,
 
+  // #withAlertsActions,
+  openAlert,
+
   //#withReceiptActions
   requestFetchReceiptsTable,
-  requestDeleteReceipt,
-  requestCloseReceipt,
   addReceiptsTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deleteReceipt, setDeleteReceipt] = useState(false);
-  const [closeReceipt, setCloseReceipt] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
   const fetchReceipts = useQuery(
@@ -59,76 +57,20 @@ function ReceiptsList({
 
   // handle delete receipt click
   const handleDeleteReceipt = useCallback(
-    (_receipt) => {
+    ({ id }) => {
-      setDeleteReceipt(_receipt);
+      openAlert('receipt-delete', { receiptId: id });
     },
-    [setDeleteReceipt],
+    [openAlert],
   );
 
-  // handle cancel receipt
-  const handleCancelReceiptDelete = useCallback(() => {
-    setDeleteReceipt(false);
-  }, [setDeleteReceipt]);
-
-  // handle confirm delete receipt
-  const handleConfirmReceiptDelete = useCallback(() => {
-    requestDeleteReceipt(deleteReceipt.id).then(() => {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_receipt_has_been_deleted_successfully',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeleteReceipt(false);
-    });
-  }, [deleteReceipt, requestDeleteReceipt, formatMessage]);
-
   // Handle cancel/confirm receipt deliver.
-  const handleCloseReceipt = useCallback((receipt) => {
+  const handleCloseReceipt = useCallback(({ id }) => {
-    setCloseReceipt(receipt);
+    openAlert('receipt-close', { receiptId: id });
   }, []);
 
-  // Handle cancel close receipt alert.
-  const handleCancelCloseReceipt = useCallback(() => {
-    setCloseReceipt(false);
-  }, []);
-
-  // Handle confirm receipt close.
-  const handleConfirmReceiptClose = useCallback(() => {
-    requestCloseReceipt(closeReceipt.id)
-      .then(() => {
-        setCloseReceipt(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_receipt_has_been_closed_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('receipts-table');
-      })
-      .catch((error) => {
-        setCloseReceipt(false);
-      });
-  }, [closeReceipt, requestCloseReceipt, formatMessage]);
-
-  // Handle filter change to re-fetch data-table.
-  // const handleFilterChanged = useCallback(
-  //   (filterConditions) => {
-  //     addReceiptsTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //   },
-  //   [fetchReceipt],
-  // );
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchReceipts]);
 
-  // Calculates the selected rows
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
-
   const handleEditReceipt = useCallback(
     (receipt) => {
       history.push(`/receipts/${receipt.id}/edit`);
@@ -167,32 +109,7 @@ function ReceiptsList({
             />
           </Route>
         </Switch>
-
+        <ReceiptsAlerts />
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deleteReceipt}
-          onCancel={handleCancelReceiptDelete}
-          onConfirm={handleConfirmReceiptDelete}
-        >
-          <p>
-            <T id={'once_delete_this_receipt_you_will_able_to_restore_it'} />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'close'} />}
-          intent={Intent.WARNING}
-          isOpen={closeReceipt}
-          onCancel={handleCancelCloseReceipt}
-          onConfirm={handleConfirmReceiptClose}
-        >
-          <p>
-            <T id={'are_sure_to_close_this_receipt'} />
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -206,4 +123,5 @@ export default compose(
   withReceipts(({ receiptTableQuery }) => ({
     receiptTableQuery,
   })),
+  withAlertsActions,
 )(ReceiptsList);

client/src/containers/Vendors/VendorFormPage.js

@@ -14,9 +14,9 @@ import { compose } from 'utils';
 function VendorFormPage({
   // #withVendorActions
   requestFetchVendorsTable,
-  requsetFetchVendor,
+  requestFetchVendor,
 
-  // #wihtCurrenciesActions
+  // #withCurrenciesActions
   requestFetchCurrencies,
 }) {
   const { id } = useParams();
@@ -35,7 +35,7 @@ function VendorFormPage({
   // Handle fetch vendor details.
   const fetchVendor = useQuery(
     ['vendor', id],
-    (_id, vendorId) => requsetFetchVendor(vendorId),
+    (_id, vendorId) => requestFetchVendor(vendorId),
     { enabled: id && id },
   );
 

client/src/containers/Vendors/VendorsAlerts.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import VendorDeleteAlert from 'containers/Alerts/Vendors/VendorDeleteAlert';
+
+export default function VendorsAlerts() {
+  return (
+    <div>
+      <VendorDeleteAlert name={'vendor-delete'} />
+    </div>
+  );
+}

client/src/containers/Vendors/VendorsList.js

@@ -1,26 +1,19 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
-import { Intent, Alert } from '@blueprintjs/core';
 import { useQuery } from 'react-query';
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 
-import AppToaster from 'components/AppToaster';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
-import VendorsTable from './VendorsTable';
+import VendorActionsBar from 'containers/Vendors/VendorActionsBar';
-import VendorActionsBar from './VendorActionsBar';
+import VendorsViewPage from 'containers/Vendors/VendorsViewPage';
-import VendorsViewsTabs from './VendorViewsTabs';
+import VendorsAlerts from 'containers/Vendors/VendorsAlerts';
 
-import withVendors from './withVendors';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withVendorActions from './withVendorActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withViewsActions from 'containers/Views/withViewsActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withVendors from 'containers/Vendors/withVendors';
+import withVendorActions from 'containers/Vendors/withVendorActions';
 
 import { compose } from 'utils';
 
@@ -35,15 +28,11 @@ function VendorsList({
   vendorTableQuery,
 
   // #withVendorActions
-  requestDeleteVender,
   requestFetchVendorsTable,
 }) {
-  const [deleteVendor, setDeleteVendor] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
   const [tableLoading, setTableLoading] = useState(false);
 
   const { formatMessage } = useIntl();
-  const history = useHistory();
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'vendors_list' }));
@@ -61,64 +50,6 @@ function VendorsList({
     (key, query) => requestFetchVendorsTable({ ...query }),
   );
 
-  // Handle Edit vendor data table
-  const handleEditVendor = useCallback(
-    (vendor) => {
-      history.push(`/vendors/${vendor.id}/edit`);
-    },
-    [history],
-  );
-  // Handle click delete vendor.
-  const handleDeleteVendor = useCallback(
-    (vendor) => {
-      setDeleteVendor(vendor);
-    },
-    [setDeleteVendor],
-  );
-
-  // Handle cancel delete the vendor.
-  const handleCancelDeleteVendor = useCallback(() => {
-    setDeleteVendor(false);
-  }, [setDeleteVendor]);
-
-  // Transform API errors in toasts messages.
-  const transformErrors = useCallback((errors) => {
-    if (errors.some((e) => e.type === 'VENDOR.HAS.BILLS')) {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'vendor_has_bills',
-        }),
-        intent: Intent.DANGER,
-      });
-    }
-  }, []);
-
-  // handle confirm delete vendor.
-  const handleConfirmDeleteVendor = useCallback(() => {
-    requestDeleteVender(deleteVendor.id)
-      .then(() => {
-        setDeleteVendor(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_vendor_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        setDeleteVendor(false);
-        transformErrors(errors);
-      });
-  }, [requestDeleteVender, deleteVendor, formatMessage]);
-
-  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (vendor) => {
-      setSelectedRows(vendor);
-    },
-    [setSelectedRows],
-  );
-
   useEffect(() => {
     if (tableLoading && !fetchVendors.isFetching) {
       setTableLoading(false);
@@ -130,36 +61,10 @@ function VendorsList({
       loading={fetchResourceViews.isFetching}
       name={'customers-list'}
     >
-      <VendorActionsBar selectedRows={selectedRows} />
+      <VendorActionsBar />
       <DashboardPageContent>
-        <Switch>
+        <VendorsViewPage />
-          <Route
+        <VendorsAlerts />
-            exact={true}
-            path={['/vendors/:custom_view_id/custom_view', '/vendors']}
-          >
-            <VendorsViewsTabs />
-            <VendorsTable
-              onDeleteVendor={handleDeleteVendor}
-              onEditVendor={handleEditVendor}
-              onSelectedRowsChange={handleSelectedRowsChange}
-            />
-          </Route>
-        </Switch>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={deleteVendor}
-          onCancel={handleCancelDeleteVendor}
-          onConfirm={handleConfirmDeleteVendor}
-        >
-          <p>
-            <FormattedHTMLMessage
-              id={'once_delete_this_vendor_you_will_able_to_restore_it'}
-            />
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );

client/src/containers/Vendors/VendorsViewPage.js

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { Route, Switch, useHistory } from 'react-router-dom';
+
+import VendorsViewsTabs from './VendorViewsTabs';
+import VendorsTable from './VendorsTable';
+
+import withVendorActions from './withVendorActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+function VendorsViewPage({
+  // #withAlertsActions.
+  openAlert,
+
+  // #withVendorActions.
+  setSelectedRowsVendors,
+}) {
+  const history = useHistory();
+
+  // Handle Edit vendor data table
+  const handleEditVendor = useCallback(
+    (vendor) => {
+      history.push(`/vendors/${vendor.id}/edit`);
+    },
+    [history],
+  );
+
+  // Handle click delete vendor.
+  const handleDeleteVendor = useCallback(
+    ({ id }) => {
+      openAlert('vendor-delete', { vendorId: id });
+    },
+    [openAlert],
+  );
+
+  // Handle select vendor rows.
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedRowsIds = selectedRows.map((r) => r.id);
+    setSelectedRowsVendors(selectedRowsIds);
+  };
+
+  return (
+    <Switch>
+      <Route
+        exact={true}
+        path={['/vendors/:custom_view_id/custom_view', '/vendors']}
+      >
+        <VendorsViewsTabs />
+        <VendorsTable
+          onDeleteVendor={handleDeleteVendor}
+          onEditVendor={handleEditVendor}
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
+      </Route>
+    </Switch>
+  );
+}
+
+export default compose(withAlertsActions, withVendorActions)(VendorsViewPage);

client/src/containers/Vendors/utils.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { formatMessage } from 'services/intl';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+// Transform API errors in toasts messages.
+export const transformErrors = useCallback((errors) => {
+  if (errors.some((e) => e.type === 'VENDOR.HAS.BILLS')) {
+    AppToaster.show({
+      message: formatMessage({
+        id: 'vendor_has_bills',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+}, []);

client/src/containers/Vendors/withVendorActions.js

@@ -8,10 +8,10 @@ import {
 } from 'store/vendors/vendors.actions';
 import t from 'store/types';
 
-const mapDipatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({
   requestSubmitVendor: (form) => dispatch(submitVendor({ form })),
   requestEditVendor: (id, form) => dispatch(editVendor({ id, form })),
-  requsetFetchVendor: (id) => dispatch(fetchVendor({ id })),
+  requestFetchVendor: (id) => dispatch(fetchVendor({ id })),
   requestFetchVendorsTable: (query = {}) =>
     dispatch(fetchVendorsTable({ query: { ...query } })),
   requestDeleteVender: (id) => dispatch(deleteVendor({ id })),
@@ -25,6 +25,11 @@ const mapDipatchToProps = (dispatch) => ({
       type: t.VENDORS_TABLE_QUERIES_ADD,
       payload: { queries },
     }),
+  setSelectedRowsVendors: (selectedRows) =>
+    dispatch({
+      type: t.VENDOR_SELECTED_ROWS_SET,
+      payload: { selectedRows },
+    }),
 });
 
-export default connect(null, mapDipatchToProps);
+export default connect(null, mapDispatchToProps);

client/src/containers/Vendors/withVendors.js

@@ -25,6 +25,7 @@ export default (mapState) => {
       vendorsPageination: getVendorsPaginationMeta(state, props, query),
       vendorsLoading: state.vendors.loading,
       vendorsCurrentViewId: getVendorsCurrentViewId(state, props),
+      vendorsSelectedRows: state.vendors.selectedRows,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/store/Estimate/estimates.reducer.js

@@ -15,6 +15,7 @@ const initialState = {
     page: 1,
   },
   currentViewId: -1,
+  selectedRows: [],
 };
 
 const defaultEstimate = {
@@ -101,6 +102,10 @@ export default createReducer(initialState, {
       },
     };
   },
+  [t.ESTIMATES_SELECTED_ROWS_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
 
   ...journalNumberChangedReducer(t.ESTIMATE_NUMBER_CHANGED),
   ...createTableQueryReducers('ESTIMATES'),

client/src/store/Estimate/estimates.types.js

@@ -10,4 +10,5 @@ export default {
   ESTIMATES_PAGE_SET: 'ESTIMATES_PAGE_SET',
   ESTIMATES_ITEMS_SET: 'ESTIMATES_ITEMS_SET',
   ESTIMATE_NUMBER_CHANGED: 'ESTIMATE_NUMBER_CHANGED',
+  ESTIMATES_SELECTED_ROWS_SET: 'ESTIMATES_SELECTED_ROWS_SET',
 };

client/src/store/customers/customers.reducer.js

@@ -10,7 +10,7 @@ const initialState = {
   views: {},
   loading: false,
   currentViewId: -1,
-
+  selectedRows: [],
   // Responsible for data fetch query based on this query.
   tableQuery: {
     page_size: 12,
@@ -49,7 +49,6 @@ export default createReducer(initialState, {
     state.views[viewId] = {
       ...view,
       pages: {
-        
         ...(state.views?.[viewId]?.pages || {}),
         [paginationMeta.page]: {
           ids: customers.map((i) => i.id),
@@ -85,7 +84,10 @@ export default createReducer(initialState, {
     });
     state.items = items;
   },
-
+  [t.CUSTOMER_SELECTED_ROWS_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
   ...viewPaginationSetReducer(t.CUSTOMERS_PAGINATION_SET),
   ...createTableQueryReducers('CUSTOMERS'),
 });

client/src/store/customers/customers.type.js

@@ -8,4 +8,5 @@ export default {
   CUSTOMERS_BULK_DELETE: 'CUSTOMERS_BULK_DELETE',
   CUSTOMERS_PAGINATION_SET: 'CUSTOMERS_PAGINATION_SET',
   CUSTOMERS_SET_CURRENT_VIEW: 'CUSTOMERS_SET_CURRENT_VIEW',
+  CUSTOMER_SELECTED_ROWS_SET: 'CUSTOMER_SELECTED_ROWS_SET',
 };

client/src/store/vendors/vendors.reducer.js

@@ -11,7 +11,7 @@ const initialState = {
   views: {},
   loading: false,
   currentViewId: -1,
-
+  selectedRows: [],
   tableQuery: {
     page_size: 12,
     page: 1,
@@ -72,6 +72,11 @@ export default createReducer(initialState, {
       delete state.items[id];
     }
   },
+
+  [t.VENDOR_SELECTED_ROWS_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
   ...viewPaginationSetReducer(t.VENDORS_PAGINATION_SET),
   ...createTableQueryReducers('VENDORS'),
 });

client/src/store/vendors/vendors.types.js

@@ -8,4 +8,5 @@ export default {
   VENDORS_BULK_DELETE: 'VENDORS_BULK_DELETE',
   VENDORS_PAGINATION_SET: 'VENDORS_PAGINATION_SET',
   VENDORS_SET_CURRENT_VIEW: 'VENDORS_SET_CURRENT_VIEW',
+  VENDOR_SELECTED_ROWS_SET: 'VENDOR_SELECTED_ROWS_SET',
 };