refactor: receipts alerts.

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);