diff --git a/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js b/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js
new file mode 100644
index 000000000..4057942e3
--- /dev/null
+++ b/client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js
@@ -0,0 +1,78 @@
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
+
+import { compose } from 'utils';
+
+/**
+ * Receipt close alert.
+ */
+function ReceiptCloseAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { receiptId },
+
+  // #withReceiptActions
+  requestCloseReceipt,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm receipt close.
+  const handleConfirmReceiptClose = useCallback(() => {
+    setLoading(true);
+    requestCloseReceipt(receiptId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_receipt_has_been_closed_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('receipts-table');
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+        setLoading(false);
+      });
+  }, [receiptId, requestCloseReceipt, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'close'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmReceiptClose}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'are_sure_to_close_this_receipt'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withReceiptActions,
+)(ReceiptCloseAlert);
diff --git a/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js b/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js
new file mode 100644
index 000000000..0aa3703b0
--- /dev/null
+++ b/client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js
@@ -0,0 +1,85 @@
+import React, { useCallback, useState } from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice  alert.
+ */
+function NameDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { receiptId },
+
+  // #withReceiptActions
+  requestDeleteReceipt,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
+  // handle cancel delete  alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm delete receipt
+  const handleConfirmReceiptDelete = useCallback(() => {
+    setLoading(true);
+    requestDeleteReceipt(receiptId)
+      .then(() => {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_receipt_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('receipts-table');
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
+      });
+  }, [receiptId, requestDeleteReceipt, formatMessage]);
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmReceiptDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_receipt_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withReceiptActions,
+)(NameDeleteAlert);
diff --git a/client/src/containers/Sales/Receipt/ReceiptsAlerts.js b/client/src/containers/Sales/Receipt/ReceiptsAlerts.js
new file mode 100644
index 000000000..a5e98e5e6
--- /dev/null
+++ b/client/src/containers/Sales/Receipt/ReceiptsAlerts.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReceiptDeleteAlert from 'containers/Alerts/Receipts/ReceiptDeleteAlert';
+import ReceiptCloseAlert from 'containers/Alerts/Receipts/ReceiptCloseAlert';
+
+/**
+ * Receipts alerts.
+ */
+export default function ReceiptsAlerts() {
+  return (
+    <div>
+      <ReceiptDeleteAlert name={'receipt-delete'} />
+      <ReceiptCloseAlert name={'receipt-close'} />
+    </div>
+  );
+}
diff --git a/client/src/containers/Sales/Receipt/ReceiptsList.js b/client/src/containers/Sales/Receipt/ReceiptsList.js
index 4a9e74853..0d0aae47f 100644
--- a/client/src/containers/Sales/Receipt/ReceiptsList.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsList.js
@@ -1,9 +1,7 @@
-import React, { useEffect, useCallback, useMemo, useState } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery, queryCache } from 'react-query';
-import { Alert, Intent } from '@blueprintjs/core';
+import { useQuery } from 'react-query';
 
-import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -11,12 +9,14 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ReceiptsDataTable from './ReceiptsDataTable';
 import ReceiptActionsBar from './ReceiptActionsBar';
 import ReceiptViewTabs from './ReceiptViewTabs';
+import ReceiptsAlerts from './ReceiptsAlerts';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withReceipts from './withReceipts';
 import withReceiptActions from './withReceiptActions';
 import withViewsActions from 'containers/Views/withViewsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
@@ -26,21 +26,19 @@ function ReceiptsList({
 
   // #withViewsActions
   requestFetchResourceViews,
-  requestFetchResourceFields,
 
   //#withReceipts
   receiptTableQuery,
 
+  // #withAlertsActions,
+  openAlert,
+
   //#withReceiptActions
   requestFetchReceiptsTable,
-  requestDeleteReceipt,
-  requestCloseReceipt,
   addReceiptsTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deleteReceipt, setDeleteReceipt] = useState(false);
-  const [closeReceipt, setCloseReceipt] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
   const fetchReceipts = useQuery(
@@ -59,76 +57,20 @@ function ReceiptsList({
 
   // handle delete receipt click
   const handleDeleteReceipt = useCallback(
-    (_receipt) => {
-      setDeleteReceipt(_receipt);
+    ({ id }) => {
+      openAlert('receipt-delete', { receiptId: id });
     },
-    [setDeleteReceipt],
+    [openAlert],
   );
 
-  // handle cancel receipt
-  const handleCancelReceiptDelete = useCallback(() => {
-    setDeleteReceipt(false);
-  }, [setDeleteReceipt]);
-
-  // handle confirm delete receipt
-  const handleConfirmReceiptDelete = useCallback(() => {
-    requestDeleteReceipt(deleteReceipt.id).then(() => {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_receipt_has_been_deleted_successfully',
-        }),
-        intent: Intent.SUCCESS,
-      });
-      setDeleteReceipt(false);
-    });
-  }, [deleteReceipt, requestDeleteReceipt, formatMessage]);
-
   // Handle cancel/confirm receipt deliver.
-  const handleCloseReceipt = useCallback((receipt) => {
-    setCloseReceipt(receipt);
+  const handleCloseReceipt = useCallback(({ id }) => {
+    openAlert('receipt-close', { receiptId: id });
   }, []);
 
-  // Handle cancel close receipt alert.
-  const handleCancelCloseReceipt = useCallback(() => {
-    setCloseReceipt(false);
-  }, []);
-
-  // Handle confirm receipt close.
-  const handleConfirmReceiptClose = useCallback(() => {
-    requestCloseReceipt(closeReceipt.id)
-      .then(() => {
-        setCloseReceipt(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_receipt_has_been_closed_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('receipts-table');
-      })
-      .catch((error) => {
-        setCloseReceipt(false);
-      });
-  }, [closeReceipt, requestCloseReceipt, formatMessage]);
-
-  // Handle filter change to re-fetch data-table.
-  // const handleFilterChanged = useCallback(
-  //   (filterConditions) => {
-  //     addReceiptsTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //   },
-  //   [fetchReceipt],
-  // );
-
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, [fetchReceipts]);
 
-  // Calculates the selected rows
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
-
   const handleEditReceipt = useCallback(
     (receipt) => {
       history.push(`/receipts/${receipt.id}/edit`);
@@ -167,32 +109,7 @@ function ReceiptsList({
             />
           </Route>
         </Switch>
-
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deleteReceipt}
-          onCancel={handleCancelReceiptDelete}
-          onConfirm={handleConfirmReceiptDelete}
-        >
-          <p>
-            <T id={'once_delete_this_receipt_you_will_able_to_restore_it'} />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'close'} />}
-          intent={Intent.WARNING}
-          isOpen={closeReceipt}
-          onCancel={handleCancelCloseReceipt}
-          onConfirm={handleConfirmReceiptClose}
-        >
-          <p>
-            <T id={'are_sure_to_close_this_receipt'} />
-          </p>
-        </Alert>
+        <ReceiptsAlerts />
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -206,4 +123,5 @@ export default compose(
   withReceipts(({ receiptTableQuery }) => ({
     receiptTableQuery,
   })),
+  withAlertsActions,
 )(ReceiptsList);