diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx
index 74b1fc6de..bc8c2410b 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx
@@ -106,7 +106,7 @@ function CreditNoteForm({
       open: submitPayload.open,
     };
     // Handle the request success.
-    const onSuccess = (response) => {
+    const onSuccess = () => {
       AppToaster.show({
         message: intl.get(
           isNewMode
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
index 096bd671c..cf2fb74b6 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
@@ -36,6 +36,7 @@ export const defaultEstimate = {
   estimate_date: moment(new Date()).format('YYYY-MM-DD'),
   expiration_date: moment(new Date()).format('YYYY-MM-DD'),
   estimate_number: '',
+  // Holds the estimate number that entered manually only.
   estimate_number_manually: '',
   delivered: '',
   reference: '',
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
index 78c428ba6..536f0081c 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
@@ -43,6 +43,7 @@ export const defaultInvoice = {
   due_date: moment().format('YYYY-MM-DD'),
   delivered: '',
   invoice_no: '',
+  // Holds the invoice number that entered manually only.
   invoice_no_manually: '',
   reference_no: '',
   invoice_message: '',
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx
index 1f3462005..d0e75204e 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx
@@ -35,6 +35,7 @@ import {
   transformToEditForm,
   transformFormToRequest,
   transformErrors,
+  resetFormState,
 } from './utils';
 import { PaymentReceiveSyncIncrementSettingsToForm } from './components';
 
@@ -76,10 +77,12 @@ function PaymentReceiveForm({
         ? transformToEditForm(paymentReceiveEditPage, paymentEntriesEditPage)
         : {
             ...defaultPaymentReceive,
+            // If the auto-increment mode is enabled, take the next payment
+            // number from the settings.
             ...(paymentReceiveAutoIncrement && {
               payment_receive_no: nextPaymentNumber,
-              deposit_account_id: defaultTo(preferredDepositAccount, ''),
             }),
+            deposit_account_id: defaultTo(preferredDepositAccount, ''),
             currency_code: base_currency,
           }),
     }),
@@ -128,7 +131,7 @@ function PaymentReceiveForm({
         history.push('/payment-receives');
       }
       if (submitPayload.resetForm) {
-        resetForm();
+        resetFormState({ resetForm, initialValues, values });
       }
     };
     // Handle request response errors.
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx
index d49613ec0..e60b27142 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx
@@ -10,8 +10,14 @@ export default function PaymentReceiveFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   const handleUpdatePaymentNumber = (settings) => {
+    // Set the payment transaction no. that cames from dialog to the form.
+    // the `payment_receive_no_manually` will be empty except the increment mode is not auto.
     setFieldValue('payment_receive_no', settings.transactionNumber);
-    setFieldValue('payment_receive_no_manually', settings.transactionNumber);
+    setFieldValue('payment_receive_no_manually', '');
+
+    if (settings.incrementMode !== 'auto') {
+      setFieldValue('payment_receive_no_manually', settings.transactionNumber);
+    }
   };
 
   return (
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
index 24d54e251..96ac9462e 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -15,7 +15,7 @@ import { toSafeInteger } from 'lodash';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
 import * as R from 'ramda';
 
-import { FeatureCan, FormattedMessage as T } from '@/components';
+import { FInputGroup, FeatureCan, FormattedMessage as T } from '@/components';
 import { useAutofocus } from '@/hooks';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -83,6 +83,8 @@ const PaymentReceivePaymentNoField = R.compose(
     const handlePaymentNoBlur = (event) => {
       const newValue = event.target.value;
 
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
       if (
         values.payment_receive_no !== newValue &&
         paymentReceiveAutoIncrement
@@ -94,26 +96,28 @@ const PaymentReceivePaymentNoField = R.compose(
           },
         });
       }
+      // Setting the payment number to the form will be manually in case
+      // auto-increment is disable.
       if (!paymentReceiveAutoIncrement) {
         setFieldValue('payment_receive_no', newValue);
         setFieldValue('payment_receive_no_manually', newValue);
       }
     };
     return (
-      <FormGroup
+      <FFormGroup
         name={'payment_receive_no'}
         label={<T id={'payment_receive_no'} />}
         inline={true}
         labelInfo={<FieldRequiredHint />}
-        helperText={<ErrorMessage name="payment_receive_no" />}
       >
         <ControlGroup fill={true}>
-          <InputGroup
+          <FInputGroup
             name={'payment_receive_no'}
             minimal={true}
             value={values.payment_receive_no}
             asyncControl={true}
             onBlur={handlePaymentNoBlur}
+            onChange={() => {}}
           />
           <InputPrependButton
             buttonProps={{
@@ -129,7 +133,7 @@ const PaymentReceivePaymentNoField = R.compose(
             }}
           />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
     );
   },
 );
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.tsx
index bce845975..160072afc 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
@@ -134,14 +134,13 @@ export const PaymentReceiveSyncIncrementSettingsToForm = R.compose(
   }) => {
     const { setFieldValue } = useFormikContext();
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (!paymentReceiveAutoIncrement) return;
 
-      const paymentReceiveNo = transactionNumber(
-        paymentReceiveNumberPrefix,
-        paymentReceiveNextNumber,
+      setFieldValue(
+        'payment_receive_no',
+        transactionNumber(paymentReceiveNumberPrefix, paymentReceiveNextNumber),
       );
-      setFieldValue('payment_receive_no', paymentReceiveNo);
     }, [
       setFieldValue,
       paymentReceiveNumberPrefix,
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
index 66e558054..ec33a1b64 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
@@ -17,7 +17,6 @@ import {
 } from '@/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 
-
 // Default payment receive entry.
 export const defaultPaymentReceiveEntry = {
   index: '',
@@ -37,8 +36,10 @@ export const defaultPaymentReceive = {
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
   payment_receive_no: '',
+  // Holds the payment number that entered manually only.
+  payment_receive_no_manually: '',
   statement: '',
-  full_amount: '',
+  full_amount: '', 
   currency_code: '',
   branch_id: '',
   exchange_rate: 1,
@@ -156,6 +157,8 @@ export const transformFormToRequest = (form) => {
 
   return {
     ...omit(form, ['payment_receive_no_manually', 'payment_receive_no']),
+    // The `payment_receive_no_manually` will be presented just if the auto-increment
+    // is disable, always both attributes hold the same value in manual mode.
     ...(form.payment_receive_no_manually && {
       payment_receive_no: form.payment_receive_no,
     }),
@@ -252,3 +255,13 @@ export const useEstimateIsForeignCustomer = () => {
   );
   return isForeignCustomer;
 };
+
+export const resetFormState = ({ initialValues, values, resetForm }) => {
+  resetForm({
+    values: {
+      // Reset the all values except the brand id.
+      ...initialValues,
+      brand_id: values.brand_id,
+    },
+  });
+};
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
index 4736bcf5b..75a8b9665 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
@@ -33,6 +33,7 @@ import {
   defaultReceipt,
   handleErrors,
   transformFormValuesToRequest,
+  resetFormState,
 } from './utils';
 import { ReceiptSyncIncrementSettingsToForm } from './components';
 
@@ -122,7 +123,7 @@ function ReceiptForm({
         history.push('/receipts');
       }
       if (submitPayload.resetForm) {
-        resetForm();
+        resetFormState();
       }
     };
 
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
index 0749c4942..3abeb7fb1 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
@@ -239,3 +239,14 @@ export const useReceiptIsForeignCustomer = () => {
   );
   return isForeignCustomer;
 };
+
+export const resetFormState = ({ initialValues, values, resetForm }) => {
+  resetForm({
+    values: {
+      // Reset the all values except the warehouse and brand id.
+      ...initialValues,
+      warehouse_id: values.warehouse_id,
+      brand_id: values.brand_id,
+    },
+  });
+};