From 3928cabc2f1bd5739fb0014517717f8126077fe2 Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Thu, 20 Aug 2026 16:07:04 -0300 Subject: [PATCH 1/2] chore: Unify (Incoming|Outgoing)Call Transfer variation components into a single one. --- .../views/MediaCallWidget/IncomingCall.tsx | 20 +++++++-- .../MediaCallWidget/IncomingCallTransfer.tsx | 41 ------------------ .../MediaCallWidgetViewRouter.tsx | 10 +---- .../views/MediaCallWidget/OutgoingCall.tsx | 20 +++++++-- .../MediaCallWidget/OutgoingCallTransfer.tsx | 42 ------------------- 5 files changed, 36 insertions(+), 97 deletions(-) delete mode 100644 packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.tsx delete mode 100644 packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.tsx diff --git a/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.tsx index afe00caefc17d..5ba7b4f6985bc 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.tsx +++ b/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 ( - + + {transferredBy && } diff --git a/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.tsx b/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.tsx deleted file mode 100644 index 5f0fe721a5ce1..0000000000000 --- a/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useTranslation } from 'react-i18next'; - -import { DevicePicker, PeerInfo, Widget, WidgetFooter, WidgetHandle, WidgetHeader, WidgetContent, WidgetInfo } from '../../components'; -import { useMediaCallView } from '../../context/MediaCallViewContext'; - -const IncomingCallTransfer = () => { - const { t } = useTranslation(); - - const { sessionState, onEndCall, onAccept } = useMediaCallView(); - const { peerInfo, transferredBy } = sessionState; - - if (!peerInfo) { - throw new Error('Peer info is required'); - } - - return ( - - - - - - {transferredBy && } - - - - - - - - - - - ); -}; - -export default IncomingCallTransfer; diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx index 54749bd651c92..fca8b1ef6e327 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx +++ b/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 ; case 'ringing': - if (transferredBy) { - return ; - } return ; case 'calling': - if (transferredBy) { - return ; - } return ; case 'none': default: diff --git a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.tsx index 6f0073eeeae69..68b8093214b06 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.tsx +++ b/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 ( - + + {transferredBy && } diff --git a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.tsx b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.tsx deleted file mode 100644 index 732db9fa41171..0000000000000 --- a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useTranslation } from 'react-i18next'; - -import { PeerInfo, Widget, WidgetFooter, WidgetHandle, WidgetHeader, WidgetContent, DevicePicker, WidgetInfo } from '../../components'; -import { useMediaCallView } from '../../context/MediaCallViewContext'; - -const OutgoingCallTransfer = () => { - const { t } = useTranslation(); - - const { - sessionState: { peerInfo, connectionState, transferredBy }, - onEndCall, - } = useMediaCallView(); - - if (!peerInfo) { - throw new Error('Peer info is required'); - } - - const connecting = connectionState === 'CONNECTING'; - - return ( - - - - - - {transferredBy && } - - - - - - - - - - ); -}; - -export default OutgoingCallTransfer; From 2c7d1127df570fad7d28a1bf855b6d131dbc8e4b Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Thu, 20 Aug 2026 16:07:19 -0300 Subject: [PATCH 2/2] test: Update stories and snapshots --- .../IncomingCallTransfer.stories.tsx | 12 +- .../MediaCallWidget.stories.tsx | 20 ++ .../OutgoingCallTransfer.stories.tsx | 14 +- .../MediaCallWidget.spec.tsx.snap | 326 +++++++++++++++++- 4 files changed, 358 insertions(+), 14 deletions(-) diff --git a/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx index 8c6cd25362ca4..4d727c56434ef 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx +++ b/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 { ), ], -} satisfies Meta; +} satisfies Meta; -export const IncomingCallTransferStory: StoryObj = {}; +export default meta; + +export const IncomingCallStory: StoryObj = {}; diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx index 1cdc4241ef714..c2da709c76ea1 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx +++ b/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', diff --git a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx index 7bc401d5c8821..9cee15beda8ab 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx +++ b/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 { ), ], -} satisfies Meta; +} satisfies Meta; -export const OutgoingCallTransferStory: StoryObj = {}; +export default meta; + +type Story = StoryObj; + +export const OutgoingCallTransferStory: Story = {}; diff --git a/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap b/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap index 14deb5f75b75e..e06391c51fb9a 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap +++ b/packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap @@ -351,7 +351,7 @@ exports[`renders IncomingCallTransfer without crashing 1`] = ` class="rcx-box rcx-box--full rcx-css-uge1yt" id="rcx-media-call-widget-title" > - Transferring_call_incoming... + Incoming call transfer...
- Transferring_call_incoming__from_ + From Jason
`; +exports[`renders IncomingCallTransferConnecting without crashing 1`] = ` + +
+
+ +`; + exports[`renders MediaCallWidgetManualTesting without crashing 1`] = `
@@ -1505,7 +1664,166 @@ exports[`renders OutgoingCallTransfer without crashing 1`] = ` class="rcx-box rcx-box--full rcx-css-uge1yt" id="rcx-media-call-widget-title" > - Transferring_call... + Transferring call... + +
+ +
+ + + + + Joy transferred call to + + +
+
+
+
+ +
+
+
+
+ + +
+ John Doe +
+ +
+
+ 1234567890 +
+
+
+
+
+
+ +
+
+
+
+ +`; + +exports[`renders OutgoingCallTransferConnecting without crashing 1`] = ` + +
+