[Payment due @situchan] Open a support ticket straight from the Talk to a human link

src/SCREENS.ts

@@ -8,6 +8,7 @@ const PROTECTED_SCREENS = {
     HOME: 'Home',
     INBOX: 'Inbox',
     CONCIERGE: 'Concierge',
+    TALK_TO_HUMAN: 'TalkToHuman',
     REPORT_ATTACHMENTS: 'ReportAttachments',
     REPORT_ADD_ATTACHMENT: 'ReportAddAttachment',
     TRACK_EXPENSE: 'TrackExpense',

src/hooks/useOpenSupportTicket.ts

@@ -0,0 +1,63 @@
+import {isNoSupportRepAvailableResponse, openSupportTicket} from '@libs/actions/Report';
+import Growl from '@libs/Growl';
+import Navigation from '@libs/Navigation/Navigation';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+import useLocalize from './useLocalize';
+import useOnyx from './useOnyx';
+import useOpenConciergeAnywhere from './useOpenConciergeAnywhere';
+
+/**
+ * Returns a callback that opens a support ticket, falling back to Concierge when no support rep is free.
+ * Shared by the Help page row and the Talk to a human route so both behave the same.
+ */
+function useOpenSupportTicket() {
+    const {translate} = useLocalize();
+    const {openConciergeAnywhere} = useOpenConciergeAnywhere();
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+
+    const openConcierge = () => {
+        // The customer is already in the Concierge chat, so opening it again would show it twice.
+        if (conciergeReportID && Navigation.getFocusedReportId() === conciergeReportID) {
+            return;
+        }
+        openConciergeAnywhere({forceConcierge: true});
+    };
+
+    const openSupportTicketOrConcierge = () => {
+        const request = openSupportTicket();
+
+        // openSupportTicket opens the pending ticket before it resolves, so this is that screen's own route.
+        const pendingTicketRoute = Navigation.getActiveRoute();
+
+        // A ticket that was never created leaves its screen on a missing report. Leaving any other screen would pop
+        // the page the customer is on instead.
+        const dismissPendingTicket = (afterTransition?: () => void) => {
+            if (Navigation.getActiveRoute() !== pendingTicketRoute) {
+                afterTransition?.();
+                return;
+            }
+            Navigation.goBack(undefined, {afterTransition});
+        };
+
+        request
+            .then((response) => {
+                if (isNoSupportRepAvailableResponse(response)) {
+                    Growl.error({bodyText: translate('supportTicket.noSupportRepAvailable')});
+                    dismissPendingTicket(openConcierge);
+                    return;
+                }
+
+                if (response?.jsonCode !== undefined && response.jsonCode !== CONST.JSON_CODE.SUCCESS) {
+                    dismissPendingTicket();
+                }
+            })
+            .catch(() => dismissPendingTicket());
+    };
+
+    return {openSupportTicketOrConcierge};
+}
+
+export default useOpenSupportTicket;

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -86,6 +86,7 @@ const loadAttachmentModalScreen = () => require<ReactComponentModule>('../../../
 const loadValidateLoginPage = () => require<ReactComponentModule>('../../../pages/ValidateLoginPage').default;
 const loadLogOutPreviousUserPage = () => require<ReactComponentModule>('../../../pages/LogOutPreviousUserPage').default;
 const loadConciergePage = () => require<ReactComponentModule>('../../../pages/ConciergePage').default;
+const loadTalkToHumanPage = () => require<ReactComponentModule>('../../../pages/TalkToHumanPage').default;
 const loadTrackExpensePage = () => require<ReactComponentModule>('../../../pages/TrackExpensePage').default;
 const loadSubmitExpensePage = () => require<ReactComponentModule>('../../../pages/SubmitExpensePage').default;
 const loadPreMountBufferPage = () => require<ReactComponentModule>('../../../pages/PreMountBufferPage').default;
@@ -226,6 +227,11 @@ function AuthScreens() {
                             options={defaultScreenOptions}
                             getComponent={loadConciergePage}
                         />
+                        <RootStack.Screen
+                            name={SCREENS.TALK_TO_HUMAN}
+                            options={defaultScreenOptions}
+                            getComponent={loadTalkToHumanPage}
+                        />
                         <RootStack.Screen
                             name={SCREENS.TRACK_EXPENSE}
                             options={defaultScreenOptions}

src/libs/Navigation/linkingConfig/config.ts

@@ -24,6 +24,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
         [SCREENS.CONNECTION_COMPLETE]: ROUTES.CONNECTION_COMPLETE,
         [SCREENS.BANK_CONNECTION_COMPLETE]: ROUTES.BANK_CONNECTION_COMPLETE,
         [SCREENS.CONCIERGE]: ROUTES.CONCIERGE,
+        [SCREENS.TALK_TO_HUMAN]: ROUTES.TALK_TO_HUMAN,
         [SCREENS.TRACK_EXPENSE]: ROUTES.TRACK_EXPENSE,
         [SCREENS.SUBMIT_EXPENSE]: ROUTES.SUBMIT_EXPENSE,
         [SCREENS.SAML_SIGN_IN]: ROUTES.SAML_SIGN_IN,
@@ -2427,8 +2428,6 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         },
                         [SCREENS.SETTINGS.HELP]: {
                             path: ROUTES.SETTINGS_HELP,
-                            // The Talk to a human link in Concierge replies lands on the Help page, where the Talk to a human row is.
-                            alias: [{path: ROUTES.TALK_TO_HUMAN, exact: true}],
                             exact: true,
                         },
                         [SCREENS.SETTINGS.TROUBLESHOOT]: {

src/libs/Navigation/types.ts

@@ -1478,6 +1478,7 @@ type AttachmentModalScreensParamList = {
 type AuthScreensParamList = SharedScreensParamList &
     AttachmentModalScreensParamList & {
         [SCREENS.CONCIERGE]: undefined;
+        [SCREENS.TALK_TO_HUMAN]: undefined;
         [SCREENS.TRACK_EXPENSE]: undefined;
         [SCREENS.SUBMIT_EXPENSE]: undefined;
         [SCREENS.WORKSPACE_JOIN_USER]: {

src/pages/TalkToHumanPage.tsx

@@ -0,0 +1,68 @@
+import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
+import ScreenWrapper from '@components/ScreenWrapper';
+
+import useNetwork from '@hooks/useNetwork';
+import useOpenSupportTicket from '@hooks/useOpenSupportTicket';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import interceptAnonymousUser from '@libs/interceptAnonymousUser';
+import Navigation from '@libs/Navigation/Navigation';
+
+import ROUTES from '@src/ROUTES';
+
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useRef} from 'react';
+import {View} from 'react-native';
+
+// Utility page: goes back, then does what the Help page's Talk to a human row does (offline it shows Help instead).
+// Anonymous sessions are sent to sign-in instead.
+function TalkToHumanPage() {
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
+    const {openSupportTicketOrConcierge} = useOpenSupportTicket();
+    const hasHandledLink = useRef(false);
+
+    // Not wrapped in useCallback on purpose: the effect re-runs when isOffline changes, and the cleanup cancels the earlier run,
+    // so only the run that saw the latest connection state handles the link.
+    useFocusEffect(() => {
+        let isCancelled = false;
+
+        interceptAnonymousUser(() => {
+            Navigation.isNavigationReady().then(() => {
+                if (isCancelled || hasHandledLink.current) {
+                    return;
+                }
+                hasHandledLink.current = true;
+
+                // A wide to narrow resize leaves a pending pop to the sidebar, which targets the page underneath
+                // rather than this one. goBack would consume it here and leave this page open, so it is set aside
+                // while this page pops and handed back to the next Back.
+                const hadPendingPopToSidebar = Navigation.getShouldPopToSidebar();
+                Navigation.setShouldPopToSidebar(false);
+                Navigation.goBack();
+                Navigation.setShouldPopToSidebar(hadPendingPopToSidebar);
+                if (isOffline) {
+                    Navigation.navigate(ROUTES.SETTINGS_HELP);
+                    return;
+                }
+                openSupportTicketOrConcierge();
+            });
+        });
+
+        return () => {
+            isCancelled = true;
+        };
+    });
+
+    return (
+        <ScreenWrapper testID="TalkToHumanPage">
+            <View style={[styles.borderBottom]}>
+                <ReportHeaderSkeletonView onBackButtonPress={Navigation.goBack} />
+            </View>
+            <ReportActionsSkeletonView />
+        </ScreenWrapper>
+    );
+}
+
+export default TalkToHumanPage;

src/pages/inbox/ReportNavigateAwayHandler.tsx

@@ -97,6 +97,7 @@ function ReportNavigateAwayHandler() {
     // a temporary Onyx SET that wipes the report; by the time effects fire, report is undefined
     // so we must persist the value in a ref updated synchronously during render. See issue #84248.
     const isCurrentRouteOwnWorkspaceChatRef = useIsOwnWorkspaceChatRef(report, reportIDFromRoute);
+    const isPendingCreationFromRoute = route.name === SCREENS.REPORT ? route.params?.isPendingCreation === 'true' : false;
 
     const firstRender = useRef(true);
 
@@ -230,6 +231,11 @@ function ReportNavigateAwayHandler() {
             return;
         }
 
+        // A report still pending creation was never created, so its removal is a failed create that the opener handles.
+        if (isPendingCreationFromRoute) {
+            return;
+        }
+
         Navigation.isNavigationReady().then(() => {
             // Drop the deleted report from the split navigator stack before navigating away. Otherwise, it stays
             // mounted underneath the destination, and tapping back refocuses it and re-triggers this effect,
@@ -251,6 +257,7 @@ function ReportNavigateAwayHandler() {
         reportWasDeleted,
         previousReportWasDeleted,
         isFocused,
+        isPendingCreationFromRoute,
         deletedReportParentID,
         conciergeReportID,
         introSelected,

src/pages/settings/HelpPage/HelpPage.tsx

@@ -13,6 +13,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useOpenConciergeAnywhere from '@hooks/useOpenConciergeAnywhere';
+import useOpenSupportTicket from '@hooks/useOpenSupportTicket';
 import usePersonalDetailByLogin from '@hooks/usePersonalDetailByLogin';
 import {useAllPersonalDetails} from '@hooks/usePersonalDetails';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -21,8 +22,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import {openHelpPage} from '@libs/actions/Help';
 import {openExternalLink} from '@libs/actions/Link';
-import {isNoSupportRepAvailableResponse, navigateToAndOpenReportWithAccountIDs, openSupportTicket} from '@libs/actions/Report';
-import Growl from '@libs/Growl';
+import {navigateToAndOpenReportWithAccountIDs} from '@libs/actions/Report';
 import Navigation from '@libs/Navigation/Navigation';
 
 import colors from '@styles/theme/colors';
@@ -64,21 +64,9 @@ function HelpPage() {
     const [conciergeChat] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${conciergeReportID}`);
     const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const {openConciergeAnywhere} = useOpenConciergeAnywhere();
+    const {openSupportTicketOrConcierge} = useOpenSupportTicket();
     const {isOffline} = useNetwork();
 
-    const openSupportTicketOrConcierge = () => {
-        openSupportTicket()
-            .then((response) => {
-                if (!isNoSupportRepAvailableResponse(response)) {
-                    return;
-                }
-
-                Growl.error({bodyText: translate('supportTicket.noSupportRepAvailable')});
-                Navigation.goBack(undefined, {afterTransition: () => openConciergeAnywhere({forceConcierge: true})});
-            })
-            .catch(() => undefined);
-    };
-
     // Remove the row's accessibility grouping so native (iOS/Android) screen readers can announce the nested
     // Book a call button as its own element; on web this prop is a no-op and the button is reached via keyboard Tab instead
     const shouldBeAccessibleWithBookCallButton = (calendarLink: string | undefined) => !calendarLink;
@@ -217,7 +205,7 @@ function HelpPage() {
         icon: icons.ChatBubbles,
         iconType: CONST.ICON_TYPE_ICON,
         onPress: openSupportTicketOrConcierge,
-        isDisabled: isOffline,
+        disabled: isOffline,
         shouldShowRightIcon: true,
         wrapperStyle: [styles.sectionMenuItemTopDescription],
         sentryLabel: CONST.SENTRY_LABEL.SETTINGS_HELP.SUPPORT_TICKET,

tests/navigation/TalkToHumanNavigationTests.tsx

@@ -0,0 +1,133 @@
+import {act, render} from '@testing-library/react-native';
+
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+
+import getIsNarrowLayout from '@libs/getIsNarrowLayout';
+import getAdaptedStateFromPath from '@libs/Navigation/helpers/getAdaptedStateFromPath';
+import getPathFromState from '@libs/Navigation/helpers/getPathFromState';
+import Navigation from '@libs/Navigation/Navigation';
+import navigationRef from '@libs/Navigation/navigationRef';
+
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
+import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
+
+import type {InitialState} from '@react-navigation/native';
+
+import {findFocusedRoute} from '@react-navigation/native';
+import React from 'react';
+
+import TestNavigationContainer from '../utils/TestNavigationContainer';
+
+jest.mock('@hooks/useResponsiveLayout', () => jest.fn());
+jest.mock('@libs/getIsNarrowLayout', () => jest.fn());
+jest.mock('@pages/inbox/sidebar/NavigationTabBarAvatar');
+
+const CHAT_REPORT_ID = '100';
+
+const chatState = {
+    index: 0,
+    routes: [
+        {
+            name: NAVIGATORS.TAB_NAVIGATOR,
+            state: {
+                index: 1,
+                routes: [
+                    {name: SCREENS.HOME},
+                    {
+                        name: NAVIGATORS.REPORTS_SPLIT_NAVIGATOR,
+                        state: {index: 1, routes: [{name: SCREENS.INBOX}, {name: SCREENS.REPORT, params: {reportID: CHAT_REPORT_ID}}]},
+                    },
+                    {name: NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR},
+                    {name: SCREENS.INSIGHTS},
+                    {name: NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR},
+                    {name: NAVIGATORS.WORKSPACE_NAVIGATOR},
+                ],
+            },
+        },
+    ],
+};
+
+/**
+ * The Talk to a human page pops itself before opening a support ticket, and the ticket stores the route it was
+ * opened from as its Back target. These pin that the pop leaves a real page behind, so the ticket never records
+ * the loader itself.
+ */
+describe.each([
+    ['wide layout', false],
+    ['narrow layout', true],
+])('Talk to a human route on a %s', (_name, isNarrow) => {
+    beforeEach(() => {
+        jest.mocked(getIsNarrowLayout).mockReturnValue(isNarrow);
+        jest.mocked(useResponsiveLayout).mockReturnValue({
+            ...CONST.NAVIGATION_TESTS.DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE,
+            shouldUseNarrowLayout: isNarrow,
+            isSmallScreenWidth: isNarrow,
+        });
+    });
+
+    it('returns to the chat the link was pressed in', () => {
+        // Given a chat open in the app
+        render(<TestNavigationContainer initialState={chatState} />);
+
+        // When the link is pressed and the page pops itself
+        act(() => {
+            Navigation.navigate(ROUTES.TALK_TO_HUMAN);
+        });
+        expect(Navigation.getActiveRoute()).toBe(`/${ROUTES.TALK_TO_HUMAN}`);
+        act(() => {
+            Navigation.goBack();
+        });
+
+        // Then the chat is the active route, so the ticket records it as its Back target
+        expect(Navigation.getActiveRoute()).toBe(`/r/${CHAT_REPORT_ID}`);
+    });
+
+    it('still pops when a wide to narrow resize left a pending pop to the sidebar', () => {
+        // Given a chat open in the app and the link pressed
+        render(<TestNavigationContainer initialState={chatState} />);
+        act(() => {
+            Navigation.navigate(ROUTES.TALK_TO_HUMAN);
+        });
+
+        // When the resize flag is pending and the page clears it before leaving, as TalkToHumanPage does
+        act(() => {
+            Navigation.setShouldPopToSidebar(true);
+        });
+        act(() => {
+            Navigation.setShouldPopToSidebar(false);
+            Navigation.goBack();
+        });
+
+        // Then the page is gone, so the ticket does not record this route as its Back target
+        expect(Navigation.getActiveRoute()).toBe(`/r/${CHAT_REPORT_ID}`);
+    });
+
+    it('leaves a page behind when the link is opened directly', () => {
+        // Given the route opened from a cold link, which has no page of its own to return to
+        render(<TestNavigationContainer initialState={getAdaptedStateFromPath(ROUTES.TALK_TO_HUMAN) as InitialState} />);
+        expect(Navigation.getActiveRoute()).toBe(`/${ROUTES.TALK_TO_HUMAN}`);
+
+        // When the page pops itself
+        act(() => {
+            Navigation.goBack();
+        });
+
+        // Then it lands on a real page instead of stranding the customer on the loader
+        expect(Navigation.getActiveRoute()).not.toBe(`/${ROUTES.TALK_TO_HUMAN}`);
+        expect(navigationRef.current?.getRootState().routes.at(-1)?.name).toBe(NAVIGATORS.TAB_NAVIGATOR);
+    });
+});
+
+describe('Talk to a human deep link', () => {
+    it('resolves the link to the Talk to a human page', () => {
+        // Given the link that Concierge replies point to
+        // When it is opened as a URL
+        const state = getAdaptedStateFromPath(`/${ROUTES.TALK_TO_HUMAN}`);
+
+        // Then the focused screen is the Talk to a human page, and the URL survives a round trip
+        expect(findFocusedRoute(state)?.name).toBe(SCREENS.TALK_TO_HUMAN);
+        expect(getPathFromState(state)).toBe(`/${ROUTES.TALK_TO_HUMAN}`);
+    });
+});