Add modal on mobile for RTT (#5790)

* Modal on phone

* Change files

* update test

* Change files

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* udpate lint

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-6495dc09-518b-4d3f-bf96-16d39eb79847.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Add RTT modal when starting RTT on mobile",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-c7158996-49fa-4fe3-9af7-ec3a60e85a0b.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Add RTT modal when starting RTT on mobile",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx

@@ -52,6 +52,8 @@ import {
   getLocalUserId,
   getIsTeamsCall
 } from '../../CallComposite/selectors/baseSelectors';
+/* @conditional-compile-remove(rtt) */
+import { CallingRealTimeTextModal } from '../CallingRealTimeTextModal';
 
 /** @private */
 export interface MoreDrawerStrings {
@@ -204,6 +206,16 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
   const participants = useSelector(getRemoteParticipantsConnectedSelector);
   const allowDtmfDialer = showDtmfDialer(callees, participants, props.dtmfDialerOptions);
   const [dtmfDialerChecked, setDtmfDialerChecked] = useState<boolean>(props.dtmfDialerPresent ?? false);
+  /* @conditional-compile-remove(rtt) */
+  const [showRealTimeTextModal, setShowRealTimeTextModal] = useState(false);
+  /* @conditional-compile-remove(rtt) */
+  const openRealTimeTextModal = useCallback((): void => {
+    setShowRealTimeTextModal(true);
+  }, []);
+  /* @conditional-compile-remove(rtt) */
+  const onDismissRealTimeTextModal = useCallback((): void => {
+    setShowRealTimeTextModal(false);
+  }, []);
 
   const raiseHandButtonProps = usePropsFor(RaiseHandButton) as RaiseHandButtonProps;
   /* @conditional-compile-remove(together-mode) */
@@ -654,7 +666,7 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
         iconName: 'RealTimeTextIcon',
         styles: { root: { lineHeight: 0 } }
       },
-      onItemClick: props.onStartRealTimeText,
+      onItemClick: openRealTimeTextModal,
       disabled: rttDisabled,
       secondaryComponent: (
         <Stack verticalFill verticalAlign="center">
@@ -665,7 +677,7 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
               theme,
               realTimeTextProps.isRealTimeTextOn || props.startRealTimeTextButtonChecked
             )}
-            onChange={props.onStartRealTimeText}
+            onChange={openRealTimeTextModal}
           />
         </Stack>
       )
@@ -690,9 +702,17 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
   customDrawerButtons['overflow'].forEach((element) => {
     drawerMenuItems.push(element);
   });
-
   return (
     <>
+      {
+        /* @conditional-compile-remove(rtt) */ showRealTimeTextModal && (
+          <CallingRealTimeTextModal
+            showModal={showRealTimeTextModal}
+            onDismissModal={onDismissRealTimeTextModal}
+            onStartRealTimeText={props.onStartRealTimeText}
+          />
+        )
+      }
       {isSpokenLanguageDrawerOpen && showCaptionsButton && (
         <SpokenLanguageSettingsDrawer
           onLightDismiss={props.onLightDismiss}

packages/react-composites/tests/browser/call/hermetic/RealTimeText.test.ts

@@ -49,11 +49,7 @@ test.describe('Real Time Text tests', async () => {
     expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-button-call.png`);
   });
 
-  test('Real Time Text Modal renders normally', async ({ page, serverUrl }, testInfo) => {
-    //skip this test for mobile
-    if (isTestProfileMobile(testInfo)) {
-      test.skip();
-    }
+  test('Real Time Text Modal renders normally', async ({ page, serverUrl }) => {
     const initialState = defaultMockCallAdapterState();
     await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
     await pageClick(page, dataUiId('common-call-composite-more-button'));
@@ -62,19 +58,13 @@ test.describe('Real Time Text tests', async () => {
     expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-modal.png`);
   });
 
-  test('Real Time Text Banner renders normally after start button is clicked', async ({
-    page,
-    serverUrl
-  }, testInfo) => {
+  test('Real Time Text Banner renders normally after start button is clicked', async ({ page, serverUrl }) => {
     const initialState = defaultMockCallAdapterState();
     await page.goto(buildUrlWithMockAdapter(serverUrl, initialState, { newControlBarExperience: 'true' }));
     await pageClick(page, dataUiId('common-call-composite-more-button'));
     await pageClick(page, `[id="common-call-composite-rtt-button"]`);
     await pageClick(page, `[id="common-call-composite-rtt-start-button"]`);
-    if (!isTestProfileMobile(testInfo)) {
-      // need to click start for the modal
-      await pageClick(page, dataUiId('realTimeText-modal-confirm-button'));
-    }
+    await pageClick(page, dataUiId('realTimeText-modal-confirm-button'));
     expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-banner.png`);
   });
 

packages/react-composites/tests/browser/callwithchat/hermetic/RealTimeText.test.ts

@@ -50,11 +50,7 @@ test.describe('Real Time Text tests', async () => {
     expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-button-call.png`);
   });
 
-  test('Real Time Text Modal renders normally', async ({ page, serverUrl }, testInfo) => {
-    //skip this test for mobile
-    if (isTestProfileMobile(testInfo)) {
-      test.skip();
-    }
+  test('Real Time Text Modal renders normally', async ({ page, serverUrl }) => {
     const initialState = defaultMockCallAdapterState();
     await loadCallPage(page, serverUrl, initialState);
     await pageClick(page, dataUiId('common-call-composite-more-button'));
@@ -63,19 +59,13 @@ test.describe('Real Time Text tests', async () => {
     expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-modal.png`);
   });
 
-  test('Real Time Text Banner renders normally after start button is clicked', async ({
-    page,
-    serverUrl
-  }, testInfo) => {
+  test('Real Time Text Banner renders normally after start button is clicked', async ({ page, serverUrl }) => {
     const initialState = defaultMockCallAdapterState();
     await loadCallPage(page, serverUrl, initialState);
     await pageClick(page, dataUiId('common-call-composite-more-button'));
     await pageClick(page, `[id="common-call-composite-rtt-button"]`);
     await pageClick(page, `[id="common-call-composite-rtt-start-button"]`);
-    if (!isTestProfileMobile(testInfo)) {
-      // need to click start for the modal
-      await pageClick(page, dataUiId('realTimeText-modal-confirm-button'));
-    }
+    await pageClick(page, dataUiId('realTimeText-modal-confirm-button'));
     expect(await stableScreenshot(page)).toMatchSnapshot(`realTimeText-banner.png`);
   });