fix: auto-increment settings

2026-02-18 13:50:31 +00:00 · 2023-05-22 21:57:43 +02:00
parent d369f0bb17
commit 40ef02f215
22 changed files with 635 additions and 582 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx
+++ b/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 }) => {
-    setFieldValue('credit_note_number', incrementNumber || '');
-    setFieldValue('credit_note_no_manually', manually);
+  const handleCreditNumberFormConfirm = (settings) => {
+    setFieldValue('credit_note_number', settings.transactionNumber);
+    setFieldValue('credit_note_no_manually', settings.transactionNumber);
  };

-  const { setFieldValue } = useFormikContext();
  return (
-    <React.Fragment>
-      <CreditNoteNumberDialog
-        dialogName={'credit-number-form'}
-        onConfirm={handleCreditNumberFormConfirm}
-      />
-    </React.Fragment>
+    <CreditNoteNumberDialog
+      dialogName={'credit-number-form'}
+      onConfirm={handleCreditNumberFormConfirm}
+    />
  );
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
+++ b/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 {
-  customerNameFieldShouldUpdate,
-} from './utils';
+import { 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({
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  creditAutoIncrement,
-}) {
+export default function CreditNoteFormHeaderFields({}) {
  // 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'}>
-        {({ 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>
+      <CreditNoteTransactionNoField />
+
      {/* ----------- 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;
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx
@@ -161,7 +161,11 @@ function EstimateForm({
          <EstimateItemsEntriesField />
          <EstimateFormFooter />
          <EstimateFloatingActions />
+
+          {/*------- Dialogs -------*/}
          <EstimateFormDialogs />
+
+          {/*------- Effects -------*/}
          <EstimateIncrementSyncSettingsToForm />
        </Form>
      </Formik>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx
+++ b/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 }) => {
-    setFieldValue('estimate_number', incrementNumber || '');
-    setFieldValue('estimate_number_manually', manually);
+  const handleEstimateNumberFormConfirm = (settings) => {
+    setFieldValue('estimate_number', settings.transactionNumber);
+    setFieldValue('estimate_number_manually', settings.transactionNumber);
  };

  return (
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
+++ b/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({
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  estimateAutoIncrement,
-  estimateNumberPrefix,
-  estimateNextNumber,
-}) {
+export default function EstimateFormHeader() {
  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'}>
-        {({ 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>
+      <EstimateFormEstimateNumberField />

      {/* ----------- 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;
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
@@ -71,10 +71,10 @@ function InvoiceForm({
      : {
          ...defaultInvoice,
          ...(invoiceIncrementMode && {
-              invoice_no: invoiceNumber,
-            }),
-            entries: orderingLinesIndexes(defaultInvoice.entries),
-            currency_code: base_currency,
+            invoice_no: invoiceNumber,
+          }),
+          entries: orderingLinesIndexes(defaultInvoice.entries),
+          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>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx
+++ b/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 }) => {
-    setFieldValue('invoice_no', incrementNumber || '');
-    setFieldValue('invoice_no_manually', manually);
+  const handleInvoiceNumberFormConfirm = (settings) => {
+    setFieldValue('invoice_no', settings.transactionNumber);
+    setFieldValue('invoice_no_manually', settings.transactionNumber);
  };

  return (
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/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,
-} from './utils';
+  momentFormatter,
+  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({
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  invoiceAutoIncrement,
-}) {
+export default function InvoiceFormHeaderFields() {
  // 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'}>
-        {({ 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>
+      <InvoiceFormInvoiceNumberField />

      {/* ----------- 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;
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx
@@ -177,6 +177,7 @@ function PaymentReceiveForm({
            <PaymentReceiveFormFooter />
            <PaymentReceiveFloatingActions />

+            {/* ------- Effects ------- */}
            <PaymentReceiveSyncIncrementSettingsToForm />

            {/* ------- Alerts & Dialogs ------- */}
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx
+++ b/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 }) => {
-    setFieldValue('payment_receive_no', incrementNumber);
-    setFieldValue('payment_receive_no_manually', manually)
+  const handleUpdatePaymentNumber = (settings) => {
+    setFieldValue('payment_receive_no', settings.transactionNumber);
+    setFieldValue('payment_receive_no_manually', settings.transactionNumber);
  };

  return (
-    <>
-      <PaymentReceiveNumberDialog
-        dialogName={'payment-receive-number-form'}
-        onConfirm={handleUpdatePaymentNumber}
-      />
-    </>
+    <PaymentReceiveNumberDialog
+      dialogName={'payment-receive-number-form'}
+      onConfirm={handleUpdatePaymentNumber}
+    />
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/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({
-  // #withCurrentOrganization
-  organization: { base_currency },
-
-  // #withDialogActions
-  openDialog,
-
-  // #withSettings
-  paymentReceiveAutoIncrement,
-}) {
+export default function PaymentReceiveHeaderFields({}) {
  // 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'}>
-        {({ 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>
+      <PaymentReceivePaymentNoField />

      {/* ------------ 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;
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx
@@ -165,7 +165,11 @@ function ReceiptForm({
          <ReceiptItemsEntriesEditor />
          <ReceiptFormFooter />
          <ReceiptFormFloatingActions />
+
+          {/*---------- Dialogs ---------*/}
          <ReceiptFormDialogs />
+
+          {/*---------- Effects ---------*/}
          <ReceiptSyncIncrementSettingsToForm />
        </Form>
      </Formik>
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx
+++ b/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 }) => {
-    setFieldValue('receipt_number', incrementNumber || '');
-    setFieldValue('receipt_number_manually', manually);
+  const handleReceiptNumberFormConfirm = (settings) => {
+    setFieldValue('receipt_number', settings.transactionNumber);
+    setFieldValue('receipt_number_manually', settings.transactionNumber);
  };

  return (
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
+++ b/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 { CLASSES } from '@/constants/classes';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
+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 {
-  accountsFieldShouldUpdate,
-  customersFieldShouldUpdate,
-} from './utils';
+import { 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({
-  //#withDialogActions
-  openDialog,
-
-  // #withSettings
-  receiptAutoIncrement,
-}) {
+export default function ReceiptFormHeader() {
  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'}>
-        {({ 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>
+      <ReceiptFormReceiptNumberField />

      {/* ----------- 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;