[CRITICAL][VIP-Travel] Create a New Travel Page (NewDot)

[stitesExpensify]

VIP-Travel Implementation Issue

Tracking Issue: https://github.com/Expensify/Expensify/issues/333471
Project: [#whatsnext] #Travel (view)
Relevant Design Doc Section: https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.g4z1h2y99w97

Feature Description

1. Add a new button to the navigation
2. Add a new route /travel
3. Add a new page for that route displaying a Book Travel button

Detailed Instructions

For this change, we will need to add the above illustrations (Main illustration, piggybank, alarm, and suitcase for the header) to our assets/images/product-illustrations folder. Then, we will import them from Illustrations.ts to make them available.
A new button will be added to BottomTabBar for our trips section. This button will only be visible to users on the beta. On click, it will take the user to the new TravelMenu page, with My Trips (the only option) selected by default. For this navigation, we will have to:
Add a new screen, TRAVEL_HOME here.
Add a new tab for that screen in the BottomTabNavigator, pointing to the new TravelMenu component.
Add it to the BottomTabNavigatorParamList.
Add a new route, ROUTES.TRAVEL_HOME, which, like ALL_SETTINGS, won’t be an actual URL. Just constant to forward to the section we want.
Add the screen to LinkingConfig, pointing to the Screen for MyTripsPage (below)

A new page, TravelMenu.ts (left hand) will be created in src/pages/Travel:
It will mimic the AllSettings page, but with a single menuItem, My Trips, which will take the user to the new MyTrips page via a new route, ROUTES.TRAVEL_MY_TRIPS. It will be selected by default.

A new component, ManageTrips.ts will be created in src/components/Travel:
It will be formatted to display the full visual contents shown above.
It will include a that has 2 functions when it is clicked
If the user has NVP.travelSettings.hasAcceptedTerms==true then it will call generateSpotnanaUserToken (described below) and then open travel.expensify.com
If the user has not completed the T&C then we will open the T&C page via a new route, ROUTES.TRAVEL_TCS

A new page, MyTripsPage.ts (central panel) will be created in src/pages/Travel:
We will add a new route for it, TRAVEL_MY_TRIPS.
Additionally, we will add a new screen, with the same name, and we will link it to the route here.
It will have a HeaderWithBackButton component which will receive the following existing parameters:
shouldShowBackButton = false
title = “My trips”
Additionally, we’ll add a new Icon parameter to HeaderWithBackButton. If populated, we’ll display it in the same manner we do here, with CONST.AVATAR_SIZE.DEFAULT as the size.
Lastly, it will simply display the ManageTrips component described above.
If the user is not on the travel beta, the "Book or Manage Travel" button will be replaced with a "Coming soon" label

Manual Test Steps

1. Sign into New Expensify on an account not on the beta
2. Ensure there is a travel button in the navigation
3. Choose travel
4. Ensure that the page says "Coming Soon"

---

1. Sign into New Expensify on an account that is on the beta, with a workspace not yet provisioned for Travel
2. Ensure there is a travel button in the navigation
3. Choose travel
4. Ensure that the page has a "Book or Manage Travel" button
5. Click the button and ensure that the Terms and Conditions modal is shown
6. Complete the T&C
7. Click the "book or manage travel" button again
8. Ensure you are sent to travel.expensify.com and are signed in

Automated Tests

1. There should be an automated test for the generateUserToken action

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016aeb495e2d4c3ed7
• Upwork Job ID: 1760758392406511616
• Last Price Increase: 2024-02-22

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016aeb495e2d4c3ed7

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @alitoshmatov (Internal)

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[stitesExpensify]

Re-assigning this to Ted since he is curating this implementation

[stitesExpensify]

Temporarily removing c+ since this project has not started yet