re-structure to monorepo.

packages/webapp/src/containers/Alerts/Accounts/AccountActivateAlert.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/Accounts/AccountBulkActivateAlert.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/Accounts/AccountBulkDeleteAlert.tsx

@@ -0,0 +1,84 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/Accounts/AccountBulkInactivateAlert.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+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/withAccountsTableActions';
+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);

packages/webapp/src/containers/Alerts/Accounts/AccountDeleteAlert.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} 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);

packages/webapp/src/containers/Alerts/Accounts/AccountInactivateAlert.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Accounts/index.tsx

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

packages/webapp/src/containers/Alerts/Bills/BillDeleteAlert.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+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('landed_cost.action.delete.success_message'),
+          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={`landed_cost.once_your_delete_this_located_landed_cost`} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BillTransactionDeleteAlert);

packages/webapp/src/containers/Alerts/Bills/BillOpenAlert.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Branches/BranchDeleteAlert.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeleteBranch } from '@/hooks/query';
+import { handleDeleteErrors } from '@/containers/Preferences/Branches/utils';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Branch delete alert.
+ */
+function BranchDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { branchId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteBranch, isLoading } = useDeleteBranch();
+
+  // Handle cancel delete alert.
+  const handleCancelDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete branch.
+  const handleConfirmDeleteBranch = () => {
+    deleteBranch(branchId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('branch.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .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={handleCancelDelete}
+      onConfirm={handleConfirmDeleteBranch}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'branch.once_delete_this_branch'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BranchDeleteAlert);

packages/webapp/src/containers/Alerts/Branches/BranchMarkPrimaryAlert.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useMarkBranchAsPrimary } from '@/hooks/query';
+
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+
+import { compose } from '@/utils';
+
+/**
+ * branch mark primary alert.
+ */
+function BranchMarkPrimaryAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { branchId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: markPrimaryBranchMutate, isLoading } =
+    useMarkBranchAsPrimary();
+
+  // Handle cancel mark primary alert.
+  const handleCancelMarkPrimaryAlert = () => {
+    closeAlert(name);
+  };
+
+  // andle cancel mark primary confirm.
+  const handleConfirmMarkPrimaryBranch = () => {
+    markPrimaryBranchMutate(branchId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('branch.alert.mark_primary_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      // cancelButtonText={<T id={'cancel'} />}
+      // confirmButtonText={<T id={'make_primary'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelMarkPrimaryAlert}
+      onConfirm={handleConfirmMarkPrimaryBranch}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'branch.alert.are_you_sure_you_want_to_make'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BranchMarkPrimaryAlert);

packages/webapp/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import { useDeleteCashflowTransaction } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Account delete transaction alert.
+ */
+function AccountDeleteTransactionAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { referenceId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteTransactionMutate, isLoading } =
+    useDeleteCashflowTransaction();
+
+  // handle cancel delete alert
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete transaction.
+  const handleConfirmTransactioneDelete = () => {
+    deleteTransactionMutate(referenceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('cashflow-transaction-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmTransactioneDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(AccountDeleteTransactionAlert);

packages/webapp/src/containers/Alerts/Contacts/ContactActivateAlert.tsx

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } 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);

packages/webapp/src/containers/Alerts/Contacts/ContactInactivateAlert.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/CreditNotes/CreditNoteDeleteAlert.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useDeleteCreditNote } from '@/hooks/query';
+import { handleDeleteErrors } from '@/containers/Sales/CreditNotes/CreditNotesLanding/utils';
+import { compose } from '@/utils';
+
+/**
+ * Credit note delete alert.
+ */
+function CreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteCreditNoteMutate } =
+    useDeleteCreditNote();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditNoteDelete = () => {
+    deleteCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('credit-note-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={handleConfirmCreditNoteDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'credit_note.once_delete_this_credit_note'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(CreditNoteDeleteAlert);

packages/webapp/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useOpenCreditNote } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Credit note opened alert.
+ */
+function CreditNoteOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openCreditNoteMutate, isLoading } = useOpenCreditNote();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm credit note opened.
+  const handleAlertConfirm = () => {
+    openCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'credit_note_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CreditNoteOpenedAlert);

packages/webapp/src/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileCredit } from '@/hooks/query';
+import { compose } from '@/utils';
+
+/**
+ * Reconcile credit note delete alert.
+ */
+function ReconcileCreditNoteDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileCreditMutate } =
+    useDeleteReconcileCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmVendorCreditDelete = () => {
+    deleteReconcileCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_credit_note.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .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={handleConfirmVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'reconcile_credit_note.once_you_delete_this_reconcile_credit_note'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileCreditNoteDeleteAlert);

packages/webapp/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+
+import { useDeleteRefundCreditNote } from '@/hooks/query';
+
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Refund credit transactions delete alert
+ */
+function RefundCreditNoteDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundCreditMutate, isLoading } =
+    useDeleteRefundCreditNote();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundCreditDelete = () => {
+    deleteRefundCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('refund_credit_transactions.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-credit-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_credit_transactions.once_your_delete_this_refund_credit_note`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundCreditNoteDeleteAlert);

packages/webapp/src/containers/Alerts/Currencies/CurrencyDeleteAlert.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Customers/CustomerActivateAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useActivateContact } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Customer activate alert.
+ */
+function CustomerActivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { customerId, service },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: activateContact, isLoading } = useActivateContact();
+
+  // Handle activate constomer alert cancel.
+  const handleCancelActivateCustomer = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm customer activated.
+  const handleConfirmCustomerActivate = () => {
+    activateContact(customerId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('customer.alert.activated_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateCustomer}
+      loading={isLoading}
+      onConfirm={handleConfirmCustomerActivate}
+    >
+      <p>
+        {intl.get('customer.alert.are_you_sure_want_to_activate_this_customer')}
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CustomerActivateAlert);

packages/webapp/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+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);
+  };
+
+
+
+  // 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);

packages/webapp/src/containers/Alerts/Customers/CustomerDeleteAlert.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { transformErrors } from '@/containers/Customers/utils';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useDeleteCustomer } from '@/hooks/query';
+import { compose } from '@/utils';
+
+/**
+ * Customer delete alert.
+ */
+function CustomerDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { contactId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  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,
+        });
+        closeDrawer('customer-detail-drawer');
+      })
+      .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,
+  withDrawerActions,
+)(CustomerDeleteAlert);

