chrone: sperate client and server to different repos.

src/containers/Alerts/AccountActivateAlert.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { useActivateAccount } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Account activate alert.
+ */
+function AccountActivateAlert({
+  name,
+  isOpen,
+  payload: { accountId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: activateAccount,
+    isLoading 
+  } = useActivateAccount();
+
+  // Handle alert cancel.
+  const handleCancel = () => {
+    closeAlert('account-activate');
+  };
+
+  // Handle activate account confirm.
+  const handleConfirmAccountActivate = () => {
+    activateAccount(accountId).then(() => {
+      AppToaster.show({
+        message: intl.get('the_account_has_been_successfully_activated'),
+        intent: Intent.SUCCESS,
+      });
+      closeAlert('account-activate');
+    }).finally(() => {
+      closeAlert('account-activate');
+    });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmAccountActivate}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_activate_this_account'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(AccountActivateAlert);

src/containers/Alerts/AccountBulkActivateAlert.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { FormattedMessage as T, AppToaster } from 'components';
+
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+function AccountBulkActivateAlert({
+  name,
+  isOpen,
+  payload: { accountsIds },
+
+  // #withAlertActions
+  closeAlert,
+
+  requestBulkActivateAccounts,
+}) {
+  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(() => {
+        AppToaster.show({
+          message: intl.get('the_accounts_has_been_successfully_activated'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('accounts-table');
+      })
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={`${intl.get('activate')} (${selectedRowsCount})`}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleClose}
+      onConfirm={handleConfirmBulkActivate}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_activate_this_accounts'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withAccountsActions,
+)(AccountBulkActivateAlert);

src/containers/Alerts/AccountBulkDeleteAlert.js

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import { handleDeleteErrors } from 'containers/Accounts/utils';
+
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Account bulk delete alert.
+ */
+function AccountBulkDeleteAlert({
+  // #ownProps
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { accountsIds },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withAccountsActions
+  requestDeleteBulkAccounts,
+}) {
+  
+  const [isLoading, setLoading] = useState(false);
+
+  const selectedRowsCount = 0;
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+  // Handle confirm accounts bulk delete.
+  const handleConfirmBulkDelete = () => {
+    setLoading(true);
+    requestDeleteBulkAccounts(accountsIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_accounts_has_been_successfully_deleted'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('accounts-table');
+      })
+      .catch((errors) => {
+        handleDeleteErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={`${intl.get('delete')} (${selectedRowsCount})`}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_accounts_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withAccountsActions,
+)(AccountBulkDeleteAlert);

src/containers/Alerts/AccountBulkInactivateAlert.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+function AccountBulkInactivateAlert({
+  name,
+  isOpen,
+  payload: { accountsIds },
+
+  // #withAccountsActions
+  requestBulkInactiveAccounts,
+
+  closeAlert,
+}) {
+  
+  const [isLoading, setLoading] = useState(false);
+  const selectedRowsCount = 0;
+
+  // Handle alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+  // Handle Bulk Inactive accounts confirm.
+  const handleConfirmBulkInactive = () => {
+    setLoading(true);
+    requestBulkInactiveAccounts(accountsIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_accounts_have_been_successfully_inactivated'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('accounts-table');
+      })
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={`${intl.get('inactivate')} (${selectedRowsCount})`}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkInactive}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_inactive_this_accounts'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withAccountsActions,
+)(AccountBulkInactivateAlert);

src/containers/Alerts/AccountDeleteAlert.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster } from 'components';
+
+import { handleDeleteErrors } from 'containers/Accounts/utils';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { useDeleteAccount } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Account delete alerts.
+ */
+function AccountDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { accountId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount();
+
+  // handle cancel delete account alert.
+  const handleCancelAccountDelete = () => {
+    closeAlert(name);
+  };
+  // Handle confirm account delete.
+  const handleConfirmAccountDelete = () => {
+    deleteAccount(accountId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_account_has_been_successfully_deleted'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+        closeDrawer('account-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+          closeAlert(name);
+        },
+      );
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAccountDelete}
+      onConfirm={handleConfirmAccountDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_account_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(AccountDeleteAlert);

src/containers/Alerts/AccountInactivateAlert.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+import { useInactivateAccount } from 'hooks/query';
+
+/**
+ * Account inactivate alert.
+ */
+function AccountInactivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { accountId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: inactivateAccount,
+    isLoading
+  } = useInactivateAccount();
+
+  const handleCancelInactiveAccount = () => {
+    closeAlert('account-inactivate');
+  };
+
+  const handleConfirmAccountActive = () => {
+    inactivateAccount(accountId).then(() => {
+      AppToaster.show({
+        message: intl.get('the_account_has_been_successfully_inactivated'),
+        intent: Intent.SUCCESS,
+      });
+    }).catch(() => {
+
+    }).finally(() => {
+      closeAlert('account-inactivate');
+    });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'inactivate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelInactiveAccount}
+      onConfirm={handleConfirmAccountActive}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_inactive_this_account'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(AccountInactivateAlert);

src/containers/Alerts/Bills/BillDeleteAlert.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { handleDeleteErrors } from 'containers/Purchases/Bills/BillForm/utils';
+import { useDeleteBill } from 'hooks/query';
+import { compose } from 'utils';
+
+/**
+ * Bill delete alert.
+ */
+function BillDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { billId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteBillMutate } = useDeleteBill();
+
+  // Handle cancel Bill
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete invoice
+  const handleConfirmBillDelete = () => {
+    deleteBillMutate(billId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_bill_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+
+        closeDrawer('bill-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon={'trash'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBillDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_this_bill_you_will_able_to_restore_it'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(BillDeleteAlert);

src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { useDeleteLandedCost } from 'hooks/query';
+
+import { AppToaster } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ *  Bill transaction delete alert.
+ */
+function BillTransactionDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { BillId },
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteLandedCostMutate, isLoading } =
+    useDeleteLandedCost();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmLandedCostDelete = () => {
+    deleteLandedCostMutate(BillId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_landed_cost_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmLandedCostDelete}
+      loading={isLoading}
+    >
+      <p><T id={`Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?`}/></p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BillTransactionDeleteAlert);

src/containers/Alerts/Bills/BillOpenAlert.js

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

src/containers/Alerts/Contacts/ContactActivateAlert.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useActivateContact } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Contact activate alert.
+ */
+function ContactActivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { contactId, service },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: activateContact, isLoading } = useActivateContact();
+
+  // Handle activate contact alert cancel.
+  const handleCancelActivateContact = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm contact activated.
+  const handleConfirmContactActivate = () => {
+    activateContact(contactId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_contact_has_been_activated_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateContact}
+      loading={isLoading}
+      onConfirm={handleConfirmContactActivate}
+    >
+      <p>{intl.get('are_sure_to_activate_this_contact')}</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ContactActivateAlert);

src/containers/Alerts/Contacts/ContactInactivateAlert.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useInactivateContact } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Contact inactivate alert.
+ */
+function ContactInactivateAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { contactId, service },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: inactivateContact, isLoading } = useInactivateContact();
+
+  // Handle cancel inactivate alert.
+  const handleCancelInactivateContact = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm contact Inactive.
+  const handleConfirmContactInactive = () => {
+    inactivateContact(contactId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_contact_has_been_inactivated_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'inactivate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelInactivateContact}
+      onConfirm={handleConfirmContactInactive}
+      loading={isLoading}
+    >
+      <p>
+        {intl.get('are_sure_to_inactive_this_contact', {
+          name: service,
+        })}
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ContactInactivateAlert);

src/containers/Alerts/Currencies/CurrencyDeleteAlert.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster } from 'components';
+
+import { useDeleteCurrency } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Currency delete alerts.
+ */
+function CurrencyDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { currency_code },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: deleteCurrency, isLoading } = useDeleteCurrency();
+
+  // handle cancel delete currency alert.
+  const handleCancelCurrencyDelete = () => closeAlert(name);
+
+  // handle alert confirm delete currency.
+  const handleConfirmCurrencyDelete = () => {
+    deleteCurrency(currency_code)
+      .then((response) => {
+        AppToaster.show({
+          message: intl.get('the_currency_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(({ response: { data: { errors } } }) => {
+        if (errors.find(e => e.type === 'CANNOT_DELETE_BASE_CURRENCY')) {
+          AppToaster.show({
+            intent: Intent.DANGER,
+            message: 'Cannot delete the base currency.'
+          });
+        }
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelCurrencyDelete}
+      onConfirm={handleConfirmCurrencyDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_currency_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CurrencyDeleteAlert);

src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js

@@ -0,0 +1,76 @@
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+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 { compose } from 'utils';
+
+/**
+ * Customer bulk delete alert.
+ */
+function CustomerBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { customersIds },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  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: intl.get('the_customers_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        transformErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [requestDeleteBulkCustomers, customersIds]);
+
+  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,
+)(CustomerBulkDeleteAlert);

src/containers/Alerts/Customers/CustomerDeleteAlert.js

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
+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 { useDeleteCustomer } from 'hooks/query';
+import { compose } from 'utils';
+
+
+/**
+ * Customer delete alert.
+ */
+function CustomerDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { contactId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: deleteCustomerMutate,
+    isLoading
+  } = useDeleteCustomer();
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete customer.
+  const handleConfirmDeleteCustomer = useCallback(() => {
+    deleteCustomerMutate(contactId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_customer_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(({ response: { data: { errors } } }) => {
+        transformErrors(errors);
+      })
+      .finally(() => {
+        closeAlert(name);
+      });
+  }, [deleteCustomerMutate, contactId, closeAlert, name]);
+
+  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,
+)(CustomerDeleteAlert);

src/containers/Alerts/Estimates/EstimateApproveAlert.js

@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+
+import { useApproveEstimate } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Estimate approve alert.
+ */
+function EstimateApproveAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: deliverEstimateMutate,
+    isLoading,
+  } = useApproveEstimate();
+
+  // handle cancel approve alert.
+  const handleCancelApproveEstimate = () => {
+    closeAlert(name);
+  };
+  // Handle confirm estimate approve.
+  const handleConfirmEstimateApprove = useCallback(() => {
+    deliverEstimateMutate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_estimate_has_been_approved_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  }, [estimateId, deliverEstimateMutate, closeAlert, name]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'approve'} />}
+      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,
+)(EstimateApproveAlert);

src/containers/Alerts/Estimates/EstimateDeleteAlert.js

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeleteEstimate } from 'hooks/query';
+
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Estimate delete alert.
+ */
+function EstimateDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteEstimateMutate, isLoading } = useDeleteEstimate();
+
+  // handle cancel delete  alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete estimate
+  const handleAlertConfirm = () => {
+    deleteEstimateMutate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_estimate_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('estimate-detail-drawer');
+      })
+      .catch(({ errors }) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      loading={isLoading}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_estimate_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(EstimateDeleteAlert);

src/containers/Alerts/Estimates/EstimateDeliveredAlert.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeliverEstimate } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Estimate delivered alert.
+ */
+function EstimateDeliveredAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: deliverEstimateMutate, isLoading } = useDeliverEstimate();
+
+  // Handle cancel delivered estimate alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm estimate delivered.
+  const handleAlertConfirm = () => {
+    deliverEstimateMutate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_estimate_has_been_delivered_successfully'),
+          intent: Intent.SUCCESS,
+        })
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'deliver'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_deliver_this_estimate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(EstimateDeliveredAlert);

