Implement upgrade to collect when booking travel #53753

shubham1206agra · 2024-12-09T13:14:15Z

Explanation of Change

Fixed Issues

$ #48305

Tests

Pre-requisite - Have a new account with spotnanaTravel beta enabled and no workspace created.

Click on FAB > Book Travel.
Click on Book travel.
Verify that upgrade flow has started.
Click on Upgrade.
Verify that workspace confirmation page appears.
Fill all the information
Click on Confirm.
Verify that upgrade confirmation screen appears.

Verify that no errors appear in the JS console

Offline tests

Same as Tests

QA Steps

Same as Tests

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2025-01-29.at.12.13.58.PM.mov

Android: mWeb Chrome

Screen.Recording.2025-01-29.at.11.58.52.AM.mov

iOS: Native

Screen.Recording.2025-01-29.at.12.09.22.PM.mov

iOS: mWeb Safari

Screen.Recording.2025-01-29.at.11.56.30.AM.mov

MacOS: Chrome / Safari

Screen.Recording.2025-01-29.at.12.22.05.AM.mov

MacOS: Desktop

Screen.Recording.2025-01-29.at.12.02.17.PM.mov

shubham1206agra · 2024-12-09T13:15:12Z

src/languages/es.ts

+            travel: {
+                title: 'Viajes',
+                description:
+                    'Expensify Travel es una nueva plataforma corporativa de reserva y gestión de viajes que permite a los miembros reservar alojamientos, vuelos, transporte y mucho más.',
+                onlyAvailableOnPlan: 'Travel solo está disponible en el plan Controlar, a partir de ',
+            },


@cristipaval Can you please get the translation confirmation?

I'll confirm this comment first.

shubham1206agra · 2024-12-09T13:21:40Z

Screen.Recording.2024-12-09.at.6.50.15.PM.mov

@Expensify/design Is this flow correct?
cc @cristipaval @joekaufmanexpensify

shawnborton · 2024-12-09T13:42:42Z

@ryanschaffer @stitesExpensify is this correct? I don't think Travel is only available on Control, but rather, it just requires at least a workspace. So if anything, that modal should say "Only available on Collect and Control"

joekaufmanexpensify · 2024-12-09T13:44:56Z

That's my understanding too. It should be a prompt to create a workspace for those with none. Rather than a prompt to upgrade a collect workspace to control.

shubham1206agra · 2024-12-09T13:48:27Z

@shawnborton What should be the button text? Create a workspace?

shawnborton · 2024-12-09T13:52:33Z

Rather than use this upgrade screen, what if we use the workspace confirmation step that we just merged?

Maybe we can update the text to include something about travel? cc @jamesdeanexpensify we current say this:

Create a workspace to track receipts, reimburse expenses, send invoices, and more — all at the speed of chat.

Maybe we could say this:

Create a workspace to track receipts, reimburse expenses, manage travel, send invoices, and more — all at the speed of chat.

joekaufmanexpensify · 2024-12-09T13:53:55Z

I like that too.

dannymcclain · 2024-12-09T14:10:04Z

Rather than use this upgrade screen, what if we use the workspace confirmation step that we just merged?

I thought we had decided to use the upgrade modal similar to categories in this situation? It's not an upgrade from Collect to Control, but it's still an upgrade from no workspace to a Collect workspace. Right? Or am I missing something?

joekaufmanexpensify · 2024-12-09T15:39:25Z

Yeah, that is what we'd landed on. I think Shawn just meant that we also now have this new page for confirming to create a workspace that might apply too. Not sure of the context of the new page though or the pattern of where we use one vs the other.

jamesdeanexpensify · 2024-12-09T17:35:41Z

What about for the copy (it felt a bit too long as suggested, so removing the reference to invoices for now):

Create a workspace to track receipts, reimburse expenses, manage travel, and more — all at the speed of chat.

shawnborton · 2024-12-09T20:07:47Z

Ah yeah that's a good point Danny. So here are my thoughts then:

Using the upgrade pattern you linked makes total sense to me, as it is consistent with categories. Let's just use the correct copy from this one and not the copy for Control.
I think after you hit Upgrade in that flow, we should take you to the workspace confirmation screen since we should be showing that confirmation before all new workspaces are created

Does that sound like a plan?

dannymcclain · 2024-12-09T20:35:39Z

Yeah that sounds good!

stitesExpensify · 2024-12-09T23:11:05Z

I don't think Travel is only available on Control, but rather, it just requires at least a workspace. So if anything, that modal should say "Only available on Collect and Control"

That is correct. I think we settled on something like "Only available on paid workspaces"

jamesdeanexpensify · 2024-12-09T23:22:46Z