packages/webapp/src/containers/Alerts/Customers/CustomerInactivateAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useInactivateContact } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * customer inactivate alert.
+ */
+function CustomerInactivateAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { customerId, service },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: inactivateContact, isLoading } = useInactivateContact();
+
+  // Handle cancel inactivate alert.
+  const handleCancelInactivateCustomer = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm contact Inactive.
+  const handleConfirmCustomerInactive = () => {
+    inactivateContact(customerId)
+      .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={handleCancelInactivateCustomer}
+      onConfirm={handleConfirmCustomerInactive}
+      loading={isLoading}
+    >
+      <p>
+        {intl.get(
+          'customer.alert.are_you_sure_want_to_inactivate_this_customer',
+        )}
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CustomerInactivateAlert);

packages/webapp/src/containers/Alerts/Estimates/EstimateApproveAlert.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+
+import { useApproveEstimate } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Estimates/EstimateDeleteAlert.tsx

@@ -0,0 +1,99 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import { useDeleteEstimate } from '@/hooks/query';
+
+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(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          if (
+            errors.find((e) => e.type === 'SALE_ESTIMATE_CONVERTED_TO_INVOICE')
+          ) {
+            AppToaster.show({
+              intent: Intent.DANGER,
+              message: intl.get(
+                'estimate.delete.error.estimate_converted_to_invoice',
+              ),
+            });
+          }
+        },
+      )
+      .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);

packages/webapp/src/containers/Alerts/Estimates/EstimateDeliveredAlert.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeliverEstimate } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Estimates/EstimateRejectAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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_reject_this_estimate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(EstimateRejectAlert);

packages/webapp/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.tsx

@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.tsx

