Allow joining a call when already in a call, confirming first

ts/state/smart/CallsTab.tsx

@@ -172,7 +172,8 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
     markCallHistoryRead,
     markCallsTabViewed,
   } = useCallHistoryActions();
-  const { toggleCallLinkEditModal } = useGlobalModalActions();
+  const { toggleCallLinkEditModal, toggleConfirmLeaveCallModal } =
+    useGlobalModalActions();
 
   const getCallHistoryGroupsCount = useCallback(
     async (options: CallHistoryFilterOptions) => {
@@ -257,6 +258,7 @@ export const SmartCallsTab = memo(function SmartCallsTab() {
       regionCode={regionCode}
       savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
       startCallLinkLobbyByRoomId={startCallLinkLobbyByRoomId}
+      toggleConfirmLeaveCallModal={toggleConfirmLeaveCallModal}
       togglePip={togglePip}
     />
   );

ts/state/smart/ConfirmLeaveCallModal.tsx

@@ -0,0 +1,37 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { useCallingActions } from '../ducks/calling';
+import { getIntl } from '../selectors/user';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { getConfirmLeaveCallModalState } from '../selectors/globalModals';
+import { ConfirmLeaveCallModal } from '../../components/ConfirmLeaveCallModal';
+
+export const SmartConfirmLeaveCallModal = memo(
+  function SmartConfirmLeaveCallModal(): JSX.Element | null {
+    const i18n = useSelector(getIntl);
+    const confirmLeaveCallModalState = useSelector(
+      getConfirmLeaveCallModalState
+    );
+
+    const { leaveCurrentCallAndStartCallingLobby } = useCallingActions();
+    const { toggleConfirmLeaveCallModal } = useGlobalModalActions();
+
+    if (!confirmLeaveCallModalState) {
+      return null;
+    }
+
+    return (
+      <ConfirmLeaveCallModal
+        i18n={i18n}
+        data={confirmLeaveCallModalState}
+        leaveCurrentCallAndStartCallingLobby={
+          leaveCurrentCallAndStartCallingLobby
+        }
+        toggleConfirmLeaveCallModal={toggleConfirmLeaveCallModal}
+      />
+    );
+  }
+);

ts/state/smart/GlobalModalContainer.tsx

@@ -28,6 +28,7 @@ import { SmartEditNicknameAndNoteModal } from './EditNicknameAndNoteModal';
 import { SmartNotePreviewModal } from './NotePreviewModal';
 import { SmartCallLinkEditModal } from './CallLinkEditModal';
 import { SmartCallLinkAddNameModal } from './CallLinkAddNameModal';
+import { SmartConfirmLeaveCallModal } from './ConfirmLeaveCallModal';
 
 function renderCallLinkAddNameModal(): JSX.Element {
   return <SmartCallLinkAddNameModal />;
@@ -37,6 +38,10 @@ function renderCallLinkEditModal(): JSX.Element {
   return <SmartCallLinkEditModal />;
 }
 
+function renderConfirmLeaveCallModal(): JSX.Element {
+  return <SmartConfirmLeaveCallModal />;
+}
+
 function renderEditHistoryMessagesModal(): JSX.Element {
   return <SmartEditHistoryMessagesModal />;
 }
@@ -102,6 +107,7 @@ export const SmartGlobalModalContainer = memo(
       addUserToAnotherGroupModalContactId,
       callLinkAddNameModalRoomId,
       callLinkEditModalRoomId,
+      confirmLeaveCallModalState,
       contactModalState,
       deleteMessagesProps,
       editHistoryMessages,
@@ -182,6 +188,7 @@ export const SmartGlobalModalContainer = memo(
         }
         callLinkAddNameModalRoomId={callLinkAddNameModalRoomId}
         callLinkEditModalRoomId={callLinkEditModalRoomId}
+        confirmLeaveCallModalState={confirmLeaveCallModalState}
         contactModalState={contactModalState}
         editHistoryMessages={editHistoryMessages}
         editNicknameAndNoteModalProps={editNicknameAndNoteModalProps}
@@ -206,6 +213,7 @@ export const SmartGlobalModalContainer = memo(
         renderAddUserToAnotherGroup={renderAddUserToAnotherGroup}
         renderCallLinkAddNameModal={renderCallLinkAddNameModal}
         renderCallLinkEditModal={renderCallLinkEditModal}
+        renderConfirmLeaveCallModal={renderConfirmLeaveCallModal}
         renderContactModal={renderContactModal}
         renderEditHistoryMessagesModal={renderEditHistoryMessagesModal}
         renderEditNicknameAndNoteModal={renderEditNicknameAndNoteModal}