Allow classic experience users to use NewDot travel page

Expensify · Sep 23, 2024 · b2076fd · b2076fd
1 parent bbc0919
commit b2076fd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/src/ONYXKEYS.ts b/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;

diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
@@ -482,7 +482,7 @@ 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];
@@ -494,6 +494,7 @@ function signInAfterTransitionFromOldDot(transitionURL: string) {
             [ONYXKEYS.SESSION]: {email, authToken, encryptedAuthToken: decodeURIComponent(encryptedAuthToken), accountID: Number(accountID)},
             [ONYXKEYS.CREDENTIALS]: {autoGeneratedLogin, autoGeneratedPassword},
         }).then(App.openApp);
+        Onyx.set(ONYXKEYS.SHOULD_RETURN_TO_OLD_DOT_AFTER_BOOKING, shouldReturnToOldDotAfterBooking === 'true');
     };
 
     if (clearOnyxOnStart === 'true') {

diff --git a/src/pages/Travel/ManageTrips.tsx b/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}

diff --git a/src/pages/Travel/MyTripsPage.tsx b/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>