Fix other chat is shown briefly when navigating to concierge page

src/libs/actions/Report.ts

@@ -85,12 +85,14 @@ type ActionSubscriber = {
     callback: SubscriberCallback;
 };
 
+let conciergeChatReportID: string | undefined;
 let currentUserAccountID = -1;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         // When signed out, val is undefined
         if (!value?.accountID) {
+            conciergeChatReportID = undefined;
             return;
         }
 
@@ -167,7 +169,6 @@ Onyx.connect({
 });
 
 const allReports: OnyxCollection<Report> = {};
-let conciergeChatReportID: string | undefined;
 const typingWatchTimers: Record<string, NodeJS.Timeout> = {};
 
 let reportIDDeeplinkedFromOldDot: string | undefined;
@@ -1681,24 +1682,29 @@ function updateWriteCapabilityAndNavigate(report: Report, newValue: WriteCapabil
 
 /**
  * Navigates to the 1:1 report with Concierge
- *
- * @param ignoreConciergeReportID - Flag to ignore conciergeChatReportID during navigation. The default behavior is to not ignore.
  */
-function navigateToConciergeChat(ignoreConciergeReportID = false, shouldDismissModal = false) {
+function navigateToConciergeChat(shouldDismissModal = false, shouldPopCurrentScreen = false, checkIfCurrentPageActive = () => true) {
     // If conciergeChatReportID contains a concierge report ID, we navigate to the concierge chat using the stored report ID.
     // Otherwise, we would find the concierge chat and navigate to it.
-    // Now, when user performs sign-out and a sign-in again, conciergeChatReportID may contain a stale value.
-    // In order to prevent navigation to a stale value, we use ignoreConciergeReportID to forcefully find and navigate to concierge chat.
-    if (!conciergeChatReportID || ignoreConciergeReportID) {
+    if (!conciergeChatReportID) {
         // In order to avoid creating concierge repeatedly,
         // we need to ensure that the server data has been successfully pulled
         Welcome.serverDataIsReadyPromise().then(() => {
             // If we don't have a chat with Concierge then create it
+            if (!checkIfCurrentPageActive()) {
+                return;
+            }
+            if (shouldPopCurrentScreen && !shouldDismissModal) {
+                Navigation.goBack();
+            }
             navigateToAndOpenReport([CONST.EMAIL.CONCIERGE], shouldDismissModal);
         });
     } else if (shouldDismissModal) {
         Navigation.dismissModal(conciergeChatReportID);
     } else {
+        if (shouldPopCurrentScreen) {
+            Navigation.goBack();
+        }
         Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(conciergeChatReportID));
     }
 }
@@ -2148,10 +2154,7 @@ function openReportFromDeepLink(url: string, isAuthenticated: boolean) {
         Session.waitForUserSignIn().then(() => {
             Navigation.waitForProtectedRoutes().then(() => {
                 const route = ReportUtils.getRouteFromLink(url);
-                if (route === ROUTES.CONCIERGE) {
-                    navigateToConciergeChat(true);
-                    return;
-                }
+
                 if (route && Session.isAnonymousUser() && !Session.canAccessRouteByAnonymousUser(route)) {
                     Session.signOutAndRedirectToSignIn(true);
                     return;

src/libs/actions/Session/index.ts

@@ -874,7 +874,7 @@ const canAccessRouteByAnonymousUser = (route: string) => {
     if (route.startsWith('/')) {
         routeRemovedReportId = routeRemovedReportId.slice(1);
     }
-    const routesCanAccessByAnonymousUser = [ROUTES.SIGN_IN_MODAL, ROUTES.REPORT_WITH_ID_DETAILS.route, ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.route];
+    const routesCanAccessByAnonymousUser = [ROUTES.SIGN_IN_MODAL, ROUTES.REPORT_WITH_ID_DETAILS.route, ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.route, ROUTES.CONCIERGE];
 
     if ((routesCanAccessByAnonymousUser as string[]).includes(routeRemovedReportId)) {
         return true;

src/pages/ConciergePage.tsx

@@ -1,14 +1,18 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
+import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
+import * as App from '@userActions/App';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Session} from '@src/types/onyx';
 
@@ -25,19 +29,39 @@ type ConciergePageProps = ConciergePageOnyxProps & StackScreenProps<AuthScreensP
  *     - Else re-route to the login page
  */
 function ConciergePage({session}: ConciergePageProps) {
+    const styles = useThemeStyles();
+    const isUnmounted = useRef(false);
+
     useFocusEffect(() => {
         if (session && 'authToken' in session) {
+            App.confirmReadyToOpenApp();
             // Pop the concierge loading page before opening the concierge report.
             Navigation.isNavigationReady().then(() => {
-                Navigation.goBack(ROUTES.HOME);
-                Report.navigateToConciergeChat();
+                if (isUnmounted.current) {
+                    return;
+                }
+                Report.navigateToConciergeChat(undefined, true, () => !isUnmounted.current);
             });
         } else {
             Navigation.navigate();
         }
     });
 
-    return <FullScreenLoadingIndicator />;
+    useEffect(
+        () => () => {
+            isUnmounted.current = true;
+        },
+        [],
+    );
+
+    return (
+        <ScreenWrapper testID={ConciergePage.displayName}>
+            <View style={[styles.borderBottom]}>
+                <ReportHeaderSkeletonView onBackButtonPress={Navigation.goBack} />
+            </View>
+            <ReportActionsSkeletonView />
+        </ScreenWrapper>
+    );
 }
 
 ConciergePage.displayName = 'ConciergePage';

src/pages/ReimbursementAccount/ValidationStep.js

@@ -205,7 +205,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                         <Text>{translate('validationStep.letsChatText')}</Text>
                         <Button
                             text={translate('validationStep.letsChatCTA')}
-                            onPress={() => Report.navigateToConciergeChat(false, true)}
+                            onPress={() => Report.navigateToConciergeChat(true)}
                             icon={Expensicons.ChatBubble}
                             style={[styles.mt4]}
                             iconStyles={[styles.buttonCTAIcon]}