PM-973 - invite user modal

Author: vas3a

src/components/Users/Users.module.scss

@@ -118,6 +118,12 @@
       text-decoration: none;
       font-size: 12px;
     }
+
+    &.inviteEmailInput {
+      input {
+        width: 250px;
+      }
+    }
   }
 }
 

src/components/Users/invite-user.modal.js

@@ -0,0 +1,113 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import { get } from 'lodash'
+import Modal from '../Modal'
+import PrimaryButton from '../Buttons/PrimaryButton'
+import { inviteUserToProject } from '../../services/projects'
+import { PROJECT_ROLES } from '../../config/constants'
+
+import styles from './Users.module.scss'
+
+const theme = {
+  container: styles.modalContainer
+}
+
+const validateEmail = (email) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+const InviteUserModalContent = ({ projectId, onClose }) => {
+  const [emailToInvite, setEmailToInvite] = useState('')
+  const [showEmailError, setShowEmailError] = useState(false)
+  const [inviteUserError, setInviteUserError] = useState(null)
+  const [isInviting, setIsInviting] = useState(false)
+
+  const handleEmailBlur = () => {
+    if (!validateEmail(emailToInvite)) {
+      setShowEmailError(true)
+    }
+  }
+
+  const onInviteUserConfirmClick = async () => {
+    if (isInviting) return
+
+    if (!emailToInvite || !validateEmail(emailToInvite)) {
+      setShowEmailError(true)
+      return
+    }
+
+    setIsInviting(true)
+    setInviteUserError(null)
+
+    try {
+      // api restriction: ONLY "customer" role can be invited via email
+      await inviteUserToProject(projectId, emailToInvite, PROJECT_ROLES.CUSTOMER)
+      onClose()
+    } catch (e) {
+      const error = get(e, 'response.data.message', 'Unable to invite user')
+      setInviteUserError(error)
+      setIsInviting(false)
+    }
+  }
+
+  return (
+    <Modal theme={theme} onCancel={onClose}>
+      <div className={cn(styles.contentContainer, styles.confirm)}>
+        <div className={styles.title}>Invite User</div>
+        <div className={styles.addUserContentContainer}>
+          <div className={styles.row}>
+            <div className={cn(styles.field, styles.col1, styles.addUserTitle)}>
+              Email<span className={styles.required}>*</span> :
+            </div>
+            <div className={cn(styles.field, styles.col2, styles.inviteEmailInput)}>
+              <input
+                type='email'
+                name='email'
+                placeholder='Enter Email'
+                onChange={(e) => {
+                  setEmailToInvite(e.target.value)
+                  setShowEmailError(false)
+                }}
+                onBlur={handleEmailBlur}
+              />
+            </div>
+          </div>
+          {showEmailError && (
+            <div className={styles.row}>
+              <div className={styles.errorMesssage}>Please enter a valid email address.</div>
+            </div>
+          )}
+          {inviteUserError && (
+            <div className={styles.errorMesssage}>{inviteUserError}</div>
+          )}
+        </div>
+        <div className={styles.buttonGroup}>
+          <div className={styles.buttonSizeA}>
+            <PrimaryButton
+              text={'Close'}
+              type={'info'}
+              onClick={onClose}
+            />
+          </div>
+          <div className={styles.buttonSizeA}>
+            <PrimaryButton
+              text={isInviting ? 'Inviting user...' : 'Invite User'}
+              type={'info'}
+              onClick={onInviteUserConfirmClick}
+            />
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+InviteUserModalContent.propTypes = {
+  projectId: PropTypes.number.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
+export default InviteUserModalContent

src/config/constants.js

@@ -33,7 +33,9 @@ export const {
   TYPEFORM_URL,
   PROFILE_URL
 } = process.env
+
 export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS === 'string' ? process.env.CREATE_FORUM_TYPE_IDS.split(',') : process.env.CREATE_FORUM_TYPE_IDS
+export const PROJECTS_API_URL = process.env.PROJECTS_API_URL || process.env.PROJECT_API_URL
 
 /**
  * Filepicker config
@@ -242,6 +244,7 @@ export const MARATHON_MATCH_SUBTRACKS = [
 
 export const PROJECT_ROLES = {
   READ: 'observer',
+  CUSTOMER: 'customer',
   WRITE: 'customer',
   MANAGER: 'manager',
   COPILOT: 'copilot'

src/services/projectMemberInvites.js

@@ -0,0 +1,66 @@
+import { axiosInstance as axios } from './axiosWithAuth'
+import { PROJECTS_API_URL } from '../config/constants'
+
+/**
+ * Update project member invite based on project's id & given member
+ * @param  {integer} projectId unique identifier of the project
+ * @param  {integer} inviteId unique identifier of the invite
+ * @param  {string}  status the new status for invitation
+ * @return {object}  project member invite returned by api
+ */
+export function updateProjectMemberInvite (projectId, inviteId, status) {
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/${inviteId}`
+  return axios.patch(url, { status })
+    .then(resp => resp.data)
+}
+
+/**
+ * Delete project member invite based on project's id & given invite's id
+ * @param  {integer} projectId unique identifier of the project
+ * @param  {integer}  inviteId unique identifier of the invite
+ * @return {object}  project member invite returned by api
+ */
+export function deleteProjectMemberInvite (projectId, inviteId) {
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/${inviteId}`
+  return axios.delete(url)
+}
+
+/**
+ * Create a project member invite based on project's id & given member
+ * @param  {integer} projectId unique identifier of the project
+ * @param  {object}  member invite
+ * @return {object}  project member invite returned by api
+ */
+export function createProjectMemberInvite (projectId, member) {
+  const fields = 'id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle'
+  const url = `${PROJECTS_API_URL}/${projectId}/invites/?fields=` + encodeURIComponent(fields)
+  return axios({
+    method: 'post',
+    url,
+    data: member,
+    validateStatus (status) {
+      return (status >= 200 && status < 300) || status === 403
+    }
+  })
+    .then(resp => resp.data)
+}
+
+export function getProjectMemberInvites (projectId) {
+  const fields = 'id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle'
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/invites/?fields=` +
+    encodeURIComponent(fields)
+  return axios.get(url)
+    .then(resp => {
+      return resp.data
+    })
+}
+
+/**
+ * Get a project member invite based on project's id
+ * @param  {integer} projectId unique identifier of the project
+ * @return {object}  project member invite returned by api
+ */
+export function getProjectInviteById (projectId) {
+  return axios.get(`${PROJECTS_API_URL}/v5/projects/${projectId}/invites`)
+    .then(resp => resp.data)
+}

src/services/projects.js

@@ -7,11 +7,11 @@ import {
   GENERIC_PROJECT_MILESTONE_PRODUCT_NAME,
   GENERIC_PROJECT_MILESTONE_PRODUCT_TYPE,
   PHASE_PRODUCT_CHALLENGE_ID_FIELD,
-  PHASE_PRODUCT_TEMPLATE_ID
+  PHASE_PRODUCT_TEMPLATE_ID,
+  PROJECTS_API_URL
 } from '../config/constants'
 import { paginationHeaders } from '../util/pagination'
-
-const { PROJECT_API_URL } = process.env
+import { createProjectMemberInvite } from './projectMemberInvites'
 
 /**
  * Get billing accounts based on project id
@@ -21,7 +21,7 @@ const { PROJECT_API_URL } = process.env
  * @returns {Promise<Object>} Billing accounts data
  */
 export async function fetchBillingAccounts (projectId) {
-  const response = await axiosInstance.get(`${PROJECT_API_URL}/${projectId}/billingAccounts`)
+  const response = await axiosInstance.get(`${PROJECTS_API_URL}/${projectId}/billingAccounts`)
   return _.get(response, 'data')
 }
 
@@ -33,7 +33,7 @@ export async function fetchBillingAccounts (projectId) {
  * @returns {Promise<Object>} Billing account data
  */
 export async function fetchBillingAccount (projectId) {
-  const response = await axiosInstance.get(`${PROJECT_API_URL}/${projectId}/billingAccount`)
+  const response = await axiosInstance.get(`${PROJECTS_API_URL}/${projectId}/billingAccount`)
   return _.get(response, 'data')
 }
 
@@ -53,7 +53,7 @@ export function fetchMemberProjects (filters) {
     }
   }
 
-  return axiosInstance.get(`${PROJECT_API_URL}?${queryString.stringify(params)}`).then(response => {
+  return axiosInstance.get(`${PROJECTS_API_URL}?${queryString.stringify(params)}`).then(response => {
     return { projects: _.get(response, 'data'), pagination: paginationHeaders(response) }
   })
 }
@@ -64,7 +64,7 @@ export function fetchMemberProjects (filters) {
  * @returns {Promise<*>}
  */
 export async function fetchProjectById (id) {
-  const response = await axiosInstance.get(`${PROJECT_API_URL}/${id}`)
+  const response = await axiosInstance.get(`${PROJECTS_API_URL}/${id}`)
   return _.get(response, 'data')
 }
 
@@ -74,7 +74,7 @@ export async function fetchProjectById (id) {
  * @returns {Promise<*>}
  */
 export async function fetchProjectPhases (id) {
-  const response = await axiosInstance.get(`${PROJECT_API_URL}/${id}/phases`, {
+  const response = await axiosInstance.get(`${PROJECTS_API_URL}/${id}/phases`, {
     params: {
       fields: 'id,name,products,status'
     }
@@ -90,7 +90,7 @@ export async function fetchProjectPhases (id) {
  * @returns {Promise<*>}
  */
 export async function updateProjectMemberRole (projectId, memberRecordId, newRole) {
-  const response = await axiosInstance.patch(`${PROJECT_API_URL}/${projectId}/members/${memberRecordId}`, {
+  const response = await axiosInstance.patch(`${PROJECTS_API_URL}/${projectId}/members/${memberRecordId}`, {
     role: newRole
   })
   return _.get(response, 'data')
@@ -104,21 +104,35 @@ export async function updateProjectMemberRole (projectId, memberRecordId, newRol
  * @returns {Promise<*>}
  */
 export async function addUserToProject (projectId, userId, role) {
-  const response = await axiosInstance.post(`${PROJECT_API_URL}/${projectId}/members`, {
+  const response = await axiosInstance.post(`${PROJECTS_API_URL}/${projectId}/members`, {
     userId,
     role
   })
   return _.get(response, 'data')
 }
 
+/**
+ * adds the given user to the given project with the specified role
+ * @param projectId project id
+ * @param userId user id
+ * @param role
+ * @returns {Promise<*>}
+ */
+export async function inviteUserToProject (projectId, email, role) {
+  return createProjectMemberInvite(projectId, {
+    emails: [email],
+    role: role
+  })
+}
+
 /**
  * removes the given member record from the project
  * @param projectId project id
  * @param memberRecordId member record id
  * @returns {Promise<*>}
  */
 export async function removeUserFromProject (projectId, memberRecordId) {
-  const response = await axiosInstance.delete(`${PROJECT_API_URL}/${projectId}/members/${memberRecordId}`)
+  const response = await axiosInstance.delete(`${PROJECTS_API_URL}/${projectId}/members/${memberRecordId}`)
   return response
 }
 
@@ -145,7 +159,7 @@ export async function saveChallengeAsPhaseProduct (projectId, phaseId, challenge
     estimatedPrice: 1
   }
 
-  return axiosInstance.post(`${PROJECT_API_URL}/${projectId}/phases/${phaseId}/products`,
+  return axiosInstance.post(`${PROJECTS_API_URL}/${projectId}/phases/${phaseId}/products`,
     _.set(payload, PHASE_PRODUCT_CHALLENGE_ID_FIELD, challengeId)
   )
 }
@@ -176,7 +190,7 @@ export async function removeChallengeFromPhaseProduct (projectId, challengeId) {
 
   if (selectedMilestoneProduct) {
     // If its the only challenge in product and product doesn't contain any other detail just delete it
-    return axiosInstance.delete(`${PROJECT_API_URL}/${projectId}/phases/${selectedMilestoneProduct.phaseId}/products/${selectedMilestoneProduct.productId}`)
+    return axiosInstance.delete(`${PROJECTS_API_URL}/${projectId}/phases/${selectedMilestoneProduct.phaseId}/products/${selectedMilestoneProduct.productId}`)
   }
 }
 
@@ -186,7 +200,7 @@ export async function removeChallengeFromPhaseProduct (projectId, challengeId) {
  * @returns {Promise<*>}
  */
 export async function createProjectApi (project) {
-  const response = await axiosInstance.post(`${PROJECT_API_URL}`, project)
+  const response = await axiosInstance.post(`${PROJECTS_API_URL}`, project)
   return _.get(response, 'data')
 }
 
@@ -197,7 +211,7 @@ export async function createProjectApi (project) {
  * @returns {Promise<*>}
  */
 export async function updateProjectApi (projectId, project) {
-  const response = await axiosInstance.patch(`${PROJECT_API_URL}/${projectId}`, project)
+  const response = await axiosInstance.patch(`${PROJECTS_API_URL}/${projectId}`, project)
   return _.get(response, 'data')
 }
 
@@ -206,7 +220,7 @@ export async function updateProjectApi (projectId, project) {
  * @returns {Promise<*>}
  */
 export async function getProjectTypes () {
-  const response = await axiosInstance.get(`${PROJECT_API_URL}/metadata/projectTypes`)
+  const response = await axiosInstance.get(`${PROJECTS_API_URL}/metadata/projectTypes`)
   return _.get(response, 'data')
 }
 
@@ -218,7 +232,7 @@ export async function getProjectTypes () {
  */
 export async function getProjectAttachment (projectId, attachmentId) {
   const response = await axiosInstance.get(
-    `${PROJECT_API_URL}/${projectId}/attachments/${attachmentId}`
+    `${PROJECTS_API_URL}/${projectId}/attachments/${attachmentId}`
   )
   return _.get(response, 'data')
 }
@@ -241,7 +255,7 @@ export async function addProjectAttachmentApi (projectId, data) {
   }
 
   const response = await axiosInstance.post(
-    `${PROJECT_API_URL}/${projectId}/attachments`,
+    `${PROJECTS_API_URL}/${projectId}/attachments`,
     data
   )
   return _.get(response, 'data')
@@ -272,7 +286,7 @@ export async function updateProjectAttachmentApi (
   }
 
   const response = await axiosInstance.patch(
-    `${PROJECT_API_URL}/${projectId}/attachments/${attachmentId}`,
+    `${PROJECTS_API_URL}/${projectId}/attachments/${attachmentId}`,
     data
   )
   return _.get(response, 'data')
@@ -285,6 +299,6 @@ export async function updateProjectAttachmentApi (
  */
 export async function removeProjectAttachmentApi (projectId, attachmentId) {
   await axiosInstance.delete(
-    `${PROJECT_API_URL}/${projectId}/attachments/${attachmentId}`
+    `${PROJECTS_API_URL}/${projectId}/attachments/${attachmentId}`
   )
 }