fix: Payment made filling the form full amount field

This commit is contained in:
Ahmed Bouhuolia
2024-09-04 17:34:12 +02:00
parent 16f5cb713d
commit 3fcb6fefde
6 changed files with 82 additions and 125 deletions

View File

@@ -12,8 +12,13 @@ import {
Button, Button,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FastField, Field, useFormikContext, ErrorMessage } from 'formik'; import { FastField, useFormikContext, ErrorMessage } from 'formik';
import { FormattedMessage as T, VendorsSelect } from '@/components'; import {
FInputGroup,
FMoneyInputGroup,
FormattedMessage as T,
VendorsSelect,
} from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
@@ -25,7 +30,6 @@ import {
Hint, Hint,
Icon, Icon,
VendorDrawerLink, VendorDrawerLink,
MoneyInputGroup,
} from '@/components'; } from '@/components';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider'; import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -49,7 +53,7 @@ import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
function PaymentMadeFormHeaderFields({ organization: { base_currency } }) { function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
// Formik form context. // Formik form context.
const { const {
values: { entries }, values: { entries, currency_code },
setFieldValue, setFieldValue,
} = useFormikContext(); } = useFormikContext();
@@ -115,47 +119,34 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
</FastField> </FastField>
{/* ------------ Full amount ------------ */} {/* ------------ Full amount ------------ */}
<Field name={'amount'}> <FFormGroup
{({ name={'amount'}
form: { label={<T id={'full_amount'} />}
values: { currency_code, entries }, inline={true}
}, labelInfo={<Hint />}
field: { value }, fastField
meta: { error, touched }, >
}) => ( <ControlGroup>
<FormGroup <InputPrependText text={currency_code} />
label={<T id={'full_amount'} />} <FMoneyInputGroup
inline={true} fastField
className={('form-group--full-amount', Classes.FILL)} name={'amount'}
intent={inputIntent({ error, touched })} onBlurValue={onFullAmountBlur}
labelInfo={<Hint />} />
helperText={<ErrorMessage name="amount" />} </ControlGroup>
>
<ControlGroup>
<InputPrependText text={currency_code} />
<MoneyInputGroup
value={value}
onChange={(value) => {
setFieldValue('amount', value);
}}
onBlurValue={onFullAmountBlur}
/>
</ControlGroup>
{!isEmpty(entries) && ( {!isEmpty(entries) && (
<Button <Button
onClick={handleReceiveFullAmountClick} onClick={handleReceiveFullAmountClick}
className={'receive-full-amount'} className={'receive-full-amount'}
small={true} small={true}
minimal={true} minimal={true}
> >
<T id={'receive_full_amount'} /> ( <T id={'receive_full_amount'} /> (
<Money amount={payableFullAmount} currency={currency_code} />) <Money amount={payableFullAmount} currency={currency_code} />)
</Button> </Button>
)}
</FormGroup>
)} )}
</Field> </FFormGroup>
{/* ------------ Payment number ------------ */} {/* ------------ Payment number ------------ */}
<FastField name={'payment_number'}> <FastField name={'payment_number'}>
@@ -203,23 +194,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
</FFormGroup> </FFormGroup>
{/* ------------ Reference ------------ */} {/* ------------ Reference ------------ */}
<FastField name={'reference'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'reference'}
<FormGroup label={<T id={'reference'} />}
label={<T id={'reference'} />} inline={true}
inline={true} fastField
className={classNames('form-group--reference', Classes.FILL)} >
intent={inputIntent({ error, touched })} <FInputGroup name={'reference'} minimal={true} fastField />
helperText={<ErrorMessage name="reference" />} </FFormGroup>
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

View File

@@ -53,7 +53,6 @@ export const defaultPaymentMade = {
export const transformToEditForm = (paymentMade, paymentMadeEntries) => { export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
const attachments = transformAttachmentsToForm(paymentMade); const attachments = transformAttachmentsToForm(paymentMade);
const appliedAmount = safeSumBy(paymentMadeEntries, 'payment_amount');
return { return {
...transformToForm(paymentMade, defaultPaymentMade), ...transformToForm(paymentMade, defaultPaymentMade),

View File

@@ -9,7 +9,7 @@ const Schema = Yup.object().shape({
deposit_account_id: Yup.number() deposit_account_id: Yup.number()
.required() .required()
.label(intl.get('deposit_account_')), .label(intl.get('deposit_account_')),
full_amount: Yup.number().nullable(), amount: Yup.number().required().label('Amount'),
payment_receive_no: Yup.string() payment_receive_no: Yup.string()
.nullable() .nullable()
.max(DATATYPES_LENGTH.STRING) .max(DATATYPES_LENGTH.STRING)

View File

@@ -13,7 +13,7 @@ export default function PaymentReceiveFormAlerts() {
const handleClearingAllLines = () => { const handleClearingAllLines = () => {
const newEntries = clearAllPaymentEntries(entries); const newEntries = clearAllPaymentEntries(entries);
setFieldValue('entries', newEntries); setFieldValue('entries', newEntries);
setFieldValue('full_amount', ''); setFieldValue('amount', '');
}; };
return ( return (

View File

@@ -12,12 +12,13 @@ import {
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { isEmpty, toSafeInteger } from 'lodash'; import { isEmpty, toSafeInteger } from 'lodash';
import { FastField, Field, useFormikContext, ErrorMessage } from 'formik'; import { FastField, useFormikContext, ErrorMessage } from 'formik';
import { import {
FeatureCan, FeatureCan,
CustomersSelect, CustomersSelect,
FormattedMessage as T, FormattedMessage as T,
FMoneyInputGroup,
} from '@/components'; } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
@@ -32,7 +33,6 @@ import {
AccountsSelect, AccountsSelect,
FieldRequiredHint, FieldRequiredHint,
Icon, Icon,
MoneyInputGroup,
InputPrependText, InputPrependText,
CustomerDrawerLink, CustomerDrawerLink,
Hint, Hint,
@@ -64,7 +64,7 @@ export default function PaymentReceiveHeaderFields() {
// Formik form context. // Formik form context.
const { const {
values: { entries }, values: { entries, currency_code },
setFieldValue, setFieldValue,
} = useFormikContext(); } = useFormikContext();
@@ -79,7 +79,7 @@ export default function PaymentReceiveHeaderFields() {
const fullAmount = safeSumBy(newEntries, 'payment_amount'); const fullAmount = safeSumBy(newEntries, 'payment_amount');
setFieldValue('entries', newEntries); setFieldValue('entries', newEntries);
setFieldValue('full_amount', fullAmount); setFieldValue('amount', fullAmount);
}; };
// Handles the full-amount field blur. // Handles the full-amount field blur.
const onFullAmountBlur = (value) => { const onFullAmountBlur = (value) => {
@@ -124,48 +124,34 @@ export default function PaymentReceiveHeaderFields() {
</FastField> </FastField>
{/* ------------ Full amount ------------ */} {/* ------------ Full amount ------------ */}
<Field name={'amount'}> <FFormGroup
{({ name={'amount'}
form: { label={<T id={'full_amount'} />}
setFieldValue, inline={true}
values: { currency_code, entries }, labelInfo={<Hint />}
}, fastField
field: { value, onChange }, >
meta: { error, touched }, <ControlGroup>
}) => ( <InputPrependText text={currency_code} />
<FormGroup <FMoneyInputGroup
label={<T id={'full_amount'} />} name={'amount'}
inline={true} onBlurValue={onFullAmountBlur}
className={('form-group--full-amount', CLASSES.FILL)} fastField
intent={inputIntent({ error, touched })} />
labelInfo={<Hint />} </ControlGroup>
helperText={<ErrorMessage name="full_amount" />}
>
<ControlGroup>
<InputPrependText text={currency_code} />
<MoneyInputGroup
value={value}
onChange={(value) => {
setFieldValue('amount', value);
}}
onBlurValue={onFullAmountBlur}
/>
</ControlGroup>
{!isEmpty(entries) && ( {!isEmpty(entries) && (
<Button <Button
onClick={handleReceiveFullAmountClick} onClick={handleReceiveFullAmountClick}
className={'receive-full-amount'} className={'receive-full-amount'}
small={true} small={true}
minimal={true} minimal={true}
> >
<T id={'receive_full_amount'} /> ( <T id={'receive_full_amount'} /> (
<Money amount={totalDueAmount} currency={currency_code} />) <Money amount={totalDueAmount} currency={currency_code} />)
</Button> </Button>
)}
</FormGroup>
)} )}
</Field> </FFormGroup>
{/* ------------ Payment receive no. ------------ */} {/* ------------ Payment receive no. ------------ */}
<PaymentReceivePaymentNoField /> <PaymentReceivePaymentNoField />
@@ -197,23 +183,14 @@ export default function PaymentReceiveHeaderFields() {
</FFormGroup> </FFormGroup>
{/* ------------ Reference No. ------------ */} {/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'reference_no'}
<FormGroup label={<T id={'reference'} />}
label={<T id={'reference'} />} inline={true}
inline={true} fastField
className={classNames('form-group--reference', CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <InputGroup name={'reference_no'} minimal={true} fastField />
helperText={<ErrorMessage name="reference" />} </FFormGroup>
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ Project name -----------*/} {/*------------ Project name -----------*/}
<FeatureCan feature={Features.Projects}> <FeatureCan feature={Features.Projects}>

View File

@@ -71,7 +71,6 @@ export const defaultRequestPayment = {
*/ */
export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({ export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
...transformToForm(paymentReceive, defaultPaymentReceive), ...transformToForm(paymentReceive, defaultPaymentReceive),
full_amount: safeSumBy(paymentReceiveEntries, 'payment_amount'),
entries: [ entries: [
...paymentReceiveEntries.map((paymentReceiveEntry) => ({ ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry), ...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),