Aren't all workspaces paid? Or they will be soon with Ryan's project. Workspace creation will kick off the free trial.

stitesExpensify · 2024-12-10T14:45:05Z

I haven't looked at that project yet, but the idea was that we need to prevent users who only have a personal policy on OldDot

jamesdeanexpensify · 2024-12-10T17:29:54Z

Ah, got it. Thank you!

shubham1206agra · 2024-12-11T06:53:26Z

@shawnborton Can you please let me know the correct text here?

shawnborton · 2024-12-11T18:23:58Z

cc @jamesdeanexpensify for thoughts but maybe we can do:

You've successfully upgraded to a workspace on the Collect plan. Now you can start booking and managing travel!

jamesdeanexpensify · 2024-12-11T19:22:49Z

Quick clarifying question - have they (1) upgraded their existing workspace to the Collect plan or (2) upgraded to a (new) workspace on the Collect plan? That might determine my copy feedback (and then maybe we should revisit the categories copy based on this, too).

shawnborton · 2024-12-11T19:39:27Z

I think we show this because the user didn't have any workspace period, so we ask them to at least make a workspace first (much like we do when someone tries to categorize something without a workspace). I think we just start them off on a Collect workspace.

jamesdeanexpensify · 2024-12-11T21:22:49Z

Ok, cool! Would you be down with:

You've successfully upgraded to a workspace on the Collect plan. Now you can book and manage travel!

shawnborton · 2024-12-11T21:28:59Z

Love it, let's do it

mananjadhav · 2024-12-15T17:37:08Z

@shubham1206agra Is this ready for review?

shubham1206agra · 2024-12-19T06:01:04Z

Hold on #53845 as we require workspace confirmation screen.

cristipaval · 2025-01-22T14:36:22Z

@shubham1206agra, the PR is merged and it's been in staging for more than 1 day. I hope it will survive and won't get reverted and will end up in production. I think you can continue on this one, given that the deadline for travel is at the end of next week when we want this deployed.

dannymcclain · 2025-01-31T16:02:24Z

Ok bad news
We can't do that since after policy creation, we don't automatically set activePolicyID since this will be set by BE only. This will make us go in loop of upgrade flow.

So are you saying we'll need to drop them back on the Book travel screen? I don't think that's the end of the world. It's not ideal, but I don't think it's a total deal breaker.

shubham1206agra · 2025-01-31T17:55:43Z

So are you saying we'll need to drop them back on the Book travel screen?

Yes. But I am not against refinement in this flow in the later stage.

shubham1206agra · 2025-01-31T17:56:17Z

@mananjadhav Can you start the review now? Since this is a bit urgent.

mananjadhav · 2025-01-31T18:24:22Z

I can definitely start this but I am not sure if I'll be able to finish it immediately. Let me prioritize and try this.

src/pages/Travel/TravelUpgrade.tsx

mananjadhav · 2025-01-31T20:02:40Z

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

shubham1206agra · 2025-02-02T16:55:24Z

@mananjadhav Please continue with the review.

shubham1206agra · 2025-02-02T17:29:56Z

src/pages/Travel/TravelUpgrade.tsx

+        createDraftWorkspace('', false, params.name, params.policyID, params.currency, params.avatarFile as File);
+        setShouldShowConfirmation(false);
+        setIsUpgraded(true);
+        createWorkspace('', false, params.name, params.policyID, '', params.currency, params.avatarFile as File);


@mananjadhav What should the onboarding intent be here?

shubham1206agra · 2025-02-05T17:21:31Z

@mananjadhav Bump here

mananjadhav

Reviewed the code, will work on the checklist and QA.

mananjadhav · 2025-02-06T18:08:54Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

mweb-chrome-book-travel.mov

iOS: Native

ios-book-travel.mov

iOS: mWeb Safari

mweb-safari-book-travel.mov

MacOS: Chrome / Safari

web-book-travel.mov

MacOS: Desktop

desktop-book-travel_f0HkfWeP.mp4

mananjadhav

I have issues with Android build, hence skipping that.

OSBotify · 2025-02-06T19:41:54Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2025-02-06T22:00:34Z

🚀 Deployed to staging by https://github.com/cristipaval in version: 9.0.95-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2025-02-11T02:11:53Z

🚀 Deployed to production by https://github.com/Julesssss in version: 9.0.95-6 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

Implement upgrade to control when booking travel

eb0b87a

shubham1206agra commented Dec 9, 2024

View reviewed changes

Merge branch 'Expensify:main' into upgrade-travel

3c95361

