fix: auto-increment settings

packages/webapp/src/containers/JournalNumber/ReferenceNumberForm.tsx

@@ -2,15 +2,29 @@
 import React, { useMemo } from 'react';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
-import { FormattedMessage as T } from '@/components';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 
 import '@/style/pages/ReferenceNumber/ReferenceNumber.scss';
 
-import { FormObserver } from '@/components';
+import { FormattedMessage as T, FormObserver } from '@/components';
 import ReferenceNumberFormContent from './ReferenceNumberFormContent';
 import { transformValuesToForm } from './utils';
-import { saveInvoke } from '@/utils';
+import { saveInvoke, transformToForm } from '@/utils';
+
+const initialFormValues = {
+  incrementMode: 'auto',
+  numberPrefix: '',
+  nextNumber: '',
+  onceManualNumber: '',
+};
+
+// Validation schema.
+const validationSchema = Yup.object().shape({
+  incrementMode: Yup.string(),
+  numberPrefix: Yup.string(),
+  nextNumber: Yup.number(),
+  onceManualNumber: Yup.string(),
+});
 
 /**
  * Reference number form.
@@ -22,29 +36,15 @@ export default function ReferenceNumberForm({
   onClose,
   onChange,
 }) {
-  // Validation schema.
-  const validationSchema = Yup.object().shape({
-    incrementMode: Yup.string(),
-    numberPrefix: Yup.string(),
-    nextNumber: Yup.number(),
-    manualTransactionNo: Yup.string(),
-  });
   // Initial values.
-  const formInitialValues = useMemo(
-    () => ({
-      ...initialValues,
-      incrementMode:
-        initialValues.incrementMode === 'auto' &&
-        initialValues.manualTransactionNo
-          ? 'manual-transaction'
-          : initialValues.incrementMode,
-    }),
-    [initialValues],
-  );
+  const formInitialValues = {
+    ...initialFormValues,
+    ...transformToForm(initialValues, initialFormValues),
+  };
   // Handle the form submit.
   const handleSubmit = (values, methods) => {
     const parsed = transformValuesToForm(values);
-    saveInvoke(onSubmit, { ...parsed, ...values }, methods);
+    saveInvoke(onSubmit, { ...values, ...parsed }, methods);
   };
 
   return (

packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx

@@ -1,17 +1,15 @@
 // @ts-nocheck
 import React from 'react';
 import { FastField, useFormikContext } from 'formik';
-import { FormattedMessage as T } from '@/components';
 import { FormGroup, InputGroup, Radio } from '@blueprintjs/core';
-import { If, Row, Col, ErrorMessage } from '@/components';
+
+import { FormattedMessage as T, Row, Col, ErrorMessage } from '@/components';
 import { inputIntent } from '@/utils';
 
 /**
  * Reference number form content.
  */
 export default function ReferenceNumberFormContent() {
-  const { values } = useFormikContext();
-
   return (
     <>
       {/* ------------- Auto increment mode ------------- */}
@@ -27,54 +25,13 @@ export default function ReferenceNumberFormContent() {
           />
         )}
       </FastField>
-
-      <If condition={values.incrementMode === 'auto'}>
-        <Row>
-          {/* ------------- Prefix ------------- */}
-          <Col xs={4}>
-            <FastField name={'numberPrefix'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'prefix'} />}
-                  className={'form-group--'}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name={'numberPrefix'} />}
-                >
-                  <InputGroup
-                    intent={inputIntent({ error, touched })}
-                    {...field}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          {/* ------------- Next number ------------- */}
-          <Col xs={6}>
-            <FastField name={'nextNumber'}>
-              {({ form, field, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'next_number'} />}
-                  className={'form-group--next-number'}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name={'nextNumber'} />}
-                >
-                  <InputGroup
-                    intent={inputIntent({ error, touched })}
-                    {...field}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-        </Row>
-      </If>
+      <ReferenceNumberAutoIncrement />
 
       {/* ------------- Manual increment mode ------------- */}
       <FastField name={'incrementMode'}>
         {({ form, field, meta: { error, touched } }) => (
           <Radio
-            label={<T id={'auto_increment.field.manual_this_transaction'} />}
+            label={<T id={'auto_increment.field.manually'} />}
             value="manual"
             onChange={() => {
               form.setFieldValue('incrementMode', 'manual');
@@ -85,20 +42,70 @@ export default function ReferenceNumberFormContent() {
       </FastField>
 
       {/* ------------- Transaction manual increment mode ------------- */}
-      <If condition={values.manualTransactionNo}>
-        <FastField name={'incrementMode'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <Radio
-              label={<T id={'auto_increment.field.manually'} />}
-              value="manual"
-              onChange={() => {
-                form.setFieldValue('incrementMode', 'manual-transaction');
-              }}
-              checked={field.value === 'manual-transaction'}
-            />
-          )}
-        </FastField>
-      </If>
+      <ReferenceNumberManualOnce />
     </>
   );
 }
+
+function ReferenceNumberAutoIncrement() {
+  const { values } = useFormikContext();
+  if (!values.incrementMode === 'auto') return null;
+
+  return (
+    <Row>
+      {/* ------------- Prefix ------------- */}
+      <Col xs={4}>
+        <FastField name={'numberPrefix'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'prefix'} />}
+              className={'form-group--'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'numberPrefix'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      {/* ------------- Next number ------------- */}
+      <Col xs={6}>
+        <FastField name={'nextNumber'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'next_number'} />}
+              className={'form-group--next-number'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'nextNumber'} />}
+            >
+              <InputGroup intent={inputIntent({ error, touched })} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+    </Row>
+  );
+}
+
+function ReferenceNumberManualOnce() {
+  const { values } = useFormikContext();
+
+  // Do not show the field if the one manual transaction number is not presented.
+  if (!values.onceManualNumber) return null;
+
+  return (
+    <FastField name={'incrementMode'}>
+      {({ form, field, meta: { error, touched } }) => (
+        <Radio
+          label={<T id={'auto_increment.field.manual_this_transaction'} />}
+          value="manual"
+          onChange={() => {
+            form.setFieldValue('incrementMode', 'manual-transaction');
+          }}
+          checked={field.value === 'manual-transaction'}
+        />
+      )}
+    </FastField>
+  );
+}

