Regression: Calling info on VoipFooter when performing an outbound call (#26138)

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

-import { Box } from '@rocket.chat/fuselage';
+import { VoIpCallerInfo } from '@rocket.chat/core-typings';
+import { Box, Icon } from '@rocket.chat/fuselage';
 import { ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 
@@ -22,6 +23,12 @@ const tooltips = {
 	endCall: 'End Call',
 };
 
+const callerDefault = {
+	callerName: '',
+	callerId: '+5551999999999',
+	host: '',
+};
+
 export default {
 	title: 'Sidebar/Footer/VoipFooter',
 	component: VoipFooter,
@@ -48,6 +55,7 @@ export default {
 		dispatchEvent: { control: false },
 		openedRoomInfo: { control: false },
 		anonymousText: { control: false },
+		options: { control: false },
 	},
 };
 
@@ -55,26 +63,23 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 	const [muted, toggleMic] = useState(false);
 	const [paused, togglePause] = useState(false);
 
-	const getSubtitle = () => {
-		if (args.callerState === 'OFFER_RECEIVED') {
-			return 'Calling';
-		}
+	const getSubtitle = (state: VoIpCallerInfo['state']): string => {
+		const subtitles: Record<string, string> = {
+			IN_CALL: 'In Progress',
+			OFFER_RECEIVED: 'Ringing',
+			OFFER_SENT: 'Calling',
+			ON_HOLD: 'On Hold',
+		};
 
-		return paused ? 'On Hold' : 'In Progress';
+		return subtitles[state] || '';
 	};
 
 	return (
 		<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
 			<VoipFooter
 				{...args}
-				caller={{
-					callerName: 'Tiago',
-					callerId: 'guest-1',
-					host: '',
-				}}
 				callActions={callActions}
-				title='Sales Department'
-				subtitle={getSubtitle()}
+				subtitle={getSubtitle(args.callerState)}
 				muted={muted}
 				paused={paused}
 				toggleMic={toggleMic}
@@ -86,6 +91,16 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 				dispatchEvent={() => null}
 				openedRoomInfo={{ v: { token: '' }, rid: '' }}
 				anonymousText={'Anonymous'}
+				options={{
+					deviceSettings: {
+						label: (
+							<Box alignItems='center' display='flex'>
+								<Icon mie='x4' name='customize' size='x16' />
+								Device Settings
+							</Box>
+						),
+					},
+				}}
 			/>
 		</Box>
 	);
@@ -93,16 +108,33 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 
 export const IncomingCall = VoipFooterTemplate.bind({});
 IncomingCall.args = {
+	title: 'Sales Department',
 	callerState: 'OFFER_RECEIVED',
+	caller: callerDefault,
+};
+
+export const OutboundCall = VoipFooterTemplate.bind({});
+OutboundCall.args = {
+	title: 'Phone Call',
+	callerState: 'OFFER_SENT',
+	caller: {
+		callerName: '',
+		callerId: '+5551999999999',
+		host: '',
+	},
 };
 
 export const InCall = VoipFooterTemplate.bind({});
 InCall.args = {
+	title: 'Sales Department',
 	callerState: 'IN_CALL',
+	caller: callerDefault,
 };
 
 export const NoEnterpriseLicence = VoipFooterTemplate.bind({});
 NoEnterpriseLicence.args = {
+	title: 'Sales Department',
 	callerState: 'IN_CALL',
 	isEnterprise: false,
+	caller: callerDefault,
 };

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

@@ -4,7 +4,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup, Icon, SidebarFooter, Menu, IconButton } from '@rocket.chat/fuselage';
 import React, { ReactElement, MouseEvent, ReactNode } from 'react';
 
-import { useVoipFooterMenu } from '../../../../ee/client/hooks/useVoipFooterMenu';
+import type { VoipFooterMenuOptions } from '../../../../ee/client/hooks/useVoipFooterMenu';
 import { CallActionsType } from '../../../contexts/CallContext';
 
 type VoipFooterPropsType = {
@@ -33,6 +33,7 @@ type VoipFooterPropsType = {
 	anonymousText: string;
 	isEnterprise: boolean;
 	children?: ReactNode;
+	options: VoipFooterMenuOptions;
 };
 
 export const VoipFooter = ({
@@ -54,6 +55,7 @@ export const VoipFooter = ({
 	anonymousText,
 	isEnterprise = false,
 	children,
+	options,
 }: VoipFooterPropsType): ReactElement => {
 	const cssClickable =
 		callerState === 'IN_CALL' || callerState === 'ON_HOLD'
@@ -62,8 +64,6 @@ export const VoipFooter = ({
 			  `
 			: '';
 
-	const options = useVoipFooterMenu();
-
 	const handleHold = (e: MouseEvent<HTMLButtonElement>): void => {
 		e.stopPropagation();
 		const eventName = paused ? 'VOIP-CALL-UNHOLD' : 'VOIP-CALL-ON-HOLD';

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

+import type { VoIpCallerInfo } from '@rocket.chat/core-typings';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useCallback, useMemo, useState } from 'react';
 
 import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
+import { useVoipFooterMenu } from '../../../../ee/client/hooks/useVoipFooterMenu';
 import {
 	useCallActions,
 	useCallCreateRoom,
@@ -26,6 +28,7 @@ export const VoipFooter = (): ReactElement | null => {
 	const queueCounter = useQueueCounter();
 	const queueName = useQueueName();
 	const openedRoomInfo = useOpenedRoomInfo();
+	const options = useVoipFooterMenu();
 
 	const [muted, setMuted] = useState(false);
 	const [paused, setPaused] = useState(false);
@@ -48,17 +51,15 @@ export const VoipFooter = (): ReactElement | null => {
 		[callActions],
 	);
 
-	const getSubtitle = (): string => {
-		switch (callerInfo.state) {
-			case 'IN_CALL':
-				return t('In_progress');
-			case 'OFFER_RECEIVED':
-				return t('Ringing');
-			case 'ON_HOLD':
-				return t('On_Hold');
-		}
+	const getSubtitle = (state: VoIpCallerInfo['state']): string => {
+		const subtitles: Record<string, string> = {
+			IN_CALL: t('In_progress'),
+			OFFER_RECEIVED: t('Ringing'),
+			OFFER_SENT: t('Calling'),
+			ON_HOLD: t('On_Hold'),
+		};
 
-		return '';
+		return subtitles[state] || '';
 	};
 
 	const tooltips = {
@@ -91,7 +92,7 @@ export const VoipFooter = (): ReactElement | null => {
 			callerState={callerInfo.state}
 			callActions={callActions}
 			title={queueName || t('Phone_call')}
-			subtitle={getSubtitle()}
+			subtitle={getSubtitle(callerInfo.state)}
 			muted={muted}
 			paused={paused}
 			toggleMic={toggleMic}
@@ -105,6 +106,7 @@ export const VoipFooter = (): ReactElement | null => {
 			anonymousText={t('Anonymous')}
 			isEnterprise={isEE === true}
 			children={<SidebarFooterWatermark />}
+			options={options}
 		/>
 	);
 };

apps/meteor/ee/client/hooks/useVoipFooterMenu.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useMemo } from 'react';
 
 import { useDevicesMenuOption } from './useDevicesMenuOption';
 
-type VoipFooterMenuOptions = Record<
+export type VoipFooterMenuOptions = Record<
 	string,
 	{
 		type?: 'option' | 'heading' | 'divider';

packages/core-typings/src/voip/VoIpCallerInfo.ts

@@ -9,11 +9,11 @@ export interface IState {
 
 export type VoIpCallerInfo =
 	| {
-			state: Exclude<CallStates, 'IN_CALL' | 'OFFER_RECEIVED' | 'ON_HOLD'>;
+			state: Exclude<CallStates, 'IN_CALL' | 'OFFER_RECEIVED' | 'ON_HOLD' | 'OFFER_SENT'>;
 			userState: UserState;
 	  }
 	| {
-			state: 'IN_CALL' | 'ON_HOLD' | 'OFFER_RECEIVED';
+			state: 'IN_CALL' | 'ON_HOLD' | 'OFFER_RECEIVED' | 'OFFER_SENT';
 			userState: UserState;
 			caller: ICallerInfo;
 	  }; // TODO: Check for additional properties and States (E.g. call on hold, muted, etc)