[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

@@ -433,6 +433,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_',
@@ -996,6 +999,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;
     [ONYXKEYS.LAST_ROUTE]: string;
     [ONYXKEYS.NVP_SHOULD_HIDE_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
+    [ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING]: boolean | undefined;
 };
 
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;

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.set(ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING, shouldReturnToOldDotAfterBooking === 'true'))
+            .then(() =>
+                Onyx.multiSet({
+                    [ONYXKEYS.SESSION]: {email, authToken, encryptedAuthToken: decodeURIComponent(encryptedAuthToken), accountID: Number(accountID)},
+                    [ONYXKEYS.CREDENTIALS]: {autoGeneratedLogin, autoGeneratedPassword},
+                }),
+            )
+            .then(App.openApp)
+            .catch((error) => {
+                Log.hmmm('[HybridApp] Initialization of HybridApp has failed. Forcing transition', {error});
+            })
+            .finally(() => {
+                resolve(route 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}

src/pages/Travel/MyTripsPage.tsx

@@ -1,14 +1,29 @@
-import React from 'react';
+import React, {useCallback} from 'react';
+import {NativeModules} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ManageTrips from './ManageTrips';
 
 function MyTripsPage() {
     const {translate} = useLocalize();
     const {canUseSpotnanaTravel} = usePermissions();
+    const [shouldReturnToOldDotAfterBooking] = useOnyx(ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING);
+
+    const onBackButtonPress = useCallback(() => {
+        if (NativeModules.HybridAppModule && shouldReturnToOldDotAfterBooking) {
+            Log.info('[HybridApp] Returning to OldDot after closing MyTripsPage');
+            NativeModules.HybridAppModule.closeReactNativeApp(false, false);
+            return;
+        }
+        Navigation.goBack();
+    }, [shouldReturnToOldDotAfterBooking]);
 
     return (
         <ScreenWrapper
@@ -25,6 +40,7 @@ function MyTripsPage() {
                 <HeaderWithBackButton
                     title={translate('travel.header')}
                     shouldShowBackButton
+                    onBackButtonPress={onBackButtonPress}
                 />
                 <ManageTrips />
             </FullPageNotFoundView>