Dismiss wide report from AuthScreens

Author: WojtekBoman

src/App.tsx

@@ -38,6 +38,7 @@ import {FullScreenContextProvider} from './components/VideoPlayerContexts/FullSc
 import {PlaybackContextProvider} from './components/VideoPlayerContexts/PlaybackContext';
 import {VideoPopoverMenuContextProvider} from './components/VideoPlayerContexts/VideoPopoverMenuContext';
 import {VolumeContextProvider} from './components/VideoPlayerContexts/VolumeContext';
+import WideRHPContextProvider from './components/WideRHPContextProvider';
 import {KeyboardStateProvider} from './components/withKeyboardState';
 import CONFIG from './CONFIG';
 import CONST from './CONST';
@@ -125,6 +126,7 @@ function App() {
                                         SidePanelContextProvider,
                                         ExpensifyCardContextProvider,
                                         KYCWallContextProvider,
+                                        WideRHPContextProvider,
                                     ]}
                                 >
                                     <CustomStatusBarAndBackground />

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -1,5 +1,4 @@
 import type {RouteProp} from '@react-navigation/native';
-import {StackActions, useNavigation} from '@react-navigation/native';
 import type {StackCardInterpolationProps} from '@react-navigation/stack';
 import React, {memo, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ComposeProviders from '@components/ComposeProviders';
@@ -13,7 +12,7 @@ import {SearchContextProvider} from '@components/Search/SearchContext';
 import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
 import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
 import SupportalPermissionDeniedModalProvider from '@components/SupportalPermissionDeniedModalProvider';
-import WideRHPContextProvider from '@components/WideRHPContextProvider';
+import {WideRHPContext} from '@components/WideRHPContextProvider';
 import useAutoUpdateTimezone from '@hooks/useAutoUpdateTimezone';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
@@ -158,6 +157,7 @@ function AuthScreens() {
     const prevIsOnboardingLoading = usePrevious(isOnboardingLoading);
     const {initialURL, isAuthenticatedAtStartup, setIsAuthenticatedAtStartup} = useContext(InitialURLContext);
     const modalCardStyleInterpolator = useModalCardStyleInterpolator();
+    const {shouldRenderSecondaryOverlay, dismissToWideReport} = useContext(WideRHPContext);
 
     // State to track whether the delegator's authentication is completed before displaying data
     const [isDelegatorFromOldDotIsReady, setIsDelegatorFromOldDotIsReady] = useState(false);
@@ -357,6 +357,11 @@ function AuthScreens() {
                     return;
                 }
 
+                if (shouldRenderSecondaryOverlay) {
+                    dismissToWideReport();
+                    return;
+                }
+
                 Navigation.dismissModal();
             },
             shortcutConfig.descriptionKey,
@@ -365,7 +370,7 @@ function AuthScreens() {
             true,
         );
         return () => unsubscribeEscapeKey();
-    }, [modal?.disableDismissOnEscape, modal?.willAlertModalBecomeVisible]);
+    }, [dismissToWideReport, modal?.disableDismissOnEscape, modal?.willAlertModalBecomeVisible, shouldRenderSecondaryOverlay]);
 
     // Animation is disabled when navigating to the sidebar screen
     const getWorkspaceSplitNavigatorOptions = ({route}: {route: RouteProp<AuthScreensParamList>}) => {
@@ -479,7 +484,6 @@ function AuthScreens() {
                 LockedAccountModalProvider,
                 DelegateNoAccessModalProvider,
                 SupportalPermissionDeniedModalProvider,
-                WideRHPContextProvider,
             ]}
         >
             <RootStack.Navigator

src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts

@@ -1,5 +1,5 @@
-import type {RouterConfigOptions, StackActionType, StackNavigationState} from '@react-navigation/native';
-import {CommonActions, StackActions} from '@react-navigation/native';
+import type {CommonActions, RouterConfigOptions, StackActionType, StackNavigationState} from '@react-navigation/native';
+import {StackActions} from '@react-navigation/native';
 import type {ParamListBase, Router} from '@react-navigation/routers';
 import SCREENS_WITH_NAVIGATION_TAB_BAR from '@components/Navigation/TopLevelNavigationTabBar/SCREENS_WITH_NAVIGATION_TAB_BAR';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
@@ -146,32 +146,13 @@ function handleDismissModalAction(
     stackRouter: Router<StackNavigationState<ParamListBase>, CommonActions.Action | StackActionType>,
 ) {
     const lastRoute = state.routes.at(-1);
+    const newAction = StackActions.pop();
 
     if (!lastRoute?.name || !MODAL_ROUTES_TO_DISMISS.includes(lastRoute?.name)) {
         Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss');
         return null;
     }
 
-    if (lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute?.state) {
-        const rhpRoutes = lastRoute?.state?.routes;
-        // This handles closing the modal when wide rhp is visible
-        const wideRhpIndex = rhpRoutes.findLastIndex((rhpRoute) => rhpRoute.name === SCREENS.RIGHT_MODAL.SEARCH_REPORT);
-        if (wideRhpIndex > -1 && wideRhpIndex !== rhpRoutes.length - 1) {
-            const modifiedRhp = {
-                ...lastRoute,
-                state: {
-                    ...lastRoute.state,
-                    index: wideRhpIndex,
-                    routes: lastRoute.state.routes.slice(0, wideRhpIndex + 1),
-                    history: lastRoute.state.history?.slice(0, wideRhpIndex + 1),
-                },
-            };
-            const modifiedState = {...state, routes: [...state.routes.slice(0, -1), modifiedRhp]};
-            const action = CommonActions.reset(modifiedState);
-            return stackRouter.getStateForAction(state, action, configOptions);
-        }
-    }
-    const newAction = StackActions.pop();
     return stackRouter.getStateForAction(state, newAction, configOptions);
 }
 

src/libs/actions/IOU.ts

@@ -934,7 +934,7 @@ function dismissModalAndOpenReportInInboxTab(reportID?: string) {
             // When a report with one expense is opened in the wide RHP and the user adds another expense, RHP should be dismissed and ROUTES.SEARCH_MONEY_REQUEST_REPORT should be displayed.
             if (hasMultipleTransactions && reportID) {
                 Navigation.dismissModal();
-                // eslint-disable-next-line deprecation/deprecation
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 InteractionManager.runAfterInteractions(() => {
                     Navigation.navigate(ROUTES.SEARCH_MONEY_REQUEST_REPORT.getRoute({reportID}));
                 });

src/pages/iou/request/step/DiscardChangesConfirmation/index.tsx

@@ -69,7 +69,7 @@ function DiscardChangesConfirmation({getHasUnsavedChanges, onCancel}: DiscardCha
             cancelText={translate('common.cancel')}
             onConfirm={() => {
                 setIsVisible(false);
-                // eslint-disable-next-line deprecation/deprecation
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 InteractionManager.runAfterInteractions(() => {
                     if (blockedNavigationAction.current) {
                         navigationRef.current?.dispatch(blockedNavigationAction.current);