fix: the auto-increment of transactions.

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;
+});