feat: Identify call transfer requester on call widget

.changeset/heavy-rules-fry.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/i18n": minor
+"@rocket.chat/ui-voip": minor
+---
+
+Adds call transfer requester information on call widget

packages/i18n/src/locales/en.i18n.json

@@ -5281,6 +5281,10 @@
   "Transfer_call": "Transfer call",
   "Transfer_to": "Transfer to",
   "Transferred": "Transferred",
+  "Transferred_call__from__to": "{{from}} transferred call to",
+  "Transferring_call": "Transferring call",
+  "Transferring_call_incoming": "Incoming call transfer",
+  "Transferring_call_incoming__from_": "From {{from}}",
   "Translate": "Translate",
   "Translate_to": "Translate to",
   "Translated": "Translated",

packages/ui-voip/src/v2/MediaCallContext.ts

@@ -28,11 +28,13 @@ type MediaCallContextType = {
 	connectionState: ConnectionState;
 
 	peerInfo: PeerInfo | undefined;
+	transferredBy: string | undefined;
 
 	hidden: boolean;
 
 	muted: boolean;
 	held: boolean;
+
 	onMute: () => void;
 	onHold: () => void;
 
@@ -59,6 +61,7 @@ export const defaultMediaCallContextValue: MediaCallContextType = {
 	connectionState: 'CONNECTED',
 
 	peerInfo: undefined,
+	transferredBy: undefined,
 
 	hidden: false,
 

packages/ui-voip/src/v2/MediaCallProvider.tsx

@@ -227,6 +227,7 @@ const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
 		muted: session.muted,
 		held: session.held,
 		peerInfo: session.peerInfo,
+		transferredBy: session.transferredBy,
 		hidden: session.hidden,
 		onMute,
 		onHold,

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

@@ -63,9 +63,23 @@ export const IncomingCall: Story = {
 	},
 };
 
-export const Calling: Story = {
+export const IncomingCallTransfer: Story = {
+	args: {
+		state: 'ringing',
+		transferredBy: 'Jason',
+	},
+};
+
+export const OutgoingCall: Story = {
+	args: {
+		state: 'calling',
+	},
+};
+
+export const OutgoingCallTransfer: Story = {
 	args: {
 		state: 'calling',
+		transferredBy: 'Joy',
 	},
 };
 

packages/ui-voip/src/v2/MediaCallWidget.tsx

@@ -1,8 +1,8 @@
 import { useMediaCallContext } from './MediaCallContext';
-import { OngoingCall, NewCall, IncomingCall, OutgoingCall } from './views';
+import { OngoingCall, NewCall, IncomingCall, OutgoingCall, IncomingCallTransfer, OutgoingCallTransfer } from './views';
 
 const MediaCallWidget = () => {
-	const { state, hidden } = useMediaCallContext();
+	const { state, hidden, transferredBy } = useMediaCallContext();
 
 	if (hidden) {
 		return null;
@@ -14,8 +14,14 @@ const MediaCallWidget = () => {
 		case 'new':
 			return <NewCall />;
 		case 'ringing':
+			if (transferredBy) {
+				return <IncomingCallTransfer />;
+			}
 			return <IncomingCall />;
 		case 'calling':
+			if (transferredBy) {
+				return <OutgoingCallTransfer />;
+			}
 			return <OutgoingCall />;
 		case 'closed':
 		default:

packages/ui-voip/src/v2/MockedMediaCallProvider.tsx

@@ -6,7 +6,15 @@ import type { State, PeerInfo } from './MediaCallContext';
 const avatarUrl = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z`;
 const myData: any[] = Array.from({ length: 100 }, (_, i) => ({ value: `user-${i}`, label: `User ${i}`, identifier: `000${i}`, avatarUrl }));
 
-const MediaCallProviderMock = ({ children, state = 'closed' }: { children: React.ReactNode; state?: State }) => {
+const MediaCallProviderMock = ({
+	children,
+	state = 'closed',
+	transferredBy = undefined,
+}: {
+	children: React.ReactNode;
+	state?: State;
+	transferredBy?: string;
+}) => {
 	const [peerInfo, setPeerInfo] = useState<PeerInfo | undefined>({
 		displayName: 'John Doe',
 		userId: '1234567890',
@@ -107,6 +115,7 @@ const MediaCallProviderMock = ({ children, state = 'closed' }: { children: React
 		hidden: false,
 		connectionState: 'CONNECTED' as const,
 		peerInfo,
+		transferredBy,
 		muted,
 		held,
 		onMute,