fix(ManualJournal): manual journal auto-increment dialog.

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
-import { defaultTo, isEmpty } from 'lodash';
+import { defaultTo, isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -36,6 +36,7 @@ function MakeJournalEntriesForm({
   // #withSettings
   journalNextNumber,
   journalNumberPrefix,
+  journalAutoIncrement,
   baseCurrency,
 }) {
   // Journal form context.
@@ -64,7 +65,9 @@ function MakeJournalEntriesForm({
           }
         : {
             ...defaultManualJournal,
-            journal_number: defaultTo(journalNumber, ''),
+            ...(journalAutoIncrement) && ({
+              journal_number: defaultTo(journalNumber, ''),
+            }),
             currency_code: defaultTo(baseCurrency, ''),
             entries: orderingLinesIndexes(defaultManualJournal.entries),
           }),
@@ -106,7 +109,14 @@ function MakeJournalEntriesForm({
       setSubmitting(false);
       return;
     }
-    const form = { ...values, publish: submitPayload.publish, entries };
+    const form = {
+      ...omit(values, ['journal_number', 'journal_number_manually']),
+      ...(values.journal_number_manually) && ({
+        journal_number: values.journal_number,
+      }),
+      entries,
+      publish: submitPayload.publish,
+    };
 
     // Handle the request error.
     const handleError = ({
@@ -182,6 +192,7 @@ export default compose(
   withSettings(({ manualJournalsSettings, organizationSettings }) => ({
     journalNextNumber: parseInt(manualJournalsSettings?.nextNumber, 10),
     journalNumberPrefix: manualJournalsSettings?.numberPrefix,
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
     baseCurrency: organizationSettings?.baseCurrency,
   })),
 )(MakeJournalEntriesForm);

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -11,7 +11,13 @@ import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { momentFormatter, tansformDateValue, saveInvoke } from 'utils';
+import {
+  momentFormatter,
+  compose,
+  inputIntent,
+  handleDateChange,
+  tansformDateValue,
+} from 'utils';
 import {
   Hint,
   FieldHint,
@@ -20,12 +26,10 @@ import {
   InputPrependButton,
   CurrencySelectList,
 } from 'components';
-
+import withSettings from 'containers/Settings/withSettings';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-
+import { useObserveJournalNoSettings } from './utils';
-import { compose, inputIntent, handleDateChange } from 'utils';
-
 /**
  * Make journal entries header.
  */
@@ -35,6 +39,11 @@ function MakeJournalEntriesHeader({
 
   // #withDialog
   openDialog,
+
+  // #withSettings
+  journalAutoIncrement,
+  journalNextNumber,
+  journalNumberPrefix,
 }) {
   const { currencies } = useMakeJournalFormContext();
 
@@ -43,11 +52,22 @@ function MakeJournalEntriesHeader({
     openDialog('journal-number-form', {});
   };
 
-  // Handle journal number field blur event.
+  // Handle journal number blur.
-  const handleJournalNumberChanged = (event) => {
+  const handleJournalNoBlur = (form, field) => (event) => {
-    saveInvoke(onJournalNumberChanged, event.currentTarget.value);
+    const newValue = event.target.value;
+
+    if (field.value !== newValue) {
+      openDialog('journal-number-form', {
+        initialFormValues: {
+          manualTransactionNo: newValue,
+          incrementMode: 'manual-transaction',
+        },
+      });
+    }
   };
 
+  useObserveJournalNoSettings(journalNumberPrefix, journalNextNumber);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/*------------ Posting date -----------*/}
@@ -100,8 +120,9 @@ function MakeJournalEntriesHeader({
             <ControlGroup fill={true}>
               <InputGroup
                 fill={true}
-                {...field}
+                value={field.value}
-                onBlur={handleJournalNumberChanged}
+                asyncControl={true}
+                onBlur={handleJournalNoBlur(form, field)}
               />
               <InputPrependButton
                 buttonProps={{
@@ -183,4 +204,9 @@ function MakeJournalEntriesHeader({
 
 export default compose(
   withDialogActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    journalAutoIncrement: manualJournalsSettings?.autoIncrement,
+    journalNextNumber: manualJournalsSettings?.nextNumber,
+    journalNumberPrefix: manualJournalsSettings?.numberPrefix,
+  })),
 )(MakeJournalEntriesHeader);

client/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
-import { transactionNumber } from 'utils';
 
 /**
  * Make journal form dialogs.
@@ -10,11 +9,9 @@ export default function MakeJournalFormDialogs() {
   const { setFieldValue } = useFormikContext();
 
   // Update the form once the journal number form submit confirm.
-  const handleConfirm = (values) => {
+  const handleConfirm = ({ manually, incrementNumber }) => {
-    setFieldValue(
+    setFieldValue('journal_number', incrementNumber || '');
-      'journal_number',
+    setFieldValue('journal_number_manually', manually);
-      transactionNumber(values.number_prefix, values.next_number),
-    );
   };
 
   return (

client/src/containers/Accounting/MakeJournal/MakeJournalProvider.js

@@ -17,19 +17,19 @@ const MakeJournalFormContext = createContext();
  */
 function MakeJournalProvider({ journalId, ...props }) {
   // Load the accounts list.
-  const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
   // Load the customers list.
   const {
     data: { customers },
-    isFetching: isCustomersLoading,
+    isLoading: isCustomersLoading,
   } = useCustomers();
 
   // Load the currencies list.
-  const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
   // Load the details of the given manual journal.
-  const { data: manualJournal, isFetching: isJournalLoading } = useJournal(
+  const { data: manualJournal, isLoading: isJournalLoading } = useJournal(
     journalId,
     {
       enabled: !!journalId,
@@ -40,7 +40,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isFetching: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettings();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});

client/src/containers/Accounting/MakeJournal/utils.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
-import { sumBy, setWith, toSafeInteger, get } from 'lodash';
+import { sumBy, setWith, toSafeInteger, get, values } from 'lodash';
 import moment from 'moment';
 
-import { updateTableRow, repeatValue, transformToForm } from 'utils';
+import {
+  transactionNumber,
+  updateTableRow,
+  repeatValue,
+  transformToForm,
+} from 'utils';
 import { AppToaster } from 'components';
 import { formatMessage } from 'services/intl';
+import { useFormikContext } from 'formik';
 
 const ERROR = {
   JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -153,3 +159,12 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
     });
   }
 };
+
+export const useObserveJournalNoSettings = (prefix, nextNumber) => {
+  const { setFieldValue } = useFormikContext();
+
+  React.useEffect(() => {
+    const journalNo = transactionNumber(prefix, nextNumber);  
+    setFieldValue('journal_number', journalNo);
+  }, [setFieldValue, prefix, nextNumber]);
+};

client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js

@@ -6,7 +6,11 @@ import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
-import { saveInvoke, compose, optionsMapToArray } from 'utils';
+import { saveInvoke, compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
 
 import 'style/pages/ManualJournal/JournalNumberDialog.scss'
 
@@ -17,29 +21,38 @@ function JournalNumberDialogContent({
   // #withSettings
   nextNumber,
   numberPrefix,
+  autoIncrement,
 
   // #withDialogActions
   closeDialog,
 
   // #ownProps
-  onConfirm
+  onConfirm,
+  initialValues
 }) {
   const { isLoading: isSettingsLoading } = useSettingsManualJournals();
   const { mutateAsync: saveSettingsMutate } = useSaveSettings();
 
   // Handle the form submit. 
   const handleSubmitForm = (values, { setSubmitting }) => {
-    const options = optionsMapToArray(values).map((option) => ({
+    // Transformes the form values to settings to save it.
-      key: option.key, ...option, group: 'manual_journals',
+    const options = transformFormToSettings(values, 'manual_journals');
-    }));
 
-    saveSettingsMutate({ options }).then(() => {
+    // Handle success.
+    const handleSuccess = () => {
       setSubmitting(false);
       closeDialog('journal-number-form');
       saveInvoke(onConfirm, values);
-    }).catch(() => {
+    };
+    // Handle errors.
+    const handleErrors = () => {
       setSubmitting(false);
-    });
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    saveSettingsMutate({ options }).then(handleSuccess).catch(handleErrors);
   };
 
   const handleClose = useCallback(() => {
@@ -49,8 +62,14 @@ function JournalNumberDialogContent({
   return (
     <DialogContent isLoading={isSettingsLoading}>
       <ReferenceNumberForm
-        initialNumber={nextNumber}
+        initialValues={{
-        initialPrefix={numberPrefix}
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
         onSubmit={handleSubmitForm}
         onClose={handleClose}
       />
@@ -63,5 +82,6 @@ export default compose(
   withSettings(({ manualJournalsSettings }) => ({
     nextNumber: manualJournalsSettings?.nextNumber,
     numberPrefix: manualJournalsSettings?.numberPrefix,
+    autoIncrement: manualJournalsSettings?.autoIncrement,
   })),
 )(JournalNumberDialogContent);

client/src/containers/Dialogs/JournalNumberDialog/index.js

@@ -8,14 +8,14 @@ const JournalNumberDialogContent = lazy(() => import('./JournalNumberDialogConte
 
 function JournalNumberDialog({
   dialogName,
-  payload = { id: null },
+  payload: { initialFormValues },
   isOpen,
   onConfirm
 }) {
-
   const handleConfirm = (values) => {
     saveInvoke(onConfirm, values)
   };
+
   return (
     <Dialog
       name={dialogName}
@@ -27,7 +27,7 @@ function JournalNumberDialog({
     >
       <DialogSuspense>
         <JournalNumberDialogContent
-          journalNumberId={payload.id}
+          initialValues={{ ...initialFormValues }}
           onConfirm={handleConfirm}
         />
       </DialogSuspense>