fix: auto-increment transaction field

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx

@@ -26,6 +26,7 @@ import {
   InputPrependButton,
   CurrencySelectList,
   FormattedMessage as T,
+  FInputGroup,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
@@ -52,11 +53,9 @@ const MakeJournalTransactionNoField = R.compose(
   }) => {
     const { setFieldValue, values } = useFormikContext();
 
-    // Handle journal number change.
     const handleJournalNumberChange = () => {
       openDialog('journal-number-form');
     };
-    // Handle journal number blur.
     const handleJournalNoBlur = (event) => {
       const newValue = event.target.value;
 
@@ -86,13 +85,16 @@ const MakeJournalTransactionNoField = R.compose(
         }
         fill={true}
         inline={true}
+        fastField={true}
       >
         <ControlGroup fill={true}>
-          <InputGroup
+          <FInputGroup
+            name={'journal_number'}
             fill={true}
             value={values.journal_number}
             asyncControl={true}
             onBlur={handleJournalNoBlur}
+            fastField={true}
           />
           <InputPrependButton
             buttonProps={{

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -10,7 +10,7 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 
 import { CLASSES } from '@/constants/classes';
 import {
@@ -21,6 +21,7 @@ import {
   FormattedMessage as T,
   CustomerDrawerLink,
   FFormGroup,
+  FInputGroup,
 } from '@/components';
 import { customerNameFieldShouldUpdate } from './utils';
 
@@ -85,7 +86,8 @@ const CreditNoteTransactionNoField = R.compose(
         inline={true}
       >
         <ControlGroup fill={true}>
-          <InputGroup
+          <FInputGroup
+            name={'credit_note_number'}
             minimal={true}
             value={values.credit_note_number}
             asyncControl={true}

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import * as R from 'ramda';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import {
@@ -10,11 +11,19 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import * as R from 'ramda';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
 
-import { FeatureCan, FFormGroup, FormattedMessage as T } from '@/components';
+import {
-
+  FeatureCan,
+  FFormGroup,
+  FInputGroup,
+  FormattedMessage as T,
+  CustomerSelectField,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  CustomerDrawerLink,
+} from '@/components';
 import {
   momentFormatter,
   tansformDateValue,
@@ -24,24 +33,20 @@ import {
 import { customersFieldShouldUpdate } from './utils';
 import { CLASSES } from '@/constants/classes';
 import { Features } from '@/constants';
-import {
-  CustomerSelectField,
-  FieldRequiredHint,
-  Icon,
-  InputPrependButton,
-  CustomerDrawerLink,
-} from '@/components';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
+
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
   EstimateExchangeRateInputField,
   EstimateProjectSelectButton,
 } from './components';
-
 import { useEstimateFormContext } from './EstimateFormProvider';
 
+/**
+ * Estimate number field of estimate form.
+ */
 const EstimateFormEstimateNumberField = R.compose(
   withDialogActions,
   withSettings(({ estimatesSettings }) => ({
@@ -86,11 +91,12 @@ const EstimateFormEstimateNumberField = R.compose(
         inline={true}
       >
         <ControlGroup fill={true}>
-          <InputGroup
+          <FInputGroup
+            name={'estimate_number'}
             minimal={true}
-            value={values.estimate_number}
             asyncControl={true}
             onBlur={handleEstimateNoBlur}
+            fastField={true}
           />
           <InputPrependButton
             buttonProps={{
@@ -154,13 +160,12 @@ export default function EstimateFormHeader() {
         )}
       </FastField>
 
-      {/* ----------- Exchange rate ----------- */}
+      {/* ----------- Exchange Rate ----------- */}
       <EstimateExchangeRateInputField
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
-
+      {/* ----------- Estimate Date ----------- */}
-      {/* ----------- Estimate date ----------- */}
       <FastField name={'estimate_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup

packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx

@@ -9,6 +9,7 @@ import { useCurrentOrganization } from '@/hooks/state';
 import { useEstimateIsForeignCustomer } from './utils';
 import withSettings from '@/containers/Settings/withSettings';
 import { transactionNumber } from '@/utils';
+import { useUpdateEffect } from '@/hooks';
 
 /**
  * Estimate exchange rate input field.
@@ -54,7 +55,7 @@ export const EstimateIncrementSyncSettingsToForm = R.compose(
 )(({ estimateNextNumber, estimateNumberPrefix, estimateAutoIncrement }) => {
   const { setFieldValue } = useFormikContext();
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     if (!estimateAutoIncrement) return null;
 
     const estimateNo = transactionNumber(
@@ -62,7 +63,12 @@ export const EstimateIncrementSyncSettingsToForm = R.compose(
       estimateNextNumber,
     );
     setFieldValue('estimate_number', estimateNo);
-  }, [setFieldValue, estimateNumberPrefix, estimateNextNumber]);
+  }, [
+    setFieldValue,
+    estimateNumberPrefix,
+    estimateNextNumber,
+    estimateAutoIncrement,
+  ]);
 
   return null;
 });

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

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import React, { useMemo } from 'react';
+import { sumBy, isEmpty, defaultTo } from 'lodash';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { Formik, Form } from 'formik';
-import { omit, sumBy, pick, isEmpty, defaultTo } from 'lodash';
-import { Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
+import { Intent } from '@blueprintjs/core';
 
 import '@/style/pages/PaymentReceive/PageForm.scss';
 
@@ -69,7 +69,6 @@ function PaymentReceiveForm({
     paymentReceiveNumberPrefix,
     paymentReceiveNextNumber,
   );
-
   // Form initial values.
   const initialValues = useMemo(
     () => ({
@@ -114,7 +113,8 @@ function PaymentReceiveForm({
     const form = transformFormToRequest(values);
 
     // Handle request response success.
-    const onSaved = (response) => {
+    const onSaved = () => {
+      setSubmitting(false);
       AppToaster.show({
         message: intl.get(
           paymentReceiveId
@@ -123,7 +123,6 @@ function PaymentReceiveForm({
         ),
         intent: Intent.SUCCESS,
       });
-      setSubmitting(false);
 
       if (submitPayload.redirect) {
         history.push('/payment-receives');

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

@@ -109,6 +109,7 @@ const PaymentReceivePaymentNoField = R.compose(
       >
         <ControlGroup fill={true}>
           <InputGroup
+            name={'payment_receive_no'}
             minimal={true}
             value={values.payment_receive_no}
             asyncControl={true}
@@ -136,7 +137,7 @@ const PaymentReceivePaymentNoField = R.compose(
 /**
  * Payment receive header fields.
  */
-export default function PaymentReceiveHeaderFields({}) {
+export default function PaymentReceiveHeaderFields() {
   // Payment receive form context.
   const { customers, accounts, projects, isNewMode } =
     usePaymentReceiveFormContext();

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -14,6 +14,8 @@ import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import * as R from 'ramda';
 
 import { CLASSES } from '@/constants/classes';
+import { ACCOUNT_TYPE } from '@/constants/accountTypes';
+import { Features } from '@/constants';
 import {
   FFormGroup,
   AccountsSelect,
@@ -24,8 +26,8 @@ import {
   CustomerDrawerLink,
   FormattedMessage as T,
   FeatureCan,
+  FInputGroup,
 } from '@/components';
-import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
   momentFormatter,
@@ -39,10 +41,13 @@ import {
   ReceiptExchangeRateInputField,
   ReceiptProjectSelectButton,
 } from './components';
-import { Features } from '@/constants';
+
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
+/**
+ * Receipt number field of receipt form.
+ */
 const ReceiptFormReceiptNumberField = R.compose(
   withDialogActions,
   withSettings(({ receiptSettings }) => ({
@@ -58,9 +63,9 @@ const ReceiptFormReceiptNumberField = R.compose(
   }) => {
     const { values, setFieldValue } = useFormikContext();
 
-    const handleReceiptNumberChange = useCallback(() => {
+    const handleReceiptNumberChange = () => {
       openDialog('receipt-number-form', {});
-    }, [openDialog]);
+    };
 
     const handleReceiptNoBlur = (event) => {
       const newValue = event.target.value;
@@ -87,7 +92,8 @@ const ReceiptFormReceiptNumberField = R.compose(
         labelInfo={<FieldRequiredHint />}
       >
         <ControlGroup fill={true}>
-          <InputGroup
+          <FInputGroup
+            name={'receipt_number'}
             minimal={true}
             value={values.receipt_number}
             asyncControl={true}