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

[stitesExpensify]

VIP-Travel Implementation Issue

Tracking Issue: https://github.com/Expensify/Expensify/issues/333471 Project: https://github.com/orgs/Expensify/projects/112/views/1?layout=board 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](https://github.com/Expensify/App/blob/main/src/components/Icon/Illustrations.ts) to make them available. A new button will be added to [BottomTabBar](https://github.com/Expensify/App/blob/546df83e27609b720dd186241599f6f8c15dfec7/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx#L41) 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](https://github.com/Expensify/App/blob/38c6c164c91ccc4c1a31e513301ec94436eac9b6/src/SCREENS.ts#L13). Add a new tab for that screen in the [BottomTabNavigator](https://github.com/Expensify/App/blob/38c6c164c91ccc4c1a31e513301ec94436eac9b6/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx#L25), pointing to the new TravelMenu component. Add it to the [BottomTabNavigatorParamList](https://github.com/Expensify/App/blob/38c6c164c91ccc4c1a31e513301ec94436eac9b6/src/libs/Navigation/types.ts#L455). Add a [new route](https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.gn6jbl2udlnx), ROUTES.TRAVEL_HOME, which, like [ALL_SETTINGS](https://github.com/Expensify/App/blob/38c6c164c91ccc4c1a31e513301ec94436eac9b6/src/ROUTES.ts#L21), won’t be an actual URL. Just constant to forward to the section we want. Add the screen to [LinkingConfig](https://github.com/Expensify/App/blob/2fe384c5a2279d65f083d828f825dc9368a3f2ef/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts#L4), 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](https://github.com/Expensify/App/blob/main/src/pages/home/sidebar/AllSettingsScreen.tsx) page, but with a single [menuItem](https://github.com/Expensify/App/blob/e6fee5f073a7e4518db429918b9dc35e6ef65e48/src/pages/home/sidebar/AllSettingsScreen.tsx#L39), My Trips, which will take the user to the new MyTrips page via [a new route](https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.gn6jbl2udlnx), 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](https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.r5xfj4j93xtb)) 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](https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.gn6jbl2udlnx), ROUTES.TRAVEL_TCS A new page, MyTripsPage.ts (central panel) will be created in src/pages/Travel: We will add [a new route](https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.gn6jbl2udlnx) 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](https://github.com/Expensify/App/blob/2fe384c5a2279d65f083d828f825dc9368a3f2ef/src/libs/Navigation/linkingConfig/config.ts#L40). It will have a [HeaderWithBackButton](https://github.com/Expensify/App/blob/main/src/components/HeaderWithBackButton/index.tsx) component which will receive the following existing parameters: shouldShowBackButton = false title = “My trips” Additionally, we’ll add a new Icon parameter to [HeaderWithBackButton](https://github.com/Expensify/App/blob/main/src/components/HeaderWithBackButton/index.tsx). If populated, we’ll display it in the same manner we do [here](https://github.com/Expensify/App/blob/9ab4fe92dcbac8252998febf6fa24a080a196a70/src/components/AvatarWithDisplayName.tsx#L117-L121), with CONST.AVATAR_SIZE.DEFAULT as the size. Lastly, it will simply display the [ManageTrips](https://docs.google.com/document/d/122DLLTuCsU4NC3c7rNiy4UF8bZxVlLEWSy3yncqCTcQ/edit?pli=1#bookmark=id.1qztafg5v0fc) 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"

5. Sign into New Expensify on an account that is on the beta, with a workspace not yet provisioned for Travel
6. Ensure there is a travel button in the navigation
7. Choose travel
8. Ensure that the page has a "Book or Manage Travel" button
9. Click the button and ensure that the Terms and Conditions modal is shown
10. Complete the T&C
11. Click the "book or manage travel" button again
12. 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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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

[WojtekBoman]

Hey! I’m Wojtek from Software Mansion, an expert agency, and I’d like to work on this issue.

[cdOut]

Hello, I'm Tymoteusz from Software Mansion, the expert agency, and I'd also like to work on this issue alongside Wojtek.

[smelaa]

Hello, I'm Ola from Software Mansion, the expert agency, and I'd also like to work on this issue alongside Wojtek and Tymoteusz.

[WojtekBoman]

@twisterdotcom Where can we obtain assets for this page? Do we have a design in Figma or something like that?

[twisterdotcom]

Yup, shared here! https://www.figma.com/file/rOyUSHbLLyp64emz6WeoPW/Travel?type=design&node-id=176%3A8940&mode=design&t=TbMLqBmn9HYlxzld-1

[WojtekBoman]

@twisterdotcom I have a question about the asset on this page:

I'd like to confirm that, is it a static image or a lottie animation? If it is a lottie animation, could you share it for us?

[twisterdotcom]

@WojtekBoman right now it's a static image. Let's move forward fast with that and if we can replace it in the future if we want to.

[WojtekBoman]

Ok, I think that it's clear now how we should style this page :) However, I'd like to ask about API. Is the backend ready? If so, I'd like to ask how we can call from the front-end side the commands described in the design doc (command description here). Do we have a description somewhere of how we should build an API request?

[stitesExpensify]

