[HybridApp] Allow classic experience users to use NewDot travel page

src/Expensify.tsx

@@ -100,6 +100,7 @@ function Expensify({
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [lastRoute] = useOnyx(ONYXKEYS.LAST_ROUTE);
     const [tryNewDotData] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT);
+    const [shouldReturnToOldDotAfterBooking] = useOnyx(ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING);
     const [shouldShowRequire2FAModal, setShouldShowRequire2FAModal] = useState(false);
 
     useEffect(() => {
@@ -119,12 +120,13 @@ function Expensify({
     }, [isCheckingPublicRoom]);
 
     useEffect(() => {
-        if (splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN || tryNewDotData === undefined) {
+        // The last condition disables the explanation modal for classic experience users who only use the travel feature.
+        if (splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN || tryNewDotData === undefined || shouldReturnToOldDotAfterBooking) {
             return;
         }
 
         handleHybridAppOnboarding();
-    }, [splashScreenState, tryNewDotData]);
+    }, [shouldReturnToOldDotAfterBooking, splashScreenState, tryNewDotData]);
 
     const isAuthenticated = useMemo(() => !!(session?.authToken ?? null), [session]);
     const autoAuthState = useMemo(() => session?.autoAuthState ?? '', [session]);

src/ONYXKEYS.ts

@@ -425,6 +425,9 @@ const ONYXKEYS = {
     /** Stores recently used currencies */
     RECENTLY_USED_CURRENCIES: 'nvp_recentlyUsedCurrencies',
 
+    /** Decides if we should return to OldDot after booking */
+    SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING: 'shouldReturnToClassicExperienceAfterBooking',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -983,6 +986,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx;
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;
     [ONYXKEYS.LAST_ROUTE]: string;
+    [ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING]: boolean | undefined;
     [ONYXKEYS.SHOULD_SHOW_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
 };
 

src/components/InitialURLContextProvider.tsx

@@ -31,9 +31,10 @@ function InitialURLContextProvider({children, url}: InitialURLContextProviderPro
 
     useEffect(() => {
         if (url) {
-            const route = signInAfterTransitionFromOldDot(url);
-            setInitialURL(route);
-            setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
+            signInAfterTransitionFromOldDot(url).then((route) => {
+                setInitialURL(route);
+                setSplashScreenState(CONST.BOOT_SPLASH_STATE.READY_TO_BE_HIDDEN);
+            });
             return;
         }
         Linking.getInitialURL().then((initURL) => {

src/components/ScreenWrapper.tsx

@@ -1,9 +1,9 @@
-import {useIsFocused, useNavigation} from '@react-navigation/native';
+import {UNSTABLE_usePreventRemove, useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import type {ForwardedRef, ReactNode} from 'react';
 import React, {createContext, forwardRef, useEffect, useMemo, useRef, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
-import {Keyboard, PanResponder, View} from 'react-native';
+import {Keyboard, NativeModules, PanResponder, View} from 'react-native';
 import {PickerAvoidingView} from 'react-native-picker-select';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import useEnvironment from '@hooks/useEnvironment';
@@ -15,6 +15,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
+import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList, RootStackParamList} from '@libs/Navigation/types';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
@@ -160,6 +161,16 @@ function ScreenWrapper(
 
     isKeyboardShownRef.current = keyboardState?.isKeyboardShown ?? false;
 
+    const route = useRoute();
+    const shouldReturnToOldDot = useMemo(() => {
+        return !!(route?.params && 'singleNewDotEntry' in route.params && route?.params?.singleNewDotEntry === 'true');
+    }, [route]);
+
+    UNSTABLE_usePreventRemove(shouldReturnToOldDot, () => {
+        Navigation.setParams({singleNewDotEntry: undefined});
+        NativeModules.HybridAppModule.closeReactNativeApp(false, false);
+    });
+
     const panResponder = useRef(
         PanResponder.create({
             onStartShouldSetPanResponderCapture: (_e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS,

src/libs/actions/Session/index.ts

@@ -482,27 +482,40 @@ function signUpUser() {
 function signInAfterTransitionFromOldDot(transitionURL: string) {
     const [route, queryParams] = transitionURL.split('?');
 
-    const {email, authToken, encryptedAuthToken, accountID, autoGeneratedLogin, autoGeneratedPassword, clearOnyxOnStart} = Object.fromEntries(
+    const {email, authToken, encryptedAuthToken, accountID, autoGeneratedLogin, autoGeneratedPassword, clearOnyxOnStart, shouldReturnToOldDotAfterBooking} = Object.fromEntries(
         queryParams.split('&').map((param) => {
             const [key, value] = param.split('=');
             return [key, value];
         }),
     );
 
-    const setSessionDataAndOpenApp = () => {
-        Onyx.multiSet({
-            [ONYXKEYS.SESSION]: {email, authToken, encryptedAuthToken: decodeURIComponent(encryptedAuthToken), accountID: Number(accountID)},
-            [ONYXKEYS.CREDENTIALS]: {autoGeneratedLogin, autoGeneratedPassword},
-        }).then(App.openApp);
+    const clearOnyxForNewAccount = () => {
+        if (clearOnyxOnStart !== 'true') {
+            return Promise.resolve();
+        }
+
+        return Onyx.clear(KEYS_TO_PRESERVE);
     };
 
-    if (clearOnyxOnStart === 'true') {
-        Onyx.clear(KEYS_TO_PRESERVE).then(setSessionDataAndOpenApp);
-    } else {
-        setSessionDataAndOpenApp();
-    }
+    const setSessionDataAndOpenApp = new Promise<Route>((resolve) => {
+        clearOnyxForNewAccount()
+            .then(() =>
+                Onyx.multiSet({
+                    [ONYXKEYS.SESSION]: {email, authToken, encryptedAuthToken: decodeURIComponent(encryptedAuthToken), accountID: Number(accountID)},
+                    [ONYXKEYS.CREDENTIALS]: {autoGeneratedLogin, autoGeneratedPassword},
+                    [ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING]: shouldReturnToOldDotAfterBooking === 'true',
+                }),
+            )
+            .then(App.openApp)
+            .catch((error) => {
+                Log.hmmm('[HybridApp] Initialization of HybridApp has failed. Forcing transition', {error});
+            })
+            .finally(() => {
+                resolve(`${route}?singleNewDotEntry=${shouldReturnToOldDotAfterBooking}` as Route);
+            });
+    });
 
-    return route as Route;
+    return setSessionDataAndOpenApp;
 }
 
 /**

src/pages/Travel/ManageTrips.tsx

@@ -1,6 +1,6 @@
 import {Str} from 'expensify-common';
 import React, {useState} from 'react';
-import {Linking, View} from 'react-native';
+import {Linking, NativeModules, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {FeatureListItem} from '@components/FeatureList';
 import FeatureList from '@components/FeatureList';
@@ -12,6 +12,7 @@ import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import colors from '@styles/theme/colors';
 import * as Link from '@userActions/Link';
@@ -37,6 +38,7 @@ function ManageTrips() {
     const {translate} = useLocalize();
     const [travelSettings] = useOnyx(ONYXKEYS.NVP_TRAVEL_SETTINGS);
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
+    const [shouldReturnToOldDotAfterBooking] = useOnyx(ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const policy = usePolicy(activePolicyID);
 
@@ -78,9 +80,18 @@ function ManageTrips() {
                         if (ctaErrorMessage) {
                             setCtaErrorMessage('');
                         }
-                        Link.openTravelDotLink(activePolicyID)?.catch(() => {
-                            setCtaErrorMessage(translate('travel.errorMessage'));
-                        });
+                        Link.openTravelDotLink(activePolicyID)
+                            ?.then(() => {
+                                if (!NativeModules.HybridAppModule || !shouldReturnToOldDotAfterBooking) {
+                                    return;
+                                }
+
+                                Log.info('[HybridApp] Returning to OldDot after opening TravelDot');
+                                NativeModules.HybridAppModule.closeReactNativeApp(false, false);
+                            })
+                            ?.catch(() => {
+                                setCtaErrorMessage(translate('travel.errorMessage'));
+                            });
                     }}
                     ctaErrorMessage={ctaErrorMessage}
                     illustration={LottieAnimations.TripsEmptyState}