feat: application preferences.

client/src/common/classes.js

@@ -10,6 +10,9 @@ const CLASSES = {
   DATATABLE_EDITOR_ITEMS_ENTRIES: 'items-entries-table',
   DATATABLE_EDITOR_HAS_TOTAL_ROW: 'has-total-row',
 
+  DASHBOARD_CONTENT: 'dashboard-content',
+  DASHBOARD_CONTENT_PREFERENCES: 'dashboard-content--preferences',
+
   PAGE_FORM: 'page-form',
   PAGE_FORM_HEADER: 'page-form__header',
   PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
@@ -46,7 +49,24 @@ const CLASSES = {
 
   SELECT_LIST_FILL_POPOVER: 'select-list--fill-popover',
 
+
+  PREFERENCES_PAGE: 'preferences-page',
+  PREFERENCES_PAGE_SIDEBAR: 'preferences-page__sidebar',
+  PREFERENCES_PAGE_TOPBAR: 'preferences-page__topbar',
+  PREFERENCES_PAGE_CONTENT: 'preferences-page__content',
+  PREFERENCES_PAGE_TABS: 'preferences-page__tabs',
+
+  PREFERENCES_SIDEBAR: 'preferences-sidebar',
+  PREFERENCES_TOPBAR: 'preferences-topbar',
+
+  PREFERENCES_PAGE_INSIDE_CONTENT: 'preferences-page__inside-content',
+  PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL: 'preferences-page__inside-content--general',
+  PREFERENCES_PAGE_INSIDE_CONTENT_USERS: 'preferences-page__inside-content--users',
+  PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
+  PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
+
   ...Classes,
+  CARD: 'card',
 };
 
 export {

client/src/common/countries.js

@@ -0,0 +1,5 @@
+
+
+export default [
+  { name: 'Libya', value: 'libya' },
+]

client/src/common/currencies.js

@@ -0,0 +1,5 @@
+export default [
+  { label: 'US Dollar', code: 'USD' },
+  { label: 'Euro', code: 'EUR' },
+  { label: 'Libyan Dinar	', code: 'LYD' },
+]

client/src/common/dateFormatsOptions.js

@@ -0,0 +1,40 @@
+import moment from 'moment';
+
+export default [
+  {
+    id: 1,
+    name: 'MM/DD/YY',
+    label: `${moment().format('MM/DD/YYYY')}`,
+    value: 'mm/dd/yy',
+  },
+  {
+    id: 2,
+    name: 'DD/MM/YY',
+    label: `${moment().format('DD/MM/YYYY')}`,
+    value: 'dd/mm/yy',
+  },
+  {
+    id: 3,
+    name: 'YY/MM/DD',
+    label: `${moment().format('YYYY/MM/DD')}`,
+    value: 'yy/mm/dd',
+  },
+  {
+    id: 4,
+    name: 'MM-DD-YY',
+    label: `${moment().format('MM-DD-YYYY')}`,
+    value: 'mm-dd-yy',
+  },
+  {
+    id: 5,
+    name: 'DD-MM-YY',
+    label: `${moment().format('DD-MM-YYYY')}`,
+    value: 'dd-mm-yy',
+  },
+  {
+    id: 6,
+    name: 'YY-MM-DD',
+    label: `${moment().format('YYYY-MM-DD')}`,
+    value: 'yy-mm-dd',
+  },
+]

client/src/common/fiscalYearOptions.js

@@ -0,0 +1,88 @@
+import { formatMessage } from 'services/intl';
+
+export default [
+  {
+    id: 0,
+    name: `${formatMessage({ id: 'january' })} - ${formatMessage({
+      id: 'december',
+    })}`,
+    value: 'january',
+  },
+  {
+    id: 1,
+    name: `${formatMessage({ id: 'february' })} - ${formatMessage({
+      id: 'january',
+    })}`,
+    value: 'february',
+  },
+  {
+    id: 2,
+    name: `${formatMessage({ id: 'march' })} - ${formatMessage({
+      id: 'february',
+    })}`,
+    value: 'March',
+  },
+  {
+    id: 3,
+    name: `${formatMessage({ id: 'april' })} - ${formatMessage({
+      id: 'march',
+    })}`,
+    value: 'april',
+  },
+  {
+    id: 4,
+    name: `${formatMessage({ id: 'may' })} - ${formatMessage({
+      id: 'april',
+    })}`,
+    value: 'may',
+  },
+  {
+    id: 5,
+    name: `${formatMessage({ id: 'june' })} - ${formatMessage({
+      id: 'may',
+    })}`,
+    value: 'june',
+  },
+  {
+    id: 6,
+    name: `${formatMessage({ id: 'july' })} - ${formatMessage({
+      id: 'june',
+    })}`,
+    value: 'july',
+  },
+  {
+    id: 7,
+    name: `${formatMessage({ id: 'august' })} - ${formatMessage({
+      id: 'july',
+    })}`,
+    value: 'August',
+  },
+  {
+    id: 8,
+    name: `${formatMessage({ id: 'september' })} - ${formatMessage({
+      id: 'august',
+    })}`,
+    value: 'september',
+  },
+  {
+    id: 9,
+    name: `${formatMessage({ id: 'october' })} - ${formatMessage({
+      id: 'november',
+    })}`,
+    value: 'october',
+  },
+  {
+    id: 10,
+    name: `${formatMessage({ id: 'november' })} - ${formatMessage({
+      id: 'october',
+    })}`,
+    value: 'november',
+  },
+  {
+    id: 11,
+    name: `${formatMessage({ id: 'december' })} - ${formatMessage({
+      id: 'november',
+    })}`,
+    value: 'december',
+  },
+]

client/src/common/languagesOptions.js

@@ -0,0 +1,6 @@
+
+
+export default [
+  { name: 'English', value: 'EN' },
+  { name: 'Arabic', value: 'AR' },
+];

client/src/components/Dashboard/Dashboard.js

@@ -7,8 +7,7 @@ import DashboardLoadingIndicator from './DashboardLoadingIndicator';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
-import PreferencesContent from 'components/Preferences/PreferencesContent';
+import PreferencesPage from 'components/Preferences/PreferencesPage';
-import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 import Search from 'containers/GeneralSearch/Search';
 import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 
@@ -28,9 +27,8 @@ function Dashboard({
         <Route path="/preferences">
           <DashboardSplitPane>
             <Sidebar />
-            <PreferencesSidebar />
+            <PreferencesPage />
           </DashboardSplitPane>
-          <PreferencesContent />
         </Route>
 
         <Route path="/">

client/src/components/DialogsContainer.js

@@ -2,10 +2,9 @@ import React, { lazy } from 'react';
 
 import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
 
-import UserFormDialog from 'containers/Dialogs/UserFormDialog';
+import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
 import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
-// import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
 import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
 import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
 // import BillNumberDialog from 'containers/Dialogs/BillNumberDialog';
@@ -13,6 +12,7 @@ import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberD
 import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
 import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
 import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog';
+
 export default function DialogsContainer() {
   return (
     <div>
@@ -24,7 +24,7 @@ export default function DialogsContainer() {
       <ReceiptNumberDialog dialogName={'receipt-number-form'} />
       <InvoiceNumberDialog dialogName={'invoice-number-form'} />
       <CurrencyFormDialog dialogName={'currency-form'} />
-      <UserFormDialog dialogName={'user-form'} />
+      <InviteUserDialog dialogName={'invite-user'} />
       <ExchangeRateFormDialog dialogName={'exchangeRate-form'} />
       <ItemCategoryDialog dialogName={'item-category-form'} />
     </div>

client/src/components/ListSelect.js

@@ -2,6 +2,8 @@ import React, { useState, useMemo, useEffect } from 'react';
 import { Button, MenuItem } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 export default function ListSelect({
   buttonProps,
@@ -69,6 +71,10 @@ export default function ListSelect({
       {...selectProps}
       noResults={noResults}
       disabled={disabled}
+      className={classNames(
+        CLASSES.FORM_GROUP_LIST_SELECT,
+        selectProps.className,
+      )}
     >
       <Button
         text={currentItem ? currentItem[labelProp] : defaultText}

client/src/components/Preferences/PreferencesContent.js

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
-import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
-
-
-export default function PreferencesContent() {
-  return (
-    <div className='dashboard-content dashboard-content--preferences'>
-      <PreferencesTopbar pageTitle={'asdad'} />
-
-      <div className='dashboard__preferences-content'>
-        <PreferencesContentRoute />
-      </div>
-    </div>
-  );
-}

client/src/components/Preferences/PreferencesPage.js

@@ -1,11 +1,29 @@
 import React from 'react';
-import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
+import { ErrorBoundary } from 'react-error-boundary';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
+import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
+import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
+import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
+import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
 export default function PreferencesPage() {
   return (
-    <div class="preferences-page">
+    <ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
-      <PreferencesSidebar />
+      <div className={classNames(
-    </div>
+        CLASSES.DASHBOARD_CONTENT,
+        CLASSES.DASHBOARD_CONTENT_PREFERENCES,
+      )}>
+        <div className={classNames(CLASSES.PREFERENCES_PAGE)}>
+          <PreferencesSidebar />
+
+          <div className={CLASSES.PREFERENCES_PAGE_CONTENT}>
+            <PreferencesTopbar pageTitle={'asdad'} />
+            <PreferencesContentRoute />
+          </div>
+        </div>
+      </div>
+    </ErrorBoundary>
   );
 }

client/src/components/Preferences/PreferencesSidebar.js

@@ -1,35 +1,36 @@
 import React from 'react';
-import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
+import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
 import preferencesMenu from 'config/preferencesMenu';
+import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 
 export default function PreferencesSidebar() {
   const history = useHistory();
   const location = useLocation();
 
-  const items = preferencesMenu.map((item) => (
+  const items = preferencesMenu.map((item) =>
-    (item.divider) ?
+    item.divider ? (
-      <MenuDivider
+      <MenuDivider title={item.title} />
-        title={item.title} /> : 
+    ) : (
       <MenuItem
-        active={(item.href && item.href === location.pathname)}
+        active={item.href && item.href === location.pathname}
         text={item.text}
         label={item.label}
         disabled={item.disabled}
-        onClick={() => { history.push(item.href); }} />
+        onClick={() => {
-  ));
+          history.push(item.href);
+        }}
+      />
+    ),
+  );
 
   return (
-    <div class="preferences__sidebar">
+    <PreferencesSidebarContainer>
-      <div class="preferences__sidebar-wrapper">
+      <div class="preferences-sidebar__head">
-        <div class="preferences__sidebar-head">
+        <h2>Preferences</h2>
-          <h2>Preferences</h2>
-        </div>
-
-        <Menu className="preferences__sidebar-menu">
-          { items }
-        </Menu>
       </div>
-    </div>
+
+      <Menu className="preferences-sidebar__menu">{items}</Menu>
+    </PreferencesSidebarContainer>
   );
 }

client/src/components/Preferences/PreferencesSidebarContainer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Scrollbar } from 'react-scrollbars-custom';
+import { CLASSES } from 'common/classes';
+
+export default function PreferencesSidebarContainer({ children }) {
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_SIDEBAR,
+        CLASSES.PREFERENCES_SIDEBAR,
+      )}
+    >
+      <div class="preferences-sidebar__wrapper">
+        <Scrollbar noDefaultStyles={true}>
+          <div class="preferences-sidebar__inner">{children}</div>
+        </Scrollbar>
+      </div>
+    </div>
+  );
+}

client/src/components/Preferences/PreferencesTopbar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import UsersActions from 'containers/Preferences/Users/UsersActions';
@@ -11,15 +12,19 @@ import { compose } from 'utils';
 
 function PreferencesTopbar({ preferencesPageTitle }) {
   return (
-    <div class="dashboard__preferences-topbar">
+    <div
-      <div class="dashboard__title">
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_TOPBAR,
+        CLASSES.PREFERENCES_TOPBAR,
+      )}
+    >
+      <div class="preferences-topbar__title">
         <h2>{preferencesPageTitle}</h2>
       </div>
-      <div class="preferences__topbar-actions">
+      <div class="preferences-topbar__actions">
         <Route pathname="/preferences">
           <Switch>
             <Route exact path={'/preferences/users'} component={UsersActions} />
-
             <Route
               exact
               path={'/preferences/currencies'}
@@ -29,7 +34,7 @@ function PreferencesTopbar({ preferencesPageTitle }) {
         </Route>
       </div>
 
-      <div class="dashboard__topbar-user">
+      <div class="preferences-topbar__user">
         <DashboardTopbarUser />
       </div>
     </div>

client/src/config/preferencesMenu.js

@@ -21,9 +21,4 @@ export default [
     disabled: false,
     href: '/preferences/accountant',
   },
-  {
-    text: <T id={'accounts'}/>,
-    disabled: false,
-    href: '/preferences/accounts',
-  },
 ];

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

@@ -154,7 +154,11 @@ function AccountFormDialogContent({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        <AccountFormDialogFields isNewMode={isNewMode} onClose={handleClose} />
+        <AccountFormDialogFields
+          dialogName={dialogName}
+          isNewMode={isNewMode}
+          onClose={handleClose}
+        />
       </Formik>
     </DialogContent>
   );

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'react-intl';
@@ -28,7 +28,7 @@ import { useAutofocus } from 'hooks';
  * Account form dialogs fields.
  */
 function AccountFormDialogFields({
-  // #ownProps
+  // #ownPropscl
   onClose,
   isNewMode,
 

client/src/containers/Dialogs/InviteUserDialog.js

@@ -1,218 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import {
-  Dialog,
-  Button,
-  FormGroup,
-  InputGroup,
-  Intent,
-  Classes,
-} from '@blueprintjs/core';
-import classNames from 'classnames';
-import { pick, snakeCase } from 'lodash';
-import { queryCache } from 'react-query';
-
-import AppToaster from 'components/AppToaster';
-import DialogReduxConnect from 'components/DialogReduxConnect';
-
-import UserListDialogConnect from 'containers/Dialogs/UsersListDialog.connector';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withUsersActions from 'containers/Users/withUsersActions';
-import ErrorMessage from 'components/ErrorMessage';
-import useAsync from 'hooks/async';
-
-import { compose, objectKeysTransform } from 'utils';
-
-function InviteUserDialog({
-  name,
-  payload,
-  isOpen,
-  closeDialog,
-  requestFetchUser,
-  requestEditUser,
-}) {
-  const { formatMessage } = 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()
-      .label(formatMessage({ id: 'first_name_' })),
-    last_name: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'last_name_' })),
-    email: Yup.string()
-      .email()
-      .required()
-      .label(formatMessage({ id: 'email' })),
-    phone_number: Yup.number()
-      .required()
-      .label(formatMessage({ id: 'phone_number_' })),
-  });
-
-  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: formatMessage({
-                id: 'the_user_details_has_been_updated',
-              }),
-              intent: Intent.SUCCESS,
-            });
-            setSubmitting(false);
-            queryCache.invalidateQueries('users-table');
-          })
-          .catch((error) => {
-            setSubmitting(false);
-          });
-      }
-    },
-  });
-  const { errors, touched } = useMemo(() => formik, [formik]);
-
-  const onDialogOpening = () => {
-    fetchHook.execute();
-  };
-
-  const onDialogClosed = useCallback(() => {
-    formik.resetForm();
-  }, [formik.resetForm]);
-
-  // Handles dialog close.
-  const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [closeDialog, name]);
-
-  return (
-    <Dialog
-      name={name}
-      title={payload.action === 'edit' ? <T id={'edit_user'} /> : ''}
-      className={classNames({
-        'dialog--loading': fetchHook.pending,
-        'dialog--invite-user': true,
-      })}
-      autoFocus={true}
-      canEscapeKeyClose={true}
-      isOpen={isOpen}
-      isLoading={fetchHook.pending}
-      onClosed={onDialogClosed}
-      onOpening={onDialogOpening}
-      onClose={handleClose}
-    >
-      <form onSubmit={formik.handleSubmit}>
-        <div className={Classes.DIALOG_BODY}>
-          <FormGroup
-            label={<T id={'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={<T id={'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={<T id={'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={<T id={'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}>
-              <T id={'close'} />
-            </Button>
-            <Button
-              intent={Intent.PRIMARY}
-              type="submit"
-              disabled={formik.isSubmitting}
-            >
-              {payload.action === 'edit' ? <T id={'edit'} /> : ''}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </Dialog>
-  );
-}
-
-export default compose(
-  withDialogActions,
-  UserListDialogConnect,
-  withUsersActions,
-  DialogReduxConnect,
-)(InviteUserDialog);

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

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

client/src/containers/Dialogs/InviteUserDialog/InviteUserDialogContent.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { pick, snakeCase } from 'lodash';
+import { queryCache, useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
+import { Formik } from 'formik';
+import { AppToaster, DialogContent } from 'components';
+
+import withUsersActions from 'containers/Users/withUsersActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, objectKeysTransform } from 'utils';
+import { InviteUserFormSchema } from './InviteUserDialog.schema';
+import UserFormDialogForm from './InviteUserDialogForm';
+
+import { transformApiErrors } from './utils';
+
+//
+function InviteUserDialogContent({
+  // #wihtCurrenciesActions
+  requestFetchUser,
+  requestSubmitInvite,
+
+  // #withDialogActions
+  closeDialog,
+
+  // #ownProp
+  action,
+  userId,
+  dialogName,
+}) {
+  const { formatMessage } = useIntl();
+
+  // Fetch user details.
+  const fetchHook = useQuery(
+    ['user', userId],
+    (key, id) => requestFetchUser(id),
+    { enabled: userId },
+  );
+
+  const initialValues = {
+    status: 1,
+    ...(action === 'edit' &&
+      pick(
+        objectKeysTransform(userId, snakeCase),
+        Object.keys(InviteUserFormSchema.fields),
+      )),
+  };
+
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { ...values };
+
+    requestSubmitInvite(form)
+      .then((response) => {
+        closeDialog(dialogName);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'teammate_invited_to_organization_account',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        setSubmitting(false);
+        queryCache.invalidateQueries('users-table');
+      })
+      .catch((errors) => {
+        const errorsTransformed = transformApiErrors(errors);
+
+        setErrors({ ...errorsTransformed });
+        setSubmitting(false);
+      });
+  };
+
+  const handleCancelBtnClick = () => {
+    closeDialog('invite-user');
+  };
+
+  return (
+    <DialogContent isLoading={fetchHook.isFetching}>
+      <Formik
+        validationSchema={InviteUserFormSchema}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      >
+        <UserFormDialogForm
+          action={action}
+          onCancelClick={handleCancelBtnClick}
+        />
+      </Formik>
+    </DialogContent>
+  );
+}
+
+export default compose(
+  // UserFormDialogConnect,
+  withDialogActions,
+  withUsersActions,
+)(InviteUserDialogContent);

client/src/containers/Dialogs/InviteUserDialog/InviteUserDialogForm.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Button,
+} from '@blueprintjs/core';
+import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import { inputIntent, saveInvoke } from 'utils';
+
+export default function InviteUserDialogForm({ onCancelClick, action }) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleCancelBtnClick = (event) => {
+    saveInvoke(onCancelClick, event);
+  };
+
+  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" />}
+              inline={true}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+    </div>
+
+      <div className={CLASSES.DIALOG_FOOTER}>
+        <div className={CLASSES.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancelBtnClick}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+            {action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}

client/src/containers/Dialogs/InviteUserDialog/index.js

@@ -1,11 +1,12 @@
 import React, { lazy } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'react-intl';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';
 
-const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
+const UserFormDialogContent = lazy(() => import('./InviteUserDialogContent'));
 
+// User form dialog.
 function UserFormDialog({
   dialogName,
   payload = { action: '', id: null },

client/src/containers/Dialogs/InviteUserDialog/utils.js

@@ -0,0 +1,10 @@
+import { formatMessage } from 'services/intl';
+
+export const transformApiErrors = (errors) => {
+    const fields = {};
+  
+    if (errors.find(error => error.type === 'EMAIL.ALREADY.INVITED')) {
+      fields.email = formatMessage({ id: 'email_is_already_used' });
+    }
+    return fields;
+  }

client/src/containers/Dialogs/UserFormDialog/UserFormDialogContent.js

@@ -1,162 +0,0 @@
-import React, { useCallback } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import {
-  Button,
-  FormGroup,
-  InputGroup,
-  Intent,
-  Classes,
-} from '@blueprintjs/core';
-import { pick, snakeCase } from 'lodash';
-import classNames from 'classnames';
-import { queryCache, useQuery } from 'react-query';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import {
-  If,
-  ErrorMessage,
-  AppToaster,
-  FieldRequiredHint,
-  DialogContent,
-} from 'components';
-
-import UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
-import withUsersActions from 'containers/Users/withUsersActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose, objectKeysTransform } from 'utils';
-
-function UserFormDialogContent({
-  // #wihtCurrenciesActions
-  requestFetchUser,
-  requestSubmitInvite,
-
-  // #withDialogActions
-  closeDialog,
-
-  // #ownProp
-  action,
-  userId,
-  dialogName,
-}) {
-  const { formatMessage } = useIntl();
-
-  const fetchHook = useQuery(
-    // action === 'edit' && ['user', action.user.id],
-    action === 'edit' && ['user', userId],
-    (key, id) => requestFetchUser(id),
-    { enabled: userId },
-  );
-
-  const validationSchema = Yup.object().shape({
-    email: Yup.string()
-      .email()
-      .required()
-      .label(formatMessage({ id: 'email' })),
-  });
-
-  const initialValues = {
-    status: 1,
-    ...(action === 'edit' &&
-      pick(
-        objectKeysTransform(userId, snakeCase),
-        Object.keys(validationSchema.fields),
-      )),
-  };
-
-  const {
-    errors,
-    touched,
-    resetForm,
-    getFieldProps,
-    handleSubmit,
-    isSubmitting,
-  } = useFormik({
-    enableReinitialize: true,
-    initialValues,
-    validationSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      const form = { ...values };
-
-      requestSubmitInvite(form)
-        .then((response) => {
-          closeDialog(dialogName);
-          AppToaster.show({
-            message: formatMessage({
-              id: 'teammate_invited_to_organization_account',
-            }),
-            intent: Intent.SUCCESS,
-          });
-          setSubmitting(false);
-          queryCache.invalidateQueries('users-table');
-        })
-        .catch((errors) => {
-          setSubmitting(false);
-        });
-    },
-  });
-
-  // Handles dialog close.
-  const handleClose = useCallback(() => {
-    closeDialog(dialogName);
-  }, [closeDialog, dialogName]);
-
-  // Handle the dialog opening.
-  const onDialogOpening = useCallback(() => {
-    fetchHook.refetch();
-  }, [fetchHook]);
-
-  const onDialogClosed = useCallback(() => {
-    resetForm();
-    closeDialog(dialogName);
-  }, [resetForm]);
-
-  console.log(action, 'action');
-
-  return (
-    <DialogContent isLoading={fetchHook.isFetching}>
-      <form onSubmit={handleSubmit}>
-        <div className={Classes.DIALOG_BODY}>
-          <p className="mb2">
-            <T id={'your_access_to_your_team'} />
-          </p>
-
-          <FormGroup
-            label={<T id={'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}>
-              <T id={'cancel'} />
-            </Button>
-            <Button
-              intent={Intent.PRIMARY}
-              type="submit"
-              disabled={isSubmitting}
-            >
-              {action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </DialogContent>
-  );
-}
-
-export default compose(
-  // UserFormDialogConnect,
-  withDialogActions,
-  withUsersActions,
-)(UserFormDialogContent);

client/src/containers/Preferences/Accountant/Accountant.js

@@ -1,9 +1,59 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import { Formik } from 'formik';
+import { useQuery } from 'react-query';
+import { CLASSES } from 'common/classes';
+import { LoadingIndicator } from 'components';
+import AccountantForm from './AccountantForm';
+import { AccountantSchema } from './Accountant.schema';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withSettings from 'containers/Settings/withSettings';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+
+import { compose } from 'utils';
+
+// Accountant preferences.
+function AccountantPreferences({
+  changePreferencesPageTitle,
+
+  // #withAccountsActions
+  requestFetchAccounts,
+}) {
+  const initialValues = {};
+
+  useEffect(() => {
+    changePreferencesPageTitle('Accountant');
+  }, [changePreferencesPageTitle]);
+
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
 
-export default function AccountantPreferences() {
   return (
-    <div class="preferences__inside-content--accountant">
+    <div
-
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
+      )}
+    >
+      <div className={classNames(CLASSES.CARD)}>
+        <LoadingIndicator loading={fetchAccounts.isFetching} spinnerSize={28}>
+          <Formik
+            initialValues={initialValues}
+            validationSchema={AccountantSchema}
+            component={AccountantForm}
+          />
+        </LoadingIndicator>
+      </div>
     </div>
   );
 }
+
+export default compose(
+  withSettings(({ organizationSettings }) => ({ organizationSettings })),
+  withSettingsActions,
+  withDashboardActions,
+  withAccountsActions,
+)(AccountantPreferences);

client/src/containers/Preferences/Accountant/Accountant.schema.js

@@ -0,0 +1,10 @@
+import * as Yup from 'yup';
+
+const Schema = Yup.object().shape({
+  accounting_basis: Yup.string().required(),
+  account_code_required: Yup.boolean(),
+  customer_deposit_account: Yup.number().nullable(),
+  vendor_withdrawal_account: Yup.number().nullable(),
+});
+
+export const AccountantSchema = Schema;

client/src/containers/Preferences/Accountant/AccountantForm.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Form } from 'formik';
+import {
+  FormGroup,
+  RadioGroup,
+  Radio,
+  Checkbox,
+  Button,
+  Intent,
+} from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { AccountsSelectList } from 'components';
+import {
+  FieldRequiredHint,
+} from 'components';
+import { FormattedMessage as T } from 'react-intl';
+import { compose } from 'utils';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+function AccountantForm({
+  // #withAccounts
+  accountsList,
+}) {
+  const history = useHistory();
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <Form>
+      <FormGroup label={<strong>Accounts</strong>}>
+        <Checkbox
+          label={'Make account code required when create a new accounts.'}
+        />
+        <Checkbox
+          label={'Should account code be unique when create a new account.'}
+        />
+      </FormGroup>
+
+      <FormGroup
+        labelInfo={<FieldRequiredHint />}
+        label={<strong>Accounting Basis</strong>}>
+        <RadioGroup inline={true}>
+          <Radio label="Cash" value="cash" />
+          <Radio label="Accural" value="accural" />
+        </RadioGroup>
+      </FormGroup>
+
+      <FormGroup
+        label={<strong>Deposit customer account</strong>}
+        helperText={
+          'Select a preferred account to deposit into it after customer make payment.'
+        }
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelectList
+          accounts={accountsList}
+          defaultSelectText={<T id={'select_payment_account'} />}
+          filterByTypes={['current_asset']}
+        />
+      </FormGroup>
+
+      <FormGroup
+        label={<strong>Withdrawal customer account</strong>}
+        helperText={
+          'Select a preferred account to deposit into it after customer make payment.'
+        }
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelectList
+          accounts={accountsList}
+          defaultSelectText={<T id={'select_payment_account'} />}
+          filterByTypes={['current_asset']}
+        />
+      </FormGroup>
+
+      <FormGroup
+        label={<strong>Vendor advance deposit</strong>}
+        helperText={
+          'Select a preferred account to deposit into it vendor advanced deposits.'
+        }
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelectList
+          accounts={accountsList}
+          defaultSelectText={<T id={'select_payment_account'} />}
+          filterByTypes={['current_asset', 'other_current_asset']}
+        />
+      </FormGroup>
+
+      <div className={'card__footer'}>
+        <Button intent={Intent.PRIMARY} type="submit">
+          <T id={'save'} />
+        </Button>
+        <Button onClick={handleCloseClick}>
+          <T id={'close'} />
+        </Button>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(
+  withAccounts(({ accountsList }) => ({ accountsList })),
+)(AccountantForm);

client/src/containers/Preferences/Currencies/Currencies.js

@@ -1,20 +1,20 @@
+
+
 import React from 'react';
-import { Button, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
-import { compose } from 'utils';
-import withDialogActions from 'containers/Dialog/withDialogActions';
 
-function Currencies({ openDialog }) {
+import { CLASSES } from 'common/classes';
-  const onClickNewCurrency = () => {
+import CurrenciesList from './CurrenciesList';
-    openDialog('currency-form',{});
-  };
 
+export default function PreferencesCurrenciesPage() {
   return (
-    <div className={'preferences__inside-content'}>
+    <div className={classNames(
-      <div className={'preferences__tabs'}>
+      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        
+      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES,
+    )}>
+      <div className={classNames(CLASSES.CARD)}>
+        <CurrenciesList />
       </div>
     </div>
-  );
+  )
 }
-
-export default compose(withDialogActions)(Currencies);

client/src/containers/Preferences/Currencies/CurrenciesDataTable.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Intent,
   Button,
@@ -8,10 +8,9 @@ import {
   Position,
 } from '@blueprintjs/core';
 import { withRouter } from 'react-router';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';
-import { useUpdateEffect } from 'hooks';
+
-import LoadingIndicator from 'components/LoadingIndicator';
 import { DataTable, Icon } from 'components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -23,24 +22,15 @@ function CurrenciesDataTable({
   currenciesList,
   currenciesLoading,
 
-  loading,
+  // #ownProps
   onFetchData,
-  onSelectedRowsChange,
   onDeleteCurrency,
 
   // #withDialog.
   openDialog,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
-
   const { formatMessage } = useIntl();
 
-  useUpdateEffect(() => {
-    if (!currenciesLoading) {
-      setInitialMount(true);
-    }
-  }, [currenciesLoading, setInitialMount]);
-
   const handleEditCurrency = useCallback(
     (currency) => {
       openDialog('currency-form', {
@@ -59,7 +49,6 @@ function CurrenciesDataTable({
           text={formatMessage({ id: 'edit_currency' })}
           onClick={() => handleEditCurrency(currency)}
         />
-
         <MenuItem
           icon={<Icon icon="trash-16" iconSize={16} />}
           text={formatMessage({ id: 'delete_currency' })}
@@ -116,31 +105,20 @@ function CurrenciesDataTable({
 
   const handleDataTableFetchData = useCallback(
     (...args) => {
-      onFetchData && onFetchData(...args);
+      saveInvoke(onFetchData, ...args);
     },
     [onFetchData],
   );
 
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
-    },
-    [onSelectedRowsChange],
-  );
-
   return (
-    <LoadingIndicator loading={loading} mount={false}>
+    <DataTable
-      <DataTable
+      columns={columns}
-        columns={columns}
+      data={currenciesList}
-        data={currenciesList}
+      loading={currenciesLoading}
-        onFetchData={handleDataTableFetchData}
+      onFetchData={handleDataTableFetchData}
-        noInitialFetch={true}
+      noInitialFetch={true}
-        loading={currenciesLoading && !initialMount}
+      rowContextMenu={onRowContextMenu}
-        onSelectedRowsChange={handleSelectedRowsChange}
+    />
-        rowContextMenu={onRowContextMenu}
-      />
-    </LoadingIndicator>
   );
 }
 
@@ -148,7 +126,8 @@ export default compose(
   withRouter,
   withDashboardActions,
   withDialogActions,
-  withCurrencies(({ currenciesList }) => ({
+  withCurrencies(({ currenciesList, currenciesLoading }) => ({
     currenciesList,
+    currenciesLoading,
   })),
 )(CurrenciesDataTable);

client/src/containers/Preferences/Currencies/CurrenciesList.js

@@ -1,6 +1,6 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { Alert, Intent } from '@blueprintjs/core';
-import { useQuery, queryCache } from 'react-query';
+import { useQuery } from 'react-query';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -8,33 +8,23 @@ import {
 } from 'react-intl';
 
 import CurrenciesDataTable from './CurrenciesDataTable';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import AppToaster from 'components/AppToaster';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { compose } from 'utils';
 
+// Currencies landing list page.
 function CurrenciesList({
-  // #withCurrencies
-  currenciesList,
-  currenciesLoading,
-
   // #withCurrenciesActions
   requestDeleteCurrency,
   requestFetchCurrencies,
 
-  // #withDialogActions
-  openDialog,
-
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
   const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
 
   const fetchCurrencies = useQuery(
@@ -52,7 +42,7 @@ function CurrenciesList({
   // Handle click and cancel/confirm currency delete
   const handleDeleteCurrency = useCallback((currency) => {
     setDeleteCurrencyState(currency);
-  }, []);
+  }, [setDeleteCurrencyState]);
 
   // handle cancel delete currency alert.
   const handleCancelCurrencyDelete = () => {
@@ -79,44 +69,29 @@ function CurrenciesList({
     [deleteCurrencyState, requestDeleteCurrency, formatMessage],
   );
 
-  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (accounts) => {
-      setSelectedRows(accounts);
-    },
-    [setSelectedRows],
-  );
-
   return (
-    <DashboardInsider loading={fetchCurrencies.isFetching}>
+    <>
-      <DashboardPageContent>
+      <CurrenciesDataTable
-        <CurrenciesDataTable
+        onDeleteCurrency={handleDeleteCurrency}
-          onDeleteCurrency={handleDeleteCurrency}
+        onEditCurrency={handleEditCurrency}
-          onEditCurrency={handleEditCurrency}
+      />
-          onSelectedRowsChange={handleSelectedRowsChange}
+      <Alert
-        />
+        cancelButtonText={<T id={'cancel'} />}
-        <Alert
+        confirmButtonText={<T id={'delete'} />}
-          cancelButtonText={<T id={'cancel'} />}
+        intent={Intent.DANGER}
-          confirmButtonText={<T id={'delete'} />}
+        isOpen={deleteCurrencyState}
-          icon="trash"
+        onCancel={handleCancelCurrencyDelete}
-          intent={Intent.DANGER}
+        onConfirm={handleConfirmCurrencyDelete}
-          isOpen={deleteCurrencyState}
+      >
-          onCancel={handleCancelCurrencyDelete}
+        <p>
-          onConfirm={handleConfirmCurrencyDelete}
+          Once you delete this currency, you won't be able to restore it later. Are you sure you want to delete ?
-        >
+        </p>
-          <p>
+      </Alert>
-            <FormattedHTMLMessage
+    </>
-              id={'once_delete_this_currency_you_will_able_to_restore_it'}
-            />
-          </p>
-        </Alert>
-      </DashboardPageContent>
-    </DashboardInsider>
   );
 }
 
 export default compose(
   withDashboardActions,
   withCurrenciesActions,
-  withDialogActions,
 )(CurrenciesList);

client/src/containers/Preferences/General/General.js

@@ -1,39 +1,17 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
-import { useFormik } from 'formik';
+import { Formik } from 'formik';
 import { mapKeys, snakeCase } from 'lodash';
-import * as Yup from 'yup';
+import { Intent } from '@blueprintjs/core';
-import {
-  Button,
-  FormGroup,
-  InputGroup,
-  Intent,
-  MenuItem,
-  Classes,
-  Spinner,
-  Position,
-} from '@blueprintjs/core';
 import classNames from 'classnames';
-import { TimezonePicker } from '@blueprintjs/timezone';
 import { useQuery, queryCache } from 'react-query';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
-import { DateInput } from '@blueprintjs/datetime';
+import { CLASSES } from 'common/classes';
-import moment from 'moment';
-import { useHistory } from 'react-router-dom';
 
-import {
+import { compose, optionsMapToArray } from 'utils';
-  compose,
-  optionsMapToArray,
-  tansformDateValue,
-  momentFormatter,
-} from 'utils';
 
-import {
+import { AppToaster, LoadingIndicator } from 'components';
-  If,
+import GeneralForm from './GeneralForm';
-  FieldRequiredHint,
+import { PreferencesGeneralSchema } from './General.schema';
-  ListSelect,
-  ErrorMessage,
-  AppToaster,
-} from 'components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -51,524 +29,59 @@ function GeneralPreferences({
   requestFetchOptions,
 }) {
   const { formatMessage } = useIntl();
-  const [selectedItems, setSelectedItems] = useState({});
-  const history = useHistory();
 
-  const fetchHook = useQuery(['settings'], () => {
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions());
-    requestFetchOptions();
-  });
 
   useEffect(() => {
     changePreferencesPageTitle(formatMessage({ id: 'general' }));
   }, [changePreferencesPageTitle, formatMessage]);
 
-  const businessLocation = [{ id: 218, name: 'LIBYA', value: 'libya' }];
+  function transformGeneralSettings(data) {
-  const languagesDisplay = [
-    { id: 0, name: 'English', value: 'en' },
-    { id: 1, name: 'Arabic', value: 'ar' },
-  ];
-  const currencies = [
-    { id: 0, name: 'US Dollar', value: 'USD' },
-    { id: 1, name: 'Euro', value: 'EUR' },
-    { id: 1, name: 'Libyan Dinar	', value: 'LYD' },
-  ];
-
-  const fiscalYear = [
-    {
-      id: 0,
-      name: `${formatMessage({ id: 'january' })} - ${formatMessage({
-        id: 'december',
-      })}`,
-      value: 'january',
-    },
-    {
-      id: 1,
-      name: `${formatMessage({ id: 'february' })} - ${formatMessage({
-        id: 'january',
-      })}`,
-      value: 'february',
-    },
-    {
-      id: 2,
-      name: `${formatMessage({ id: 'march' })} - ${formatMessage({
-        id: 'february',
-      })}`,
-      value: 'March',
-    },
-    {
-      id: 3,
-      name: `${formatMessage({ id: 'april' })} - ${formatMessage({
-        id: 'march',
-      })}`,
-      value: 'april',
-    },
-    {
-      id: 4,
-      name: `${formatMessage({ id: 'may' })} - ${formatMessage({
-        id: 'april',
-      })}`,
-      value: 'may',
-    },
-    {
-      id: 5,
-      name: `${formatMessage({ id: 'june' })} - ${formatMessage({
-        id: 'may',
-      })}`,
-      value: 'june',
-    },
-    {
-      id: 6,
-      name: `${formatMessage({ id: 'july' })} - ${formatMessage({
-        id: 'june',
-      })}`,
-      value: 'july',
-    },
-    {
-      id: 7,
-      name: `${formatMessage({ id: 'august' })} - ${formatMessage({
-        id: 'july',
-      })}`,
-      value: 'August',
-    },
-    {
-      id: 8,
-      name: `${formatMessage({ id: 'september' })} - ${formatMessage({
-        id: 'august',
-      })}`,
-      value: 'september',
-    },
-    {
-      id: 9,
-      name: `${formatMessage({ id: 'october' })} - ${formatMessage({
-        id: 'november',
-      })}`,
-      value: 'october',
-    },
-    {
-      id: 10,
-      name: `${formatMessage({ id: 'november' })} - ${formatMessage({
-        id: 'october',
-      })}`,
-      value: 'november',
-    },
-    {
-      id: 11,
-      name: `${formatMessage({ id: 'december' })} - ${formatMessage({
-        id: 'november',
-      })}`,
-      value: 'december',
-    },
-  ];
-  const dateFormat = [
-    {
-      id: 1,
-      name: 'MM/DD/YY',
-      label: `${moment().format('MM/DD/YYYY')}`,
-      value: 'mm/dd/yy',
-    },
-    {
-      id: 2,
-      name: 'DD/MM/YY',
-      label: `${moment().format('DD/MM/YYYY')}`,
-      value: 'dd/mm/yy',
-    },
-    {
-      id: 3,
-      name: 'YY/MM/DD',
-      label: `${moment().format('YYYY/MM/DD')}`,
-      value: 'yy/mm/dd',
-    },
-    {
-      id: 4,
-      name: 'MM-DD-YY',
-      label: `${moment().format('MM-DD-YYYY')}`,
-      value: 'mm-dd-yy',
-    },
-    {
-      id: 5,
-      name: 'DD-MM-YY',
-      label: `${moment().format('DD-MM-YYYY')}`,
-      value: 'dd-mm-yy',
-    },
-    {
-      id: 6,
-      name: 'YY-MM-DD',
-      label: `${moment().format('YYYY-MM-DD')}`,
-      value: 'yy-mm-dd',
-    },
-  ];
-
-  const validationSchema = Yup.object().shape({
-    name: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'organization_name_' })),
-    financial_date_start: Yup.date()
-      .required()
-      .label(formatMessage({ id: 'date_start_' })),
-    industry: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'organization_industry_' })),
-    location: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'location' })),
-    base_currency: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'base_currency_' })),
-    fiscal_year: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'fiscal_year_' })),
-    language: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'language' })),
-    time_zone: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'time_zone_' })),
-    date_format: Yup.string()
-      .required()
-      .label(formatMessage({ id: 'date_format_' })),
-  });
-
-  function snakeCaseChange(data) {
     return mapKeys(data, (value, key) => snakeCase(key));
   }
 
