feat: application preferences.

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);