feat: disable auto applying credit payments

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeader.tsx

@@ -29,6 +29,7 @@ function PaymentMadeFormHeader() {
             <span class="big-amount__label">
               <T id={'amount_received'} />
             </span>
+
             <h1 class="big-amount__number">
               <Money amount={totalAmount} currency={currency_code} />
             </h1>

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -2,6 +2,7 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
+import { isEmpty, toSafeInteger } from 'lodash';
 import {
   FormGroup,
   InputGroup,
@@ -13,7 +14,6 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 import { FormattedMessage as T, VendorsSelect } from '@/components';
-import { toSafeInteger } from 'lodash';
 import { CLASSES } from '@/constants/classes';
 
 import {
@@ -115,10 +115,10 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       </FastField>
 
       {/* ------------ Full amount ------------ */}
-      <Field name={'full_amount'}>
+      <Field name={'amount'}>
         {({
           form: {
-            values: { currency_code },
+            values: { currency_code, entries },
           },
           field: { value },
           meta: { error, touched },
@@ -142,15 +142,17 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
               />
             </ControlGroup>
 
-            <Button
-              onClick={handleReceiveFullAmountClick}
-              className={'receive-full-amount'}
-              small={true}
-              minimal={true}
-            >
-              <T id={'receive_full_amount'} /> (
-              <Money amount={payableFullAmount} currency={currency_code} />)
-            </Button>
+            {!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>
         )}
       </Field>

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx

@@ -108,6 +108,15 @@ function PaymentReceiveForm({
     setSubmitting(true);
     const exceededAmount = getExceededAmountFromValues(values);
 
+    // Validates the amount should be bigger than zero.
+    if (values.amount <= 0) {
+      AppToaster.show({
+        message: intl.get('you_cannot_make_payment_with_zero_total_amount'),
+        intent: Intent.DANGER,
+      });
+      setSubmitting(false);
+      return;
+    }
     // Show the confirm popup if the excessed amount bigger than zero and
     // excess confirmation has not been confirmed yet.
     if (exceededAmount > 0 && !isExcessConfirmed) {

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -11,7 +11,7 @@ import {
   Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { toSafeInteger } from 'lodash';
+import { isEmpty, toSafeInteger } from 'lodash';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 
 import {
@@ -128,7 +128,7 @@ export default function PaymentReceiveHeaderFields() {
         {({
           form: {
             setFieldValue,
-            values: { currency_code },
+            values: { currency_code, entries },
           },
           field: { value, onChange },
           meta: { error, touched },
@@ -152,15 +152,17 @@ export default function PaymentReceiveHeaderFields() {
               />
             </ControlGroup>
 
-            <Button
-              onClick={handleReceiveFullAmountClick}
-              className={'receive-full-amount'}
-              small={true}
-              minimal={true}
-            >
-              <T id={'receive_full_amount'} /> (
-              <Money amount={totalDueAmount} currency={currency_code} />)
-            </Button>
+            {!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>
         )}
       </Field>