refactoring: payment receive form.

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js

@@ -22,25 +22,23 @@ import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
  * Payment receive floating actions bar.
  */
 export default function PaymentReceiveFormFloatingActions() {
-
   // Payment receive form context.
   const { setSubmitPayload, isNewMode } = usePaymentReceiveFormContext();
 
   // Formik form context.
-  const { isSubmitting } = useFormikContext();
+  const { isSubmitting, submitForm } = useFormikContext();
 
   // History context.
   const history = useHistory();
 
   // Handle submit button click.
   const handleSubmitBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, });
+    setSubmitPayload({ redirect: true });
+    submitForm();
   };
 
   // Handle clear button click.
-  const handleClearBtnClick = (event) => {
-    
-  };
+  const handleClearBtnClick = (event) => {};
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
@@ -49,12 +47,14 @@ export default function PaymentReceiveFormFloatingActions() {
 
   // Handle submit & new button click.
   const handleSubmitAndNewClick = (event) => {
-    setSubmitPayload({ redirect: false, resetForm: true, });
+    setSubmitPayload({ redirect: false, resetForm: true });
+    submitForm();
   };
 
   // Handle submit & continue editing button click.
   const handleSubmitContinueEditingBtnClick = (event) => {
     setSubmitPayload({ redirect: false, publish: true });
+    submitForm();
   };
 
   return (
@@ -63,6 +63,7 @@ export default function PaymentReceiveFormFloatingActions() {
       <ButtonGroup>
         <Button
           disabled={isSubmitting}
+          loading={isSubmitting}
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
@@ -109,4 +110,4 @@ export default function PaymentReceiveFormFloatingActions() {
       />
     </div>
   );
-}
+}

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js

@@ -1,17 +1,18 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
-
 import { useIntl } from 'react-intl';
-import { pick, sumBy, omit, isEmpty } from 'lodash';
+import { sumBy, pick, isEmpty } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from 'common/classes';
 import PaymentReceiveHeader from './PaymentReceiveFormHeader';
-import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
+import PaymentReceiveFormBody from './PaymentReceiveFormBody';
 import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
 import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
+import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
+import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
 
 import withSettings from 'containers/Settings/withSettings';
 import {
@@ -24,7 +25,6 @@ import { compose } from 'utils';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import {
   defaultPaymentReceive,
-  defaultPaymentReceiveEntry,
   transformToEditForm,
 } from './utils';
 
@@ -44,7 +44,8 @@ function PaymentReceiveForm({
   // Payment receive form context.
   const {
     isNewMode,
-    paymentReceive,
+    paymentReceiveEditPage,
+    paymentEntriesEditPage,
     paymentReceiveId,
     submitPayload,
     editPaymentReceiveMutate,
@@ -56,24 +57,17 @@ function PaymentReceiveForm({
     ? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}`
     : paymentReceiveNextNumber;
 
-  // Form validation schema.
-  const validationSchema = isNewMode
-    ? CreatePaymentReceiveFormSchema
-    : EditPaymentReceiveFormSchema;
-
   // Form initial values.
   const initialValues = useMemo(
     () => ({
-      ...(!isEmpty(paymentReceive)
-        ? {
-            ...transformToEditForm(paymentReceive, []),
-          }
+      ...(!isEmpty(paymentReceiveEditPage)
+        ? transformToEditForm(paymentReceiveEditPage, paymentEntriesEditPage)
         : {
-            ...paymentReceive,
+            ...defaultPaymentReceive,
             payment_receive_no: paymentReceiveNumber,
           }),
     }),
-    [paymentReceive, paymentReceiveNumber],
+    [paymentReceiveEditPage, paymentReceiveNumber, paymentEntriesEditPage],
   );
 
   // Handle form submit.
@@ -87,7 +81,7 @@ function PaymentReceiveForm({
     const entries = values.entries
       .filter((entry) => entry.invoice_id && entry.payment_amount)
       .map((entry) => ({
-        ...omit(entry, ['due_amount']),
+        ...pick(entry, ['invoice_id', 'payment_amount']),
       }));
 
     // Calculates the total payment amount of entries.
@@ -125,7 +119,7 @@ function PaymentReceiveForm({
       }
     };
     // Handle request response errors.
-    const onError = (errors) => {
+    const onError = ({ response: { data: { errors } } }) => {
       const getError = (errorType) => errors.find((e) => e.type === errorType);
 
       if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
@@ -146,12 +140,6 @@ function PaymentReceiveForm({
     }
   };
 
-  const transformDataTableToEntries = (dataTable) => {
-    return dataTable.map((data) => ({
-      ...pick(data, Object.keys(defaultPaymentReceiveEntry)),
-    }));
-  };
-
   return (
     <div
       className={classNames(
@@ -163,21 +151,23 @@ function PaymentReceiveForm({
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmitForm}
-        validationSchema={validationSchema}
+        validationSchema={
+          isNewMode
+            ? CreatePaymentReceiveFormSchema
+            : EditPaymentReceiveFormSchema
+        }
       >
         <Form>
-          <PaymentReceiveHeader />
+          <PaymentReceiveInnerProvider>
+            <PaymentReceiveHeader />
+            <PaymentReceiveFormBody />
+            <PaymentReceiveFormFooter />
+            <PaymentReceiveFloatingActions />
 
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <PaymentReceiveItemsTable />
-          </div>
-
-          <PaymentReceiveFormFooter />
-          <PaymentReceiveFloatingActions />
+            <PaymentReceiveFormAlerts />
+          </PaymentReceiveInnerProvider>
         </Form>
       </Formik>
-
-      {/* </form> */}
     </div>
   );
 }

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormAlerts.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import ClearingAllLinesAlert from 'containers/Alerts/PaymentReceives/ClearingAllLinesAlert';
+import { clearAllPaymentEntries } from './utils';
+
+/**
+ * Payment receive form alerts.
+ */
+export default function PaymentReceiveFormAlerts() {
+  const { values: { entries }, setFieldValue } = useFormikContext();
+
+  const handleClearingAllLines = () => {
+    const newEntries = clearAllPaymentEntries(entries);
+    setFieldValue('entries', newEntries);
+    setFieldValue('full_amount', '');
+  };
+
+  return (
+    <>
+      <ClearingAllLinesAlert
+        name={'clear-all-lines-payment-receive'}
+        onConfirm={handleClearingAllLines}
+      />
+    </>
+  );
+}

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormBody.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { FastField } from 'formik';
+import PaymentReceiveItemsTable from './PaymentReceiveItemsTable';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Payment Receive form body.
+ */
+export default function PaymentReceiveFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({ form, field: { value } }) => (
+          <PaymentReceiveItemsTable
+            entries={value}
+            onUpdateData={(newEntries) => {
+              form.setFieldValue('entries', newEntries);
+            }}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js

@@ -20,9 +20,9 @@ function PaymentReceiveFormHeader({
   // Formik form context.
   const { values } = useFormikContext();
 
-  // Calculates the total receivable amount from due amount.
-  const receivableFullAmount = useMemo(
-    () => sumBy(values.entries, 'due_amount'),
+  // Calculates the total payment amount from due amount.
+  const paymentFullAmount = useMemo(
+    () => sumBy(values.entries, 'payment_amount'),
     [values.entries],
   );
 
@@ -35,7 +35,7 @@ function PaymentReceiveFormHeader({
           <div class="big-amount">
             <span class="big-amount__label">Amount Received</span>
             <h1 class="big-amount__number">
-              <Money amount={receivableFullAmount} currency={baseCurrency} />
+              <Money amount={paymentFullAmount} currency={baseCurrency} />
             </h1>
           </div>
         </div>

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js

@@ -2,12 +2,11 @@ import React, { createContext, useContext } from 'react';
 import { DashboardInsider } from 'components';
 import {
   useSettings,
-  usePaymentReceive,
+  usePaymentReceiveEditPage,
   useAccounts,
   useCustomers,
   useCreatePaymentReceive,
   useEditPaymentReceive,
-  useDueInvoices,
 } from 'hooks/query';
 
 // Payment receive form context.
@@ -18,15 +17,19 @@ const PaymentReceiveFormContext = createContext();
  */
 function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
   // Form state.
-  const [paymentCustomerId, setPaymentCustomerId] = React.useState(null);
   const [submitPayload, setSubmitPayload] = React.useState({});
 
   // Fetches payment recevie details.
   const {
-    data: paymentReceive,
+    data: {
+      paymentReceive: paymentReceiveEditPage,
+      entries: paymentEntriesEditPage,
+    },
     isLoading: isPaymentLoading,
     isFetching: isPaymentFetching,
-  } = usePaymentReceive(paymentReceiveId, { enabled: !!paymentReceiveId });
+  } = usePaymentReceiveEditPage(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
 
   // Handle fetch accounts data.
   const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
@@ -40,15 +43,6 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     isFetching: isCustomersFetching,
   } = useCustomers();
 
-  // Fetches customer receivable invoices.
-  const {
-    data: dueInvoices,
-    isLoading: isDueInvoicesLoading,
-    isFetching: isDueInvoicesFetching,
-  } = useDueInvoices(paymentCustomerId, {
-    enabled: !!paymentCustomerId,
-  });
-
   // Detarmines whether the new mode.
   const isNewMode = !paymentReceiveId;
 
@@ -58,24 +52,20 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
 
   // Provider payload.
   const provider = {
-    paymentReceive,
+    paymentReceiveId,
+    paymentReceiveEditPage,
+    paymentEntriesEditPage,
     accounts,
     customers,
-    dueInvoices,
 
     isPaymentLoading,
     isPaymentFetching,
     isAccountsFetching,
     isCustomersFetching,
-    isDueInvoicesLoading,
-    isDueInvoicesFetching,
-
-    paymentCustomerId,
-    submitPayload,
     isNewMode,
-    
+
+    submitPayload,
     setSubmitPayload,
-    setPaymentCustomerId,
 
     editPaymentReceiveMutate,
     createPaymentReceiveMutate,

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js

@@ -4,19 +4,25 @@ import {
   InputGroup,
   Position,
   ControlGroup,
+  Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
-import { FastField, useFormikContext } from 'formik';
-import { sumBy } from 'lodash';
+import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 
+import { useAutofocus } from 'hooks';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
-import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
+import {
+  compose,
+  safeSumBy,
+  momentFormatter,
+  tansformDateValue,
+  inputIntent,
+} from 'utils';
 import {
   AccountsSelectList,
   ContactSelecetList,
-  ErrorMessage,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
@@ -28,31 +34,44 @@ import {
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 
 import withSettings from 'containers/Settings/withSettings';
-import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { compose } from 'utils';
+import { amountPaymentEntries, fullAmountPaymentEntries } from './utils';
+import { toSafeInteger } from 'lodash';
 
 /**
  * Payment receive header fields.
  */
 function PaymentReceiveHeaderFields({ baseCurrency }) {
   // Payment receive form context.
-  const {
-    customers,
-    accounts,
-    isNewMode,
-    setPaymentCustomerId,
-  } = usePaymentReceiveFormContext();
+  const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
 
   // Formik form context.
-  const { values } = useFormikContext();
+  const {
+    values: { entries },
+    setFieldValue,
+  } = useFormikContext();
 
-  const fullAmountReceived = useMemo(
-    () => sumBy(values.entries, 'payment_amount'),
-    [values.entries],
-  );
+  const customerFieldRef = useAutofocus();
 
-  const handleReceiveFullAmountClick = () => {};
+  // Calculates the full-amount received.
+  const totalDueAmount = useMemo(() => safeSumBy(entries, 'due_amount'), [
+    entries,
+  ]);
+
+  // Handle receive full-amount link click.
+  const handleReceiveFullAmountClick = () => {
+    const newEntries = fullAmountPaymentEntries(entries);
+    const fullAmount = safeSumBy(newEntries, 'payment_amount');
+
+    setFieldValue('entries', newEntries);
+    setFieldValue('full_amount', fullAmount);
+  };
+
+  // Handles the full-amount field blur.
+  const onFullAmountBlur = (value) => {
+    const newEntries = amountPaymentEntries(toSafeInteger(value), entries);
+    setFieldValue('entries', newEntries);
+  };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -72,11 +91,14 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
               selectedContactId={value}
               defaultSelectText={<T id={'select_customer_account'} />}
               onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer);
-                setPaymentCustomerId(customer.id);
+                form.setFieldValue('customer_id', customer.id);
+                form.setFieldValue('full_amount', '');
               }}
               popoverFill={true}
               disabled={!isNewMode}
+              buttonProps={{
+                elementRef: (ref) => (customerFieldRef.current = ref),
+              }}
             />
           </FormGroup>
         )}
@@ -107,8 +129,12 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
       </FastField>
 
       {/* ------------ Full amount ------------ */}
-      <FastField name={'customer_name'}>
-        {({ form, field, meta: { error, touched } }) => (
+      <Field name={'full_amount'}>
+        {({
+          form: { setFieldValue },
+          field: { value, onChange },
+          meta: { error, touched },
+        }) => (
           <FormGroup
             label={<T id={'full_amount'} />}
             inline={true}
@@ -120,24 +146,26 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
             <ControlGroup>
               <InputPrependText text={baseCurrency} />
               <MoneyInputGroup
-                inputGroupProps={{
-                  medium: true,
-                  ...field,
+                value={value}
+                onChange={(value) => {
+                  setFieldValue('full_amount', value);
                 }}
+                onBlurValue={onFullAmountBlur}
               />
             </ControlGroup>
 
-            <a
+            <Button
               onClick={handleReceiveFullAmountClick}
-              href="#"
               className={'receive-full-amount'}
+              small={true}
+              minimal={true}
             >
               Receive full amount (
-              <Money amount={fullAmountReceived} currency={baseCurrency} />)
-            </a>
+              <Money amount={totalDueAmount} currency={baseCurrency} />)
+            </Button>
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
       {/* ------------ Payment receive no. ------------ */}
       <FastField name={'payment_receive_no'}>
@@ -200,7 +228,7 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
       </FastField>
 
       {/* ------------ Reference No. ------------ */}
-      <FastField name={'customer_name'}>
+      <FastField name={'reference_no'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'reference'} />}
@@ -225,5 +253,4 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),
-  withDialogActions,
 )(PaymentReceiveHeaderFields);

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveInnerProvider.js

@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { useFormikContext } from 'formik';
+import { useDueInvoices } from 'hooks/query';
+import { transformInvoicesNewPageEntries } from './utils';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import { isEmpty } from 'lodash';
+
+const PaymentReceiveInnerContext = createContext();
+
+/**
+ * Payment receive inner form provider.
+ */
+function PaymentReceiveInnerProvider({ ...props }) {
+  const { isNewMode } = usePaymentReceiveFormContext();
+
+  // Formik context.
+  const {
+    values: { customer_id: customerId },
+    setFieldValue,
+  } = useFormikContext();
+
+  // Fetches customer receivable invoices.
+  const {
+    data: dueInvoices,
+    isLoading: isDueInvoicesLoading,
+    isFetching: isDueInvoicesFetching,
+  } = useDueInvoices(customerId, {
+    enabled: !!customerId && isNewMode,
+  });
+
+  useEffect(() => {
+    if (!isDueInvoicesFetching && !isEmpty(dueInvoices)) {
+      setFieldValue('entries', transformInvoicesNewPageEntries(dueInvoices));
+    }
+  }, [isDueInvoicesFetching, dueInvoices, setFieldValue]);
+
+  // Provider payload.
+  const provider = {
+    dueInvoices,
+    isDueInvoicesLoading,
+    isDueInvoicesFetching,
+  };
+
+  return <PaymentReceiveInnerContext.Provider value={provider} {...props} />;
+}
+
+const usePaymentReceiveInnerContext = () =>
+  useContext(PaymentReceiveInnerContext);
+
+export { PaymentReceiveInnerProvider, usePaymentReceiveInnerContext };

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { CloudLoadingIndicator } from 'components';
@@ -8,43 +8,50 @@ import { CLASSES } from 'common/classes';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { DataTableEditable } from 'components';
 import { usePaymentReceiveEntriesColumns } from './components';
+import { compose, updateTableRow, safeSumBy } from 'utils';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
 
 /**
  * Payment receive items table.
  */
-export default function PaymentReceiveItemsTable() {
+function PaymentReceiveItemsTable({
+  entries,
+  onUpdateData,
+
+  // #withDialogActions
+  openAlert
+}) {
   // Payment receive form context.
   const {
-    isNewMode,
     isDueInvoicesFetching,
     paymentCustomerId,
-    dueInvoices,
   } = usePaymentReceiveFormContext();
 
   // Payment receive entries form context.
   const columns = usePaymentReceiveEntriesColumns();
 
-  // Detarmines takes payment receive invoices entries from customer receivable
-  // invoices or associated payment receive invoices.
-  const computedTableData = useMemo(
-    () => [
-      ...(!isNewMode ? [] || [] : []),
-      ...(isNewMode ? dueInvoices || [] : []),
-    ],
-    [isNewMode, dueInvoices],
-  );
-
   // No results message.
   const noResultsMessage = paymentCustomerId
     ? 'There is no receivable invoices for this customer that can be applied for this payment'
     : 'Please select a customer to display all open invoices for it.';
 
   // Handle update data.
-  const handleUpdateData = useCallback((rows) => {}, []);
+  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
+    const newRows = compose(
+      updateTableRow(rowIndex, columnId, value),
+    )(entries);
+
+    onUpdateData(newRows);
+  }, [entries, onUpdateData]);
 
   // Handle click clear all lines button.
   const handleClickClearAllLines = () => {
-    
+    const fullAmount = safeSumBy(entries, 'payment_amount');
+
+    if (fullAmount > 0) {
+      openAlert('clear-all-lines-payment-receive');
+    }
   };
  
   return (
@@ -53,7 +60,7 @@ export default function PaymentReceiveItemsTable() {
         progressBarLoading={isDueInvoicesFetching}
         className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
         columns={columns}
-        data={[]}
+        data={entries}
         spinnerProps={false}
         payload={{
           errors: [],
@@ -74,3 +81,5 @@ export default function PaymentReceiveItemsTable() {
     </CloudLoadingIndicator>
   );
 }
+
+export default compose(withAlertActions)(PaymentReceiveItemsTable);

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
+import { Money } from 'components';
+import { MoneyFieldCell } from 'components/DataTableCells';
 import { safeSumBy, formattedAmount } from 'utils';
 
 /**
@@ -21,15 +23,14 @@ function IndexCell({ row: { index } }) {
  * Invoice number table cell accessor.
  */
 function InvNumberCellAccessor(row) {
-  const invNumber = row?.invoice_no || row?.id;
-  return `#INV-${invNumber || ''}`;
+  return row?.invoice_no ? `#${row?.invoice_no || ''}` : '-';
 }
 
 /**
  * Balance footer cell.
  */
 function BalanceFooterCell({ rows }) {
-  const total = safeSumBy(rows, 'original.balance');
+  const total = safeSumBy(rows, 'original.amount');
   return <span>{ formattedAmount(total, 'USD') }</span>;
 }
 
@@ -49,6 +50,18 @@ function PaymentAmountFooterCell({ rows }) {
   return <span>{ formattedAmount(totalPaymentAmount, 'USD') }</span>;
 }
 
+
+/**
+ * Mobey table cell.
+ */
+function MoneyTableCell({ value }) {
+  return <Money amount={value} currency={"USD"} />
+}
+
+function DateFooterCell() {
+  return 'Total';
+}
+
 /**
  * Retrieve payment receive form entries columns.
  */
@@ -64,12 +77,14 @@ export const usePaymentReceiveEntriesColumns = () => {
         width: 40,
         disableResizing: true,
         disableSortBy: true,
+        className: 'index'
       },
       {
         Header: formatMessage({ id: 'Date' }),
         id: 'invoice_date',
         accessor: 'invoice_date',
         Cell: InvoiceDateCell,
+        Footer: DateFooterCell,
         disableSortBy: true,
         disableResizing: true,
         width: 250,
@@ -77,14 +92,14 @@ export const usePaymentReceiveEntriesColumns = () => {
       {
         Header: formatMessage({ id: 'invocie_number' }),
         accessor: InvNumberCellAccessor,
-        Cell: 'invoice_no',
         disableSortBy: true,
         className: '',
       },
       {
         Header: formatMessage({ id: 'invoice_amount' }),
-        accessor: 'balance',
+        accessor: 'amount',
         Footer: BalanceFooterCell,
+        Cell: MoneyTableCell,
         disableSortBy: true,
         width: 100,
         className: '',
@@ -93,6 +108,7 @@ export const usePaymentReceiveEntriesColumns = () => {
         Header: formatMessage({ id: 'amount_due' }),
         accessor: 'due_amount',
         Footer: DueAmountFooterCell,
+        Cell: MoneyTableCell,
         disableSortBy: true,
         width: 150,
         className: '',
@@ -100,6 +116,7 @@ export const usePaymentReceiveEntriesColumns = () => {
       {
         Header: formatMessage({ id: 'payment_amount' }),
         accessor: 'payment_amount',
+        Cell: MoneyFieldCell,
         Footer: PaymentAmountFooterCell,
         disableSortBy: true,
         width: 150,

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.js

@@ -1,12 +1,14 @@
 import moment from 'moment';
-import { transformToForm } from 'utils';
+import { transformToForm, safeSumBy } from 'utils';
 
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
-  id: '',
   payment_amount: '',
   invoice_id: '',
+  invoice_no: '',
   due_amount: '',
+  date: '',
+  amount: '',
 };
 
 // Form initial values.
@@ -21,13 +23,61 @@ export const defaultPaymentReceive = {
   entries: [],
 };
 
-export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => {
-  return {
-    ...transformToForm(paymentReceive, defaultPaymentReceive),
-    entries: [
-      ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
-        ...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
-      })),
-    ],
-  };
+/**
+ * 
+ */
+export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
+  ...transformToForm(paymentReceive, defaultPaymentReceive),
+  full_amount: safeSumBy(paymentReceiveEntries, 'payment_amount'),
+  entries: [
+    ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
+      ...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),
+    })),
+  ],
+});
+
+/**
+ * Transformes the given invoices to the new page receivable entries.
+ */
+export const transformInvoicesNewPageEntries = (invoices) => [
+  ...invoices.map((invoice, index) => ({
+    index: index + 1,
+    invoice_id: invoice.id,
+    entry_type: 'invoice',
+    due_amount: invoice.due_amount,
+    date: invoice.invoice_date,
+    amount: invoice.balance,
+    payment_amount: 0,
+    invoice_no: invoice.invoice_no,
+    total_payment_amount: invoice.payment_amount,
+  })),
+];
+
+export const transformEntriesToEditForm = (receivableEntries) => [
+  ...transformInvoicesNewPageEntries([...(receivableEntries || [])]),
+];
+
+export const clearAllPaymentEntries = (entries) => [
+  ...entries.map((entry) => ({ ...entry, payment_amount: 0 })),
+];
+
+export const amountPaymentEntries = (amount, entries) => {
+  let total = amount;
+
+  return entries.map((item) => {
+    const diff = Math.min(item.due_amount, total);
+    total -= Math.max(diff, 0);
+
+    return {
+      ...item,
+      payment_amount: diff,
+    };
+  });
 };
+
+export const fullAmountPaymentEntries = (entries) => {
+  return entries.map((item) => ({
+    ...item,
+    payment_amount: item.due_amount,
+  }));
+}