Remove usage of Usercard.Username component from omnichannel components

RocketChat · May 10, 2022 · f3dd66b · f3dd66b
1 parent 1c08494
commit f3dd66b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 32 deletions.
diff --git a/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx b/apps/meteor/client/components/Omnichannel/AgentOrContactCardUsername.tsx
@@ -0,0 +1,31 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ReactElement, ReactNode, ComponentProps } from 'react';
+
+import * as UserStatus from '../UserStatus';
+
+type AgentOrContactCardUsernameProps = ComponentProps<typeof Box> & {
+	name: ReactNode;
+	status: ReactNode;
+};
+
+const AgentOrContactCardUsername = ({ name, status = <UserStatus.Offline />, ...props }: AgentOrContactCardUsernameProps): ReactElement => (
+	<Box
+		display='flex'
+		title={name}
+		flexGrow={0}
+		flexShrink={1}
+		flexBasis={0}
+		alignItems='center'
+		fontScale='h4'
+		color='default'
+		withTruncatedText
+		{...props}
+	>
+		{status}{' '}
+		<Box mis='x8' flexGrow={1} withTruncatedText>
+			{name}
+		</Box>
+	</Box>
+);
+
+export default AgentOrContactCardUsername;
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/AgentField.js
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import UserCard from '../../../../../components/UserCard';
+import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername';
 import { UserStatus } from '../../../../../components/UserStatus';
 import UserAvatar from '../../../../../components/avatar/UserAvatar';
 import { AsyncStatePhase } from '../../../../../hooks/useAsyncState';
@@ -32,14 +32,12 @@ const AgentField = ({ agent, isSmall = false }) => {
 			<Label>{t('Agent')}</Label>
 			<Info style={{ display: 'flex' }}>
 				<UserAvatar size={isSmall ? 'x28' : 'x40'} title={username} username={username} />
-				<Box mbe='x4' withTruncatedText display='flex'>
-					<UserCard.Username mis={isSmall ? 'x8' : 'x10'} name={displayName} status={<UserStatus status={status} />} />
-					{username && (
-						<Box flexGrow={1} flexShrink={1} flexBasis={0} mb='x9' mis='x4' align='center' justifyContent='center'>
-							({username})
-						</Box>
-					)}
-				</Box>
+				<AgentOrContactCardUsername mis={isSmall ? 'x8' : 'x10'} name={displayName} status={<UserStatus status={status} />} />
+				{username && (
+					<Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>
+						({username})
+					</Box>
+				)}
 			</Info>
 		</Field>
 	);

diff --git a/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js b/apps/meteor/client/views/omnichannel/directory/chats/contextualBar/ContactField.js
@@ -2,7 +2,7 @@ import { Avatar, Box } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import UserCard from '../../../../../components/UserCard';
+import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername';
 import { UserStatus } from '../../../../../components/UserStatus';
 import { useEndpointData } from '../../../../../hooks/useEndpointData';
 import { AsyncStatePhase } from '../../../../../lib/asyncState';
@@ -39,14 +39,12 @@ const ContactField = ({ contact, room }) => {
 			<Label>{t('Contact')}</Label>
 			<Info style={{ display: 'flex' }}>
 				<Avatar size='x40' title={fname} url={avatarUrl} />
-				<Box mbe='x4' withTruncatedText display='flex'>
-					<UserCard.Username mis='x10' name={displayName} status={<UserStatus status={status} />} />
-					{username && (
-						<Box flexGrow={1} flexShrink={1} flexBasis={0} display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>
-							({username})
-						</Box>
-					)}
-				</Box>
+				<AgentOrContactCardUsername mis='x10' name={displayName} status={<UserStatus status={status} />} />
+				{username && (
+					<Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>
+						({username})
+					</Box>
+				)}
 			</Info>
 		</Field>
 	);

diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js b/apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
 
 import { hasPermission } from '../../../../../../app/authorization/client';
 import ContactManagerInfo from '../../../../../../ee/client/omnichannel/ContactManagerInfo';
-import UserCard from '../../../../../components/UserCard/UserCard';
+import AgentOrContactCardUsername from '../../../../../components/Omnichannel/AgentOrContactCardUsername';
 import { UserStatus } from '../../../../../components/UserStatus';
 import VerticalBar from '../../../../../components/VerticalBar';
 import UserAvatar from '../../../../../components/avatar/UserAvatar';
@@ -106,14 +106,12 @@ const ContactInfo = ({ id, rid, route }) => {
 							<Label>{`${t('Name')} / ${t('Username')}`}</Label>
 							<Info style={{ display: 'flex' }}>
 								<UserAvatar size='x40' title={username} username={username} />
-								<Box mbe='x4' withTruncatedText display='flex'>
-									<UserCard.Username mis='x10' name={displayName} status={<UserStatus status={status} />} />
-									{username && (
-										<Box flexGrow={1} flexShrink={1} flexBasis={0} display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>
-											({username})
-										</Box>
-									)}
-								</Box>
+								<AgentOrContactCardUsername mis='x10' name={displayName} status={<UserStatus status={status} />} />
+								{username && (
+									<Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>
+										({username})
+									</Box>
+								)}
 							</Info>
 						</Field>
 					)}

diff --git a/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js b/apps/meteor/ee/client/omnichannel/ContactManagerInfo.js
@@ -2,11 +2,12 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import UserCard from '../../../client/components/UserCard';
+import AgentOrContactCardUsername from '../../../client/components/Omnichannel/AgentOrContactCardUsername';
 import { UserStatus } from '../../../client/components/UserStatus';
 import UserAvatar from '../../../client/components/avatar/UserAvatar';
 import { AsyncStatePhase } from '../../../client/hooks/useAsyncState';
 import { useEndpointData } from '../../../client/hooks/useEndpointData';
+import Info from '../../../client/views/omnichannel/components/Info';
 
 const wordBreak = css`
 	word-break: break-word;
@@ -24,17 +25,17 @@ function ContactManagerInfo({ username }) {
 
 	return (
 		<>
-			<UserCard.Info className={wordBreak} flexShrink={0} style={{ display: 'flex' }}>
+			<Info className={wordBreak} flexShrink={0} style={{ display: 'flex' }}>
 				<UserAvatar title={username} username={username} />
 				<Box mbe='x4' withTruncatedText display='flex'>
-					<UserCard.Username mis='x10' name={username} status={<UserStatus status={status} />} />
+					<AgentOrContactCardUsername mis='x10' name={username} status={<UserStatus status={status} />} />
 					{name && (
-						<Box flexGrow={1} flexShrink={1} flexBasis={0} mis='x7' mb='x9' align='center' justifyContent='center'>
+						<Box display='flex' mis='x7' mb='x9' align='center' justifyContent='center'>
 							({name})
 						</Box>
 					)}
 				</Box>
-			</UserCard.Info>
+			</Info>
 		</>
 	);
 }