Merge remote-tracking branch 'origin/master'

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

@@ -21,6 +21,7 @@ import withInvoiceActions from './withInvoiceActions';
 import withInvoiceDetail from './withInvoiceDetail';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
+import withSettings from 'containers/Settings/withSettings';
 
 import { AppToaster } from 'components';
 import Dragzone from 'components/Dragzone';
@@ -41,7 +42,10 @@ function InvoiceForm({
 
   //#withDashboard
   changePageTitle,
-  changePageSubtitle,
+
+  // #withSettings
+  invoiceNextNumber,
+  invoiceNumberPrefix,
 
   //#withInvoiceDetail
   invoice,
@@ -91,7 +95,7 @@ function InvoiceForm({
     due_date: Yup.date()
       .required()
       .label(formatMessage({ id: 'due_date_' })),
-    invoice_no: Yup.number()
+    invoice_no: Yup.string()
       .required()
       .label(formatMessage({ id: 'invoice_no_' })),
     reference_no: Yup.string().min(1).max(255),
@@ -142,13 +146,17 @@ function InvoiceForm({
     [],
   );
 
+  const invoiceNumber = invoiceNumberPrefix
+    ? `${invoiceNumberPrefix}-${invoiceNextNumber}`
+    : invoiceNextNumber;
+
   const defaultInitialValues = useMemo(
     () => ({
       customer_id: '',
       invoice_date: moment(new Date()).format('YYYY-MM-DD'),
       due_date: moment(new Date()).format('YYYY-MM-DD'),
       status: 'SEND',
-      invoice_no: '',
+      invoice_no: invoiceNumber,
       reference_no: '',
       invoice_message: '',
       terms_conditions: '',
@@ -198,7 +206,6 @@ function InvoiceForm({
   }, [invoice]);
 
   const formik = useFormik({
-    enableReinitialize: true,
     validationSchema,
     initialValues: {
       ...initialValues,
@@ -219,9 +226,12 @@ function InvoiceForm({
         requestEditInvoice(invoice.id, requestForm)
           .then((response) => {
             AppToaster.show({
-              message: formatMessage({
-                id: 'the_invoice_has_been_successfully_edited',
-              }),
+              message: formatMessage(
+                {
+                  id: 'the_invoice_has_been_successfully_edited',
+                },
+                { number: values.invoice_no },
+              ),
               intent: Intent.SUCCESS,
             });
             setSubmitting(false);
@@ -251,6 +261,11 @@ function InvoiceForm({
       }
     },
   });
+
+  useEffect(() => {
+    formik.setFieldValue('invoice_no', invoiceNumber);
+  }, [invoiceNumber]);
+
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
@@ -349,4 +364,9 @@ export default compose(
   withDashboardActions,
   withMediaActions,
   withInvoiceDetail(),
+
+  withSettings(({ invoiceSettings }) => ({
+    invoiceNextNumber: invoiceSettings?.next_number,
+    invoiceNumberPrefix: invoiceSettings?.number_prefix,
+  })),
 )(InvoiceForm);

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

@@ -13,15 +13,24 @@ import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
-import { ListSelect, ErrorMessage, FieldRequiredHint, Hint } from 'components';
+import {
+  ListSelect,
+  ErrorMessage,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 function InvoiceFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
 
   //#withCustomers
   customers,
+  //#withDialogActions
+  openDialog,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -67,6 +76,10 @@ function InvoiceFormHeader({
     [setFieldValue],
   );
 
+  const handleInvoiceNumberChange = useCallback(() => {
+    openDialog('invoice-number-form', {});
+  }, [openDialog]);
+
   return (
     <div class="page-form page-form--invoice">
       <div className={'page-form__primary-section'}>
@@ -175,4 +188,5 @@ export default compose(
   withCustomers(({ customers }) => ({
     customers,
   })),
+  withDialogActions,
 )(InvoiceFormHeader);

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

@@ -46,15 +46,15 @@ function InvoiceList({
     changePageTitle(formatMessage({ id: 'invoice_list' }));
   }, [changePageTitle, formatMessage]);
 
-  const fetchResourceViews = useQuery(
-    ['resource-views', 'sales_invoices'],
-    (key, resourceName) => requestFetchResourceViews(resourceName),
-  );
+  // const fetchResourceViews = useQuery(
+  //   ['resource-views', 'sales_invoices'],
+  //   (key, resourceName) => requestFetchResourceViews(resourceName),
+  // );
 
-  const fetchResourceFields = useQuery(
-    ['resource-fields', 'sales_invoices'],
-    (key, resourceName) => requestFetchResourceFields(resourceName),
-  );
+  // const fetchResourceFields = useQuery(
+  //   ['resource-fields', 'sales_invoices'],
+  //   (key, resourceName) => requestFetchResourceFields(resourceName),
+  // );
 
   const fetchInvoices = useQuery(['invoices-table', invoicesTableQuery], () =>
     requestFetchInvoiceTable(),
@@ -124,7 +124,7 @@ function InvoiceList({
   );
   return (
     <DashboardInsider
-      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      // loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
       name={'sales_invoices'}
     >
       <InvoiceActionsBar

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

@@ -2,7 +2,6 @@ import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import {
   Intent,
   Button,
-  Classes,
   Popover,
   Menu,
   MenuItem,
@@ -95,9 +94,13 @@ function InvoicesDataTable({
   const actionMenuList = useCallback(
     (invoice) => (
       <Menu>
-        <MenuItem text={formatMessage({ id: 'view_details' })} />
+        <MenuItem
+          icon={<Icon icon="reader-18" />}
+          text={formatMessage({ id: 'view_details' })}
+        />
         <MenuDivider />
         <MenuItem
+          icon={<Icon icon="pen-18" />}
           text={formatMessage({ id: 'edit_invoice' })}
           onClick={handleEditInvoice(invoice)}
         />