The backend is not ready yet. For now it would be great if you could just create the UI for all of the travel issues with non-functional buttons if the API call doesn't already exist, and then hide it all behind the spotnanaTravel beta. Nobody should be able to see any of this project if they are not on the beta (for now)

[twisterdotcom]

@WojtekBoman, @cdOut and @smelaa - We're going to deprioritise this issue for now. We have some design conversations with our travel provider that need to be considered and we do not want to add yet:

1. A nav option for Travel in the bottom bar
2. A main page for Travel at all

We'll replace that with a "Book Travel" option in Global Create instead. But we will still require the right hand panes for:

• Accepting Terms before navigating to travel.expensify.com: https://github.com/Expensify/App/issues/37102
• An interstitial before navigating through to travel.expensify.com (ie, the screen above https://github.com/Expensify/App/issues/37103#issuecomment-1978624947)

This option in Global Create will add a row that looks like this:

[WojtekBoman]

@twisterdotcom

Ok, I've started refactoring New Travel Page and I'd like to confirm if it works as it should :)

When user has access to the SpotnanaTravel beta (Terms & Conditions will be opened when we click on the Book or manage button):

https://github.com/Expensify/App/assets/47774969/add41b12-d43b-4dcc-88fb-6ac59cb8ec60

When New Travel Page is hidden:

https://github.com/Expensify/App/assets/47774969/464b55b4-8cd8-476c-8200-32ad59fa1f84

It it works as expected, I will prepare a PR and then we will connect it with Terms & Conditions page :)

[WojtekBoman]

I have one question regarding this issue :) Could we include it in the PR for Terms & Conditions page as it has low priority?

[twisterdotcom]

Yes, you can.

[cdOut]

As an update, this feature is going to be handled in a draft PR alongside the Terms and Conditions modal, it will be created and linked to this issue today.

[twisterdotcom]

How is this one coming along @cdOut?

[twisterdotcom]

See PR comment here: https://github.com/Expensify/App/pull/38469#issuecomment-2048557477

[shawnborton]

Design feedback:

• use our standard page header styles (remove the illustration and headline text version)
• use "Book travel" as the page header label, to match the Global Create option label
• Use 220px height for the empty state card header (this is what we use elsewhere)
• Resize the illustration - we can provide a new asset for this
• Use 20px of inner padding for the card content
• Use an h1 for the "Book or manage your trips" title
• Do not truncate the list items in the empty state card

It should look more like this:

Updated asset to use in the header at 190x172: emptystate__booktravel.svg.zip

[smelaa]

Hi @shawnborton Almost everything is updated and now it looks like that:

The text content is slightly different though as I was following this comment.

The only point from your feedback I still need to address is this one:

• Use 220px height for the empty state card header (this is what we use elsewhere)

Could you please give me an example where else it is used? I am not sure what exactly "the empty state card header" refers to. Thank you!

[shawnborton]

Sure, we use them all over Settings:

Actually in that workspace example above ^ , we should update the headline to be an h1... not sure why it's so small.

[shawnborton]

It looks like in your example, the inner padding is not 20px. We currently switch from 32px to 20px of padding when going from desktop to mobile, but given that we are showing this in the RHP, I think we need an override to show this with 20px of inner padding even on desktop. Let me know if that makes sense!

[smelaa]

Oh yes, that makes sense, thanks for explanation. I have updated the padding for this case and also card header should be now right size. Let me know if you have any other comments @shawnborton

[shawnborton]

Looks good, thanks! Just confirming that this didn't change the normal desktop padding for other cards, right?

Also cc @twisterdotcom - I wonder if we can think of some better headline copy so we can prevent the orphan? Maybe something cheeky like "Pack your bags" - especially since the header says "Book" and the bottom button also says "Book"

[smelaa]

Right, all other cards are left untouched.

[twisterdotcom]

I quite like "Pack your bags" actually. If that's the route we're going then maybe also "Jet set, go" or "Travel smart" or "Adventure calls"?

I kind of like "Travel smart" as it possibly alludes to the admin "management" side as well.

[shawnborton]

Cool, anything works for me!

[LLPeckham]

I like Travel smart too 👍

[LLPeckham]

Also - sorry but can we also change this section to "in one place" instead of "in a single place" ? Very small, but just feels wordier than it needs to be.

[melvin-bot[bot]]

Triggered auto assignment to @LLPeckham (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[twisterdotcom]

haha, fortuitous

[LLPeckham]

Hahah I summoned the assignment.

[twisterdotcom]

Okay, this is good to go then @smelaa.

Travel smart

Use Expensify Travel to get the best travel offers and manage all your business expenses in one place.

[PIGGY BANK] Save money on your bookings [SIREN] Get realtime updates and alerts

We'll need to confirm Spanish translations as well.

[melvin-bot[bot]]

@LLPeckham, @twisterdotcom, @WojtekBoman, @cdOut, @smelaa Whoops! This issue is 2 days overdue. Let's get this updated quick!

[twisterdotcom]

Update: https://expensify.slack.com/archives/C05S5EV2JTX/p1714085472583259?thread_ts=1713825690.019579&cid=C05S5EV2JTX

[kevinksullivan]

@rushatgabhane now that this PR is on prod https://github.com/Expensify/App/pull/41493, I think we can close this out ?

[rushatgabhane]

yes, we can close