@@ -0,0 +1,67 @@
+// @ts-nocheck
+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';
+
+/**
+ * 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);

packages/webapp/src/containers/Alerts/Expenses/ExpenseDeleteAlert.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/Expenses/ExpensePublishAlert.tsx

@@ -0,0 +1,65 @@
+// @ts-nocheck
+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 { 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);

packages/webapp/src/containers/Alerts/Invoices/CancelBadDebtAlert.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { useCancelBadDebt } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Cancel bad debt alert.
+ */
+function CancelBadDebtAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { invoiceId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // handle cancel  alert.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const { mutateAsync: cancelBadDebtMutate, isLoading } = useCancelBadDebt();
+
+  // handleConfirm alert.
+  const handleConfirm = () => {
+    cancelBadDebtMutate(invoiceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('bad_debt.cancel_alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'save'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'bad_debt.cancel_alert.message'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelBadDebtAlert);

packages/webapp/src/containers/Alerts/Invoices/InvoiceDeleteAlert.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} 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);

packages/webapp/src/containers/Alerts/Invoices/InvoiceDeliverAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeliverInvoice } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.tsx

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} 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_transaction_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);

packages/webapp/src/containers/Alerts/Items/InventoryAdjustmentPublishAlert.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { usePublishInventoryAdjustment } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Items/ItemActivateAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/Items/ItemBulkDeleteAlert.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React, { useState } from 'react';
+import {AppToaster, FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
+
+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);

packages/webapp/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+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/ItemsCategories/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);

packages/webapp/src/containers/Alerts/Items/ItemCategoryDeleteAlert.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import { useDeleteItemCategory } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Items/ItemDeleteAlert.tsx

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} 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);

packages/webapp/src/containers/Alerts/Items/ItemInactivateAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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);

packages/webapp/src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/ManualJournals/JournalBulkDeleteAlert.tsx

@@ -0,0 +1,47 @@
+// @ts-nocheck
+
+
+
+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>
+  );
+}

packages/webapp/src/containers/Alerts/ManualJournals/JournalDeleteAlert.tsx

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { useDeleteJournal } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/ManualJournals/JournalPublishAlert.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster,FormattedMessage as T } from '@/components';
+import { usePublishJournal } from '@/hooks/query';
+
+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)

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

@@ -0,0 +1,55 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+
+import { compose, 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);

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

@@ -0,0 +1,55 @@
+// @ts-nocheck
+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);

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

@@ -0,0 +1,55 @@
+// @ts-nocheck
+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);

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

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+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 = () => {
+    closeAlert(name);
+  };
+
+  // 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);

packages/webapp/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeletePaymentReceive } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Receipts/ReceiptCloseAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useCloseReceipt } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Receipts/ReceiptDeleteAlert.tsx

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeleteReceipt } from '@/hooks/query';
+
+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);

packages/webapp/src/containers/Alerts/Roles/RoleDeleteAlert.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useDeleteRole } from '@/hooks/query';
+import { handleDeleteErrors } from '@/containers/Preferences/Users/Roles/utils';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Role delete alert.
+ */
+function RoleDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { roleId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteRole, isLoading } = useDeleteRole();
+
+  // Handle cancel delete role alert.
+  const handleCancelDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete role.
+  const handleConfirmDeleteRole = () => {
+    deleteRole(roleId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('roles.permission_schema.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .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={handleCancelDelete}
+      onConfirm={handleConfirmDeleteRole}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'roles.permission_schema.once_delete_this_role_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(RoleDeleteAlert);

packages/webapp/src/containers/Alerts/TransactionLocking/cancelUnlockingPartialAlert.tsx

@@ -0,0 +1,81 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useCancelUnlockingPartialTransactions } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Cancel Unlocking partial transactions alerts.
+ */
+function CancelUnlockingPartialTarnsactions({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { module },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: cancelUnlockingPartial, isLoading } =
+    useCancelUnlockingPartialTransactions();
+
+  // Handle cancel.
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm.
+  const handleConfirm = () => {
+    const values = {
+      module: module,
+    };
+    cancelUnlockingPartial(values)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'unlocking_partial_transactions.alert.cancel_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'yes'} />}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'unlocking_partial_transactions.alert.message'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CancelUnlockingPartialTarnsactions);

packages/webapp/src/containers/Alerts/Users/UserActivateAlert.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Alert, Intent } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } 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);

packages/webapp/src/containers/Alerts/Users/UserDeleteAlert.tsx

@@ -0,0 +1,81 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useDeleteUser } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * 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);

