fix: the auto-increment of transactions.

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

@@ -32,6 +32,7 @@ import {
   transfromsFormValuesToRequest,
   handleErrors,
 } from './utils';
+import { EstimateIncrementSyncSettingsToForm } from './components';
 
 /**
  * Estimate form.
@@ -160,8 +161,8 @@ function EstimateForm({
           <EstimateItemsEntriesField />
           <EstimateFormFooter />
           <EstimateFloatingActions />
-
           <EstimateFormDialogs />
+          <EstimateIncrementSyncSettingsToForm />
         </Form>
       </Formik>
     </div>

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

@@ -12,6 +12,19 @@ import { PageFormBigNumber } from '@/components';
 
 // Estimate form top header.
 function EstimateFormHeader() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <EstimateFormHeaderFields />
+      <EstimateFormBigTotal />
+    </div>
+  );
+}
+
+/**
+ * Big total of estimate form header.
+ * @returns {React.ReactNode}
+ */
+function EstimateFormBigTotal() {
   const {
     values: { entries, currency_code },
   } = useFormikContext();
@@ -20,15 +33,11 @@ function EstimateFormHeader() {
   const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <EstimateFormHeaderFields />
-
-      <PageFormBigNumber
-        label={intl.get('amount')}
-        amount={totalDueAmount}
-        currencyCode={currency_code}
-      />
-    </div>
+    <PageFormBigNumber
+      label={intl.get('amount')}
+      amount={totalDueAmount}
+      currencyCode={currency_code}
+    />
   );
 }
 

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

@@ -39,7 +39,6 @@ import {
   EstimateProjectSelectButton,
 } from './components';
 
-import { useObserveEstimateNoSettings } from './utils';
 import { useEstimateFormContext } from './EstimateFormProvider';
 
 /**
@@ -71,8 +70,7 @@ function EstimateFormHeader({
       });
     }
   };
-  // Syncs estimate number settings with the form.
-  useObserveEstimateNoSettings(estimateNumberPrefix, estimateNextNumber);
+
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>

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

@@ -1,18 +1,20 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
+import * as R from 'ramda';
 import { useFormikContext } from 'formik';
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
 import { useEstimateIsForeignCustomer } from './utils';
-
+import withSettings from '@/containers/Settings/withSettings';
+import { transactionNumber } from '@/utils';
 
 /**
  * Estimate exchange rate input field.
  * @returns {JSX.Element}
  */
- export function EstimateExchangeRateInputField({ ...props }) {
+export function EstimateExchangeRateInputField({ ...props }) {
   const currentOrganization = useCurrentOrganization();
   const { values } = useFormikContext();
 
@@ -35,6 +37,32 @@ import { useEstimateIsForeignCustomer } from './utils';
  * Estimate project select.
  * @returns {JSX.Element}
  */
- export function EstimateProjectSelectButton({ label }) {
+export function EstimateProjectSelectButton({ label }) {
   return <Button text={label ?? intl.get('select_project')} />;
 }
+
+/**
+ * Syncs the estimate auto-increment settings to estimate form.
+ * @returns {React.ReactNode}
+ */
+export const EstimateIncrementSyncSettingsToForm = R.compose(
+  withSettings(({ estimatesSettings }) => ({
+    estimateNextNumber: estimatesSettings?.nextNumber,
+    estimateNumberPrefix: estimatesSettings?.numberPrefix,
+    estimateAutoIncrement: estimatesSettings?.autoIncrement,
+  })),
+)(({ estimateNextNumber, estimateNumberPrefix, estimateAutoIncrement }) => {
+  const { setFieldValue } = useFormikContext();
+
+  useEffect(() => {
+    if (!estimateAutoIncrement) return null;
+
+    const estimateNo = transactionNumber(
+      estimateNumberPrefix,
+      estimateNextNumber,
+    );
+    setFieldValue('estimate_number', estimateNo);
+  }, [setFieldValue, estimateNumberPrefix, estimateNextNumber]);
+
+  return null;
+});

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

@@ -74,18 +74,6 @@ export const transformToEditForm = (estimate) => {
   };
 };
 
-/**
- * Syncs estimate number of the settings with the context form.
- */
-export const useObserveEstimateNoSettings = (prefix, nextNumber) => {
-  const { setFieldValue } = useFormikContext();
-
-  React.useEffect(() => {
-    const estimateNo = transactionNumber(prefix, nextNumber);
-    setFieldValue('estimate_number', estimateNo);
-  }, [setFieldValue, prefix, nextNumber]);
-};
-
 /**
  * Detarmines customers fast field when update.
  */