Merge branch 'master' of https://github.com/abouolia/Ratteb

client/src/containers/Purchases/Bill/BillFloatingActions.js

@@ -25,37 +25,37 @@ export default function BillFloatingActions({
   onCancelClick,
   onClearClick,
   billId,
-  billPublished,
+  isOpen,
 }) {
   const { resetForm, submitForm } = useFormikContext();
-  const handleSubmitPublishBtnClick = (event) => {
+  const handleSubmitOpenBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      publish: true,
+      status: true,
     });
   };
 
-  const handleSubmitPublishAndNewBtnClick = (event) => {
+  const handleSubmitOpenAndNewBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      status: true,
       resetForm: true,
     });
   };
 
-  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+  const handleSubmitOpenContinueEditingBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      status: true,
     });
   };
 
   const handleSubmitDraftBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      publish: false,
+      status: false,
     });
   };
 
@@ -63,7 +63,7 @@ export default function BillFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: false,
+      status: false,
       resetForm: true,
     });
   };
@@ -72,7 +72,7 @@ export default function BillFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: false,
+      status: false,
     });
   };
 
@@ -87,26 +87,26 @@ export default function BillFloatingActions({
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Publish ----------- */}
+      {/* ----------- Save And Open ----------- */}
-      <If condition={!billId || !billPublished}>
+      <If condition={!billId || !isOpen}>
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-            onClick={handleSubmitPublishBtnClick}
+            onClick={handleSubmitOpenBtnClick}
-            text={<T id={'save_publish'} />}
+            text={<T id={'save_open'} />}
           />
           <Popover
             content={
               <Menu>
                 <MenuItem
-                  text={<T id={'publish_and_new'} />}
+                  text={<T id={'open_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                  onClick={handleSubmitOpenAndNewBtnClick}
                 />
                 <MenuItem
-                  text={<T id={'publish_continue_editing'} />}
+                  text={<T id={'open_continue_editing'} />}
-                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
                 />
               </Menu>
             }
@@ -155,13 +155,13 @@ export default function BillFloatingActions({
         </ButtonGroup>
       </If>
       {/* ----------- Save and New ----------- */}
-      <If condition={billId && billPublished}>
+      <If condition={billId && isOpen}>
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-            onClick={handleSubmitPublishBtnClick}
+            onClick={handleSubmitOpenBtnClick}
             text={<T id={'save'} />}
           />
           <Popover
@@ -169,7 +169,7 @@ export default function BillFloatingActions({
               <Menu>
                 <MenuItem
                   text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                  onClick={handleSubmitOpenAndNewBtnClick}
                 />
               </Menu>
             }

client/src/containers/Purchases/Bill/BillForm.js

@@ -43,6 +43,7 @@ const defaultInitialValues = {
   due_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
   note: '',
+  open:'',
   entries: [...repeatValue(defaultBill, MIN_LINES_NUMBER)],
 };
 
@@ -141,6 +142,7 @@ function BillForm({
 
     const form = {
       ...values,
+      open:submitPayload.status,
       entries: entries.map((entry) => ({ ...omit(entry, ['total']) })),
     };
     // Handle the request success.
@@ -217,7 +219,7 @@ function BillForm({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting ,values }) => (
           <Form>
             <BillFormHeader onBillNumberChanged={handleBillNumberChanged} />
             <BillFormBody defaultBill={defaultBill} />
@@ -228,7 +230,7 @@ function BillForm({
             <BillFloatingActions
               isSubmitting={isSubmitting}
               billId={billId}
-              billPublished={true}
+              isOpen={values.open}
               onSubmitClick={handleSubmitClick}
               onCancelClick={handleCancelClick}
             />

client/src/containers/Purchases/Bill/BillForm.schema.js

@@ -22,6 +22,7 @@ const BillFormSchema = Yup.object().shape({
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
     .label(formatMessage({ id: 'note' })),
+  open: Yup.boolean().required(),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()

client/src/containers/Purchases/Bill/BillList.js

@@ -35,11 +35,13 @@ function BillList({
   //#withBillActions
   requestFetchBillsTable,
   requestDeleteBill,
+  requestOpenBill,
   addBillsTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
   const [deleteBill, setDeleteBill] = useState(false);
+  const [openBill, setOpenBill] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
@@ -86,12 +88,36 @@ function BillList({
     });
   }, [deleteBill, requestDeleteBill, formatMessage]);
 
+  // Handle cancel/confirm bill open.
+  const handleOpenBill = useCallback((bill) => {
+    setOpenBill(bill);
+  }, []);
+
+  // Handle cancel open bill alert.
+  const handleCancelOpenBill = useCallback(() => {
+    setOpenBill(false);
+  }, []);
+
+  // Handle confirm bill open.
+  const handleConfirmBillOpen = useCallback(() => {
+    requestOpenBill(openBill.id)
+      .then(() => {
+        setOpenBill(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_bill_has_been_successfully_opened',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('bills-table');
+      })
+      .catch((error) => {});
+  }, [openBill, requestOpenBill, formatMessage]);
+
   const handleEditBill = useCallback((bill) => {
     history.push(`/bills/${bill.id}/edit`);
   });
 
-  
-
   // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
     (_invoices) => {
@@ -127,6 +153,7 @@ function BillList({
             <BillsDataTable
               onDeleteBill={handleDeleteBill}
               onEditBill={handleEditBill}
+              onOpenBill={handleOpenBill}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -144,6 +171,18 @@ function BillList({
             <T id={'once_delete_this_bill_you_will_able_to_restore_it'} />
           </p>
         </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'open'} />}
+          intent={Intent.WARNING}
+          isOpen={openBill}
+          onCancel={handleCancelOpenBill}
+          onConfirm={handleConfirmBillOpen}
+        >
+          <p>
+            <T id={'are_sure_to_open_this_bill'} />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );

client/src/containers/Purchases/Bill/BillsDataTable.js

@@ -7,6 +7,7 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Tag,
 } from '@blueprintjs/core';
 
 import { useParams } from 'react-router-dom';
@@ -20,7 +21,7 @@ import { compose, saveInvoke } from 'utils';
 import { CLASSES } from 'common/classes';
 import { useIsValuePassed } from 'hooks';
 
-import { LoadingIndicator, Choose } from 'components';
+import { LoadingIndicator, Choose, If } from 'components';
 import DataTable from 'components/DataTable';
 import BillsEmptyStatus from './BillsEmptyStatus';
 
@@ -56,6 +57,7 @@ function BillsDataTable({
   onFetchData,
   onEditBill,
   onDeleteBill,
+  onOpenBill,
   onSelectedRowsChange,
 }) {
   const { custom_view_id: customViewId } = useParams();
@@ -121,6 +123,13 @@ function BillsDataTable({
           text={formatMessage({ id: 'edit_bill' })}
           onClick={handleEditBill(bill)}
         />
+        <If condition={!bill.is_open}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_opened' })}
+            onClick={() => onOpenBill(bill)}
+          />
+        </If>
+
         <MenuItem
           text={formatMessage({ id: 'delete_bill' })}
           intent={Intent.DANGER}
@@ -186,7 +195,21 @@ function BillsDataTable({
       {
         id: 'status',
         Header: formatMessage({ id: 'status' }),
-        accessor: 'status',
+        accessor: (row) => (
+          <Choose>
+            <Choose.When condition={row.is_open}>
+              <Tag minimal={true}>
+                <T id={'opened'} />
+              </Tag>
+            </Choose.When>
+
+            <Choose.Otherwise>
+              <Tag minimal={true} intent={Intent.WARNING}>
+                <T id={'draft'} />
+              </Tag>
+            </Choose.Otherwise>
+          </Choose>
+        ),
         width: 140,
         className: 'status',
       },

client/src/containers/Purchases/Bill/withBillActions.js

@@ -6,6 +6,7 @@ import {
   fetchBillsTable,
   fetchBill,
   fetchDueBills,
+  openBill,
 } from 'store/Bills/bills.actions';
 import t from 'store/types';
 
@@ -17,7 +18,7 @@ const mapDispatchToProps = (dispatch) => ({
   requestFetchBillsTable: (query = {}) =>
     dispatch(fetchBillsTable({ query: { ...query } })),
   requestFetchDueBills: (vendorId) => dispatch(fetchDueBills({ vendorId })),
-
+  requestOpenBill: (id) => dispatch(openBill({ id })),
   changeBillView: (id) =>
     dispatch({
       type: t.BILLS_SET_CURRENT_VIEW,

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

@@ -232,11 +232,13 @@ function InvoiceForm({
   );
 
   return (
-    <div className={classNames(
+    <div
-      CLASSES.PAGE_FORM,
+      className={classNames(
-      CLASSES.PAGE_FORM_STRIP_STYLE,
+        CLASSES.PAGE_FORM,
-      CLASSES.PAGE_FORM_INVOICE
+        CLASSES.PAGE_FORM_STRIP_STYLE,
-    )}>
+        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/containers/Sales/Receipt/ReceiptForm.js

@@ -58,6 +58,7 @@ const defaultInitialValues = {
   reference_no: '',
   receipt_message: '',
   statement: '',
+  closed:'',
   entries: [...repeatValue(defaultReceipt, MIN_LINES_NUMBER)],
 };
 
@@ -182,6 +183,7 @@ function ReceiptForm({
     }
     const form = {
       ...values,
+      closed: submitPayload.status,
       entries: entries.map((entry) => ({
         // Exclude all properties that out of request entries schema.
         ...pick(entry, Object.keys(defaultReceipt)),
@@ -259,7 +261,7 @@ function ReceiptForm({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting ,values }) => (
           <Form>
             <ReceiptFromHeader
               onReceiptNumberChanged={handleReceiptNumberChanged}
@@ -270,7 +272,7 @@ function ReceiptForm({
             <ReceiptFormFloatingActions
               isSubmitting={isSubmitting}
               receiptId={receiptId}
-              receiptPublished={true}
+              isClosed={values.closed}
               onSubmitClick={handleSubmitClick}
               onCancelClick={handleCancelClick}
             />

client/src/containers/Sales/Receipt/ReceiptForm.schema.js

@@ -28,6 +28,7 @@ const Schema = Yup.object().shape({
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
     .label(formatMessage({ id: 'note' })),
+    closed: Yup.boolean().required(),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()

client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js

@@ -22,41 +22,41 @@ import { If, Icon } from 'components';
 export default function ReceiptFormFloatingActions({
   isSubmitting,
   receiptId,
-  receiptPublished,
+  isClosed,
   onSubmitClick,
   onCancelClick,
   onClearClick,
 }) {
   const { resetForm, submitForm } = useFormikContext();
 
-  const handleSubmitPublishBtnClick = (event) => {
+  const handleSubmitCloseBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      publish: true,
+      status: true,
     });
   };
 
-  const handleSubmitPublishAndNewBtnClick = (event) => {
+  const handleSubmitCloseAndNewBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      status: true,
       resetForm: true,
     });
   };
 
-  const handleSubmitPublishContinueEditingBtnClick = (event) => {
+  const handleSubmitCloseContinueEditingBtnClick = (event) => {
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: true,
+      status: true,
     });
   };
 
   const handleSubmitDraftBtnClick = (event) => {
     saveInvoke(onSubmitClick, event, {
       redirect: true,
-      publish: false,
+      status: false,
     });
   };
 
@@ -64,7 +64,7 @@ export default function ReceiptFormFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: false,
+      status: false,
       resetForm: true,
     });
   };
@@ -73,7 +73,7 @@ export default function ReceiptFormFloatingActions({
     submitForm();
     saveInvoke(onSubmitClick, event, {
       redirect: false,
-      publish: false,
+      status: false,
     });
   };
 
@@ -88,26 +88,26 @@ export default function ReceiptFormFloatingActions({
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save And Publish ----------- */}
+      {/* ----------- Save And Close ----------- */}
-      <If condition={!receiptId || !receiptPublished}>
+      <If condition={!receiptId || !isClosed}>
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-            onClick={handleSubmitPublishBtnClick}
+            onClick={handleSubmitCloseBtnClick}
-            text={<T id={'save_publish'} />}
+            text={<T id={'save_close'} />}
           />
           <Popover
             content={
               <Menu>
                 <MenuItem
-                  text={<T id={'publish_and_new'} />}
+                  text={<T id={'close_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                  onClick={handleSubmitCloseAndNewBtnClick}
                 />
                 <MenuItem
-                  text={<T id={'publish_continue_editing'} />}
+                  text={<T id={'close_continue_editing'} />}
-                  onClick={handleSubmitPublishContinueEditingBtnClick}
+                  onClick={handleSubmitCloseContinueEditingBtnClick}
                 />
               </Menu>
             }
@@ -156,13 +156,13 @@ export default function ReceiptFormFloatingActions({
         </ButtonGroup>
       </If>
       {/* ----------- Save and New ----------- */}
-      <If condition={receiptId && receiptPublished}>
+      <If condition={receiptId && isClosed}>
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
-            onClick={handleSubmitPublishBtnClick}
+            onClick={handleSubmitCloseBtnClick}
             text={<T id={'save'} />}
           />
           <Popover
@@ -170,7 +170,7 @@ export default function ReceiptFormFloatingActions({
               <Menu>
                 <MenuItem
                   text={<T id={'save_and_new'} />}
-                  onClick={handleSubmitPublishAndNewBtnClick}
+                  onClick={handleSubmitCloseAndNewBtnClick}
                 />
               </Menu>
             }

client/src/containers/Sales/Receipt/ReceiptList.js

@@ -34,11 +34,13 @@ function ReceiptList({
   //#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(['receipts-table', receiptTableQuery], () =>
@@ -85,6 +87,34 @@ function ReceiptList({
     });
   }, [deleteReceipt, requestDeleteReceipt, formatMessage]);
 
+  // Handle cancel/confirm receipt deliver.
+  const handleCloseReceipt = useCallback((receipt) => {
+    setCloseReceipt(receipt);
+  }, []);
+
+  // 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_successfully_closed',
+          }),
+          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) => {
@@ -136,6 +166,7 @@ function ReceiptList({
             <ReceiptsDataTable
               onDeleteReceipt={handleDeleteReceipt}
               onEditReceipt={handleEditReceipt}
+              onCloseReceipt={handleCloseReceipt}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -154,6 +185,18 @@ function ReceiptList({
             <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>
       </DashboardPageContent>
     </DashboardInsider>
   );

client/src/containers/Sales/Receipt/ReceiptsDataTable.js

@@ -7,6 +7,7 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Tag,
 } from '@blueprintjs/core';
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -17,7 +18,14 @@ import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
 import { CLASSES } from 'common/classes';
-import { Choose, LoadingIndicator, DataTable, Money, Icon } from 'components';
+import {
+  Choose,
+  LoadingIndicator,
+  DataTable,
+  Money,
+  Icon,
+  If,
+} from 'components';
 
 import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
 
@@ -42,6 +50,7 @@ function ReceiptsDataTable({
   loading,
   onEditReceipt,
   onDeleteReceipt,
+  onCloseReceipt,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -62,7 +71,7 @@ function ReceiptsDataTable({
   );
 
   const actionMenuList = useCallback(
-    (estimate) => (
+    (receipt) => (
       <Menu>
         <MenuItem
           icon={<Icon icon="reader-18" />}
@@ -72,12 +81,18 @@ function ReceiptsDataTable({
         <MenuItem
           icon={<Icon icon="pen-18" />}
           text={formatMessage({ id: 'edit_receipt' })}
-          onClick={handleEditReceipt(estimate)}
+          onClick={handleEditReceipt(receipt)}
         />
+        <If condition={!receipt.is_closed}>
+          <MenuItem
+            text={formatMessage({ id: 'mark_as_closed' })}
+            onClick={() => onCloseReceipt(receipt)}
+          />
+        </If>
         <MenuItem
           text={formatMessage({ id: 'delete_receipt' })}
           intent={Intent.DANGER}
-          onClick={handleDeleteReceipt(estimate)}
+          onClick={handleDeleteReceipt(receipt)}
           icon={<Icon icon="trash-16" iconSize={16} />}
         />
       </Menu>
@@ -111,7 +126,8 @@ function ReceiptsDataTable({
       {
         id: 'receipt_number',
         Header: formatMessage({ id: 'receipt_number' }),
-        accessor: (row) => (row.receipt_number ? `#${row.receipt_number}` : null),
+        accessor: (row) =>
+          row.receipt_number ? `#${row.receipt_number}` : null,
         width: 140,
         className: 'receipt_number',
       },
@@ -137,6 +153,28 @@ function ReceiptsDataTable({
         width: 140,
         className: 'amount',
       },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: (row) => (
+          <Choose>
+            <Choose.When condition={row.is_closed}>
+              <Tag minimal={true}>
+                <T id={'closed'} />
+              </Tag>
+            </Choose.When>
+
+            <Choose.Otherwise>
+              <Tag minimal={true} intent={Intent.WARNING}>
+                <T id={'draft'} />
+              </Tag>
+            </Choose.Otherwise>
+          </Choose>
+        ),
+
+        width: 140,
+        className: 'amount',
+      },
       {
         id: 'reference_no',
         Header: formatMessage({ id: 'reference_no' }),

client/src/containers/Sales/Receipt/withReceiptActions.js

@@ -5,16 +5,18 @@ import {
   fetchReceipt,
   fetchReceiptsTable,
   editReceipt,
+  closeReceipt,
 } from 'store/receipt/receipt.actions';
 import t from 'store/types';
 
 const mapDispatchToProps = (dispatch) => ({
   requestSubmitReceipt: (form) => dispatch(submitReceipt({ form })),
   requestFetchReceipt: (id) => dispatch(fetchReceipt({ id })),
-  requestEditReceipt: (id, form) => dispatch(editReceipt( id, form )),
+  requestEditReceipt: (id, form) => dispatch(editReceipt(id, form)),
   requestDeleteReceipt: (id) => dispatch(deleteReceipt({ id })),
   requestFetchReceiptsTable: (query = {}) =>
     dispatch(fetchReceiptsTable({ query: { ...query } })),
+  requestCloseReceipt: (id) => dispatch(closeReceipt({ id })),
   // requestDeleteBulkReceipt: (ids) => dispatch(deleteBulkReceipt({ ids })),
 
   changeReceiptView: (id) =>
@@ -28,10 +30,11 @@ const mapDispatchToProps = (dispatch) => ({
       type: t.RECEIPTS_TABLE_QUERIES_ADD,
       payload: { queries },
     }),
-    setReceiptNumberChanged:(isChanged) => dispatch({
+  setReceiptNumberChanged: (isChanged) =>
+    dispatch({
       type: t.RECEIPT_NUMBER_CHANGED,
       payload: { isChanged },
     }),
-  });
+});
 
 export default connect(null, mapDispatchToProps);

client/src/lang/en/index.js

@@ -866,7 +866,7 @@ export default {
   receivable_accounts_should_assign_with_customers:
     'receivable accounts should assign with customers',
   delivered: 'Delivered',
-  save_and_deliver: 'Save and Deliver',
+  save_and_deliver: 'Save & Deliver',
   deliver_and_new: 'Deliver and new',
   deliver_continue_editing: 'Deliver (continue editing)',
   due_in: 'Due in',
@@ -878,4 +878,28 @@ export default {
   paid: 'Paid',
   your_account_has_been_locked:
     'Your account has been locked due to repeated failed login attempts. Please wait a few minutes before trying again.',
+  the_invoice_has_been_successfully_delivered:
+    'The invoice has been successfully delivered.',
+  are_sure_to_deliver_this_invoice:
+    'Are you sure you want to deliver this invoice?',
+  mark_as_delivered: 'Mark as delivered',
+  deliver: 'Deliver',
+  mark_as_closed: 'Mark as closed',
+  mark_as_opened: 'Mark as opened',
+  save_close: 'Save & Close',
+  save_open: 'Save & Open',
+  close_and_new: 'Close and new',
+  close_continue_editing: 'Close (continue editing)',
+  the_receipt_has_been_successfully_closed:
+    'The receipt has been successfully closed.',
+  are_sure_to_close_this_receipt:
+    'Are you sure you want to close this receipt?',
+  closed: 'Closed',
+  open_and_new: 'Open and new',
+  open_continue_editing: 'Open (continue editing)',
+  the_bill_has_been_successfully_opened:
+    'The bill has been successfully opened.',
+  open: 'Open',
+  are_sure_to_open_this_bill: 'Are you sure you want to open this bill?',
+  opened: 'Opened',
 };

client/src/store/Bills/bills.actions.js

@@ -138,4 +138,8 @@ export const fetchDueBills = ({ vendorId }) => (dispatch) => new Promise((resolv
     }
     resolve(response);
   }).catch(error => { reject(error) });
-});
+});
+
+export const openBill = ({ id }) => {
+  return (dispatch) => ApiService.post(`purchases/bills/${id}/open`);
+};

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

@@ -121,31 +121,35 @@ 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 },
     })
-    .then((response) => {
+      .then((response) => {
-      dispatch({
-        type: t.INVOICES_ITEMS_SET,
-        payload: {
-          sales_invoices: response.data.sales_invoices,
-        },
-      });
-      if (customerId) {
         dispatch({
-          type: t.INVOICES_RECEIVABLE_BY_CUSTOMER_ID,
+          type: t.INVOICES_ITEMS_SET,
           payload: {
-            customerId,
+            sales_invoices: response.data.sales_invoices,
-            saleInvoices: response.data.sales_invoices,
           },
         });
-      }
+        if (customerId) {
-      resovle(response);
+          dispatch({
-    })
+            type: t.INVOICES_RECEIVABLE_BY_CUSTOMER_ID,
-    .catch((error) => {
+            payload: {
-      const { response } = error;
+              customerId,
-      const { data } = response;
+              saleInvoices: response.data.sales_invoices,
-      reject(data?.errors);
+            },
-    });
+          });
+        }
+        resovle(response);
+      })
+      .catch((error) => {
+        const { response } = error;
+        const { data } = response;
+        reject(data?.errors);
+      });
   });
+export const deliverInvoice = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/invoices/${id}/deliver`);
+};

client/src/store/receipt/receipt.actions.js

@@ -116,3 +116,7 @@ export const fetchReceiptsTable = ({ query = {} }) => {
         });
     });
 };
+
+export const closeReceipt = ({ id }) => {
+  return (dispatch) => ApiService.post(`sales/receipts/${id}/close`);
+};