packages/webapp/src/containers/Alerts/Users/UserInactivateAlert.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Alert, Intent } from '@blueprintjs/core';
+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);

packages/webapp/src/containers/Alerts/VendorCeditNotes/ReconcileVendorCreditDeleteAlert.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useDeleteReconcileVendorCredit } from '@/hooks/query';
+import { compose } from '@/utils';
+
+/**
+ * Reconcile vendor credit delete alert.
+ */
+function ReconcileVendorCreditDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteReconcileVendorCreditMutate } =
+    useDeleteReconcileVendorCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmReconcileVendorCreditDelete = () => {
+    deleteReconcileVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('reconcile_vendor_credit.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+        // closeDrawer('vendor-credit-detail-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmReconcileVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'reconcile_vendor_credit.alert.once_you_delete_this_reconcile_vendor_credit'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(ReconcileVendorCreditDeleteAlert);

packages/webapp/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.tsx

@@ -0,0 +1,78 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import { useDeleteRefundVendorCredit } from '@/hooks/query';
+
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Refund Vendor transactions delete alert.
+ */
+function RefundVendorCreditDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteRefundVendorCreditMutate, isLoading } =
+    useDeleteRefundVendorCredit();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundVendorCreditDelete = () => {
+    deleteRefundVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'refund_vendor_credit_transactions.alert.delete_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('refund-vendor-detail-drawer');
+      })
+      .catch(() => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(RefundVendorCreditDeleteAlert);

packages/webapp/src/containers/Alerts/VendorCeditNotes/VendorCreditDeleteAlert.tsx

@@ -0,0 +1,88 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} 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/CreditNotes/CreditNotesLanding/utils';
+import { useDeleteVendorCredit } from '@/hooks/query';
+import { compose } from '@/utils';
+
+/**
+ * Vendor Credit delete alert.
+ */
+function VendorCreditDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { isLoading, mutateAsync: deleteVendorCreditMutate } =
+    useDeleteVendorCredit();
+
+  // handle cancel delete credit note alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+  const handleConfirmCreditDelete = () => {
+    deleteVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credits.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('vendor-credit-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={handleConfirmCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'vendor_credits.note.once_delete_this_vendor_credit_note'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(VendorCreditDeleteAlert);

packages/webapp/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenVendorCredit } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ *  Vendor credit opened alert.
+ */
+function VendorCreditOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openVendorCreditMutate, isLoading } =
+    useOpenVendorCredit();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm  vendor credit as opened.
+  const handleAlertConfirm = () => {
+    openVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credit_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'vendor_credit_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorCreditOpenedAlert);

packages/webapp/src/containers/Alerts/Vendors/VendorActivateAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useActivateContact } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendor activate alert.
+ */
+function VendorActivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: activateContact, isLoading } = useActivateContact();
+
+  // Handle activate vendor alert cancel.
+  const handleCancelActivateVendor = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm vendor activated.
+  const handleConfirmVendorActivate = () => {
+    activateContact(vendorId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor.alert.activated_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateVendor}
+      loading={isLoading}
+      onConfirm={handleConfirmVendorActivate}
+    >
+      <p>
+        {intl.get('vendor.alert.are_you_sure_want_to_activate_this_vendor')}
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorActivateAlert);

packages/webapp/src/containers/Alerts/Vendors/VendorDeleteAlert.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} 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 withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendor delete alert.
+ */
+function VendorDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { contactId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  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,
+        });
+        closeDrawer('vendor-detail-drawer');
+      })
+      .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,
+  withDrawerActions,
+)(VendorDeleteAlert);

