Regression: Unify Contact information displayed on the Room header and Room Info

client/omnichannel/directory/OmnichannelDirectoryPage.js

@@ -50,7 +50,7 @@ const OmnichannelDirectoryPage = () => {
 	const ContactContextualBar = () => <VerticalBar className={'contextual-bar'}>
 		<VerticalBar.Header>
 			{context === 'new' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('New_Contact')}</Box>}
-			{context === 'info' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('Contact_Profile')}</Box>}
+			{context === 'info' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('Contact_Info')}</Box>}
 			{context === 'edit' && <Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='pencil' size='x20' /> {t('Edit_Contact_Profile')}</Box>}
 			<VerticalBar.Close onClick={handleContactsVerticalBarCloseButtonClick} />
 		</VerticalBar.Header>

client/omnichannel/directory/chats/contextualBar/ChatInfo.js

@@ -38,15 +38,30 @@ const DepartmentField = ({ departmentId }) => {
 
 const ContactField = ({ contact, room }) => {
 	const t = useTranslation();
-	const { username, status } = contact;
+	const { status } = contact;
 	const { fname, t: type } = room;
 	const avatarUrl = roomTypes.getConfig(type).getAvatarPath(room);
 
+	const { value: data, phase: state, error } = useEndpointData(`livechat/visitors.info?visitorId=${ contact._id }`);
+
+	if (state === AsyncStatePhase.LOADING) {
+		return <FormSkeleton />;
+	}
+
+	if (error || !data || !data.visitor) {
+		return <Box mbs='x16'>{t('Contact_not_found')}</Box>;
+	}
+
+	const { visitor: { username, name } } = data;
+
+	const displayName = name || username;
+
 	return <>
 		<Label>{t('Contact')}</Label>
 		<Info style={{ display: 'flex' }}>
 			<Avatar size='x40' title={fname} url={avatarUrl} />
-			<UserCard.Username mis='x10' name={username} status={<UserStatus status={status} />} />
+			<UserCard.Username mis='x10' name={displayName} status={<UserStatus status={status} />} />
+			{username && name && <Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>({username})</Box>}
 		</Info>
 	</>;
 };
@@ -60,13 +75,16 @@ const AgentField = ({ agent }) => {
 		return <FormSkeleton />;
 	}
 
-	const { user: { status } } = value || { user: { } };
+	const { user: { name, status } } = value || { user: { } };
+
+	const displayName = name || username;
 
 	return <>
 		<Label>{t('Agent')}</Label>
 		<Info style={{ display: 'flex' }}>
 			<UserAvatar size='x40' title={username} username={username} />
-			<UserCard.Username mis='x10' name={username} status={<UserStatus status={status} />} />
+			<UserCard.Username mis='x10' name={displayName} status={<UserStatus status={status} />} />
+			{username && name && <Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>({username})</Box>}
 		</Info>
 	</>;
 };

client/omnichannel/directory/contacts/contextualBar/ContactInfo.js

@@ -14,6 +14,8 @@ import { hasPermission } from '../../../../../app/authorization';
 import { useFormatDate } from '../../../../hooks/useFormatDate';
 import { AsyncStatePhase } from '../../../../hooks/useAsyncState';
 import { ContactManagerInfo } from '../../../../../ee/client/omnichannel/ContactManager';
+import UserAvatar from '../../../../components/avatar/UserAvatar';
+import { UserStatus } from '../../../../components/UserStatus';
 
 
 const wordBreak = css`
@@ -85,12 +87,18 @@ export function ContactInfo({ id }) {
 		FlowRouter.go(`/live/${ _id }/contact-chat-history`);
 	};
 
+	const displayName = name || username;
+
 	return <>
 		<VerticalBar.ScrollableContent p='x24'>
 			<Margins block='x4'>
-				{username && username !== name && <>
+				{displayName && <>
 					<Label>{`${ t('Name') } / ${ t('Username') }`}</Label>
-					<Info>{`${ name }/${ username }`}</Info>
+					<Info style={{ display: 'flex' }}>
+						<UserAvatar size='x40' title={username} username={username} />
+						<UserCard.Username mis='x10' name={displayName} status={<UserStatus status={status} />} />
+						{username && name && <Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>({username})</Box>}
+					</Info>
 				</>}
 				{visitorEmails && visitorEmails.length && <>
 					<Label>{t('Email')}</Label>

client/omnichannel/directory/contacts/contextualBar/index.js

@@ -21,7 +21,7 @@ const ContactsContextualBar = ({ id }) => {
 
 	return <>
 		<VerticalBar.Header>
-			<Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('Contact_Profile')}</Box>
+			<Box flexShrink={1} flexGrow={1} withTruncatedText mi='x8'><Icon name='user' size='x20' /> {t('Contact_Info')}</Box>
 			<VerticalBar.Close onClick={closeContextualBar} />
 		</VerticalBar.Header>
 		<ContactInfo id={_id} />

client/views/room/lib/Toolbox/defaultActions.ts

@@ -26,7 +26,7 @@ addAction('user-info', {
 addAction('contact-profile', {
 	groups: ['live'],
 	id: 'contact-profile',
-	title: 'Contact_Profile',
+	title: 'Contact_Info',
 	icon: 'user',
 	template: lazy(() => import('../../../../omnichannel/directory/contacts/contextualBar')),
 	order: 5,

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -926,6 +926,7 @@
   "Contact_Manager": "Contact Manager",
   "Contact_not_found": "Contact not found",
   "Contact_Profile": "Contact Profile",
+  "Contact_Info": "Contact Information",
   "Content": "Content",
   "Continue": "Continue",
   "Continuous_sound_notifications_for_new_livechat_room": "Continuous sound notifications for new omnichannel room",
@@ -3371,7 +3372,7 @@
   "Room_has_been_archived": "Room has been archived",
   "Room_has_been_deleted": "Room has been deleted",
   "Room_has_been_unarchived": "Room has been unarchived",
-  "Room_Info": "Room Info",
+  "Room_Info": "Room Information",
   "room_is_blocked": "This room is blocked",
   "room_is_read_only": "This room is read only",
   "room_name": "room name",