fix: quick payment received and payment made form initial values

PaymentReceives and BillsPayments Controllers expect 'amount' parameter, but webapp sends 'payment_amount'

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx

@@ -3,15 +3,14 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { pick } from 'lodash';
-
+import { omit } from 'lodash';
 import { AppToaster } from '@/components';
 import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultPaymentMade, transformErrors } from './utils';
+import { defaultPaymentMade, transformBillToForm, transformErrors } from './utils';
 import { compose } from '@/utils';
 
 /**
@@ -21,31 +20,24 @@ function QuickPaymentMadeForm({
   // #withDialogActions
   closeDialog,
 }) {
-  
-  const {
-    bill,
-    dialogName,
-    createPaymentMadeMutate,
-  } = useQuickPaymentMadeContext();
+  const { bill, dialogName, createPaymentMadeMutate } =
+    useQuickPaymentMadeContext();
 
-  // Initial form values
+  // Initial form values.
   const initialValues = {
     ...defaultPaymentMade,
-    ...bill,
+    ...transformBillToForm(bill),
   };
-
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
-    const entries = [values]
-      .filter((entry) => entry.id && entry.payment_amount)
-      .map((entry) => ({
-        bill_id: entry.id,
-        ...pick(entry, ['payment_amount']),
-      }));
-
+    const entries = [
+      {
+        payment_amount: values.amount,
+        bill_id: values.bill_id,
+      },
+    ];
     const form = {
-      ...values,
-      vendor_id: values?.vendor?.id,
+      ...omit(values, ['bill_id']),
       entries,
     };
 

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx

@@ -124,7 +124,7 @@ function QuickPaymentMadeFormFields({
         </Col>
       </Row>
       {/*------------ Amount Received -----------*/}
