[HOLD for payment 2024-12-17] Display the Welcome Modal for migrated users as soon as they sign in to New Expensify

[ishpaul777]

Part of the Migrate Existing Users to NewDot project

Main issue: https://github.com/Expensify/Expensify/issues/437980
Doc section: https://docs.google.com/document/d/1m8e1ASwG70t651qSO6OfsSvW18RFrcWkO897iUllDLs/edit?tab=t.0#heading=h.1996ydl0cxy4
Project:

Feature Description

Display the Welcome modal for migrated users as soon as they sign in to New Expensify

Web	Mobile

Notes for completiness:

• Welcome Modal that appears for migrated users on the new Expensify. This modal will be over any Search/report/account settings page depending on which they land.
• The modal would read “Travel and expense at the speed of chat!”
• Subheading: “New Expensify has the same great automation, but now with amazing collaboration:” With the following lines and associated icons
• “Chat directly on any expense, report, or workspace”
• “Scan receipts and get paid back”
• “Do everything from your phone or browser”
• With a confirmation button titled “Let’s go!”
• Upon clicking “Let’s go!” the modal disappears
• The user should not be able to click on any of the background UI whilst the modal is shown.

Follow implementation from https://docs.google.com/document/d/1m8e1ASwG70t651qSO6OfsSvW18RFrcWkO897iUllDLs/edit?tab=t.0#heading=h.1996ydl0cxy4

[ishpaul777]

@puneetlath 👋 Please assign me here

[ishpaul777]

@puneetlath Can you please provide assets for Main animation, the feature list icons

[ishpaul777]

cc @Expensify/design for above request ^ 🙇

[dannymcclain]

I think the globe animation is this one: App/assets/animations/WorkspacePlanet.lottie
If it's not, I'm going to need some help tracking it down.

And then for the bullets we have:

• Chat bubbles: App/assets/images/simple-illustrations/simple-illustration__chatbubbles.svg
• Lightning bolt: simple-illustration__flash.svg.zip
• Phone: simple-illustration__mobileapp.svg.zip

[ishpaul777]

Thank you @dannymcclain!!

I think the globe animation is this one: App/assets/animations/WorkspacePlanet.lottie

this looks a bit different from what's in the mock, but works for now as placeholder until exact is found

Screen.Recording.2024-11-27.at.10.08.18.PM.mov

[dannymcclain]

@Expensify/design when you all are back online, do you know if we have another version of the globe animation (and if so where) or if we just have the one?

[dubielzyk-expensify]

Pretty sure that's the only one we have as it's the same as the one we use for Workspaces empty space. Happy to use that one 👍

[ishpaul777]

The user should not be able to click on any of the background UI whilst the modal is shown.

@puneetlath @Expensify/design I want to clarify asking cause the other training modal we have for example this one 👇 is dismissed when clicking on the background backdrop, Our current Generic modal component does not provide any abitlitly to not close when clicking on backdrop, before implementing a hotfix i want to confirm if this is strict requirement?

[dubielzyk-expensify]

The modal screenshotted above should be dismissible. When we talk about non-dismissible modals it's only the first sign up onboarding modals.

So for the workspace creation modal we should allow it to be dismissed.

[shawnborton]

I think we just have one version of the rotating planet/workspace items.

Small thing though - should we make the image area of the modal go full bleed to the edges? I guess we have both styles across the app, so just curious when we should use one vs the other. For example, this is the full bleed style I was thinking of:

[shawnborton]

Our current Generic modal component does not provide any abitlitly to not close when clicking on backdrop, before implementing a hotfix i want to confirm if this is strict requirement?

I don't feel too strongly here, personally I would be fine allowing the user to escape/exit the modal by clicking on the background but I can see where we might want to strictly force the user to read the modal and confirm via the button.

[dannymcclain]

should we make the image area of the modal go full bleed to the edges? I guess we have both styles across the app, so just curious when we should use one vs the other

I'm fine with either—I think they both look good. Maybe we can pick one and standardize? Which do you prefer?

personally I would be fine allowing the user to escape/exit the modal by clicking on the background

I agree, and would also be fine letting the user close via the background. I think the only time we should not allow that behavior is if we really need some input from the user in the modal (like the first sign up modal Jon mentioned).

[shawnborton]

I don't feel super strongly really... The full-bleed looks super clean on desktop, though I can see where the borders are nice on mobile as the bottom-docked modal. Let's see what @dubielzyk-expensify thinks?

[dubielzyk-expensify]

I don't feel super strongly really... The full-bleed looks super clean on desktop, though I can see where the borders are nice on mobile as the bottom-docked modal. Let's see what @dubielzyk-expensify thinks?

Happy to go full-bleed. Nice to change things up a bit too :)

[shawnborton]

Sweet, let's do it then! 🩸

[dannymcclain]

🩸🩸🩸

[melvin-bot]

@puneetlath, @ishpaul777 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rayane-djouah]

@puneetlath Please assign me here

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.73-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Migrated user welcome modal #53225

If no regressions arise, payment will be issued on 2024-12-17. 🎊

For reference, here are some details about the assignees on this issue:

• @rayane-djouah requires payment (Needs manual offer from BZ)
• @ishpaul777 requires payment (Needs manual offer from BZ)