src/containers/Alerts/Estimates/EstimateRejectAlert.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster } from 'components';
+import { useRejectEstimate } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Estimate reject delete alerts.
+ */
+function EstimateRejectAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { estimateId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: rejectEstimateMutate,
+    isLoading
+  } = useRejectEstimate();
+
+  // Handle cancel reject estimate alert.
+  const handleCancelRejectEstimate = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm estimate reject.
+  const handleConfirmEstimateReject = () => {
+    rejectEstimateMutate(estimateId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_estimate_has_been_rejected_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  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,
+)(EstimateRejectAlert);

src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Exchange rate bulk delete alert.
+ */
+function ExchangeRateBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { exchangeRatesIds },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // handle cancel item bulk delete alert.
+  const handleCancelBulkDelete = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm Exchange Rates bulk delete.
+  // const handleConfirmBulkDelete = () => {
+  //   bulkDeleteExchangeRate(exchangeRatesIds)
+  //     .then(() => {
+  //       AppToaster.show({
+  //         message: formatMessage({
+  //           id: 'the_exchange_rates_has_been_successfully_deleted',
+  //         }),
+  //         intent: Intent.SUCCESS,
+  //       });
+  //     })
+  //     .catch(({ errors }) => {
+  //       handleDeleteErrors(errors);
+  //     });
+  // };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: size(exchangeRatesIds) }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      // onConfirm={}
+      // loading={isLoading}
+    >
+      <p>
+        <T
+          id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ExchangeRateBulkDeleteAlert);

