WIP Version 0.0.1

client/src/containers/Dialogs/AccountFormDialog.container.js

@@ -0,0 +1,30 @@
+import {connect} from 'react-redux';
+import { compose } from 'utils';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withAccountDetail from 'containers/Accounts/withAccountDetail';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+export const mapStateToProps = (state, props) => {
+  const dialogPayload = getDialogPayload(state, 'account-form');
+
+  return {
+    name: 'account-form',
+    payload: {action: 'new', id: null, ...dialogPayload},
+
+    accountId: dialogPayload?.id || null,
+  };
+};
+
+const AccountFormDialogConnect = connect(mapStateToProps);
+
+export default compose(
+  AccountFormDialogConnect,
+  withAccountsActions,
+  withAccountDetail,
+  withAccounts,
+  DialogReduxConnect,
+  DialogConnect,
+);

client/src/containers/Dialogs/AccountFormDialog.js

@@ -0,0 +1,375 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  MenuItem,
+  Checkbox,
+  Position
+} from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { useIntl } from 'react-intl';
+import { omit } from 'lodash';
+import { useQuery, queryCache } from 'react-query';
+
+import Dialog from 'components/Dialog';
+import AppToaster from 'components/AppToaster';
+
+import AccountFormDialogContainer from 'containers/Dialogs/AccountFormDialog.container';
+
+import classNames from 'classnames';
+import Icon from 'components/Icon';
+import ErrorMessage from 'components/ErrorMessage';
+import { fetchAccountTypes } from 'store/accounts/accounts.actions';
+
+
+function AccountFormDialog({
+  name,
+  payload,
+  isOpen,
+
+  // #withAccounts
+  accountsTypes,
+  accounts,
+
+  // #withAccountDetail
+  account,
+
+  // #withAccountsActions
+  requestFetchAccounts,
+  requestFetchAccountTypes,
+  requestFetchAccount,
+  requestSubmitAccount,
+  requestEditAccount,
+
+  // #withDialog
+  closeDialog,
+}) {
+  const intl = useIntl();
+  const accountFormValidationSchema = Yup.object().shape({
+    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    code: Yup.number(),
+    account_type_id: Yup.string()
+      .nullable()
+      .required(intl.formatMessage({ id: 'required' })),
+    description: Yup.string().trim()
+  });
+
+  const initialValues = useMemo(() => ({
+    account_type_id: null,
+    name: '',
+    description: '',
+  }), []);
+
+  const [selectedAccountType, setSelectedAccountType] = useState(null);
+  const [selectedSubaccount, setSelectedSubaccount] = useState(
+    payload.action === 'new_child' ? 
+      accounts.find(a => a.id === payload.id) : null,
+  );
+
+  const transformApiErrors = (errors) => {
+    const fields = {};
+    if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
+      fields.code = 'Account code is not unqiue.'
+    }
+    return fields;
+  };
+
+  // Formik
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...(payload.action === 'edit' && account) ? account : initialValues,
+    },
+    validationSchema: accountFormValidationSchema,
+    onSubmit: (values, { setSubmitting, setErrors }) => {
+      const exclude = ['subaccount'];
+
+      if (payload.action === 'edit') {
+        requestEditAccount({
+          payload: payload.id,
+          form: { ...omit(values, [...exclude, 'account_type_id']) }
+        }).then((response) => {
+          closeDialog(name);
+          AppToaster.show({
+            message: 'the_account_has_been_edited',
+            intent: Intent.SUCCESS,
+          });
+          setSubmitting(false);
+          queryCache.refetchQueries('accounts-table', { force: true });
+        }).catch((errors) => {
+          setSubmitting(false); 
+          setErrors(transformApiErrors(errors));
+        });
+      } else {
+        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
+          closeDialog(name);
+          AppToaster.show({
+            message: 'the_account_has_been_submit',
+            intent: Intent.SUCCESS,
+            position: Position.BOTTOM,
+          });
+          setSubmitting(false);
+          queryCache.refetchQueries('accounts-table', { force: true });
+        }).catch((errors) => {
+          setSubmitting(false);
+          setErrors(transformApiErrors(errors));
+        });
+      }
+    }
+  });
+  const { errors, values, touched } = useMemo(() => (formik), [formik]);
+
+  // Set default account type.
+  useEffect(() => {
+    if (account && account.account_type_id) {
+      const defaultType = accountsTypes.find((t) =>
+        t.id === account.account_type_id);
+
+      defaultType && setSelectedAccountType(defaultType);
+    }
+  }, [account, accountsTypes]);
+
+  // Filters accounts types items.
+  const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
+    const normalizedTitle = accountType.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  // Account type item of select filed.
+  const accountTypeItem = (item, { handleClick, modifiers, query }) => {
+    return <MenuItem text={item.name} key={item.id} onClick={handleClick} />;
+  };
+
+  // Account item of select accounts field.
+  const accountItem = (item, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
+    );
+  };
+
+  // Filters accounts items.
+  const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
+    const normalizedTitle = account.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+    }
+  }, []);
+
+  // Handles dialog close.
+  const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
+
+  // Fetches accounts list.
+  const fetchAccountsList = useQuery('accounts-list',
+    () => requestFetchAccounts(), { manual: true });
+
+  // Fetches accounts types.
+  const fetchAccountsTypes = useQuery('accounts-types-list', async () => {
+    await requestFetchAccountTypes();
+  }, { manual: true });
+
+  // Fetch the given account id on edit mode.
+  const fetchAccount = useQuery(
+    payload.action === 'edit' && ['account', payload.id],
+    (key, id) => requestFetchAccount(id),
+    { manual: true });
+
+  const isFetching = (
+    fetchAccountsList.isFetching || 
+    fetchAccountTypes.isFetching || 
+    fetchAccount.isFetching);
+
+  // Fetch requests on dialog opening.
+  const onDialogOpening = useCallback(() => {
+    fetchAccountsList.refetch();
+    fetchAccountsTypes.refetch();
+    fetchAccount.refetch();
+  }, []);
+
+  const onChangeAccountType = useCallback((accountType) => {
+    setSelectedAccountType(accountType);
+    formik.setFieldValue('account_type_id', accountType.id);
+  }, [setSelectedAccountType, formik]);
+
+  // Handles change sub-account.
+  const onChangeSubaccount = useCallback((account) => {
+    setSelectedSubaccount(account);
+    formik.setFieldValue('parent_account_id', account.id);
+  }, [setSelectedSubaccount, formik]);
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+    setSelectedSubaccount(null);
+    setSelectedAccountType(null);
+  }, [formik]);
+
+  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+
+  const subAccountLabel = useMemo(() => {
+    return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
+  }, []);
+
+  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
+      className={{
+        'dialog--loading': isFetching,
+        'dialog--account-form': true
+      }}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isOpen={isOpen}
+      isLoading={isFetching}
+      onClose={handleClose}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'Account Type'}
+            labelInfo={requiredSpan}
+            className={classNames(
+              'form-group--account-type',
+              'form-group--select-list',
+              Classes.FILL)}
+            inline={true}
+            helperText={<ErrorMessage name="account_type_id" {...formik} />}
+            intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
+          >
+            <Select
+              items={accountsTypes}
+              noResults={<MenuItem disabled={true} text='No results.' />}
+              itemRenderer={accountTypeItem}
+              itemPredicate={filterAccountTypeItems}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onChangeAccountType}
+            >
+              <Button
+                rightIcon='caret-down'
+                text={selectedAccountType ?
+                  selectedAccountType.name : 'Select account type'}
+                disabled={payload.action === 'edit'}
+              />
+            </Select>
+          </FormGroup>
+
+          <FormGroup
+            label={'Account Name'}
+            labelInfo={requiredSpan}
+            className={'form-group--account-name'}
+            intent={(errors.name && touched.name) && Intent.DANGER}
+            helperText={<ErrorMessage name="name" {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={(errors.name && touched.name) && Intent.DANGER}
+              {...formik.getFieldProps('name')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Account Code'}
+            className={'form-group--account-code'}
+            intent={(errors.code && touched.code) && Intent.DANGER}
+            helperText={<ErrorMessage name="code" {...formik} />}
+            inline={true}
+            labelInfo={infoIcon}
+          >
+            <InputGroup
+              medium={true}
+              intent={(errors.code && touched.code) && Intent.DANGER}
+              {...formik.getFieldProps('code')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={' '}
+            className={classNames('form-group--subaccount')}
+            inline={true}
+          >
+            <Checkbox
+              inline={true}
+              label={subAccountLabel}
+              {...formik.getFieldProps('subaccount')}
+            />
+          </FormGroup>
+
+          {values.subaccount && (
+            <FormGroup
+              label={'Parent Account'}
+              className={classNames(
+                'form-group--parent-account',
+                'form-group--select-list',
+                Classes.FILL)}
+              inline={true}
+            >
+              <Select
+                items={accounts}
+                noResults={<MenuItem disabled={true} text='No results.' />}
+                itemRenderer={accountItem}
+                itemPredicate={filterAccountsPredicater}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onChangeSubaccount}
+                {...formik.getFieldProps('parent_account_id')}
+              >
+                <Button
+                  rightIcon='caret-down'
+                  text={
+                    selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
+                  }
+                />
+              </Select>
+            </FormGroup>
+          )}
+
+          <FormGroup
+            label={'Description'}
+            className={'form-group--description'}
+            intent={formik.errors.description && Intent.DANGER}
+            helperText={formik.errors.description && formik.errors.credential}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              {...formik.getFieldProps('description')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
+              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default AccountFormDialogContainer(
+  AccountFormDialog,
+);

client/src/containers/Dialogs/CurrencyDialog.js

@@ -0,0 +1,182 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+} from '@blueprintjs/core';
+import * as Yup from 'yup';
+import { useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import { compose } from 'utils';
+import Dialog from 'components/Dialog';
+import useAsync from 'hooks/async';
+import AppToaster from 'components/AppToaster';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import { pick } from 'lodash';
+
+function CurrencyDialog({
+  name,
+  payload,
+  isOpen,
+  closeDialog,
+  requestFetchCurrencies,
+  requestSubmitCurrencies,
+  requestEditCurrency,
+  editCurrency,
+}) {
+  const intl = useIntl();
+
+  const ValidationSchema = Yup.object().shape({
+    currency_name: Yup.string().required(
+      intl.formatMessage({ id: 'required' })
+    ),
+    currency_code: Yup.string()
+      .max(4)
+      .required(intl.formatMessage({ id: 'required' })),
+  });
+  const initialValues = useMemo(
+    () => ({
+      currency_name: '',
+      currency_code: '',
+    }),
+    []
+  );
+
+  const formik = useFormik({
+    enableReinitialize: true,
+
+    initialValues: {
+      ...(payload.action === 'edit' &&
+        pick(editCurrency, Object.keys(initialValues))),
+    },
+
+    validationSchema: ValidationSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      if (payload.action === 'edit') {
+        requestEditCurrency(editCurrency.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_currency_has_been_edited',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitCurrencies(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_currency_has_been_submit',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
+
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([requestFetchCurrencies()]);
+  });
+
+  const onDialogOpening = useCallback(() => {
+    fetchHook.execute();
+  }, [fetchHook]);
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+    closeDialog(name);
+  }, [formik, closeDialog, name]);
+
+  const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit Currency' : ' New Currency'}
+      className={classNames(
+        {
+          'dialog--loading': fetchHook.pending,
+        },
+        'dialog--currency-form'
+      )}
+      isOpen={isOpen}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isLoading={fetchHook.pending}
+      onClose={handleClose}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'Currency Name'}
+            labelInfo={requiredSpan}
+            className={'form-group--currency-name'}
+            intent={
+              errors.currency_name && touched.currency_name && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='currency_name' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={
+                errors.currency_name && touched.currency_name && Intent.DANGER
+              }
+              {...formik.getFieldProps('currency_name')}
+            />
+          </FormGroup>
+          <FormGroup
+            label={'Currency Code'}
+            labelInfo={requiredSpan}
+            className={'form-group--currency-code'}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='currency_code' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={
+                errors.currency_code && touched.currency_code && Intent.DANGER
+              }
+              {...formik.getFieldProps('currency_code')}
+            />
+          </FormGroup>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default compose(
+  CurrencyFromDialogConnect,
+  DialogConnect,
+  DialogReduxConnect
+)(CurrencyDialog);

client/src/containers/Dialogs/InviteUserDialog.js

@@ -0,0 +1,192 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import {
+  Dialog,
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Classes,
+} from '@blueprintjs/core';
+import UserListDialogConnect from 'connectors/UsersList.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import useAsync from 'hooks/async';
+import { objectKeysTransform } from 'utils';
+import { pick, snakeCase } from 'lodash';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import AppToaster from 'components/AppToaster';
+import { compose } from 'utils';
+
+function InviteUserDialog({
+  name,
+  payload,
+  isOpen,
+  closeDialog,
+  requestFetchUser,
+  requestEditUser,
+}) {
+  const intl = useIntl();
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
+    ]);
+  }, false);
+
+  const validationSchema = Yup.object().shape({
+    first_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    last_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    email: Yup.string()
+      .email()
+      .required(intl.formatMessage({ id: 'required' })),
+    phone_number: Yup.number().required(intl.formatMessage({ id: 'required' })),
+  });
+
+  const initialValues = useMemo(
+    () => ({
+      first_name: '',
+      last_name: '',
+      email: '',
+      phone_number: '',
+    }),
+    []
+  );
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...(payload.action === 'edit' &&
+        pick(
+          objectKeysTransform(payload.user, snakeCase),
+          Object.keys(initialValues)
+        )),
+    },
+    validationSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      const form = {
+        ...values,
+      };
+      if (payload.action === 'edit') {
+        requestEditUser(payload.user.id, form)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_user_details_has_been_updated',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
+
+  const onDialogOpening = () => {
+    fetchHook.execute();
+  };
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+  }, [formik.resetForm]);
+
+  const handleClose = () => {
+    closeDialog(name);
+  };
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit invite' : ''}
+      className={classNames({
+        'dialog--loading': fetchHook.pending,
+        'dialog--invite-user': true,
+      })}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      isLoading={fetchHook.pending}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'First Name'}
+            className={'form-group--first-name'}
+            intent={errors.first_name && touched.first_name && Intent.DANGER}
+            helperText={<ErrorMessage name='first_name' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              intent={errors.first_name && touched.first_name && Intent.DANGER}
+              {...formik.getFieldProps('first_name')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Last Name'}
+            className={'form-group--last-name'}
+            intent={errors.last_name && touched.last_name && Intent.DANGER}
+            helperText={<ErrorMessage name='last_name' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              intent={errors.last_name && touched.last_name && Intent.DANGER}
+              {...formik.getFieldProps('last_name')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Email'}
+            className={'form-group--email'}
+            intent={errors.email && touched.email && Intent.DANGER}
+            helperText={<ErrorMessage name='email' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={errors.email && touched.email && Intent.DANGER}
+              {...formik.getFieldProps('email')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Phone Number'}
+            className={'form-group--phone-number'}
+            intent={
+              errors.phone_number && touched.phone_number && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='phone_number' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              intent={
+                errors.phone_number && touched.phone_number && Intent.DANGER
+              }
+              {...formik.getFieldProps('phone_number')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+              {payload.action === 'edit' ? 'Edit' : ''}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default compose(
+  UserListDialogConnect,
+  DialogReduxConnect
+)(InviteUserDialog);

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -0,0 +1,257 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+  MenuItem
+} from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import { pick } from 'lodash';
+import * as Yup from 'yup';
+import { useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import { compose } from 'utils';
+import { useQuery } from 'react-query';
+import classNames from 'classnames';
+
+import AppToaster from 'components/AppToaster';
+import ErrorMessage from 'components/ErrorMessage';
+
+import Dialog from 'components/Dialog';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+
+import {connect} from 'react-redux';
+import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
+import withItemCategoryDetail from 'containers/Items/withItemCategoryDetail';
+import withItemCategories from 'containers/Items/withItemCategories';
+import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+
+import Icon from 'components/Icon';
+
+
+function ItemCategoryDialog({
+  name,
+  payload,
+  isOpen,
+
+  // #withDialog
+  openDialog,
+  closeDialog,
+
+  // #withItemCategoryDetail
+  itemCategoryId,
+  itemCategory,
+
+  // #withItemCategories
+  categoriesList,
+
+  // #withItemCategoriesActions
+  requestSubmitItemCategory,
+  requestFetchItemCategories,
+  requestEditItemCategory,
+}) {
+  const [selectedParentCategory, setParentCategory] = useState(null);
+  const intl = useIntl();
+
+  const fetchList = useQuery(['items-categories-list'],
+    () => requestFetchItemCategories());
+
+  const ValidationSchema = Yup.object().shape({
+    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    parent_category_id: Yup.string().nullable(),
+    description: Yup.string().trim()
+  });
+
+  const initialValues = useMemo(() => ({
+    name: '',
+    description: '',
+    parent_category_id: null
+  }), []);
+
+  // Formik
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...(payload.action === 'edit' &&
+        pick(itemCategory, Object.keys(initialValues)))
+    },
+    validationSchema: ValidationSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      if (payload.action === 'edit') {
+        requestEditItemCategory(payload.id, values).then(response => {
+          closeDialog(name);
+          AppToaster.show({
+            message: 'the_category_has_been_edited'
+          });
+          setSubmitting(false);
+        }).catch((error) => {
+          setSubmitting(false);
+        });
+      } else {
+        requestSubmitItemCategory(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_category_has_been_submit'
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      }
+    }
+  });
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
+
+  const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
+    const normalizedTitle = category.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  }, []);
+
+  const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem text={category.name} key={category.id} onClick={handleClick} />
+    );
+  }, []);
+
+  // Handle the dialog closing.
+  const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
+
+  // Handle the dialog opening.
+  const onDialogOpening = useCallback(() => {
+    fetchList.refetch();
+  }, [fetchList]);
+
+  const onChangeParentCategory = useCallback((parentCategory) => {
+    setParentCategory(parentCategory);
+    formik.setFieldValue('parent_category_id', parentCategory.id);
+  }, [formik]);
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+    closeDialog(name);
+  }, [formik, closeDialog, name]);
+
+  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
+      className={classNames({
+        'dialog--loading': fetchList.isFetching,
+      },
+        'dialog--category-form',
+      )}
+      isOpen={isOpen}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isLoading={fetchList.isFetching}
+      onClose={handleClose}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'Category Name'}
+            labelInfo={requiredSpan}
+            className={'form-group--category-name'}
+            intent={(errors.name && touched.name) && Intent.DANGER}
+            helperText={(<ErrorMessage name="name" {...formik} />)}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={(errors.name && touched.name) && Intent.DANGER}
+              {...formik.getFieldProps('name')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Parent Category'}
+            labelInfo={infoIcon}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--parent-category',
+              Classes.FILL,
+            )}
+            inline={true}
+            helperText={(<ErrorMessage name="parent_category_id" {...formik} />)}
+            intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
+          >
+            <Select
+              items={categoriesList}
+              noResults={<MenuItem disabled={true} text='No results.' />}
+              itemRenderer={parentCategoryItem}
+              itemPredicate={filterItemCategory}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onChangeParentCategory}
+            >
+              <Button
+                rightIcon='caret-down'
+                text={selectedParentCategory
+                  ? selectedParentCategory.name : 'Select Parent Category'}
+              />
+            </Select>
+          </FormGroup>
+
+          <FormGroup
+            label={'Description'}
+            className={'form-group--description'}
+            intent={(errors.description && touched.description) && Intent.DANGER}
+            helperText={(<ErrorMessage name="description" {...formik} />)}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              {...formik.getFieldProps('description')}
+            />
+          </FormGroup>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+
+const mapStateToProps = (state, props) => {
+  const dialogPayload = getDialogPayload(state, 'item-category-form');
+
+  return {
+    name: 'account-form',
+    payload: {action: 'new', id: null, ...dialogPayload},
+
+    itemCategoryId: dialogPayload?.id || null,
+  };
+};
+
+const withItemCategoryDialog = connect(mapStateToProps);
+
+export default compose( 
+  DialogConnect,
+  DialogReduxConnect,
+  withItemCategoryDialog,
+  withItemCategoryDetail,
+  withItemCategories,
+  withItemCategoriesActions 
+)(ItemCategoryDialog);

