Chore: Remove Imperative Modal from context (#25911)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code. 
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
This PR revises the usage of the modal inside the call provider, by moving the modal provider a little bit up the three.

apps/meteor/client/components/voip/modal/WrapUpCallModal.tsx

@@ -3,17 +3,19 @@ import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useEffect } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 
-import { useCallCloseRoom } from '../../../contexts/CallContext';
 import Tags from '../../Omnichannel/Tags';
 
 type WrapUpCallPayload = {
 	comment: string;
 	tags?: string[];
 };
 
-export const WrapUpCallModal = (): ReactElement => {
+type WrapUpCallModalProps = {
+	closeRoom: (data?: { comment?: string; tags?: string[] }) => void;
+};
+
+export const WrapUpCallModal = ({ closeRoom }: WrapUpCallModalProps): ReactElement => {
 	const setModal = useSetModal();
-	const closeRoom = useCallCloseRoom();
 
 	const closeModal = (): void => setModal(null);
 	const t = useTranslation();

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

@@ -12,7 +12,7 @@ import {
 	isVoipEventCallAbandoned,
 } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useUser, useSetting, useEndpoint, useStream } from '@rocket.chat/ui-contexts';
+import { useRoute, useUser, useSetting, useEndpoint, useStream, useSetModal } 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';
@@ -21,8 +21,7 @@ import { OutgoingByeRequest } from 'sip.js/lib/core';
 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 { CallContext, CallContextValue, useCallCloseRoom } from '../../contexts/CallContext';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { QueueAggregator } from '../../lib/voip/QueueAggregator';
 import { useVoipClient } from './hooks/useVoipClient';
@@ -45,6 +44,7 @@ export const CallProvider: FC = ({ children }) => {
 	const voipEnabled = useSetting('VoIP_Enabled');
 	const subscribeToNotifyUser = useStream('notify-user');
 	const dispatchEvent = useEndpoint('POST', '/v1/voip/events');
+	const setModal = useSetModal();
 
 	const result = useVoipClient();
 	const user = useUser();
@@ -56,8 +56,8 @@ export const CallProvider: FC = ({ children }) => {
 	const [queueName, setQueueName] = useState('');
 
 	const openWrapUpModal = useCallback((): void => {
-		imperativeModal.open({ component: WrapUpCallModal });
-	}, []);
+		setModal(() => <WrapUpCallModal closeRoom={useCallCloseRoom} />);
+	}, [setModal]);
 
 	const [queueAggregator, setQueueAggregator] = useState<QueueAggregator>();
 

apps/meteor/client/providers/MeteorProvider.tsx

@@ -32,13 +32,13 @@ const MeteorProvider: FC = ({ children }) => (
 											<CustomSoundProvider>
 												<UserProvider>
 													<AuthorizationProvider>
-														<CallProvider>
-															<OmnichannelProvider>
-																<ModalProvider>
+														<ModalProvider>
+															<CallProvider>
+																<OmnichannelProvider>
 																	<AttachmentProvider>{children}</AttachmentProvider>
-																</ModalProvider>
-															</OmnichannelProvider>
-														</CallProvider>
+																</OmnichannelProvider>
+															</CallProvider>
+														</ModalProvider>
 													</AuthorizationProvider>
 												</UserProvider>
 											</CustomSoundProvider>