Merge pull request #661 from bigcapitalhq/fix-payment-made-full-amount

fix: Payment made filling the form full amount field
bigcapitalhq · Sep 4, 2024 · c032a5d · c032a5d
2 parents 16f5cb7 + 3fcb6fe
commit c032a5d
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 125 deletions.
diff --git a/.../webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx b/.../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>
   );
 }

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

diff --git a/...pp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveForm.schema.tsx b/...pp/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)

diff --git a/...app/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormAlerts.tsx b/...app/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 (

diff --git a/...p/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/...p/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}>

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