refactoring: invoice form.

refactoring: receipt form.
refactoring: bill form.
refactoring: estimate form.

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js

@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
-import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
-import { pick, sumBy, isEmpty } from 'lodash';
+import { omit, sumBy, isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -19,7 +18,7 @@ import 'style/pages/SaleReceipt/PageForm.scss';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 
 import ReceiptFromHeader from './ReceiptFormHeader';
-import ReceiptFormBody from './ReceiptFormBody';
+import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
 import ReceiptFormFooter from './ReceiptFormFooter';
 
@@ -29,33 +28,11 @@ import withSettings from 'containers/Settings/withSettings';
 import { AppToaster } from 'components';
 import {
   compose,
-  repeatValue,
   orderingLinesIndexes,
   transactionNumber,
 } from 'utils';
+import { transformToEditForm, defaultReceipt } from './utils'
 
-const MIN_LINES_NUMBER = 4;
-
-const defaultReceipt = {
-  index: 0,
-  item_id: '',
-  rate: '',
-  discount: 0,
-  quantity: '',
-  description: '',
-};
-
-const defaultInitialValues = {
-  customer_id: '',
-  deposit_account_id: '',
-  receipt_number: '',
-  receipt_date: moment(new Date()).format('YYYY-MM-DD'),
-  reference_no: '',
-  receipt_message: '',
-  statement: '',
-  closed: '',
-  entries: [...repeatValue(defaultReceipt, MIN_LINES_NUMBER)],
-};
 
 /**
  * Receipt form.
@@ -75,11 +52,10 @@ function ReceiptForm({
     receipt,
     editReceiptMutate,
     createReceiptMutate,
-    submitPayload
+    submitPayload,
+    isNewMode
   } = useReceiptFormContext();
 
-  const isNewMode = !receiptId;
-
   // The next receipt number.
   const receiptNumber = transactionNumber(
     receiptNumberPrefix,
@@ -89,23 +65,12 @@ function ReceiptForm({
   const initialValues = useMemo(
     () => ({
       ...(!isEmpty(receipt)
-        ? {
-            ...pick(receipt, Object.keys(defaultInitialValues)),
-            entries: [
-              ...receipt.entries.map((receipt) => ({
-                ...pick(receipt, Object.keys(defaultReceipt)),
-              })),
-              ...repeatValue(
-                defaultReceipt,
-                Math.max(MIN_LINES_NUMBER - receipt.entries.length, 0),
-              ),
-            ],
-          }
+        ? transformToEditForm(receipt)
         : {
-            ...defaultInitialValues,
+            ...defaultReceipt,
             receipt_number: receiptNumber,
             deposit_account_id: parseInt(preferredDepositAccount),
-            entries: orderingLinesIndexes(defaultInitialValues.entries),
+            entries: orderingLinesIndexes(defaultReceipt.entries),
           }),
     }),
     [receipt, preferredDepositAccount, receiptNumber],
@@ -145,10 +110,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)),
-      })),
+      entries: entries.map((entry) => ({ ...omit(entry, ['total']), })),
     };
     // Handle the request success.
     const onSuccess = (response) => {
@@ -179,8 +141,8 @@ function ReceiptForm({
       setSubmitting(false);
     };
 
-    if (receipt && receipt.id) {
-      editReceiptMutate(receipt.id, form).then(onSuccess).catch(onError);
+    if (!isNewMode) {
+      editReceiptMutate([receipt.id, form]).then(onSuccess).catch(onError);
     } else {
       createReceiptMutate(form).then(onSuccess).catch(onError);
     }
@@ -203,7 +165,7 @@ function ReceiptForm({
       >
         <Form>
           <ReceiptFromHeader />
-          <ReceiptFormBody defaultReceipt={defaultReceipt} />
+          <ReceiptItemsEntriesEditor />
           <ReceiptFormFooter />
           <ReceiptFormFloatingActions />
         </Form>

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormBody.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
-// import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
-import { useReceiptFormContext } from './ReceiptFormProvider';
-
-export default function ExpenseFormBody({ defaultReceipt }) {
-  const { items } = useReceiptFormContext();
-
-  return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      {/* <EditableItemsEntriesTable
-        items={items}
-        defaultEntry={defaultReceipt}
-        filterSellableItems={true}
-      /> */}
-    </div>
-  );
-}

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js

@@ -46,6 +46,8 @@ function ReceiptFormProvider({ receiptId, ...props }) {
 
   const [submitPayload, setSubmitPayload] = useState({});
 
+  const isNewMode = !receiptId;
+
   const provider = {
     receiptId,
     receipt,
@@ -54,6 +56,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
     items,
     submitPayload,
 
+    isNewMode,
     isReceiptLoading,
     isAccountsLoading,
     isCustomersLoading,

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptItemsEntriesEditor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FastField } from 'formik';
+import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
+import { CLASSES } from 'common/classes';
+import { useReceiptFormContext } from './ReceiptFormProvider';
+
+export default function ReceiptItemsEntriesEditor({ defaultReceipt }) {
+  const { items } = useReceiptFormContext();
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              form.setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptNumberWatcher.js

@@ -1,45 +0,0 @@
-import { useEffect } from 'react';
-import { useFormikContext } from 'formik';
-
-import withDashboardActions from "containers/Dashboard/withDashboardActions";
-import withReceipts from './withReceipts';
-import withReceiptActions from './withReceiptActions';
-
-import { compose } from 'utils';
-
-function ReceiptNumberWatcher({
-  receiptNumber, 
-
-  // #withDashboardActions
-  changePageSubtitle,
-
-  // #withReceipts
-  receiptNumberChanged,
-
-  //#withReceiptActions
-  setReceiptNumberChanged,
-}) {
-  const { setFieldValue } = useFormikContext();
-
-  useEffect(() => {
-    if (receiptNumberChanged) {
-      setFieldValue('receipt_number', receiptNumber);
-      changePageSubtitle(`No. ${receiptNumber}`);
-      setReceiptNumberChanged(false);
-    }
-  }, [
-    receiptNumber,
-    receiptNumberChanged,
-    setReceiptNumberChanged,
-    setFieldValue,
-    changePageSubtitle,
-  ]);
-
-  return null
-}
-
-export default compose(
-  withReceipts(({ receiptNumberChanged }) => ({ receiptNumberChanged })),
-  withReceiptActions,
-  withDashboardActions
-)(ReceiptNumberWatcher);

client/src/containers/Sales/Receipts/ReceiptForm/utils.js

@@ -0,0 +1,41 @@
+import moment from 'moment';
+import { repeatValue, transformToForm } from 'utils';
+
+export const MIN_LINES_NUMBER = 4;
+
+export const defaultReceiptEntry = {
+  index: 0,
+  item_id: '',
+  rate: '',
+  discount: 0,
+  quantity: '',
+  description: '',
+};
+
+export const defaultReceipt = {
+  customer_id: '',
+  deposit_account_id: '',
+  receipt_number: '',
+  receipt_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference_no: '',
+  receipt_message: '',
+  statement: '',
+  closed: '',
+  entries: [...repeatValue(defaultReceiptEntry, MIN_LINES_NUMBER)],
+};
+
+/**
+ * Transform to form in edit mode.
+ */
+export const transformToEditForm = (receipt) => ({
+  ...transformToForm(receipt, defaultReceipt),
+  entries: [
+    ...receipt.entries.map((entry) => ({
+      ...transformToForm(entry, defaultReceiptEntry),
+    })),
+    ...repeatValue(
+      defaultReceiptEntry,
+      Math.max(MIN_LINES_NUMBER - receipt.entries.length, 0),
+    ),
+  ],
+});