Travel Features Overview

// Source: src/pages/Travel/ManageTrips.tsx
const tripsFeatures: FeatureListItem[] = [
  {
    icon: illustrations.PiggyBank,
    translationKey: 'travel.features.saveMoney',
  },
  {
    icon: illustrations.TravelAlerts,
    translationKey: 'travel.features.alerts',
  },
];

// Source: src/pages/Travel/MyTripsPage.tsx
function MyTripsPage({route}: MyTripsPageProps) {
    const policyID = route.params?.policyID;
    const {translate} = useLocalize();

    return (
        <AccessOrNotFoundWrapper policyID={policyID}>
            <ScreenWrapper
                includeSafeAreaPaddingBottom={false}
                shouldEnablePickerAvoiding={false}
                shouldEnableMaxHeight
                testID="MyTripsPage"
                shouldShowOfflineIndicatorInWideScreen
            >
                <HeaderWithBackButton
                    title={translate('travel.header')}
                    shouldShowBackButton
                />
                <ManageTrips policyID={policyID} />
            </ScreenWrapper>
        </AccessOrNotFoundWrapper>
    );
}

// Source: src/libs/actions/Travel.ts
/**
 * Accept Spotnana terms and conditions to receive a proper token used for authenticating further actions
 */
function acceptSpotnanaTerms(domain?: string, policyID?: string) {
    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_TRAVEL_SETTINGS | typeof ONYXKEYS.TRAVEL_PROVISIONING>> = [
        {
            onyxMethod: 'merge',
            key: ONYXKEYS.NVP_TRAVEL_SETTINGS,
            value: {
                hasAcceptedTerms: true,
            },
        },
        {
            onyxMethod: 'merge',
            key: ONYXKEYS.TRAVEL_PROVISIONING,
            value: {
                isLoading: true,
                errors: null,
            },
        },
    ];

    const successData: Array<OnyxUpdate<typeof ONYXKEYS.TRAVEL_PROVISIONING | typeof ONYXKEYS.COLLECTION.POLICY>> = [
        {
            onyxMethod: 'merge',
            key: ONYXKEYS.TRAVEL_PROVISIONING,
            value: {
                isLoading: false,
            },
        },
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
            value: {
                travelSettings: {
                    hasAcceptedTerms: true,
                },
            },
        },
    ];

    return API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.ACCEPT_SPOTNANA_TERMS, params, {optimisticData, successData, failureData});
}

// Source: src/libs/actions/Travel.ts
function requestTravelAccess() {
    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_TRAVEL_SETTINGS>> = [
        {
            onyxMethod: 'merge',
            key: ONYXKEYS.NVP_TRAVEL_SETTINGS,
            value: {
                lastTravelSignupRequestTime: Date.now(),
            },
        },
    ];
    API.write(WRITE_COMMANDS.TRAVEL_SIGNUP_REQUEST, null, {optimisticData});
}

// Source: src/pages/Travel/ManageTrips.tsx
const navigateToBookTravelDemo = () => {
    Linking.openURL(CONST.BOOK_TRAVEL_DEMO_URL);
};

<Button
    text={translate('travel.bookDemo')}
    onPress={navigateToBookTravelDemo}
    accessibilityLabel={translate('travel.bookDemo')}
    style={[styles.w100, styles.mb3]}
    large
/>

// Source: src/pages/Travel/ManageTrips.tsx
<FeatureList
    menuItems={tripsFeatures}
    title={translate('travel.title')}
    subtitle={translate('travel.subtitle')}
    illustration={LottieAnimations.TripsEmptyState}
    illustrationStyle={[styles.mv4]}
    illustrationBackgroundColor={colors.blue600}
    titleStyles={styles.textHeadlineH1}
    contentPaddingOnLargeScreens={styles.p5}
/>

// Source: src/pages/Travel/ManageTrips.tsx
<BookTravelButton
    text={translate('travel.bookTravel')}
    shouldRenderErrorMessageBelowButton
    setShouldScrollToBottom={setShouldScrollToBottom}
    activePolicyID={policyID}
    large
/>