[HOLD for payment 2024-07-10] [HybridApp] Problem #7: Reduce frustration with an explanation modal

[AndrewGable]

Problem

There has been discussion about how to make sure users who are temporarily trying out the New experience don’t feel like they are trapped or become frustrated if they decide they want to return to the Classic experience. In order to combat that concern, we will show a modal to users the first time they try or use the New experience explaining how they can switch back to the Classic experience.

Solution

Wave9 Guided Setup is going to develop Onboarding Modals that can be reused for the above mentioned purpose. Triggers that decide to show or hide those Modals are located in the Welcome.ts file and are executed on initial app load for a logged in user and on consecutive app refreshes.

Triggers located in Welcome.ts can be modified (or a new trigger can be added) to check the status of ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER key and open a specific modal if this key is undefined or true. Note that by default a user going from oldDot to newDot is most probably going to see the onboarding modals as they check for ONYXKEYS.NVP_INTRO_SELECTED key which is blank for most of the newDot users. The new explanation modal will have to accommodate for that and should be integrated wisely into the flow so that it’s shown before the onboarding modals.

Modals implemented in Wave9 Guided Setup can be easily reused by doing the following:

1. creating a new Screen with presentation: 'transparentModal', set for its screenOptions. See getRootNavigatorScreenOptions.ts -> onboardingModalNavigator for more information. (PR not yet ready so no link)
2. shouldUseNarrowLayout flag should be passed to dynamically decide on the styles for the modal and to apply the styles to the screenOptions. This is needed to ensure proper transitions during modal show/hide since they differ on big and small screens. See getRootNavigatorScreenOptions.ts -> onboardingModalNavigator for more information. (PR not yet ready so no link)
3. Styling the component itself to look like a standard modal by applying styles.defaultModalContainer to its styles.

[AndrewGable]

cc @MaciejSWM - Comment here and I will assign you!

[AndrewGable]

Here is the exact copy we should use for the modal:

Welcome to New Expensify
One app to handle all your business and personal spend in a chat. Give it a try and let us know what you think. There's much more to come!

To switch back to Expensify Classic, just tap your profile picture > Switch to Expensify Classic.

cc @jamesdeanexpensify

[AndrewGable]

Working on it (soon)

[AndrewGable]

Working on it!

[jamesdeanexpensify]

Quick note @AndrewGable - here I updated the "Go to Expensify Classic" to "Switch to Expensify Classic". Must've been a recent update so I wanted it to be accurate in this copy, as well. Thanks!