-      <FastField name={'payment_amount'}>
+      <FastField name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -135,7 +135,7 @@ function QuickPaymentMadeFormFields({
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--payment_amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_amount" />}
+            helperText={<ErrorMessage name="amount" />}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -144,7 +144,7 @@ function QuickPaymentMadeFormFields({
                 value={value}
                 minimal={true}
                 onChange={(amount) => {
-                  setFieldValue('payment_amount', amount);
+                  setFieldValue('amount', amount);
                 }}
                 intent={inputIntent({ error, touched })}
                 inputRef={(ref) => (paymentMadeFieldRef.current = ref)}

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DialogContent } from '@/components';
 import {
   useBill,
@@ -11,7 +11,6 @@ import { Features } from '@/constants';
 import { useFeatureCan } from '@/hooks/state';
 import { pick } from 'lodash';
 
-
 const QuickPaymentMadeContext = React.createContext();
 
 /**
@@ -40,13 +39,14 @@ function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) {
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const paymentBill = useMemo(
+    () => pick(bill, ['id', 'due_amount', 'vendor_id', 'currency_code']),
+    [bill],
+  );
+
   // State provider.
   const provider = {
-    bill: {
-      ...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']),
-      vendor_id: bill?.vendor?.display_name,
-      payment_amount: bill?.due_amount,
-    },
+    bill: paymentBill,
     accounts,
     branches,
     dialogName,

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx

@@ -2,24 +2,25 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
+import { useFormikContext } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
-import { useFormikContext } from 'formik';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {
+  bill_id: '',
   vendor_id: '',
   payment_account_id: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference: '',
   payment_number: '',
+  amount: '',
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ bill_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -58,3 +59,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformBillToForm = (bill) => {
+  return {
+    ...pick(bill, ['vendor_id', 'currency_code']),
+    amount: bill.due_amount,
+    bill_id: bill.id,
+  };
+}

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { pick, defaultTo, omit } from 'lodash';
+import { defaultTo, omit } from 'lodash';
 
 import { AppToaster } from '@/components';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
@@ -12,7 +12,11 @@ import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
-import { defaultInitialValues, transformErrors } from './utils';
+import {
+  defaultInitialValues,
+  transformErrors,
+  transformInvoiceToForm,
+} from './utils';
 import { compose, transactionNumber } from '@/utils';
 
 /**
@@ -26,14 +30,10 @@ function QuickPaymentReceiveForm({
   paymentReceiveAutoIncrement,
   paymentReceiveNumberPrefix,
   paymentReceiveNextNumber,
-  preferredDepositAccount
+  preferredDepositAccount,
 }) {
-  
-  const {
-    dialogName,
-    invoice,
-    createPaymentReceiveMutate,
-  } = useQuickPaymentReceiveContext();
+  const { dialogName, invoice, createPaymentReceiveMutate } =
+    useQuickPaymentReceiveContext();
 
   // Payment receive number.
   const nextPaymentNumber = transactionNumber(
@@ -48,24 +48,22 @@ function QuickPaymentReceiveForm({
       payment_receive_no: nextPaymentNumber,
     }),
     deposit_account_id: defaultTo(preferredDepositAccount, ''),
-    ...invoice,
+    ...transformInvoiceToForm(invoice),
   };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
-    const entries = [values]
-      .filter((entry) => entry.id && entry.payment_amount)
-      .map((entry) => ({
-        invoice_id: entry.id,
-        ...pick(entry, ['payment_amount']),
-      }));
-
+    const entries = [
+      {
+        invoice_id: values.invoice_id,
+        payment_amount: values.amount,
+      },
+    ];
     const form = {
-      ...omit(values, ['payment_receive_no']),
+      ...omit(values, ['payment_receive_no', 'invoice_id']),
       ...(!paymentReceiveAutoIncrement && {
         payment_receive_no: values.payment_receive_no,
       }),
-      customer_id: values.customer.id,
       entries,
     };
 

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx

@@ -128,7 +128,7 @@ function QuickPaymentReceiveFormFields({
         </Col>
       </Row>
       {/*------------ Amount Received -----------*/}
-      <FastField name={'payment_amount'}>
+      <FastField name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -139,7 +139,7 @@ function QuickPaymentReceiveFormFields({
             labelInfo={<FieldRequiredHint />}
             className={classNames('form-group--payment_amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_amount" />}
+            helperText={<ErrorMessage name="amount" />}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -148,7 +148,7 @@ function QuickPaymentReceiveFormFields({
                 value={value}
                 minimal={true}
                 onChange={(amount) => {
-                  setFieldValue('payment_amount', amount);
+                  setFieldValue('amount', amount);
                 }}
                 intent={inputIntent({ error, touched })}
                 inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useContext, createContext } from 'react';
+import React, { useContext, createContext, useMemo } from 'react';
 import { pick } from 'lodash';
 import { DialogContent } from '@/components';
 import { Features } from '@/constants';
@@ -47,15 +47,16 @@ function QuickPaymentReceiveFormProvider({
     isSuccess: isBranchesSuccess,
   } = useBranches(query, { enabled: isBranchFeatureCan });
 
+  const invoicePayment = useMemo(
+    () => pick(invoice, ['id', 'due_amount', 'customer_id', 'currency_code']),
+    [invoice],
+  );
+
   // State provider.
   const provider = {
     accounts,
     branches,
-    invoice: {
-      ...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']),
-      customer_id: invoice?.customer?.display_name,
-      payment_amount: invoice.due_amount,
-    },
+    invoice: invoicePayment,
     isAccountsLoading,
     isSettingsLoading,
     isBranchesSuccess,

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { first } from 'lodash';
+import { first, pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from '@/components';
 
@@ -10,15 +10,16 @@ import { useFormikContext } from 'formik';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 
 export const defaultInitialValues = {
+  invoice_id: '',
   customer_id: '',
   deposit_account_id: '',
   payment_receive_no: '',
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
+  amount: '',
   // statement: '',
   exchange_rate: 1,
   branch_id: '',
-  entries: [{ invoice_id: '', payment_amount: '' }],
 };
 
 export const transformErrors = (errors, { setFieldError }) => {
@@ -44,7 +45,9 @@ export const transformErrors = (errors, { setFieldError }) => {
   }
   if (getError('PAYMENT_ACCOUNT_CURRENCY_INVALID')) {
     AppToaster.show({
-      message: intl.get('payment_Receive.error.payment_account_currency_invalid'),
+      message: intl.get(
+        'payment_Receive.error.payment_account_currency_invalid',
+      ),
       intent: Intent.DANGER,
     });
   }
@@ -64,3 +67,11 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
+
+export const transformInvoiceToForm = (invoice) => {
+  return {
+    ...pick(invoice, ['customer_id', 'currency_code']),
+    amount: invoice.due_amount,
+    invoice_id: invoice.id,
+  };
+};