-  const initialValues = snakeCaseChange(organizationSettings);
+  const initialValues = {
+    ...transformGeneralSettings(organizationSettings),
+  };
 
-  const {
+  const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
-    values,
+    const options = optionsMapToArray(values).map((option) => {
-    errors,
+      return { key: option.key, ...option, group: 'organization' };
-    touched,
+    });
-    setFieldValue,
+    requestSubmitOptions({ options })
-    getFieldProps,
+      .then((response) => {
-    handleSubmit,
+        AppToaster.show({
-    resetForm,
+          message: formatMessage({
-    isSubmitting,
+            id: 'the_options_has_been_successfully_created',
-  } = useFormik({
+          }),
-    enableReinitialize: true,
+          intent: Intent.SUCCESS,
-    initialValues: {
-      ...initialValues,
-    },
-    validationSchema,
-    onSubmit: (values, { setSubmitting }) => {
-      const options = optionsMapToArray(values).map((option) => {
-        return { key: option.key, ...option, group: 'organization' };
-      });
-      requestSubmitOptions({ options })
-        .then((response) => {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_options_has_been_successfully_created',
-            }),
-            intent: Intent.SUCCESS,
-          });
-          setSubmitting(false);
-          resetForm();
-          queryCache.invalidateQueries('settings');
-        })
-        .catch((error) => {
-          setSubmitting(false);
         });
-    },
+        setSubmitting(false);
-  });
+        resetForm();
-
+        queryCache.invalidateQueries('settings');
-  const onItemRenderer = (item, { handleClick }) => (
+      })
-    <MenuItem key={item.id} text={item.name} onClick={handleClick} />
+      .catch((error) => {
-  );
+        setSubmitting(false);
-
-  const currencyItem = (item, { handleClick }) => (
-    <MenuItem
-      key={item.id}
-      text={item.name}
-      label={item.value}
-      onClick={handleClick}
-    />
-  );
-
-  const handleDateChange = useCallback(
-    (date) => {
-      const formatted = moment(date).format('YYYY-MM-DD');
-      setFieldValue('financial_date_start', formatted);
-    },
-    [setFieldValue],
-  );
-  const date_format = (item, { handleClick }) => (
-    <MenuItem
-      key={item.id}
-      text={item.name}
-      label={item.label}
-      onClick={handleClick}
-    />
-  );
-
-  const onItemsSelect = (filedName) => {
-    return (filed) => {
-      setSelectedItems({
-        ...selectedItems,
-        [filedName]: filed,
       });
-      setFieldValue(filedName, filed.value);
-    };
-  };
-
-  const filterItems = (query, item, _index, exactMatch) => {
-    const normalizedTitle = item.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return normalizedTitle.indexOf(normalizedQuery) >= 0;
-    }
-  };
-
-  const handleTimezoneChange = useCallback(
-    (timezone) => {
-      setFieldValue('time_zone', timezone);
-    },
-    [setFieldValue],
-  );
-
-  const handleClose = () => {
-    history.goBack();
   };
 
   return (
     <div
-      className={classNames({
+      className={classNames(
-        'preferences__inside-content--general': true,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        preferences__loading: fetchHook.pending,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
-      })}
+      )}
     >
-      <form onSubmit={handleSubmit}>
+      <div className={classNames(CLASSES.CARD)}>
-        <FormGroup
+        <LoadingIndicator loading={fetchSettings.isFetching} spinnerSize={28}>
-          label={<T id={'organization_name'} />}
+          <Formik
-          labelInfo={<FieldRequiredHint />}
+            initialValues={initialValues}
-          inline={true}
+            validationSchema={PreferencesGeneralSchema}
-          intent={errors.name && touched.name && Intent.DANGER}
+            onSubmit={handleFormSubmit}
-          helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
+            component={GeneralForm}
-          className={'form-group--org-name'}
-        >
-          <InputGroup
-            medium={'true'}
-            intent={errors.name && touched.name && Intent.DANGER}
-            {...getFieldProps('name')}
           />
-        </FormGroup>
+        </LoadingIndicator>
-        <FormGroup
+      </div>
-          label={<T id={'financial_starting_date'} />}
-          labelInfo={<FieldRequiredHint />}
-          inline={true}
-          intent={
-            errors.financial_date_start &&
-            touched.financial_date_start &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage
-              name="financial_date_start"
-              {...{ errors, touched }}
-            />
-          }
-          className={classNames('form-group--select-list', Classes.FILL)}
-        >
-          <DateInput
-            {...momentFormatter('MMMM Do YYYY')}
-            value={tansformDateValue(values.financial_date_start)}
-            onChange={handleDateChange}
-            popoverProps={{ position: Position.BOTTOM, minimal: true }}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={<T id={'organization_industry'} />}
-          inline={true}
-          intent={errors.industry && touched.industry && Intent.DANGER}
-          helperText={<ErrorMessage name="industry" {...{ errors, touched }} />}
-          className={'form-group--org-industry'}
-        >
-          <InputGroup
-            medium={'true'}
-            intent={errors.industry && touched.industry && Intent.DANGER}
-            {...getFieldProps('industry')}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={<T id={'business_location'} />}
-          className={classNames(
-            'form-group--business-location',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          inline={true}
-          helperText={<ErrorMessage name="location" {...{ errors, touched }} />}
-          intent={errors.location && touched.location && Intent.DANGER}
-        >
-          <ListSelect
-            items={businessLocation}
-            noResults={<MenuItem disabled={true} text="No result." />}
-            itemRenderer={onItemRenderer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onItemsSelect('location')}
-            selectedItem={values.location}
-            selectedItemProp={'value'}
-            defaultText={<T id={'select_business_location'} />}
-            labelProp={'name'}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={<T id={'base_currency'} />}
-          labelInfo={<FieldRequiredHint />}
-          className={classNames(
-            'form-group--base-currency',
-            'form-group--select-list',
-            Classes.LOADING,
-            Classes.FILL,
-          )}
-          inline={true}
-          helperText={
-            <ErrorMessage name="base_currency" {...{ errors, touched }} />
-          }
-          intent={
-            errors.base_currency && touched.base_currency && Intent.DANGER
-          }
-        >
-          <ListSelect
-            items={currencies}
-            noResults={<MenuItem disabled={true} text="No result." />}
-            itemRenderer={currencyItem}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onItemsSelect('base_currency')}
-            itemPredicate={filterItems}
-            selectedItem={values.base_currency}
-            selectedItemProp={'value'}
-            defaultText={<T id={'select_base_currency'} />}
-            labelProp={'name'}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={<T id={'fiscal_year'} />}
-          labelInfo={<FieldRequiredHint />}
-          className={classNames(
-            'form-group--fiscal-year',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          inline={true}
-          helperText={
-            <ErrorMessage name="fiscal_year" {...{ errors, touched }} />
-          }
-          intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
-        >
-          <ListSelect
-            items={fiscalYear}
-            noResults={<MenuItem disabled={true} text="No result." />}
-            itemRenderer={onItemRenderer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onItemsSelect('fiscal_year')}
-            itemPredicate={filterItems}
-            selectedItem={values.fiscal_year}
-            selectedItemProp={'value'}
-            defaultText={<T id={'select_fiscal_year'} />}
-            labelProp={'name'}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={<T id={'language'} />}
-          labelInfo={<FieldRequiredHint />}
-          inline={true}
-          className={classNames(
-            'form-group--language',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          intent={errors.language && touched.language && Intent.DANGER}
-          helperText={<ErrorMessage name="language" {...{ errors, touched }} />}
-        >
-          <ListSelect
-            items={languagesDisplay}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={onItemRenderer}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onItemsSelect('language')}
-            itemPredicate={filterItems}
-            selectedItem={values.language}
-            selectedItemProp={'value'}
-            defaultText={<T id={'select_language'} />}
-            labelProp={'name'}
-          />
-        </FormGroup>
-        <FormGroup
-          label={<T id={'time_zone'} />}
-          labelInfo={<FieldRequiredHint />}
-          inline={true}
-          className={classNames(
-            'form-group--time-zone',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          intent={errors.time_zone && touched.time_zone && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="time_zone" {...{ errors, touched }} />
-          }
-        >
-          <TimezonePicker
-            value={values.time_zone}
-            onChange={handleTimezoneChange}
-            valueDisplayFormat="composite"
-            placeholder={<T id={'select_time_zone'} />}
-          />
-        </FormGroup>
-        <FormGroup
-          label={<T id={'date_format'} />}
-          labelInfo={<FieldRequiredHint />}
-          inline={true}
-          className={classNames(
-            'form-group--language',
-            'form-group--select-list',
-            Classes.FILL,
-          )}
-          intent={errors.date_format && touched.date_format && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="date_format" {...{ errors, touched }} />
-          }
-        >
-          <ListSelect
-            items={dateFormat}
-            noResults={<MenuItem disabled={true} text="No result." />}
-            itemRenderer={date_format}
-            popoverProp={{ minimal: true }}
-            onItemSelect={onItemsSelect('date_format')}
-            itemPredicate={filterItems}
-            selectedItem={values.date_format}
-            selectedItemProp={'value'}
-            defaultText={<T id={'select_date_format'} />}
-            labelProp={'name'}
-          />
-        </FormGroup>
-
-        <div className={'preferences__floating-footer '}>
-          <Button
-            className={'preferences-button'}
-            intent={Intent.PRIMARY}
-            type="submit"
-            loading={isSubmitting}
-          >
-            <T id={'save'} />
-          </Button>
-          <Button onClick={handleClose}>
-            <T id={'close'} />
-          </Button>
-        </div>
-      </form>
-      <If condition={fetchHook.isFetching || isSubmitting}>
-        <div className={'preferences__loading-overlay'}>
-          <Spinner size={40} />
-        </div>
-      </If>
     </div>
   );
 }

client/src/containers/Preferences/General/General.schema.js

@@ -0,0 +1,34 @@
+import * as Yup from 'yup';
+import { formatMessage } from 'services/intl';
+
+const Schema = Yup.object().shape({
+  name: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'organization_name_' })),
+  financial_date_start: Yup.date()
+    .required()
+    .label(formatMessage({ id: 'date_start_' })),
+  industry: Yup.string()
+    .nullable()
+    .label(formatMessage({ id: 'organization_industry_' })),
+  location: Yup.string()
+    .nullable()
+    .label(formatMessage({ id: 'location' })),
+  base_currency: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'base_currency_' })),
+  fiscal_year: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'fiscal_year_' })),
+  language: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'language' })),
+  time_zone: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'time_zone_' })),
+  date_format: Yup.string()
+    .required()
+    .label(formatMessage({ id: 'date_format_' })),
+});
+
+export const PreferencesGeneralSchema = Schema;

