[HOLD for payment 2025-01-02] [Medium] Create Trip Details

[stitesExpensify]

VIP-Travel Implementation Issue

Tracking Issue: https://github.com/Expensify/Expensify/issues/333471
Project: [#whatsnext] #Travel
Relevant Design Doc Section: https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit#bookmark=id.lgcmthyxnpmx

This issue is for creating a new trip details modal:

A new page, TravelDetails.ts will be created in src/pages/Travel:

• It will receive the transactionID as a route parameter, which we’ll use to retrieve the full transaction via withOnyx, and, from there, we’ll display the travel-related information
• It will include a HeaderWithBackButton component with either “Flight Details” or “Hotel Details” as the title, depending on whether it is a flight or a hotel booking. Similarly, it will either display a plane or a hotel icon, which we will pass to HeaderWithBackButton through the new parameter added here. - - For other travel-related expenses (Trains, car rental), the title will default to the generic “Travel Details” and the plane icon (we can change this down the line).
• The itinerary and confirmation number elements will be displayed using the existing MenuItemWithTopDescription component with the interactive parameter set to false. For the itinerary’s arrow for flights, we can use the ➜ unicode character.
• A new component, TripDetailsMenuItem will be created to display the detailed itinerary (with the airline, airports, etc). It will receive the travel-related information from the transaction as a parameter and will be formatted as displayed above. Since the user can’t interact with the element in any way, there is no need for further considerations.
• The trip support link will be displayed using the existing MenuItem component, passing our phone icon as the icon. On click, it will take the user to Spotnana’s support page.

Routes table:
https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit#bookmark=id.gn6jbl2udlnx

Issue Owner

Current Issue Owner: @twisterdotcom

[cdOut]

Hello, I’m Tymoteusz from Software Mansion, the expert agency, and I’d like to work on this task.

[twisterdotcom]

Adding a C+ here for Travel reviews: @shubham1206agra

[twisterdotcom]

Only assigned on Friday. We can give them a day here Melvin.

[melvin-bot]

@twisterdotcom, @shubham1206agra, @cdOut Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[twisterdotcom]

Are we waiting on anything internal here?