fix: the auto-increment of transactions.

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx

@@ -34,6 +34,7 @@ import {
   handleErrors,
   transformFormValuesToRequest,
 } from './utils';
+import { ReceiptSyncIncrementSettingsToForm } from './components';
 
 /**
  * Receipt form.
@@ -164,8 +165,8 @@ function ReceiptForm({
           <ReceiptItemsEntriesEditor />
           <ReceiptFormFooter />
           <ReceiptFormFloatingActions />
-
           <ReceiptFormDialogs />
+          <ReceiptSyncIncrementSettingsToForm />
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx

@@ -17,6 +17,21 @@ function ReceiptFormHeader({
   // #ownProps
   onReceiptNumberChanged,
 }) {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <ReceiptFormHeaderFields
+        onReceiptNumberChanged={onReceiptNumberChanged}
+      />
+      <ReceiptFormHeaderBigTotal />
+    </div>
+  );
+}
+
+/**
+ * The big total amount of receipt form.
+ * @returns {React.ReactNode}
+ */
+function ReceiptFormHeaderBigTotal() {
   const {
     values: { currency_code, entries },
   } = useFormikContext();
@@ -25,16 +40,11 @@ function ReceiptFormHeader({
   const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <ReceiptFormHeaderFields
-        onReceiptNumberChanged={onReceiptNumberChanged}
-      />
-      <PageFormBigNumber
-        label={intl.get('due_amount')}
-        amount={totalDueAmount}
-        currencyCode={currency_code}
-      />
-    </div>
+    <PageFormBigNumber
+      label={intl.get('due_amount')}
+      amount={totalDueAmount}
+      currencyCode={currency_code}
+    />
   );
 }
 

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -39,7 +39,6 @@ import { useReceiptFormContext } from './ReceiptFormProvider';
 import {
   accountsFieldShouldUpdate,
   customersFieldShouldUpdate,
-  useObserveReceiptNoSettings,
 } from './utils';
 import {
   ReceiptExchangeRateInputField,
@@ -56,8 +55,6 @@ function ReceiptFormHeader({
 
   // #withSettings
   receiptAutoIncrement,
-  receiptNextNumber,
-  receiptNumberPrefix,
 }) {
   const { accounts, customers, projects } = useReceiptFormContext();
 
@@ -78,9 +75,6 @@ function ReceiptFormHeader({
     }
   };
 
-  // Synsc receipt number settings with the form.
-  useObserveReceiptNoSettings(receiptNumberPrefix, receiptNextNumber);
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -255,8 +249,6 @@ export default compose(
   withDialogActions,
   withSettings(({ receiptSettings }) => ({
     receiptAutoIncrement: receiptSettings?.autoIncrement,
-    receiptNextNumber: receiptSettings?.nextNumber,
-    receiptNumberPrefix: receiptSettings?.numberPrefix,
   })),
 )(ReceiptFormHeader);
 

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx

@@ -3,9 +3,14 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
+import * as R from 'ramda';
+
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
 import { useReceiptIsForeignCustomer } from './utils';
+import { useUpdateEffect } from '@/hooks';
+import withSettings from '@/containers/Settings/withSettings';
+import { transactionNumber } from '@/utils';
 
 /**
  * Receipt exchange rate input field.
@@ -37,3 +42,31 @@ export function ReceiptExchangeRateInputField({ ...props }) {
 export function ReceiptProjectSelectButton({ label }) {
   return <Button text={label ?? intl.get('select_project')} />;
 }
+
+/**
+ * Syncs receipt auto-increment settings to form.
+ * @return {React.ReactNode}
+ */
+export const ReceiptSyncIncrementSettingsToForm = R.compose(
+  withSettings(({ receiptSettings }) => ({
+    receiptAutoIncrement: receiptSettings?.autoIncrement,
+    receiptNextNumber: receiptSettings?.nextNumber,
+    receiptNumberPrefix: receiptSettings?.numberPrefix,
+  })),
+)(({ receiptAutoIncrement, receiptNextNumber, receiptNumberPrefix }) => {
+  const { setFieldValue } = useFormikContext();
+
+  useUpdateEffect(() => {
+    if (!receiptAutoIncrement) return;
+
+    const receiptNo = transactionNumber(receiptNumberPrefix, receiptNextNumber);
+    setFieldValue('receipt_number', receiptNo);
+  }, [
+    setFieldValue,
+    receiptNumberPrefix,
+    receiptAutoIncrement,
+    receiptNextNumber,
+  ]);
+
+  return null;
+});

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx

@@ -77,15 +77,6 @@ export const transformToEditForm = (receipt) => {
   };
 };
 
-export const useObserveReceiptNoSettings = (prefix, nextNumber) => {
-  const { setFieldValue } = useFormikContext();
-
-  React.useEffect(() => {
-    const receiptNo = transactionNumber(prefix, nextNumber);
-    setFieldValue('receipt_number', receiptNo);
-  }, [setFieldValue, prefix, nextNumber]);
-};
-
 /**
  * Detarmines entries fast field should update.
  */