client/src/containers/Dialogs/ItemFromDialog.js

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea
+} from '@blueprintjs/core';
+import * as Yup from 'yup';
+import { useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import { compose } from 'utils';
+import Dialog from 'components/Dialog';
+import useAsync from 'hooks/async';
+import AppToaster from 'components/AppToaster';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import ItemFormDialogConnect from 'connectors/ItemFormDialog.connect';
+
+function ItemFromDialog({
+  name,
+  payload,
+  isOpen,
+  submitItemCategory,
+  fetchCategory,
+  openDialog,
+  closeDialog
+}) {
+  const [state, setState] = useState({});
+  const intl = useIntl();
+  const ValidationSchema = Yup.object().shape({
+    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    description: Yup.string().trim()
+  });
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {},
+    validationSchema: ValidationSchema,
+    onSubmit: values => {
+      submitItemCategory({ values })
+        .then(response => {
+          AppToaster.show({
+            message: 'the_category_has_been_submit'
+          });
+        })
+        .catch(error => {
+          alert(error.message);
+        });
+    }
+  });
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([submitItemCategory]);
+  });
+
+  const handleClose = () => {
+    closeDialog(name);
+  };
+
+  const onDialogOpening = () => {
+    fetchHook.execute();
+    openDialog(name);
+  };
+  const onDialogClosed = () => {
+    // formik.resetForm();
+    closeDialog(name);
+  };
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'new' ? 'New' : ' New Category'}
+      className={{
+        'dialog--loading': state.isLoading,
+        'dialog--item-form': true
+      }}
+      isOpen={isOpen}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isLoading={fetchHook.pending}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'Category Name'}
+            className={'form-group--category-name'}
+            intent={formik.errors.name && Intent.DANGER}
+            helperText={formik.errors.name && formik.errors.name}
+            inline={true}
+          >
+            <InputGroup
+              medium={formik.values.toString()}
+              intent={formik.errors.name && Intent.DANGER}
+              {...formik.getFieldProps('name')}
+            />
+          </FormGroup>
+          <FormGroup
+            label={'Description'}
+            className={'form-group--description'}
+            intent={formik.errors.description && Intent.DANGER}
+            helperText={formik.errors.description && formik.errors.credential}
+            inline={true}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              {...formik.getFieldProps('description')}
+            />
+          </FormGroup>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+              {payload.action === 'new' ? 'New' : 'Submit'}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default compose(
+  ItemFormDialogConnect,
+  DialogConnect,
+  DialogReduxConnect
+)(ItemFromDialog);

