Regression: Added missing call button in the contact info contextual bar (#26135)

apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx

@@ -7,6 +7,7 @@ import React, { ReactElement, useMemo } from 'react';
 import { UserStatus } from '../../../../../components/UserStatus';
 import VerticalBar from '../../../../../components/VerticalBar';
 import UserAvatar from '../../../../../components/avatar/UserAvatar';
+import { useIsCallReady } from '../../../../../contexts/CallContext';
 import InfoPanel from '../../../../InfoPanel';
 import AgentInfoDetails from '../../../components/AgentInfoDetails';
 import AgentField from '../../chats/contextualBar/AgentField';
@@ -21,6 +22,7 @@ type VoipInfoPropsType = {
 
 export const VoipInfo = ({ room, onClickClose /* , onClickReport  */ }: VoipInfoPropsType): ReactElement => {
 	const t = useTranslation();
+	const isCallReady = useIsCallReady();
 
 	const { servedBy, queue, v, fname, name, callDuration, callTotalHoldTime, closedAt, callWaitingTime, tags, lastMessage } = room;
 	const duration = callDuration && moment.utc(callDuration).format('HH:mm:ss');
@@ -90,7 +92,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport  */ }: VoipInfo
 							{t('Report_Number')}
 						</Box>
 					</Button> */}
-					<VoipInfoCallButton phoneNumber={phoneNumber} />
+					{isCallReady && <VoipInfoCallButton phoneNumber={phoneNumber} />}
 				</ButtonGroup>
 			</VerticalBar.Footer>
 		</>

apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfoCallButton.tsx

-import { Button, Icon, Box } from '@rocket.chat/fuselage';
+import { Button, Icon } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
@@ -11,17 +11,19 @@ export const VoipInfoCallButton = ({ phoneNumber, ...props }: { phoneNumber: str
 	const { openDialModal } = useDialModal();
 
 	const { outBoundCallsAllowed, outBoundCallsEnabledForUser } = useVoipOutboundStates();
+
 	return (
 		<Button
 			{...props} // this props are injected by ButtonGroup
 			onClick={(): void => openDialModal({ initialValue: phoneNumber })}
-			disabled={!outBoundCallsEnabledForUser}
+			disabled={!outBoundCallsEnabledForUser || !phoneNumber}
 			title={outBoundCallsAllowed ? t('Call_number') : t('Call_number_enterprise_only')}
+			display='flex'
+			justifyContent='center'
+			fontSize='p2'
 		>
-			<Box display='flex' justifyContent='center' fontSize='p2'>
-				<Icon name='phone' size='x20' mie='4px' />
-				{t('Call')}
-			</Box>
+			<Icon name='phone' size='x20' mie='4px' />
+			{t('Call')}
 		</Button>
 	);
 };

apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactInfo.js

-import { Box, Margins, ButtonGroup, Button, Icon } from '@rocket.chat/fuselage';
+import { Box, Margins, ButtonGroup, Button, Icon, Divider } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useCurrentRoute, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -8,6 +8,7 @@ import ContactManagerInfo from '../../../../../../ee/client/omnichannel/ContactM
 import { UserStatus } from '../../../../../components/UserStatus';
 import VerticalBar from '../../../../../components/VerticalBar';
 import UserAvatar from '../../../../../components/avatar/UserAvatar';
+import { useIsCallReady } from '../../../../../contexts/CallContext';
 import { AsyncStatePhase } from '../../../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../../../hooks/useEndpointData';
 import { useFormatDate } from '../../../../../hooks/useFormatDate';
@@ -17,6 +18,7 @@ import Field from '../../../components/Field';
 import Info from '../../../components/Info';
 import Label from '../../../components/Label';
 import { FormSkeleton } from '../../Skeleton';
+import { VoipInfoCallButton } from '../../calls/contextualBar/VoipInfoCallButton';
 
 const ContactInfo = ({ id, rid, route }) => {
 	const t = useTranslation();
@@ -32,6 +34,8 @@ const ContactInfo = ({ id, rid, route }) => {
 
 	const canViewCustomFields = () => hasPermission('view-livechat-room-customfields');
 
+	const isCallReady = useIsCallReady();
+
 	const onEditButtonClick = useMutableCallback(() => {
 		if (!hasPermission('edit-omnichannel-contact')) {
 			return dispatchToastMessage({ type: 'error', message: t('Not_authorized') });
@@ -100,10 +104,12 @@ const ContactInfo = ({ id, rid, route }) => {
 		liveRoute.push({ id: _id, tab: 'contact-chat-history' });
 	};
 
-	const showContactHistory = currentRouteName === 'live';
+	const showContactHistory = currentRouteName === 'live' && lastChat;
 
 	const displayName = name || username;
 
+	const { phoneNumber } = phone?.[0] || {};
+
 	return (
 		<>
 			<VerticalBar.ScrollableContent p='x24'>
@@ -126,7 +132,7 @@ const ContactInfo = ({ id, rid, route }) => {
 					{phone && phone.length && (
 						<Field>
 							<Label>{t('Phone')}</Label>
-							<Info>{phone[0].phoneNumber}</Info>
+							<Info>{phoneNumber}</Info>
 						</Field>
 					)}
 					{ts && (
@@ -157,13 +163,20 @@ const ContactInfo = ({ id, rid, route }) => {
 				</Margins>
 			</VerticalBar.ScrollableContent>
 			<VerticalBar.Footer>
-				<ButtonGroup stretch>
-					{showContactHistory && lastChat && (
-						<Button onClick={onChatHistory}>
+				<ButtonGroup stretch flexWrap='wrap'>
+					{isCallReady && (
+						<>
+							<VoipInfoCallButton phoneNumber={phoneNumber} mi={0} flexBasis='0' />
+							{showContactHistory && <Divider width='100%' />}
+						</>
+					)}
+
+					{showContactHistory && (
+						<Button onClick={onChatHistory} mis={0} flexBasis='0'>
 							<Icon name='history' size='x20' /> {t('Chat_History')}
 						</Button>
 					)}
-					<Button onClick={onEditButtonClick}>
+					<Button onClick={onEditButtonClick} flexBasis='0'>
 						<Icon name='pencil' size='x20' /> {t('Edit')}
 					</Button>
 				</ButtonGroup>