feat: deliver status in invoice.

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

@@ -232,11 +232,13 @@ function InvoiceForm({
   );
 
   return (
-    <div className={classNames(
+    <div
+      className={classNames(
         CLASSES.PAGE_FORM,
         CLASSES.PAGE_FORM_STRIP_STYLE,
-      CLASSES.PAGE_FORM_INVOICE
+        CLASSES.PAGE_FORM_INVOICE,
-    )}>
+      )}
+    >
       <Formik
         validationSchema={
           isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
@@ -244,7 +246,7 @@ function InvoiceForm({
         initialValues={initialValues}
         onSubmit={handleSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting, values }) => (
           <Form>
             <InvoiceFormHeader
               onInvoiceNumberChanged={handleInvoiceNumberChanged}

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

@@ -38,11 +38,13 @@ function InvoiceList({
   //#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([]);
 
   useEffect(() => {
@@ -88,6 +90,34 @@ function InvoiceList({
     });
   }, [deleteInvoice, requestDeleteInvoice, formatMessage]);
 
+  // Handle cancel/confirm invoice deliver.
+  const handleDeliverInvoice = useCallback((invoice) => {
+    setDeliverInvoice(invoice);
+  }, []);
+
+  // 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_successfully_delivered',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('invoices-table');
+      })
+      .catch((error) => {
+        // setDeliverInvoice(false);
+      });
+  }, [deliverInvoice, requestDeliverInvoice, formatMessage]);
+
   const handleEditInvoice = useCallback((invoice) => {
     history.push(`/invoices/${invoice.id}/edit`);
   });
@@ -127,6 +157,7 @@ function InvoiceList({
             <InvoicesDataTable
               onDeleteInvoice={handleDeleteInvoice}
               onEditInvoice={handleEditInvoice}
+              onDeliverInvoice={handleDeliverInvoice}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -145,6 +176,18 @@ function InvoiceList({
             <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>
       </DashboardPageContent>
     </DashboardInsider>
   );

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

@@ -50,6 +50,7 @@ function InvoicesDataTable({
   // #OwnProps
   onEditInvoice,
   onDeleteInvoice,
+  onDeliverInvoice,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -82,6 +83,12 @@ function InvoicesDataTable({
           text={formatMessage({ id: 'edit_invoice' })}
           onClick={handleEditInvoice(invoice)}
         />
+        <If condition={!invoice.is_delivered}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_delivered' })}
+            onClick={() => onDeliverInvoice(invoice)}
+          />
+        </If>
         <MenuItem
           text={formatMessage({ id: 'delete_invoice' })}
           intent={Intent.DANGER}

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

@@ -6,6 +6,7 @@ import {
   fetchInvoice,
   fetchInvoicesTable,
   fetchDueInvoices,
+  deliverInvoice,
 } from 'store/Invoice/invoices.actions';
 import t from 'store/types';
 
@@ -18,6 +19,7 @@ const mapDipatchToProps = (dispatch) => ({
   requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
   requestFetchDueInvoices: (customerId) =>
     dispatch(fetchDueInvoices({ customerId })),
+  requestDeliverInvoice: (id) => dispatch(deliverInvoice({ id })),
   changeInvoiceView: (id) =>
     dispatch({
       type: t.INVOICES_SET_CURRENT_VIEW,

client/src/store/Invoice/invoices.actions.js

@@ -121,7 +121,8 @@ export const fetchInvoice = ({ id }) => {
     });
 };
 
-export const fetchDueInvoices = ({ customerId }) => (dispatch) => new Promise((resovle, reject) => {
+export const fetchDueInvoices = ({ customerId }) => (dispatch) =>
+  new Promise((resovle, reject) => {
     ApiService.get(`sales/invoices/payable`, {
       params: { customer_id: customerId },
     })
@@ -149,3 +150,6 @@ export const fetchDueInvoices = ({ customerId }) => (dispatch) => new Promise((r
         reject(data?.errors);
       });
   });
+export const deliverInvoice = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/invoices/${id}/deliver`);
+};