[VIP-Travel] Create Trip Details

src/ROUTES.ts

@@ -424,6 +424,8 @@ const ROUTES = {
     ONBOARD_MANAGE_EXPENSES: 'onboard/manage-expenses',
     ONBOARD_EXPENSIFY_CLASSIC: 'onboard/expensify-classic',
 
+    TRAVEL_DETAILS: 'r/:reportID/trip/:transactionID',
+
     TEACHERS_UNITE: 'teachersunite',
     I_KNOW_A_TEACHER: 'teachersunite/i-know-a-teacher',
     I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher',

src/SCREENS.ts

@@ -23,6 +23,9 @@ const SCREENS = {
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane',
+    TRAVEL: {
+        TRIP_DETAILS: 'Trip_Details',
+    },
     SETTINGS: {
         ROOT: 'Settings_Root',
         SHARE_CODE: 'Settings_Share_Code',
@@ -124,6 +127,7 @@ const SCREENS = {
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
         PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
+        TRIP_DETAILS: 'TripDetails',
     },
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
@@ -287,6 +291,7 @@ const SCREENS = {
     DETAILS_ROOT: 'Details_Root',
     PROFILE_ROOT: 'Profile_Root',
     PROCESS_MONEY_REQUEST_HOLD_ROOT: 'ProcessMoneyRequestHold_Root',
+    TRIP_DETAILS_ROOT: 'TripDetails_Root',
     REPORT_DESCRIPTION_ROOT: 'Report_Description_Root',
     REPORT_PARTICIPANTS_ROOT: 'ReportParticipants_Root',
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',

src/components/Icon/Expensicons.ts

@@ -157,6 +157,10 @@ import Workflows from '@assets/images/workflows.svg';
 import Workspace from '@assets/images/workspace-default-avatar.svg';
 import Wrench from '@assets/images/wrench.svg';
 import Zoom from '@assets/images/zoom.svg';
+import Bed from '@assets/images/bed.svg';
+import CarWithKey from '@assets/images/car-with-key.svg';
+import Plane from '@assets/images/plane.svg';
+import Train from '@assets/images/train.svg';
 
 export {
     ActiveRoomAvatar,
@@ -318,4 +322,8 @@ export {
     ChatBubbleReply,
     Lightbulb,
     DocumentPlus,
+    Bed,
+    CarWithKey,
+    Plane,
+    Train,
 };

src/components/TripDetailsMenuItem.tsx

@@ -0,0 +1,21 @@
+import type {ForwardedRef} from 'react';
+import React, {forwardRef} from 'react';
+import type {View} from 'react-native';
+import MenuItem from './MenuItem';
+import type {MenuItemProps} from './MenuItem';
+
+function TripDetailsMenuItem(props: MenuItemProps, ref: ForwardedRef<View>) {
+    return (
+        <MenuItem
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            shouldShowBasicTitle
+            shouldShowDescriptionOnTop
+        />
+    );
+}
+
+TripDetailsMenuItem.displayName = 'TripDetailsMenuItem';
+
+export default forwardRef(TripDetailsMenuItem);

src/languages/en.ts

@@ -2624,6 +2624,13 @@ export default {
         mute: 'Mute',
         unmute: 'Unmute',
     },
+    travel: {
+        flight: 'Flight',
+        hotel: 'Hotel',
+        trip: 'Trip',
+        details: 'Details',
+        tripSupport: 'Trip support'
+    },
     exitSurvey: {
         header: 'Before you go',
         reasonPage: {

src/languages/es.ts

@@ -3120,6 +3120,13 @@ export default {
         mute: 'Silenciar',
         unmute: 'Activar sonido',
     },
+    travel: {
+        flight: 'Vuelo',
+        hotel: 'Hotel',
+        trip: 'Viaje',
+        details: 'Detalles',
+        tripSupport: 'Soporte de Viaje'
+    },
     exitSurvey: {
         header: 'Antes de irte',
         reasonPage: {

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -337,6 +337,10 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({
     [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: () => require('../../../pages/ProcessMoneyRequestHoldPage').default as React.ComponentType,
 });
 
+const TripDetailsStackNavigator = createModalStackNavigator({
+    [SCREENS.TRIP_DETAILS_ROOT]: () => require('../../../pages/TravelDetails').default as React.ComponentType,
+});
+
 export {
     AddPersonalBankAccountModalStackNavigator,
     DetailsModalStackNavigator,
@@ -366,5 +370,6 @@ export {
     TaskModalStackNavigator,
     WalletStatementStackNavigator,
     ProcessMoneyRequestHoldStackNavigator,
+    TripDetailsStackNavigator,
     WorkspaceSettingsModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -137,6 +137,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
                         name="ProcessMoneyRequestHold"
                         component={ModalStackNavigators.ProcessMoneyRequestHoldStackNavigator}
                     />
+                    <Stack.Screen
+                        name="TripDetails"
+                        component={ModalStackNavigators.TripDetailsStackNavigator}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

src/libs/Navigation/linkingConfig/config.ts

@@ -585,6 +585,11 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD,
                     },
                 },
+                [SCREENS.RIGHT_MODAL.TRIP_DETAILS]: {
+                    screens: {
+                        [SCREENS.TRIP_DETAILS_ROOT]: ROUTES.TRAVEL_DETAILS,
+                    }
+                }
             },
         },
 

src/libs/Navigation/types.ts

@@ -523,6 +523,10 @@ type ProcessMoneyRequestHoldNavigatorParamList = {
     [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: undefined;
 };
 
+type TripDetailsNavigatorParamList = {
+    [SCREENS.TRIP_DETAILS_ROOT]: undefined;
+};
+
 type PrivateNotesNavigatorParamList = {
     [SCREENS.PRIVATE_NOTES.LIST]: undefined;
     [SCREENS.PRIVATE_NOTES.EDIT]: {
@@ -561,6 +565,7 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.EDIT_REQUEST]: NavigatorScreenParams<EditRequestNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.SIGN_IN]: NavigatorScreenParams<SignInNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.PROCESS_MONEY_REQUEST_HOLD]: NavigatorScreenParams<ProcessMoneyRequestHoldNavigatorParamList>;
+    [SCREENS.RIGHT_MODAL.TRIP_DETAILS]: NavigatorScreenParams<TripDetailsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.REFERRAL]: NavigatorScreenParams<ReferralDetailsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
 };

src/pages/TravelDetails.tsx

@@ -0,0 +1,41 @@
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItem from '@components/MenuItem';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import React from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import variables from '@styles/variables';
+import * as Link from '@userActions/Link';
+
+function TravelDetails() {
+    const {translate} = useLocalize();
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            testID={TravelDetails.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('travel.details')}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <MenuItem
+                title={translate('travel.tripSupport')}
+                icon={Expensicons.Phone}
+                iconWidth={variables.iconSizeMedium}
+                iconHeight={variables.iconSizeMedium}
+                interactive
+                onPress={() => {
+                    // Replace with user-support page.
+                    Link.openExternalLink('https://www.spotnana.com/contact/');
+                }}
+            />
+        </ScreenWrapper>
+    );
+}
+
+TravelDetails.displayName = 'TravelDetails';
+
+export default TravelDetails;

src/types/onyx/TripDetails.ts

@@ -0,0 +1,90 @@
+type DateISO8601 = {
+    iso8601: string;
+};
+
+type BasicTripInfo = {
+    tripId: string;
+    tripName: string;
+    tripDescription: string;
+    applicationId: string;
+    startDate: DateISO8601;
+    endDate: DateISO8601;
+};
+
+type IdType = {
+    id: string;
+};
+
+type EventSummary = {
+    id: string;
+    name: string;
+    description: string;
+    startDateTime: DateISO8601;
+    endDateTime: DateISO8601;
+    location: unknown;
+    contacts: IdType[];
+    documents: unknown[];
+    bookingGuidelines: unknown[];
+    allowedBookingTypes: unknown[];
+    eventUserRsvp: unknown;
+    contactInfoList: unknown;
+    companyId: IdType;
+    runningStatus: string;
+    status: string;
+    isRemovedParticipant: boolean;
+};
+
+type TripStatus =
+    | 'PENDING'
+    | 'CONFIRMED'
+    | 'ACTIVE'
+    | 'COMPLETED'
+    | 'CANCELLED'
+    | 'REFUNDED'
+    | 'VOIDED'
+    | 'PROCESSING'
+    | 'UNCONFIRMED'
+    | 'AIRLINE_CONTROL'
+    | 'PAYMENT_DECLINED'
+    | 'SCHEDULE_CHANGE'
+    | 'UNKNOWN'
+    | 'HOLD'
+    | 'APPROVAL_REQUESTED'
+    | 'APPROVAL_DENIED'
+    | 'CANCELLATION_IN_PROGRESS'
+    | 'INOPERATIVE_STATUS'
+    | 'FLIGHT_UNCONFIRMED_STATUS';
+
+type TripBookingStatus =
+    | 'UNKNOWN_STATUS'
+    | 'PENDING_STATUS'
+    | 'CONFIRMED_STATUS'
+    | 'ACTIVE_STATUS'
+    | 'COMPLETED_STATUS'
+    | 'CANCELLED_STATUS'
+    | 'REFUNDED_STATUS'
+    | 'VOIDED_STATUS'
+    | 'PROCESSING_STATUS'
+    | 'UNCONFIRMED_STATUS'
+    | 'AIRLINE_CONTROL_STATUS'
+    | 'PAYMENT_DECLINED_STATUS'
+    | 'SCHEDULE_CHANGE_STATUS'
+    | 'HOLD_STATUS'
+    | 'APPROVAL_REQUESTED_STATUS'
+    | 'APPROVAL_DENIED_STATUS'
+    | 'CANCELLATION_IN_PROGRESS_STATUS'
+    | 'INOPERATIVE_STATUS'
+    | 'FLIGHT_UNCONFIRMED_STATUS';
+
+type TripDetails = {
+    basicTripInfo: BasicTripInfo;
+    pnrs: unknown[];
+    pendingShellPnrs: unknown[];
+    pendingManualFormPnrs: unknown[];
+    tripStatus: TripStatus;
+    tripBookingStatus: TripBookingStatus;
+    eventSummary: EventSummary;
+    simplePnrs: unknown[];
+};
+
+export type {TripDetails, EventSummary, BasicTripInfo};