shubham1206agra changed the title ~~Implement upgrade to control when booking travel~~ [HOLD #53845]Implement upgrade to control when booking travel Dec 19, 2024

shubham1206agra mentioned this pull request Dec 19, 2024

feat: Provide education/confirmation before creating workspaces in New Workspace flows #53845

Merged

49 tasks

Merge main

c110678

mananjadhav reviewed Jan 31, 2025

View reviewed changes

src/pages/Travel/TravelUpgrade.tsx Show resolved Hide resolved

mananjadhav reviewed Jan 31, 2025

View reviewed changes

src/pages/Travel/TravelUpgrade.tsx Show resolved Hide resolved

mananjadhav reviewed Jan 31, 2025

View reviewed changes

src/pages/Travel/TravelUpgrade.tsx Outdated Show resolved Hide resolved

Changes according to suggestion

d0bdb35

Merge branch 'Expensify:main' into upgrade-travel

548dc70

shubham1206agra commented Feb 2, 2025

View reviewed changes

Merge branch 'Expensify:main' into upgrade-travel

c7f7798

shubham1206agra mentioned this pull request Feb 4, 2025

[Due for payment 2025-02-18] [$250] Book Travel - Unable to continue setting up travel, error appears #48305

Open

6 tasks

shubham1206agra and others added 3 commits February 5, 2025 22:53

Merge branch 'main' into upgrade-travel

c264a71

Fix button after merge

ec77e38

Fix lint

52b8f8c

cristipaval mentioned this pull request Feb 5, 2025

[Low] Handle error for users trying to provision travel on their personal workspace #56423

Closed

mananjadhav reviewed Feb 6, 2025

View reviewed changes

mananjadhav approved these changes Feb 6, 2025

View reviewed changes

melvin-bot bot requested a review from cristipaval February 6, 2025 18:13

stitesExpensify self-requested a review February 6, 2025 19:11

cristipaval approved these changes Feb 6, 2025

View reviewed changes

cristipaval merged commit c550073 into Expensify:main Feb 6, 2025
17 of 18 checks passed

github-actions bot mentioned this pull request Feb 6, 2025

Deploy Checklist: New Expensify 2025-02-06 #56482

Closed

Implement upgrade to collect when booking travel #53753

Implement upgrade to collect when booking travel #53753

Conversation

shubham1206agra commented Dec 9, 2024 • edited Loading

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

shubham1206agra Dec 9, 2024

Choose a reason for hiding this comment

cristipaval Dec 9, 2024

Choose a reason for hiding this comment

shubham1206agra commented Dec 9, 2024

shawnborton commented Dec 9, 2024

joekaufmanexpensify commented Dec 9, 2024

shubham1206agra commented Dec 9, 2024

shawnborton commented Dec 9, 2024

joekaufmanexpensify commented Dec 9, 2024

dannymcclain commented Dec 9, 2024 • edited Loading

joekaufmanexpensify commented Dec 9, 2024

jamesdeanexpensify commented Dec 9, 2024

shawnborton commented Dec 9, 2024

dannymcclain commented Dec 9, 2024

stitesExpensify commented Dec 9, 2024

jamesdeanexpensify commented Dec 9, 2024

stitesExpensify commented Dec 10, 2024

jamesdeanexpensify commented Dec 10, 2024

shubham1206agra commented Dec 11, 2024

shawnborton commented Dec 11, 2024

jamesdeanexpensify commented Dec 11, 2024

shawnborton commented Dec 11, 2024

jamesdeanexpensify commented Dec 11, 2024

shawnborton commented Dec 11, 2024

mananjadhav commented Dec 15, 2024

shubham1206agra commented Dec 19, 2024

cristipaval commented Jan 22, 2025

dannymcclain commented Jan 31, 2025

shubham1206agra commented Jan 31, 2025

shubham1206agra commented Jan 31, 2025

mananjadhav commented Jan 31, 2025

mananjadhav commented Jan 31, 2025

Screenshots/Videos

shubham1206agra commented Feb 2, 2025

shubham1206agra Feb 2, 2025

Choose a reason for hiding this comment

shubham1206agra commented Feb 5, 2025

mananjadhav left a comment

Choose a reason for hiding this comment

mananjadhav commented Feb 6, 2025 • edited Loading

Reviewer Checklist

Screenshots/Videos

mananjadhav left a comment

Choose a reason for hiding this comment

OSBotify commented Feb 6, 2025

github-actions bot commented Feb 6, 2025

github-actions bot commented Feb 11, 2025

shubham1206agra commented Dec 9, 2024 •

edited

Loading

dannymcclain commented Dec 9, 2024 •

edited

Loading

mananjadhav commented Feb 6, 2025 •

edited

Loading