Set workspace address when attempting to Book Travel

src/components/FeatureList.tsx

@@ -7,6 +7,7 @@ import variables from '@styles/variables';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
+import DotIndicatorMessage from './DotIndicatorMessage';
 import type DotLottieAnimation from './LottieAnimations/types';
 import MenuItem from './MenuItem';
 import Section from './Section';
@@ -56,6 +57,9 @@ type FeatureListProps = {
     /** The style used for the title */
     titleStyles?: StyleProp<TextStyle>;
 
+    /** The error message to display for the CTA button */
+    ctaErrorMessage?: string;
+
     /** Padding for content on large screens */
     contentPaddingOnLargeScreens?: {padding: number};
 };
@@ -65,10 +69,11 @@ function FeatureList({
     subtitle = '',
     ctaText = '',
     ctaAccessibilityLabel = '',
-    onCtaPress,
+    onCtaPress = () => {},
     secondaryButtonText = '',
     secondaryButtonAccessibilityLabel = '',
-    onSecondaryButtonPress,
+    onSecondaryButtonPress = () => {},
+    ctaErrorMessage,
     menuItems,
     illustration,
     illustrationStyle,
@@ -120,6 +125,12 @@ function FeatureList({
                         large
                     />
                 )}
+                {ctaErrorMessage && (
+                    <DotIndicatorMessage
+                        messages={{error: ctaErrorMessage}}
+                        type="error"
+                    />
+                )}
                 <Button
                     text={ctaText}
                     onPress={onCtaPress}

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -621,7 +621,9 @@ function MoneyRequestView({
                         icon={Expensicons.Suitcase}
                         iconRight={Expensicons.NewWindow}
                         shouldShowRightIcon
-                        onPress={() => Link.openTravelDotLink(activePolicyID, CONST.TRIP_ID_PATH(tripID))}
+                        onPress={() => {
+                            Link.openTravelDotLink(activePolicyID, CONST.TRIP_ID_PATH(tripID));
+                        }}
                     />
                 )}
                 {shouldShowBillable && (

src/languages/en.ts

@@ -2029,6 +2029,7 @@ export default {
         trip: 'Trip',
         tripSummary: 'Trip summary',
         departs: 'Departs',
+        errorMessage: 'Something went wrong. Please try again later.',
     },
     workspace: {
         common: {

src/languages/es.ts

@@ -2064,6 +2064,7 @@ export default {
         trip: 'Viaje',
         tripSummary: 'Resumen del viaje',
         departs: 'Sale',
+        errorMessage: 'Ha ocurrido un error. Por favor, inténtalo mas tarde.',
     },
     workspace: {
         common: {

src/libs/Environment/Environment.ts

@@ -17,20 +17,6 @@ const OLDDOT_ENVIRONMENT_URLS = {
     [CONST.ENVIRONMENT.ADHOC]: CONST.STAGING_EXPENSIFY_URL,
 };
 
-const TRAVELDOT_ENVIRONMENT_URLS: Record<string, string> = {
-    [CONST.ENVIRONMENT.DEV]: CONST.STAGING_TRAVEL_DOT_URL,
-    [CONST.ENVIRONMENT.STAGING]: CONST.STAGING_TRAVEL_DOT_URL,
-    [CONST.ENVIRONMENT.PRODUCTION]: CONST.TRAVEL_DOT_URL,
-    [CONST.ENVIRONMENT.ADHOC]: CONST.STAGING_TRAVEL_DOT_URL,
-};
-
-const SPOTNANA_ENVIRONMENT_TMC_ID: Record<string, string> = {
-    [CONST.ENVIRONMENT.DEV]: CONST.STAGING_SPOTNANA_TMC_ID,
-    [CONST.ENVIRONMENT.STAGING]: CONST.STAGING_SPOTNANA_TMC_ID,
-    [CONST.ENVIRONMENT.PRODUCTION]: CONST.SPOTNANA_TMC_ID,
-    [CONST.ENVIRONMENT.ADHOC]: CONST.STAGING_SPOTNANA_TMC_ID,
-};
-
 /**
  * Are we running the app in development?
  */
@@ -68,12 +54,4 @@ function getOldDotEnvironmentURL(): Promise<string> {
     return getEnvironment().then((environment) => OLDDOT_ENVIRONMENT_URLS[environment]);
 }
 
-function getTravelDotEnvironmentURL(): Promise<string> {
-    return getEnvironment().then((environment) => TRAVELDOT_ENVIRONMENT_URLS[environment]);
-}
-
-function getSpotnanaEnvironmentTMCID(): Promise<string> {
-    return getEnvironment().then((environment) => SPOTNANA_ENVIRONMENT_TMC_ID[environment]);
-}
-
-export {getEnvironment, isInternalTestBuild, isDevelopment, isProduction, getEnvironmentURL, getOldDotEnvironmentURL, getTravelDotEnvironmentURL, getSpotnanaEnvironmentTMCID};
+export {getEnvironment, isInternalTestBuild, isDevelopment, isProduction, getEnvironmentURL, getOldDotEnvironmentURL};

src/libs/actions/Link.ts

@@ -30,6 +30,14 @@ Onyx.connect({
     },
 });
 
+let isTravelTestAccount = false;
+Onyx.connect({
+    key: ONYXKEYS.NVP_TRAVEL_SETTINGS,
+    callback: (value) => {
+        isTravelTestAccount = value?.testAccount ?? false;
+    },
+});
+
 function buildOldDotURL(url: string, shortLivedAuthToken?: string): Promise<string> {
     const hasHashParams = url.indexOf('#') !== -1;
     const hasURLParams = url.indexOf('?') !== -1;
@@ -70,17 +78,18 @@ function openOldDotLink(url: string) {
     );
 }
 
-function buildTravelDotURL(spotnanaToken?: string, postLoginPath?: string): Promise<string> {
-    return Promise.all([Environment.getTravelDotEnvironmentURL(), Environment.getSpotnanaEnvironmentTMCID()]).then(([environmentURL, tmcID]) => {
-        const authCode = spotnanaToken ? `authCode=${spotnanaToken}` : '';
-        const redirectURL = postLoginPath ? `redirectUrl=${Url.addLeadingForwardSlash(postLoginPath)}` : '';
-        const tmcIDParam = `tmcId=${tmcID}`;
+function buildTravelDotURL(spotnanaToken: string, postLoginPath?: string): string {
+    const environmentURL = isTravelTestAccount ? CONST.STAGING_TRAVEL_DOT_URL : CONST.TRAVEL_DOT_URL;
+    const tmcID = isTravelTestAccount ? CONST.STAGING_SPOTNANA_TMC_ID : CONST.SPOTNANA_TMC_ID;
 
-        const paramsArray = [authCode, tmcIDParam, redirectURL];
-        const params = paramsArray.filter(Boolean).join('&');
-        const travelDotDomain = Url.addTrailingForwardSlash(environmentURL);
-        return `${travelDotDomain}auth/code?${params}`;
-    });
+    const authCode = `authCode=${spotnanaToken}`;
+    const tmcIDParam = `tmcId=${tmcID}`;
+    const redirectURL = postLoginPath ? `redirectUrl=${Url.addLeadingForwardSlash(postLoginPath)}` : '';
+
+    const paramsArray = [authCode, tmcIDParam, redirectURL];
+    const params = paramsArray.filter(Boolean).join('&');
+    const travelDotDomain = Url.addTrailingForwardSlash(environmentURL);
+    return `${travelDotDomain}auth/code?${params}`;
 }
 
 /**
@@ -95,13 +104,26 @@ function openTravelDotLink(policyID: OnyxEntry<string>, postLoginPath?: string)
         policyID,
     };
 
-    asyncOpenURL(
-        // eslint-disable-next-line rulesdir/no-api-side-effects-method
-        API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.GENERATE_SPOTNANA_TOKEN, parameters, {})
-            .then((response) => (response?.spotnanaToken ? buildTravelDotURL(response.spotnanaToken, postLoginPath) : buildTravelDotURL()))
-            .catch(() => buildTravelDotURL()),
-        (travelDotURL) => travelDotURL,
-    );
+    return new Promise((_, reject) => {
+        const error = new Error('Failed to generate spotnana token.');
+
+        asyncOpenURL(
+            // eslint-disable-next-line rulesdir/no-api-side-effects-method
+            API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.GENERATE_SPOTNANA_TOKEN, parameters, {})
+                .then((response) => {
+                    if (!response?.spotnanaToken) {
+                        reject(error);
+                        throw error;
+                    }
+                    return buildTravelDotURL(response.spotnanaToken, postLoginPath);
+                })
+                .catch(() => {
+                    reject(error);
+                    throw error;
+                }),
+            (travelDotURL) => travelDotURL ?? '',
+        );
+    });
 }
 
 function getInternalNewExpensifyPath(href: string) {

src/libs/actions/Travel.ts

@@ -18,14 +18,26 @@ function acceptSpotnanaTerms() {
             },
         },
     ];
+    const error = new Error('Failed to generate spotnana token.');
 
-    asyncOpenURL(
-        // eslint-disable-next-line rulesdir/no-api-side-effects-method
-        API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.ACCEPT_SPOTNANA_TERMS, null, {optimisticData})
-            .then((response) => (response?.spotnanaToken ? buildTravelDotURL(response.spotnanaToken) : buildTravelDotURL()))
-            .catch(() => buildTravelDotURL()),
-        (travelDotURL) => travelDotURL,
-    );
+    return new Promise((_, reject) => {
+        asyncOpenURL(
+            // eslint-disable-next-line rulesdir/no-api-side-effects-method
+            API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.ACCEPT_SPOTNANA_TERMS, null, {optimisticData})
+                .then((response) => {
+                    if (!response?.spotnanaToken) {
+                        reject(error);
+                        throw error;
+                    }
+                    return buildTravelDotURL(response.spotnanaToken);
+                })
+                .catch(() => {
+                    reject(error);
+                    throw error;
+                }),
+            (travelDotURL) => travelDotURL ?? '',
+        );
+    });
 }
 
 // eslint-disable-next-line import/prefer-default-export

src/libs/asyncOpenURL/index.ts

@@ -1,14 +1,19 @@
 import {Linking} from 'react-native';
+import Log from '@libs/Log';
 import type AsyncOpenURL from './types';
 
 const asyncOpenURL: AsyncOpenURL = (promise, url) => {
     if (!url) {
         return;
     }
 
-    promise.then((params) => {
-        Linking.openURL(typeof url === 'string' ? url : url(params));
-    });
+    promise
+        .then((params) => {
+            Linking.openURL(typeof url === 'string' ? url : url(params));
+        })
+        .catch(() => {
+            Log.warn('[asyncOpenURL] error occured while opening URL', {url});
+        });
 };
 
 export default asyncOpenURL;

src/libs/asyncOpenURL/index.website.ts

@@ -1,4 +1,5 @@
 import {Linking} from 'react-native';
+import Log from '@libs/Log';
 import type AsyncOpenURL from './types';
 
 /**
@@ -13,9 +14,13 @@ const asyncOpenURL: AsyncOpenURL = (promise, url, shouldSkipCustomSafariLogic) =
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
     if (!isSafari || shouldSkipCustomSafariLogic) {
-        promise.then((params) => {
-            Linking.openURL(typeof url === 'string' ? url : url(params));
-        });
+        promise
+            .then((params) => {
+                Linking.openURL(typeof url === 'string' ? url : url(params));
+            })
+            .catch(() => {
+                Log.warn('[asyncOpenURL] error occured while opening URL', {url});
+            });
     } else {
         const windowRef = window.open();
         promise
@@ -25,7 +30,10 @@ const asyncOpenURL: AsyncOpenURL = (promise, url, shouldSkipCustomSafariLogic) =
                 }
                 windowRef.location = typeof url === 'string' ? url : url(params);
             })
-            .catch(() => windowRef?.close());
+            .catch(() => {
+                windowRef?.close();
+                Log.warn('[asyncOpenURL] error occured while opening URL', {url});
+            });
     }
 };
 

src/pages/Travel/ManageTrips.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Linking, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {FeatureListItem} from '@components/FeatureList';
 import FeatureList from '@components/FeatureList';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
@@ -14,6 +15,7 @@ import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 const tripsFeatures: FeatureListItem[] = [
     {
@@ -32,8 +34,16 @@ function ManageTrips() {
     const {translate} = useLocalize();
     const [travelSettings] = useOnyx(ONYXKEYS.NVP_TRAVEL_SETTINGS);
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);
+
+    const [ctaErrorMessage, setCtaErrorMessage] = useState('');
+
+    if (isEmptyObject(policy)) {
+        return <FullScreenLoadingIndicator />;
+    }
 
     const hasAcceptedTravelTerms = travelSettings?.hasAcceptedTerms;
+    const hasPolicyAddress = !isEmptyObject(policy?.address);
 
     const navigateToBookTravelDemo = () => {
         Linking.openURL(CONST.BOOK_TRAVEL_DEMO_URL);
@@ -49,12 +59,22 @@ function ManageTrips() {
                     ctaText={translate('travel.bookTravel')}
                     ctaAccessibilityLabel={translate('travel.bookTravel')}
                     onCtaPress={() => {
+                        if (!hasPolicyAddress) {
+                            Navigation.navigate(ROUTES.WORKSPACE_PROFILE_ADDRESS.getRoute(activePolicyID ?? '-1'));
+                            return;
+                        }
                         if (!hasAcceptedTravelTerms) {
                             Navigation.navigate(ROUTES.TRAVEL_TCS);
                             return;
                         }
-                        Link.openTravelDotLink(activePolicyID);
+                        if (ctaErrorMessage) {
+                            setCtaErrorMessage('');
+                        }
+                        Link.openTravelDotLink(activePolicyID)?.catch(() => {
+                            setCtaErrorMessage(translate('travel.errorMessage'));
+                        });
                     }}
+                    ctaErrorMessage={ctaErrorMessage}
                     illustration={Illustrations.EmptyStateTravel}
                     illustrationStyle={[styles.mv4, styles.tripIllustrationSize]}
                     secondaryButtonText={translate('travel.bookDemo')}

src/pages/Travel/TravelTerms.tsx

@@ -21,9 +21,7 @@ function TravelTerms() {
     const {translate} = useLocalize();
     const {canUseSpotnanaTravel} = usePermissions();
     const [hasAcceptedTravelTerms, setHasAcceptedTravelTerms] = useState(false);
-    const [error, setError] = useState(false);
-
-    const errorMessage = error ? translate('travel.termsAndConditions.error') : '';
+    const [errorMessage, setErrorMessage] = useState('');
 
     const toggleTravelTerms = () => {
         setHasAcceptedTravelTerms(!hasAcceptedTravelTerms);
@@ -34,7 +32,7 @@ function TravelTerms() {
             return;
         }
 
-        setError(false);
+        setErrorMessage('');
     }, [hasAcceptedTravelTerms]);
 
     const AgreeToTheLabel = useCallback(
@@ -86,16 +84,19 @@ function TravelTerms() {
                                 isDisabled={!hasAcceptedTravelTerms}
                                 onSubmit={() => {
                                     if (!hasAcceptedTravelTerms) {
-                                        setError(true);
+                                        setErrorMessage(translate('travel.termsAndConditions.error'));
                                         return;
                                     }
+                                    if (errorMessage) {
+                                        setErrorMessage('');
+                                    }
 
-                                    Travel.acceptSpotnanaTerms();
-                                    setError(false);
-                                    Navigation.goBack();
+                                    Travel.acceptSpotnanaTerms()
+                                        .then(() => Navigation.goBack())
+                                        .catch(() => setErrorMessage(translate('travel.errorMessage')));
                                 }}
                                 message={errorMessage}
-                                isAlertVisible={error || !!errorMessage}
+                                isAlertVisible={!!errorMessage}
                                 containerStyles={[styles.mh0, styles.mt5]}
                             />
                         </ScrollView>

src/types/onyx/TravelSettings.ts

@@ -5,6 +5,9 @@ type TravelSettings = {
 
     /** Whether the user has completed the travel terms and conditions checkbox */
     hasAcceptedTerms: boolean;
+
+    /** Whether the user is setup for staging travelDot */
+    testAccount?: boolean;
 };
 
 /** Model of workspace travel information to connect with Spotnana */