client/src/containers/Dialogs/UserFormDialog.js

@@ -0,0 +1,146 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import {
+  Dialog,
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Classes,
+} from '@blueprintjs/core';
+import UserFormDialogConnect from 'connectors/UserFormDialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import AppToaster from 'components/AppToaster';
+import useAsync from 'hooks/async';
+import { objectKeysTransform } from 'utils';
+import { pick, snakeCase } from 'lodash';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import { compose } from 'utils';
+
+function UserFormDialog({
+  requestFetchUser,
+  requestSubmitInvite,
+  requestEditUser,
+  name,
+  payload,
+  isOpen,
+  closeDialog,
+}) {
+  const intl = useIntl();
+  const fetchHook = useAsync(async () => {
+    await Promise.all([
+      ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
+    ]);
+  }, false);
+
+  const validationSchema = Yup.object().shape({
+    email: Yup.string().email().required(intl.formatMessage({id:'required'})),
+  });
+
+  const initialValues = {
+    status: 1,
+    ...(payload.action === 'edit' &&
+      pick(
+        objectKeysTransform(payload.user, snakeCase),
+        Object.keys(validationSchema.fields)
+      )),
+  };
+
+  const {
+    values,
+    errors,
+    touched,
+    resetForm,
+    getFieldProps,
+    handleSubmit,
+  } = useFormik({
+    enableReinitialize: true,
+    initialValues,
+    validationSchema,
+    onSubmit: (values) => {
+      const form = {
+        ...values,
+      };
+      if (payload.action === 'edit') {
+        requestEditUser(payload.user.id, form).then((response) => {
+          AppToaster.show({
+            message: 'the_user_details_has_been_updated',
+          });
+          closeDialog(name);
+        });
+      } else {
+        requestSubmitInvite(form).then((response) => {
+          AppToaster.show({
+            message: 'the_user_has_been_invited',
+          });
+          closeDialog(name);
+        });
+      }
+    },
+  });
+  const onDialogOpening = () => {
+    fetchHook.execute();
+  };
+
+  const onDialogClosed = useCallback(() => {
+    resetForm();
+  }, [resetForm]);
+
+  const handleClose = () => {
+    closeDialog(name);
+  };
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit invite' : 'invite User'}
+      className={classNames({
+        'dialog--loading': fetchHook.pending,
+        'dialog--invite-form': true,
+      })}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+      isLoading={fetchHook.pending}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+    >
+      <form onSubmit={handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <p class="mb2">Your teammate will get an email that gives them access to your team.</p>
+
+          <FormGroup
+            label={'Email'}
+            className={classNames('form-group--email', Classes.FILL)}
+            intent={(errors.email && touched.email) && Intent.DANGER}
+            helperText={<ErrorMessage name='email' {...{errors, touched}} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={(errors.email && touched.email) && Intent.DANGER}
+              {...getFieldProps('email')}
+            />
+          </FormGroup>
+        </div>
+
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+              {payload.action === 'edit' ? 'Edit' : 'invite'}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default compose(
+  UserFormDialogConnect,
+  DialogReduxConnect
+)(UserFormDialog);