fix: customer team dialog and topcoder team show memberinfo correct

src/components/TeamManagement/MemberItem.jsx

@@ -3,19 +3,20 @@ import PropTypes from 'prop-types'
 import moment from 'moment'
 import {timezones} from 'appirio-tech-react-components/constants/timezones'
 import UserTooltip from '../User/UserTooltip'
-import SunIcon from '../../assets/icons/status-active.svg'
-import MoonIcon from '../../assets/icons/status-cancelled.svg'
+import SunIcon from '../../assets/icons/daylight.svg'
+import MoonIcon from '../../assets/icons/moon.svg'
 import { getFullNameWithFallback } from '../../helpers/tcHelpers'
 import './MemberItem.scss'
 
 const  MemberItem  = (props) => {
 
-  const {usr} = props
+  const {usr, showEmailOnly} = props
 
   const userFullName = getFullNameWithFallback(usr)
   const workingHourStart = _.get(usr, 'workingHourStart')
   const workingHourEnd = _.get(usr, 'workingHourEnd')
   const timeZone = _.get(usr, 'timeZone')
+  const email = _.get(usr, 'email')
   let localTime
   let timeZoneInfo
   if(timeZone) {
@@ -25,24 +26,31 @@ const  MemberItem  = (props) => {
   let localTimeInfoEl = null
 
   let isWorkingTime = false
+  let showIcon = false
   let localWhStart
   let localWhEnd
 
-
   if(localTime || workingHourStart && workingHourEnd ) {
 
     if(workingHourStart && workingHourEnd) {
-
+      showIcon = true
       localWhStart = moment({hour: workingHourStart.split(':')[0]}).format('h:mm A')
       localWhEnd = moment({hour: workingHourEnd.split(':')[0]}).format('h:mm A')
 
-      const localHour = +moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('H')
-      const localStartHour = +moment({hour: workingHourStart.split(':')[0] }).format('H')
-      const localEndHour = +moment({hour: workingHourEnd.split(':')[0] }).format('H')
-      if(localHour >= localStartHour && localHour <= localEndHour) {
-        isWorkingTime = true
+      if(localTime) {
+        let localHour = +moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('H')
+        const localStartHour = +moment({hour: workingHourStart.split(':')[0] }).format('H')
+        let localEndHour = +moment({hour: workingHourEnd.split(':')[0] }).format('H')
+        if(localEndHour <= localStartHour) {
+          localEndHour += 24
+          if(localHour < localStartHour) {
+            localHour += 24
+          }
+        }
+        if(localHour >= localStartHour && localHour <= localEndHour) {
+          isWorkingTime = true
+        }
       }
-
     }
     localTimeInfoEl = (<div styleName="time-info-tooltip">
       {localTime? <span>Local Time - {localTime}</span>: null}
@@ -54,9 +62,9 @@ const  MemberItem  = (props) => {
     <div styleName="container">
       <UserTooltip {...props} localTimeInfo={localTimeInfoEl}/>
       <div styleName="member-detail">
-        <div styleName="member-name">{userFullName}</div>
+        <div styleName="member-name">{showEmailOnly? email :userFullName}</div>
         {localWhStart && localWhEnd && <div styleName="wk-hour">WH: {localWhStart} - {localWhEnd}</div>}
-        {localTime &&<div styleName="local-time">{isWorkingTime ? <SunIcon/>: <MoonIcon/>}Local time: {localTime}</div>}
+        {localTime &&<div styleName="local-time">{showIcon&& (isWorkingTime ? <SunIcon/>: <MoonIcon/>)}Local time: {localTime}</div>}
       </div>
     </div>
   )
@@ -73,6 +81,7 @@ MemberItem.propTypes = {
     PropTypes.number
   ]).isRequired,
   previewAvatar: PropTypes.bool,
+  showEmailOnly: PropTypes.bool,
   size: PropTypes.number
 }
 

src/components/TeamManagement/MemberItem.scss

@@ -2,14 +2,19 @@
 
 .container {
   display: flex;
-  flex-direction: row
+  flex-direction: row;
+  width: 100%
 }
 .member-detail {
   margin-left: 5px;
+  overflow: hidden;
 }
 
 .member-name {
   margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .wk-hour{
   margin-top: 6px;

src/components/TeamManagement/ProjectManagementDialog.js

@@ -135,7 +135,7 @@ class ProjectManagementDialog extends React.Component {
                   <div className="memer-details">
                     <Avatar
                       userName={userFullName}
-                      avatarUrl={getAvatarResized(_.get(member, 'photoURL'), 40)}
+                      avatarUrl={getAvatarResized(_.get(member, 'photoURL') || '', 40)}
                       size={40}
                     />
                     <div className="member-name">
@@ -156,23 +156,24 @@ class ProjectManagementDialog extends React.Component {
                 removeInvite(invite)
               }
               i++
-              const handle = invite.member ? invite.member.handle : null
-              const userFullName = getFullNameWithFallback(invite.member)
+              const hasUserId = !_.isNil(invite.userId)
+              const handle = invite.handle
+              const userFullName = getFullNameWithFallback(invite)
               return (
                 <div
                   key={i}
                   className={`project-member-layout ${(i % 2 !== 0) ? 'dark' : ''}`}
                 >
                   <Avatar
-                    userName={invite.email || userFullName}
-                    avatarUrl={invite.email ? '' : getAvatarResized(_.get(invite.member || {}, 'photoURL'), 40)}
+                    userName={hasUserId ? userFullName : invite.email}
+                    avatarUrl={hasUserId ? getAvatarResized(_.get(invite, 'photoURL') || '', 40) : ''}
                     size={40}
                   />
                   <div className="member-name">
-                    {!invite.email && <span className="span-name">{userFullName}</span>}
+                    {hasUserId && <span className="span-name">{userFullName}</span>}
                     <span className="member-handle-container">
-                      {!invite.email && <span className="member-handle">@{handle}</span>}
-                      {invite.email && <span className="member-email">{invite.email}</span>}
+                      {hasUserId && handle && <span className="member-handle">@{handle}</span>}
+                      { (!hasUserId) && <span className="member-email">{invite.email}</span>}
                     </span>
                   </div>
                   {showRemove && <div className="member-remove" onClick={remove}>

src/components/TeamManagement/TeamManagement.jsx

@@ -141,6 +141,7 @@ class TeamManagement extends React.Component {
                   previewAvatar
                   size={40}
                   invitedLabel
+                  showEmailOnly={!invite.userId}
                 />
               )
             })}

src/components/TeamManagement/TopcoderManagementDialog.js

@@ -195,7 +195,7 @@ class TopcoderManagementDialog extends React.Component {
                   <div className="memer-details">
                     <Avatar
                       userName={userFullName}
-                      avatarUrl={getAvatarResized(_.get(member, 'photoURL'), 40)}
+                      avatarUrl={getAvatarResized(_.get(member, 'photoURL') || '', 40)}
                       size={40}
                     />
                     <div className="member-name">
@@ -287,7 +287,7 @@ class TopcoderManagementDialog extends React.Component {
                   this.setState({ processingInviteRequestId: null })
                 })
               }
-              const userFullName = getFullNameWithFallback(invite.member)
+              const userFullName = getFullNameWithFallback(invite)
               i++
               return (
                 <div
@@ -296,7 +296,7 @@ class TopcoderManagementDialog extends React.Component {
                 >
                   <Avatar
                     userName={userFullName}
-                    avatarUrl={getAvatarResized(_.get(invite.member, 'photoURL'), 40)}
+                    avatarUrl={getAvatarResized(_.get(invite, 'photoURL') || '', 40)}
                     size={40}
                   />
                   <div className="member-name">