review

apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx

@@ -90,7 +90,6 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 				callsInQueue='2 Calls In Queue'
 				dispatchEvent={() => null}
 				openedRoomInfo={{ v: { token: '' }, rid: '' }}
-				anonymousText={'Anonymous'}
 				options={{
 					deviceSettings: {
 						label: (

apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx

@@ -7,7 +7,7 @@ import React, { ReactElement, MouseEvent, ReactNode } from 'react';
 
 import type { VoipFooterMenuOptions } from '../../../../ee/client/hooks/useVoipFooterMenu';
 import { CallActionsType } from '../../../contexts/CallContext';
-import { useOmnichannelContact } from '../../../hooks/omnichannel/useOmnichannelContact';
+import { useOmnichannelContactLabel } from './hooks/useOmnichannelContactLabel';
 
 type VoipFooterPropsType = {
 	caller: ICallerInfo;
@@ -32,7 +32,6 @@ type VoipFooterPropsType = {
 	openRoom: (rid: IVoipRoom['_id']) => void;
 	dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void;
 	openedRoomInfo: { v: { token?: string | undefined }; rid: string };
-	anonymousText: string;
 	isEnterprise: boolean;
 	children?: ReactNode;
 	options: VoipFooterMenuOptions;
@@ -54,12 +53,11 @@ export const VoipFooter = ({
 	callsInQueue,
 	dispatchEvent,
 	openedRoomInfo,
-	anonymousText,
 	isEnterprise = false,
 	children,
 	options,
 }: VoipFooterPropsType): ReactElement => {
-	const { contact } = useOmnichannelContact(caller.callerId);
+	const contactLabel = useOmnichannelContactLabel(caller);
 	const t = useTranslation();
 
 	const cssClickable =
@@ -80,7 +78,6 @@ export const VoipFooter = ({
 		<SidebarFooter elevated>
 			<Box
 				className={cssClickable}
-				data-qa-id='omncVoipFooter'
 				onClick={(): void => {
 					if (callerState === 'IN_CALL' || callerState === 'ON_HOLD') {
 						openRoom(openedRoomInfo.rid);
@@ -121,8 +118,11 @@ export const VoipFooter = ({
 				</Box>
 				<Box display='flex' flexDirection='row' mi='16px' mbe='12px' justifyContent='space-between' alignItems='center'>
 					<Box>
-						<Box color='white' fontScale='p2' withTruncatedText data-qa-id='omncVoipTitle'>
-							{contact.name || caller.callerName || contact.phone || anonymousText}
+						<Box color='white' fontScale='p2' withTruncatedText>
+							{/* TODO: Check what is the point of having  Anonymous here, 
+								since callerId and callerName are required and they act as a fallback
+							*/}
+							{contactLabel || t('Anonymous')}
 						</Box>
 						<Box color='hint' fontScale='c1' withTruncatedText>
 							{subtitle}

apps/meteor/client/sidebar/footer/voip/hooks/useOmnichannelContactLabel.ts

@@ -0,0 +1,17 @@
+import { ICallerInfo } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber';
+
+export const useOmnichannelContactLabel = (caller: ICallerInfo): string => {
+	const getContactBy = useEndpoint('GET', '/v1/omnichannel/contact.search');
+	const phone = parseOutboundPhoneNumber(caller.callerId);
+
+	const { data } = useQuery(['getContactsByPhone', phone], async () => {
+		return (await getContactBy({ phone })).contact;
+	});
+
+	// TODO: callerName is typed as required so maybe we should not use phone as fallback
+	return data?.name || caller.callerName || phone;
+};

apps/meteor/client/sidebar/footer/voip/index.tsx

@@ -102,7 +102,6 @@ export const VoipFooter = (): ReactElement | null => {
 			callsInQueue={getCallsInQueueText}
 			dispatchEvent={dispatchEvent}
 			openedRoomInfo={openedRoomInfo}
-			anonymousText={t('Anonymous')}
 			isEnterprise={isEnterprise}
 			options={options}
 		/>

apps/meteor/client/sidebar/sections/OmnichannelSection.tsx

@@ -51,7 +51,7 @@ const OmnichannelSection = (props: typeof Box): ReactElement => {
 
 	// The className is a paliative while we make TopBar.ToolBox optional on fuselage
 	return (
-		<Sidebar.TopBar.ToolBox className='omnichannel-sidebar' data-qa-id='omncSection' {...props}>
+		<Sidebar.TopBar.ToolBox className='omnichannel-sidebar' {...props}>
 			<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
 			<Sidebar.TopBar.Actions>
 				{showOmnichannelQueueLink && <Sidebar.TopBar.Action icon='queue' title={t('Queue')} onClick={(): void => handleRoute('queue')} />}

apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleError.tsx

@@ -4,5 +4,5 @@ import React, { ReactElement } from 'react';
 
 export const OmnichannelCallToggleError = ({ ...props }): ReactElement => {
 	const t = useTranslation();
-	return <Sidebar.TopBar.Action icon='phone' danger data-title={t('Error')} data-qa-id='omncVoipToggleButton' disabled {...props} />;
+	return <Sidebar.TopBar.Action icon='phone' danger data-title={t('Error')} disabled {...props} />;
 };

apps/meteor/ee/client/deviceManagement/components/featureModal/DeviceManagementFeatureModal.tsx

@@ -46,7 +46,7 @@ const DeviceManagementFeatureModal = ({ close }: { close: () => void }): ReactEl
 	};
 
 	return (
-		<Modal data-qa-id='deviceManagementFeatureModal'>
+		<Modal>
 			<Modal.Header>
 				<Modal.Title withTruncatedText={false}>{t('Workspace_now_using_device_management')}</Modal.Title>
 				<Modal.Close title={t('Close')} onClick={close} />

apps/meteor/ee/client/voip/modal/DialPad/DialPadModal.tsx

@@ -28,7 +28,7 @@ const DialPadModal = ({ initialValue, errorMessage, handleClose }: DialPadModalP
 	useEnterKey(handleCallButtonClick, isButtonDisabled);
 
 	return (
-		<Modal maxWidth='400px' data-qa-id='omncDialpadModal'>
+		<Modal maxWidth='400px'>
 			<Modal.Header>
 				<Modal.Title />
 				<Modal.Close onClick={handleClose} />
@@ -57,7 +57,6 @@ const DialPadModal = ({ initialValue, errorMessage, handleClose }: DialPadModalP
 					secondary
 					info
 					size='64px'
-					data-qa-id='omncDialpadCallButton'
 					onClick={(): void => {
 						handleCallButtonClick();
 						handleClose();