[HOLD for payment 2023-09-29] [HOLD on #27729] [$500] Dev: Web - "No results found" shown after selecting a new user in split bill

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Click on FAB and click on Request Money
2. Click on Manual tab if necessary
3. Enter an amount
4. Click next
5. Enter a new user login
6. Click on split on this option

Expected Result:

There should not be any header message.

Actual Result:

There is a header message - "No results found"

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev 1.3.70.5
Reproducible in staging?: n
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-09-16.at.9.02.18.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @c3024
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694878264647479

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b200e8e764e35545
• Upwork Job ID: 1703723226703622144
• Last Price Increase: 2023-09-18
• Automatic offers:
• c3024 | Contributor | 26890482
• c3024 | Reporter | 26890483

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b200e8e764e35545

[melvin-bot]

Triggered auto assignment to @johncschuster (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[kbecciv]

Proposal by
@c3024

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694878264647479

Proposal

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

“No results found” header message shown when clicking on split on a new user in request money

What is the root cause of that problem?

We are not passing here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 199 to 204 in 76c1559

	const headerMessage = OptionsListUtils.getHeaderMessage(
	newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
	Boolean(newChatOptions.userToInvite),
	searchTerm,
	maxParticipantsReached,
	);

hasMatchedParticipant and the default for this is false and the headerMessage “No results found” appears when the string is a valid email or phone and there are no users to invite nor selectable options.

App/src/libs/OptionsListUtils.js

Line 1288 in 76c1559

if (searchValue && !hasSelectableOptions && !hasUserToInvite) {

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

We should add here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 204 in 76c1559

);

this check to pass true if the search string matches a participant

_.some(participants, (participant) => participant.login === searchTerm.trim().toLowerCase()),

As an aside
We should also trim the search value here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 202 in 76c1559

searchTerm,

to ensure that “Invalid Email” error is not shown when we add some leading spaces to the email being searched.
If we don’t trim, we will get an error “Invalid Email” even though an option appeared and selected with the email.

What alternative solutions did you explore? (Optional)

For ease and not to miss any cases we might use a variable called trimmedSearchTerm like this

trimmedSearchTerm = searchTerm.toLowerCase();

and use this at all places where searchTerm is used except the searchTerm in OptionsSelector.

[c3024]

Posting my proposal with slight change.

Proposal

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

“No results found” header message shown when clicking on split on a new user in request money

What is the root cause of that problem?

We are not passing here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 199 to 204 in 76c1559

	const headerMessage = OptionsListUtils.getHeaderMessage(
	newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
	Boolean(newChatOptions.userToInvite),
	searchTerm,
	maxParticipantsReached,
	);

hasMatchedParticipant and the default for this is false and the headerMessage “No results found” appears when the string is a valid email or phone and there are no users to invite nor selectable options.

App/src/libs/OptionsListUtils.js

Line 1288 in 76c1559

if (searchValue && !hasSelectableOptions && !hasUserToInvite) {

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

We should add here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 204 in 76c1559

);

this check to pass true if the search string matches a participant

_.some(participants, (participant) => participant.login.includes(searchTerm.trim().toLowerCase())),

As an aside
We should also trim the search value here

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 202 in 76c1559

searchTerm,

to ensure that “Invalid Email” error is not shown when we add some leading spaces to the email being searched.
If we don’t trim, we will get an error “Invalid Email” even though an option appeared and selected with the email.

What alternative solutions did you explore? (Optional)

For ease and not to miss any cases we might use a variable called trimmedSearchTerm like this

trimmedSearchTerm = searchTerm.toLowerCase();

and use this at all places where searchTerm is used except the searchTerm in OptionsSelector.

[MrJithil]

Proposal

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

While user requesting money by using Manual option and trying to enter partial user's email who is new to Expensify, a no results found message is being shown to the user.

The issue here is the search term is not empty and the search term is not either a valid email or phone.

The default message "no results found" is showing as per the current behaviour.

What is the root cause of that problem?

The default message "no results found" is showing as per the current behaviour.

return Localize.translate(preferredLocale, 'common.noResultsFound');

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

By default, we should return an empty error message if the user's searchTerm is not isValidEmail or not a isValidPhone.
So, we can remove the default error message returning. So, the return statement outside the searchTerm validation will take care the message handling with an empty message.

What alternative solutions did you explore? (Optional)

remove the line of default error message which is being thrown to the user. So, that, the return statement

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @Abdulloh007! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Abdulloh007]

Contributor details
Your Expensify account email: sabirovabdulloh2004@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010b57b8d464caf8cd

I think when the split button is pressed, you cut the user from the list of results to the list of selected ones, and at this moment the list of results becomes empty and the condition under which the message should be displayed works.

if (searchValue && !hasSelectableOptions && !hasUserToInvite)
when calling the setHeaderText , all the conditions are triggered, which should not be the case because we see in the video !hasUserToInvite = false. And I ges that setHeaderText is triggered before the user gets into the selected list and it turns out that at the time of calling setHeaderText !hasUserToInvite = true

[Abdulloh007]

Contributor details Your Expensify account email: sabirovabdulloh2004@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~010b57b8d464caf8cd

I think when the split button is pressed, you cut the user from the list of results to the list of selected ones, and at this moment the list of results becomes empty and the condition under which the message should be displayed works.

if (searchValue && !hasSelectableOptions && !hasUserToInvite) when calling the setHeaderText , all the conditions are triggered, which should not be the case because we see in the video !hasUserToInvite = false. And I ges that setHeaderText is triggered before the user gets into the selected list and it turns out that at the time of calling setHeaderText !hasUserToInvite = true

I check it twice with react dev tools and I'm right)