[HOLD for payment 2024-08-27] [$500] [CVP] Add an Illustration and simple directions to the the Submits to screen if there are no contacts

[danielrvidal]

Problem: Expensify is supposed to make money more efficient and fun. For an organic new user, the first time they send an expense to anyone they do not have any contacts. Thus, they see an empty screen which feels off brand. Especially for such a critical first time experience. It currently looks like this:

Solution: Add a fun illustration (with short and clear directions) to the empty state “Submits to” screen if the user does not have any recent contacts. If there are any recents in the list, we would not show the illustration. It could look like like this:

Current proposed text:

• Get paid back
• Submit your expense to any email or phone number.

This is being discussed here. @shawnborton can get the final image and @kevinksullivan can help with the https://expensify.slack.com/archives/C03TBKRSB/p1715809342220239?thread_ts=1714766113.560229&cid=C03TBKRSB

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01632280a607ac1c81
• Upwork Job ID: 1791150727815004160
• Last Price Increase: 2024-07-19
• Automatic offers:
• rayane-djouah | Reviewer | 0
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @mallenexpensify

[shawnborton]

Here is the file you need: emptystate__toddwithphones.svg.zip

It should be displayed at 176px wide by 178px tall.

We should also have marketing review the copy here as well.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01632280a607ac1c81

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add an Illustration and simple directions to the the Submits to screen if there are no contacts

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

In here, if we check that the sections (including all sections like Recents, Contacts, ...) has no user, and there's no search term, show the illustration (the UI is straight forward and is used similarly all around the app)

The UI will be a BlockingView similar to this, we can use Lottie there too if it's an animation (but looks like it's only an SVG icon so should be fine)

Of course the illustration and directions only show after the list has finished loading, for which there're some indicators like here

We can also create a prop ListEmptyComponent in SelectionList to make the feature available anywhere SelectionList is used, too.

We'll likely need a different copy in case of Send money, the above is for Request money only (Send your expense to anyone)

What alternative solutions did you explore? (Optional)

There're few cases we need to decide on, they are all straight forward changes once confirmed:

• Do we show the illustration if there's search term and there's no search result found?
• Do we show the illustration when there's no Recents option only (as mentioned in OP), or when there's no option at all (Recents, personal details, ...)

[rayane-djouah]

@tienifr's proposal looks good to me.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rayane-djouah]

Do we show the illustration if there's search term and there's no search result found?
Do we show the illustration when there's no Recents option only (as mentioned in OP), or when there's no option at all (Recents, personal details, ...)

Also, Do we need to add an Illustration and simple directions to "split expense", "pay someone", and "send invoice"? or we need this only for "submit expense"?

[shawnborton]

Yeah, I think all of the create flows that have the search input to search for a contaact would get this kind of empty state.

[mountiny]

@shawnborton Would we keep the same illustration or do we want to add a different illustration for each?

@danielrvidal Are you able to handle the copy for each of the flows as they will all be slightly different I assume. Thanks!

[shawnborton]

I think the same is fine

[tienifr]

@mountiny Would you mind handling the assignment?

So I can start with the PR and will be updating the copy with this once it's available 👍

[melvin-bot]

Upwork job price has been updated to $500

[mountiny]

@tienifr updating the price as this is proving more complex and tedious with the back and forth on the mocks, lets get this over the finish line though

[quinthar]

Love this idea!

[danielrvidal]

@tienifr @allroundexperts any update here? I just removed the waiting for copy label as I don't think we're waiting for copy anymore.

[mountiny]

@tienifr is trying to address the last pr comments. I hope to merge it this week

[danielrvidal]

This was just deployed to staging, I just tested it and it's looking good!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Triggered auto assignment to @mallenexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[mountiny]

This is ready for payment now; it was a new feature; I am not sure if we need regression tests for this, as it would most likely be caught during random testing.

$500 to @tienifr and to @allroundexperts

[mallenexpensify]

Contributor: @tienifr owed $500 via NewDot.
Contributor+: @allroundexperts owed $500 via NewDot.

QA has monthly regression tests where they check for design-related bugs and edge cases. What about creating the TestRail GH, mentioning that as an option and letting QA make the call?

[mountiny]

Sounds good to me

[mallenexpensify]

Should be all set! Test case GH

• https://github.com/Expensify/Expensify/issues/423804

[garrettmknight]

$500 approved for @tienifr

[JmillsExpensify]

$500 approved for @allroundexperts