fix: Payment made filling the form full amount field

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 { 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 {
@@ -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,29 +119,18 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       </FastField>
 
       {/* ------------ Full amount ------------ */}
-      <Field name={'amount'}>
+      <FFormGroup
-        {({
+        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" />}
+        fastField
       >
         <ControlGroup>
           <InputPrependText text={currency_code} />
-              <MoneyInputGroup
+          <FMoneyInputGroup
-                value={value}
+            fastField
-                onChange={(value) => {
+            name={'amount'}
-                  setFieldValue('amount', value);
-                }}
             onBlurValue={onFullAmountBlur}
           />
         </ControlGroup>
@@ -153,9 +146,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
             <Money amount={payableFullAmount} currency={currency_code} />)
           </Button>
         )}
-          </FormGroup>
+      </FFormGroup>
-        )}
-      </Field>
 
       {/* ------------ Payment number ------------ */}
       <FastField name={'payment_number'}>
@@ -203,23 +194,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       </FFormGroup>
 
       {/* ------------ Reference ------------ */}
-      <FastField name={'reference'}>
+      <FFormGroup
-        {({ form, field, meta: { error, touched } }) => (
+        name={'reference'}
-          <FormGroup
         label={<T id={'reference'} />}
         inline={true}
-            className={classNames('form-group--reference', Classes.FILL)}
+        fastField
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
       >
-            <InputGroup
+        <FInputGroup name={'reference'} minimal={true} fastField />
-              intent={inputIntent({ error, touched })}
+      </FFormGroup>
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
     </div>
   );
 }

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),

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)

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 (

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,31 +124,19 @@ export default function PaymentReceiveHeaderFields() {
       </FastField>
 
       {/* ------------ Full amount ------------ */}
-      <Field name={'amount'}>
+      <FFormGroup
-        {({
+        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" />}
+        fastField
       >
         <ControlGroup>
           <InputPrependText text={currency_code} />
-              <MoneyInputGroup
+          <FMoneyInputGroup
-                value={value}
+            name={'amount'}
-                onChange={(value) => {
-                  setFieldValue('amount', value);
-                }}
             onBlurValue={onFullAmountBlur}
+            fastField
           />
         </ControlGroup>
 
@@ -163,9 +151,7 @@ export default function PaymentReceiveHeaderFields() {
             <Money amount={totalDueAmount} currency={currency_code} />)
           </Button>
         )}
-          </FormGroup>
+      </FFormGroup>
-        )}
-      </Field>
 
       {/* ------------ Payment receive no. ------------ */}
       <PaymentReceivePaymentNoField />
@@ -197,23 +183,14 @@ export default function PaymentReceiveHeaderFields() {
       </FFormGroup>
 
       {/* ------------ Reference No. ------------ */}
-      <FastField name={'reference_no'}>
+      <FFormGroup
-        {({ form, field, meta: { error, touched } }) => (
+        name={'reference_no'}
-          <FormGroup
         label={<T id={'reference'} />}
         inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
+        fastField
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
       >
-            <InputGroup
+        <InputGroup name={'reference_no'} minimal={true} fastField />
-              intent={inputIntent({ error, touched })}
+      </FFormGroup>
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
 
       {/*------------ Project name -----------*/}
       <FeatureCan feature={Features.Projects}>

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),