diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
index ae9c18f2e..9a1f81a30 100644
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx
@@ -1,14 +1,8 @@
 // @ts-nocheck
 import React from 'react';
-import {
-  InputGroup,
-  FormGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { InputGroup, FormGroup, Position } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import * as R from 'ramda';
 import classNames from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
@@ -20,99 +14,15 @@ import {
 } from '@/utils';
 import {
   Hint,
-  FieldHint,
   FieldRequiredHint,
   Icon,
-  InputPrependButton,
   CurrencySelectList,
   FormattedMessage as T,
-  FInputGroup,
-  FFormGroup,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
 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();
-
-    const handleJournalNumberChange = () => {
-      openDialog('journal-number-form');
-    };
-    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 (
-      <FFormGroup
-        name={'journal_number'}
-        label={<T id={'journal_no'} />}
-        labelInfo={
-          <>
-            <FieldRequiredHint />
-            <FieldHint />
-          </>
-        }
-        fill={true}
-        inline={true}
-        fastField={true}
-      >
-        <ControlGroup fill={true}>
-          <FInputGroup
-            name={'journal_number'}
-            fill={true}
-            asyncControl={true}
-            onBlur={handleJournalNoBlur}
-            fastField={true}
-            onChange={() => {}}
-          />
-          <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>
-      </FFormGroup>
-    );
-  },
-);
+import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
 
 /**
  * Make journal entries header.
diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalTransactionNoField.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalTransactionNoField.tsx
new file mode 100644
index 000000000..5aaaeda75
--- /dev/null
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalTransactionNoField.tsx
@@ -0,0 +1,97 @@
+// @ts-nocheck
+import React from 'react';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import * as R from 'ramda';
+import {
+  FieldHint,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  FormattedMessage as T,
+  FInputGroup,
+  FFormGroup,
+} from '@/components';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Journal number field of make journal form.
+ */
+export const MakeJournalTransactionNoField = R.compose(
+  withDialogActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+  })),
+)(
+  ({
+    // #withDialog
+    openDialog,
+
+    // #withSettings
+    journalAutoIncrement,
+  }) => {
+    const { setFieldValue, values } = useFormikContext();
+
+    const handleJournalNumberChange = () => {
+      openDialog('journal-number-form');
+    };
+    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 (
+      <FFormGroup
+        name={'journal_number'}
+        label={<T id={'journal_no'} />}
+        labelInfo={
+          <>
+            <FieldRequiredHint />
+            <FieldHint />
+          </>
+        }
+        fill={true}
+        inline={true}
+        fastField={true}
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'journal_number'}
+            fill={true}
+            asyncControl={true}
+            onBlur={handleJournalNoBlur}
+            fastField={true}
+            onChange={() => {}}
+          />
+          <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>
+      </FFormGroup>
+    );
+  },
+);
+
+MakeJournalTransactionNoField.displayName = 'MakeJournalTransactionNoField';
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
index fac113606..1c767d790 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
@@ -1,34 +1,24 @@
 // @ts-nocheck
 import React from 'react';
