refactor: Inovices alerts.

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

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

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

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

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

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