chrone: sperate client and server to different repos.

src/containers/Dialogs/AccountDialog/AccountDialogContent.js

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

src/containers/Dialogs/AccountDialog/AccountDialogForm.js

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

src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js

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

src/containers/Dialogs/AccountDialog/AccountDialogProvider.js

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

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

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

src/containers/Dialogs/AccountDialog/index.js

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

src/containers/Dialogs/AccountDialog/utils.js

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