fix: Voice call widget missing connection state during call transfer

packages/ui-voip/src/views/MediaCallWidget/IncomingCall.tsx

@@ -1,14 +1,27 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import { DevicePicker, PeerInfo, Widget, WidgetFooter, WidgetHandle, WidgetHeader, WidgetContent } from '../../components';
+import { DevicePicker, PeerInfo, Widget, WidgetFooter, WidgetHandle, WidgetHeader, WidgetContent, WidgetInfo } from '../../components';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
 
+const getHeaderTitle = ({ connecting, transferred, t }: { connecting: boolean; transferred: boolean; t: TFunction }) => {
+	if (connecting) {
+		return t('meteor_status_connecting');
+	}
+
+	if (transferred) {
+		return `${t('Transferring_call_incoming')}...`;
+	}
+
+	return `${t('Incoming_call')}...`;
+};
+
 const IncomingCall = () => {
 	const { t } = useTranslation();
 
 	const { sessionState, onEndCall, onAccept } = useMediaCallView();
-	const { peerInfo, connectionState } = sessionState;
+	const { peerInfo, connectionState, transferredBy } = sessionState;
 
 	const connecting = connectionState === 'CONNECTING';
 
@@ -20,9 +33,10 @@ const IncomingCall = () => {
 	return (
 		<Widget>
 			<WidgetHandle />
-			<WidgetHeader title={connecting ? t('meteor_status_connecting') : `${t('Incoming_call')}...`}>
+			<WidgetHeader title={getHeaderTitle({ connecting, transferred: !!transferredBy, t })}>
 				<DevicePicker />
 			</WidgetHeader>
+			{transferredBy && <WidgetInfo slots={[{ text: t('Transferring_call_incoming__from_', { from: transferredBy }), type: 'info' }]} />}
 			<WidgetContent>
 				<PeerInfo {...peerInfo} />
 			</WidgetContent>

packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx

@@ -1,7 +1,7 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import IncomingCallTransfer from './IncomingCallTransfer';
+import IncomingCall from './IncomingCall';
 import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider';
 
 const mockedContexts = mockAppRoot()
@@ -13,8 +13,8 @@ const mockedContexts = mockAppRoot()
 	})
 	.buildStoryDecorator();
 
-export default {
-	component: IncomingCallTransfer,
+const meta = {
+	component: IncomingCall,
 	decorators: [
 		mockedContexts,
 		(Story) => (
@@ -23,6 +23,8 @@ export default {
 			</MockedMediaCallProvider>
 		),
 	],
-} satisfies Meta<typeof IncomingCallTransfer>;
+} satisfies Meta<typeof IncomingCall>;
 
-export const IncomingCallTransferStory: StoryObj<typeof IncomingCallTransfer> = {};
+export default meta;
+
+export const IncomingCallStory: StoryObj<typeof meta> = {};

packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx

@@ -9,6 +9,10 @@ import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider';
 const mockedContexts = mockAppRoot()
 	.withTranslations('en', 'core', {
 		New_Call: 'New call',
+		Transferring_call_incoming: 'Incoming call transfer',
+		Transferring_call_incoming__from_: 'From {{from}}',
+		Transferred_call__from__to: '{{from}} transferred call to',
+		Transferring_call: 'Transferring call',
 		Incoming_call: 'Incoming call',
 		Enter_username_or_number: 'Enter username or number',
 		meteor_status_connecting: 'Connecting...',
@@ -86,6 +90,14 @@ export const IncomingCallTransfer: Story = {
 	},
 };
 
+export const IncomingCallTransferConnecting: Story = {
+	args: {
+		state: 'ringing',
+		transferredBy: 'Jason',
+		connectionState: 'CONNECTING',
+	},
+};
+
 export const OutgoingCall: Story = {
 	args: {
 		state: 'calling',
@@ -106,6 +118,14 @@ export const OutgoingCallTransfer: Story = {
 	},
 };
 
+export const OutgoingCallTransferConnecting: Story = {
+	args: {
+		state: 'calling',
+		transferredBy: 'Joy',
+		connectionState: 'CONNECTING',
+	},
+};
+
 export const OngoingCall: Story = {
 	args: {
 		state: 'ongoing',

packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx

@@ -1,10 +1,10 @@
-import { OngoingCall, NewCall, IncomingCall, OutgoingCall, IncomingCallTransfer, OutgoingCallTransfer } from '..';
+import { OngoingCall, NewCall, IncomingCall, OutgoingCall } from '..';
 import OngoingCallWithScreen from './OngoingCallWithScreen';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
 
 const MediaCallWidgetViewRouter = () => {
 	const {
-		sessionState: { state, transferredBy, supportedFeatures },
+		sessionState: { state, supportedFeatures },
 	} = useMediaCallView();
 
 	switch (state) {
@@ -14,14 +14,8 @@ const MediaCallWidgetViewRouter = () => {
 			}
 			return <OngoingCall />;
 		case 'ringing':
-			if (transferredBy) {
-				return <IncomingCallTransfer />;
-			}
 			return <IncomingCall />;
 		case 'calling':
-			if (transferredBy) {
-				return <OutgoingCallTransfer />;
-			}
 			return <OutgoingCall />;
 		case 'none':
 		default:

packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.tsx

@@ -1,14 +1,27 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import { PeerInfo, Widget, WidgetFooter, WidgetHandle, WidgetHeader, WidgetContent, DevicePicker } from '../../components';
+import { PeerInfo, Widget, WidgetFooter, WidgetHandle, WidgetHeader, WidgetContent, DevicePicker, WidgetInfo } from '../../components';
 import { useMediaCallView } from '../../context/MediaCallViewContext';
 
+const getHeaderTitle = ({ connecting, transferred, t }: { connecting: boolean; transferred: boolean; t: TFunction }) => {
+	if (connecting) {
+		return t('meteor_status_connecting');
+	}
+
+	if (transferred) {
+		return `${t('Transferring_call')}...`;
+	}
+
+	return `${t('Calling')}...`;
+};
+
 const OutgoingCall = () => {
 	const { t } = useTranslation();
 
 	const { sessionState, onEndCall } = useMediaCallView();
-	const { peerInfo, connectionState } = sessionState;
+	const { peerInfo, connectionState, transferredBy } = sessionState;
 
 	// TODO: Figure out how to ensure this always exist before rendering the component
 	if (!peerInfo) {
@@ -20,9 +33,10 @@ const OutgoingCall = () => {
 	return (
 		<Widget>
 			<WidgetHandle />
-			<WidgetHeader title={connecting ? t('meteor_status_connecting') : `${t('Calling')}...`}>
+			<WidgetHeader title={getHeaderTitle({ connecting, transferred: !!transferredBy, t })}>
 				<DevicePicker />
 			</WidgetHeader>
+			{transferredBy && <WidgetInfo slots={[{ text: t('Transferred_call__from__to', { from: transferredBy }), type: 'info' }]} />}
 			<WidgetContent>
 				<PeerInfo {...peerInfo} />
 			</WidgetContent>

packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx

@@ -1,7 +1,7 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import OutgoingCallTransfer from './OutgoingCallTransfer';
+import OutgoingCall from './OutgoingCall';
 import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider';
 
 const mockedContexts = mockAppRoot()
@@ -12,8 +12,8 @@ const mockedContexts = mockAppRoot()
 	})
 	.buildStoryDecorator();
 
-export default {
-	component: OutgoingCallTransfer,
+const meta = {
+	component: OutgoingCall,
 	decorators: [
 		mockedContexts,
 		(Story) => (
@@ -22,6 +22,10 @@ export default {
 			</MockedMediaCallProvider>
 		),
 	],
-} satisfies Meta<typeof OutgoingCallTransfer>;
+} satisfies Meta<typeof OutgoingCall>;
 
-export const OutgoingCallTransferStory: StoryObj<typeof OutgoingCallTransfer> = {};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const OutgoingCallTransferStory: Story = {};