fix: payment receive and made.

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeEntriesTable.js

@@ -1,38 +1,37 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { CloudLoadingIndicator } from 'components';
-import { Button } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
 import { DataTableEditable } from 'components';
 import { usePaymentMadeEntriesTableColumns } from './components';
 
-import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
-import { compose, updateTableRow, safeSumBy } from 'utils';
-import withAlertActions from 'containers/Alert/withAlertActions';
+import { usePaymentMadeInnerContext } from './PaymentMadeInnerProvider';
+import { compose, updateTableRow } from 'utils';
+import { useFormikContext } from 'formik';
 
 /**
  * Payment made items table.
  */
-function PaymentMadeEntriesTable({
+export default function PaymentMadeEntriesTable({
   onUpdateData,
   entries,
-
-  // #withAlertsActions
-  openAlert,
 }) {
-  const { paymentVendorId, isDueBillsFetching } = usePaymentMadeFormContext();
+  // Payment made inner context.
+  const { isNewEntriesFetching } = usePaymentMadeInnerContext();
 
+  // Payment entries table columns.
   const columns = usePaymentMadeEntriesTableColumns();
 
+  // Formik context.
+  const { values: { vendor_id } } = useFormikContext();
+
   // Handle update data.
   const handleUpdateData = useCallback(
     (rowIndex, columnId, value) => {
       const newRows = compose(updateTableRow(rowIndex, columnId, value))(
         entries,
       );
-
       onUpdateData(newRows);
     },
     [onUpdateData, entries],
@@ -40,14 +39,14 @@ function PaymentMadeEntriesTable({
 
   // Detarmines the right no results message before selecting vendor and aftering
   // selecting vendor id.
-  const noResultsMessage = paymentVendorId
+  const noResultsMessage = vendor_id
     ? '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={isDueBillsFetching}>
+    <CloudLoadingIndicator isLoading={isNewEntriesFetching}>
       <DataTableEditable
-        progressBarLoading={isDueBillsFetching}
+        progressBarLoading={isNewEntriesFetching}
         className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
         columns={columns}
         data={entries}
@@ -61,6 +60,4 @@ function PaymentMadeEntriesTable({
       />
     </CloudLoadingIndicator>
   );
-}
-
-export default compose(withAlertActions)(PaymentMadeEntriesTable);
+}

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormBody.js

@@ -17,7 +17,6 @@ export default function PaymentMadeFormBody() {
           />
         )}
       </FastField>
-
     </div>
   )
 }

client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeInnerProvider.js

@@ -1,8 +1,8 @@
 import { useFormikContext } from 'formik';
-import { isEmpty } from 'lodash';
 import React, { createContext, useContext, useEffect } from 'react';
 import { usePaymentMadeNewPageEntries } from 'hooks/query';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { transformToNewPageEntries } from './utils';
 
 const PaymentMadeInnerContext = createContext();
 
@@ -10,6 +10,7 @@ const PaymentMadeInnerContext = createContext();
  * Payment made inner form provider.
  */
 function PaymentMadeInnerProvider({ ...props }) {
+  // Payment made form context.
   const { isNewMode } = usePaymentMadeFormContext();
 
   // Formik context.
@@ -27,16 +28,16 @@ function PaymentMadeInnerProvider({ ...props }) {
   });
 
   useEffect(() => {
-    if (!isNewEntriesFetching && !isEmpty(newPageEntries)) {
-      setFieldValue('entries', newPageEntries)
+    if (!isNewEntriesFetching && newPageEntries && isNewMode) {
+      setFieldValue('entries', transformToNewPageEntries(newPageEntries));
     }
-  }, [isNewEntriesFetching, newPageEntries, setFieldValue]);
+  }, [isNewEntriesFetching, newPageEntries, isNewMode, setFieldValue]);
 
   // Provider payload.
   const provider = {
     newPageEntries,
     isNewEntriesLoading,
-    isNewEntriesFetching
+    isNewEntriesFetching,
   };
 
   return <PaymentMadeInnerContext.Provider value={provider} {...props} />;

client/src/containers/Purchases/PaymentMades/PaymentForm/components.js

@@ -72,6 +72,7 @@ export function usePaymentMadeEntriesTableColumns() {
         Cell: BillDateCell,
         disableSortBy: true,
         width: 250,
+        className: 'bill_date',
       },
       {
         Header: formatMessage({ id: 'bill_number' }),
@@ -85,7 +86,7 @@ export function usePaymentMadeEntriesTableColumns() {
         Cell: MoneyTableCell,
         Footer: AmountFooterCell,
         disableSortBy: true,
-        className: '',
+        className: 'amount',
       },
       {
         Header: formatMessage({ id: 'amount_due' }),
@@ -93,7 +94,7 @@ export function usePaymentMadeEntriesTableColumns() {
         Cell: MoneyTableCell,
         Footer: DueAmountFooterCell,
         disableSortBy: true,
-        className: '',
+        className: 'due_amount',
       },
       {
         Header: formatMessage({ id: 'payment_amount' }),
@@ -101,7 +102,7 @@ export function usePaymentMadeEntriesTableColumns() {
         Cell: MoneyFieldCell,
         Footer: PaymentAmountFooterCell,
         disableSortBy: true,
-        className: '',
+        className: 'payment_amount',
       },
     ],
     [formatMessage],

client/src/containers/Purchases/PaymentMades/PaymentForm/utils.js

@@ -32,7 +32,18 @@ export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
     entries: [
       ...paymentMadeEntries.map((paymentMadeEntry) => ({
         ...transformToForm(paymentMadeEntry, defaultPaymentMadeEntry),
+        payment_amount: paymentMadeEntry.payment_amount || '',
       })),
     ],
   };
 };
+
+/**
+ * Transform the new page entries.
+ */
+export const transformToNewPageEntries = (entries) => {
+  return entries.map((entry) => ({
+    ...transformToForm(entry, defaultPaymentMadeEntry),
+    payment_amount: '',
+  }));
+}