re-structure to monorepo.

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

@@ -0,0 +1,83 @@
+// @ts-nocheck
+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 ReferenceNumberFormContent from './ReferenceNumberFormContent';
+import { transformValuesToForm } from './utils';
+import { saveInvoke } from '@/utils';
+
+/**
+ * Reference number form.
+ */
+export default function ReferenceNumberForm({
+  onSubmit,
+  onClose,
+  initialValues,
+  description,
+  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],
+  );
+  // Handle the form submit.
+  const handleSubmit = (values, methods) => {
+    const parsed = transformValuesToForm(values);
+    saveInvoke(onSubmit, { ...parsed, ...values }, methods);
+  };
+
+  return (
+    <Formik
+      initialValues={formInitialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+      {({ isSubmitting, values }) => (
+        <Form className={'reference-number-form'}>
+          <div className={Classes.DIALOG_BODY}>
+            <p className="paragraph">{description}</p>
+            <ReferenceNumberFormContent />
+          </div>
+
+          <div className={Classes.DIALOG_FOOTER}>
+            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+              <Button onClick={onClose}>
+                <T id={'cancel'} />
+              </Button>
+              <Button
+                intent={Intent.PRIMARY}
+                type="submit"
+                loading={isSubmitting}
+              >
+                <T id={'submit'} />
+              </Button>
+            </div>
+          </div>
+
+          <FormObserver values={values} onChange={onChange} />
+        </Form>
+      )}
+    </Formik>
+  );
+}

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

@@ -0,0 +1,104 @@
+// @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 { inputIntent } from '@/utils';
+
+/**
+ * Reference number form content.
+ */
+export default function ReferenceNumberFormContent() {
+  const { values } = useFormikContext();
+
+  return (
+    <>
+      {/* ------------- Auto increment mode ------------- */}
+      <FastField name={'incrementMode'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <Radio
+            label={<T id={'auto_increment.field.auto'} />}
+            value="auto-increment"
+            onChange={() => {
+              form.setFieldValue('incrementMode', 'auto');
+            }}
+            checked={field.value === 'auto'}
+          />
+        )}
+      </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>
+
+      {/* ------------- Manual increment mode ------------- */}
+      <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');
+            }}
+            checked={field.value === 'manual'}
+          />
+        )}
+      </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>
+    </>
+  );
+}

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

@@ -0,0 +1,37 @@
+// @ts-nocheck
+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 };
+};