chrone: sperate client and server to different repos.

src/containers/Dialogs/AccountDialog/AccountDialogContent.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { AccountDialogProvider } from './AccountDialogProvider';
+import AccountDialogForm from './AccountDialogForm';
+
+/**
+ * Account dialog content.
+ */
+export default function AccountDialogContent({
+  dialogName,
+  accountId,
+  action,
+  parentAccountId,
+  accountType,
+}) {
+
+  return (
+    <AccountDialogProvider
+      dialogName={dialogName}
+      accountId={accountId}
+      action={action}
+      parentAccountId={parentAccountId}
+      accountType={accountType}
+    >
+      <AccountDialogForm />
+    </AccountDialogProvider>
+  );
+}

src/containers/Dialogs/AccountDialog/AccountDialogForm.js

@@ -0,0 +1,142 @@
+import React, { useCallback } from 'react';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+import { omit } from 'lodash';
+import { AppToaster } from 'components';
+
+import AccountDialogFormContent from './AccountDialogFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import {
+  EditAccountFormSchema,
+  CreateAccountFormSchema,
+} from './AccountForm.schema';
+import { compose, transformToForm } from 'utils';
+import { transformApiErrors, transformAccountToForm } from './utils';
+
+import 'style/pages/Accounts/AccountFormDialog.scss';
+import { useAccountDialogContext } from './AccountDialogProvider';
+
+// Default initial form values.
+const defaultInitialValues = {
+  account_type: '',
+  parent_account_id: '',
+  name: '',
+  code: '',
+  description: '',
+  subaccount: false,
+};
+
+/**
+ * Account form dialog content.
+ */
+function AccountFormDialogContent({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Account form context.
+  const {
+    editAccountMutate,
+    createAccountMutate,
+    account,
+
+    accountId,
+    action,
+    parentAccountId,
+    accountType,
+    isNewMode,
+    dialogName,
+  } = useAccountDialogContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isNewMode
+    ? CreateAccountFormSchema
+    : EditAccountFormSchema;
+
+  // Callbacks handles form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = omit(values, ['subaccount']);
+    const toastAccountName = values.code
+      ? `${values.code} - ${values.name}`
+      : values.name;
+
+    // Handle request success.
+    const handleSuccess = () => {
+      closeDialog(dialogName);
+
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'service_has_been_created_successfully'
+            : 'service_has_been_edited_successfully',
+          {
+            name: toastAccountName,
+            service: intl.get('account'),
+          },
+        ),
+        intent: Intent.SUCCESS,
+      });
+    };
+    // Handle request error.
+    const handleError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      const errorsTransformed = transformApiErrors(errors);
+      setErrors({ ...errorsTransformed });
+      setSubmitting(false);
+    };
+    if (accountId) {
+      editAccountMutate([accountId, form])
+        .then(handleSuccess)
+        .catch(handleError);
+    } else {
+      createAccountMutate({ ...form })
+        .then(handleSuccess)
+        .catch(handleError);
+    }
+  };
+
+  // Form initial values in create and edit mode.
+  const initialValues = {
+    ...defaultInitialValues,
+    /**
+     * We only care about the fields in the form. Previously unfilled optional
+     * values such as `notes` come back from the API as null, so remove those
+     * as well.
+     */
+    ...transformToForm(
+      transformAccountToForm(account, {
+        action,
+        parentAccountId,
+        accountType,
+      }),
+      defaultInitialValues,
+    ),
+  };
+
+  // Handles dialog close.
+  const handleClose = useCallback(() => {
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName]);
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <AccountDialogFormContent
+        dialogName={dialogName}
+        action={action}
+        onClose={handleClose}
+      />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(AccountFormDialogContent);

src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'components';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  Checkbox,
+} from '@blueprintjs/core';
+import {
+  If,
+  FieldRequiredHint,
+  Hint,
+  AccountsSelectList,
+  AccountsTypesSelect,
+} from 'components';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+import { inputIntent } from 'utils';
+import { compose } from 'redux';
+import { useAutofocus } from 'hooks';
+import { useAccountDialogContext } from './AccountDialogProvider';
+
+/**
+ * Account form dialogs fields.
+ */
+function AccountFormDialogFields({
+  // #ownProps
+  onClose,
+  action,
+}) {
+  const { values, isSubmitting } = useFormikContext();
+  const accountNameFieldRef = useAutofocus();
+
+  // Account form context.
+  const { accounts, accountsTypes } = useAccountDialogContext();
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        <Field name={'account_type'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'account_type'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--account-type', Classes.FILL)}
+              inline={true}
+              helperText={<ErrorMessage name="account_type" />}
+              intent={inputIntent({ error, touched })}
+            >
+              <AccountsTypesSelect
+                accountsTypes={accountsTypes}
+                selectedTypeId={value}
+                defaultSelectText={<T id={'select_account_type'} />}
+                onTypeSelected={(accountType) => {
+                  form.setFieldValue('account_type', accountType.key);
+                }}
+                disabled={action === 'edit' || action === 'new_child'}
+                popoverProps={{ minimal: true }}
+                popoverFill={true}
+              />
+            </FormGroup>
+          )}
+        </Field>
+
+        <FastField name={'name'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'account_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={'form-group--account-name'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="name" />}
+              inline={true}
+            >
+              <InputGroup
+                medium={true}
+                inputRef={(ref) => (accountNameFieldRef.current = ref)}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        <FastField name={'code'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'account_code'} />}
+              className={'form-group--account-code'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="code" />}
+              inline={true}
+              labelInfo={<Hint content={<T id="account_code_hint" />} />}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+
+        <Field name={'subaccount'} type={'checkbox'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={' '}
+              className={classNames('form-group--subaccount')}
+              intent={inputIntent({ error, touched })}
+              inline={true}
+            >
+              <Checkbox
+                inline={true}
+                label={
+                  <>
+                    <T id={'sub_account'} />
+                    <Hint />
+                  </>
+                }
+                name={'subaccount'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </Field>
+
+        <If condition={values.subaccount}>
+          <FastField name={'parent_account_id'}>
+            {({
+              form: { values, setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'parent_account'} />}
+                className={classNames(
+                  'form-group--parent-account',
+                  Classes.FILL,
+                )}
+                inline={true}
+                intent={inputIntent({ error, touched })}
+              >
+                <AccountsSelectList
+                  accounts={accounts}
+                  onAccountSelected={(account) => {
+                    setFieldValue('parent_account_id', account.id);
+                  }}
+                  defaultSelectText={<T id={'select_parent_account'} />}
+                  selectedAccountId={value}
+                  popoverFill={true}
+                  filterByTypes={values.account_type}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </If>
+
+        <FastField name={'description'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'description'} />}
+              className={'form-group--description'}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'description'} />}
+              inline={true}
+            >
+              <TextArea growVertically={true} height={280} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button disabled={isSubmitting} onClick={onClose} style={{ minWidth: '75px' }}>
+            <T id={'close'} />
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            loading={isSubmitting}
+            style={{ minWidth: '75px' }}
+            type="submit"
+          >
+            {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(
+  withAccounts(({ accountsTypes, accountsList }) => ({
+    accountsTypes,
+    accounts: accountsList,
+  })),
+)(AccountFormDialogFields);

src/containers/Dialogs/AccountDialog/AccountDialogProvider.js

@@ -0,0 +1,75 @@
+import React, { createContext, useContext } from 'react';
+import { DialogContent } from 'components';
+import {
+  useCreateAccount,
+  useAccountsTypes,
+  useAccount,
+  useAccounts,
+  useEditAccount,
+} from 'hooks/query';
+
+const AccountDialogContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function AccountDialogProvider({
+  accountId,
+  parentAccountId,
+  action,
+  accountType,
+
+  dialogName,
+  ...props
+}) {
+  // Create and edit account mutations.
+  const { mutateAsync: createAccountMutate } = useCreateAccount();
+  const { mutateAsync: editAccountMutate } = useEditAccount();
+
+  // Fetches accounts list.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Fetches accounts types.
+  const {
+    data: accountsTypes,
+    isLoading: isAccountsTypesLoading,
+  } = useAccountsTypes();
+
+  // Fetches the specific account details.
+  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+    enabled: !!accountId,
+  });
+
+  const isNewMode = !accountId;
+
+  // Provider payload.
+  const provider = {
+    dialogName,
+    accountId,
+    parentAccountId,
+    action,
+    accountType,
+
+    createAccountMutate,
+    editAccountMutate,
+    accounts,
+    accountsTypes,
+    account,
+
+    isAccountsLoading,
+    isNewMode
+  };
+
+  const isLoading =
+    isAccountsLoading || isAccountsTypesLoading || isAccountLoading;
+
+  return (
+    <DialogContent isLoading={isLoading}>
+      <AccountDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useAccountDialogContext = () => useContext(AccountDialogContext);
+
+export { AccountDialogProvider, useAccountDialogContext };

src/containers/Dialogs/AccountDialog/AccountForm.schema.js

@@ -0,0 +1,20 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  name: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('account_name_')),
+  code: Yup.string().nullable().min(3).max(6),
+  account_type: Yup.string()
+    .required()
+    .label(intl.get('account_type')),
+  description: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT).nullable().trim(),
+  parent_account_id: Yup.number().nullable(),
+});
+
+export const CreateAccountFormSchema = Schema;
+export const EditAccountFormSchema = Schema;

src/containers/Dialogs/AccountDialog/index.js

@@ -0,0 +1,45 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const AccountDialogContent = lazy(() => import('./AccountDialogContent'));
+
+/**
+ * Account form dialog.
+ */
+function AccountFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        (payload.action === 'edit') ?
+          (<T id={'edit_account'} />) :
+          (<T id={'new_account'} />)
+      }
+      className={'dialog--account-form'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <AccountDialogContent
+          dialogName={dialogName}
+          accountId={payload.id}
+          action={payload.action}
+          parentAccountId={payload.parentAccountId}
+          accountType={payload.accountType}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+)(AccountFormDialog);

src/containers/Dialogs/AccountDialog/utils.js

