fix: the auto-increment of transactions.

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

@@ -32,6 +32,7 @@ import {
   transformErrors,
   transformValueToRequest,
 } from './utils';
+import { InvoiceNoSyncSettingsToForm } from './components';
 
 /**
  * Invoice form.
@@ -64,23 +65,19 @@ function InvoiceForm({
     invoiceNextNumber,
   );
   // Form initial values.
-  const initialValues = useMemo(
-    () => ({
-      ...(!isEmpty(invoice)
-        ? { ...transformToEditForm(invoice) }
-        : {
-            ...defaultInvoice,
-            ...(invoiceIncrementMode && {
+  const initialValues = {
+    ...(!isEmpty(invoice)
+      ? { ...transformToEditForm(invoice) }
+      : {
+          ...defaultInvoice,
+          ...(invoiceIncrementMode && {
               invoice_no: invoiceNumber,
             }),
             entries: orderingLinesIndexes(defaultInvoice.entries),
             currency_code: base_currency,
-            ...newInvoice,
-          }),
-    }),
-    [invoice, newInvoice, invoiceNumber, invoiceIncrementMode, base_currency],
-  );
-
+          ...newInvoice,
+        }),
+  };
   // Handles form submit.
   const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
     setSubmitting(true);
@@ -105,7 +102,6 @@ function InvoiceForm({
       delivered: submitPayload.deliver,
       from_estimate_id: estimateId,
     };
-
     // Handle the request success.
     const onSuccess = () => {
       AppToaster.show({
@@ -173,6 +169,7 @@ function InvoiceForm({
           <InvoiceFormFooter />
           <InvoiceFloatingActions />
           <InvoiceFormDialogs />
+          <InvoiceNoSyncSettingsToForm />
         </Form>
       </Formik>
     </div>

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import InvoiceNumberDialog from '@/containers/Dialogs/InvoiceNumberDialog';
 import { useFormikContext } from 'formik';
+import { DialogsName } from '@/constants/dialogs';
 
 /**
  * Invoice form dialogs.
@@ -16,11 +17,9 @@ export default function InvoiceFormDialogs() {
   };
 
   return (
-    <>
-      <InvoiceNumberDialog
-        dialogName={'invoice-number-form'}
-        onConfirm={handleInvoiceNumberFormConfirm}
-      />
-    </>
+    <InvoiceNumberDialog
+      dialogName={DialogsName.InvoiceNumberSettings}
+      onConfirm={handleInvoiceNumberFormConfirm}
+    />
   );
 }

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

@@ -28,7 +28,6 @@ import { momentFormatter, compose, tansformDateValue } from '@/utils';
 import { CLASSES } from '@/constants/classes';
 import { inputIntent, handleDateChange } from '@/utils';
 import {
-  useObserveInvoiceNoSettings,
   customerNameFieldShouldUpdate,
 } from './utils';
 
@@ -42,6 +41,7 @@ import {
   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';
@@ -55,8 +55,6 @@ function InvoiceFormHeaderFields({
 
   // #withSettings
   invoiceAutoIncrement,
-  invoiceNumberPrefix,
-  invoiceNextNumber,
 }) {
   // Invoice form context.
   const { customers, projects } = useInvoiceFormContext();
@@ -66,14 +64,14 @@ function InvoiceFormHeaderFields({
 
   // Handle invoice number changing.
   const handleInvoiceNumberChange = () => {
-    openDialog('invoice-number-form');
+    openDialog(DialogsName.InvoiceNumberSettings);
   };
   // Handle invoice no. field blur.
   const handleInvoiceNoBlur = (form, field) => (event) => {
     const newValue = event.target.value;
 
     if (field.value !== newValue && invoiceAutoIncrement) {
-      openDialog('invoice-number-form', {
+      openDialog(DialogsName.InvoiceNumberSettings, {
         initialFormValues: {
           manualTransactionNo: newValue,
           incrementMode: 'manual-transaction',
@@ -81,8 +79,6 @@ function InvoiceFormHeaderFields({
       });
     }
   };
-  // Syncs invoice number settings with form.
-  useObserveInvoiceNoSettings(invoiceNumberPrefix, invoiceNextNumber);
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -268,8 +264,6 @@ export default compose(
   withDialogActions,
   withSettings(({ invoiceSettings }) => ({
     invoiceAutoIncrement: invoiceSettings?.autoIncrement,
-    invoiceNextNumber: invoiceSettings?.nextNumber,
-    invoiceNumberPrefix: invoiceSettings?.numberPrefix,
   })),
 )(InvoiceFormHeaderFields);
 

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

@@ -1,11 +1,15 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 import { Button } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
 import { useInvoiceIsForeignCustomer } from './utils';
+import withSettings from '@/containers/Settings/withSettings';
+import { useUpdateEffect } from '@/hooks';
+import { transactionNumber } from '@/utils';
 
 /**
  * Invoice exchange rate input field.
@@ -37,3 +41,26 @@ export function InvoiceExchangeRateInputField({ ...props }) {
 export function InvoiceProjectSelectButton({ label }) {
   return <Button text={label ?? intl.get('select_project')} />;
 }
+
+/**
+ * Syncs invoice auto-increment settings to invoice form once update.
+ */
+export const InvoiceNoSyncSettingsToForm = R.compose(
+  withSettings(({ invoiceSettings }) => ({
+    invoiceAutoIncrement: invoiceSettings?.autoIncrement,
+    invoiceNextNumber: invoiceSettings?.nextNumber,
+    invoiceNumberPrefix: invoiceSettings?.numberPrefix,
+  })),
+)(({ invoiceAutoIncrement, invoiceNextNumber, invoiceNumberPrefix }) => {
+  const { setFieldValue } = useFormikContext();
+
+  useUpdateEffect(() => {
+    // Do not update if the invoice auto-increment is disabled.
+    if (!invoiceAutoIncrement) return null;
+
+    const invoiceNo = transactionNumber(invoiceNumberPrefix, invoiceNextNumber);
+    setFieldValue('invoice_no', invoiceNo);
+  }, [setFieldValue, invoiceNumberPrefix, invoiceNextNumber]);
+
+  return null;
+});

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

@@ -108,18 +108,6 @@ export const transformErrors = (errors, { setErrors }) => {
   }
 };
 
-/**
- * Syncs invoice no. settings with form.
- */
-export const useObserveInvoiceNoSettings = (prefix, nextNumber) => {
-  const { setFieldValue } = useFormikContext();
-
-  React.useEffect(() => {
-    const invoiceNo = transactionNumber(prefix, nextNumber);
-    setFieldValue('invoice_no', invoiceNo);
-  }, [setFieldValue, prefix, nextNumber]);
-};
-
 /**
  * Detarmines customer name field when should update.
  */