[Medium] Create Trip Details

[stitesExpensify]

VIP-Travel Implementation Issue

Tracking Issue: https://github.com/Expensify/Expensify/issues/333471
Project: https://github.com/orgs/Expensify/projects/112/
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: @shubham1206agra

[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?

[cdOut]

No, Im working on creating a draft PR for this issue by tomorrow.

[twisterdotcom]

Nice, draft PR is in!

[twisterdotcom]

Same Q, answer in one place is fine: #37824 (comment)

[cdOut]

@twisterdotcom both PRs are linked, we are currently waiting for the backend implementation, since right now we basically work on dummy data.

From what I know it has been decided that we will hold off on these PRs with further reviews until we get backend access, you can refer to this decision here.

[twisterdotcom]

Still waiting on webhooks.

[kevinksullivan]

Demoting to HIGH, as I don't think this prevents launching to 5k customers or announcing. Also, conversation on design is ongoing here, so this may take a few more days to nail down.

https://expensify.slack.com/archives/C05S5EV2JTX/p1721737498827189

[melvin-bot]

This issue has not been updated in over 15 days. @twisterdotcom, @shubham1206agra, @cdOut eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

@twisterdotcom, @shubham1206agra, @cdOut, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[shubham1206agra]

@twisterdotcom Please reopen this

[blazejkustra]

Hey! I'm going to take over from @cdOut. Feel free to tag me when you're ready to revisit this issue 😄

[stitesExpensify]

@blazejkustra We're ready!

[blazejkustra]

Update: I started implementing this screen but I'm a bit blocked, waiting on responses on slack here

[blazejkustra]

Update: PR is ready for internal review. Sorry for now updating here directly, I was doing it daily on #vip-travel slack channel