src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useDeleteExchangeRate } from 'hooks/query';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * exchange rate delete alerts.
+ */
+function ExchangeRateDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { exchangeRateId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const {
+    mutateAsync: deleteExchangeRate,
+    isLoading,
+  } = useDeleteExchangeRate();
+  
+
+  // Handle cancel delete exchange rate alert.
+  const handleCancelExchangeRateDelete = () => closeAlert(name);
+
+  const handelConfirmExchangeRateDelete = () => {
+    deleteExchangeRate(exchangeRateId)
+      .then((response) => {
+        AppToaster.show({
+          message: intl.get('the_exchange_rates_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelExchangeRateDelete}
+      onConfirm={handelConfirmExchangeRateDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ExchangeRateDeleteAlert);

src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.js

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

src/containers/Alerts/Expenses/ExpenseDeleteAlert.js

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

src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Alert description.
+ */
+function ExpenseDeleteEntriesAlert({
+  name,
+  onConfirm,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {  },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm the alert.
+  const handleConfirm = (event) => {
+    closeAlert(name);
+    saveInvoke(onConfirm, event)
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'clear_all_lines'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={false}
+    >
+      <p>
+        Clearing the table lines will delete all expense amounts were applied, Is this okay?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ExpenseDeleteEntriesAlert);

src/containers/Alerts/Expenses/ExpensePublishAlert.js

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

src/containers/Alerts/Invoices/InvoiceDeleteAlert.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteInvoice } from 'hooks/query';
+
+import { handleDeleteErrors } from 'containers/Sales/Invoices/InvoicesLanding/components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice delete alert.
+ */
+function InvoiceDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { invoiceId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteInvoiceMutate, isLoading } = useDeleteInvoice();
+
+  // handle cancel delete invoice alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete invoice
+  const handleConfirmInvoiceDelete = () => {
+    deleteInvoiceMutate(invoiceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_invoice_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('invoice-detail-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  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,
+  withDrawerActions,
+)(InvoiceDeleteAlert);

src/containers/Alerts/Invoices/InvoiceDeliverAlert.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeliverInvoice } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Sale invoice alert.
+ */
+function InvoiceDeliverAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { invoiceId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: deliverInvoiceMutate,
+    isLoading
+  } = useDeliverInvoice();
+
+  // handle cancel delete deliver alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm invoice deliver.
+  const handleConfirmInvoiceDeliver = () => {
+    deliverInvoiceMutate(invoiceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_invoice_has_been_delivered_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  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,
+)(InvoiceDeliverAlert);

src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import { useDeleteInventoryAdjustment } from 'hooks/query';
+
+import { compose } from 'utils';
+
+/**
+ * Inventory Adjustment delete alerts.
+ */
+function InventoryAdjustmentDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { inventoryId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteInventoryAdjMutate, isLoading } =
+    useDeleteInventoryAdjustment();
+
+  // handle cancel delete alert.
+  const handleCancelInventoryAdjustmentDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle the confirm delete of the inventory adjustment transaction.
+  const handleConfirmInventoryAdjustmentDelete = () => {
+    deleteInventoryAdjMutate(inventoryId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_adjustment_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('inventory-adjustment-drawer');
+      })
+      .catch((errors) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelInventoryAdjustmentDelete}
+      onConfirm={handleConfirmInventoryAdjustmentDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(InventoryAdjustmentDeleteAlert);

src/containers/Alerts/Items/InventoryAdjustmentPublishAlert.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { usePublishInventoryAdjustment } from 'hooks/query';
+
+import { AppToaster } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Inventory Adjustment publish alert.
+ */
+
+function InventoryAdjustmentPublishAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { inventoryId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: publishInventoryAdjustmentMutate, isLoading } =
+    usePublishInventoryAdjustment();
+
+  // Handle cancel inventory adjustment alert.
+  const handleCancelPublish = () => {
+    closeAlert(name);
+  };
+
+  // Handle publish inventory adjustment confirm.
+  const handleConfirmPublish = () => {
+    publishInventoryAdjustmentMutate(inventoryId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('inventory_adjustment.publish.success_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'publish'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelPublish}
+      onConfirm={handleConfirmPublish}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'inventory_adjustment.publish.alert_message'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(InventoryAdjustmentPublishAlert);

src/containers/Alerts/Items/ItemActivateAlert.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import {
+  useActivateItem,
+} from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Item activate alert.
+ */
+function ItemActivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: activateItem, isLoading }  = useActivateItem();
+  
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item activated.
+  const handleConfirmItemActivate = () => {
+    activateItem(itemId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_item_has_been_activated_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateItem}
+      loading={isLoading}
+      onConfirm={handleConfirmItemActivate}
+    >
+      <p>
+        <T id={'are_sure_to_activate_this_item'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ItemActivateAlert);

src/containers/Alerts/Items/ItemBulkDeleteAlert.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
+import { AppToaster } from 'components';
+
+import withItemsActions from 'containers/Items/withItemsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item bulk delete alert.
+ */
+function ItemBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemsIds },
+
+  // #withItemsActions
+  requestDeleteBulkItems,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel item bulk delete alert.
+  const handleCancelBulkDelete = () => {
+    closeAlert(name);
+  };
+  // Handle confirm items bulk delete.
+  const handleConfirmBulkDelete = () => {
+    setLoading(true);
+    requestDeleteBulkItems(itemsIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_items_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  };
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: size(itemsIds) }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_items_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemsActions,
+)(ItemBulkDeleteAlert);

src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
+import { AppToaster } from 'components';
+
+import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item category bulk delete alerts.
+ */
+function ItemCategoryBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemCategoriesIds },
+
+  // #withItemCategoriesActions
+  requestDeleteBulkItemCategories,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel bulk delete alert.
+  const handleCancelBulkDelete = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm itemCategories bulk delete.
+  const handleConfirmBulkDelete = () => {
+    setLoading(true);
+    requestDeleteBulkItemCategories(itemCategoriesIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_item_categories_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  };
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: size(itemCategoriesIds) }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'once_delete_these_item_categories_you_will_not_able_restore_them'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemCategoriesActions,
+)(ItemCategoryBulkDeleteAlert);

src/containers/Alerts/Items/ItemCategoryDeleteAlert.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeleteItemCategory } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item Category delete alerts.
+ */
+function ItemCategoryDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemCategoryId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const {
+    mutateAsync: deleteItemCategory,
+    isLoading,
+  } = useDeleteItemCategory();
+
+  // handle cancel delete item category alert.
+  const handleCancelItemCategoryDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle alert confirm delete item category.
+  const handleConfirmItemDelete = () => {
+    deleteItemCategory(itemCategoryId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_item_category_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelItemCategoryDelete}
+      onConfirm={handleConfirmItemDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_item_category_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ItemCategoryDeleteAlert);

src/containers/Alerts/Items/ItemDeleteAlert.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { handleDeleteErrors } from 'containers/Items/utils';
+import { useDeleteItem } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withItemsActions from 'containers/Items/withItemsActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item delete alerts.
+ */
+function ItemDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withItemsActions
+  setItemsTableState,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteItem, isLoading } = useDeleteItem();
+
+  // Handle cancel delete item alert.
+  const handleCancelItemDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete item.
+  const handleConfirmDeleteItem = () => {
+    deleteItem(itemId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_item_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        // Reset to page number one.
+        setItemsTableState({ page: 1 });
+        closeDrawer('item-detail-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          handleDeleteErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelItemDelete}
+      onConfirm={handleConfirmDeleteItem}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_item_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemsActions,
+  withDrawerActions,
+)(ItemDeleteAlert);

src/containers/Alerts/Items/ItemInactivateAlert.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import { useInactivateItem } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item inactivate alert.
+ */
+function ItemInactivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: inactivateItem, isLoading } = useInactivateItem();
+
+  // Handle cancel inactivate alert.
+  const handleCancelInactivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item Inactive.
+  const handleConfirmItemInactive = () => {
+    inactivateItem(itemId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_item_has_been_inactivated_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'inactivate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelInactivateItem}
+      onConfirm={handleConfirmItemInactive}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_inactive_this_item'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ItemInactivateAlert);

src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Items entries table clear all lines alert.
+ */
+function ItemsEntriesDeleteAlert({
+  name,
+  onConfirm,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {  },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm the alert.
+  const handleConfirm = (event) => {
+    closeAlert(name);
+    saveInvoke(onConfirm, event)
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'clear_all_lines'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={false}
+    >
+      <p>
+        Clearing the table lines will delete all quantities and rate were applied to the items, Is this okay?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ItemsEntriesDeleteAlert);

src/containers/Alerts/ManualJournals/JournalBulkDeleteAlert.js

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

src/containers/Alerts/ManualJournals/JournalDeleteAlert.js

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

src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose, saveInvoke } from 'utils';
+
+/**
+ * Make journal delete entries alert.
+ */
+function JournalDeleteEntriesAlert({
+  // #ownProps
+  name,
+  onConfirm,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {  },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete manual journal.
+  const handleConfirm = (event) => {
+    closeAlert(name);
+    saveInvoke(onConfirm, event);
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'clear_all_lines'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={false}
+    >
+      <p>
+        Clearing the table lines will delete all credits and debits were applied, Is this okay?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(JournalDeleteEntriesAlert);

src/containers/Alerts/ManualJournals/JournalPublishAlert.js

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

src/containers/Alerts/PaymentMades/ChangingFullAmountAlert.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+import { saveInvoke } from '../../../utils';
+
+/**
+ * Changing full-amount alert in payment made form.
+ */
+function ChangingFullAmountAlert({
+  name,
+  onConfirm,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {  },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete manual journal.
+  const handleConfirm = (event) => {
+    closeAlert(name);
+    saveInvoke(onConfirm, event)
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'ok'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+    >
+      <p>
+        Changing full amount will change all credit and payment were applied, Is
+        this okay?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ChangingFullAmountAlert);

src/containers/Alerts/PaymentMades/ClearTransactionAlert.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Alert description.
+ */
+function ClearPaymentTransactionAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {  },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete manual journal.
+  const handleConfirm = () => {
+     
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'action'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={false}
+    >
+      <p>
+        <T id={'are_you_sure_you_want_to_clear_this_transaction'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ClearPaymentTransactionAlert);

src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Clearning all lines alert.
+ */
+function ClearAllLinesAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {},
+
+  // #withAlertActions
+  closeAlert,
+}) {
+
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete manual journal.
+  const handleConfirm = () => {};
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'action'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={false}
+    >
+      <p>
+        Clearing the table lines will delete all credits and payments were
+        applied. Is this okay?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ClearAllLinesAlert);

src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js

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

src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { saveInvoke, compose } from 'utils';
+
+/**
+ * Clearning all lines alert.
+ */
+function ClearningAllLinesAlert({
+  name,
+  onConfirm,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: {},
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // Handle the alert cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete manual journal.
+  const handleConfirm = (event) => {
+    closeAlert(name);
+    saveInvoke(onConfirm, event)
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'action'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+    >
+      <p>
+        <T id={'clearing_the_table_lines_will_delete_all_credits'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(ClearningAllLinesAlert);

src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeletePaymentReceive } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Payment receive delete alert.
+ */
+function PaymentReceiveDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { paymentReceiveId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deletePaymentReceiveMutate, isLoading } =
+    useDeletePaymentReceive();
+
+  // Handle cancel payment Receive.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete payment receive.
+  const handleConfirmPaymentReceiveDelete = () => {
+    deletePaymentReceiveMutate(paymentReceiveId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'the_payment_receive_has_been_deleted_successfully',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('payment-receive-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  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,
+  withDrawerActions,
+)(PaymentReceiveDeleteAlert);

src/containers/Alerts/Receipts/ReceiptCloseAlert.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useCloseReceipt } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Receipt close alert.
+ */
+function ReceiptCloseAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { receiptId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: closeReceiptMutate, isLoading } = useCloseReceipt();
+
+  // handle cancel delete alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm receipt close.
+  const handleConfirmReceiptClose = () => {
+    closeReceiptMutate(receiptId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_receipt_has_been_closed_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  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,
+)(ReceiptCloseAlert);

src/containers/Alerts/Receipts/ReceiptDeleteAlert.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeleteReceipt } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice  alert.
+ */
+function NameDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { receiptId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteReceiptMutate, isLoading } = useDeleteReceipt();
+
+  // Handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete receipt
+  const handleConfirmReceiptDelete = () => {
+    deleteReceiptMutate(receiptId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_receipt_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('receipt-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  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,
+  withDrawerActions
+)(NameDeleteAlert);

src/containers/Alerts/Users/UserActivateAlert.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Alert, Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useActivateUser } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * User inactivate alert.
+ */
+function UserActivateAlert({
+  // #ownProps
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { userId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+
+  const { mutateAsync: userActivateMutate } = useActivateUser();
+
+  const handleConfirmActivate = () => {
+    userActivateMutate(userId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_user_has_been_activated_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        closeAlert(name);
+      });
+  };
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmActivate}
+    >
+      <p>
+        <T id={'are_sure_to_activate_this_account'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(UserActivateAlert);

src/containers/Alerts/Users/UserDeleteAlert.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+
+import { useDeleteUser } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'redux';
+
+/**
+ * User delete alert.
+ */
+function UserDeleteAlert({
+  // #ownProps
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { userId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: deleteUserMutate, isLoading } = useDeleteUser();
+
+  const handleCancelUserDelete = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmUserDelete = () => {
+    deleteUserMutate(userId)
+      .then((response) => {
+        AppToaster.show({
+          message: intl.get('the_user_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(({ response: { data: { errors } } }) => {
+        if (errors.find(e => e.type === 'CANNOT_DELETE_LAST_USER')) {
+          AppToaster.show({
+            message: 'Cannot delete the last user in the system.',
+            intent: Intent.DANGER,
+          });
+        }
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelUserDelete}
+      onConfirm={handleConfirmUserDelete}
+      loading={isLoading}
+    >
+      <p>
+        Once you delete this user, you won't be able to restore it later. Are
+        you sure you want to delete ?
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(UserDeleteAlert);

src/containers/Alerts/Users/UserInactivateAlert.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Alert, Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useInactivateUser } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * User inactivate alert.
+ */
+function UserInactivateAlert({
+  // #ownProps
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { userId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+
+  const { mutateAsync: userInactivateMutate } = useInactivateUser();
+
+  const handleConfirmInactivate = () => {
+    userInactivateMutate(userId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_user_has_been_inactivated_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(({ response: { data: { errors } } }) => {
+        if (errors.find(e => e.type === 'CANNOT.TOGGLE.ACTIVATE.AUTHORIZED.USER')) {
+          AppToaster.show({
+            message: 'You could not activate/inactivate the same authorized user.',
+            intent: Intent.DANGER,
+          });
+        }
+        closeAlert(name);
+      });
+  };
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'inactivate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmInactivate}
+    >
+      <p>
+        <T id={'are_sure_to_inactive_this_account'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(UserInactivateAlert);

src/containers/Alerts/Vendors/VendorDeleteAlert.js

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster } from 'components';
+import { transformErrors } from 'containers/Vendors/utils';
+import { useDeleteVendor } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Vendor delete alert.
+ */
+function VendorDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { contactId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  
+  const { mutateAsync: deleteVendorMutate, isLoading } = useDeleteVendor();
+
+  // Handle cancel delete the vendor.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete vendor.
+  const handleConfirmDeleteVendor = useCallback(() => {
+    deleteVendorMutate(contactId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_vendor_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          transformErrors(errors);
+        },
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  }, [deleteVendorMutate, name, closeAlert, contactId]);
+
+  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,
+)(VendorDeleteAlert);

src/containers/Alerts/index.js

@@ -0,0 +1,5 @@
+import AccountDeleteAlert from './AccountDeleteAlert';
+
+export default {
+  AccountDeleteAlert,
+};