fix: Payment made filling the form full amount field

2026-02-11 02:10:30 +00:00 · 2024-09-04 17:34:12 +02:00
parent 16f5cb713d
commit 3fcb6fefde
6 changed files with 82 additions and 125 deletions
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
@@ -12,8 +12,13 @@ import {
  Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T, VendorsSelect } from '@/components';
+import { FastField, useFormikContext, ErrorMessage } from 'formik';
+import {
+  FInputGroup,
+  FMoneyInputGroup,
+  FormattedMessage as T,
+  VendorsSelect,
+} from '@/components';
 import { CLASSES } from '@/constants/classes';

 import {
@@ -25,7 +30,6 @@ import {
  Hint,
  Icon,
  VendorDrawerLink,
-  MoneyInputGroup,
 } from '@/components';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -49,7 +53,7 @@ import { accountsFieldShouldUpdate, vendorsFieldShouldUpdate } from './utils';
 function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
  // Formik form context.
  const {
-    values: { entries },
+    values: { entries, currency_code },
    setFieldValue,
  } = useFormikContext();

@@ -115,47 +119,34 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
      </FastField>

      {/* ------------ Full amount ------------ */}
-      <Field name={'amount'}>
-        {({
-          form: {
-            values: { currency_code, entries },
-          },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'full_amount'} />}
-            inline={true}
-            className={('form-group--full-amount', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            labelInfo={<Hint />}
-            helperText={<ErrorMessage name="amount" />}
-          >
-            <ControlGroup>
-              <InputPrependText text={currency_code} />
-              <MoneyInputGroup
-                value={value}
-                onChange={(value) => {
-                  setFieldValue('amount', value);
-                }}
-                onBlurValue={onFullAmountBlur}
-              />
-            </ControlGroup>
+      <FFormGroup
+        name={'amount'}
+        label={<T id={'full_amount'} />}
+        inline={true}
+        labelInfo={<Hint />}
+        fastField
+      >
+        <ControlGroup>
+          <InputPrependText text={currency_code} />
+          <FMoneyInputGroup
+            fastField
+            name={'amount'}
+            onBlurValue={onFullAmountBlur}
+          />
+        </ControlGroup>

-            {!isEmpty(entries) && (
-              <Button
-                onClick={handleReceiveFullAmountClick}
-                className={'receive-full-amount'}
-                small={true}
-                minimal={true}
-              >
-                <T id={'receive_full_amount'} /> (
-                <Money amount={payableFullAmount} currency={currency_code} />)
-              </Button>
-            )}
-          </FormGroup>
+        {!isEmpty(entries) && (
+          <Button
+            onClick={handleReceiveFullAmountClick}
+            className={'receive-full-amount'}
+            small={true}
+            minimal={true}
+          >
+            <T id={'receive_full_amount'} /> (
+            <Money amount={payableFullAmount} currency={currency_code} />)
+          </Button>
        )}
-      </Field>
+      </FFormGroup>

      {/* ------------ Payment number ------------ */}
      <FastField name={'payment_number'}>
@@ -203,23 +194,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
      </FFormGroup>

      {/* ------------ Reference ------------ */}
-      <FastField name={'reference'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference'}
+        label={<T id={'reference'} />}
+        inline={true}
+        fastField
+      >
+        <FInputGroup name={'reference'} minimal={true} fastField />
+      </FFormGroup>
    </div>
  );
 }
--- a/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/utils.tsx
@@ -53,7 +53,6 @@ export const defaultPaymentMade = {

 export const transformToEditForm = (paymentMade, paymentMadeEntries) => {
  const attachments = transformAttachmentsToForm(paymentMade);
-  const appliedAmount = safeSumBy(paymentMadeEntries, 'payment_amount');

  return {
    ...transformToForm(paymentMade, defaultPaymentMade),
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.schema.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.schema.tsx
@@ -9,7 +9,7 @@ const Schema = Yup.object().shape({
  deposit_account_id: Yup.number()
    .required()
    .label(intl.get('deposit_account_')),
-  full_amount: Yup.number().nullable(),
+  amount: Yup.number().required().label('Amount'),
  payment_receive_no: Yup.string()
    .nullable()
    .max(DATATYPES_LENGTH.STRING)
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormAlerts.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormAlerts.tsx
@@ -13,7 +13,7 @@ export default function PaymentReceiveFormAlerts() {
  const handleClearingAllLines = () => {
    const newEntries = clearAllPaymentEntries(entries);
    setFieldValue('entries', newEntries);
-    setFieldValue('full_amount', '');
+    setFieldValue('amount', '');
  };

  return (
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -12,12 +12,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { isEmpty, toSafeInteger } from 'lodash';
-import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
+import { FastField, useFormikContext, ErrorMessage } from 'formik';

 import {
  FeatureCan,
  CustomersSelect,
  FormattedMessage as T,
+  FMoneyInputGroup,
 } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -32,7 +33,6 @@ import {
  AccountsSelect,
  FieldRequiredHint,
  Icon,
-  MoneyInputGroup,
  InputPrependText,
  CustomerDrawerLink,
  Hint,
@@ -64,7 +64,7 @@ export default function PaymentReceiveHeaderFields() {

  // Formik form context.
  const {
-    values: { entries },
+    values: { entries, currency_code },
    setFieldValue,
  } = useFormikContext();

@@ -79,7 +79,7 @@ export default function PaymentReceiveHeaderFields() {
    const fullAmount = safeSumBy(newEntries, 'payment_amount');

    setFieldValue('entries', newEntries);
-    setFieldValue('full_amount', fullAmount);
+    setFieldValue('amount', fullAmount);
  };
  // Handles the full-amount field blur.
  const onFullAmountBlur = (value) => {
@@ -124,48 +124,34 @@ export default function PaymentReceiveHeaderFields() {
      </FastField>

      {/* ------------ Full amount ------------ */}
-      <Field name={'amount'}>
-        {({
-          form: {
-            setFieldValue,
-            values: { currency_code, entries },
-          },
-          field: { value, onChange },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'full_amount'} />}
-            inline={true}
-            className={('form-group--full-amount', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            labelInfo={<Hint />}
-            helperText={<ErrorMessage name="full_amount" />}
-          >
-            <ControlGroup>
-              <InputPrependText text={currency_code} />
-              <MoneyInputGroup
-                value={value}
-                onChange={(value) => {
-                  setFieldValue('amount', value);
-                }}
-                onBlurValue={onFullAmountBlur}
-              />
-            </ControlGroup>
+      <FFormGroup
+        name={'amount'}
+        label={<T id={'full_amount'} />}
+        inline={true}
+        labelInfo={<Hint />}
+        fastField
+      >
+        <ControlGroup>
+          <InputPrependText text={currency_code} />
+          <FMoneyInputGroup
+            name={'amount'}
+            onBlurValue={onFullAmountBlur}
+            fastField
+          />
+        </ControlGroup>

-            {!isEmpty(entries) && (
-              <Button
-                onClick={handleReceiveFullAmountClick}
-                className={'receive-full-amount'}
-                small={true}
-                minimal={true}
-              >
-                <T id={'receive_full_amount'} /> (
-                <Money amount={totalDueAmount} currency={currency_code} />)
-              </Button>
-            )}
-          </FormGroup>
+        {!isEmpty(entries) && (
+          <Button
+            onClick={handleReceiveFullAmountClick}
+            className={'receive-full-amount'}
+            small={true}
+            minimal={true}
+          >
+            <T id={'receive_full_amount'} /> (
+            <Money amount={totalDueAmount} currency={currency_code} />)
+          </Button>
        )}
-      </Field>
+      </FFormGroup>

      {/* ------------ Payment receive no. ------------ */}
      <PaymentReceivePaymentNoField />
@@ -197,23 +183,14 @@ export default function PaymentReceiveHeaderFields() {
      </FFormGroup>

      {/* ------------ Reference No. ------------ */}
-      <FastField name={'reference_no'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference_no'}
+        label={<T id={'reference'} />}
+        inline={true}
+        fastField
+      >
+        <InputGroup name={'reference_no'} minimal={true} fastField />
+      </FFormGroup>

      {/*------------ Project name -----------*/}
      <FeatureCan feature={Features.Projects}>
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/utils.tsx
@@ -71,7 +71,6 @@ export const defaultRequestPayment = {
 */
 export const transformToEditForm = (paymentReceive, paymentReceiveEntries) => ({
  ...transformToForm(paymentReceive, defaultPaymentReceive),
-  full_amount: safeSumBy(paymentReceiveEntries, 'payment_amount'),
  entries: [
    ...paymentReceiveEntries.map((paymentReceiveEntry) => ({
      ...transformToForm(paymentReceiveEntry, defaultPaymentReceiveEntry),