packages/webapp/src/containers/JournalNumber/utils.tsx

@@ -5,6 +5,7 @@ import {
   transfromToSnakeCase,
   transactionNumber,
 } from '@/utils';
+import { omit } from 'lodash';
 
 export const defaultInvoiceNoSettings = {
   nextNumber: '',
@@ -13,7 +14,7 @@ export const defaultInvoiceNoSettings = {
 };
 
 export const transformSettingsToForm = (settings) => ({
-  ...settings,
+  ...omit(settings, ['autoIncrement']),
   incrementMode: settings.autoIncrement ? 'auto' : 'manual',
 });
 
@@ -25,13 +26,21 @@ export const transformFormToSettings = (values, group) => {
   return optionsMapToArray(options).map((option) => ({ ...option, group }));
 };
 
+/**
+ * Transaction number returns auto-increment if the increment mode is auto or
+ * returns empty string if the increment mode is manually or returns the entered 
+ * manual text if the increment mode is manual once just in this transaction.  
+ */
 export const transformValuesToForm = (values) => {
-  const incrementNumber =
+  const autoIncrementNumber = transactionNumber(
+    values.numberPrefix,
+    values.nextNumber,
+  );
+  const _transactionNumber =
     values.incrementMode === 'auto'
-      ? transactionNumber(values.numberPrefix, values.nextNumber)
-      : values.manualTransactionNo;
-
-  const manually = values.incrementMode === 'auto' ? false : true;
-
-  return { incrementNumber, manually };
+      ? autoIncrementNumber
+      : values.incrementMode === 'manual-transaction'
+      ? values.onceManualNumber
+      : '';
+  return { transactionNumber: _transactionNumber };
 };