-import * as R from 'ramda';
 import classNames from 'classnames';
 import styled from 'styled-components';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 
 import { CLASSES } from '@/constants/classes';
 import {
   CustomerSelectField,
   FieldRequiredHint,
-  InputPrependButton,
   Icon,
   FormattedMessage as T,
   CustomerDrawerLink,
-  FFormGroup,
-  FInputGroup,
 } from '@/components';
 import { customerNameFieldShouldUpdate } from './utils';
 
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
-import withSettings from '@/containers/Settings/withSettings';
-import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { CreditNoteExchangeRateInputField } from './components';
+import { CreditNoteTransactionNoField } from './CreditNoteTransactionNoField';
 import {
   momentFormatter,
   tansformDateValue,
@@ -36,87 +26,6 @@ import {
   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 note no. field blur.
-    const handleCreditNoBlur = (event) => {
-      const newValue = event.target.value;
-
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (values.credit_note_no !== newValue && creditAutoIncrement) {
-        openDialog('credit-number-form', {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // Setting the credit note number to the form will be manually in case
-      // auto-increment is disable.
-      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}>
-          <FInputGroup
-            name={'credit_note_number'}
-            minimal={true}
-            value={values.credit_note_number}
-            asyncControl={true}
-            onBlur={handleCreditNoBlur}
-            onChange={() => {}}
-          />
-          <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.
  */
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteTransactionNoField.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteTransactionNoField.tsx
new file mode 100644
index 000000000..ffccc308c
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteTransactionNoField.tsx
@@ -0,0 +1,98 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import {
+  FieldRequiredHint,
+  InputPrependButton,
+  Icon,
+  FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
+} from '@/components';
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Credit note transaction number field.
+ */
+export 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 note no. field blur.
+    const handleCreditNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (values.credit_note_no !== newValue && creditAutoIncrement) {
+        openDialog('credit-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      // Setting the credit note number to the form will be manually in case
+      // auto-increment is disable.
+      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}>
+          <FInputGroup
+            name={'credit_note_number'}
+            minimal={true}
+            value={values.credit_note_number}
+            asyncControl={true}
+            onBlur={handleCreditNoBlur}
+            onChange={() => {}}
+          />
+          <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>
+    );
+  },
+);
+
+CreditNoteTransactionNoField.displayName = 'CreditNoteTransactionNoField';
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormEstimateNumberField.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormEstimateNumberField.tsx
new file mode 100644
index 000000000..b4c9c7495
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormEstimateNumberField.tsx
@@ -0,0 +1,92 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import {
+  FFormGroup,
+  FInputGroup,
+  FormattedMessage as T,
+  Icon,
+  InputPrependButton,
+} from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+/**
+ * Estimate number field of estimate form.
+ */
+export 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', {});
+    };
+    // Handle estimate no. field blur.
+    const handleEstimateNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (values.estimate_number !== newValue && estimateAutoIncrement) {
+        openDialog('estimate-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      // Setting the estimate number to the form will be manually in case
+      // auto-increment is disable.
+      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}>
+          <FInputGroup
+            name={'estimate_number'}
+            minimal={true}
+            asyncControl={true}
+            onBlur={handleEstimateNoBlur}
+            onChange={() => {}}
+          />
+          <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>
+    );
+  },
+);
+
+EstimateFormEstimateNumberField.displayName = 'EstimateFormEstimateNumberField';
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
index 70444babc..513025139 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
@@ -1,27 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import * as R from 'ramda';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  Classes,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
 
 import {
   FeatureCan,
   FFormGroup,
-  FInputGroup,
   FormattedMessage as T,
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
-  InputPrependButton,
   CustomerDrawerLink,
 } from '@/components';
 import {
@@ -34,92 +25,14 @@ import { customersFieldShouldUpdate } from './utils';
 import { CLASSES } from '@/constants/classes';
 import { Features } from '@/constants';
 
-import withDialogActions from '@/containers/Dialog/withDialogActions';
-import withSettings from '@/containers/Settings/withSettings';
-
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
   EstimateExchangeRateInputField,
   EstimateProjectSelectButton,
 } from './components';
+import { EstimateFormEstimateNumberField } from './EstimateFormEstimateNumberField';
 import { useEstimateFormContext } from './EstimateFormProvider';
 
