feat(design): fix issues in sidebar design.

feat(sales): reference number auto-increment optimizations.
fix(payments): payment receive/made statement.

client/src/containers/JournalNumber/ReferenceNumberForm.js

@@ -4,8 +4,12 @@ import { Formik, Form } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import { Button, Classes } from '@blueprintjs/core';
 import { Intent } from '@blueprintjs/core';
-import { saveInvoke } from 'utils';
+
+import 'style/pages/ReferenceNumber/ReferenceNumber.scss';
+
 import ReferenceNumberFormContent from './ReferenceNumberFormContent';
+import { transformValuesToForm } from './utils';
+import { saveInvoke } from 'utils';
 
 /**
  * Reference number form.
@@ -13,42 +17,45 @@ import ReferenceNumberFormContent from './ReferenceNumberFormContent';
 export default function ReferenceNumberForm({
   onSubmit,
   onClose,
-  initialPrefix,
-  initialNumber,
+  initialValues,
 }) {
+  // Validation schema.
   const validationSchema = Yup.object().shape({
-    // mode: Yup.string(),
-    number_prefix: Yup.string(),
-    next_number: Yup.number(),
+    incrementMode: Yup.string(),
+    numberPrefix: Yup.string(),
+    nextNumber: Yup.number(),
+    manualTransactionNo: Yup.string(),
   });
-
-  const initialValues = useMemo(
+  // Initial values.
+  const formInitialValues = useMemo(
     () => ({
-      number_prefix: initialPrefix || '',
-      next_number: initialNumber || '',
+      ...initialValues,
+      incrementMode:
+        initialValues.incrementMode === 'auto' &&
+        initialValues.manualTransactionNo
+          ? 'manual-transaction'
+          : initialValues.incrementMode,
     }),
-    [initialPrefix, initialNumber],
+    [initialValues],
   );
-
-  const handleSubmit = (values) => {
-    debugger;
-    saveInvoke(onSubmit, values);
+  // Handle the form submit.
+  const handleSubmit = (values, methods) => {
+    const parsed = transformValuesToForm(values);
+    saveInvoke(onSubmit, { ...parsed, ...values }, methods);
   };
 
   return (
     <Formik
-      initialValues={initialValues}
+      initialValues={formInitialValues}
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
     >
       {({ isSubmitting }) => (
-        <Form>
+        <Form className={'reference-number-form'}>
           <div className={Classes.DIALOG_BODY}>
             <p className="paragraph">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
-              tincidunt porta quam,
+              Your invoice numbers are set on auto-increment mod. Are you sure changing this setting?
             </p>
-
             <ReferenceNumberFormContent />
           </div>
 

client/src/containers/JournalNumber/ReferenceNumberFormContent.js

@@ -1,71 +1,103 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import { FormGroup, InputGroup, Radio } from '@blueprintjs/core';
-import { Row, Col, ErrorMessage } from 'components';
+import { If, Row, Col, ErrorMessage } from 'components';
 import { inputIntent } from 'utils';
 
 /**
  * Reference number form content.
  */
 export default function ReferenceNumberFormContent() {
+  const { values } = useFormikContext();
+
   return (
     <>
-      <FastField name={'mode'}>
+      {/* ------------- Auto increment mode ------------- */}
+      <FastField name={'incrementMode'}>
         {({ form, field, meta: { error, touched } }) => (
           <Radio
             label="Auto-incrementing invoice number."
             value="auto-increment"
-            {...field}
+            onChange={() => {
+              form.setFieldValue('incrementMode', 'auto');
+            }}
+            checked={field.value === 'auto'}
           />
         )}
       </FastField>
 
-      <Row>
-        {/* ------------- Prefix ------------- */}
-        <Col xs={6}>
-          <FastField name={'prefix'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'prefix'} />}
-                className={'form-group--'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'prefix'} />}
-              >
-                <InputGroup
+      <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 })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
+                  helperText={<ErrorMessage name={'numberPrefix'} />}
+                >
+                  <InputGroup
+                    intent={inputIntent({ error, touched })}
+                    {...field}
+                  />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
 
-        {/* ------------- Next number ------------- */}
-        <Col xs={6}>
-          <FastField name={'next_number'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'next_number'} />}
-                className={'form-group--'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'next_number'} />}
-              >
-                <InputGroup
+          {/* ------------- 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 })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-      </Row>
+                  helperText={<ErrorMessage name={'nextNumber'} />}
+                >
+                  <InputGroup
+                    intent={inputIntent({ error, touched })}
+                    {...field}
+                  />
+                </FormGroup>
+              )}
+            </FastField>
+          </Col>
+        </Row>
+      </If>
 
-      <FastField name={'mode'}>
+      {/* ------------- Manual increment mode ------------- */}
+      <FastField name={'incrementMode'}>
         {({ form, field, meta: { error, touched } }) => (
-          <Radio label="Manual entring for this transaction." value="manual" {...field} />
+          <Radio
+            label="I will enter them manully each time."
+            value="manual"
+            onChange={() => {
+              form.setFieldValue('incrementMode', 'manual');
+            }}
+            checked={field.value === 'manual'}
+          />
         )}
       </FastField>
+
+      {/* ------------- Transaction manual increment mode ------------- */}
+      <If condition={values.manualTransactionNo}>
+        <FastField name={'incrementMode'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <Radio
+              label="Manual entring for this transaction."
+              value="manual"
+              onChange={() => {
+                form.setFieldValue('incrementMode', 'manual-transaction');
+              }}
+              checked={field.value === 'manual-transaction'}
+            />
+          )}
+        </FastField>
+      </If>
     </>
   );
 }

client/src/containers/JournalNumber/utils.js

@@ -0,0 +1,36 @@
+import {
+  transformToForm,
+  optionsMapToArray,
+  transfromToSnakeCase,
+  transactionNumber,
+} from 'utils';
+
+export const defaultInvoiceNoSettings = {
+  nextNumber: '',
+  numberPrefix: '',
+  autoIncrement: '',
+};
+
+export const transformSettingsToForm = (settings) => ({
+  ...settings,
+  incrementMode: settings.autoIncrement === 'true' ? 'auto' : 'manual',
+});
+
+export const transformFormToSettings = (values, group) => {
+  const options = transfromToSnakeCase({
+    ...transformToForm(values, defaultInvoiceNoSettings),
+    autoIncrement: values.incrementMode === 'auto',
+  });
+  return optionsMapToArray(options).map((option) => ({ ...option, group }));
+};
+
+export const transformValuesToForm = (values) => {
+  const incrementNumber =
+    values.incrementMode === 'auto'
+      ? transactionNumber(values.numberPrefix, values.nextNumber)
+      : values.manualTransactionNo;
+
+  const manually = values.incrementMode === 'auto' ? false : true;
+
+  return { incrementNumber, manually };
+};