Update call link edit/add name modals

ts/state/ducks/globalModals.ts

@@ -91,6 +91,7 @@ type MigrateToGV2PropsType = ReadonlyDeep<{
 export type GlobalModalsStateType = ReadonlyDeep<{
   addUserToAnotherGroupModalContactId?: string;
   aboutContactModalContactId?: string;
+  callLinkAddNameModalRoomId: string | null;
   callLinkEditModalRoomId: string | null;
   contactModalState?: ContactModalStateType;
   deleteMessagesProps?: DeleteMessagesPropsType;
@@ -143,6 +144,8 @@ export const TOGGLE_PROFILE_EDITOR_ERROR =
 const TOGGLE_SAFETY_NUMBER_MODAL = 'globalModals/TOGGLE_SAFETY_NUMBER_MODAL';
 const TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL =
   'globalModals/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_ABOUT_MODAL = 'globalModals/TOGGLE_ABOUT_MODAL';
 const TOGGLE_SIGNAL_CONNECTIONS_MODAL =
@@ -244,6 +247,11 @@ type ToggleAddUserToAnotherGroupModalActionType = ReadonlyDeep<{
   payload: string | undefined;
 }>;
 
+type ToggleCallLinkAddNameModalActionType = ReadonlyDeep<{
+  type: typeof TOGGLE_CALL_LINK_ADD_NAME_MODAL;
+  payload: string | null;
+}>;
+
 type ToggleCallLinkEditModalActionType = ReadonlyDeep<{
   type: typeof TOGGLE_CALL_LINK_EDIT_MODAL;
   payload: string | null;
@@ -374,6 +382,7 @@ export type GlobalModalsActionType = ReadonlyDeep<
   | StartMigrationToGV2ActionType
   | ToggleAboutContactModalActionType
   | ToggleAddUserToAnotherGroupModalActionType
+  | ToggleCallLinkAddNameModalActionType
   | ToggleCallLinkEditModalActionType
   | ToggleConfirmationModalActionType
   | ToggleDeleteMessagesModalActionType
@@ -414,6 +423,7 @@ export const actions = {
   showWhatsNewModal,
   toggleAboutContactModal,
   toggleAddUserToAnotherGroupModal,
+  toggleCallLinkAddNameModal,
   toggleCallLinkEditModal,
   toggleConfirmationModal,
   toggleDeleteMessagesModal,
@@ -711,6 +721,15 @@ function toggleAddUserToAnotherGroupModal(
   };
 }
 
+function toggleCallLinkAddNameModal(
+  roomId: string | null
+): ToggleCallLinkAddNameModalActionType {
+  return {
+    type: TOGGLE_CALL_LINK_ADD_NAME_MODAL,
+    payload: roomId,
+  };
+}
+
 function toggleCallLinkEditModal(
   roomId: string | null
 ): ToggleCallLinkEditModalActionType {
@@ -935,6 +954,7 @@ function copyOverMessageAttributesIntoForwardMessages(
 export function getEmptyState(): GlobalModalsStateType {
   return {
     hasConfirmationModal: false,
+    callLinkAddNameModalRoomId: null,
     callLinkEditModalRoomId: null,
     editNicknameAndNoteModalProps: null,
     isProfileEditorVisible: false,
@@ -1049,6 +1069,13 @@ export function reducer(
     };
   }
 
+  if (action.type === TOGGLE_CALL_LINK_ADD_NAME_MODAL) {
+    return {
+      ...state,
+      callLinkAddNameModalRoomId: action.payload,
+    };
+  }
+
   if (action.type === TOGGLE_CALL_LINK_EDIT_MODAL) {
     return {
       ...state,

ts/state/selectors/globalModals.ts

@@ -27,6 +27,11 @@ export const getCallLinkEditModalRoomId = createSelector(
   ({ callLinkEditModalRoomId }) => callLinkEditModalRoomId
 );
 
+export const getCallLinkAddNameModalRoomId = createSelector(
+  getGlobalModalsState,
+  ({ callLinkAddNameModalRoomId }) => callLinkAddNameModalRoomId
+);
+
 export const getContactModalState = createSelector(
   getGlobalModalsState,
   ({ contactModalState }) => contactModalState

ts/state/smart/CallLinkAddNameModal.tsx

@@ -0,0 +1,60 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+import React, { memo, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useCallingActions } from '../ducks/calling';
+import { getCallLinkSelector } from '../selectors/calling';
+import * as log from '../../logging/log';
+import { getIntl } from '../selectors/user';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { getCallLinkAddNameModalRoomId } from '../selectors/globalModals';
+import { strictAssert } from '../../util/assert';
+import { isCallLinksCreateEnabled } from '../../util/callLinks';
+import { CallLinkAddNameModal } from '../../components/CallLinkAddNameModal';
+
+export const SmartCallLinkAddNameModal = memo(
+  function SmartCallLinkAddNameModal(): JSX.Element | null {
+    strictAssert(isCallLinksCreateEnabled(), 'Call links creation is disabled');
+
+    const roomId = useSelector(getCallLinkAddNameModalRoomId);
+    strictAssert(roomId, 'Expected roomId to be set');
+
+    const i18n = useSelector(getIntl);
+    const callLinkSelector = useSelector(getCallLinkSelector);
+
+    const { updateCallLinkName } = useCallingActions();
+    const { toggleCallLinkAddNameModal } = useGlobalModalActions();
+
+    const callLink = useMemo(() => {
+      return callLinkSelector(roomId);
+    }, [callLinkSelector, roomId]);
+
+    const handleClose = useCallback(() => {
+      toggleCallLinkAddNameModal(null);
+    }, [toggleCallLinkAddNameModal]);
+
+    const handleUpdateCallLinkName = useCallback(
+      (newName: string) => {
+        updateCallLinkName(roomId, newName);
+      },
+      [roomId, updateCallLinkName]
+    );
+
+    if (!callLink) {
+      log.error(
+        'SmartCallLinkEditModal: No call link found for roomId',
+        roomId
+      );
+      return null;
+    }
+
+    return (
+      <CallLinkAddNameModal
+        i18n={i18n}
+        callLink={callLink}
+        onClose={handleClose}
+        onUpdateCallLinkName={handleUpdateCallLinkName}
+      />
+    );
+  }
+);

ts/state/smart/CallLinkEditModal.tsx

@@ -26,13 +26,13 @@ export const SmartCallLinkEditModal = memo(
     const i18n = useSelector(getIntl);
     const callLinkSelector = useSelector(getCallLinkSelector);
 
+    const { updateCallLinkRestrictions, startCallLinkLobby } =
+      useCallingActions();
     const {
-      updateCallLinkName,
-      updateCallLinkRestrictions,
-      startCallLinkLobby,
-    } = useCallingActions();
-    const { toggleCallLinkEditModal, showShareCallLinkViaSignal } =
-      useGlobalModalActions();
+      toggleCallLinkAddNameModal,
+      toggleCallLinkEditModal,
+      showShareCallLinkViaSignal,
+    } = useGlobalModalActions();
 
     const callLink = useMemo(() => {
       return callLinkSelector(roomId);
@@ -52,12 +52,9 @@ export const SmartCallLinkEditModal = memo(
       drop(copyCallLink(callLinkWebUrl));
     }, [callLink]);
 
-    const handleUpdateCallLinkName = useCallback(
-      (newName: string) => {
-        updateCallLinkName(roomId, newName);
-      },
-      [roomId, updateCallLinkName]
-    );
+    const handleOpenCallLinkAddNameModal = useCallback(() => {
+      toggleCallLinkAddNameModal(roomId);
+    }, [roomId, toggleCallLinkAddNameModal]);
 
     const handleUpdateCallLinkRestrictions = useCallback(
       (newRestrictions: CallLinkRestrictions) => {
@@ -91,7 +88,7 @@ export const SmartCallLinkEditModal = memo(
         callLink={callLink}
         onClose={handleClose}
         onCopyCallLink={handleCopyCallLink}
-        onUpdateCallLinkName={handleUpdateCallLinkName}
+        onOpenCallLinkAddNameModal={handleOpenCallLinkAddNameModal}
         onUpdateCallLinkRestrictions={handleUpdateCallLinkRestrictions}
         onShareCallLinkViaSignal={handleShareCallLinkViaSignal}
         onStartCallLinkLobby={handleStartCallLinkLobby}

ts/state/smart/GlobalModalContainer.tsx

@@ -27,6 +27,11 @@ import { getGlobalModalsState } from '../selectors/globalModals';
 import { SmartEditNicknameAndNoteModal } from './EditNicknameAndNoteModal';
 import { SmartNotePreviewModal } from './NotePreviewModal';
 import { SmartCallLinkEditModal } from './CallLinkEditModal';
+import { SmartCallLinkAddNameModal } from './CallLinkAddNameModal';
+
+function renderCallLinkAddNameModal(): JSX.Element {
+  return <SmartCallLinkAddNameModal />;
+}
 
 function renderCallLinkEditModal(): JSX.Element {
   return <SmartCallLinkEditModal />;
@@ -95,6 +100,7 @@ export const SmartGlobalModalContainer = memo(
     const {
       aboutContactModalContactId,
       addUserToAnotherGroupModalContactId,
+      callLinkAddNameModalRoomId,
       callLinkEditModalRoomId,
       contactModalState,
       deleteMessagesProps,
@@ -174,6 +180,7 @@ export const SmartGlobalModalContainer = memo(
         addUserToAnotherGroupModalContactId={
           addUserToAnotherGroupModalContactId
         }
+        callLinkAddNameModalRoomId={callLinkAddNameModalRoomId}
         callLinkEditModalRoomId={callLinkEditModalRoomId}
         contactModalState={contactModalState}
         editHistoryMessages={editHistoryMessages}
@@ -197,6 +204,7 @@ export const SmartGlobalModalContainer = memo(
         isWhatsNewVisible={isWhatsNewVisible}
         renderAboutContactModal={renderAboutContactModal}
         renderAddUserToAnotherGroup={renderAddUserToAnotherGroup}
+        renderCallLinkAddNameModal={renderCallLinkAddNameModal}
         renderCallLinkEditModal={renderCallLinkEditModal}
         renderContactModal={renderContactModal}
         renderEditHistoryMessagesModal={renderEditHistoryMessagesModal}