PM-973 - add invitation dialog after user accepts invitation through email

vas3a · vas3a · commit 592b78791287 · 2025-04-07T16:17:22.000+03:00
diff --git a/src/components/Users/index.js b/src/components/Users/index.js
@@ -228,6 +228,7 @@ class Users extends Component {
               projectId={this.state.projectOption.value}
               projectMembers={projectMembers}
               invitedMembers={invitedMembers}
+              onMemberInvited={this.props.addNewProjectInvite}
               onClose={this.resetInviteUserState}
             />
           )
@@ -309,6 +310,7 @@ Users.propTypes = {
   loadProject: PropTypes.func.isRequired,
   updateProjectNember: PropTypes.func.isRequired,
   removeProjectNember: PropTypes.func.isRequired,
+  addNewProjectInvite: PropTypes.func.isRequired,
   addNewProjectMember: PropTypes.func.isRequired,
   auth: PropTypes.object,
   isEditable: PropTypes.bool,
diff --git a/src/components/Users/invite-user.modal.js b/src/components/Users/invite-user.modal.js
@@ -18,7 +18,7 @@ const validateEmail = (email) => {
   return emailRegex.test(email)
 }
 
-const InviteUserModalContent = ({ projectId, onClose, projectMembers, invitedMembers }) => {
+const InviteUserModalContent = ({ projectId, onClose, onMemberInvited, projectMembers, invitedMembers }) => {
   const [emailToInvite, setEmailToInvite] = useState('')
   const [showEmailError, setShowEmailError] = useState(false)
   const [inviteUserError, setInviteUserError] = useState(null)
@@ -55,8 +55,16 @@ const InviteUserModalContent = ({ projectId, onClose, projectMembers, invitedMem
 
     try {
       // api restriction: ONLY "customer" role can be invited via email
-      await inviteUserToProject(projectId, emailToInvite, PROJECT_ROLES.CUSTOMER)
-      onClose()
+      const { success: invitations = [], failed } = await inviteUserToProject(projectId, emailToInvite, PROJECT_ROLES.CUSTOMER)
+
+      if (failed) {
+        const error = get(failed, '0.message', 'Unable to invite user')
+        setInviteUserError(error)
+        setIsInviting(false)
+      } else {
+        onMemberInvited(invitations[0] || {})
+        onClose()
+      }
     } catch (e) {
       const error = get(e, 'response.data.message', 'Unable to invite user')
       setInviteUserError(error)
@@ -122,6 +130,7 @@ const InviteUserModalContent = ({ projectId, onClose, projectMembers, invitedMem
 InviteUserModalContent.propTypes = {
   projectId: PropTypes.number.isRequired,
   onClose: PropTypes.func.isRequired,
+  onMemberInvited: PropTypes.func.isRequired,
   projectMembers: PropTypes.arrayOf(PropTypes.object),
   invitedMembers: PropTypes.arrayOf(PropTypes.object)
 }
diff --git a/src/config/constants.js b/src/config/constants.js
@@ -195,6 +195,14 @@ export const UPDATE_PROJECT_PENDING = 'UPDATE_PROJECT_PENDING'
 export const UPDATE_PROJECT_SUCCESS = 'UPDATE_PROJECT_SUCCESS'
 export const UPDATE_PROJECT_FAILURE = 'UPDATE_PROJECT_FAILURE'
 
+export const PROJECT_MEMBER_INVITE_STATUS_ACCEPTED = 'accepted'
+export const PROJECT_MEMBER_INVITE_STATUS_REFUSED = 'refused'
+export const PROJECT_MEMBER_INVITE_STATUS_CANCELED = 'canceled'
+export const PROJECT_MEMBER_INVITE_STATUS_PENDING = 'pending'
+export const PROJECT_MEMBER_INVITE_STATUS_REQUESTED = 'requested'
+export const PROJECT_MEMBER_INVITE_STATUS_REQUEST_APPROVED = 'request_approved'
+export const PROJECT_MEMBER_INVITE_STATUS_REQUEST_REJECTED = 'request_rejected'
+
 // Name of challenge tracks
 export const CHALLENGE_TRACKS = {
   DESIGN: DES_TRACK_ID,
diff --git a/src/containers/Challenges/index.js b/src/containers/Challenges/index.js
@@ -20,7 +20,8 @@ import {
   setActiveProject,
   resetSidebarActiveParams
 } from '../../actions/sidebar'
-import { checkAdmin } from '../../util/tc'
+import { checkAdmin, checkIsUserInvited } from '../../util/tc'
+import { withRouter } from 'react-router-dom'
 
 class Challenges extends Component {
   constructor (props) {
@@ -55,6 +56,14 @@ class Challenges extends Component {
     }
   }
 
+  componentDidUpdate () {
+    const { auth } = this.props
+
+    if (checkIsUserInvited(auth.token, this.props.projectDetail)) {
+      this.props.history.push(`/projects/${this.props.projectDetail.id}/invitation`)
+    }
+  }
+
   componentWillReceiveProps (nextProps) {
     if (
       (nextProps.dashboard && this.props.dashboard !== nextProps.dashboard) ||
@@ -194,6 +203,7 @@ Challenges.defaultProps = {
 }
 
 Challenges.propTypes = {
+  history: PropTypes.object,
   projects: PropTypes.arrayOf(PropTypes.shape()),
   menu: PropTypes.string,
   challenges: PropTypes.arrayOf(PropTypes.object),
@@ -268,4 +278,6 @@ const mapDispatchToProps = {
   deleteChallenge
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Challenges)
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Challenges)
+)
diff --git a/src/containers/ProjectEditor/index.js b/src/containers/ProjectEditor/index.js
@@ -15,7 +15,7 @@ import {
   updateProject
 } from '../../actions/projects'
 import { setActiveProject } from '../../actions/sidebar'
-import { checkAdminOrCopilot, checkAdmin } from '../../util/tc'
+import { checkAdminOrCopilot, checkAdmin, checkIsUserInvited } from '../../util/tc'
 import { PROJECT_ROLES } from '../../config/constants'
 import Loader from '../../components/Loader'
 
@@ -37,6 +37,11 @@ class ProjectEditor extends Component {
 
   componentDidUpdate () {
     const { auth } = this.props
+
+    if (checkIsUserInvited(auth.token, this.props.projectDetail)) {
+      this.props.history.push(`/projects/${this.props.projectDetail.id}/invitation`)
+    }
+
     if (!checkAdminOrCopilot(auth.token, this.props.projectDetail)) {
       this.props.history.push('/projects')
     }
diff --git a/src/containers/ProjectInvitations/ProjectInvitations.module.scss b/src/containers/ProjectInvitations/ProjectInvitations.module.scss
@@ -0,0 +1,120 @@
+@import '../../styles/includes';
+
+.modalContainer {
+  padding: 0;
+  position: fixed;
+  overflow: auto;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: auto;
+  max-width: none;
+  transform: none;
+  background: transparent;
+  color: $text-color;
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :global {
+    button.close {
+      margin-right: 5px;
+      margin-top: 5px;
+    }
+  }
+
+  .contentContainer {
+    box-sizing: border-box;
+    background: $white;
+    opacity: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: 6px;
+    margin: 0 auto;
+    width: 852px;
+    padding: 30px;
+
+    .content {
+      padding: 30px;
+      width: 100%;
+      height: 100%;
+    }
+
+    .title {
+      @include roboto-bold();
+
+      font-size: 30px;
+      line-height: 36px;
+      margin-bottom: 30px;
+      margin-top: 0;
+    }
+
+    span {
+      @include roboto;
+
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 26px;
+    }
+
+    &.confirm {
+      width: 999px;
+
+      .buttonGroup {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        .buttonSizeA {
+          width: 193px;
+          height: 40px;
+          margin-right: 33px;
+
+          span {
+            font-size: 18px;
+            font-weight: 500;
+          }
+        }
+
+        .buttonSizeB {
+          width: 160px;
+          height: 40px;
+
+          span {
+            font-size: 18px;
+            font-weight: 500;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+
+    .buttonGroup {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 30px;
+
+      .button {
+        width: 135px;
+        height: 40px;
+        margin-right: 66px;
+
+        span {
+          font-size: 18px;
+          font-weight: 500;
+        }
+      }
+
+      .button:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/src/containers/ProjectInvitations/index.js b/src/containers/ProjectInvitations/index.js
@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { toastr } from 'react-redux-toastr'
+import { checkIsUserInvited } from '../../util/tc'
+import { isEmpty } from 'lodash'
+import { loadProject } from '../../actions/projects'
+import ConfirmationModal from '../../components/Modal/ConfirmationModal'
+
+import styles from './ProjectInvitations.module.scss'
+import { updateProjectMemberInvite } from '../../services/projectMemberInvites'
+import { PROJECT_MEMBER_INVITE_STATUS_ACCEPTED, PROJECT_MEMBER_INVITE_STATUS_REFUSED } from '../../config/constants'
+
+const theme = {
+  container: styles.modalContainer
+}
+
+const ProjectInvitations = ({ match, auth, isProjectLoading, history, projectDetail, loadProject }) => {
+  const automaticAction = useMemo(() => [PROJECT_MEMBER_INVITE_STATUS_ACCEPTED, PROJECT_MEMBER_INVITE_STATUS_REFUSED].includes(match.params.action) ? match.params.action : undefined, [match.params])
+  const projectId = useMemo(() => parseInt(match.params.projectId), [match.params])
+  const invitation = useMemo(() => checkIsUserInvited(auth.token, projectDetail), [auth.token, projectDetail])
+  const [isUpdating, setIsUpdating] = useState(automaticAction || false)
+  const isAccepting = isUpdating === PROJECT_MEMBER_INVITE_STATUS_ACCEPTED
+  const isDeclining = isUpdating === PROJECT_MEMBER_INVITE_STATUS_REFUSED
+
+  useEffect(() => {
+    if (!projectId) {
+      return
+    }
+
+    if (isProjectLoading || isEmpty(projectDetail)) {
+      if (!isProjectLoading) {
+        loadProject(projectId)
+      }
+      return
+    }
+
+    if (!invitation) {
+      history.push(`/projects`)
+    }
+  }, [projectId, auth, projectDetail, isProjectLoading, history])
+
+  const updateInvite = useCallback(async (status) => {
+    setIsUpdating(status)
+    await updateProjectMemberInvite(projectId, invitation.id, status)
+    toastr.success('Success', `Successfully ${status} the invitation.`)
+    history.push(status === PROJECT_MEMBER_INVITE_STATUS_ACCEPTED ? `/projects/${projectId}/challenges` : '/projects')
+  }, [invitation])
+
+  const acceptInvite = useCallback(() => updateInvite(PROJECT_MEMBER_INVITE_STATUS_ACCEPTED), [updateInvite])
+  const declineInvite = useCallback(() => updateInvite(PROJECT_MEMBER_INVITE_STATUS_REFUSED), [updateInvite])
+
+  useEffect(() => {
+    if (!invitation || !automaticAction) {
+      return
+    }
+
+    setTimeout(() => {
+      if (automaticAction === PROJECT_MEMBER_INVITE_STATUS_ACCEPTED) {
+        acceptInvite()
+      } else if (automaticAction === PROJECT_MEMBER_INVITE_STATUS_REFUSED) {
+        declineInvite()
+      }
+    }, [1500])
+  }, [invitation, automaticAction])
+
+  return (
+    <>
+      {invitation && (
+        <ConfirmationModal
+          title={
+            isUpdating ? (
+              isAccepting ? 'Adding you to the project....' : 'Declining invitation...'
+            ) : "You're invited to join this project"
+          }
+          message={isDeclining ? '' : `
+            Once you join the team you will be able to see the project details, collaborate on project specification and monitor the progress of all deliverables
+          `}
+          theme={theme}
+          cancelText='Cancel'
+          confirmText='Join project'
+          onCancel={declineInvite}
+          onConfirm={acceptInvite}
+          isProcessing={isUpdating}
+        />
+      )}
+    </>
+  )
+}
+
+ProjectInvitations.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      projectId: PropTypes.string
+    })
+  }).isRequired,
+  auth: PropTypes.object.isRequired,
+  isProjectLoading: PropTypes.bool,
+  history: PropTypes.object,
+  loadProject: PropTypes.func.isRequired,
+  projectDetail: PropTypes.object
+}
+
+const mapStateToProps = ({ projects, auth }) => {
+  return {
+    projectDetail: projects.projectDetail,
+    isProjectLoading: projects.isLoading,
+    auth
+  }
+}
+
+const mapDispatchToProps = {
+  loadProject
+}
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(ProjectInvitations)
+)
diff --git a/src/containers/Users/index.js b/src/containers/Users/index.js
diff --git a/src/routes.js b/src/routes.js
diff --git a/src/util/tc.js b/src/util/tc.js
