fix(webapp): fix credit note and receipt auto-increment

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx

@@ -71,6 +71,8 @@ function MakeJournalEntriesForm({
           }
         : {
             ...defaultManualJournal,
+            // If the auto-increment mode is enabled, take the next journal
+            // number from the settings.
             ...(journalAutoIncrement && {
               journal_number: journalNumber,
             }),
@@ -127,7 +129,6 @@ function MakeJournalEntriesForm({
       transformErrors(errors, { setErrors });
       setSubmitting(false);
     };
-
     // Handle the request success.
     const handleSuccess = (errors) => {
       AppToaster.show({

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx

@@ -27,6 +27,7 @@ import {
   CurrencySelectList,
   FormattedMessage as T,
   FInputGroup,
+  FFormGroup,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
@@ -74,7 +75,7 @@ const MakeJournalTransactionNoField = R.compose(
     };
 
     return (
-      <FormGroup
+      <FFormGroup
         name={'journal_number'}
         label={<T id={'journal_no'} />}
         labelInfo={
@@ -91,10 +92,10 @@ const MakeJournalTransactionNoField = R.compose(
           <FInputGroup
             name={'journal_number'}
             fill={true}
-            value={values.journal_number}
             asyncControl={true}
             onBlur={handleJournalNoBlur}
             fastField={true}
+            onChange={() => {}}
           />
           <InputPrependButton
             buttonProps={{
@@ -108,7 +109,7 @@ const MakeJournalTransactionNoField = R.compose(
             }}
           />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
     );
   },
 );

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx

@@ -11,8 +11,14 @@ export default function MakeJournalFormDialogs() {
 
   // Update the form once the journal number form submit confirm.
   const handleConfirm = (settings) => {
+    // Set the invoice transaction no. that cames from dialog to the form.
+    // the `journal_number` will be empty except the increment mode is not auto.
     setFieldValue('journal_number', settings.transactionNumber);
+    setFieldValue('journal_number_manually', '');
+
+    if (settings.incrementMode !== 'auto') {
       setFieldValue('journal_number_manually', settings.transactionNumber);
+    }
   };
 
   return (

packages/webapp/src/containers/Accounting/MakeJournal/components.tsx

@@ -218,10 +218,13 @@ export const JournalSyncIncrementSettingsToForm = R.compose(
   const { setFieldValue } = useFormikContext();
 
   useUpdateEffect(() => {
+    // Do not update if the journal auto-increment mode is disabled.
     if (!journalAutoIncrement) return null;
 
-    const journalNo = transactionNumber(journalNumberPrefix, journalNextNumber);
+    setFieldValue(
-    setFieldValue('journal_number', journalNo);
+      'journal_number',
+      transactionNumber(journalNumberPrefix, journalNextNumber),
+    );
   }, [
     setFieldValue,
     journalNumberPrefix,

packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx

@@ -6,7 +6,6 @@ import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
 import {
-  transactionNumber,
   updateTableCell,
   repeatValue,
   transformToForm,
@@ -46,7 +45,7 @@ export const defaultEntry = {
 
 export const defaultManualJournal = {
   journal_number: '',
-  journal_number_manually: false,
+  journal_number_manually: '',
   journal_type: 'Journal',
   date: moment(new Date()).format('YYYY-MM-DD'),
   description: '',

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

@@ -162,7 +162,11 @@ function CreditNoteForm({
           <CreditNoteItemsEntriesEditorField />
           <CreditNoteFormFooter />
           <CreditNoteFloatingActions />
+
+          {/*-------- Dialogs --------*/}
           <CreditNoteFormDialogs />
+
+          {/*-------- Effects --------*/}
           <CreditNoteSyncIncrementSettingsToForm />
         </Form>
       </Formik>

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

@@ -11,8 +11,14 @@ export default function CreditNoteFormDialogs() {
 
   // Update the form once the credit number form submit confirm.
   const handleCreditNumberFormConfirm = (settings) => {
+    // Set the credit note transaction no. that cames from dialog to the form.
+    // the `credit_note_number` will be empty except the increment mode is not auto.
     setFieldValue('credit_note_number', settings.transactionNumber);
-    setFieldValue('credit_note_no_manually', settings.transactionNumber);
+    setFieldValue('credit_note_number_manually', '');
+
+    if (settings.incrementMode !== 'auto') {
+      setFieldValue('credit_note_number_manually', settings.transactionNumber);
+    }
   };
 
   return (

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

@@ -60,10 +60,12 @@ const CreditNoteTransactionNoField = R.compose(
     const handleCreditNumberChange = () => {
       openDialog('credit-number-form');
     };
-    // Handle credit no. field blur.
+    // Handle credit note no. field blur.
     const handleCreditNoBlur = (event) => {
       const newValue = event.target.value;
 
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
       if (values.credit_note_no !== newValue && creditAutoIncrement) {
         openDialog('credit-number-form', {
           initialFormValues: {
@@ -72,6 +74,8 @@ const CreditNoteTransactionNoField = R.compose(
           },
         });
       }
+      // Setting the credit note number to the form will be manually in case
+      // auto-increment is disable.
       if (!creditAutoIncrement) {
         setFieldValue('credit_note_number', newValue);
         setFieldValue('credit_note_number_manually', newValue);
@@ -92,6 +96,7 @@ const CreditNoteTransactionNoField = R.compose(
             value={values.credit_note_number}
             asyncControl={true}
             onBlur={handleCreditNoBlur}
+            onChange={() => {}}
           />
           <InputPrependButton
             buttonProps={{
@@ -165,7 +170,6 @@ export default function CreditNoteFormHeaderFields({}) {
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
-
       {/* ----------- Credit note date ----------- */}
       <FastField name={'credit_note_date'}>
         {({ form, field: { value }, meta: { error, touched } }) => (

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

@@ -45,10 +45,13 @@ export const CreditNoteSyncIncrementSettingsToForm = R.compose(
   const { setFieldValue } = useFormikContext();
 
   useEffect(() => {
+    // Do not update if the credit note auto-increment mode is disabled.
     if (!creditAutoIncrement) return;
 
-    const creditNo = transactionNumber(creditNumberPrefix, creditNextNumber);
+    setFieldValue(
-    setFieldValue('credit_note_number', creditNo);
+      'credit_note_number',
+      transactionNumber(creditNumberPrefix, creditNextNumber),
+    );
   }, [setFieldValue, creditNumberPrefix, creditNextNumber]);
 
   return null;

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

@@ -40,7 +40,8 @@ export const defaultCreditNote = {
   customer_id: '',
   credit_note_date: moment(new Date()).format('YYYY-MM-DD'),
   credit_note_number: '',
-  credit_note_no_manually: false,
+  // Holds the credit note number that entered manually only.
+  credit_note_number_manually: false,
   open: '',
   reference_no: '',
   note: '',

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

@@ -11,8 +11,14 @@ export default function ReceiptFormDialogs() {
 
   // Update the form once the receipt number form submit confirm.
   const handleReceiptNumberFormConfirm = (settings) => {
+    // Set the receipt transaction no. that cames from dialog to the form.
+    // the `receipt_no_manually` will be empty except the increment mode is not auto.
     setFieldValue('receipt_number', settings.transactionNumber);
+    setFieldValue('receipt_number_manually', '');
+
+    if (settings.incrementMode !== 'auto') {
       setFieldValue('receipt_number_manually', settings.transactionNumber);
+    }
   };
 
   return (

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

@@ -70,6 +70,8 @@ const ReceiptFormReceiptNumberField = R.compose(
     const handleReceiptNoBlur = (event) => {
       const newValue = event.target.value;
 
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
       if (values.receipt_number !== newValue && receiptAutoIncrement) {
         openDialog('receipt-number-form', {
           initialFormValues: {
@@ -78,6 +80,8 @@ const ReceiptFormReceiptNumberField = R.compose(
           },
         });
       }
+      // Setting the receipt number to the form will be manually in case
+      // auto-increment is disable.
       if (!receiptAutoIncrement) {
         setFieldValue('receipt_number', newValue);
         setFieldValue('receipt_number_manually', newValue);
@@ -98,6 +102,7 @@ const ReceiptFormReceiptNumberField = R.compose(
             value={values.receipt_number}
             asyncControl={true}
             onBlur={handleReceiptNoBlur}
+            onChange={() => {}}
           />
           <InputPrependButton
             buttonProps={{

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

@@ -57,10 +57,13 @@ export const ReceiptSyncIncrementSettingsToForm = R.compose(
   const { setFieldValue } = useFormikContext();
 
   useUpdateEffect(() => {
+    // Do not update if the receipt auto-increment mode is disabled.
     if (!receiptAutoIncrement) return;
 
-    const receiptNo = transactionNumber(receiptNumberPrefix, receiptNextNumber);
+    setFieldValue(
-    setFieldValue('receipt_number', receiptNo);
+      'receipt_number',
+      transactionNumber(receiptNumberPrefix, receiptNextNumber),
+    );
   }, [
     setFieldValue,
     receiptNumberPrefix,

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

@@ -36,6 +36,8 @@ export const defaultReceipt = {
   customer_id: '',
   deposit_account_id: '',
   receipt_number: '',
+  // Holds the receipt number that entered manually only.
+  receipt_number_manually: '',
   receipt_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
   receipt_message: '',