Contact info modal for call link join requests

ts/state/ducks/globalModals.ts

@@ -94,6 +94,7 @@ export type GlobalModalsStateType = ReadonlyDeep<{
   aboutContactModalContactId?: string;
   callLinkAddNameModalRoomId: string | null;
   callLinkEditModalRoomId: string | null;
+  callLinkPendingParticipantContactId: string | undefined;
   confirmLeaveCallModalState: StartCallData | null;
   contactModalState?: ContactModalStateType;
   deleteMessagesProps?: DeleteMessagesPropsType;
@@ -149,6 +150,8 @@ const TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL =
 const TOGGLE_CALL_LINK_ADD_NAME_MODAL =
   'globalModals/TOGGLE_CALL_LINK_ADD_NAME_MODAL';
 const TOGGLE_CALL_LINK_EDIT_MODAL = 'globalModals/TOGGLE_CALL_LINK_EDIT_MODAL';
+const TOGGLE_CALL_LINK_PENDING_PARTICIPANT_MODAL =
+  'globalModals/TOGGLE_CALL_LINK_PENDING_PARTICIPANT_MODAL';
 const TOGGLE_ABOUT_MODAL = 'globalModals/TOGGLE_ABOUT_MODAL';
 const TOGGLE_SIGNAL_CONNECTIONS_MODAL =
   'globalModals/TOGGLE_SIGNAL_CONNECTIONS_MODAL';
@@ -266,6 +269,11 @@ type ToggleCallLinkEditModalActionType = ReadonlyDeep<{
   payload: string | null;
 }>;
 
+type ToggleCallLinkPendingParticipantModalActionType = ReadonlyDeep<{
+  type: typeof TOGGLE_CALL_LINK_PENDING_PARTICIPANT_MODAL;
+  payload: string | undefined;
+}>;
+
 type ToggleAboutContactModalActionType = ReadonlyDeep<{
   type: typeof TOGGLE_ABOUT_MODAL;
   payload: string | undefined;
@@ -393,6 +401,7 @@ export type GlobalModalsActionType = ReadonlyDeep<
   | ToggleAddUserToAnotherGroupModalActionType
   | ToggleCallLinkAddNameModalActionType
   | ToggleCallLinkEditModalActionType
+  | ToggleCallLinkPendingParticipantModalActionType
   | ToggleConfirmationModalActionType
   | ToggleConfirmLeaveCallModalActionType
   | ToggleDeleteMessagesModalActionType
@@ -435,6 +444,7 @@ export const actions = {
   toggleAddUserToAnotherGroupModal,
   toggleCallLinkAddNameModal,
   toggleCallLinkEditModal,
+  toggleCallLinkPendingParticipantModal,
   toggleConfirmationModal,
   toggleConfirmLeaveCallModal,
   toggleDeleteMessagesModal,
@@ -757,6 +767,15 @@ function toggleCallLinkEditModal(
   };
 }
 
+function toggleCallLinkPendingParticipantModal(
+  contactId?: string
+): ToggleCallLinkPendingParticipantModalActionType {
+  return {
+    type: TOGGLE_CALL_LINK_PENDING_PARTICIPANT_MODAL,
+    payload: contactId,
+  };
+}
+
 function toggleAboutContactModal(
   contactId?: string
 ): ToggleAboutContactModalActionType {
@@ -974,6 +993,7 @@ export function getEmptyState(): GlobalModalsStateType {
     hasConfirmationModal: false,
     callLinkAddNameModalRoomId: null,
     callLinkEditModalRoomId: null,
+    callLinkPendingParticipantContactId: undefined,
     confirmLeaveCallModalState: null,
     editNicknameAndNoteModalProps: null,
     isProfileEditorVisible: false,
@@ -1109,6 +1129,13 @@ export function reducer(
     };
   }
 
+  if (action.type === TOGGLE_CALL_LINK_PENDING_PARTICIPANT_MODAL) {
+    return {
+      ...state,
+      callLinkPendingParticipantContactId: action.payload,
+    };
+  }
+
   if (action.type === TOGGLE_DELETE_MESSAGES_MODAL) {
     return {
       ...state,

ts/state/selectors/globalModals.ts

@@ -32,6 +32,12 @@ export const getCallLinkAddNameModalRoomId = createSelector(
   ({ callLinkAddNameModalRoomId }) => callLinkAddNameModalRoomId
 );
 
+export const getCallLinkPendingParticipantContactId = createSelector(
+  getGlobalModalsState,
+  ({ callLinkPendingParticipantContactId }) =>
+    callLinkPendingParticipantContactId
+);
+
 export const getConfirmLeaveCallModalState = createSelector(
   getGlobalModalsState,
   ({ confirmLeaveCallModalState }) => confirmLeaveCallModalState

ts/state/smart/CallLinkPendingParticipantModal.tsx

@@ -0,0 +1,41 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+import React, { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { CallLinkPendingParticipantModal } from '../../components/CallLinkPendingParticipantModal';
+import { useCallingActions } from '../ducks/calling';
+import { getIntl } from '../selectors/user';
+import { useConversationsActions } from '../ducks/conversations';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { getConversationSelector } from '../selectors/conversations';
+import { getCallLinkPendingParticipantContactId } from '../selectors/globalModals';
+import { strictAssert } from '../../util/assert';
+
+export const SmartCallLinkPendingParticipantModal = memo(
+  function SmartCallLinkPendingParticipantModal(): JSX.Element | null {
+    const contactId = useSelector(getCallLinkPendingParticipantContactId);
+    strictAssert(contactId, 'Expected contactId to be set');
+
+    const i18n = useSelector(getIntl);
+    const getConversation = useSelector(getConversationSelector);
+
+    const { updateSharedGroups } = useConversationsActions();
+    const { approveUser, denyUser } = useCallingActions();
+    const { toggleAboutContactModal, toggleCallLinkPendingParticipantModal } =
+      useGlobalModalActions();
+
+    const conversation = getConversation(contactId);
+
+    return (
+      <CallLinkPendingParticipantModal
+        i18n={i18n}
+        conversation={conversation}
+        approveUser={approveUser}
+        denyUser={denyUser}
+        onClose={toggleCallLinkPendingParticipantModal}
+        updateSharedGroups={updateSharedGroups}
+        toggleAboutContactModal={toggleAboutContactModal}
+      />
+    );
+  }
+);

ts/state/smart/CallManager.tsx

@@ -458,8 +458,11 @@ export const SmartCallManager = memo(function SmartCallManager() {
     toggleSettings,
   } = useCallingActions();
   const { pauseVoiceNotePlayer } = useAudioPlayerActions();
-  const { showContactModal, showShareCallLinkViaSignal } =
-    useGlobalModalActions();
+  const {
+    showContactModal,
+    showShareCallLinkViaSignal,
+    toggleCallLinkPendingParticipantModal,
+  } = useGlobalModalActions();
 
   return (
     <CallManager
@@ -513,6 +516,9 @@ export const SmartCallManager = memo(function SmartCallManager() {
       stopRingtone={stopRingtone}
       switchFromPresentationView={switchFromPresentationView}
       switchToPresentationView={switchToPresentationView}
+      toggleCallLinkPendingParticipantModal={
+        toggleCallLinkPendingParticipantModal
+      }
       toggleParticipants={toggleParticipants}
       togglePip={togglePip}
       toggleScreenRecordingPermissionsDialog={

ts/state/smart/GlobalModalContainer.tsx

@@ -29,6 +29,7 @@ import { SmartNotePreviewModal } from './NotePreviewModal';
 import { SmartCallLinkEditModal } from './CallLinkEditModal';
 import { SmartCallLinkAddNameModal } from './CallLinkAddNameModal';
 import { SmartConfirmLeaveCallModal } from './ConfirmLeaveCallModal';
+import { SmartCallLinkPendingParticipantModal } from './CallLinkPendingParticipantModal';
 
 function renderCallLinkAddNameModal(): JSX.Element {
   return <SmartCallLinkAddNameModal />;
@@ -38,6 +39,10 @@ function renderCallLinkEditModal(): JSX.Element {
   return <SmartCallLinkEditModal />;
 }
 
+function renderCallLinkPendingParticipantModal(): JSX.Element {
+  return <SmartCallLinkPendingParticipantModal />;
+}
+
 function renderConfirmLeaveCallModal(): JSX.Element {
   return <SmartConfirmLeaveCallModal />;
 }
@@ -107,6 +112,7 @@ export const SmartGlobalModalContainer = memo(
       addUserToAnotherGroupModalContactId,
       callLinkAddNameModalRoomId,
       callLinkEditModalRoomId,
+      callLinkPendingParticipantContactId,
       confirmLeaveCallModalState,
       contactModalState,
       deleteMessagesProps,
@@ -188,6 +194,9 @@ export const SmartGlobalModalContainer = memo(
         }
         callLinkAddNameModalRoomId={callLinkAddNameModalRoomId}
         callLinkEditModalRoomId={callLinkEditModalRoomId}
+        callLinkPendingParticipantContactId={
+          callLinkPendingParticipantContactId
+        }
         confirmLeaveCallModalState={confirmLeaveCallModalState}
         contactModalState={contactModalState}
         editHistoryMessages={editHistoryMessages}
@@ -213,6 +222,9 @@ export const SmartGlobalModalContainer = memo(
         renderAddUserToAnotherGroup={renderAddUserToAnotherGroup}
         renderCallLinkAddNameModal={renderCallLinkAddNameModal}
         renderCallLinkEditModal={renderCallLinkEditModal}
+        renderCallLinkPendingParticipantModal={
+          renderCallLinkPendingParticipantModal
+        }
         renderConfirmLeaveCallModal={renderConfirmLeaveCallModal}
         renderContactModal={renderContactModal}
         renderEditHistoryMessagesModal={renderEditHistoryMessagesModal}