feat: application preferences.

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

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

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;
+  }