client/src/containers/Preferences/General/GeneralForm.js

@@ -0,0 +1,250 @@
+import { Form } from 'formik';
+import React from 'react';
+import {
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import { TimezonePicker } from '@blueprintjs/timezone';
+import { ErrorMessage, FastField } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { DateInput } from '@blueprintjs/datetime';
+import { useHistory } from 'react-router-dom';
+import { ListSelect, FieldRequiredHint } from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import countriesOptions from 'common/countries';
+import currencies from 'common/currencies';
+import fiscalYearOptions from 'common/fiscalYearOptions';
+import languages from 'common/languagesOptions';
+import dateFormatsOptions from 'common/dateFormatsOptions';
+
+export default function PreferencesGeneralForm({}) {
+  const history = useHistory();
+
+  const handleCloseClick = () => {
+    history.go(-1);
+  };
+
+  return (
+    <Form>
+      <FastField name={'name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'organization_name'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="name" />}
+            className={'form-group--org-name'}
+          >
+            <InputGroup medium={'true'} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'financial_date_start'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'financial_starting_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="financial_date_start" />}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+          >
+            <DateInput
+              {...momentFormatter('MMMM Do YYYY')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('financial_date_start', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'industry'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'organization_industry'} />}
+            inline={true}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="industry" />}
+            className={'form-group--org-industry'}
+          >
+            <InputGroup medium={'true'} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'location'}>
+        {({ field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'business_location'} />}
+            className={classNames(
+              'form-group--business-location',
+              CLASSES.FILL,
+            )}
+            inline={true}
+            helperText={<ErrorMessage name="location" />}
+            intent={inputIntent({ error, touched })}
+          >
+            <ListSelect
+              items={countriesOptions}
+              onItemSelect={(item) => {}}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              defaultText={<T id={'select_business_location'} />}
+              labelProp={'name'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'base_currency'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'base_currency'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--base-currency', CLASSES.FILL)}
+            inline={true}
+            helperText={<ErrorMessage name="base_currency" />}
+            intent={inputIntent({ error, touched })}
+          >
+            <ListSelect
+              items={currencies}
+              onItemSelect={(currency) => {
+                form.setFieldValue('base_currency', currency.code);
+              }}
+              selectedItem={value}
+              selectedItemProp={'code'}
+              defaultText={<T id={'select_base_currency'} />}
+              labelProp={'label'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'fiscal_year'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'fiscal_year'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--fiscal-year', CLASSES.FILL)}
+            inline={true}
+            helperText={<ErrorMessage name="fiscal_year" />}
+            intent={inputIntent({ error, touched })}
+          >
+            <ListSelect
+              items={fiscalYearOptions}
+              selectedItemProp={'value'}
+              labelProp={'name'}
+              defaultText={<T id={'select_fiscal_year'} />}
+              selectedItem={value}
+              onItemSelect={(item) => {}}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'language'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'language'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames('form-group--language', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="language" />}
+          >
+            <ListSelect
+              items={languages}
+              selectedItemProp={'value'}
+              labelProp={'name'}
+              defaultText={<T id={'select_language'} />}
+              selectedItem={value}
+              onItemSelect={(item) => {}}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'time_zone'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'time_zone'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames(
+              'form-group--time-zone',
+              CLASSES.FORM_GROUP_LIST_SELECT,
+              CLASSES.FILL,
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="time_zone" />}
+          >
+            <TimezonePicker
+              value={value}
+              onChange={(timezone) => {
+                form.setFieldValue('time_zone', timezone);
+              }}
+              valueDisplayFormat="composite"
+              placeholder={<T id={'select_time_zone'} />}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <FastField name={'date_format'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'date_format'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames('form-group--date-format', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="date_format" />}
+          >
+            <ListSelect
+              items={dateFormatsOptions}
+              onItemSelect={(dateFormat) => {
+                form.setFieldValue('date_format', dateFormat);
+              }}
+              selectedItem={value}
+              selectedItemProp={'value'}
+              defaultText={<T id={'select_date_format'} />}
+              labelProp={'name'}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <div className={'card__footer'}>
+        <Button
+          intent={Intent.PRIMARY}
+          type="submit"
+        >
+          <T id={'save'} />
+        </Button>
+        <Button onClick={handleCloseClick}>
+          <T id={'close'} />
+        </Button>
+      </div>
+    </Form>
+  );
+}

client/src/containers/Preferences/Users/Users.js

@@ -1,20 +1,28 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
-import withUserPreferences from 'containers/Preferences/Users/withUserPreferences'
+import withUserPreferences from 'containers/Preferences/Users/withUserPreferences';
 
 function UsersPreferences({ openDialog }) {
   const onChangeTabs = (currentTabId) => {};
 
   return (
-    <div class='preferences__inside-content preferences__inside-content--users-roles'>
+    <div className={classNames(
-      <div class='preferences__tabs'>
+      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
-        <Tabs animate={true} onChange={onChangeTabs}>
+      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
-          <Tab id='users' title='Users' />
+    )}>
-          <Tab id='roles' title='Roles' />
+      <div className={classNames(CLASSES.CARD)}>
-        </Tabs>
+        <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
+          <Tabs animate={true} onChange={onChangeTabs}>
+            <Tab id="users" title="Users" />
+            <Tab id="roles" title="Roles" />
+          </Tabs>
+        </div>
+        <PreferencesSubContent preferenceTab="users" />
       </div>
-      <PreferencesSubContent preferenceTab='users' />
     </div>
   );
 }

client/src/containers/Preferences/Users/UsersActions.js

@@ -1,9 +1,9 @@
-import React, {useCallback} from 'react';
+import React from 'react';
 import {
   Button,
   Intent,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'react-intl';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -13,9 +13,9 @@ function UsersActions({
   openDialog,
   closeDialog,
 }) {
-  const onClickNewUser = useCallback(() => {
+  const onClickNewUser = () => {
-    openDialog('user-form');
+    openDialog('invite-user');
-  }, [openDialog]);
+  };
 
   return (
     <div className="preferences-actions">

client/src/containers/Preferences/Users/UsersDataTable.js

@@ -12,18 +12,18 @@ import {
 import { withRouter } from 'react-router';
 import { snakeCase } from 'lodash';
 
-import {
+import { FormattedMessage as T, useIntl } from 'react-intl';
-  FormattedMessage as T,
+import { compose, firstLettersArgs } from 'utils';
-  FormattedHTMLMessage,
+
-  useIntl,
+import { DataTable, Icon, If } from 'components';
-} from 'react-intl';
-import { compose } from 'utils';
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Icon, If, AppToaster } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withUsers from 'containers/Users/withUsers';
 
+const AvatarCell = (row) => {
+  return <span className={'avatar'}>{ firstLettersArgs(row.email) }</span>;
+}
+
 function UsersDataTable({
   // #withDialogActions
   openDialog,
@@ -39,7 +39,6 @@ function UsersDataTable({
   onDeleteUser,
   onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
   const onEditUser = useCallback(
@@ -80,7 +79,7 @@ function UsersDataTable({
         />
       </Menu>
     ),
-    [onInactiveUser, onDeleteUser, onEditUser],
+    [onInactiveUser, onDeleteUser, onEditUser, formatMessage],
   );
   const onRowContextMenu = useCallback(
     (cell) => {
@@ -91,6 +90,12 @@ function UsersDataTable({
 
   const columns = useMemo(
     () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarCell,
+        width: 100,
+      },
       {
         id: 'full_name',
         Header: formatMessage({ id: 'full_name' }),
@@ -154,27 +159,15 @@ function UsersDataTable({
     },
     [onFetchData],
   );
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
-    },
-    [onSelectedRowsChange],
-  );
-
   return (
-    <LoadingIndicator loading={loading} mount={false}>
+    <DataTable
-      <DataTable
+      columns={columns}
-        columns={columns}
+      data={usersList}
-        data={usersList}
+      loading={loading}
-        onFetchData={handelDataTableFetchData}
+      onFetchData={handelDataTableFetchData}
-        loading={usersLoading && !initialMount}
+      noInitialFetch={true}
-        manualSortBy={true}
+      rowContextMenu={onRowContextMenu}
-        noInitialFetch={true}
+    />
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-      />
-    </LoadingIndicator>
   );
 }
 

client/src/containers/Preferences/Users/UsersList.js

@@ -1,47 +1,32 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { queryCache, useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withUsers from 'containers/Users/withUsers';
-import UsersDataTable from './UsersDataTable';
 import withUsersActions from 'containers/Users/withUsersActions';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
+import UsersDataTable from './UsersDataTable';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
-import { snakeCase } from 'lodash';
 
 import AppToaster from 'components/AppToaster';
 
 import { compose } from 'utils';
 
 function UsersListPreferences({
-  // #withDialog
-  openDialog,
-
   // #withDashboardActions
   changePreferencesPageTitle,
 
-  // #withUsers
-  usersList,
-
   // #withUsersActions
   requestDeleteUser,
   requestInactiveUser,
   requestFetchUsers,
-
-  // #ownProps
-  onFetchData,
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
 
   const { formatMessage } = useIntl();
 
@@ -91,9 +76,6 @@ function UsersListPreferences({
 
   const handleEditUser = useCallback(() => {}, []);
 
-
-
-
   // Handle confirm User delete
   const handleConfirmUserDelete = useCallback(() => {
     if (!deleteUserState) {
@@ -115,63 +97,44 @@ function UsersListPreferences({
       });
   }, [deleteUserState, requestDeleteUser, formatMessage]);
 
-  // const handelDataTableFetchData = useCallback(() => {
-  //   onFetchData && onFetchData();
-  // }, [onFetchData]);
-
-  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (accounts) => {
-      setSelectedRows(accounts);
-    },
-    [setSelectedRows],
-  );
 
   return (
-    <DashboardInsider loading={fetchUsers.isFetching}>
+    <>
-      <DashboardPageContent>
+      <UsersDataTable
-        <UsersDataTable
+        loading={fetchUsers.isFetching}
-          onDeleteUser={handleDeleteUser}
+        onDeleteUser={handleDeleteUser}
-          onInactiveUser={handleInactiveUser}
+        onInactiveUser={handleInactiveUser}
-          onEditUser={handleEditUser}
+        onEditUser={handleEditUser}
-          // onFetchData={handleFetchData}
+      />
-          onSelectedRowsChange={handleSelectedRowsChange}
+      <Alert
-        />
+        cancelButtonText={<T id={'cancel'} />}
-
+        confirmButtonText={<T id={'delete'} />}
-        <Alert
+        intent={Intent.DANGER}
-          cancelButtonText={<T id={'cancel'} />}
+        isOpen={deleteUserState}
-          confirmButtonText={<T id={'delete'} />}
+        onCancel={handleCancelUserDelete}
-          icon="trash"
+        onConfirm={handleConfirmUserDelete}
-          intent={Intent.DANGER}
+      >
-          isOpen={deleteUserState}
+        <p>
-          onCancel={handleCancelUserDelete}
+          Once you delete this user, you won't be able to restore it later. Are you sure you want to delete ?
-          onConfirm={handleConfirmUserDelete}
+        </p>
-        >
+      </Alert>
-          <p>
+      <Alert
-            <FormattedHTMLMessage
+        cancelButtonText={<T id={'cancel'} />}
-              id={'once_delete_this_account_you_will_able_to_restore_it'}
+        confirmButtonText={<T id={'inactivate'} />}
-            />
+        intent={Intent.WARNING}
-          </p>
+        isOpen={inactiveUserState}
-        </Alert>
+        onCancel={handleCancelInactiveUser}
-        <Alert
+        onConfirm={handleConfirmUserActive}
-          cancelButtonText={<T id={'cancel'} />}
+      >
-          confirmButtonText={<T id={'inactivate'} />}
+        <p>
-          intent={Intent.WARNING}
+          <T id={'are_sure_to_inactive_this_account'} />
-          isOpen={inactiveUserState}
+        </p>
-          onCancel={handleCancelInactiveUser}
+      </Alert>
-          onConfirm={handleConfirmUserActive}
+    </>
-        >
-          <p>
-            <T id={'are_sure_to_inactive_this_account'} />
-          </p>
-        </Alert>
-      </DashboardPageContent>
-    </DashboardInsider>
   );
 }
 
 export default compose(
-  withDialogActions,
   withDashboardActions,
   withUsersActions,
 )(UsersListPreferences);

client/src/lang/en/index.js

@@ -854,4 +854,5 @@ export default {
   save_and_send: 'Save and Send',
   posting_date: 'Posting date',
   customer: 'Customer',
+  email_is_already_used: 'The email is already used.',
 };

client/src/routes/preferences.js

@@ -2,7 +2,7 @@ import General from 'containers/Preferences/General/General';
 import Users from 'containers/Preferences/Users/Users';
 import Accountant from 'containers/Preferences/Accountant/Accountant';
 import Accounts from 'containers/Preferences/Accounts/Accounts';
-import CurrenciesList from 'containers/Preferences/Currencies/CurrenciesList'
+import Currencies from 'containers/Preferences/Currencies/Currencies'
 
 const BASE_URL = '/preferences';
 
@@ -19,7 +19,7 @@ export default [
   },
   {
     path: `${BASE_URL}/currencies`,
-    component: CurrenciesList,
+    component: Currencies,
     exact: true,
   },
   {
@@ -27,8 +27,4 @@ export default [
     component: Accountant,
     exact: true,
   },
-  {
-    path: `${BASE_URL}/accounts`,
-    component: Accounts,
-  },
 ];

client/src/store/currencies/currencies.reducer.js

@@ -3,6 +3,7 @@ import t from 'store/types';
 
 const initialState = {
   data: {},
+  loading: false,
 };
 
 export default createReducer(initialState, {

client/src/store/users/users.actions.js

@@ -49,7 +49,16 @@ export const deleteUser = ({ id }) => {
 };
 
 export const submitInvite = ({ form }) => {
-  return (dispatch) => ApiService.post(`invite/send`, form);
+  return (dispatch) => new Promise((resolve, reject) => {
+    ApiService.post(`invite/send`, form)
+      .then((response) => { resolve(response); })
+      .catch((error) => {
+        const { response } = error;
+        const { data } = response;
+
+        reject(data?.errors);
+    });
+  });
 };
 
 export const editUser = ({ form, id }) => {

client/src/style/App.scss

@@ -588,3 +588,15 @@ body.authentication {
   max-width: 250px;
   margin-left: auto;
 }
+
+.card{
+  background: #fff;
+  border: 1px solid #d2dce2;
+}
+
+
+.form-group--select-list{
+  button{
+    justify-content: start;
+  }
+}

client/src/style/pages/dashboard.scss

@@ -355,20 +355,7 @@
   }
 
   &__preferences-topbar{
-    border-bottom: 1px solid #E5E5E5;
-    height: 65px;
-    padding: 0 0 0 22px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
     
-    h2{
-      font-size: 22px;
-      font-weight: 300;
-      margin: 0;
-      color: #555;
-    }
   }
 
   &__footer{

client/src/style/pages/preferences.scss

@@ -1,16 +1,37 @@
 .dashboard-content--preferences {
-  // margin-left: 430px;
+  flex-direction: row;
-  margin-left: 410px;
+  flex: 1 0 0;
-  // width: 100%;
+  min-width: auto;
-  position: relative;
+  background-color: #fbfbfb;
 }
-
+.dashboard {
-.preferences {
+  &__preferences-content {
-  &__inside-content--tabable {
+    flex: 1 0 0;
-    margin-left: -25px;
+    display: flex;
-    margin-right: -25px;
+    flex-direction: column;
   }
+}
+.preferences-page {
+  &__inside-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
+    &--tabable {
+      margin-left: -25px;
+      margin-right: -25px;
+    }
+
+    .card{
+      margin: 15px;
+    }
+    .bigcapital-datatable{
+
+      .table .tbody .tbody-inner > .loading{
+        padding: 30px 0;
+      }
+    }
+  }
   &__inside-content {
     .#{$ns}-tab-list {
       border-bottom: 1px solid #e5e5e5;
@@ -29,8 +50,75 @@
   &__tabs-extra-actions {
     margin-left: auto;
   }
+}
 
-  &__topbar-actions {
+.preferences-page {
+  display: flex;
+  flex: 1 0 0;
+
+  &__content {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    margin-left: 220px;
+
+    .dashboard__card {
+      margin: 15px;
+      flex: 1 0 0;
+    }
+  }
+}
+
+// Preferences topbar.
+// -----------------------------
+.preferences-topbar {
+  border-bottom: 1px solid #d2dde2;
+  min-height: 60px;
+  flex: 60px 0 0;
+  padding: 0 0 0 22px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+
+  &__title {
+    h2 {
+      font-size: 22px;
+      font-weight: 400;
+      margin: 0;
+      color: #48485b;
+    }
+  }
+
+  &__user {
+    display: flex;
+    align-items: center;
+    margin-right: 14px;
+
+    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      padding: 0;
+      background-size: contain;
+      background-color: #eed1f2;
+      border-radius: 50%;
+      height: 35px;
+      width: 35px;
+
+      .user-text {
+        font-size: 12px;
+        color: #804f87;
+      }
+      &,
+      &:hover,
+      &:focus {
+        background-color: #eed1f2;
+        border: 0;
+        box-shadow: none;
+      }
+    }
+  }
+
+  &__actions {
     margin-left: auto;
     padding-right: 15px;
     margin-right: 15px;
@@ -40,51 +128,60 @@
       margin-left: 10px;
     }
   }
-
-  &-button {
-    margin-right: 10px;
-  }
-
-  &__floating-footer {
-    position: fixed;
-    bottom: 0;
-    left: 430px;
-    right: 0;
-    background: #fff;
-    padding: 10px 18px;
-    border-top: 1px solid #ececec;
-  }
 }
 
-.preferences__sidebar {
+// Preferences sidebar.
-  background: #fdfdfd;
+// -----------------------------
-  position: fixed;
+.preferences-sidebar {
-  left: 190px;
+  background: #e5eaee;
-  top: -5px;
+  border-right: 1px solid #c6d0d9;
   min-width: 220px;
   max-width: 220px;
   height: 100%;
+  position: fixed;
 
-  .sidebar-wrapper {
+  &__wrapper {
+    height: 100%;
   }
 
-  &-head {
+  .ScrollbarsCustom-Track {
+    &.ScrollbarsCustom-TrackY,
+    &.ScrollbarsCustom-TrackX{
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+  .ScrollbarsCustom-Thumb{
+    &.ScrollbarsCustom-ThumbX,
+    &.ScrollbarsCustom-ThumbY {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  &:hover {
+    .ScrollbarsCustom-Thumb{
+      &.ScrollbarsCustom-ThumbX,
+      &.ScrollbarsCustom-ThumbY {
+        background: rgba(0, 0, 0, 0.15);
+      }      
+    }
+  }
+
+  &__head {
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: 1px solid #e5e5e5;
+    height: 60px;
-    height: 70px;
     padding: 0 22px;
 
     h2 {
       font-size: 22px;
-      font-weight: 300;
+      color: #48485b;
-      color: #555;
+      font-weight: 400;
       margin: 0;
     }
   }
 
-  &-menu {
+  &__menu {
     padding: 0;
     background: transparent;
 
@@ -96,69 +193,124 @@
 
       &:hover,
       &.#{$ns}-active {
-        background-color: #ebf1f5;
+        background-color: rgba(255, 255, 255, 0.5);
         color: #333;
       }
     }
   }
 }
 
-//  Preference
+//  General page
 //---------------------------------
-.preferences__inside-content--general {
+.preferences-page__inside-content--general {
-  margin: 20px;
+  .card {
-  .bp3-form-group {
+    padding: 25px;
-    margin: 18px 18px;
+
-    .bp3-label {
+    .card__footer {
-      min-width: 180px;
+      padding-top: 16px;
-    }
+      border-top: 1px solid #e0e7ea;
-    .bp3-form-content {
+      margin-top: 30px;
-      width: 50%;
+
+      .bp3-button {
+        min-width: 60px;
+
+        + .bp3-button{
+          margin-left: 10px;
+        }
+      }
     }
   }
 
-  .form-group--org-name,
+  .bp3-form-group {
-  .form-group--org-industry {
+    max-width: 550px;
+
+    .bp3-label {
+      min-width: 180px;
+    }
+
     .bp3-form-content {
-      position: relative;
+      width: 100%;
-      width: 70%;
-    }
-  }
-  .form-group--time-zone {
-    .bp3-menu {
-      max-height: 300px;
-      max-width: 400px;
-      overflow: auto;
-      padding: 0;
-    }
-    .bp3-text-muted {
-      color: #000000;
-    }
-    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
-      background: #fff;
-      box-shadow: 0 0 0 transparent;
-      border: 1px solid #ced4da;
-      padding: 8px;
-    }
-    .bp3-button .bp3-icon:first-child:last-child,
-    .bp3-button .bp3-spinner + .bp3-icon:last-child {
-      position: absolute;
-      right: 15px;
-      display: inline-block;
     }
   }
 }
 
 // Users/Roles List.
 // ---------------------------------
-.preferences__inside-content--users-roles {
+.preferences-page__inside-content--users{
+
   .bigcapital-datatable {
-    .table .th,
+
-    .table .td {
+    .td{
-      padding: 0.8rem 0.5rem;
+      .avatar{
+        height: 28px;
+        width: 28px;
+        text-align: center;
+        background: #b7bfc6;
+        border-radius: 50%;
+        line-height: 28px;
+        color: #fff;
+        text-transform: uppercase;
+        margin-left: 10px;
+      }
     }
     .td.status {
       text-transform: uppercase;
     }
+
+    .tr:last-child .td{
+      border-bottom: 0;
+    }
+  }
+}
+
+// Currencies List.
+// ---------------------------------
+.preferences-page__inside-content--currencies{
+
+  .bigcapital-datatable {
+
+    .tr:last-child .td{
+      border-bottom: 0;
+    }
+  }
+}
+
+// Accountant.
+// ---------------------------------
+.preferences-page__inside-content--accountant {
+  .card {
+    padding: 25px;
+
+    .card__footer {
+      padding-top: 16px;
+      border-top: 1px solid #e0e7ea;
+      margin-top: 30px;
+
+      .bp3-button {
+        min-width: 60px;
+
+        + .bp3-button{
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .form-group--select-list{
+
+    button{
+      min-width: 250px;
+    }
+  }
+
+  .bp3-form-group {
+    
+    .bp3-form-helper-text{
+      margin-top: 7px;
+    }
+
+    label.bp3-label {
+      margin-bottom: 7px;
+    }
   }
 }

server/src/api/controllers/ItemCategories.ts

@@ -89,7 +89,7 @@ export default class ItemsCategoriesController extends BaseController {
         .isInt({ min: 0, max: DATATYPES_LENGTH.INT_10 })
         .toInt(),
       check('description')
-        .optional()
+        .optional({ nullable: true })
         .isString()
         .trim()
         .escape()