diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx index 49b51a32b..503544f04 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx +++ b/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, }; diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx index d5e875519..bcb0f473d 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx @@ -124,7 +124,7 @@ function QuickPaymentMadeFormFields({ {/*------------ Amount Received -----------*/} - + {({ form: { values, setFieldValue }, field: { value }, @@ -135,7 +135,7 @@ function QuickPaymentMadeFormFields({ labelInfo={} className={classNames('form-group--payment_amount', CLASSES.FILL)} intent={inputIntent({ error, touched })} - helperText={} + helperText={} > @@ -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)} diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx index cc444ab6b..b79a31e89 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx +++ b/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, diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx index b90e21da8..03470ff50 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx +++ b/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, + }; +} diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx index 082707f26..b2326c525 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx +++ b/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, }; diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx index b5ebcd358..0825b1cf9 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx @@ -128,7 +128,7 @@ function QuickPaymentReceiveFormFields({ {/*------------ Amount Received -----------*/} - + {({ form: { values, setFieldValue }, field: { value }, @@ -139,7 +139,7 @@ function QuickPaymentReceiveFormFields({ labelInfo={} className={classNames('form-group--payment_amount', CLASSES.FILL)} intent={inputIntent({ error, touched })} - helperText={} + helperText={} > @@ -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)} diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx index 0c17e7ee1..64438f4ed 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx +++ b/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, diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx index 673ad9f49..c6e7a8bb9 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx +++ b/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, + }; +};