@@ -0,0 +1,25 @@
+import intl from 'react-intl-universal';
+
+export const transformApiErrors = (errors) => {
+  const fields = {};
+  if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
+    fields.code = intl.get('account_code_is_not_unique');
+  }
+  if (errors.find((e) => e.type === 'ACCOUNT.NAME.NOT.UNIQUE')) {
+    fields.name = intl.get('account_name_is_already_used');
+  }
+  return fields;
+};
+
+export const transformAccountToForm = (account, {
+  action,
+  parentAccountId,
+  accountType
+}) => {
+  return {
+    parent_account_id: action === 'new_child' ? parentAccountId : '',
+    account_type: action === 'new_child'? accountType : '',
+    subaccount: action === 'new_child' ? true : false,
+    ...account,
+  }
+}

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AllocateLandedCostDialogProvider } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostForm from './AllocateLandedCostForm';
+
+/**
+ * Allocate landed cost dialog content.
+ */
+export default function AllocateLandedCostDialogContent({
+  // #ownProps
+  dialogName,
+  billId,
+}) {
+  return (
+    <AllocateLandedCostDialogProvider billId={billId} dialogName={dialogName}>
+      <AllocateLandedCostForm />
+    </AllocateLandedCostDialogProvider>
+  );
+}

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useBill, useCreateLandedCost } from 'hooks/query';
+
+const AllocateLandedCostDialogContext = React.createContext();
+
+/**
+ * Allocate landed cost provider.
+ */
+function AllocateLandedCostDialogProvider({
+  billId,
+  query,
+  dialogName,
+  ...props
+}) {
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+
+  // Create landed cost mutations.
+  const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
+
+  // provider payload.
+  const provider = {
+    isBillLoading,
+    bill,
+    dialogName,
+    query,
+    createLandedCostMutate,
+    billId,
+  };
+
+  return (
+    <DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
+      <AllocateLandedCostDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useAllocateLandedConstDialogContext = () =>
+  React.useContext(AllocateLandedCostDialogContext);
+
+export {
+  AllocateLandedCostDialogProvider,
+  useAllocateLandedConstDialogContext,
+};

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MoneyFieldCell, DataTableEditable } from 'components';
+import { compose, updateTableCell } from 'utils';
+
+/**
+ * Allocate landed cost entries table.
+ */
+export default function AllocateLandedCostEntriesTable({
+  onUpdateData,
+  entries,
+}) {
+  // Allocate landed cost entries table columns.
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: intl.get('item'),
+        accessor: 'item.name',
+        disableSortBy: true,
+        width: '150',
+      },
+      {
+        Header: intl.get('quantity'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        disableSortBy: true,
+        width: '100',
+      },
+      {
+        Header: intl.get('cost'),
+        accessor: 'cost',
+        width: '150',
+        Cell: MoneyFieldCell,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+
+  // Handle update data.
+  const handleUpdateData = React.useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
+        entries,
+      );
+      onUpdateData(newRows);
+    },
+    [onUpdateData, entries],
+  );
+
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={entries}
+      payload={{
+        errors: [],
+        updateData: handleUpdateData,
+      }}
+    />
+  );
+}

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import { useFormikContext } from 'formik';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function AllocateLandedCostFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+  const { dialogName } = useAllocateLandedConstDialogContext();
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          style={{ minWidth: '85px' }}
+          type="submit"
+          loading={isSubmitting}
+        >
+          {<T id={'save'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(AllocateLandedCostFloatingActions);

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { sumBy } from 'lodash';
+
+import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
+
+import { AppToaster } from 'components';
+import { AllocateLandedCostFormSchema } from './AllocateLandedCostForm.schema';
+import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
+import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose, transformToForm } from 'utils';
+
+// Default form initial values.
+const defaultInitialValues = {
+  transaction_type: 'Bill',
+  transaction_date: moment(new Date()).format('YYYY-MM-DD'),
+  transaction_id: '',
+  transaction_entry_id: '',
+  amount: '',
+  allocation_method: 'quantity',
+  items: [
+    {
+      entry_id: '',
+      cost: '',
+    },
+  ],
+};
+
+/**
+ * Allocate landed cost form.
+ */
+function AllocateLandedCostForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, bill, billId, createLandedCostMutate } =
+    useAllocateLandedConstDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    items: bill.entries.map((entry) => ({
+      ...entry,
+      entry_id: entry.id,
+      cost: '',
+    })),
+  };
+  const amount = sumBy(initialValues.items, 'amount');
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(false);
+
+    // Filters the entries has no cost.
+    const entries = values.items
+      .filter((entry) => entry.entry_id && entry.cost)
+      .map((entry) => transformToForm(entry, defaultInitialValues.items[0]));
+
+    if (entries.length <= 0) {
+      AppToaster.show({ message: 'Something wrong!', intent: Intent.DANGER });
+      return;
+    }
+    const form = {
+      ...values,
+      items: entries,
+    };
+    // Handle the request success.
+    const onSuccess = (response) => {
+      AppToaster.show({
+        message: intl.get('the_landed_cost_has_been_created_successfully'),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      closeDialog(dialogName);
+    };
+
+    // Handle the request error.
+    const onError = () => {
+      setSubmitting(false);
+      AppToaster.show({ message: 'Something went wrong!', intent: Intent.DANGER });
+    };
+    createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
+  };
+
+  // Computed validation schema.
+  const validationSchema =  AllocateLandedCostFormSchema(amount);
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={AllocateLandedCostFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(AllocateLandedCostForm);

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js

@@ -0,0 +1,18 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+export const AllocateLandedCostFormSchema = (minAmount) =>
+  Yup.object().shape({
+    transaction_type: Yup.string().label(intl.get('transaction_type')),
+    transaction_date: Yup.date().label(intl.get('transaction_date')),
+    transaction_id: Yup.string().label(intl.get('transaction_number')),
+    transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
+    amount: Yup.number().max(minAmount).label(intl.get('amount')),
+    allocation_method: Yup.string().trim(),
+    items: Yup.array().of(
+      Yup.object().shape({
+        entry_id: Yup.number().nullable(),
+        cost: Yup.number().nullable(),
+      }),
+    ),
+  });

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormBody.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import AllocateLandedCostEntriesTable from './AllocateLandedCostEntriesTable';
+
+export default function AllocateLandedCostFormBody() {
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'items'}>
+        {({
+          form: { setFieldValue, values },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <AllocateLandedCostEntriesTable
+            entries={value}
+            onUpdateData={(newEntries) => {
+              setFieldValue('items', newEntries);
+            }}
+          />
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
+import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
+
+/**
+ * Allocate landed cost form content.
+ */
+export default function AllocateLandedCostFormContent() {
+  return (
+    <Form>
+      <AllocateLandedCostFormFields />
+      <AllocateLandedCostFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  RadioGroup,
+  Radio,
+  InputGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { FormattedMessage as T, If } from 'components';
+import intl from 'react-intl-universal';
+import { inputIntent, handleStringChange } from 'utils';
+import { FieldRequiredHint, ListSelect } from 'components';
+import { CLASSES } from 'common/classes';
+import allocateLandedCostType from 'common/allocateLandedCostType';
+import { useLandedCostTransaction } from 'hooks/query';
+
+import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
+import { getEntriesByTransactionId, allocateCostToEntries } from './utils';
+
+/**
+ * Allocate landed cost form fields.
+ */
+export default function AllocateLandedCostFormFields() {
+  const { values } = useFormikContext();
+
+  const {
+    data: { transactions },
+  } = useLandedCostTransaction(values.transaction_type);
+
+  // Retrieve entries of the given transaction id.
+  const transactionEntries = React.useMemo(
+    () => getEntriesByTransactionId(transactions, values.transaction_id),
+    [transactions, values.transaction_id],
+  );
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------Transaction type -----------*/}
+      <FastField name={'transaction_type'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'transaction_type'} />}
+            labelInfo={<FieldRequiredHint />}
+            helperText={<ErrorMessage name="transaction_type" />}
+            intent={inputIntent({ error, touched })}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_type')}
+          >
+            <ListSelect
+              items={allocateLandedCostType}
+              onItemSelect={(type) => {
+                setFieldValue('transaction_type', type.value);
+                setFieldValue('transaction_id', '');
+                setFieldValue('transaction_entry_id', '');
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              textProp={'name'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Transaction  -----------*/}
+      <Field name={'transaction_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'transaction_id'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="transaction_id" />}
+            className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
+            inline={true}
+          >
+            <ListSelect
+              items={transactions}
+              onItemSelect={({ id }) => {
+                form.setFieldValue('transaction_id', id);
+                form.setFieldValue('transaction_entry_id', '');
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'id'}
+              textProp={'name'}
+              labelProp={'id'}
+              defaultText={intl.get('Select transaction')}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
+
+      {/*------------ Transaction line  -----------*/}
+      <If condition={transactionEntries.length > 0}>
+        <Field name={'transaction_entry_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'transaction_line'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="transaction_entry_id" />}
+              className={classNames(
+                CLASSES.FILL,
+                'form-group--transaction_entry_id',
+              )}
+              inline={true}
+            >
+              <ListSelect
+                items={transactionEntries}
+                onItemSelect={({ id, amount }) => {
+                  const { items, allocation_method } = form.values;
+
+                  form.setFieldValue('amount', amount);
+                  form.setFieldValue('transaction_entry_id', id);
+
+                  form.setFieldValue(
+                    'items',
+                    allocateCostToEntries(amount, allocation_method, items),
+                  );
+                }}
+                filterable={false}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                defaultText={intl.get('Select transaction entry')}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </If>
+
+      {/*------------ Amount -----------*/}
+      <FastField name={'amount'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'amount'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            className={'form-group--amount'}
+            inline={true}
+          >
+            <InputGroup
+              {...field}
+              onBlur={(e) => {
+                const amount = e.target.value;
+                const { allocation_method, items } = form.values;
+
+                form.setFieldValue(
+                  'items',
+                  allocateCostToEntries(amount, allocation_method, items),
+                );
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Allocation method -----------*/}
+      <Field name={'allocation_method'}>
+        {({ form, field: { value }, meta: { touched, error } }) => (
+          <FormGroup
+            medium={true}
+            label={<T id={'allocation_method'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--allocation_method'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="allocation_method" />}
+            inline={true}
+          >
+            <RadioGroup
+              onChange={handleStringChange((_value) => {
+                const { amount, items, allocation_method } = form.values;
+
+                form.setFieldValue('allocation_method', _value);
+                form.setFieldValue(
+                  'items',
+                  allocateCostToEntries(amount, allocation_method, items),
+                );
+              })}
+              selectedValue={value}
+              inline={true}
+            >
+              <Radio label={<T id={'quantity'} />} value="quantity" />
+              <Radio label={<T id={'valuation'} />} value="value" />
+            </RadioGroup>
+          </FormGroup>
+        )}
+      </Field>
+
+      {/*------------ Allocate Landed cost Table -----------*/}
+      <AllocateLandedCostFormBody />
+    </div>
+  );
+}

src/containers/Dialogs/AllocateLandedCostDialog/index.js

@@ -0,0 +1,36 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const AllocateLandedCostDialogContent = lazy(() =>
+  import('./AllocateLandedCostDialogContent'),
+);
+
+/**
+ * Allocate landed cost dialog.
+ */
+function AllocateLandedCostDialog({
+  dialogName,
+  payload = { billId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'allocate_landed_coast'} />}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className="dialog--allocate-landed-cost-form"
+    >
+      <DialogSuspense>
+        <AllocateLandedCostDialogContent
+          billId={payload.billId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(AllocateLandedCostDialog);

src/containers/Dialogs/AllocateLandedCostDialog/utils.js

@@ -0,0 +1,62 @@
+import { sumBy, round } from 'lodash';
+import * as R from 'ramda';
+/**
+ * Retrieve transaction entries of the given transaction id.
+ */
+export function getEntriesByTransactionId(transactions, id) {
+  const transaction = transactions.find((trans) => trans.id === id);
+  return transaction ? transaction.entries : [];
+}
+
+export function allocateCostToEntries(total, allocateType, entries) {
+  return R.compose(
+    R.when(
+      R.always(allocateType === 'value'),
+      R.curry(allocateCostByValue)(total),
+    ),
+    R.when(
+      R.always(allocateType === 'quantity'),
+      R.curry(allocateCostByQuantity)(total),
+    ),
+  )(entries);
+}
+
+/**
+ * Allocate total cost on entries on value.
+ * @param {*} entries
+ * @param {*} total
+ * @returns
+ */
+export function allocateCostByValue(total, entries) {
+  const totalAmount = sumBy(entries, 'amount');
+
+  const _entries = entries.map((entry) => ({
+    ...entry,
+    percentageOfValue: entry.amount / totalAmount,
+  }));
+
+  return _entries.map((entry) => ({
+    ...entry,
+    cost: round(entry.percentageOfValue * total, 2),
+  }));
+}
+
+/**
+ * Allocate total cost on entries by quantity.
+ * @param {*} entries
+ * @param {*} total
+ * @returns
+ */
+export function allocateCostByQuantity(total, entries) {
+  const totalQuantity = sumBy(entries, 'quantity');
+
+  const _entries = entries.map((entry) => ({
+    ...entry,
+    percentageOfQuantity: entry.quantity / totalQuantity,
+  }));
+
+  return _entries.map((entry) => ({
+    ...entry,
+    cost: round(entry.percentageOfQuantity * total, 2),
+  }));
+}

src/containers/Dialogs/BillNumberDialog/BillNumberDialogContent.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useQuery, queryCache } from 'react-query';
+
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+import withBillActions from 'containers/Purchases/Bill/withBillActions';
+
+import { compose, optionsMapToArray } from 'utils';
+
+/**
+ * bill number dialog's content.
+ */
+
+function BillNumberDialogContent({
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+
+  // #withSettingsActions
+  requestFetchOptions,
+  requestSubmitOptions,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #withBillActions
+  setBillNumberChanged,
+}) {
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    const options = optionsMapToArray(values).map((option) => {
+      return { key: option.key, ...option, group: 'bills' };
+    });
+
+    requestSubmitOptions({ options })
+      .then(() => {
+        setSubmitting(false);
+        closeDialog('bill-number-form');
+        setBillNumberChanged(true);
+
+        setTimeout(() => {
+          queryCache.invalidateQueries('settings');
+        }, 250);
+      })
+      .catch(() => {
+        setSubmitting(false);
+      });
+  };
+
+  const handleClose = () => {
+    closeDialog('bill-number-form');
+  };
+
+  return (
+    <DialogContent isLoading={fetchSettings.isFetching}>
+      <ReferenceNumberForm
+        initialNumber={nextNumber}
+        initialPrefix={numberPrefix}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ billsettings }) => ({
+    nextNumber: billsettings?.next_number,
+    numberPrefix: billsettings?.number_prefix,
+  })),
+  withBillActions,
+)(BillNumberDialogContent);

src/containers/Dialogs/BillNumberDialog/index.js

@@ -0,0 +1,26 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const BillNumberDialogContent = lazy(() => import('./BillNumberDialogContent'));
+
+function BillNumberDialog({ dialogName, payload = { id: null }, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'bill_number_settings'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--journal-number-settings'}
+    >
+      <DialogSuspense>
+        <BillNumberDialogContent billNumberId={payload.id} />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(BillNumberDialog);

src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateDialogContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import ContactDuplicateForm from './ContactDuplicateForm';
+import { ContactDuplicateProvider } from './ContactDuplicateProvider';
+
+import 'style/pages/ContactDuplicate/ContactDuplicateDialog.scss';
+
+export default function ContactDuplicateDialogContent({
+  // #ownProp
+  contact,
+  dialogName,
+}) {
+  return (
+    <ContactDuplicateProvider dialogName={dialogName} contactId={contact}>
+      <ContactDuplicateForm />
+    </ContactDuplicateProvider>
+  );
+}

src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { inputIntent } from 'utils';
+import { ListSelect, FieldRequiredHint } from 'components';
+import { Button, FormGroup, Intent, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useHistory } from 'react-router-dom';
+import { useContactDuplicateFromContext } from './ContactDuplicateProvider';
+
+import Contacts from 'common/contactsOptions';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function ContactDuplicateForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const history = useHistory();
+
+  const { dialogName, contactId } = useContactDuplicateFromContext();
+
+  const validationSchema = Yup.object().shape({
+    contact_type: Yup.string()
+      .required()
+      .label(intl.get('contact_type_')),
+  });
+
+  const initialValues = {
+    contact_type: '',
+  };
+
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    closeDialog(dialogName);
+  };
+
+  // Handle form submit.
+  const handleFormSubmit = (values) => {
+    closeDialog(dialogName);
+    history.push(`${values.contact_type}/new?duplicate=${contactId}`, {
+      action: contactId,
+    });
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      {({ isSubmitting }) => (
+        <Form>
+          <div className={Classes.DIALOG_BODY}>
+            <p class="paragraph">
+              <T id={'are_you_sure_want_to_duplicate'} />
+            </p>
+
+            {/*------------ Contact Type -----------*/}
+            <Field name={'contact_type'}>
+              {({ form, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'contact_type'} />}
+                  labelInfo={<FieldRequiredHint />}
+                  intent={inputIntent({ error, touched })}
+                  className={'form-group--select-list'}
+                  helperText={<ErrorMessage name="contact_type" />}
+                >
+                  <ListSelect
+                    items={Contacts}
+                    onItemSelect={({ path }) =>
+                      form.setFieldValue('contact_type', path)
+                    }
+                    defaultText={<T id={'select_contact'} />}
+                    textProp={'name'}
+                    selectedItemProp={'name'}
+                    filterable={false}
+                    popoverProps={{ minimal: true }}
+                  />
+                </FormGroup>
+              )}
+            </Field>
+          </div>
+
+          <div className={Classes.DIALOG_FOOTER}>
+            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+              <Button onClick={handleCancelClick}>
+                <T id={'cancel'} />
+              </Button>
+
+              <Button
+                intent={Intent.PRIMARY}
+                type="submit"
+                disabled={isSubmitting}
+              >
+                <T id={'duplicate'} />
+              </Button>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ContactDuplicateForm);

src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateProvider.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DialogContent } from 'components';
+
+const ContactDuplicateContext = React.createContext();
+
+/**
+ *  contact duplicate provider.
+ */
+function ContactDuplicateProvider({ contactId, dialogName, ...props }) {
+  // Provider state.
+  const provider = {
+    dialogName,
+    contactId,
+  };
+
+  return (
+    <DialogContent name={'contact-duplicate'}>
+      <ContactDuplicateContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useContactDuplicateFromContext = () =>
+  React.useContext(ContactDuplicateContext);
+
+export { ContactDuplicateProvider, useContactDuplicateFromContext };

src/containers/Dialogs/ContactDuplicateDialog/index.js

@@ -0,0 +1,33 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ContactDialogContent = lazy(() =>
+  import('./ContactDuplicateDialogContent'),
+);
+/**
+ * Contact duplicate dialog.
+ */
+function ContactDuplicateDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'duplicate_contact'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      className={'dialog--contact-duplicate'}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <ContactDialogContent
+          dialogName={dialogName}
+          contact={payload.contactId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ContactDuplicateDialog);

src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.js

@@ -0,0 +1,105 @@
+import React, { useMemo } from 'react';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { AppToaster } from 'components';
+import CurrencyFormContent from './CurrencyFormContent';
+
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+import {
+  CreateCurrencyFormSchema,
+  EditCurrencyFormSchema,
+} from './CurrencyForm.schema';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  currency_name: '',
+  currency_code: '',
+  currency_sign: '',
+};
+
+/**
+ * Currency form.
+ */
+function CurrencyForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    createCurrencyMutate,
+    editCurrencyMutate,
+    dialogName,
+    currency,
+    isEditMode,
+  } = useCurrencyFormContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isEditMode
+    ? EditCurrencyFormSchema
+    : CreateCurrencyFormSchema;
+
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      // ...(isEditMode && pick(currency, Object.keys(defaultInitialValues))),
+      ...transformToForm(currency, defaultInitialValues),
+    }),
+    [],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    // Handle the request success.
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          isEditMode
+            ? 'the_currency_has_been_edited_successfully'
+            : 'the_currency_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors.find((e) => e.type === 'CURRENCY_CODE_EXISTS')) {
+        AppToaster.show({
+          message: 'The given currency code is already exists.',
+          intent: Intent.DANGER,
+        });
+      }
+      setSubmitting(false);
+    };
+    if (isEditMode) {
+      editCurrencyMutate([currency.id, values]).then(onSuccess).catch(onError);
+    } else {
+      createCurrencyMutate(values).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <CurrencyFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(CurrencyForm);

src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.schema.js

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  currency_name: Yup.string()
+    .required()
+    .label(intl.get('currency_name_')),
+  currency_code: Yup.string()
+    .max(4)
+    .required()
+    .label(intl.get('currency_code_')),
+  currency_sign: Yup.string().required(),
+});
+
+export const CreateCurrencyFormSchema = Schema;
+export const EditCurrencyFormSchema = Schema;

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormContent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import CurrencyFormFields from './CurrencyFormFields';
+import CurrencyFormFooter from './CurrencyFormFooter';
+
+export default function CurrencyFormContent() {
+  return (
+    <Form>
+      <CurrencyFormFields />
+      <CurrencyFormFooter />
+    </Form>
+  );
+}

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormDialogContent.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CurrencyFormProvider } from './CurrencyFormProvider';
+
+import CurrencyForm from './CurrencyForm';
+import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
+
+import { compose } from 'utils';
+import 'style/pages/Currency/CurrencyFormDialog.scss';
+
+function CurrencyFormDialogContent({
+  // #ownProp
+  action,
+  currencyCode,
+  dialogName,
+}) {
+  return (
+    <CurrencyFormProvider
+      isEditMode={action}
+      currency={currencyCode}
+      dialogName={dialogName}
+    >
+      <CurrencyForm />
+    </CurrencyFormProvider>
+  );
+}
+
+export default compose(withCurrencyDetail)(CurrencyFormDialogContent);

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
+import { FastField } from 'formik';
+import { FormattedMessage as T } from 'components';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+import { ErrorMessage, FieldRequiredHint, ListSelect } from 'components';
+
+import { useAutofocus } from 'hooks';
+import { inputIntent, currenciesOptions } from 'utils';
+
+/**
+ * Currency form fields.
+ */
+export default function CurrencyFormFields() {
+  const currencyNameFieldRef = useAutofocus();
+
+  const { isEditMode } = useCurrencyFormContext();
+
+  // Filter currency code
+  const filterCurrencyCode = (query, currency, _index, exactMatch) => {
+    const normalizedTitle = currency.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <FastField name={'currency_code'}>
+        {({
+          form: { setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'currency_code'} />}
+            className={classNames(CLASSES.FILL, 'form-group--type')}
+          >
+            <ListSelect
+              items={currenciesOptions}
+              selectedItemProp={'currency_code'}
+              selectedItem={value}
+              textProp={'formatted_name'}
+              defaultText={<T id={'select_currency_code'} />}
+              onItemSelect={(currency) => {
+                setFieldValue('currency_code', currency.currency_code);
+                setFieldValue('currency_name', currency.name);
+                setFieldValue('currency_sign', currency.symbol);
+              }}
+              itemPredicate={filterCurrencyCode}
+              disabled={isEditMode}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency name ----------- */}
+      <FastField name={'currency_name'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--currency-name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_name" />}
+            // inline={true}
+          >
+            <InputGroup
+              inputRef={(ref) => (currencyNameFieldRef.current = ref)}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency Code ----------- */}
+      <FastField name={'currency_sign'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_sign'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--currency-sign'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_sign" />}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFooter.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useCurrencyFormContext } from './CurrencyFormProvider';
+
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Currency dialog form footer action.
+ */
+function CurrencyFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName, isEditMode } = useCurrencyFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleClose} disabled={isSubmitting}>
+          <T id={'cancel'} />
+        </Button>
+        <Button intent={Intent.PRIMARY} type="submit" loading={isSubmitting}>
+          {!isEditMode ? <T id={'submit'} /> : <T id={'edit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(CurrencyFormFooter);

src/containers/Dialogs/CurrencyFormDialog/CurrencyFormProvider.js

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+import { useEditCurrency, useCreateCurrency } from 'hooks/query';
+import { DialogContent } from 'components';
+
+const CurrencyFormContext = createContext();
+
+/**
+ * Currency Form page provider.
+ */
+function CurrencyFormProvider({ isEditMode, currency, dialogName, ...props }) {
+  // Create and edit item currency mutations.
+  const { mutateAsync: createCurrencyMutate } = useCreateCurrency();
+  const { mutateAsync: editCurrencyMutate } = useEditCurrency();
+
+  // Provider state.
+  const provider = {
+    createCurrencyMutate,
+    editCurrencyMutate,
+    dialogName,
+    currency,
+    isEditMode,
+  };
+
+  return (
+    <DialogContent name={'currency-form'}>
+      <CurrencyFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useCurrencyFormContext = () => React.useContext(CurrencyFormContext);
+
+export { CurrencyFormProvider, useCurrencyFormContext };

src/containers/Dialogs/CurrencyFormDialog/index.js

@@ -0,0 +1,46 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const CurrencyFormDialogContent = lazy(() =>
+  import('./CurrencyFormDialogContent'),
+);
+
+/**
+ * Currency form dialog.
+ */
+function CurrencyFormDialog({
+  dialogName,
+  payload = { action: '', id: null, currency: '' },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_currency'} />
+        ) : (
+          <T id={'new_currency'} />
+        )
+      }
+      className={'dialog--currency-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <CurrencyFormDialogContent
+          dialogName={dialogName}
+          currencyCode={payload.currency}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(CurrencyFormDialog);

src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
+import { DialogContent } from 'components';
+import { useSaveSettings, useSettingsEstimates } from 'hooks/query';
+
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
+
+import { compose, saveInvoke } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+/**
+ * Estimate number dialog's content.
+ */
+function EstimateNumberDialogContent({
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProps
+  initialValues,
+  onConfirm,
+}) {
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Fetches the estimates settings.
+  const { isLoading: isSettingsLoading } = useSettingsEstimates();
+
+  // Mutates the settings.
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'sales_estimates');
+
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('estimate-number-form');
+      saveInvoke(onConfirm, values);
+    };
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    saveSettingsMutate({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  const handleClose = useCallback(() => {
+    closeDialog('estimate-number-form');
+  }, [closeDialog]);
+
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('estimate.auto_increment.auto')
+      : intl.get('estimate.auto_increment.manually');
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+        description={description}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ estimatesSettings }) => ({
+    nextNumber: estimatesSettings?.nextNumber,
+    numberPrefix: estimatesSettings?.numberPrefix,
+    autoIncrement: estimatesSettings?.autoIncrement,
+  })),
+)(EstimateNumberDialogContent);

src/containers/Dialogs/EstimateNumberDialog/index.js

@@ -0,0 +1,42 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { saveInvoke, compose } from 'utils';
+
+const EstimateNumberDialogContent = lazy(() =>
+  import('./EstimateNumberDialogContent'),
+);
+
+/**
+ * Estimate number dialog.
+ */
+function EstimateNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'Estimate_number_settings'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--journal-number-settings'}
+    >
+      <DialogSuspense>
+        <EstimateNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}/>
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(EstimateNumberDialog);

src/containers/Dialogs/EstimatePdfPreviewDialog/EstimatePdfPreviewDialogContent.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { AnchorButton } from '@blueprintjs/core';
+
+import { DialogContent, PdfDocumentPreview, T } from 'components';
+import { usePdfEstimate } from 'hooks/query';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function EstimatePdfPreviewDialogContent({
+  subscriptionForm: { estimateId },
+  dialogName,
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isLoading, pdfUrl } = usePdfEstimate(estimateId);
+
+  return (
+    <DialogContent>
+      <div class="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'estimate.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(withDialogActions)(EstimatePdfPreviewDialogContent);

src/containers/Dialogs/EstimatePdfPreviewDialog/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { T, Dialog, DialogSuspense } from 'components';
+import { CLASSES } from 'common/classes';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { compose } from 'utils';
+
+// Lazy loading the content.
+const PdfPreviewDialogContent = React.lazy(() =>
+  import('./EstimatePdfPreviewDialogContent'),
+);
+
+/**
+ * Estimate PDF preview dialog.
+ */
+function EstimatePdfPreviewDialog({
+  dialogName,
+  payload = { estimateId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'estimate_preview.dialog.title'} />}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <PdfPreviewDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(EstimatePdfPreviewDialog);

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.js

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import moment from 'moment';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { AppToaster } from 'components';
+import {
+  CreateExchangeRateFormSchema,
+  EditExchangeRateFormSchema,
+} from './ExchangeRateForm.schema';
+import ExchangeRateFormContent from './ExchangeRateFormContent';
+import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  exchange_rate: '',
+  currency_code: '',
+  date: moment(new Date()).format('YYYY-MM-DD'),
+};
+
+/**
+ * Exchange rate form.
+ */
+function ExchangeRateForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    createExchangeRateMutate,
+    editExchangeRateMutate,
+    isNewMode,
+    dialogName,
+    exchangeRate,
+  } = useExchangeRateFromContext();
+
+  // Form validation schema in create and edit mode.
+  const validationSchema = isNewMode
+    ? CreateExchangeRateFormSchema
+    : EditExchangeRateFormSchema;
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      ...transformToForm(exchangeRate, defaultInitialValues),
+    }),
+    [],
+  );
+
+  // Transformers response errors.
+  const transformErrors = (errors, { setErrors }) => {
+    if (
+      errors.find((error) => error.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
+    ) {
+      setErrors({
+        exchange_rate: intl.get(
+          'there_is_exchange_rate_in_this_date_with_the_same_currency',
+        ),
+      });
+    }
+  };
+
+  // Handle the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          !isNewMode
+            ? 'the_exchange_rate_has_been_edited_successfully'
+            : 'the_exchange_rate_has_been_created_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      transformErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createExchangeRateMutate(values).then(onSuccess).catch(onError);
+    } else {
+      editExchangeRateMutate([exchangeRate.id, values])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ExchangeRateFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ExchangeRateForm);

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.schema.js

@@ -0,0 +1,18 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  exchange_rate: Yup.number()
+    .required()
+    .label(intl.get('exchange_rate_')),
+  currency_code: Yup.string()
+    .max(3)
+    .required(intl.get('currency_code_')),
+  date: Yup.date()
+    .required()
+    .label(intl.get('date')),
+});
+
+export const CreateExchangeRateFormSchema = Schema;
+export const EditExchangeRateFormSchema = Schema;

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormContent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Form } from 'formik';
+import ExchangeRateFormFields from './ExchangeRateFormFields';
+import ExchangeRateFormFooter from './ExchangeRateFormFooter';
+
+export default function ExchangeRateFormContent() {
+  return (
+    <Form>
+      <ExchangeRateFormFields />
+      <ExchangeRateFormFooter />
+    </Form>
+  );
+}

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormDialogContent.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import ExchangeRateForm from './ExchangeRateForm';
+import { ExchangeRateFormProvider } from './ExchangeRateFormProvider';
+
+import 'style/pages/ExchangeRate/ExchangeRateDialog.scss';
+
+/**
+ * Exchange rate form content.
+ */
+export default function ExchangeRateFormDialogContent({
+  // #ownProp
+  action,
+  exchangeRateId,
+  dialogName,
+}) {
+  return (
+    <ExchangeRateFormProvider
+      dialogName={dialogName}
+      exchangeRate={exchangeRateId}
+      action={action}
+    >
+      <ExchangeRateForm />
+    </ExchangeRateFormProvider>
+  );
+}

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFields.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Classes, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import { FastField } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'components';
+import {
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  inputIntent,
+} from 'utils';
+import {
+  ErrorMessage,
+  FieldRequiredHint,
+  CurrencySelectList,
+} from 'components';
+import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
+
+import classNames from 'classnames';
+
+export default function ExchangeRateFormFields() {
+  const { action, currencies } = useExchangeRateFromContext();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ----------- Date ----------- */}
+      <FastField name={'date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date'} />}
+            labelInfo={FieldRequiredHint}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date" />}
+            inline={true}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              disabled={action === 'edit'}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* ----------- Currency Code ----------- */}
+      <FastField name={'currency_code'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency_code'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--currency', Classes.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="currency_code" />}
+            inline={true}
+          >
+            <CurrencySelectList
+              currenciesList={currencies}
+              selectedCurrencyCode={value}
+              onCurrencySelected={({ currency_code }) => {
+                form.setFieldValue('currency_code', currency_code);
+              }}
+              disabled={action === 'edit'}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Exchange Rate  -----------*/}
+      <FastField name={'exchange_rate'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'exchange_rate'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="exchange_rate" />}
+            inline={true}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFooter.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function ExchangeRateFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const { dialogName, action } = useExchangeRateFromContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleClose}>
+          <T id={'close'} />
+        </Button>
+        <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+          {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(ExchangeRateFormFooter);

src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormProvider.js

@@ -0,0 +1,52 @@
+import React, { createContext, useContext } from 'react';
+import {
+  useCreateExchangeRate,
+  useEdiExchangeRate,
+  useCurrencies,
+  useExchangeRates,
+} from 'hooks/query';
+import { DialogContent } from 'components';
+
+const ExchangeRateFormContext = createContext();
+
+/**
+ * Exchange rate Form page provider.
+ */
+function ExchangeRateFormProvider({
+  exchangeRate,
+  action,
+  dialogName,
+  ...props
+}) {
+  // Create and edit  exchange rate mutations.
+  const { mutateAsync: createExchangeRateMutate } = useCreateExchangeRate();
+  const { mutateAsync: editExchangeRateMutate } = useEdiExchangeRate();
+
+  // Load Currencies list.
+  const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
+  const { isFetching: isExchangeRatesLoading } = useExchangeRates();
+
+  const isNewMode = !exchangeRate;
+
+  // Provider state.
+  const provider = {
+    createExchangeRateMutate,
+    editExchangeRateMutate,
+    dialogName,
+    exchangeRate,
+    action,
+    currencies,
+    isExchangeRatesLoading,
+    isNewMode,
+  };
+
+  return (
+    <DialogContent isLoading={isCurrenciesLoading} name={'exchange-rate-form'}>
+      <ExchangeRateFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useExchangeRateFromContext = () => useContext(ExchangeRateFormContext);
+
+export { ExchangeRateFormProvider, useExchangeRateFromContext };

src/containers/Dialogs/ExchangeRateFormDialog/index.js

@@ -0,0 +1,49 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import {
+  Dialog,
+  DialogSuspense,
+} from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ExchangeRateFormDialogContent = lazy(() =>
+  import('./ExchangeRateFormDialogContent'),
+);
+
+/**
+ * Exchange rate form dialog.
+ */
+function ExchangeRateFormDialog({
+  dialogName,
+  payload = { action: '', id: null , exchangeRate:"" },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_exchange_rate'} />
+        ) : (
+          <T id={'new_exchange_rate'} />
+        )
+      }
+      className={'dialog--exchangeRate-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+    >
+      <DialogSuspense>
+        <ExchangeRateFormDialogContent
+          dialogName={dialogName}
+          action={payload.action}
+          exchangeRateId={payload.exchangeRate}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ExchangeRateFormDialog);

src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Field, ErrorMessage, FastField } from 'formik';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { inputIntent } from 'utils';
+import { Row, Col, MoneyInputGroup } from 'components';
+import { FormattedMessage as T } from 'components';
+import { useAutofocus } from 'hooks';
+import { decrementQuantity } from './utils';
+import { toSafeNumber } from 'utils';
+
+/**
+ * Decrement adjustment fields.
+ */
+function DecrementAdjustmentFields() {
+  const decrementFieldRef = useAutofocus();
+
+  return (
+    <Row className={'row--decrement-fields'}>
+      {/*------------ Quantity on hand  -----------*/}
+      <Col className={'col--quantity-on-hand'}>
+        <FastField name={'quantity_on_hand'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'qty_on_hand'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity_on_hand" />}
+            >
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      <Col className={'col--sign'}>
+        <span>–</span>
+      </Col>
+
+      {/*------------ Decrement -----------*/}
+      <Col className={'col--decrement'}>
+        <Field name={'quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'decrement'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity" />}
+              fill={true}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                inputRef={(ref) => (decrementFieldRef.current = ref)}
+                onChange={(value) => {
+                  setFieldValue('quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'new_quantity',
+                    decrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+
+      <Col className={'col--sign'}>
+        <span>=</span>
+      </Col>
+      {/*------------ New quantity -----------*/}
+      <Col className={'col--quantity'}>
+        <Field name={'new_quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'new_quantity'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="new_quantity" />}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                onChange={(value) => {
+                  setFieldValue('new_quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'quantity',
+                    decrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+    </Row>
+  );
+}
+
+export default DecrementAdjustmentFields;

src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { Field, FastField, ErrorMessage } from 'formik';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
+import { useAutofocus } from 'hooks';
+import { Row, Col, MoneyInputGroup } from 'components';
+import { inputIntent, toSafeNumber } from 'utils';
+import { FormattedMessage as T } from 'components';
+import { decrementQuantity, incrementQuantity } from './utils';
+
+export default function IncrementAdjustmentFields() {
+  const incrementFieldRef = useAutofocus();
+
+  return (
+    <Row>
+      {/*------------ Quantity on hand  -----------*/}
+      <Col className={'col--quantity-on-hand'}>
+        <FastField name={'quantity_on_hand'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'qty_on_hand'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity_on_hand" />}
+            >
+              <InputGroup
+                disabled={true}
+                medium={'true'}
+                intent={inputIntent({ error, touched })}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      {/*------------ Sign -----------*/}
+      <Col className={'col--sign'}>
+        <span>+</span>
+      </Col>
+
+      {/*------------ Increment -----------*/}
+      <Col className={'col--quantity'}>
+        <Field name={'quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'increment'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="quantity" />}
+              fill={true}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                inputRef={(ref) => (incrementFieldRef.current = ref)}
+                onChange={(value) => {
+                  setFieldValue('quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'new_quantity',
+                    incrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+
+      {/*------------ Cost -----------*/}
+      <Col className={'col--cost'}>
+        <FastField name={'cost'}>
+          {({
+            form: { setFieldValue },
+            field: { value },
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'cost'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="cost" />}
+            >
+              <MoneyInputGroup
+                value={value}
+                onChange={(value) => {
+                  setFieldValue('cost', value);
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </Col>
+
+      {/*------------ Sign -----------*/}
+      <Col className={'col--sign'}>
+        <span>=</span>
+      </Col>
+
+      {/*------------ New quantity -----------*/}
+      <Col className={'col--quantity-on-hand'}>
+        <Field name={'new_quantity'}>
+          {({
+            form: { values, setFieldValue },
+            field,
+            meta: { error, touched },
+          }) => (
+            <FormGroup
+              label={<T id={'new_quantity'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="new_quantity" />}
+            >
+              <MoneyInputGroup
+                value={field.value}
+                allowDecimals={false}
+                allowNegativeValue={true}
+                onChange={(value) => {
+                  setFieldValue('new_quantity', value);
+                }}
+                onBlurValue={(value) => {
+                  setFieldValue(
+                    'quantity',
+                    decrementQuantity(
+                      toSafeNumber(value),
+                      toSafeNumber(values.quantity_on_hand),
+                    ),
+                  );
+                }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </Field>
+      </Col>
+    </Row>
+  );
+}

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Inventory adjustment floating actions.
+ */
+function InventoryAdjustmentFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting, submitForm } = useFormikContext();
+
+  // Inventory adjustment dialog context.
+  const { dialogName, setSubmitPayload, submitPayload } =
+    useInventoryAdjContext();
+
+  // handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ publish: false });
+    submitForm();
+  };
+
+  // Handle submit make adjustment button click.
+  const handleSubmitMakeAdjustmentBtnClick = (event) => {
+    setSubmitPayload({ publish: true });
+    submitForm();
+  };
+
+  // Handle close button click.
+  const handleCloseBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCloseBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'close'} />
+        </Button>
+
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting && !submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitDraftBtnClick}
+        >
+          {<T id={'save_as_draft'} />}
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          loading={isSubmitting && submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitMakeAdjustmentBtnClick}
+        >
+          {<T id={'make_adjustment'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(InventoryAdjustmentFloatingActions);

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { omit, get } from 'lodash';
+import intl from 'react-intl-universal';
+
+import 'style/pages/Items/ItemAdjustmentDialog.scss';
+
+import { AppToaster } from 'components';
+import { CreateInventoryAdjustmentFormSchema } from './InventoryAdjustmentForm.schema';
+
+import InventoryAdjustmentFormContent from './InventoryAdjustmentFormContent';
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  type: 'decrement',
+  adjustment_account_id: '',
+  item_id: '',
+  reason: '',
+  cost: '',
+  quantity: '',
+  reference_no: '',
+  quantity_on_hand: '',
+  publish: '',
+};
+
+/**
+ * Inventory adjustment form.
+ */
+function InventoryAdjustmentForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    dialogName,
+    item,
+    itemId,
+    submitPayload,
+    createInventoryAdjMutate,
+  } = useInventoryAdjContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    item_id: itemId,
+    quantity_on_hand: get(item, 'quantity_on_hand', 0),
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['quantity_on_hand', 'new_quantity', 'action']),
+      publish: submitPayload.publish,
+    };
+    setSubmitting(true);
+    createInventoryAdjMutate(form)
+      .then(() => {
+        closeDialog(dialogName);
+
+        AppToaster.show({
+          message: intl.get('the_make_adjustment_has_been_created_successfully'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        setSubmitting(true);
+      });
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateInventoryAdjustmentFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <InventoryAdjustmentFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(InventoryAdjustmentForm);

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js

@@ -0,0 +1,28 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  type: Yup.string().required(),
+  adjustment_account_id: Yup.string()
+    .required()
+    .label(intl.get('adjustment_account')),
+  item_id: Yup.number().required(),
+  reason: Yup.string()
+    .required()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('reason')),
+  quantity_on_hand: Yup.number().required().label(intl.get('qty')),
+  quantity: Yup.number().integer().min(1).required(),
+  cost: Yup.number().when(['type'], {
+    is: (type) => type === 'increment',
+    then: Yup.number().required(),
+  }),
+  reference_no: Yup.string(),
+  new_quantity: Yup.number().required(),
+  publish: Yup.boolean(),
+});
+
+export const CreateInventoryAdjustmentFormSchema = Schema;

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+import InventoryAdjustmentFormDialogFields from './InventoryAdjustmentFormDialogFields';
+import InventoryAdjustmentFloatingActions from './InventoryAdjustmentFloatingActions';
+
+/**
+ * Inventory adjustment form content.
+ */
+export default function InventoryAdjustmentFormContent() {
+  return (
+    <Form>
+      <InventoryAdjustmentFormDialogFields />
+      <InventoryAdjustmentFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+ 
+import 'style/pages/Items/ItemAdjustmentDialog.scss';
+ 
+import { InventoryAdjustmentFormProvider } from './InventoryAdjustmentFormProvider';
+import InventoryAdjustmentForm from './InventoryAdjustmentForm';
+
+/**
+ * Inventory adjustment form dialog content.
+ */
+export default function InventoryAdjustmentFormDialogContent({
+  // #ownProps
+  dialogName,
+  itemId
+}) {
+  return (
+    <InventoryAdjustmentFormProvider itemId={itemId} dialogName={dialogName}>
+      <InventoryAdjustmentForm />
+    </InventoryAdjustmentFormProvider>
+  );
+}

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import { FastField, ErrorMessage, Field } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { ListSelect, FieldRequiredHint, Col, Row } from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  toSafeNumber,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import adjustmentType from 'common/adjustmentType';
+
+import AccountsSuggestField from 'components/AccountsSuggestField';
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
+import { diffQuantity } from './utils';
+import InventoryAdjustmentQuantityFields from './InventoryAdjustmentQuantityFields';
+
+/**
+ * Inventory adjustment form dialogs fields.
+ */
+export default function InventoryAdjustmentFormDialogFields() {
+  const dateFieldRef = useAutofocus();
+
+  // Inventory adjustment dialog context.
+  const { accounts } = useInventoryAdjContext();
+
+  // Intl context.
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={5}>
+          {/*------------ Date -----------*/}
+          <FastField name={'date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'date'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                  inputRef={(ref) => (dateFieldRef.current = ref)}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={5}>
+          {/*------------ Adjustment type -----------*/}
+          <Field name={'type'}>
+            {({
+              form: { values, setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
+              <FormGroup
+                label={<T id={'adjustment_type'} />}
+                labelInfo={<FieldRequiredHint />}
+                helperText={<ErrorMessage name="type" />}
+                intent={inputIntent({ error, touched })}
+                className={classNames(CLASSES.FILL, 'form-group--type')}
+              >
+                <ListSelect
+                  items={adjustmentType}
+                  onItemSelect={(type) => {
+                    const result = diffQuantity(
+                      toSafeNumber(values.quantity),
+                      toSafeNumber(values.quantity_on_hand),
+                      type.value,
+                    );
+                    setFieldValue('type', type.value);
+                    setFieldValue('new_quantity', result);
+                  }}
+                  filterable={false}
+                  selectedItem={value}
+                  selectedItemProp={'value'}
+                  textProp={'name'}
+                  popoverProps={{ minimal: true }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </Field>
+        </Col>
+      </Row>
+
+      <InventoryAdjustmentQuantityFields />
+
+      {/*------------ Adjustment account -----------*/}
+      <FastField name={'adjustment_account_id'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'adjustment_account'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="adjustment_account_id" />}
+            className={'form-group--adjustment-account'}
+          >
+            <AccountsSuggestField
+              accounts={accounts}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('adjustment_account_id', id)
+              }
+              inputProps={{
+                placeholder: intl.get('select_adjustment_account'),
+                intent: inputIntent({ error, touched }),
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Reference -----------*/}
+      <FastField name={'reference_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference_no" />}
+            className={'form-group--reference-no'}
+          >
+            <InputGroup intent={inputIntent({ error, touched })} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Adjustment reasons -----------*/}
+      <FastField name={'reason'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'adjustment_reasons'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--adjustment-reasons'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'reason'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormProvider.js

@@ -0,0 +1,51 @@
+import React, { useState, createContext } from 'react';
+import { DialogContent } from 'components';
+import {
+  useItem,
+  useAccounts,
+  useCreateInventoryAdjustment,
+} from 'hooks/query';
+
+const InventoryAdjustmentContext = createContext();
+
+/**
+ * Inventory adjustment dialog provider.
+ */
+function InventoryAdjustmentFormProvider({ itemId, dialogName, ...props }) {
+  // Fetches accounts list.
+  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
+
+  // Fetches the item details.
+  const { isFetching: isItemLoading, data: item } = useItem(itemId);
+
+  const {
+    mutateAsync: createInventoryAdjMutate,
+  } = useCreateInventoryAdjustment();
+
+  // Submit payload.
+  const [submitPayload, setSubmitPayload] = useState({});
+
+  // State provider.
+  const provider = {
+    itemId,
+    isAccountsLoading,
+    accounts,
+    isItemLoading,
+    item,
+    submitPayload,
+    dialogName,
+    
+    createInventoryAdjMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading || isItemLoading}>
+      <InventoryAdjustmentContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInventoryAdjContext = () => React.useContext(InventoryAdjustmentContext);
+
+export { InventoryAdjustmentFormProvider, useInventoryAdjContext };

src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Choose, If } from 'components';
+import IncrementAdjustmentFields from './IncrementAdjustmentFields';
+import DecrementAdjustmentFields from './DecrementAdjustmentFields';
+
+export default function InventoryAdjustmentQuantityFields() {
+  const { values } = useFormikContext();
+
+  return (
+    <div class="adjustment-fields">
+      <Choose>
+        <Choose.When condition={values.type === 'decrement'}>
+          <DecrementAdjustmentFields />
+        </Choose.When>
+        <Choose.When condition={values.type === 'increment'}>
+          <IncrementAdjustmentFields />
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}

src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js

@@ -0,0 +1,38 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const InventoryAdjustmentFormDialogContent = lazy(() =>
+  import('./InventoryAdjustmentFormDialogContent'),
+);
+
+/**
+ * Inventory adjustments form dialog.
+ */
+function InventoryAdjustmentFormDialog({
+  dialogName,
+  payload = { action: '', itemId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'make_adjustment'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--adjustment-item'}
+    >
+      <DialogSuspense>
+        <InventoryAdjustmentFormDialogContent
+          dialogName={dialogName}
+          itemId={payload.itemId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(InventoryAdjustmentFormDialog);

src/containers/Dialogs/InventoryAdjustmentFormDialog/utils.js

@@ -0,0 +1,14 @@
+
+export const decrementQuantity = (newQuantity, quantityOnHand) => {
+  return quantityOnHand - newQuantity;
+};
+
+export const incrementQuantity = (newQuantity, quantityOnHand) => {
+  return quantityOnHand + newQuantity;
+};
+
+export const diffQuantity = (newQuantity, quantityOnHand, type) => {
+  return type === 'decrement'
+    ? decrementQuantity(newQuantity, quantityOnHand)
+    : incrementQuantity(newQuantity, quantityOnHand);
+};

src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js

@@ -0,0 +1,11 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  email: Yup.string()
+    .email()
+    .required()
+    .label(intl.get('email')),
+});
+
+export const InviteUserFormSchema = Schema;

src/containers/Dialogs/InviteUserDialog/InviteUserDialogContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import InviteUserForm from './InviteUserForm';
+import { InviteUserFormProvider } from './InviteUserFormProvider';
+
+import 'style/pages/Users/InviteFormDialog.scss';
+
+/**
+ * Invite user dialog content.
+ */
+export default function InviteUserDialogContent({
+  action,
+  userId,
+  dialogName,
+}) {
+  return (
+    <InviteUserFormProvider isEditMode={action} dialogName={dialogName}>
+      <InviteUserForm />
+    </InviteUserFormProvider>
+  );
+}

src/containers/Dialogs/InviteUserDialog/InviteUserForm.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { pick, snakeCase } from 'lodash';
+import intl from 'react-intl-universal';
+import { AppToaster } from 'components';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { InviteUserFormSchema } from './InviteUserDialog.schema';
+import InviteUserFormContent from './InviteUserFormContent';
+import { useInviteUserFormContext } from './InviteUserFormProvider';
+
+import { transformApiErrors } from './utils';
+
+import { compose, objectKeysTransform } from 'utils';
+
+function InviteUserForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  
+
+  const {
+    dialogName,
+    isEditMode,
+    inviteUserMutate,
+    userId,
+  } = useInviteUserFormContext();
+
+  const initialValues = {
+    status: 1,
+    ...(isEditMode &&
+      pick(
+        objectKeysTransform(userId, snakeCase),
+        Object.keys(InviteUserFormSchema.fields),
+      )),
+  };
+
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { ...values };
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get('teammate_invited_to_organization_account'),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+      
+      const errorsTransformed = transformApiErrors(errors);
+
+      setErrors({ ...errorsTransformed });
+      setSubmitting(false);
+    };
+    inviteUserMutate(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={InviteUserFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+    >
+      <InviteUserFormContent />
+    </Formik>
+  );
+}
+export default compose(withDialogActions)(InviteUserForm);

src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
+import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { inputIntent } from 'utils';
+import { useInviteUserFormContext } from './InviteUserFormProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function InviteUserFormContent({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const { isEditMode, dialogName } = useInviteUserFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <Form>
+      <div className={CLASSES.DIALOG_BODY}>
+        <p className="mb2">
+          <T id={'your_access_to_your_team'} />
+        </p>
+
+        <FastField name={'email'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'email'} />}
+              className={classNames('form-group--email', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="email" />}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={CLASSES.DIALOG_FOOTER}>
+        <div className={CLASSES.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleClose}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+            {isEditMode ? <T id={'edit'} /> : <T id={'invite'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(withDialogActions)(InviteUserFormContent);

src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.js

@@ -0,0 +1,35 @@
+import React, { createContext } from 'react';
+import { useCreateInviteUser, useUsers } from 'hooks/query';
+import { DialogContent } from 'components';
+
+const InviteUserFormContext = createContext();
+
+/**
+ * Invite user Form page provider.
+ */
+function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
+  // Create and edit item currency mutations.
+  const { mutateAsync: inviteUserMutate } = useCreateInviteUser();
+
+  // fetch users list.
+  const { isLoading: isUsersLoading } = useUsers();
+
+  // Provider state.
+  const provider = {
+    inviteUserMutate,
+    dialogName,
+    userId,
+    isUsersLoading,
+    isEditMode,
+  };
+
+  return (
+    <DialogContent isLoading={isUsersLoading} name={'invite-form'}>
+      <InviteUserFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInviteUserFormContext = () => React.useContext(InviteUserFormContext);
+
+export { InviteUserFormProvider, useInviteUserFormContext };

src/containers/Dialogs/InviteUserDialog/index.js

@@ -0,0 +1,44 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const UserFormDialogContent = lazy(() => import('./InviteUserDialogContent'));
+
+// User form dialog.
+function UserFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_invite'} />
+        ) : (
+          <T id={'invite_user'} />
+        )
+      }
+      className={'dialog--invite-form'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <UserFormDialogContent
+          dialogName={dialogName}
+          userId={payload.id}
+          action={payload.action}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(
+  // UserFormDialogConnect,
+  withDialogRedux(),
+)(UserFormDialog);

src/containers/Dialogs/InviteUserDialog/utils.js

@@ -0,0 +1,13 @@
+import intl from 'react-intl-universal';
+
+export const transformApiErrors = (errors) => {
+  const fields = {};
+
+  if (errors.find((error) => error.type === 'EMAIL.ALREADY.INVITED')) {
+    fields.email = intl.get('email_is_already_used');
+  }
+  if (errors.find((error) => error.type === 'EMAIL.ALREADY.EXISTS')) {
+    fields.email = intl.get('email_is_already_used');
+  }
+  return fields;
+};

src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useSaveSettings } from 'hooks/query';
+
+import { InvoiceNumberDialogProvider } from './InvoiceNumberDialogProvider';
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import { compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+/**
+ * invoice number dialog's content.
+ */
+function InvoiceNumberDialogContent({
+  // #ownProps
+  initialValues,
+  onConfirm,
+
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: saveSettings } = useSaveSettings();
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  // Handle the submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Handle the form success.
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('invoice-number-form');
+      onConfirm(values);
+    };
+    // Handle the form errors.
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'sales_invoices');
+
+    // Save the settings.
+    saveSettings({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  // Handle the dialog close.
+  const handleClose = () => {
+    closeDialog('invoice-number-form');
+  };
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('invoice.auto_increment.auto')
+      : intl.get('invoice.auto_increment.manually');
+
+  return (
+    <InvoiceNumberDialogProvider>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        description={description}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+      />
+    </InvoiceNumberDialogProvider>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ invoiceSettings }) => ({
+    nextNumber: invoiceSettings?.nextNumber,
+    numberPrefix: invoiceSettings?.numberPrefix,
+    autoIncrement: invoiceSettings?.autoIncrement,
+  })),
+)(InvoiceNumberDialogContent);

src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+import { DialogContent } from 'components';
+import { useSettingsInvoices } from 'hooks/query';
+
+const InvoiceNumberDialogContext = createContext();
+
+/**
+ * Invoice number dialog provider.
+ */
+function InvoiceNumberDialogProvider({ query, ...props }) {
+  const { isLoading: isSettingsLoading } = useSettingsInvoices();
+
+  // Provider payload.
+  const provider = {
+    isSettingsLoading,
+  };
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <InvoiceNumberDialogContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInvoiceNumberDialogContext = () =>
+  useContext(InvoiceNumberDialogContext);
+
+export { InvoiceNumberDialogProvider, useInvoiceNumberDialogContext };

src/containers/Dialogs/InvoiceNumberDialog/index.js

@@ -0,0 +1,42 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose, saveInvoke } from 'utils';
+
+const InvoiceNumberDialogContent = lazy(() =>
+  import('./InvoiceNumberDialogContent'),
+);
+
+/**
+ * Invoice number dialog.
+ */
+function InvoiceNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
+  return (
+    <Dialog
+      title={<T id={'invoice_number_settings'} />}
+      name={dialogName}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <InvoiceNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(InvoiceNumberDialog);

src/containers/Dialogs/InvoicePdfPreviewDialog/InvoicePdfPreviewDialogContent.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { AnchorButton } from '@blueprintjs/core';
+
+import { DialogContent, PdfDocumentPreview, T } from 'components';
+import { usePdfInvoice } from 'hooks/query';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function InvoicePdfPreviewDialogContent({
+  subscriptionForm: { invoiceId },
+  // #withDialog
+  closeDialog,
+}) {
+  const { isLoading, pdfUrl } = usePdfInvoice(invoiceId);
+
+  return (
+    <DialogContent>
+      <div class="dialog__header-actions">
+        <AnchorButton
+          href={pdfUrl}
+          target={'__blank'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.preview.button'} />
+        </AnchorButton>
+
+        <AnchorButton
+          href={pdfUrl}
+          download={'invoice.pdf'}
+          minimal={true}
+          outlined={true}
+        >
+          <T id={'pdf_preview.download.button'} />
+        </AnchorButton>
+      </div>
+
+      <PdfDocumentPreview
+        height={760}
+        width={1000}
+        isLoading={isLoading}
+        url={pdfUrl}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(withDialogActions)(InvoicePdfPreviewDialogContent);

src/containers/Dialogs/InvoicePdfPreviewDialog/index.js

@@ -0,0 +1,40 @@
+import React, { lazy } from 'react';
+import classNames from 'classnames';
+
+import { T, Dialog, DialogSuspense } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { CLASSES } from 'common/classes';
+import { compose } from 'utils';
+
+// Lazy loading the content.
+const PdfPreviewDialogContent = lazy(() =>
+  import('./InvoicePdfPreviewDialogContent'),
+);
+
+/**
+ * Invoice PDF preview dialog.
+ */
+function InvoicePdfPreviewDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'invoice_preview.dialog.title'} />}
+      className={classNames(CLASSES.DIALOG_PDF_PREVIEW)}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      style={{ width: '1000px' }}
+    >
+      <DialogSuspense>
+        <PdfPreviewDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(InvoicePdfPreviewDialog);

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+
+import { AppToaster } from 'components';
+import { useItemCategoryContext } from './ItemCategoryProvider';
+import { transformToForm } from 'utils';
+import {
+  CreateItemCategoryFormSchema,
+  EditItemCategoryFormSchema,
+} from './itemCategoryForm.schema';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import ItemCategoryFormContent from './ItemCategoryFormContent';
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  name: '',
+  description: '',
+  cost_account_id: '',
+  sell_account_id: '',
+  inventory_account_id: '',
+};
+
+/**
+ * Item category form.
+ */
+function ItemCategoryForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const {
+    isNewMode,
+    itemCategory,
+    itemCategoryId,
+    dialogName,
+    createItemCategoryMutate,
+    editItemCategoryMutate,
+  } = useItemCategoryContext();
+
+  // Initial values.
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      ...transformToForm(itemCategory, defaultInitialValues),
+    }),
+    [itemCategory],
+  );
+
+  // Transformes response errors.
+  const transformErrors = (errors, { setErrors }) => {
+    if (errors.find((error) => error.type === 'CATEGORY_NAME_EXISTS')) {
+      setErrors({
+        name: intl.get('category_name_exists'),
+      });
+    }
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    const form = { ...values };
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    // Handle the response success.
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_item_category_has_been_created_successfully'
+            : 'the_item_category_has_been_edited_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      transformErrors(errors, { setErrors });
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      createItemCategoryMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editItemCategoryMutate([itemCategoryId, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
+  };
+
+  return (
+    <Formik
+      validationSchema={
+        isNewMode ? CreateItemCategoryFormSchema : EditItemCategoryFormSchema
+      }
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ItemCategoryFormContent />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ItemCategoryForm);

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormContent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Form } from 'formik';
+import ItemCategoryFormFields from './ItemCategoryFormFields';
+import ItemCategoryFormFooter from './ItemCategoryFormFooter';
+
+export default function ItemCategoryForm() {
+  return (
+    <Form>
+      <ItemCategoryFormFields />
+      <ItemCategoryFormFooter />
+    </Form>
+  );
+}

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ItemCategoryProvider } from './ItemCategoryProvider';
+import ItemCategoryForm from './ItemCategoryForm';
+
+import 'style/pages/ItemCategory/ItemCategoryDialog.scss';
+
+/**
+ * Item Category form dialog content.
+ */
+export default function ItemCategoryFormDialogContent({
+  // #ownProp
+  itemCategoryId,
+  dialogName,
+}) {
+  return (
+    <ItemCategoryProvider
+      itemCategoryId={itemCategoryId}
+      dialogName={dialogName}
+    >
+      <ItemCategoryForm />
+    </ItemCategoryProvider>
+  );
+}

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Classes, FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { ErrorMessage, FastField } from 'formik';
+
+import { useAutofocus } from 'hooks';
+import { FieldRequiredHint } from 'components';
+import { inputIntent } from 'utils';
+
+/**
+ * Item category form fields.
+ */
+export default function ItemCategoryFormFields() {
+  const categoryNameFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/* ----------- Category name ----------- */}
+      <FastField name={'name'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'category_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={'form-group--category-name'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="name" />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              inputRef={(ref) => (categoryNameFieldRef.current = ref)}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Description ----------- */}
+      <FastField name={'description'}>
+        {({ field, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="description" />}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFooter.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Classes, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useFormikContext } from 'formik';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { useItemCategoryContext } from './ItemCategoryProvider';
+
+import { compose } from 'utils';
+
+/**
+ * Item category form footer.
+ */
+function ItemCategoryFormFooter({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Item category context.
+  const { isNewMode, dialogName } = useItemCategoryContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCloseBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button disabled={isSubmitting} onClick={handleCloseBtnClick}>
+          <T id={'close'} />
+        </Button>
+
+        <Button intent={Intent.PRIMARY} type="submit" loading={isSubmitting}>
+          {isNewMode ? <T id={'submit'} /> : <T id={'edit'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(ItemCategoryFormFooter);

src/containers/Dialogs/ItemCategoryDialog/ItemCategoryProvider.js

@@ -0,0 +1,57 @@
+import React, { createContext } from 'react';
+import { DialogContent } from 'components';
+import {
+  useItemCategory,
+  useEditItemCategory,
+  useCreateItemCategory,
+} from 'hooks/query';
+
+const ItemCategoryContext = createContext();
+
+/**
+ * Accounts chart data provider.
+ */
+function ItemCategoryProvider({ itemCategoryId, dialogName, ...props }) {
+  const { data: itemCategory, isFetching: isItemCategoryLoading } = useItemCategory(
+    itemCategoryId,
+    {
+      enabled: !!itemCategoryId,
+    },
+  );
+  // Create and edit item category mutations.
+  const { mutateAsync: createItemCategoryMutate } = useCreateItemCategory();
+  const { mutateAsync: editItemCategoryMutate } = useEditItemCategory();
+
+  // Detarmines whether the new mode form.
+  const isNewMode = !itemCategoryId;
+  const isEditMode = !isNewMode;
+
+  // Provider state.
+  const provider = {
+    itemCategoryId,
+    dialogName,
+
+    itemCategory,
+    isItemCategoryLoading,
+
+    createItemCategoryMutate,
+    editItemCategoryMutate,
+
+    isNewMode,
+    isEditMode
+  };
+
+  return (
+    <DialogContent
+      isLoading={isItemCategoryLoading}
+      name={'item-category-form'}
+    >
+      <ItemCategoryContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useItemCategoryContext = () =>
+  React.useContext(ItemCategoryContext);
+
+export { ItemCategoryProvider, useItemCategoryContext };

src/containers/Dialogs/ItemCategoryDialog/index.js

@@ -0,0 +1,46 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ItemCategoryFormDialogContent = lazy(() =>
+  import('./ItemCategoryFormDialogContent'),
+);
+
+/**
+ * Item Category form dialog.
+ */
+function ItemCategoryFormDialog({
+  dialogName,
+  payload = { action: '', id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        payload.action === 'edit' ? (
+          <T id={'edit_category'} />
+        ) : (
+          <T id={'new_category'} />
+        )
+      }
+      className={'dialog--category-form'}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+    >
+      <DialogSuspense>
+        <ItemCategoryFormDialogContent
+          dialogName={dialogName}
+          action={payload.action}
+          itemCategoryId={payload.id}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ItemCategoryFormDialog);

src/containers/Dialogs/ItemCategoryDialog/itemCategoryForm.schema.js

@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  name: Yup.string()
+    .required()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('category_name_')),
+  description: Yup.string().trim().max(DATATYPES_LENGTH.TEXT).nullable(),
+});
+
+export const CreateItemCategoryFormSchema = Schema;
+export const EditItemCategoryFormSchema = Schema;

src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js

@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import { DialogContent } from 'components';
+import { useSaveSettings, useSettingsManualJournals } from 'hooks/query';
+
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from 'containers/Settings/withSettings';
+import { saveInvoke, compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+import 'style/pages/ManualJournal/JournalNumberDialog.scss'
+
+/**
+ * Journal number dialog's content.
+ */
+function JournalNumberDialogContent({
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProps
+  onConfirm,
+  initialValues
+}) {
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();
+
+  // Handle the form submit. 
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'manual_journals');
+
+    // Handle success.
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('journal-number-form');
+      saveInvoke(onConfirm, values);
+    };
+    // Handle errors.
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    saveSettingsMutate({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  const handleClose = useCallback(() => {
+    closeDialog('journal-number-form');
+  }, [closeDialog]);
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <ReferenceNumberForm
+        initialValues={{
+          ...transformSettingsToForm({
+            nextNumber,
+            numberPrefix,
+            autoIncrement,
+          }),
+          ...initialValues,
+        }}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    nextNumber: manualJournalsSettings?.nextNumber,
+    numberPrefix: manualJournalsSettings?.numberPrefix,
+    autoIncrement: manualJournalsSettings?.autoIncrement,
+  })),
+)(JournalNumberDialogContent);

src/containers/Dialogs/JournalNumberDialog/index.js

@@ -0,0 +1,40 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { saveInvoke, compose } from 'utils';
+
+const JournalNumberDialogContent = lazy(() => import('./JournalNumberDialogContent'));
+
+function JournalNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values)
+  };
+
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'journal_number_settings'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      className={'dialog--journal-number-settings'}
+    >
+      <DialogSuspense>
+        <JournalNumberDialogContent
+          initialValues={{ ...initialFormValues }}
+          onConfirm={handleConfirm}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+)(JournalNumberDialog);

src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js

@@ -0,0 +1,106 @@
+import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
+import { DialogContent } from 'components';
+import { useSaveSettings, useSettingsPaymentReceives } from 'hooks/query';
+
+import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
+import { saveInvoke, compose } from 'utils';
+import {
+  transformFormToSettings,
+  transformSettingsToForm,
+} from 'containers/JournalNumber/utils';
+
+/**
+ * Payment receive number dialog's content.
+ */
+function PaymentNumberDialogContent({
+  // #withSettings
+  nextNumber,
+  numberPrefix,
+  autoIncrement,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProps
+  onConfirm,
+  initialValues,
+}) {
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
+  const { isLoading: isSettingsLoading } = useSettingsPaymentReceives();
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();
+
+  const initialFormValues = {
+    ...transformSettingsToForm({
+      nextNumber,
+      numberPrefix,
+      autoIncrement,
+    }),
+    ...initialValues,
+  };
+
+  // Handle submit form.
+  const handleSubmitForm = (values, { setSubmitting }) => {
+    // Transformes the form values to settings to save it.
+    const options = transformFormToSettings(values, 'payment_receives');
+
+    const handleSuccess = () => {
+      setSubmitting(false);
+      closeDialog('payment-receive-number-form');
+
+      saveInvoke(onConfirm, values);
+    };
+    const handleErrors = () => {
+      setSubmitting(false);
+    };
+    if (values.incrementMode === 'manual-transaction') {
+      handleSuccess();
+      return;
+    }
+    saveSettingsMutate({ options }).then(handleSuccess).catch(handleErrors);
+  };
+
+  const handleClose = useCallback(() => {
+    closeDialog('payment-receive-number-form');
+  }, [closeDialog]);
+
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('payment_receive.auto_increment.auto')
+      : intl.get('payment_receive.auto_increment.manually');
+
+  return (
+    <DialogContent isLoading={isSettingsLoading}>
+      <ReferenceNumberForm
+        initialValues={initialFormValues}
+        onSubmit={handleSubmitForm}
+        onClose={handleClose}
+        onChange={handleChange}
+        description={description}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ paymentReceiveSettings }) => ({
+    nextNumber: paymentReceiveSettings?.nextNumber,
+    numberPrefix: paymentReceiveSettings?.numberPrefix,
+    autoIncrement: paymentReceiveSettings?.autoIncrement,
+  })),
+)(PaymentNumberDialogContent);

src/containers/Dialogs/PaymentReceiveNumberDialog/index.js

@@ -0,0 +1,38 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { saveInvoke, compose } from 'utils';
+
+const PaymentReceiveNumbereDialogContent = lazy(() =>
+  import('./PaymentReceiveNumberDialogContent'),
+);
+
+/**
+ * Payment receive number dialog.
+ */
+function PaymentReceiveNumberDialog({
+  dialogName,
+  payload: { initialFormValues },
+  isOpen,
+  onConfirm
+}) {
+  return (
+    <Dialog
+      title={<T id={'payment_number_settings'} />}
+      name={dialogName}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <PaymentReceiveNumbereDialogContent
+          initialValues={initialFormValues}
+          onConfirm={(values) => saveInvoke(onConfirm, values)}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(PaymentReceiveNumberDialog);

src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import * as Yup from 'yup';
+import { useHistory } from 'react-router-dom';
+
+import Toaster from 'components/AppToaster';
+
+import 'style/pages/Setup/PaymentViaVoucherDialog.scss';
+
+import { usePaymentByVoucher } from 'hooks/query';
+import { DialogContent } from 'components';
+import PaymentViaLicenseForm from './PaymentViaVoucherForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Payment via license dialog content.
+ */
+function PaymentViaLicenseDialogContent({
+  // #ownProps
+  subscriptionForm,
+
+  // #withDialog
+  closeDialog,
+}) {
+  const history = useHistory();
+
+  // Payment via voucher
+  const { mutateAsync: paymentViaVoucherMutate } = usePaymentByVoucher();
+
+  // Handle submit.
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    const mutateValues = {
+      plan_slug: `${values.plan_slug}-${values.period}ly`,
+      license_code: values.license_code,
+    };
+    // Payment via voucher mutate.
+    paymentViaVoucherMutate({ ...mutateValues })
+      .then(() => {
+        Toaster.show({
+          message: intl.get('payment_via_voucher.success_message'),
+          intent: Intent.SUCCESS,
+        });
+        return closeDialog('payment-via-voucher');
+      })
+      .then(() => {
+        history.push('initializing');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          if (errors.find((e) => e.type === 'LICENSE.CODE.IS.INVALID')) {
+            setErrors({
+              license_code: 'payment_via_voucher.license_code_not_valid',
+            });
+          }
+        },
+      )
+      .finally((errors) => {
+        setSubmitting(false);
+      });
+  };
+
+  // Initial values.
+  const initialValues = {
+    license_code: '',
+    plan_slug: '',
+    period: '',
+    ...subscriptionForm,
+  };
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    license_code: Yup.string()
+      .required()
+      .min(10)
+      .max(10)
+      .label(intl.get('license_code')),
+  });
+
+  return (
+    <DialogContent>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+        component={PaymentViaLicenseForm}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(withDialogActions)(PaymentViaLicenseDialogContent);

src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { compose } from 'redux';
+
+import { CLASSES } from 'common/classes';
+import { inputIntent } from 'utils';
+import { useAutofocus } from 'hooks';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+/**
+ * Payment via license form.
+ */
+function PaymentViaLicenseForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const licenseNumberRef = useAutofocus();
+
+  // Handle close button click.
+  const handleCloseBtnClick = () => {
+    closeDialog('payment-via-voucher');
+  };
+
+  return (
+    <Form>
+      <div className={CLASSES.DIALOG_BODY}>
+        <p>
+          <T id={'payment_via_voucher.dialog.description'} />
+        </p>
+
+        <FastField name="license_code">
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'voucher_number'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="license_code" />}
+              className={'form-group--voucher_number'}
+            >
+              <InputGroup
+                large={true}
+                intent={inputIntent({ error, touched })}
+                {...field}
+                inputRef={(ref) => (licenseNumberRef.current = ref)}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={CLASSES.DIALOG_FOOTER}>
+        <div className={CLASSES.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCloseBtnClick} disabled={isSubmitting}>
+            <T id={'close'} />
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            disabled={false}
+            type="submit"
+            loading={isSubmitting}
+          >
+            <T id={'submit'} />
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(withDialogActions)(PaymentViaLicenseForm);

src/containers/Dialogs/PaymentViaVoucherDialog/index.js

@@ -0,0 +1,37 @@
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense } from 'components';
+import { FormattedMessage as T } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { compose } from 'utils';
+
+// Lazy loading the content.
+const PaymentViaLicenseDialogContent = lazy(() =>
+  import('./PaymentViaVoucherDialogContent'),
+);
+
+/**
+ * Payment via license dialog.
+ */
+function PaymentViaLicenseDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'payment_via_voucher'} />}
+      className={'dialog--payment-via-voucher'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <PaymentViaLicenseDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(PaymentViaLicenseDialog);

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js

@@ -0,0 +1,34 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  vendor_id: Yup.string()
+    .label(intl.get('vendor_name_'))
+    .required(),
+  payment_date: Yup.date()
+    .required()
+    .label(intl.get('payment_date_')),
+  payment_number: Yup.string()
+    .nullable()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('payment_no_')),
+  payment_account_id: Yup.number()
+    .required()
+    .label(intl.get('payment_account_')),
+  reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      payment_amount: Yup.number().nullable(),
+      bill_id: Yup.number()
+        .nullable()
+        .when(['payment_amount'], {
+          is: (payment_amount) => payment_amount,
+          then: Yup.number().required(),
+        }),
+    }),
+  ),
+});
+
+export const CreateQuickPaymentMadeFormSchema = Schema;

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFloatingActions.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function QuickPaymentMadeFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const { dialogName } = useQuickPaymentMadeContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'make_payment'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(QuickPaymentMadeFloatingActions);

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { pick } from 'lodash';
+
+import { AppToaster } from 'components';
+import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema';
+import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
+import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { defaultPaymentMade, transformErrors } from './utils';
+import { compose } from 'utils';
+
+/**
+ * Quick payment made form.
+ */
+function QuickPaymentMadeForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  
+  const {
+    bill,
+    dialogName,
+    createPaymentMadeMutate,
+  } = useQuickPaymentMadeContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultPaymentMade,
+    ...bill,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
+    const entries = [values]
+      .filter((entry) => entry.id && entry.payment_amount)
+      .map((entry) => ({
+        bill_id: entry.id,
+        ...pick(entry, ['payment_amount']),
+      }));
+
+    const form = {
+      ...values,
+      vendor_id: values?.vendor?.id,
+      entries,
+    };
+
+    // Handle request response success.
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get('the_payment_made_has_been_created_successfully'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setFieldError });
+      }
+      setSubmitting(false);
+    };
+    createPaymentMadeMutate(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateQuickPaymentMadeFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={QuickPaymentMadeFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(QuickPaymentMadeForm);

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormContent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Form } from 'formik';
+import QuickPaymentMadeFormFields from './QuickPaymentMadeFormFields';
+import QuickPaymentMadeFloatingActions from './QuickPaymentMadeFloatingActions';
+/**
+ * Quick payment made form content.
+ */
+export default function QuickPaymentMadeFormContent() {
+  return (
+    <Form>
+      <QuickPaymentMadeFormFields />
+      <QuickPaymentMadeFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormDialogContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';
+
+import { QuickPaymentMadeFormProvider } from './QuickPaymentMadeFormProvider';
+import QuickPaymentMadeForm from './QuickPaymentMadeForm';
+
+/**
+ * Quick payment made form dialog content.
+ */
+export default function QuickPaymentMadeFormDialogContent({
+  // #ownProps
+  dialogName,
+  bill,
+}) {
+  return (
+    <QuickPaymentMadeFormProvider billId={bill} dialogName={dialogName}>
+      <QuickPaymentMadeForm />
+    </QuickPaymentMadeFormProvider>
+  );
+}

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { useAutofocus } from 'hooks';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { DateInput } from '@blueprintjs/datetime';
+import { FieldRequiredHint, Col, Row } from 'components';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+import {
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  Icon,
+} from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
+
+/**
+ * Quick payment made form fields.
+ */
+export default function QuickPaymentMadeFormFields() {
+  const { accounts } = useQuickPaymentMadeContext();
+
+  // Intl context.
+  
+  const paymentMadeFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={5}>
+          {/* ------------- Vendor name ------------- */}
+          <FastField name={'vendor_id'}>
+            {({ from, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'vendor_name'} />}
+                className={classNames('form-group--select-list', CLASSES.FILL)}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'vendor'} />}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  minimal={true}
+                  disabled={true}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/* ------------ Payment number. ------------ */}
+          <FastField name={'payment_number'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'payment_no'} />}
+                className={('form-group--payment_number', CLASSES.FILL)}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="payment_number" />}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  minimal={true}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ Amount Received -----------*/}
+      <FastField name={'payment_amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'amount_received'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--payment_amount', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('payment_amount', amount);
+                }}
+                intent={inputIntent({ error, touched })}
+                inputRef={(ref) => (paymentMadeFieldRef.current = ref)}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      <Row>
+        <Col xs={5}>
+          {/* ------------- Payment date ------------- */}
+          <FastField name={'payment_date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'payment_date'} />}
+                labelInfo={<FieldRequiredHint />}
+                className={classNames('form-group--select-list', CLASSES.FILL)}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="payment_date" />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('payment_date', formattedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  inputProps={{
+                    leftIcon: <Icon icon={'date-range'} />,
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/* ------------ payment account ------------ */}
+          <FastField name={'payment_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'payment_account'} />}
+                className={classNames(
+                  'form-group--payment_account_id',
+                  'form-group--select-list',
+                  CLASSES.FILL,
+                )}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'payment_account_id'} />}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('payment_account_id', id)
+                  }
+                  inputProps={{
+                    placeholder: intl.get('select_account'),
+                  }}
+                  filterByTypes={[
+                    ACCOUNT_TYPE.CASH,
+                    ACCOUNT_TYPE.BANK,
+                    ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+                  ]}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/* ------------ Reference No. ------------ */}
+      <FastField name={'reference'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* --------- Statement --------- */}
+      <FastField name={'statement'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'statement'} />}
+            className={'form-group--statement'}
+          >
+            <TextArea growVertically={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useBill, useAccounts, useCreatePaymentMade } from 'hooks/query';
+
+import { pick } from 'lodash';
+
+const QuickPaymentMadeContext = React.createContext();
+
+/**
+ * Quick payment made dialog provider.
+ */
+function QuickPaymentMadeFormProvider({ billId, dialogName, ...props }) {
+  // Handle fetch bill details.
+  const { isLoading: isBillLoading, data: bill } = useBill(billId, {
+    enabled: !!billId,
+  });
+
+  // Handle fetch accounts data.
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
+
+  // Create payment made mutations.
+  const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();
+
+  // State provider.
+  const provider = {
+    bill: {
+      ...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']),
+      vendor_id: bill?.vendor?.display_name,
+      payment_amount: bill?.due_amount,
+    },
+    accounts,
+    dialogName,
+    createPaymentMadeMutate,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading || isBillLoading}>
+      <QuickPaymentMadeContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useQuickPaymentMadeContext = () =>
+  React.useContext(QuickPaymentMadeContext);
+
+export { QuickPaymentMadeFormProvider, useQuickPaymentMadeContext };

src/containers/Dialogs/QuickPaymentMadeFormDialog/index.js

@@ -0,0 +1,38 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const QuickPaymentMadeFormDialogContent = lazy(() =>
+  import('./QuickPaymentMadeFormDialogContent'),
+);
+
+/**
+ * Quick payment made form dialog.
+ */
+function QuickPaymentMadeFormDialog({
+  dialogName,
+  payload = { billId: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'quick_made_payment'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--quick-payment-receive'}
+    >
+      <DialogSuspense>
+        <QuickPaymentMadeFormDialogContent
+          bill={payload.billId}
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(QuickPaymentMadeFormDialog);

src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js

@@ -0,0 +1,30 @@
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+// Default initial values of payment made.
+export const defaultPaymentMade = {
+  vendor_id: '',
+  payment_account_id: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  reference: '',
+  payment_number: '',
+  // statement: '',
+  entries: [{ bill_id: '', payment_amount: '' }],
+};
+
+export const transformErrors = (errors, { setFieldError }) => {
+  const getError = (errorType) => errors.find((e) => e.type === errorType);
+
+  if (getError('PAYMENT.NUMBER.NOT.UNIQUE')) {
+    setFieldError(
+      'payment_number',
+      intl.get('payment_number_is_not_unique'),
+    );
+  }
+  if (getError('INVALID_PAYMENT_AMOUNT')) {
+    setFieldError(
+      'payment_amount',
+      intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
+    );
+  }
+};

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceive.schema.js

@@ -0,0 +1,35 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  customer_id: Yup.string()
+    .label(intl.get('customer_name_'))
+    .required(),
+  payment_receive_no: Yup.string()
+    .required()
+    .nullable()
+    .max(DATATYPES_LENGTH.STRING)
+    .label(intl.get('payment_receive_no_')),
+  payment_date: Yup.date()
+    .required()
+    .label(intl.get('payment_date_')),
+  deposit_account_id: Yup.number()
+    .required()
+    .label(intl.get('deposit_account_')),
+  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
+  // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  entries: Yup.array().of(
+    Yup.object().shape({
+      payment_amount: Yup.number().nullable(),
+      invoice_id: Yup.number()
+        .nullable()
+        .when(['payment_amount'], {
+          is: (payment_amount) => payment_amount,
+          then: Yup.number().required(),
+        }),
+    }),
+  ),
+});
+
+export const CreateQuickPaymentReceiveFormSchema = Schema;

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFloatingActions.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function QuickPaymentReceiveFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // quick payment receive dialog context.
+  const { dialogName } = useQuickPaymentReceiveContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          {<T id={'make_payment'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+export default compose(withDialogActions)(QuickPaymentReceiveFloatingActions);

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { pick, defaultTo, omit } from 'lodash';
+
+import { AppToaster } from 'components';
+import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
+import { CreateQuickPaymentReceiveFormSchema } from './QuickPaymentReceive.schema';
+import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent';
+
+import withSettings from 'containers/Settings/withSettings';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { defaultInitialValues, transformErrors } from './utils';
+import { compose, transactionNumber } from 'utils';
+
+/**
+ * Quick payment receive form.
+ */
+function QuickPaymentReceiveForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withSettings
+  paymentReceiveAutoIncrement,
+  paymentReceiveNumberPrefix,
+  paymentReceiveNextNumber,
+  preferredDepositAccount
+}) {
+  
+  const {
+    dialogName,
+    invoice,
+    createPaymentReceiveMutate,
+  } = useQuickPaymentReceiveContext();
+
+  // Payment receive number.
+  const nextPaymentNumber = transactionNumber(
+    paymentReceiveNumberPrefix,
+    paymentReceiveNextNumber,
+  );
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+    ...(paymentReceiveAutoIncrement && {
+      payment_receive_no: nextPaymentNumber,
+    }),
+    deposit_account_id: defaultTo(preferredDepositAccount, ''),
+    ...invoice,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
+    const entries = [values]
+      .filter((entry) => entry.id && entry.payment_amount)
+      .map((entry) => ({
+        invoice_id: entry.id,
+        ...pick(entry, ['payment_amount']),
+      }));
+
+    const form = {
+      ...omit(values, ['payment_receive_no']),
+      ...(!paymentReceiveAutoIncrement && {
+        payment_receive_no: values.payment_receive_no,
+      }),
+      customer_id: values.customer.id,
+      entries,
+    };
+
+    // Handle request response success.
+    const onSaved = (response) => {
+      AppToaster.show({
+        message: intl.get('the_payment_receive_transaction_has_been_created'),
+        intent: Intent.SUCCESS,
+      });
+      closeDialog(dialogName);
+    };
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors) {
+        transformErrors(errors, { setFieldError });
+      }
+      setSubmitting(false);
+    };
+    createPaymentReceiveMutate(form).then(onSaved).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateQuickPaymentReceiveFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={QuickPaymentReceiveFormContent}
+    />
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
+    preferredDepositAccount: paymentReceiveSettings?.depositAccount,
+  })),
+)(QuickPaymentReceiveForm);

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'formik';
+import QuickPaymentReceiveFormFields from './QuickPaymentReceiveFormFields';
+import QuickPaymentReceiveFloatingActions from './QuickPaymentReceiveFloatingActions';
+
+/**
+ * Quick payment receive form content.
+ */
+export default function QuickPaymentReceiveFormContent() {
+  return (
+    <Form>
+      <QuickPaymentReceiveFormFields />
+      <QuickPaymentReceiveFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormDialogContent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';
+
+import { QuickPaymentReceiveFormProvider } from './QuickPaymentReceiveFormProvider';
+import QuickPaymentReceiveForm from './QuickPaymentReceiveForm';
+
+/**
+ * Quick payment receive form dialog content.
+ */
+export default function QuickPaymentReceiveFormDialogContent({
+  // #ownProps
+  dialogName,
+  invoice,
+}) {
+  return (
+    <QuickPaymentReceiveFormProvider
+      invoiceId={invoice}
+      dialogName={dialogName}
+    >
+      <QuickPaymentReceiveForm />
+    </QuickPaymentReceiveFormProvider>
+  );
+}

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js

@@ -0,0 +1,221 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { useAutofocus } from 'hooks';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { DateInput } from '@blueprintjs/datetime';
+import { FieldRequiredHint, Col, Row } from 'components';
+import {
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  Icon,
+} from 'components';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+  compose
+} from 'utils';
+import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
+import withSettings from 'containers/Settings/withSettings';
+
+/**
+ * Quick payment receive form fields.
+ */
+function QuickPaymentReceiveFormFields({
+  paymentReceiveAutoIncrement
+}) {
+  const { accounts } = useQuickPaymentReceiveContext();
+
+  // Intl context.
+  
+  const paymentReceiveFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={5}>
+          {/* ------------- Customer name ------------- */}
+          <FastField name={'customer_id'}>
+            {({ from, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'customer_name'} />}
+                className={classNames('form-group--select-list', CLASSES.FILL)}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'customer_id'} />}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  minimal={true}
+                  disabled={true}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/* ------------ Payment receive no. ------------ */}
+          <FastField name={'payment_receive_no'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'payment_no'} />}
+                labelInfo={<FieldRequiredHint />}
+                className={('form-group--payment_receive_no', CLASSES.FILL)}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="payment_receive_no" />}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  minimal={true}
+                  {...field}
+                  disabled={paymentReceiveAutoIncrement}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ Amount Received -----------*/}
+      <FastField name={'payment_amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'amount_received'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--payment_amount', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="payment_amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('payment_amount', amount);
+                }}
+                intent={inputIntent({ error, touched })}
+                inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+      <Row>
+        <Col xs={5}>
+          {/* ------------- Payment date ------------- */}
+          <FastField name={'payment_date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'payment_date'} />}
+                labelInfo={<FieldRequiredHint />}
+                className={classNames('form-group--select-list', CLASSES.FILL)}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="payment_date" />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('payment_date', formattedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  inputProps={{
+                    leftIcon: <Icon icon={'date-range'} />,
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/* ------------ Deposit account ------------ */}
+          <FastField name={'deposit_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'deposit_to'} />}
+                className={classNames(
+                  'form-group--deposit_account_id',
+                  'form-group--select-list',
+                  CLASSES.FILL,
+                )}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'deposit_account_id'} />}
+              >
+                <AccountsSuggestField
+                  selectedAccountId={value}
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('deposit_account_id', id)
+                  }
+                  inputProps={{
+                    placeholder: intl.get('select_account'),
+                  }}
+                  filterByTypes={[
+                    ACCOUNT_TYPE.CASH,
+                    ACCOUNT_TYPE.BANK,
+                    ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+                  ]}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/* ------------ Reference No. ------------ */}
+      <FastField name={'reference_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+      {/* --------- Statement --------- */}
+      <FastField name={'statement'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'statement'} />}
+            className={'form-group--statement'}
+          >
+            <TextArea growVertically={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
+  })),
+)(QuickPaymentReceiveFormFields)