-/**
- * Estimate number field of estimate form.
- */
-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', {});
-    };
-    // Handle estimate no. field blur.
-    const handleEstimateNoBlur = (event) => {
-      const newValue = event.target.value;
-
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (values.estimate_number !== newValue && estimateAutoIncrement) {
-        openDialog('estimate-number-form', {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // Setting the estimate number to the form will be manually in case
-      // auto-increment is disable.
-      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}>
-          <FInputGroup
-            name={'estimate_number'}
-            minimal={true}
-            asyncControl={true}
-            onBlur={handleEstimateNoBlur}
-            onChange={() => {}}
-          />
-          <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.
  */
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
index 1fd9b5317..b3302cbbd 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
@@ -2,16 +2,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  Classes,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import * as R from 'ramda';
 
 import {
   FFormGroup,
@@ -21,10 +14,7 @@ import {
   CustomerDrawerLink,
   CustomerSelectField,
   FieldRequiredHint,
-  Icon,
-  InputPrependButton,
   FeatureCan,
-  FInputGroup,
 } from '@/components';
 import {
   momentFormatter,
@@ -40,94 +30,12 @@ import {
   InvoiceExchangeRateInputField,
   InvoiceProjectSelectButton,
 } from './components';
+import { InvoiceFormInvoiceNumberField } from './InvoiceFormInvoiceNumberField';
 import {
   ProjectsSelect,
   ProjectBillableEntriesLink,
 } from '@/containers/Projects/components';
 import { Features } from '@/constants';
-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;
-
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (values.invoice_no !== newValue && invoiceAutoIncrement) {
-        openDialog(DialogsName.InvoiceNumberSettings, {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // Setting the invoice number to the form will be manually in case
-      // auto-increment is disable.
-      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}
-            onChange={() => {}}
-          />
-          <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>
-    );
-  },
-);
-InvoiceFormInvoiceNumberField.displayName = 'InvoiceFormInvoiceNumberField';
 
 /**
  * Invoice form header fields.
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormInvoiceNumberField.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormInvoiceNumberField.tsx
new file mode 100644
index 000000000..8fc086777
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormInvoiceNumberField.tsx
@@ -0,0 +1,95 @@
+// @ts-nocheck
+import React from 'react';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import * as R from 'ramda';
+import {
+  FFormGroup,
+  FormattedMessage as T,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  FInputGroup,
+} from '@/components';
+import { DialogsName } from '@/constants/dialogs';
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Invoice number field of invoice form.
+ */
+export 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;
+
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (values.invoice_no !== newValue && invoiceAutoIncrement) {
+        openDialog(DialogsName.InvoiceNumberSettings, {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      // Setting the invoice number to the form will be manually in case
+      // auto-increment is disable.
+      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}
+            onChange={() => {}}
+          />
+          <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>
+    );
+  },
+);
+InvoiceFormInvoiceNumberField.displayName = 'InvoiceFormInvoiceNumberField';
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
index 96ac9462e..db47b1132 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -13,9 +13,8 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { toSafeInteger } from 'lodash';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
-import * as R from 'ramda';
 
-import { FInputGroup, FeatureCan, FormattedMessage as T } from '@/components';
+import { FeatureCan, FormattedMessage as T } from '@/components';
 import { useAutofocus } from '@/hooks';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -31,7 +30,6 @@ import {
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
-  InputPrependButton,
   MoneyInputGroup,
   InputPrependText,
   CustomerDrawerLink,
@@ -46,9 +44,6 @@ import {
   PaymentReceiveProjectSelectButton,
 } from './components';
 
-import withDialogActions from '@/containers/Dialog/withDialogActions';
-import withSettings from '@/containers/Settings/withSettings';
-
 import {
   amountPaymentEntries,
   fullAmountPaymentEntries,
@@ -56,87 +51,7 @@ import {
   accountsFieldShouldUpdate,
 } 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;
-
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (
-        values.payment_receive_no !== newValue &&
-        paymentReceiveAutoIncrement
-      ) {
-        openDialog('payment-receive-number-form', {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // 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 (
-      <FFormGroup
-        name={'payment_receive_no'}
-        label={<T id={'payment_receive_no'} />}
-        inline={true}
-        labelInfo={<FieldRequiredHint />}
-      >
-        <ControlGroup fill={true}>
-          <FInputGroup
-            name={'payment_receive_no'}
-            minimal={true}
-            value={values.payment_receive_no}
-            asyncControl={true}
-            onBlur={handlePaymentNoBlur}
-            onChange={() => {}}
-          />
-          <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>
-      </FFormGroup>
-    );
-  },
-);
+import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';
 
 /**
  * Payment receive header fields.
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
new file mode 100644
index 000000000..e695013c7
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceivePaymentNoField.tsx
@@ -0,0 +1,99 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import * as R from 'ramda';
+
+import { FInputGroup, FormattedMessage as T } from '@/components';
+import {
+  FFormGroup,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from '@/components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+
+/**
+ * Payment receive number field.
+ */
+export 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;
+
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (
+        values.payment_receive_no !== newValue &&
+        paymentReceiveAutoIncrement
+      ) {
+        openDialog('payment-receive-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      // 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 (
+      <FFormGroup
+        name={'payment_receive_no'}
+        label={<T id={'payment_receive_no'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <ControlGroup fill={true}>
+          <FInputGroup
+            name={'payment_receive_no'}
+            minimal={true}
+            value={values.payment_receive_no}
+            asyncControl={true}
+            onBlur={handlePaymentNoBlur}
+            onChange={() => {}}
+          />
+          <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>
+      </FFormGroup>
+    );
+  },
+);
+
+PaymentReceivePaymentNoField.displayName = 'PaymentReceivePaymentNoField';
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
index ff62e984a..b269d724c 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
@@ -2,16 +2,9 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  Classes,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import * as R from 'ramda';
+import { FastField, ErrorMessage } from 'formik';
 
 import { CLASSES } from '@/constants/classes';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
@@ -22,11 +15,9 @@ import {
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
-  InputPrependButton,
   CustomerDrawerLink,
   FormattedMessage as T,
   FeatureCan,
-  FInputGroup,
 } from '@/components';
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
@@ -41,90 +32,7 @@ import {
   ReceiptExchangeRateInputField,
   ReceiptProjectSelectButton,
 } from './components';
-
-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 }) => ({
-    receiptAutoIncrement: receiptSettings?.autoIncrement,
-  })),
-)(
-  ({
-    // #withDialogActions
-    openDialog,
-
-    // #withSettings
-    receiptAutoIncrement,
-  }) => {
-    const { values, setFieldValue } = useFormikContext();
-
-    const handleReceiptNumberChange = () => {
-      openDialog('receipt-number-form', {});
-    };
-
-    const handleReceiptNoBlur = (event) => {
-      const newValue = event.target.value;
-
-      // Show the confirmation dialog if the value has changed and auto-increment
-      // mode is enabled.
-      if (values.receipt_number !== newValue && receiptAutoIncrement) {
-        openDialog('receipt-number-form', {
-          initialFormValues: {
-            onceManualNumber: newValue,
-            incrementMode: 'manual-transaction',
-          },
-        });
-      }
-      // Setting the receipt number to the form will be manually in case
-      // auto-increment is disable.
-      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}>
-          <FInputGroup
-            name={'receipt_number'}
-            minimal={true}
-            value={values.receipt_number}
-            asyncControl={true}
-            onBlur={handleReceiptNoBlur}
-            onChange={() => {}}
-          />
-          <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>
-    );
-  },
-);
+import { ReceiptFormReceiptNumberField } from './ReceiptFormReceiptNumberField';
 
 /**
  * Receipt form header fields.
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormReceiptNumberField.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormReceiptNumberField.tsx
new file mode 100644
index 000000000..7846cf898
--- /dev/null
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormReceiptNumberField.tsx
@@ -0,0 +1,99 @@
+// @ts-nocheck
+import React from 'react';
+import { Position, ControlGroup } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import * as R from 'ramda';
+import {
+  FFormGroup,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  FormattedMessage as T,
+  FInputGroup,
+} from '@/components';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+/**
+ * Receipt number field of receipt form.
+ */
+export const ReceiptFormReceiptNumberField = R.compose(
+  withDialogActions,
+  withSettings(({ receiptSettings }) => ({
+    receiptAutoIncrement: receiptSettings?.autoIncrement,
+  })),
+)(
+  ({
+    // #withDialogActions
+    openDialog,
+
+    // #withSettings
+    receiptAutoIncrement,
+  }) => {
+    const { values, setFieldValue } = useFormikContext();
+
+    const handleReceiptNumberChange = () => {
+      openDialog('receipt-number-form', {});
+    };
+
+    const handleReceiptNoBlur = (event) => {
+      const newValue = event.target.value;
+
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (values.receipt_number !== newValue && receiptAutoIncrement) {
+        openDialog('receipt-number-form', {
+          initialFormValues: {
+            onceManualNumber: newValue,
+            incrementMode: 'manual-transaction',
+          },
+        });
+      }
+      // Setting the receipt number to the form will be manually in case
+      // auto-increment is disable.
+      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}>
+          <FInputGroup
+            name={'receipt_number'}
+            minimal={true}
+            value={values.receipt_number}
+            asyncControl={true}
+            onBlur={handleReceiptNoBlur}
+            onChange={() => {}}
+          />
+          <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>
+    );
+  },
+);
+
+ReceiptFormReceiptNumberField.displayName = 'ReceiptFormReceiptNumberField';