packages/webapp/src/containers/Alerts/Vendors/VendorInactivateAlert.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useInactivateContact } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendor inactivate alert.
+ */
+function VendorInactivateAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: inactivateContact, isLoading } = useInactivateContact();
+
+  // Handle cancel inactivate alert.
+  const handleCancelInactivateVendor = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm contact Inactive.
+  const handleConfirmVendorInactive = () => {
+    inactivateContact(vendorId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor.alert.inactivated_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'inactivate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelInactivateVendor}
+      onConfirm={handleConfirmVendorInactive}
+      loading={isLoading}
+    >
+      <p>
+        {intl.get('vendor.alert.are_you_sure_want_to_inactivate_this_vendor')}
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorInactivateAlert);

packages/webapp/src/containers/Alerts/Warehouses/WarehouseDeleteAlert.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import { useDeleteWarehouse } from '@/hooks/query';
+import { handleDeleteErrors } from '@/containers/Preferences/Warehouses/utils';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Warehouse delete alert
+ * @returns
+ */
+function WarehouseDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteWarehouseMutate, isLoading } =
+    useDeleteWarehouse();
+
+  // handle cancel delete warehouse alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete invoice
+  const handleConfirmWarehouseDelete = () => {
+    deleteWarehouseMutate(warehouseId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .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={handleConfirmWarehouseDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage id={'warehouse.once_delete_this_warehouse'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(WarehouseDeleteAlert);

packages/webapp/src/containers/Alerts/WarehousesTransfer/TransferredWarehouseTransferAlert.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useTransferredWarehouseTransfer } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * warehouse transfer transferred alert.
+ * @returns
+ */
+function TransferredWarehouseTransferAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseTransferId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: transferredWarehouseTransferMutate, isLoading } =
+    useTransferredWarehouseTransfer();
+
+  // handle cancel alert.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm alert.
+  const handleConfirmTransferred = () => {
+    transferredWarehouseTransferMutate(warehouseTransferId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse_transfer.alert.transferred_warehouse'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'deliver'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmTransferred}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'warehouse_transfer.alert.are_you_sure_you_want_to_deliver'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(TransferredWarehouseTransferAlert);

packages/webapp/src/containers/Alerts/WarehousesTransfer/WarehouseMarkPrimaryAlert.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster, FormattedMessage as T } from '@/components';
+
+import { useMarkWarehouseAsPrimary } from '@/hooks/query';
+
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+
+import { compose } from '@/utils';
+
+/**
+ * warehouse mark primary alert.
+ */
+function WarehouseMarkPrimaryAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  // const { mutateAsync: markPrimaryWarehouseMutate, isLoading } =
+  // useMarkWarehouseAsPrimary();
+
+  // Handle cancel mark primary alert.
+  const handleCancelMarkPrimaryAlert = () => {
+    closeAlert(name);
+  };
+
+  // andle cancel mark primary confirm.
+  const handleConfirmMarkPrimaryWarehouse = () => {
+    markPrimaryWarehouseMutate(warehouseId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse.alert.mark_primary_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'make_primary'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelMarkPrimaryAlert}
+      onConfirm={handleConfirmMarkPrimaryWarehouse}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'warehouse.alert.are_you_sure_you_want_to_make'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(WarehouseMarkPrimaryAlert);

packages/webapp/src/containers/Alerts/WarehousesTransfer/WarehouseTransferDeleteAlert.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  AppToaster,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+import { useDeleteWarehouseTransfer } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Warehouse transfer delete alert
+ * @returns
+ */
+function WarehouseTransferDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseTransferId },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteWarehouseTransferMutate, isLoading } =
+    useDeleteWarehouseTransfer();
+
+  // handle cancel delete warehouse alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete warehouse transfer.
+  const handleConfirmWarehouseTransferDelete = () => {
+    deleteWarehouseTransferMutate(warehouseTransferId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse_transfer.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeDrawer('warehouse-transfer-detail-drawer');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmWarehouseTransferDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'warehouse_transfer.once_delete_this_warehouse_transfer'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(WarehouseTransferDeleteAlert);

packages/webapp/src/containers/Alerts/WarehousesTransfer/WarehouseTransferInitiateAlert.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AppToaster, FormattedMessage as T } from '@/components';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useInitiateWarehouseTransfer } from '@/hooks/query';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * warehouse transfer initiate alert.
+ * @returns
+ */
+function WarehouseTransferInitiateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { warehouseTransferId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: initialWarehouseTransferMutate, isLoading } =
+    useInitiateWarehouseTransfer();
+
+  // handle cancel alert.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm alert.
+  const handleConfirmInitiated = () => {
+    initialWarehouseTransferMutate(warehouseTransferId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('warehouse_transfer.alert.initiate_warehouse'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'warehouse_transfer.label.initiate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmInitiated}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'warehouse_transfer.alert.are_you_sure_you_want_to_initate'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(WarehouseTransferInitiateAlert);