feat: payment receive of customers invoices.

client/src/containers/Purchases/Bill/withBills.js

@@ -5,7 +5,8 @@ import {
   getBillPaginationMetaFactory,
   getBillTableQueryFactory,
   getVendorPayableBillsFactory,
-  getPayableBillsByPaymentMadeFactory
+  getPayableBillsByPaymentMadeFactory,
+  getPaymentMadeFormPayableBillsFactory
 } from 'store/Bills/bills.selectors';
 
 export default (mapState) => {
@@ -14,6 +15,7 @@ export default (mapState) => {
   const getBillTableQuery = getBillTableQueryFactory();
   const getVendorPayableBills = getVendorPayableBillsFactory();
   const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();
+  const getPaymentMadeFormPayableBills = getPaymentMadeFormPayableBillsFactory();
 
   const mapStateToProps = (state, props) => {
     const tableQuery = getBillTableQuery(state, props);
@@ -28,8 +30,8 @@ export default (mapState) => {
       billsLoading: state.bills.loading,
       nextBillNumberChanged: state.bills.nextBillNumberChanged,
 
-      vendorPayableBills: getVendorPayableBills(state, props),
-      paymentMadePayableBills: getPayableBillsByPaymentMade(state, props),
+      // vendorPayableBills: getVendorPayableBills(state, props),
+      paymentMadePayableBills: getPaymentMadeFormPayableBills(state, props), 
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js

@@ -203,12 +203,10 @@ function PaymentMadeForm({
     },
     [fullAmount, setAmountChangeAlert],
   );
-
   // Handle cancel button of amount change alert.
   const handleCancelAmountChangeAlert = () => {
     setAmountChangeAlert(false);
   };
-
   // Handle confirm button of amount change alert.
   const handleConfirmAmountChangeAlert = () => {
     setFullAmount(amountChangeAlert);
@@ -286,7 +284,6 @@ function PaymentMadeForm({
           values={values}
           onFullAmountChanged={handleFullAmountChange}
         />
-
         <PaymentMadeItemsTable
           fullAmount={fullAmount}
           paymentEntries={values.entries}
@@ -296,7 +293,6 @@ function PaymentMadeForm({
           onClickClearAllLines={handleClearAllLines}
           errors={errors?.entries}
         />
-
         <Alert
           cancelButtonText={<T id={'cancel'} />}
           confirmButtonText={<T id={'ok'} />}

client/src/containers/Purchases/PaymentMades/PaymentMadeFormHeader.js

@@ -51,13 +51,13 @@ function PaymentMadeFormHeader({
   accountsList,
 
   // #withBills
-  vendorPayableBills,
+  paymentMadePayableBills,
 }) {
   const isNewMode = !paymentMadeId;
 
   const payableFullAmount = useMemo(
-    () => sumBy(vendorPayableBills, 'due_amount'),
-    [vendorPayableBills],
+    () => sumBy(paymentMadePayableBills, 'due_amount'),
+    [paymentMadePayableBills],
   );
 
   const handleDateChange = useCallback(
@@ -276,7 +276,7 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
-  withBills(({ vendorPayableBills }) => ({
-    vendorPayableBills,
+  withBills(({ paymentMadePayableBills }) => ({
+    paymentMadePayableBills,
   })),
 )(PaymentMadeFormHeader);

client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTable.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useQuery } from 'react-query';
+import { omit } from 'lodash';
 import { CloudLoadingIndicator } from 'components'
 import PaymentMadeItemsTableEditor from './PaymentMadeItemsTableEditor';
 
@@ -26,7 +27,6 @@ function PaymentMadeItemsTable({
   requestFetchDueBills,
 
   // #withBills
-  vendorPayableBills,
   paymentMadePayableBills,
 
   // #withPaymentMadeDetail
@@ -35,20 +35,14 @@ function PaymentMadeItemsTable({
   const [tableData, setTableData] = useState([]);
   const [localAmount, setLocalAmount] = useState(fullAmount);
 
-  // Payable bills based on selected vendor or specific payment made.
-  const payableBills = useMemo(
-    () =>
-      paymentMadeId
-        ? paymentMadePayableBills
-        : vendorId
-        ? vendorPayableBills
-        : [],
-    [paymentMadeId, paymentMadePayableBills, vendorId, vendorPayableBills],
-  );
   const isNewMode = !paymentMadeId;
 
-  const triggerUpdateData = useCallback((data) => {
-    onUpdateData && onUpdateData(data);
+  const triggerUpdateData = useCallback((entries) => {
+    const _data = entries.map((entry) => ({
+      bill_id: entry?.bill?.id,
+      ...omit(entry, ['bill']),
+    }))
+    onUpdateData && onUpdateData(_data);
   }, [onUpdateData]);
 
   // Merges payment entries with payable bills.
@@ -56,17 +50,16 @@ function PaymentMadeItemsTable({
     const entriesTable = new Map(
       paymentEntries.map((e) => [e.bill_id, e]),
     );
-    return payableBills.map((bill) => {
+    return paymentMadePayableBills.map((bill) => {
       const entry = entriesTable.get(bill.id);
       return {
-        ...bill,
-        bill_id: bill.id,
-        bill_payment_amount: bill.payment_amount,
-        payment_amount: entry ? entry.payment_amount : 0,
-        id: entry ? entry.id : null,
+        bill,
+        id: null,
+        payment_number: 0,
+        ...(entry || {}),
       }
     });
-  }, [paymentEntries, payableBills]);
+  }, [paymentEntries, paymentMadePayableBills]);
 
   useEffect(() => {
     setTableData(computedTableData);
@@ -127,11 +120,10 @@ function PaymentMadeItemsTable({
   );
 }
 
-export default compose( 
+export default compose(
   withPaymentMadeActions,
   withBillActions,
-  withBills(({ vendorPayableBills, paymentMadePayableBills }) => ({
-    vendorPayableBills,
+  withBills(({ paymentMadePayableBills }) => ({
     paymentMadePayableBills,
   })),
 )(PaymentMadeItemsTable);

client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.js

@@ -74,27 +74,27 @@ export default function PaymentMadeItemsTableEditor({
       {
         Header: formatMessage({ id: 'Date' }),
         id: 'bill_date',
-        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
+        accessor: (r) => moment(r.bill?.bill_date).format('YYYY MMM DD'),
         Cell: CellRenderer(EmptyDiv, 'bill_date'),
         disableSortBy: true,
       },
       {
         Header: formatMessage({ id: 'bill_number' }),
-        accessor: (row) => `#${row.bill_number}`,
+        accessor: (row) => `#${row.bill?.bill_number}`,
         Cell: CellRenderer(EmptyDiv, 'bill_number'),
         disableSortBy: true,
         className: 'bill_number',
       },
       {
         Header: formatMessage({ id: 'bill_amount' }),
-        accessor: 'amount',
+        accessor: r => r.bill?.amount,
         Cell: CellRenderer(DivFieldCell, 'amount'),
         disableSortBy: true,
         className: '',
       },
       {
         Header: formatMessage({ id: 'amount_due' }),
-        accessor: 'due_amount',
+        accessor: r => r.bill?.due_amount,
         Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
         disableSortBy: true,
         className: '',
@@ -129,6 +129,8 @@ export default function PaymentMadeItemsTableEditor({
         columnId,
         value,
       );
+      newRows.splice(-1,1); // removes the total row.
+
       setLocalData(newRows);
       onUpdateData && onUpdateData(newRows);
     },