Merge pull request #49602 from software-mansion-labs/use-newdot-travel-page-on-olddot

AndrewGable · web-flow · commit fb81e1c16f79 · 2024-10-17T14:28:15.000-06:00
[HybridApp] Allow classic experience users to use NewDot travel page
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -441,6 +441,9 @@ const ONYXKEYS = {
     /** Stores recently used currencies */
     RECENTLY_USED_CURRENCIES: 'nvp_recentlyUsedCurrencies',
 
+    /** States whether we transitioned from OldDot to show only certain group of screens. It should be undefined on pure NewDot. */
+    IS_SINGLE_NEW_DOT_ENTRY: 'isSingleNewDotEntry',
+
     /** Company cards custom names */
     NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES: 'nvp_expensify_ccCustomNames',
 
@@ -1004,6 +1007,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx;
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;
     [ONYXKEYS.LAST_ROUTE]: string;
+    [ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY]: boolean | undefined;
     [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean;
     [ONYXKEYS.SHOULD_SHOW_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
     [ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES]: Record<string, string>;
diff --git a/src/components/InitialURLContextProvider.tsx b/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) => {
diff --git a/src/components/ScreenWrapper.tsx b/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';
@@ -161,6 +161,15 @@ 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, () => {
+        NativeModules.HybridAppModule?.closeReactNativeApp(false, false);
+    });
+
     const panResponder = useRef(
         PanResponder.create({
             onStartShouldSetPanResponderCapture: (_e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS,
diff --git a/src/hooks/useOnboardingFlow.ts b/src/hooks/useOnboardingFlow.ts
@@ -21,14 +21,16 @@ function useOnboardingFlowRouter() {
         selector: hasCompletedHybridAppOnboardingFlowSelector,
     });
 
+    const [isSingleNewDotEntry, isSingleNewDotEntryMetadata] = useOnyx(ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY);
+
     useEffect(() => {
-        if (isLoadingOnyxValue(isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata)) {
+        if (isLoadingOnyxValue(isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata, isSingleNewDotEntryMetadata)) {
             return;
         }
 
         if (NativeModules.HybridAppModule) {
             // When user is transitioning from OldDot to NewDot, we usually show the explanation modal
-            if (isHybridAppOnboardingCompleted === false) {
+            if (isHybridAppOnboardingCompleted === false && !isSingleNewDotEntry) {
                 Navigation.navigate(ROUTES.EXPLANATION_MODAL_ROOT);
             }
 
@@ -43,7 +45,7 @@ function useOnboardingFlowRouter() {
         if (!NativeModules.HybridAppModule && isOnboardingCompleted === false) {
             OnboardingFlow.startOnboardingFlow();
         }
-    }, [isOnboardingCompleted, isHybridAppOnboardingCompleted, isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata]);
+    }, [isOnboardingCompleted, isHybridAppOnboardingCompleted, isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata, isSingleNewDotEntryMetadata, isSingleNewDotEntry]);
 
     return {isOnboardingCompleted, isHybridAppOnboardingCompleted};
 }
diff --git a/src/libs/TripReservationUtils.ts b/src/libs/TripReservationUtils.ts
@@ -1,5 +1,6 @@
 import {Str} from 'expensify-common';
 import type {Dispatch, SetStateAction} from 'react';
+import {NativeModules} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
@@ -13,6 +14,7 @@ import type Transaction from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
 import * as Link from './actions/Link';
+import Log from './Log';
 import Navigation from './Navigation/Navigation';
 import * as PolicyUtils from './PolicyUtils';
 
@@ -40,6 +42,14 @@ Onyx.connect({
     },
 });
 
+let isSingleNewDotEntry: boolean | undefined;
+Onyx.connect({
+    key: ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY,
+    callback: (val) => {
+        isSingleNewDotEntry = val;
+    },
+});
+
 function getTripReservationIcon(reservationType: ReservationType): IconAsset {
     switch (reservationType) {
         case CONST.RESERVATION_TYPE.FLIGHT:
@@ -91,8 +101,17 @@ function bookATrip(translate: LocaleContextProps['translate'], setCtaErrorMessag
     if (ctaErrorMessage) {
         setCtaErrorMessage('');
     }
-    Link.openTravelDotLink(activePolicyID)?.catch(() => {
-        setCtaErrorMessage(translate('travel.errorMessage'));
-    });
+    Link.openTravelDotLink(activePolicyID)
+        ?.then(() => {
+            if (!NativeModules.HybridAppModule || !isSingleNewDotEntry) {
+                return;
+            }
+
+            Log.info('[HybridApp] Returning to OldDot after opening TravelDot');
+            NativeModules.HybridAppModule.closeReactNativeApp(false, false);
+        })
+        ?.catch(() => {
+            setCtaErrorMessage(translate('travel.errorMessage'));
+        });
 }
 export {getTripReservationIcon, getReservationsFromTripTransactions, getTripEReceiptIcon, bookATrip};
diff --git a/src/libs/actions/Link.ts b/src/libs/actions/Link.ts
@@ -111,7 +111,7 @@ function openTravelDotLink(policyID: OnyxEntry<string>, postLoginPath?: string)
         policyID,
     };
 
-    return new Promise((_, reject) => {
+    return new Promise((resolve, reject) => {
         const error = new Error('Failed to generate spotnana token.');
 
         asyncOpenURL(
@@ -122,7 +122,9 @@ function openTravelDotLink(policyID: OnyxEntry<string>, postLoginPath?: string)
                         reject(error);
                         throw error;
                     }
-                    return buildTravelDotURL(response.spotnanaToken, postLoginPath);
+                    const travelURL = buildTravelDotURL(response.spotnanaToken, postLoginPath);
+                    resolve(undefined);
+                    return travelURL;
                 })
                 .catch(() => {
                     reject(error);
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
@@ -482,28 +482,43 @@ function signUpUser() {
 function signInAfterTransitionFromOldDot(transitionURL: string) {
     const [route, queryParams] = transitionURL.split('?');
 
-    const {email, authToken, encryptedAuthToken, accountID, autoGeneratedLogin, autoGeneratedPassword, clearOnyxOnStart, completedHybridAppOnboarding} = 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},
-            [ONYXKEYS.NVP_TRYNEWDOT]: {classicRedirect: {completedHybridAppOnboarding: completedHybridAppOnboarding === 'true'}},
-        }).then(App.openApp);
+    const {email, authToken, encryptedAuthToken, accountID, autoGeneratedLogin, autoGeneratedPassword, clearOnyxOnStart, completedHybridAppOnboarding, isSingleNewDotEntry, primaryLogin} =
+        Object.fromEntries(
+            queryParams.split('&').map((param) => {
+                const [key, value] = param.split('=');
+                return [key, value];
+            }),
+        );
+
+    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.ACCOUNT]: {primaryLogin},
+                    [ONYXKEYS.CREDENTIALS]: {autoGeneratedLogin, autoGeneratedPassword},
+                    [ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY]: isSingleNewDotEntry === 'true',
+                    [ONYXKEYS.NVP_TRYNEWDOT]: {classicRedirect: {completedHybridAppOnboarding: completedHybridAppOnboarding === 'true'}},
+                }),
+            )
+            .then(App.openApp)
+            .catch((error) => {
+                Log.hmmm('[HybridApp] Initialization of HybridApp has failed. Forcing transition', {error});
+            })
+            .finally(() => {
+                resolve(`${route}?singleNewDotEntry=${isSingleNewDotEntry}` as Route);
+            });
+    });
 
-    return route as Route;
+    return setSessionDataAndOpenApp;
 }
 
 /**
diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx
@@ -118,6 +118,8 @@ jest.mock('@react-navigation/native', () => {
         useFocusEffect: jest.fn(),
         useIsFocused: () => true,
         useRoute: () => jest.fn(),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        UNSTABLE_usePreventRemove: () => jest.fn(),
         useNavigation: () => ({
             navigate: jest.fn(),
             addListener: () => jest.fn(),
@@ -231,7 +233,6 @@ test('[ReportScreen] should render ReportScreen', async () => {
         ...reportCollectionDataSet,
         ...reportActionsCollectionDataSet,
     });
-
     await measureRenders(
         <ReportScreenWrapper
             navigation={navigation}
@@ -311,7 +312,6 @@ test('[ReportScreen] should render report list', async () => {
         ...reportCollectionDataSet,
         ...reportActionsCollectionDataSet,
     });
-
     await measureRenders(
         <ReportScreenWrapper
             navigation={navigation}
diff --git a/tests/perf-test/SearchRouter.perf-test.tsx b/tests/perf-test/SearchRouter.perf-test.tsx
@@ -52,6 +52,8 @@ jest.mock('@react-navigation/native', () => {
         useFocusEffect: jest.fn(),
         useIsFocused: () => true,
         useRoute: () => jest.fn(),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        UNSTABLE_usePreventRemove: () => jest.fn(),
         useNavigation: () => ({
             navigate: jest.fn(),
             addListener: () => jest.fn(),

Original file line number	Diff line number	Diff line change
`@@ -21,14 +21,16 @@ function useOnboardingFlowRouter() {`
`21`	`21`	`selector: hasCompletedHybridAppOnboardingFlowSelector,`
`22`	`22`	`});`
`23`	`23`
	`24`	`+ const [isSingleNewDotEntry, isSingleNewDotEntryMetadata] = useOnyx(ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY);`
	`25`	`+`
`24`	`26`	`useEffect(() => {`
`25`		`- if (isLoadingOnyxValue(isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata)) {`
	`27`	`+ if (isLoadingOnyxValue(isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata, isSingleNewDotEntryMetadata)) {`
`26`	`28`	`return;`
`27`	`29`	`}`
`28`	`30`
`29`	`31`	`if (NativeModules.HybridAppModule) {`
`30`	`32`	`// When user is transitioning from OldDot to NewDot, we usually show the explanation modal`
`31`		`- if (isHybridAppOnboardingCompleted === false) {`
	`33`	`+ if (isHybridAppOnboardingCompleted === false && !isSingleNewDotEntry) {`
`32`	`34`	`Navigation.navigate(ROUTES.EXPLANATION_MODAL_ROOT);`
`33`	`35`	`}`
`34`	`36`
`@@ -43,7 +45,7 @@ function useOnboardingFlowRouter() {`
`43`	`45`	`if (!NativeModules.HybridAppModule && isOnboardingCompleted === false) {`
`44`	`46`	`OnboardingFlow.startOnboardingFlow();`
`45`	`47`	`}`
`46`		`- }, [isOnboardingCompleted, isHybridAppOnboardingCompleted, isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata]);`
	`48`	`+ }, [isOnboardingCompleted, isHybridAppOnboardingCompleted, isOnboardingCompletedMetadata, isHybridAppOnboardingCompletedMetadata, isSingleNewDotEntryMetadata, isSingleNewDotEntry]);`
`47`	`49`
`48`	`50`	`return {isOnboardingCompleted, isHybridAppOnboardingCompleted};`
`49`	`51`	`}`