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

2026-02-19 06:10:31 +00:00 · 2020-11-06 01:17:30 +02:00
parent fbb17fa3cd cc1de9c897
commit 703b730fd3
46 changed files with 1220 additions and 799 deletions
--- a/client/src/containers/Purchases/Bill/BillForm.js
+++ b/client/src/containers/Purchases/Bill/BillForm.js
@@ -13,10 +13,12 @@ import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
 import { CLASSES } from 'common/classes';
+
 import BillFormHeader from './BillFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
 import BillFloatingActions from './BillFloatingActions';
 import BillFormFooter from './BillFormFooter';
+
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withBillActions from './withBillActions';
@@ -41,6 +43,7 @@ function BillForm({

  //#withDashboard
  changePageTitle,
+  changePageSubtitle,

  //#withBillDetail
  bill,
@@ -234,6 +237,7 @@ function BillForm({
            setSubmitting(false);
            saveBillSubmit({ action: 'update', ...payload });
            resetForm();
+            changePageSubtitle('');
          })
          .catch((errors) => {
            handleErrors(errors, { setErrors });
@@ -301,10 +305,22 @@ function BillForm({
      orderingIndex([...formik.values.entries, defaultBill]),
    );
  };
+
+  const handleBillNumberChanged = useCallback((billNumber) => {
+    changePageSubtitle(billNumber);
+  }, []);
+
+  // Clear page subtitle once unmount bill form page.
+  useEffect(() => () => {
+    changePageSubtitle('');
+  }, [changePageSubtitle]);
+
  return (
    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_BILL)}>
      <form onSubmit={formik.handleSubmit}>
-        <BillFormHeader formik={formik} />
+        <BillFormHeader
+          formik={formik}
+          onBillNumberChanged={handleBillNumberChanged} />

        <EstimatesItemsTable
          formik={formik}
--- a/client/src/containers/Purchases/Bill/BillFormHeader.js
+++ b/client/src/containers/Purchases/Bill/BillFormHeader.js
@@ -27,6 +27,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';

 function BillFormHeader({
  formik: { errors, touched, setFieldValue, getFieldProps, values },
+  onBillNumberChanged,

  //#withVendors
  vendorItems,
@@ -48,6 +49,10 @@ function BillFormHeader({
    [setFieldValue],
  );

+  const handleBillNumberBlur = (event) => {
+    onBillNumberChanged && onBillNumberChanged(event.currentTarget.value);
+  };
+
  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
      <div className={'page-form__primary-section'}>
@@ -135,6 +140,7 @@ function BillFormHeader({
            intent={errors.bill_number && touched.bill_number && Intent.DANGER}
            minimal={true}
            {...getFieldProps('bill_number')}
+            onBlur={handleBillNumberBlur}
          />
        </FormGroup>

--- a/client/src/containers/Purchases/Bill/withBills.js
+++ b/client/src/containers/Purchases/Bill/withBills.js
@@ -5,8 +5,7 @@ import {
  getBillPaginationMetaFactory,
  getBillTableQueryFactory,
  getVendorPayableBillsFactory,
-  getPayableBillsByPaymentMadeFactory,
-  getPaymentMadeFormPayableBillsFactory
+  getVendorPayableBillsEntriesFactory,
 } from 'store/Bills/bills.selectors';

 export default (mapState) => {
@@ -14,8 +13,7 @@ export default (mapState) => {
  const getBillsPaginationMeta = getBillPaginationMetaFactory();
  const getBillTableQuery = getBillTableQueryFactory();
  const getVendorPayableBills = getVendorPayableBillsFactory();
-  const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();
-  const getPaymentMadeFormPayableBills = getPaymentMadeFormPayableBillsFactory();
+  const getVendorPayableBillsEntries = getVendorPayableBillsEntriesFactory();

  const mapStateToProps = (state, props) => {
    const tableQuery = getBillTableQuery(state, props);
@@ -29,9 +27,8 @@ export default (mapState) => {
      billsPageination: getBillsPaginationMeta(state, props, tableQuery),
      billsLoading: state.bills.loading,
      nextBillNumberChanged: state.bills.nextBillNumberChanged,
-
-      // vendorPayableBills: getVendorPayableBills(state, props),
-      paymentMadePayableBills: getPaymentMadeFormPayableBills(state, props), 
+      vendorPayableBills: getVendorPayableBills(state, props),
+      vendorPayableBillsEntries: getVendorPayableBillsEntries(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/client/src/containers/Purchases/PaymentMades/PaymentMade.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMade.js
@@ -83,6 +83,7 @@ function PaymentMade({
    >
      <PaymentMadeForm
        paymentMadeId={paymentMadeId}
+        mode={paymentMadeId ? 'edit' : 'new'}
      /> 
    </DashboardInsider>
  );
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFooter.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { Row, Col } from 'components';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Payment made form footer.
+ */
+export default function PaymentMadeFooter({
+  getFieldProps
+}) {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
+      <Row>
+        <Col md={8}>
+          {/* --------- Statement --------- */}
+          <FormGroup
+            label={<T id={'statement'} />}
+            className={'form-group--statement'}
+          >
+            <TextArea
+              growVertically={true}
+              {...getFieldProps('description')}
+            />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
@@ -1,30 +1,52 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, sumBy } from 'lodash';
+import { pick, sumBy, omit } from 'lodash';
 import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';

 import { CLASSES } from 'common/classes';
+import { AppToaster } from 'components';
 import PaymentMadeHeader from './PaymentMadeFormHeader';
-import PaymentMadeItemsTable from './PaymentMadeItemsTable';
 import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
+import PaymentMadeItemsTable from './PaymentMadeItemsTable';
+import PaymentMadeFooter from './PaymentMadeFooter';

 import withMediaActions from 'containers/Media/withMediaActions';
 import withPaymentMadeActions from './withPaymentMadeActions';
 import withPaymentMadeDetail from './withPaymentMadeDetail';
 import withPaymentMade from './withPaymentMade';
-import { AppToaster } from 'components';
+import withSettings from 'containers/Settings/withSettings';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';

 import { compose, orderingLinesIndexes } from 'utils';
-import withSettings from 'containers/Settings/withSettings';
-import { useHistory } from 'react-router-dom';

 const ERRORS = {
  PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
 };
+
+// Default payment made entry values.
+const defaultPaymentMadeEntry = {
+  bill_id: '',
+  payment_amount: '',
+  id: null,
+  due_amount: null,
+};
+// Default initial values.
+const defaultInitialValues = {
+  full_amount: '',
+  vendor_id: '',
+  payment_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference: '',
+  payment_number: '',
+  description: '',
+  entries: [],
+};
+
 /**
 * Payment made form component.
 */
@@ -40,6 +62,13 @@ function PaymentMadeForm({
  // #withPaymentMadeDetail
  paymentMade,

+  // #withBills
+  paymentMadeEntries,
+
+  // #withDashboardActions
+  changePageSubtitle,
+
+  // #ownProps
  paymentMadeId,
 }) {
  const history = useHistory();
@@ -50,6 +79,14 @@ function PaymentMadeForm({
  const [clearFormAlert, setClearFormAlert] = useState(false);
  const [fullAmount, setFullAmount] = useState(null);

+  const [localPaymentEntries, setLocalPaymentEntries] = useState(paymentMadeEntries);
+
+  useEffect(() => {
+    if (localPaymentEntries !== paymentMadeEntries) {
+      setLocalPaymentEntries(paymentMadeEntries);
+    }
+  }, [localPaymentEntries, paymentMadeEntries])
+
  // Yup validation schema.
  const validationSchema = Yup.object().shape({
    vendor_id: Yup.string()
@@ -62,7 +99,6 @@ function PaymentMadeForm({
      .required()
      .label(formatMessage({ id: 'payment_account_' })),
    payment_number: Yup.string()
-      .required()
      .label(formatMessage({ id: 'payment_no_' })),
    reference: Yup.string().min(1).max(255).nullable(),
    description: Yup.string(),
@@ -81,27 +117,6 @@ function PaymentMadeForm({
    ),
  });

-  // Default payment made entry values.
-  const defaultPaymentMadeEntry = useMemo(
-    () => ({ bill_id: '', payment_amount: '', id: null }),
-    [],
-  );
-
-  // Default initial values.
-  const defaultInitialValues = useMemo(
-    () => ({
-      full_amount: '',
-      vendor_id: '',
-      payment_account_id: '',
-      payment_date: moment(new Date()).format('YYYY-MM-DD'),
-      reference: '',
-      payment_number: '',
-      description: '',
-      entries: [],
-    }),
-    [],
-  );
-
  // Form initial values.
  const initialValues = useMemo(
    () => ({
@@ -110,7 +125,7 @@ function PaymentMadeForm({
            ...pick(paymentMade, Object.keys(defaultInitialValues)),
            full_amount: sumBy(paymentMade.entries, 'payment_amount'),
            entries: [
-              ...paymentMade.entries.map((paymentMadeEntry) => ({
+              ...paymentMadeEntries.map((paymentMadeEntry) => ({
                ...pick(paymentMadeEntry, Object.keys(defaultPaymentMadeEntry)),
              })),
            ],
@@ -120,7 +135,7 @@ function PaymentMadeForm({
            entries: orderingLinesIndexes(defaultInitialValues.entries),
          }),
    }),
-    [paymentMade, defaultInitialValues, defaultPaymentMadeEntry],
+    [paymentMade, paymentMadeEntries],
  );

  const handleSubmitForm = (
@@ -130,9 +145,11 @@ function PaymentMadeForm({
    setSubmitting(true);

    // Filters entries that have no `bill_id` or `payment_amount`.
-    const entries = values.entries.filter((item) => {
-      return !item.bill_id || item.payment_amount;
-    });
+    const entries = values.entries
+      .filter((item) => !item.bill_id || item.payment_amount)
+      .map((entry) => ({
+        ...omit(entry, ['due_amount']),
+      }));
    // Total payment amount of entries.
    const totalPaymentAmount = sumBy(entries, 'payment_amount');

@@ -159,6 +176,7 @@ function PaymentMadeForm({
      });
      setSubmitting(false);
      resetForm();
+      changePageSubtitle('');
    };

    const onError = (errors) => {
@@ -213,10 +231,26 @@ function PaymentMadeForm({
    setAmountChangeAlert(false);
  };

+  const transformPaymentEntries = (entries) => {
+    return entries.map((entry) => ({
+      ...pick(entry, Object.keys(defaultPaymentMadeEntry)),
+    }));
+  };
  // Handle update data.
  const handleUpdataData = useCallback(
    (entries) => {
-      setFieldValue('entries', entries);
+      setFieldValue('entries', transformPaymentEntries(entries));
+    },
+    [setFieldValue],
+  );
+
+  const resetEntriesPaymentAmount = (entries) => {
+    return entries.map((entry) => ({ ...entry, payment_amount: 0 }));
+  }
+  // Handle fetch success of vendor bills entries.
+  const handleFetchEntriesSuccess = useCallback(
+    (entries) => {
+      setFieldValue('entries', transformPaymentEntries(entries));
    },
    [setFieldValue],
  );
@@ -236,26 +270,22 @@ function PaymentMadeForm({
  }, [setClearLinesAlert]);

  const handleConfirmClearLines = useCallback(() => {
-    setFieldValue(
-      'entries',
-      values.entries.map((entry) => ({
-        ...entry,
-        payment_amount: 0,
-      })),
-    );
+    setLocalPaymentEntries(resetEntriesPaymentAmount(localPaymentEntries));
+    setFieldValue('entries', resetEntriesPaymentAmount(values.entries));
+
    setClearLinesAlert(false);
-  }, [setFieldValue, setClearLinesAlert, values.entries]);
+  }, [setFieldValue, localPaymentEntries, values.entries]);

  // Handle clear button click.
  const handleClearBtnClick = useCallback(() => {
    setClearFormAlert(true);
  }, []);

-  //
+  // Handle cancel button clear
  const handleCancelClearFormAlert = () => {
    setClearFormAlert(false);
  };
-
+  // Handle confirm button click of clear form alert.
  const handleConfirmCancelClearFormAlert = () => {
    setValues({
      ...defaultInitialValues,
@@ -268,6 +298,24 @@ function PaymentMadeForm({
    });
    setClearFormAlert(false);
  };
+  // Payable full amount.
+  const payableFullAmount = useMemo(() => sumBy(values.entries, 'due_amount'), [
+    values.entries,
+  ]);
+
+  const handlePaymentNoChanged = (paymentNumber) => {
+    changePageSubtitle(paymentNumber);
+  };
+
+ // Clear page subtitle before once page leave.
+  useEffect(() => () => {
+    changePageSubtitle('')
+  }, [changePageSubtitle]);
+
+  const fullAmountPaid = useMemo(
+    () => sumBy(values.entries, 'payment_amount'),
+    [values.entries],
+  );

  return (
    <div
@@ -282,50 +330,65 @@ function PaymentMadeForm({
          setFieldValue={setFieldValue}
          getFieldProps={getFieldProps}
          values={values}
+          payableFullAmount={payableFullAmount}
          onFullAmountChanged={handleFullAmountChange}
+          onPaymentNumberChanged={handlePaymentNoChanged}
+          amountPaid={fullAmountPaid}
        />
        <PaymentMadeItemsTable
          fullAmount={fullAmount}
-          paymentEntries={values.entries}
+          paymentEntries={localPaymentEntries}
          vendorId={values.vendor_id}
          paymentMadeId={paymentMadeId}
          onUpdateData={handleUpdataData}
          onClickClearAllLines={handleClearAllLines}
          errors={errors?.entries}
+          onFetchEntriesSuccess={handleFetchEntriesSuccess}
+          vendorPayableBillsEntrie={[]}
        />
        <Alert
          cancelButtonText={<T id={'cancel'} />}
          confirmButtonText={<T id={'ok'} />}
-          intent={Intent.WARNING}
+          intent={Intent.DANGER}
          isOpen={amountChangeAlert}
          onCancel={handleCancelAmountChangeAlert}
          onConfirm={handleConfirmAmountChangeAlert}
        >
-          <p>Are you sure to discard full amount?</p>
+          <p>
+            Changing full amount will change all credit and payment were
+            applied, Is this okay?
+          </p>
        </Alert>

        <Alert
          cancelButtonText={<T id={'cancel'} />}
          confirmButtonText={<T id={'ok'} />}
-          intent={Intent.WARNING}
+          intent={Intent.DANGER}
          isOpen={clearLinesAlert}
          onCancel={handleCancelClearLines}
          onConfirm={handleConfirmClearLines}
        >
-          <p>Are you sure to discard full amount?</p>
+          <p>
+            Clearing the table lines will delete all credits and payments were
+            applied. Is this okay?
+          </p>
        </Alert>

        <Alert
          cancelButtonText={<T id={'cancel'} />}
          confirmButtonText={<T id={'ok'} />}
-          intent={Intent.WARNING}
+          intent={Intent.DANGER}
          isOpen={clearFormAlert}
          onCancel={handleCancelClearFormAlert}
          onConfirm={handleConfirmCancelClearFormAlert}
        >
-          <p>Are you sure to clear form data.</p>
+          <p>Are you sure you want to clear this transaction?</p>
        </Alert>

+        <PaymentMadeFooter
+          getFieldProps={getFieldProps}
+        />
+
        <PaymentMadeFloatingActions
          isSubmitting={isSubmitting}
          onCancelClick={handleCancelClick}
@@ -347,11 +410,15 @@ export default compose(
  withPaymentMadeActions,
  withMediaActions,
  withPaymentMadeDetail(),
-  withPaymentMade(({ nextPaymentNumberChanged }) => ({
-    nextPaymentNumberChanged,
-  })),
+  withPaymentMade(
+    ({ nextPaymentNumberChanged, paymentMadeEntries }, state, props) => ({
+      nextPaymentNumberChanged,
+      paymentMadeEntries,
+    }),
+  ),
  withSettings(({ billPaymentSettings }) => ({
    paymentNextNumber: billPaymentSettings?.next_number,
    paymentNumberPrefix: billPaymentSettings?.number_prefix,
  })),
+  withDashboardActions,
 )(PaymentMadeForm);
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js
@@ -23,7 +23,6 @@ import {
  Hint,
 } from 'components';

-import withBills from '../Bill/withBills';
 import withVender from 'containers/Vendors/withVendors';
 import withAccounts from 'containers/Accounts/withAccounts';

@@ -32,7 +31,9 @@ import withAccounts from 'containers/Accounts/withAccounts';
 */
 function PaymentMadeFormHeader({
  paymentMadeId,
-  vendorId,
+  payableFullAmount,
+  onPaymentNumberChanged,
+  amountPaid = 0,

  // #useFormik
  errors,
@@ -49,17 +50,9 @@ function PaymentMadeFormHeader({

  //#withAccouts
  accountsList,
-
-  // #withBills
-  paymentMadePayableBills,
 }) {
  const isNewMode = !paymentMadeId;

-  const payableFullAmount = useMemo(
-    () => sumBy(paymentMadePayableBills, 'due_amount'),
-    [paymentMadePayableBills],
-  );
-
  const handleDateChange = useCallback(
    (date_filed) => (date) => {
      const formatted = moment(date).format('YYYY-MM-DD');
@@ -67,8 +60,6 @@ function PaymentMadeFormHeader({
    },
    [setFieldValue],
  );
-
-
  const triggerFullAmountChanged = (value) => {
    onFullAmountChanged && onFullAmountChanged(value);
  };
@@ -96,147 +87,159 @@ function PaymentMadeFormHeader({
    triggerFullAmountChanged(payableFullAmount);
  };

+  const handlePaymentNumberBlur = (event) => {
+    onPaymentNumberChanged && onPaymentNumberChanged(event.currentTarget.value)
+  };
+
  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/* ------------ Vendor name ------------ */}
-        <FormGroup
-          label={<T id={'vendor_name'} />}
-          inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
-          labelInfo={<FieldRequiredHint />}
-          intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
-          helperText={
-            <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
-          }
-        >
-          <ContactSelecetList
-            contactsList={vendorItems}
-            selectedContactId={values.vendor_id}
-            defaultSelectText={ <T id={'select_vender_account'} /> }
-            onContactSelected={onChangeSelect('vendor_id')}
-            // buttonProps={{ disabled: !isNewMode }}
-            disabled={!isNewMode}
-          />
-        </FormGroup>
-
-        {/* ------------ Payment date ------------ */}
-        <FormGroup
-          label={<T id={'payment_date'} />}
-          inline={true}
-          labelInfo={<FieldRequiredHint />}
-          className={classNames('form-group--select-list', Classes.FILL)}
-          intent={errors.payment_date && touched.payment_date && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="payment_date" {...{ errors, touched }} />
-          }
-        >
-          <DateInput
-            {...momentFormatter('YYYY/MM/DD')}
-            value={tansformDateValue(values.payment_date)}
-            onChange={handleDateChange('payment_date')}
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
-          />
-        </FormGroup>
-
-        {/* ------------ Full amount ------------ */}
-        <FormGroup
-          label={<T id={'full_amount'} />}
-          inline={true}
-          className={('form-group--full-amount', Classes.FILL)}
-          intent={errors.full_amount && touched.full_amount && Intent.DANGER}
-          labelInfo={<Hint />}
-          helperText={
-            <ErrorMessage name="full_amount" {...{ errors, touched }} />
-          }
-        >
-          <InputGroup
-            intent={errors.full_amount && touched.full_amount && Intent.DANGER}
-            minimal={true}
-            value={values.full_amount}
-            {...getFieldProps('full_amount')}
-            onBlur={handleFullAmountBlur}
-          />
-
-          <a
-            onClick={handleReceiveFullAmountClick}
-            href="#"
-            className={'receive-full-amount'}
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+          {/* ------------ Vendor name ------------ */}
+          <FormGroup
+            label={<T id={'vendor_name'} />}
+            inline={true}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
+            helperText={
+              <ErrorMessage name={'vendor_id'} {...{ errors, touched }} />
+            }
          >
-            Receive full amount (
-            <Money amount={payableFullAmount} currency={'USD'} />)
-          </a>
-        </FormGroup>
+            <ContactSelecetList
+              contactsList={vendorItems}
+              selectedContactId={values.vendor_id}
+              defaultSelectText={ <T id={'select_vender_account'} /> }
+              onContactSelected={onChangeSelect('vendor_id')}
+              disabled={!isNewMode}
+            />
+          </FormGroup>

-        {/* ------------ Payment number ------------ */}
-        <FormGroup
-          label={<T id={'payment_no'} />}
-          inline={true}
-          className={('form-group--payment_number', Classes.FILL)}
-          labelInfo={<FieldRequiredHint />}
-          intent={
-            errors.payment_number && touched.payment_number && Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage name="payment_number" {...{ errors, touched }} />
-          }
-        >
-          <InputGroup
+          {/* ------------ Payment date ------------ */}
+          <FormGroup
+            label={<T id={'payment_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={errors.payment_date && touched.payment_date && Intent.DANGER}
+            helperText={
+              <ErrorMessage name="payment_date" {...{ errors, touched }} />
+            }
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.payment_date)}
+              onChange={handleDateChange('payment_date')}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
+
+          {/* ------------ Full amount ------------ */}
+          <FormGroup
+            label={<T id={'full_amount'} />}
+            inline={true}
+            className={('form-group--full-amount', Classes.FILL)}
+            intent={
+              errors.full_amount && touched.full_amount && Intent.DANGER
+            }
+            labelInfo={<Hint />}
+            helperText={
+              <ErrorMessage name="full_amount" {...{ errors, touched }} />
+            }
+          >
+            <InputGroup
+              intent={
+                errors.full_amount && touched.full_amount && Intent.DANGER
+              }
+              minimal={true}
+              value={values.full_amount}
+              {...getFieldProps('full_amount')}
+              onBlur={handleFullAmountBlur}
+            />
+
+            <a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
+              Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
+            </a>
+          </FormGroup>
+
+          {/* ------------ Payment number ------------ */}
+          <FormGroup
+            label={<T id={'payment_no'} />}
+            inline={true}
+            className={('form-group--payment_number', Classes.FILL)}
+            labelInfo={<FieldRequiredHint />}
            intent={
              errors.payment_number && touched.payment_number && Intent.DANGER
            }
-            minimal={true}
-            {...getFieldProps('payment_number')}
-          />
-        </FormGroup>
-
-        {/* ------------ Payment account ------------ */}
-        <FormGroup
-          label={<T id={'payment_account'} />}
-          className={classNames(
-            'form-group--payment_account_id',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          inline={true}
-          labelInfo={<FieldRequiredHint />}
-          intent={
-            errors.payment_account_id &&
-            touched.payment_account_id &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage
-              name={'payment_account_id'}
-              {...{ errors, touched }}
+            helperText={
+              <ErrorMessage name="payment_number" {...{ errors, touched }} />
+            }
+          >
+            <InputGroup
+              intent={
+                errors.payment_number && touched.payment_number && Intent.DANGER
+              }
+              minimal={true}
+              {...getFieldProps('payment_number')}
+              onBlur={handlePaymentNumberBlur}
            />
-          }
-        >
-          <AccountsSelectList
-            accounts={paymentAccounts}
-            labelInfo={<FieldRequiredHint />}
-            onAccountSelected={onChangeSelect('payment_account_id')}
-            defaultSelectText={<T id={'select_payment_account'} />}
-            selectedAccountId={values.payment_account_id}
-          />
-        </FormGroup>
+          </FormGroup>

-        {/* ------------ Reference ------------ */}
-        <FormGroup
-          label={<T id={'reference'} />}
-          inline={true}
-          className={classNames('form-group--reference', Classes.FILL)}
-          intent={errors.reference && touched.reference && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="reference" {...{ errors, touched }} />
+          {/* ------------ Payment account ------------ */}
+          <FormGroup
+            label={<T id={'payment_account'} />}
+            className={classNames(
+              'form-group--payment_account_id',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            intent={
+              errors.payment_account_id &&
+              touched.payment_account_id &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage
+                name={'payment_account_id'}
+                {...{ errors, touched }}
+              />
          }
-        >
-          <InputGroup
+          >
+            <AccountsSelectList
+              accounts={paymentAccounts}
+              labelInfo={<FieldRequiredHint />}
+              onAccountSelected={onChangeSelect('payment_account_id')}
+              defaultSelectText={<T id={'select_payment_account'} />}
+              selectedAccountId={values.payment_account_id}
+            />
+          </FormGroup>
+
+          {/* ------------ Reference ------------ */}
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', Classes.FILL)}
            intent={errors.reference && touched.reference && Intent.DANGER}
-            minimal={true}
-            {...getFieldProps('reference')}
-          />
-        </FormGroup>
+            helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
+          >
+            <InputGroup
+              intent={errors.reference && touched.reference && Intent.DANGER}
+              minimal={true}
+              {...getFieldProps('reference')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
+          <div class="big-amount">
+            <span class="big-amount__label">Amount Received</span>
+            <h1 class="big-amount__number">
+              <Money amount={amountPaid} currency={'USD'} />
+            </h1>
+          </div>
+        </div>
      </div>
    </div>
  );
@@ -250,7 +253,4 @@ export default compose(
  withAccounts(({ accountsList }) => ({
    accountsList,
  })),
-  withBills(({ paymentMadePayableBills }) => ({
-    paymentMadePayableBills,
-  })),
 )(PaymentMadeFormHeader);
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { omit } from 'lodash';
-import { CloudLoadingIndicator } from 'components'
+import { isEmpty } from 'lodash';
+import { CloudLoadingIndicator } from 'components';
 import PaymentMadeItemsTableEditor from './PaymentMadeItemsTableEditor';

 import withPaymentMadeActions from './withPaymentMadeActions';
@@ -22,48 +22,51 @@ function PaymentMadeItemsTable({
  paymentEntries = [], // { bill_id: number, payment_amount: number, id?: number }
  onClickClearAllLines,
  errors,
+  onFetchEntriesSuccess,

  // #withBillActions
  requestFetchDueBills,

  // #withBills
-  paymentMadePayableBills,
-
-  // #withPaymentMadeDetail
-  paymentMade,
+  vendorPayableBillsEntries,
 }) {
-  const [tableData, setTableData] = useState([]);
-  const [localAmount, setLocalAmount] = useState(fullAmount);
-
  const isNewMode = !paymentMadeId;

-  const triggerUpdateData = useCallback((entries) => {
-    const _data = entries.map((entry) => ({
-      bill_id: entry?.bill?.id,
-      ...omit(entry, ['bill']),
-    }))
-    onUpdateData && onUpdateData(_data);
-  }, [onUpdateData]);
+  // Detarmines takes vendor payable bills entries in create mode
+  // or payment made entries in edit mode.
+  const computedTableEntries = useMemo(
+    () =>
+      !isEmpty(paymentEntries)
+        ? paymentEntries
+        : (vendorPayableBillsEntries || []),
+    [vendorPayableBillsEntries, paymentEntries],
+  );
+  const [tableData, setTableData] = useState(computedTableEntries);
+  const [localEntries, setLocalEntries] = useState(computedTableEntries);

-  // Merges payment entries with payable bills.
-  const computedTableData = useMemo(() => {
-    const entriesTable = new Map(
-      paymentEntries.map((e) => [e.bill_id, e]),
-    );
-    return paymentMadePayableBills.map((bill) => {
-      const entry = entriesTable.get(bill.id);
-      return {
-        bill,
-        id: null,
-        payment_number: 0,
-        ...(entry || {}),
-      }
-    });
-  }, [paymentEntries, paymentMadePayableBills]);
+  const [localAmount, setLocalAmount] = useState(fullAmount);
+
+  // Triggers `onUpdateData` event that passes changed entries.
+  const triggerUpdateData = useCallback(
+    (entries) => {
+      onUpdateData && onUpdateData(entries);
+    },
+    [onUpdateData],
+  );
+
+  const triggerOnFetchBillsSuccess = useCallback(
+    (bills) => {
+      onFetchEntriesSuccess && onFetchEntriesSuccess(bills);
+    },
+    [onFetchEntriesSuccess],
+  );

  useEffect(() => {
-    setTableData(computedTableData);
-  }, [computedTableData]);
+    if (computedTableEntries !== localEntries) {
+      setTableData(computedTableEntries);
+      setLocalEntries(computedTableEntries);
+    }
+  }, [computedTableEntries, localEntries]);

  // Handle mapping `fullAmount` prop to `localAmount` state.
  useEffect(() => {
@@ -98,14 +101,34 @@ function PaymentMadeItemsTable({
    { enabled: isNewMode && vendorId },
  );

-  // Handle update data.
-  const handleUpdateData = (rows) => {
-    triggerUpdateData(rows);
-  };
+  useEffect(() => {
+    const enabled = isNewMode && vendorId;

-  const noResultsMessage = (vendorId) ?
-    'There is no payable bills for this vendor that can be applied for this payment' : 
-    'Please select a vendor to display all open bills for it.';
+    if (!fetchVendorDueBills.isFetching && enabled) {
+      triggerOnFetchBillsSuccess(computedTableEntries);
+    }
+  }, [
+    vendorId,
+    isNewMode,
+    fetchVendorDueBills.isFetching,
+    computedTableEntries,
+    triggerOnFetchBillsSuccess,
+  ]);
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rows) => {
+      setTableData(rows);
+      triggerUpdateData(rows);
+    },
+    [setTableData, triggerUpdateData],
+  );
+
+  // Detarmines the right no results message before selecting vendor and aftering
+  // selecting vendor id.
+  const noResultsMessage = vendorId
+    ? 'There is no payable bills for this vendor that can be applied for this payment'
+    : 'Please select a vendor to display all open bills for it.';

  return (
    <CloudLoadingIndicator isLoading={fetchVendorDueBills.isFetching}>
@@ -123,7 +146,8 @@ function PaymentMadeItemsTable({
 export default compose(
  withPaymentMadeActions,
  withBillActions,
-  withBills(({ paymentMadePayableBills }) => ({
+  withBills(({ paymentMadePayableBills, vendorPayableBillsEntries }) => ({
    paymentMadePayableBills,
+    vendorPayableBillsEntries,
  })),
 )(PaymentMadeItemsTable);
--- a/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js
@@ -43,7 +43,7 @@ export default function PaymentMadeItemsTableEditor({
  noResultsMessage
 }) {
  const transformedData = useMemo(() => {
-    const rows = data;
+    const rows = [ ...data ];
    const totalRow = {
      due_amount: sumBy(data, 'due_amount'),
      payment_amount: sumBy(data, 'payment_amount'),
@@ -74,27 +74,27 @@ export default function PaymentMadeItemsTableEditor({
      {
        Header: formatMessage({ id: 'Date' }),
        id: 'bill_date',
-        accessor: (r) => moment(r.bill?.bill_date).format('YYYY MMM DD'),
+        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
        Cell: CellRenderer(EmptyDiv, 'bill_date'),
        disableSortBy: true,
      },
      {
        Header: formatMessage({ id: 'bill_number' }),
-        accessor: (row) => `#${row.bill?.bill_number}`,
+        accessor: (row) => `#${row?.bill_number}`,
        Cell: CellRenderer(EmptyDiv, 'bill_number'),
        disableSortBy: true,
        className: 'bill_number',
      },
      {
        Header: formatMessage({ id: 'bill_amount' }),
-        accessor: r => r.bill?.amount,
+        accessor: 'amount',
        Cell: CellRenderer(DivFieldCell, 'amount'),
        disableSortBy: true,
        className: '',
      },
      {
        Header: formatMessage({ id: 'amount_due' }),
-        accessor: r => r.bill?.due_amount,
+        accessor: 'due_amount',
        Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
        disableSortBy: true,
        className: '',
--- a/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
+++ b/client/src/containers/Purchases/PaymentMades/withPaymentMade.js
@@ -5,11 +5,14 @@ import {
  getPaymentMadeCurrentPageFactory,
  getPaymentMadePaginationMetaFactory,
  getPaymentMadeTableQuery,
+  getPaymentMadeEntriesFactory
 } from 'store/PaymentMades/paymentMade.selector';

 export default (mapState) => {
  const getPyamentMadesItems = getPaymentMadeCurrentPageFactory();
  const getPyamentMadesPaginationMeta = getPaymentMadePaginationMetaFactory();
+  const getPaymentMadeEntries = getPaymentMadeEntriesFactory();
+
  const mapStateToProps = (state, props) => {
    const query = getPaymentMadeTableQuery(state, props);
    const mapped = {
@@ -23,8 +26,8 @@ export default (mapState) => {
        query,
      ),
      paymentMadesLoading: state.paymentMades.loading,
-      nextPaymentNumberChanged:
-        state.paymentMades.nextPaymentNumberChanged,
+      nextPaymentNumberChanged: state.paymentMades.nextPaymentNumberChanged,
+      paymentMadeEntries: getPaymentMadeEntries(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };