[VIP][Travel] Add book travel demo button

src/CONST.ts

@@ -3297,6 +3297,7 @@ const CONST = {
     },
 
     CONCIERGE_TRAVEL_URL: 'https://community.expensify.com/discussion/7066/introducing-concierge-travel',
+    BOOK_TRAVEL_DEMO_URL: 'https://calendly.com/d/ck2z-xsh-q97/expensify-travel-demo-travel-page',
     SCREEN_READER_STATES: {
         ALL: 'all',
         ACTIVE: 'active',

src/components/FeatureList.tsx

@@ -32,6 +32,15 @@ type FeatureListProps = {
     /** Action to call on cta button press */
     onCtaPress?: () => void;
 
+    /** Text of the secondary button button */
+    secondaryButtonText?: string;
+
+    /** Accessibility label for the secondary button */
+    secondaryButtonAccessibilityLabel?: string;
+
+    /** Action to call on secondary button press */
+    onSecondaryButtonPress?: () => void;
+
     /** A list of menuItems representing the feature list. */
     menuItems: FeatureListItem[];
 
@@ -57,6 +66,9 @@ function FeatureList({
     ctaText = '',
     ctaAccessibilityLabel = '',
     onCtaPress,
+    secondaryButtonText = '',
+    secondaryButtonAccessibilityLabel = '',
+    onSecondaryButtonPress,
     menuItems,
     illustration,
     illustrationStyle,
@@ -99,6 +111,15 @@ function FeatureList({
                         </View>
                     ))}
                 </View>
+                {secondaryButtonText && (
+                    <Button
+                        text={secondaryButtonText}
+                        onPress={onSecondaryButtonPress}
+                        accessibilityLabel={secondaryButtonAccessibilityLabel}
+                        style={[styles.w100, styles.mb3]}
+                        large
+                    />
+                )}
                 <Button
                     text={ctaText}
                     onPress={onCtaPress}

src/languages/en.ts

@@ -1866,6 +1866,7 @@ export default {
             alerts: 'Get realtime updates and alerts',
         },
         bookTravel: 'Book travel',
+        bookDemo: 'Book demo',
         termsAndConditions: {
             header: 'Before we continue...',
             title: 'Please read the Terms & Conditions for travel',

src/languages/es.ts

@@ -1890,6 +1890,7 @@ export default {
             alerts: 'Obtén actualizaciones y alertas en tiempo real',
         },
         bookTravel: 'Reservar viajes',
+        bookDemo: 'Book demo',
         termsAndConditions: {
             header: 'Antes de continuar...',
             title: 'Por favor, lee los Términos y condiciones para reservar viajes',

src/pages/Travel/ManageTrips.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Linking, View} from 'react-native';
 import type {FeatureListItem} from '@components/FeatureList';
 import FeatureList from '@components/FeatureList';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -10,6 +10,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import colors from '@styles/theme/colors';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import getTripIllustrationStyle from './getTripIllustrationStyle';
 
@@ -30,6 +31,10 @@ function ManageTrips() {
     const {translate} = useLocalize();
     const illustrationStyle = getTripIllustrationStyle();
 
+    const navigateToBookTravelDemo = () => {
+        Linking.openURL(CONST.BOOK_TRAVEL_DEMO_URL);
+    };
+
     return (
         <ScrollView contentContainerStyle={styles.pt3}>
             <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
@@ -42,6 +47,9 @@ function ManageTrips() {
                     onCtaPress={() => {
                         Navigation.navigate(ROUTES.TRAVEL_TCS);
                     }}
+                    secondaryButtonText={translate('travel.bookDemo')}
+                    secondaryButtonAccessibilityLabel={translate('travel.bookDemo')}
+                    onSecondaryButtonPress={navigateToBookTravelDemo}
                     illustration={LottieAnimations.Plane}
                     illustrationStyle={illustrationStyle}
                     illustrationBackgroundColor={colors.blue600}