re-structure to monorepo.

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  email: Yup.string().email().required().label(intl.get('email')),
+  role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
+});
+
+export const InviteUserFormSchema = Schema;

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserDialogContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+
+import InviteUserForm from './InviteUserForm';
+import { InviteUserFormProvider } from './InviteUserFormProvider';
+
+import '@/style/pages/Users/InviteFormDialog.scss';
+
+/**
+ * Invite user dialog content.
+ */
+export default function InviteUserDialogContent({
+  action,
+  userId,
+  dialogName,
+}) {
+  return (
+    <InviteUserFormProvider isEditMode={action} dialogName={dialogName}>
+      <InviteUserForm />
+    </InviteUserFormProvider>
+  );
+}

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserForm.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { pick, snakeCase } from 'lodash';
+import { AppToaster } from '@/components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+import { InviteUserFormSchema } from './InviteUserDialog.schema';
+import InviteUserFormContent from './InviteUserFormContent';
+import { useInviteUserFormContext } from './InviteUserFormProvider';
+
+import { transformApiErrors } from './utils';
+
+import { compose, objectKeysTransform } from '@/utils';
+
+function InviteUserForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { dialogName, isEditMode, inviteUserMutate, userId } =
+    useInviteUserFormContext();
+
+  const initialValues = {
+    status: 1,
+    ...(isEditMode &&
+      pick(
+        objectKeysTransform(userId, snakeCase),
+        Object.keys(InviteUserFormSchema.fields),
+      )),
+  };
+
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { ...values };
+
+    // Handle close the dialog after success response.
+    const afterSubmit = () => {
+      closeDialog(dialogName);
+    };
+    const onSuccess = ({ response }) => {
+      AppToaster.show({
+        message: intl.get('teammate_invited_to_organization_account'),
+        intent: Intent.SUCCESS,
+      });
+      afterSubmit(response);
+    };
+
+    // Handle the response error.
+    const onError = (error) => {
+      const {
+        response: {
+          data: { errors },
+        },
+      } = error;
+
+      const errorsTransformed = transformApiErrors(errors);
+
+      setErrors({ ...errorsTransformed });
+      setSubmitting(false);
+    };
+    inviteUserMutate(form).then(onSuccess).catch(onError);
+  };
+
+  return (
+    <Formik
+      validationSchema={InviteUserFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+    >
+      <InviteUserFormContent />
+    </Formik>
+  );
+}
+export default compose(withDialogActions)(InviteUserForm);

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import React from 'react';
+import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
+import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
+import {
+  ListSelect,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from '@/components';
+import { CLASSES } from '@/constants/classes';
+import classNames from 'classnames';
+import { compose, inputIntent } from '@/utils';
+import { useInviteUserFormContext } from './InviteUserFormProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+function InviteUserFormContent({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+  const { isEditMode, dialogName, roles } = useInviteUserFormContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <Form>
+      <div className={CLASSES.DIALOG_BODY}>
+        <p className="mb2">
+          <T id={'your_access_to_your_team'} />
+        </p>
+        {/* ----------- Email ----------- */}
+        <FastField name={'email'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'email'} />}
+              labelInfo={<FieldRequiredHint />}
+              className={classNames('form-group--email', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="email" />}
+            >
+              <InputGroup medium={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
+        {/* ----------- Role name ----------- */}
+        <FastField name={'role_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'invite_user.label.role_name'} />}
+              labelInfo={<FieldRequiredHint />}
+              helperText={<ErrorMessage name="role_id" />}
+              className={classNames(CLASSES.FILL, 'form-group--role_name')}
+              intent={inputIntent({ error, touched })}
+            >
+              <ListSelect
+                items={roles}
+                onItemSelect={({ id }) => {
+                  form.setFieldValue('role_id', id);
+                }}
+                selectedItem={value}
+                selectedItemProp={'id'}
+                textProp={'name'}
+                // labelProp={'id '}
+                popoverProps={{ minimal: true }}
+                intent={inputIntent({ error, touched })}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </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}>
+            {isEditMode ? <T id={'edit'} /> : <T id={'invite'} />}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(withDialogActions)(InviteUserFormContent);

packages/webapp/src/containers/Dialogs/InviteUserDialog/InviteUserFormProvider.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import { useCreateInviteUser, useUsers, useRoles } from '@/hooks/query';
+import { DialogContent } from '@/components';
+
+const InviteUserFormContext = createContext();
+
+/**
+ * Invite user Form page provider.
+ */
+function InviteUserFormProvider({ userId, isEditMode, dialogName, ...props }) {
+  // Create and edit item currency mutations.
+  const { mutateAsync: inviteUserMutate } = useCreateInviteUser();
+
+  // fetch users list.
+  const { isLoading: isUsersLoading } = useUsers();
+
+  // fetch roles list.
+  const { data: roles, isLoading: isRolesLoading } = useRoles();
+
+  // Provider state.
+  const provider = {
+    inviteUserMutate,
+    dialogName,
+    userId,
+    isUsersLoading,
+    isEditMode,
+    roles,
+  };
+
+  return (
+    <DialogContent
+      isLoading={isUsersLoading || isRolesLoading}
+      name={'invite-form'}
+    >
+      <InviteUserFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useInviteUserFormContext = () => React.useContext(InviteUserFormContext);
+
+export { InviteUserFormProvider, useInviteUserFormContext };

packages/webapp/src/containers/Dialogs/InviteUserDialog/index.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } 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);

packages/webapp/src/containers/Dialogs/InviteUserDialog/utils.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+
+export const transformApiErrors = (errors) => {
+  const fields = {};
+
+  if (errors.find((error) => error.type === 'EMAIL.ALREADY.INVITED')) {
+    fields.email = intl.get('email_is_already_used');
+  }
+  if (errors.find((error) => error.type === 'EMAIL.ALREADY.EXISTS')) {
+    fields.email = intl.get('email_is_already_used');
+  }
+  return fields;
+};