Regression: VoIp wrap up modal not opening after call disconnect (#25651)

apps/meteor/client/components/Omnichannel/Tags.tsx

@@ -10,7 +10,7 @@ import { formsSubscription } from '../../views/omnichannel/additionalForms';
 import { FormSkeleton } from './Skeleton';
 
 const Tags = ({
-	tags,
+	tags = [],
 	handler,
 	error,
 	tagRequired,

apps/meteor/client/providers/CallProvider/CallProvider.tsx

-import type { IVoipRoom, IUser, VoipEventDataSignature } from '@rocket.chat/core-typings';
 import {
+	IVoipRoom,
+	IUser,
+	VoipEventDataSignature,
+	VoipClientEvents,
 	ICallerInfo,
 	isVoipEventAgentCalled,
 	isVoipEventAgentConnected,
@@ -9,7 +12,7 @@ import {
 	isVoipEventCallAbandoned,
 } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetModal, useRoute, useUser, useSetting, useEndpoint, useStream } from '@rocket.chat/ui-contexts';
+import { useRoute, useUser, useSetting, useEndpoint, useStream } from '@rocket.chat/ui-contexts';
 import { Random } from 'meteor/random';
 import React, { useMemo, FC, useRef, useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -19,6 +22,7 @@ import { CustomSounds } from '../../../app/custom-sounds/client';
 import { getUserPreference } from '../../../app/utils/client';
 import { WrapUpCallModal } from '../../components/voip/modal/WrapUpCallModal';
 import { CallContext, CallContextValue } from '../../contexts/CallContext';
+import { imperativeModal } from '../../lib/imperativeModal';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { QueueAggregator } from '../../lib/voip/QueueAggregator';
 import { useVoipClient } from './hooks/useVoipClient';
@@ -40,6 +44,7 @@ type NetworkState = 'online' | 'offline';
 export const CallProvider: FC = ({ children }) => {
 	const voipEnabled = useSetting('VoIP_Enabled');
 	const subscribeToNotifyUser = useStream('notify-user');
+	const dispatchEvent = useEndpoint('POST', 'voip/events');
 
 	const result = useVoipClient();
 	const user = useUser();
@@ -50,11 +55,9 @@ export const CallProvider: FC = ({ children }) => {
 	const [queueCounter, setQueueCounter] = useState(0);
 	const [queueName, setQueueName] = useState('');
 
-	const setModal = useSetModal();
-
 	const openWrapUpModal = useCallback((): void => {
-		setModal(<WrapUpCallModal />);
-	}, [setModal]);
+		imperativeModal.open({ component: WrapUpCallModal });
+	}, []);
 
 	const [queueAggregator, setQueueAggregator] = useState<QueueAggregator>();
 
@@ -129,10 +132,11 @@ export const CallProvider: FC = ({ children }) => {
 		const handleCallHangup = (_event: { roomId: string }): void => {
 			setQueueName(queueAggregator.getCurrentQueueName());
 			openWrapUpModal();
+			dispatchEvent({ event: VoipClientEvents['VOIP-CALL-ENDED'], rid: _event.roomId });
 		};
 
 		return subscribeToNotifyUser(`${user._id}/call.hangup`, handleCallHangup);
-	}, [openWrapUpModal, queueAggregator, subscribeToNotifyUser, user, voipEnabled]);
+	}, [openWrapUpModal, queueAggregator, subscribeToNotifyUser, user, voipEnabled, dispatchEvent]);
 
 	useEffect(() => {
 		if (!result.voipClient) {

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

@@ -49,7 +49,6 @@ export const IncomingCall = (): ReactElement => {
 				createRoom={() => ''}
 				openRoom={() => ''}
 				callsInQueue='2 Calls In Queue'
-				openWrapUpCallModal={() => null}
 				dispatchEvent={() => null}
 				openedRoomInfo={{ v: { token: '' }, rid: '' }}
 				anonymousText={'Anonymous'}
@@ -88,7 +87,6 @@ export const InCall = (): ReactElement => {
 				createRoom={() => ''}
 				openRoom={() => ''}
 				callsInQueue='2 Calls In Queue'
-				openWrapUpCallModal={() => null}
 				dispatchEvent={() => null}
 				openedRoomInfo={{ v: { token: '' }, rid: '' }}
 				anonymousText={'Anonymous'}

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

@@ -24,7 +24,6 @@ type VoipFooterPropsType = {
 	};
 	callsInQueue: string;
 
-	openWrapUpCallModal: () => void;
 	createRoom: (caller: ICallerInfo) => IVoipRoom['_id'];
 	openRoom: (rid: IVoipRoom['_id']) => void;
 	dispatchEvent: (params: { event: VoipClientEvents; rid: string; comment?: string }) => void;
@@ -46,7 +45,6 @@ export const VoipFooter = ({
 	createRoom,
 	openRoom,
 	callsInQueue,
-	openWrapUpCallModal,
 	dispatchEvent,
 	openedRoomInfo,
 	anonymousText,
@@ -137,9 +135,6 @@ export const VoipFooter = ({
 									e.stopPropagation();
 									toggleMic(false);
 									togglePause(false);
-									openWrapUpCallModal();
-									dispatchEvent({ event: VoipClientEvents['VOIP-CALL-ENDED'], rid: openedRoomInfo.rid });
-
 									return callActions.end();
 								}}
 							>

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

@@ -9,7 +9,6 @@ import {
 	useOpenedRoomInfo,
 	useQueueCounter,
 	useQueueName,
-	useWrapUpModal,
 } from '../../../contexts/CallContext';
 import { VoipFooter as VoipFooterComponent } from './VoipFooter';
 
@@ -23,7 +22,6 @@ export const VoipFooter = (): ReactElement | null => {
 	const openRoom = useCallOpenRoom();
 	const queueCounter = useQueueCounter();
 	const queueName = useQueueName();
-	const openWrapUpCallModal = useWrapUpModal();
 	const openedRoomInfo = useOpenedRoomInfo();
 
 	const [muted, setMuted] = useState(false);
@@ -97,7 +95,6 @@ export const VoipFooter = (): ReactElement | null => {
 			createRoom={createRoom}
 			openRoom={openRoom}
 			callsInQueue={getCallsInQueueText}
-			openWrapUpCallModal={openWrapUpCallModal}
 			dispatchEvent={dispatchEvent}
 			openedRoomInfo={openedRoomInfo}
 			anonymousText={t('Anonymous')}