fix: auto-increment settings

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

@@ -118,7 +118,6 @@ function MakeJournalEntriesForm({
       entries: R.compose(orderingLinesIndexes)(entries),
       publish: submitPayload.publish,
     };
-
     // Handle the request error.
     const handleError = ({
       response: {
@@ -149,7 +148,6 @@ function MakeJournalEntriesForm({
         resetForm();
       }
     };
-
     if (isNewMode) {
       createJournalMutate(form).then(handleSuccess).catch(handleError);
     } else {

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

@@ -6,14 +6,14 @@ import {
   Position,
   ControlGroup,
 } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
+import * as R from 'ramda';
 import classNames from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
 import {
   momentFormatter,
-  compose,
   inputIntent,
   handleDateChange,
   tansformDateValue,
@@ -34,37 +34,89 @@ import { currenciesFieldShouldUpdate } from './utils';
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
+/**
+ * Journal number field of make journal form.
+ */
+const MakeJournalTransactionNoField = R.compose(
+  withDialogActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+  })),
+)(
+  ({
+    // #withDialog
+    openDialog,
+
+    // #withSettings
+    journalAutoIncrement,
+  }) => {
+    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;
+
+      if (values.journal_number !== newValue && journalAutoIncrement) {
+        openDialog('journal-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!journalAutoIncrement) {
+        setFieldValue('journal_number', newValue);
+        setFieldValue('journal_number_manually', newValue);
+      }
+    };
+
+    return (
+      <FormGroup
+        name={'journal_number'}
+        label={<T id={'journal_no'} />}
+        labelInfo={
+          <>
+            <FieldRequiredHint />
+            <FieldHint />
+          </>
+        }
+        fill={true}
+        inline={true}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            fill={true}
+            value={values.journal_number}
+            asyncControl={true}
+            onBlur={handleJournalNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleJournalNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: <T id={'setting_your_auto_generated_journal_number'} />,
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FormGroup>
+    );
+  },
+);
+
 /**
  * Make journal entries header.
  */
-function MakeJournalEntriesHeader({
+export default function MakeJournalEntriesHeader({}) {
-  // #withDialog
-  openDialog,
-
-  // #withSettings
-  journalAutoIncrement,
-}) {
   const { currencies } = useMakeJournalFormContext();
 
-  // Handle journal number change.
-  const handleJournalNumberChange = () => {
-    openDialog('journal-number-form');
-  };
-
-  // Handle journal number blur.
-  const handleJournalNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && journalAutoIncrement) {
-      openDialog('journal-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/*------------ Posting date -----------*/}
@@ -98,46 +150,7 @@ function MakeJournalEntriesHeader({
       </FastField>
 
       {/*------------ Journal number -----------*/}
-      <FastField name={'journal_number'}>
+      <MakeJournalTransactionNoField />
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'journal_no'} />}
-            labelInfo={
-              <>
-                <FieldRequiredHint />
-                <FieldHint />
-              </>
-            }
-            className={'form-group--journal-number'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="journal_number" />}
-            fill={true}
-            inline={true}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                fill={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleJournalNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleJournalNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T id={'setting_your_auto_generated_journal_number'} />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
 
       {/*------------ Reference -----------*/}
       <FastField name={'reference'}>
@@ -211,10 +224,3 @@ function MakeJournalEntriesHeader({
     </div>
   );
 }
-
-export default compose(
-  withDialogActions,
-  withSettings(({ manualJournalsSettings }) => ({
-    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
-  })),
-)(MakeJournalEntriesHeader);

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

@@ -10,9 +10,9 @@ export default function MakeJournalFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the journal number form submit confirm.
-  const handleConfirm = ({ manually, incrementNumber }) => {
+  const handleConfirm = (settings) => {
-    setFieldValue('journal_number', incrementNumber || '');
+    setFieldValue('journal_number', settings.transactionNumber);
-    setFieldValue('journal_number_manually', manually);
+    setFieldValue('journal_number_manually', settings.transactionNumber);
   };
 
   return (

packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.tsx

@@ -65,7 +65,6 @@ function CreditNoteNumberDialogContent({
   const handleChange = (values) => {
     setReferenceFormValues(values);
   };
-
   // Description.
   const description =
     referenceFormValues?.incrementMode === 'auto'

packages/webapp/src/containers/JournalNumber/ReferenceNumberForm.tsx

@@ -2,15 +2,29 @@
 import React, { useMemo } from 'react';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
-import { FormattedMessage as T } from '@/components';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 
 import '@/style/pages/ReferenceNumber/ReferenceNumber.scss';
 
-import { FormObserver } from '@/components';
+import { FormattedMessage as T, FormObserver } from '@/components';
 import ReferenceNumberFormContent from './ReferenceNumberFormContent';
 import { transformValuesToForm } from './utils';
-import { saveInvoke } from '@/utils';
+import { saveInvoke, transformToForm } from '@/utils';
+
+const initialFormValues = {
+  incrementMode: 'auto',
+  numberPrefix: '',
+  nextNumber: '',
+  onceManualNumber: '',
+};
+
+// Validation schema.
+const validationSchema = Yup.object().shape({
+  incrementMode: Yup.string(),
+  numberPrefix: Yup.string(),
+  nextNumber: Yup.number(),
+  onceManualNumber: Yup.string(),
+});
 
 /**
  * Reference number form.
@@ -22,29 +36,15 @@ export default function ReferenceNumberForm({
   onClose,
   onChange,
 }) {
-  // Validation schema.
-  const validationSchema = Yup.object().shape({
-    incrementMode: Yup.string(),
-    numberPrefix: Yup.string(),
-    nextNumber: Yup.number(),
-    manualTransactionNo: Yup.string(),
-  });
   // Initial values.
-  const formInitialValues = useMemo(
+  const formInitialValues = {
-    () => ({
+    ...initialFormValues,
-      ...initialValues,
+    ...transformToForm(initialValues, initialFormValues),
-      incrementMode:
+  };
-        initialValues.incrementMode === 'auto' &&
-        initialValues.manualTransactionNo
-          ? 'manual-transaction'
-          : initialValues.incrementMode,
-    }),
-    [initialValues],
-  );
   // Handle the form submit.
   const handleSubmit = (values, methods) => {
     const parsed = transformValuesToForm(values);
-    saveInvoke(onSubmit, { ...parsed, ...values }, methods);
+    saveInvoke(onSubmit, { ...values, ...parsed }, methods);
   };
 
   return (

packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx

@@ -1,17 +1,15 @@
 // @ts-nocheck
 import React from 'react';
 import { FastField, useFormikContext } from 'formik';
-import { FormattedMessage as T } from '@/components';
 import { FormGroup, InputGroup, Radio } from '@blueprintjs/core';
-import { If, Row, Col, ErrorMessage } from '@/components';
+
+import { FormattedMessage as T, Row, Col, ErrorMessage } from '@/components';
 import { inputIntent } from '@/utils';
 
 /**
  * Reference number form content.
  */
 export default function ReferenceNumberFormContent() {
-  const { values } = useFormikContext();
-
   return (
     <>
       {/* ------------- Auto increment mode ------------- */}
@@ -27,54 +25,13 @@ export default function ReferenceNumberFormContent() {
           />
         )}
       </FastField>
-
+      <ReferenceNumberAutoIncrement />
-      <If condition={values.incrementMode === 'auto'}>
-        <Row>
-          {/* ------------- Prefix ------------- */}
-          <Col xs={4}>
-            <FastField name={'numberPrefix'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'prefix'} />}
-                  className={'form-group--'}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name={'numberPrefix'} />}
-                >
-                  <InputGroup
-                    intent={inputIntent({ error, touched })}
-                    {...field}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          {/* ------------- Next number ------------- */}
-          <Col xs={6}>
-            <FastField name={'nextNumber'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'next_number'} />}
-                  className={'form-group--next-number'}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name={'nextNumber'} />}
-                >
-                  <InputGroup
-                    intent={inputIntent({ error, touched })}
-                    {...field}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-        </Row>
-      </If>
 
       {/* ------------- Manual increment mode ------------- */}
       <FastField name={'incrementMode'}>
         {({ form, field, meta: { error, touched } }) => (
           <Radio
-            label={<T id={'auto_increment.field.manual_this_transaction'} />}
+            label={<T id={'auto_increment.field.manually'} />}
             value="manual"
             onChange={() => {
               form.setFieldValue('incrementMode', 'manual');
@@ -85,20 +42,70 @@ export default function ReferenceNumberFormContent() {
       </FastField>
 
       {/* ------------- Transaction manual increment mode ------------- */}
-      <If condition={values.manualTransactionNo}>
+      <ReferenceNumberManualOnce />
-        <FastField name={'incrementMode'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <Radio
-              label={<T id={'auto_increment.field.manually'} />}
-              value="manual"
-              onChange={() => {
-                form.setFieldValue('incrementMode', 'manual-transaction');
-              }}
-              checked={field.value === 'manual-transaction'}
-            />
-          )}
-        </FastField>
-      </If>
     </>
   );
 }
+
+function ReferenceNumberAutoIncrement() {
+  const { values } = useFormikContext();
+  if (!values.incrementMode === 'auto') return null;
+
+  return (
+    <Row>
+      {/* ------------- Prefix ------------- */}
+      <Col xs={4}>
+        <FastField name={'numberPrefix'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'prefix'} />}
+              className={'form-group--'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'numberPrefix'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      {/* ------------- Next number ------------- */}
+      <Col xs={6}>
+        <FastField name={'nextNumber'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'next_number'} />}
+              className={'form-group--next-number'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'nextNumber'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+    </Row>
+  );
+}
+
+function ReferenceNumberManualOnce() {
+  const { values } = useFormikContext();
+
+  // Do not show the field if the one manual transaction number is not presented.
+  if (!values.onceManualNumber) return null;
+
+  return (
+    <FastField name={'incrementMode'}>
+      {({ form, field, meta: { error, touched } }) => (
+        <Radio
+          label={<T id={'auto_increment.field.manual_this_transaction'} />}
+          value="manual"
+          onChange={() => {
+            form.setFieldValue('incrementMode', 'manual-transaction');
+          }}
+          checked={field.value === 'manual-transaction'}
+        />
+      )}
+    </FastField>
+  );
+}

packages/webapp/src/containers/JournalNumber/utils.tsx

@@ -5,6 +5,7 @@ import {
   transfromToSnakeCase,
   transactionNumber,
 } from '@/utils';
+import { omit } from 'lodash';
 
 export const defaultInvoiceNoSettings = {
   nextNumber: '',
@@ -13,7 +14,7 @@ export const defaultInvoiceNoSettings = {
 };
 
 export const transformSettingsToForm = (settings) => ({
-  ...settings,
+  ...omit(settings, ['autoIncrement']),
   incrementMode: settings.autoIncrement ? 'auto' : 'manual',
 });
 
@@ -25,13 +26,21 @@ export const transformFormToSettings = (values, group) => {
   return optionsMapToArray(options).map((option) => ({ ...option, group }));
 };
 
+/**
+ * Transaction number returns auto-increment if the increment mode is auto or
+ * returns empty string if the increment mode is manually or returns the entered 
+ * manual text if the increment mode is manual once just in this transaction.  
+ */
 export const transformValuesToForm = (values) => {
-  const incrementNumber =
+  const autoIncrementNumber = transactionNumber(
+    values.numberPrefix,
+    values.nextNumber,
+  );
+  const _transactionNumber =
     values.incrementMode === 'auto'
-      ? transactionNumber(values.numberPrefix, values.nextNumber)
+      ? autoIncrementNumber
-      : values.manualTransactionNo;
+      : values.incrementMode === 'manual-transaction'
-
+      ? values.onceManualNumber
-  const manually = values.incrementMode === 'auto' ? false : true;
+      : '';
-
+  return { transactionNumber: _transactionNumber };
-  return { incrementNumber, manually };
 };

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

@@ -1,25 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import CreditNoteNumberDialog from '@/containers/Dialogs/CreditNoteNumberDialog';
 import { useFormikContext } from 'formik';
+import CreditNoteNumberDialog from '@/containers/Dialogs/CreditNoteNumberDialog';
 
 /**
  * Credit note form dialogs.
  */
 export default function CreditNoteFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+ 
   // Update the form once the credit number form submit confirm.
-  const handleCreditNumberFormConfirm = ({ incrementNumber, manually }) => {
+  const handleCreditNumberFormConfirm = (settings) => {
-    setFieldValue('credit_note_number', incrementNumber || '');
+    setFieldValue('credit_note_number', settings.transactionNumber);
-    setFieldValue('credit_note_no_manually', manually);
+    setFieldValue('credit_note_no_manually', settings.transactionNumber);
   };
 
-  const { setFieldValue } = useFormikContext();
   return (
-    <React.Fragment>
+    <CreditNoteNumberDialog
-      <CreditNoteNumberDialog
+      dialogName={'credit-number-form'}
-        dialogName={'credit-number-form'}
+      onConfirm={handleCreditNumberFormConfirm}
-        onConfirm={handleCreditNumberFormConfirm}
+    />
-      />
-    </React.Fragment>
   );
 }

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

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import * as R from 'ramda';
 import classNames from 'classnames';
 import styled from 'styled-components';
 import {
@@ -9,7 +10,8 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, Field, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+
 import { CLASSES } from '@/constants/classes';
 import {
   CustomerSelectField,
@@ -18,10 +20,9 @@ import {
   Icon,
   FormattedMessage as T,
   CustomerDrawerLink,
+  FFormGroup,
 } from '@/components';
-import {
+import { customerNameFieldShouldUpdate } from './utils';
-  customerNameFieldShouldUpdate,
-} from './utils';
 
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import withSettings from '@/containers/Settings/withSettings';
@@ -29,44 +30,93 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { CreditNoteExchangeRateInputField } from './components';
 import {
   momentFormatter,
-  compose,
   tansformDateValue,
   inputIntent,
   handleDateChange,
 } from '@/utils';
 
+/**
+ * Credit note transaction number field.
+ */
+const CreditNoteTransactionNoField = R.compose(
+  withDialogActions,
+  withSettings(({ creditNoteSettings }) => ({
+    creditAutoIncrement: creditNoteSettings?.autoIncrement,
+    creditNextNumber: creditNoteSettings?.nextNumber,
+    creditNumberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    creditAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    // Handle credit number changing.
+    const handleCreditNumberChange = () => {
+      openDialog('credit-number-form');
+    };
+    // Handle credit no. field blur.
+    const handleCreditNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.credit_note_no !== newValue && creditAutoIncrement) {
+        openDialog('credit-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!creditAutoIncrement) {
+        setFieldValue('credit_note_number', newValue);
+        setFieldValue('credit_note_number_manually', newValue);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'credit_note_number'}
+        label={<T id={'credit_note.label_credit_note'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            minimal={true}
+            value={values.credit_note_number}
+            asyncControl={true}
+            onBlur={handleCreditNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleCreditNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_credit_note_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
+
 /**
  * Credit note form header fields.
  */
-function CreditNoteFormHeaderFields({
+export default function CreditNoteFormHeaderFields({}) {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  creditAutoIncrement,
-}) {
   // Credit note form context.
   const { customers } = useCreditNoteFormContext();
 
-  // Handle credit number changing.
-  const handleCreditNumberChange = () => {
-    openDialog('credit-number-form');
-  };
-
-  // Handle credit no. field blur.
-  const handleCreditNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && creditAutoIncrement) {
-      openDialog('credit-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -140,43 +190,8 @@ function CreditNoteFormHeaderFields({
         )}
       </FastField>
       {/* ----------- Credit note # ----------- */}
-      <Field name={'credit_note_number'}>
+      <CreditNoteTransactionNoField />
-        {({ form, field, meta: { error, touched } }) => (
+
-          <FormGroup
-            label={<T id={'credit_note.label_credit_note'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames(
-              'form-group--credit_note_number',
-              CLASSES.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="credit_note_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleCreditNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleCreditNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T id={'setting_your_auto_generated_credit_note_number'} />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </Field>
       {/* ----------- Reference ----------- */}
       <FastField name={'reference_no'}>
         {({ field, meta: { error, touched } }) => (
@@ -194,14 +209,6 @@ function CreditNoteFormHeaderFields({
     </div>
   );
 }
-export default compose(
-  withDialogActions,
-  withSettings(({ creditNoteSettings }) => ({
-    creditAutoIncrement: creditNoteSettings?.autoIncrement,
-    creditNextNumber: creditNoteSettings?.nextNumber,
-    creditNumberPrefix: creditNoteSettings?.numberPrefix,
-  })),
-)(CreditNoteFormHeaderFields);
 
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;

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

@@ -161,7 +161,11 @@ function EstimateForm({
           <EstimateItemsEntriesField />
           <EstimateFormFooter />
           <EstimateFloatingActions />
+
+          {/*------- Dialogs -------*/}
           <EstimateFormDialogs />
+
+          {/*------- Effects -------*/}
           <EstimateIncrementSyncSettingsToForm />
         </Form>
       </Formik>

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

@@ -10,9 +10,9 @@ export default function EstimateFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the invoice number form submit confirm.
-  const handleEstimateNumberFormConfirm = ({ incrementNumber, manually }) => {
+  const handleEstimateNumberFormConfirm = (settings) => {
-    setFieldValue('estimate_number', incrementNumber || '');
+    setFieldValue('estimate_number', settings.transactionNumber);
-    setFieldValue('estimate_number_manually', manually);
+    setFieldValue('estimate_number_manually', settings.transactionNumber);
   };
 
   return (

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

@@ -10,12 +10,13 @@ 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 { FastField, Field, ErrorMessage } from 'formik';
 
 import {
   momentFormatter,
-  compose,
   tansformDateValue,
   inputIntent,
   handleDateChange,
@@ -41,37 +42,79 @@ import {
 
 import { useEstimateFormContext } from './EstimateFormProvider';
 
+const EstimateFormEstimateNumberField = R.compose(
+  withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    estimateNextNumber: estimatesSettings?.nextNumber,
+    estimateNumberPrefix: estimatesSettings?.numberPrefix,
+    estimateAutoIncrement: estimatesSettings?.autoIncrement,
+  })),
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    estimateAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    const handleEstimateNumberBtnClick = () => {
+      openDialog('estimate-number-form', {});
+    };
+    const handleEstimateNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.estimate_number !== newValue && estimateAutoIncrement) {
+        openDialog('estimate-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!estimateAutoIncrement) {
+        setFieldValue('estimate_number', newValue);
+        setFieldValue('estimate_number_manually', newValue);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'estimate_number'}
+        label={<T id={'estimate'} />}
+        inline={true}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            minimal={true}
+            value={values.estimate_number}
+            asyncControl={true}
+            onBlur={handleEstimateNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleEstimateNumberBtnClick,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: <T id={'setting_your_auto_generated_estimate_number'} />,
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
+
 /**
  * Estimate form header.
  */
-function EstimateFormHeader({
+export default function EstimateFormHeader() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  estimateAutoIncrement,
-  estimateNumberPrefix,
-  estimateNextNumber,
-}) {
   const { customers, projects } = useEstimateFormContext();
 
-  const handleEstimateNumberBtnClick = () => {
-    openDialog('estimate-number-form', {});
-  };
-  const handleEstimateNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && estimateAutoIncrement) {
-      openDialog('estimate-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -174,40 +217,7 @@ function EstimateFormHeader({
       </FastField>
 
       {/* ----------- Estimate number ----------- */}
-      <Field name={'estimate_number'}>
+      <EstimateFormEstimateNumberField />
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'estimate'} />}
-            inline={true}
-            className={('form-group--estimate-number', CLASSES.FILL)}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="estimate_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleEstimateNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleEstimateNumberBtnClick,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T id={'setting_your_auto_generated_estimate_number'} />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </Field>
 
       {/* ----------- Reference ----------- */}
       <FastField name={'reference'}>
@@ -244,15 +254,6 @@ function EstimateFormHeader({
   );
 }
 
-export default compose(
-  withDialogActions,
-  withSettings(({ estimatesSettings }) => ({
-    estimateNextNumber: estimatesSettings?.nextNumber,
-    estimateNumberPrefix: estimatesSettings?.numberPrefix,
-    estimateAutoIncrement: estimatesSettings?.autoIncrement,
-  })),
-)(EstimateFormHeader);
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx

@@ -71,10 +71,10 @@ function InvoiceForm({
       : {
           ...defaultInvoice,
           ...(invoiceIncrementMode && {
-              invoice_no: invoiceNumber,
+            invoice_no: invoiceNumber,
-            }),
+          }),
-            entries: orderingLinesIndexes(defaultInvoice.entries),
+          entries: orderingLinesIndexes(defaultInvoice.entries),
-            currency_code: base_currency,
+          currency_code: base_currency,
           ...newInvoice,
         }),
   };
@@ -140,7 +140,6 @@ function InvoiceForm({
       createInvoiceMutate(form).then(onSuccess).catch(onError);
     }
   };
-
   // Create invoice form schema.
   const CreateInvoiceFormSchema = getCreateInvoiceFormSchema();
 
@@ -168,7 +167,11 @@ function InvoiceForm({
           <InvoiceItemsEntriesEditorField />
           <InvoiceFormFooter />
           <InvoiceFloatingActions />
+
+          {/*---------- Dialogs ----------*/}
           <InvoiceFormDialogs />
+
+          {/*---------- Effects ----------*/}
           <InvoiceNoSyncSettingsToForm />
         </Form>
       </Formik>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx

@@ -11,9 +11,9 @@ export default function InvoiceFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the invoice number form submit confirm.
-  const handleInvoiceNumberFormConfirm = ({ incrementNumber, manually }) => {
+  const handleInvoiceNumberFormConfirm = (settings) => {
-    setFieldValue('invoice_no', incrementNumber || '');
+    setFieldValue('invoice_no', settings.transactionNumber);
-    setFieldValue('invoice_no_manually', manually);
+    setFieldValue('invoice_no_manually', settings.transactionNumber);
   };
 
   return (

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -11,6 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import * as R from 'ramda';
 
 import {
   FFormGroup,
@@ -23,13 +24,16 @@ import {
   Icon,
   InputPrependButton,
   FeatureCan,
+  FInputGroup,
 } from '@/components';
-import { momentFormatter, compose, tansformDateValue } from '@/utils';
-import { CLASSES } from '@/constants/classes';
-import { inputIntent, handleDateChange } from '@/utils';
 import {
-  customerNameFieldShouldUpdate,
+  momentFormatter,
-} from './utils';
+  tansformDateValue,
+  inputIntent,
+  handleDateChange,
+} from '@/utils';
+import { CLASSES } from '@/constants/classes';
+import { customerNameFieldShouldUpdate } from './utils';
 
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import {
@@ -46,40 +50,88 @@ import { DialogsName } from '@/constants/dialogs';
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
+/**
+ * Invoice number field of invoice form.
+ */
+const InvoiceFormInvoiceNumberField = R.compose(
+  withDialogActions,
+  withSettings(({ invoiceSettings }) => ({
+    invoiceAutoIncrement: invoiceSettings?.autoIncrement,
+  })),
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    invoiceAutoIncrement,
+  }) => {
+    // Formik context.
+    const { values, setFieldValue } = useFormikContext();
+
+    // Handle invoice number changing.
+    const handleInvoiceNumberChange = () => {
+      openDialog(DialogsName.InvoiceNumberSettings);
+    };
+    // Handle invoice no. field blur.
+    const handleInvoiceNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.invoice_no.value !== newValue && invoiceAutoIncrement) {
+        openDialog(DialogsName.InvoiceNumberSettings, {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!invoiceAutoIncrement) {
+        setFieldValue('invoice_no', newValue);
+        setFieldValue('invoice_no_manually', newValue);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'invoice_no'}
+        label={<T id={'invoice_no'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        fastField={true}
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'invoice_no'}
+            minimal={true}
+            asyncControl={true}
+            onBlur={handleInvoiceNoBlur}
+            fastField={true}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleInvoiceNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: <T id={'setting_your_auto_generated_invoice_number'} />,
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
+
 /**
  * Invoice form header fields.
  */
-function InvoiceFormHeaderFields({
+export default function InvoiceFormHeaderFields() {
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  invoiceAutoIncrement,
-}) {
   // Invoice form context.
   const { customers, projects } = useInvoiceFormContext();
-
-  // Formik context.
   const { values } = useFormikContext();
 
-  // Handle invoice number changing.
-  const handleInvoiceNumberChange = () => {
-    openDialog(DialogsName.InvoiceNumberSettings);
-  };
-  // Handle invoice no. field blur.
-  const handleInvoiceNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && invoiceAutoIncrement) {
-      openDialog(DialogsName.InvoiceNumberSettings, {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -185,40 +237,7 @@ function InvoiceFormHeaderFields({
       </Row>
 
       {/* ----------- Invoice number ----------- */}
-      <Field name={'invoice_no'}>
+      <InvoiceFormInvoiceNumberField />
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'invoice_no'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames('form-group--invoice-no', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="invoice_no" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleInvoiceNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleInvoiceNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T id={'setting_your_auto_generated_invoice_number'} />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </Field>
 
       {/* ----------- Reference ----------- */}
       <FastField name={'reference_no'}>
@@ -260,13 +279,6 @@ function InvoiceFormHeaderFields({
   );
 }
 
-export default compose(
-  withDialogActions,
-  withSettings(({ invoiceSettings }) => ({
-    invoiceAutoIncrement: invoiceSettings?.autoIncrement,
-  })),
-)(InvoiceFormHeaderFields);
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

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

@@ -177,6 +177,7 @@ function PaymentReceiveForm({
             <PaymentReceiveFormFooter />
             <PaymentReceiveFloatingActions />
 
+            {/* ------- Effects ------- */}
             <PaymentReceiveSyncIncrementSettingsToForm />
 
             {/* ------- Alerts & Dialogs ------- */}

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

@@ -9,17 +9,15 @@ import PaymentReceiveNumberDialog from '@/containers/Dialogs/PaymentReceiveNumbe
 export default function PaymentReceiveFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
-  const handleUpdatePaymentNumber = ({ incrementNumber, manually }) => {
+  const handleUpdatePaymentNumber = (settings) => {
-    setFieldValue('payment_receive_no', incrementNumber);
+    setFieldValue('payment_receive_no', settings.transactionNumber);
-    setFieldValue('payment_receive_no_manually', manually)
+    setFieldValue('payment_receive_no_manually', settings.transactionNumber);
   };
 
   return (
-    <>
+    <PaymentReceiveNumberDialog
-      <PaymentReceiveNumberDialog
+      dialogName={'payment-receive-number-form'}
-        dialogName={'payment-receive-number-form'}
+      onConfirm={handleUpdatePaymentNumber}
-        onConfirm={handleUpdatePaymentNumber}
+    />
-      />
-    </>
   );
 }

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

@@ -12,13 +12,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { toSafeInteger } from 'lodash';
-import { FeatureCan, FormattedMessage as T } from '@/components';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
+import * as R from 'ramda';
 
+import { FeatureCan, FormattedMessage as T } from '@/components';
 import { useAutofocus } from '@/hooks';
 import { CLASSES } from '@/constants/classes';
 import {
-  compose,
   safeSumBy,
   momentFormatter,
   tansformDateValue,
@@ -48,7 +48,6 @@ import {
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
-import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 import {
   amountPaymentEntries,
@@ -58,19 +57,86 @@ import {
 } from './utils';
 import { Features } from '@/constants';
 
+/**
+ * Payment receive number field.
+ */
+const PaymentReceivePaymentNoField = R.compose(
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
+  })),
+  withDialogActions,
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    paymentReceiveAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    // Handle click open payment receive number dialog.
+    const handleClickOpenDialog = () => {
+      openDialog('payment-receive-number-form');
+    };
+    // Handle payment number field blur.
+    const handlePaymentNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (
+        values.payment_receive_no !== newValue &&
+        paymentReceiveAutoIncrement
+      ) {
+        openDialog('payment-receive-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!paymentReceiveAutoIncrement) {
+        setFieldValue('payment_receive_no', newValue);
+        setFieldValue('payment_receive_no_manually', newValue);
+      }
+    };
+    return (
+      <FormGroup
+        name={'payment_receive_no'}
+        label={<T id={'payment_receive_no'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+        helperText={<ErrorMessage name="payment_receive_no" />}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            minimal={true}
+            value={values.payment_receive_no}
+            asyncControl={true}
+            onBlur={handlePaymentNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleClickOpenDialog,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_payment_receive_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+          />
+        </ControlGroup>
+      </FormGroup>
+    );
+  },
+);
+
 /**
  * Payment receive header fields.
  */
-function PaymentReceiveHeaderFields({
+export default function PaymentReceiveHeaderFields({}) {
-  // #withCurrentOrganization
-  organization: { base_currency },
-
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  paymentReceiveAutoIncrement,
-}) {
   // Payment receive form context.
   const { customers, accounts, projects, isNewMode } =
     usePaymentReceiveFormContext();
@@ -101,24 +167,6 @@ function PaymentReceiveHeaderFields({
     const newEntries = amountPaymentEntries(toSafeInteger(value), entries);
     setFieldValue('entries', newEntries);
   };
-  // Handle click open payment receive number dialog.
-  const handleClickOpenDialog = () => {
-    openDialog('payment-receive-number-form');
-  };
-
-  // Handle payment number field blur.
-  const handlePaymentNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && paymentReceiveAutoIncrement) {
-      openDialog('payment-receive-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -237,43 +285,7 @@ function PaymentReceiveHeaderFields({
       </Field>
 
       {/* ------------ Payment receive no. ------------ */}
-      <FastField name={'payment_receive_no'}>
+      <PaymentReceivePaymentNoField />
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_receive_no'} />}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            className={('form-group--payment_receive_no', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_receive_no" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handlePaymentNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleClickOpenDialog,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T
-                      id={'setting_your_auto_generated_payment_receive_number'}
-                    />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
 
       {/* ------------ Deposit account ------------ */}
       <FFormGroup
@@ -340,14 +352,6 @@ function PaymentReceiveHeaderFields({
   );
 }
 
-export default compose(
-  withSettings(({ paymentReceiveSettings }) => ({
-    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
-  })),
-  withDialogActions,
-  withCurrentOrganization(),
-)(PaymentReceiveHeaderFields);
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

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

@@ -165,7 +165,11 @@ function ReceiptForm({
           <ReceiptItemsEntriesEditor />
           <ReceiptFormFooter />
           <ReceiptFormFloatingActions />
+
+          {/*---------- Dialogs ---------*/}
           <ReceiptFormDialogs />
+
+          {/*---------- Effects ---------*/}
           <ReceiptSyncIncrementSettingsToForm />
         </Form>
       </Formik>

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

@@ -10,9 +10,9 @@ export default function ReceiptFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the receipt number form submit confirm.
-  const handleReceiptNumberFormConfirm = ({ incrementNumber, manually }) => {
+  const handleReceiptNumberFormConfirm = (settings) => {
-    setFieldValue('receipt_number', incrementNumber || '');
+    setFieldValue('receipt_number', settings.transactionNumber);
-    setFieldValue('receipt_number_manually', manually);
+    setFieldValue('receipt_number_manually', settings.transactionNumber);
   };
 
   return (

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

@@ -10,9 +10,10 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import * as R from 'ramda';
 
+import { CLASSES } from '@/constants/classes';
 import {
   FFormGroup,
   AccountsSelect,
@@ -24,57 +25,102 @@ import {
   FormattedMessage as T,
   FeatureCan,
 } from '@/components';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
   momentFormatter,
-  compose,
   tansformDateValue,
   handleDateChange,
   inputIntent,
 } from '@/utils';
 import { useReceiptFormContext } from './ReceiptFormProvider';
-import {
+import { accountsFieldShouldUpdate, customersFieldShouldUpdate } from './utils';
-  accountsFieldShouldUpdate,
-  customersFieldShouldUpdate,
-} from './utils';
 import {
   ReceiptExchangeRateInputField,
   ReceiptProjectSelectButton,
 } from './components';
 import { Features } from '@/constants';
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+const ReceiptFormReceiptNumberField = R.compose(
+  withDialogActions,
+  withSettings(({ receiptSettings }) => ({
+    receiptAutoIncrement: receiptSettings?.autoIncrement,
+  })),
+)(
+  ({
+    //#withDialogActions
+    openDialog,
+
+    // #withSettings
+    receiptAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    const handleReceiptNumberChange = useCallback(() => {
+      openDialog('receipt-number-form', {});
+    }, [openDialog]);
+
+    const handleReceiptNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      if (values.receipt_number !== newValue && receiptAutoIncrement) {
+        openDialog('receipt-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      if (!receiptAutoIncrement) {
+        setFieldValue('receipt_number', newValue);
+        setFieldValue('receipt_number_manually', newValue);
+      }
+    };
+
+    return (
+      <FFormGroup
+        name={'receipt_number'}
+        label={<T id={'receipt'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <ControlGroup fill={true}>
+          <InputGroup
+            minimal={true}
+            value={values.receipt_number}
+            asyncControl={true}
+            onBlur={handleReceiptNoBlur}
+          />
+          <InputPrependButton
+            buttonProps={{
+              onClick: handleReceiptNumberChange,
+              icon: <Icon icon={'settings-18'} />,
+            }}
+            tooltip={true}
+            tooltipProps={{
+              content: (
+                <T id={'setting_your_auto_generated_payment_receive_number'} />
+              ),
+              position: Position.BOTTOM_LEFT,
+            }}
+            inputProps={{
+              leftIcon: <Icon icon={'date-range'} />,
+            }}
+          />
+        </ControlGroup>
+      </FFormGroup>
+    );
+  },
+);
 
 /**
  * Receipt form header fields.
  */
-function ReceiptFormHeader({
+export default function ReceiptFormHeader() {
-  //#withDialogActions
-  openDialog,
-
-  // #withSettings
-  receiptAutoIncrement,
-}) {
   const { accounts, customers, projects } = useReceiptFormContext();
 
-  const handleReceiptNumberChange = useCallback(() => {
-    openDialog('receipt-number-form', {});
-  }, [openDialog]);
-
-  const handleReceiptNoBlur = (form, field) => (event) => {
-    const newValue = event.target.value;
-
-    if (field.value !== newValue && receiptAutoIncrement) {
-      openDialog('receipt-number-form', {
-        initialFormValues: {
-          manualTransactionNo: newValue,
-          incrementMode: 'manual-transaction',
-        },
-      });
-    }
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -170,45 +216,7 @@ function ReceiptFormHeader({
       </FastField>
 
       {/* ----------- Receipt number ----------- */}
-      <FastField name={'receipt_number'}>
+      <ReceiptFormReceiptNumberField />
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'receipt'} />}
-            inline={true}
-            className={('form-group--receipt_number', CLASSES.FILL)}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="receipt_number" />}
-          >
-            <ControlGroup fill={true}>
-              <InputGroup
-                minimal={true}
-                value={field.value}
-                asyncControl={true}
-                onBlur={handleReceiptNoBlur(form, field)}
-              />
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleReceiptNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: (
-                    <T
-                      id={'setting_your_auto_generated_payment_receive_number'}
-                    />
-                  ),
-                  position: Position.BOTTOM_LEFT,
-                }}
-                inputProps={{
-                  leftIcon: <Icon icon={'date-range'} />,
-                }}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
 
       {/* ----------- Reference ----------- */}
       <FastField name={'reference_no'}>
@@ -245,13 +253,6 @@ function ReceiptFormHeader({
   );
 }
 
-export default compose(
-  withDialogActions,
-  withSettings(({ receiptSettings }) => ({
-    receiptAutoIncrement: receiptSettings?.autoIncrement,
-  })),
-)(ReceiptFormHeader);
-
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;

packages/webapp/src/lang/en/index.json

@@ -1376,7 +1376,7 @@
   "receipt.auto_increment.manually": "Your receipt numbers are set on manual mode. Are you sure chaning this settings?",
   "payment_receive.auto_increment.auto": "Your payment numbers are set on auto-increment mode. Are you sure changing this setting?",
   "payment_receive.auto_increment.manually": "Your payment numbers are set on manual mode. Are you sure chaning this settings?",
-  "auto_increment.field.manually": "I will enter them manually each time",
+  "auto_increment.field.manually": "I will enter them manually each time.",
   "auto_increment.field.manual_this_transaction": "Manual entering for this transaction.",
   "auto_increment.field.auto": "Auto-incrementing number.",
   "date_formats": {