fix: the auto-increment of transactions.

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx

@@ -38,6 +38,7 @@ import {
 
 import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+import { CreditNoteSyncIncrementSettingsToForm } from './components';
 
 /**
  * Credit note form.
@@ -162,6 +163,7 @@ function CreditNoteForm({
           <CreditNoteFormFooter />
           <CreditNoteFloatingActions />
           <CreditNoteFormDialogs />
+          <CreditNoteSyncIncrementSettingsToForm />
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx

@@ -13,6 +13,19 @@ import { PageFormBigNumber } from '@/components';
  * Credit note header.
  */
 function CreditNoteFormHeader() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+      <CreditNoteFormHeaderFields />
+      <CreditNoteFormBigNumber />
+    </div>
+  );
+}
+
+/**
+ * Big total number of credit note form header.
+ * @returns {React.ReactNode}
+ */
+function CreditNoteFormBigNumber() {
   const {
     values: { entries, currency_code },
   } = useFormikContext();
@@ -21,14 +34,11 @@ function CreditNoteFormHeader() {
   const totalAmount = React.useMemo(() => getEntriesTotal(entries), [entries]);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <CreditNoteFormHeaderFields />
-      <PageFormBigNumber
-        label={intl.get('credit_note.label_amount_to_credit')}
-        amount={totalAmount}
-        currencyCode={currency_code}
-      />
-    </div>
+    <PageFormBigNumber
+      label={intl.get('credit_note.label_amount_to_credit')}
+      amount={totalAmount}
+      currencyCode={currency_code}
+    />
   );
 }
 

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -21,7 +21,6 @@ import {
 } from '@/components';
 import {
   customerNameFieldShouldUpdate,
-  useObserveCreditNoSettings,
 } from './utils';
 
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
@@ -45,8 +44,6 @@ function CreditNoteFormHeaderFields({
 
   // #withSettings
   creditAutoIncrement,
-  creditNumberPrefix,
-  creditNextNumber,
 }) {
   // Credit note form context.
   const { customers } = useCreditNoteFormContext();
@@ -70,9 +67,6 @@ function CreditNoteFormHeaderFields({
     }
   };
 
-  // Syncs credit number settings with form.
-  useObserveCreditNoSettings(creditNumberPrefix, creditNextNumber);
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx

@@ -1,16 +1,18 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useFormikContext } from 'formik';
+import * as R from 'ramda';
 import { ExchangeRateInputGroup } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
 import { useCreditNoteIsForeignCustomer } from './utils';
-
+import withSettings from '@/containers/Settings/withSettings';
+import { transactionNumber } from '@/utils';
 
 /**
  * credit exchange rate input field.
  * @returns {JSX.Element}
  */
- export function CreditNoteExchangeRateInputField({ ...props }) {
+export function CreditNoteExchangeRateInputField({ ...props }) {
   const currentOrganization = useCurrentOrganization();
   const { values } = useFormikContext();
 
@@ -27,4 +29,27 @@ import { useCreditNoteIsForeignCustomer } from './utils';
       {...props}
     />
   );
-}
+}
+
+/**
+ * Syncs credit note auto-increment settings to form.
+ * @return {React.ReactNode}
+ */
+export const CreditNoteSyncIncrementSettingsToForm = R.compose(
+  withSettings(({ creditNoteSettings }) => ({
+    creditAutoIncrement: creditNoteSettings?.autoIncrement,
+    creditNextNumber: creditNoteSettings?.nextNumber,
+    creditNumberPrefix: creditNoteSettings?.numberPrefix,
+  })),
+)(({ creditAutoIncrement, creditNextNumber, creditNumberPrefix }) => {
+  const { setFieldValue } = useFormikContext();
+
+  useEffect(() => {
+    if (!creditAutoIncrement) return;
+
+    const creditNo = transactionNumber(creditNumberPrefix, creditNextNumber);
+    setFieldValue('credit_note_number', creditNo);
+  }, [setFieldValue, creditNumberPrefix, creditNextNumber]);
+
+  return null;
+});

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx

@@ -130,18 +130,6 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => {
   );
 };
 
-/**
- * Syncs invoice no. settings with form.
- */
-export const useObserveCreditNoSettings = (prefix, nextNumber) => {
-  const { setFieldValue } = useFormikContext();
-
-  React.useEffect(() => {
-    const creditNo = transactionNumber(prefix, nextNumber);
-    setFieldValue('credit_note_number', creditNo);
-  }, [setFieldValue, prefix, nextNumber]);
-};
-
 export const useSetPrimaryBranchToForm = () => {
   const { setFieldValue } = useFormikContext();
   const { branches, isBranchesSuccess } = useCreditNoteFormContext();