[HOLD for payment 2022-03-22] Searching non existing currency results in a blank page with active Confirm button - reported by @Tushu17

[mvtglobally]

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. In NewDot, click the green "+" button and select Send Money or Request Money
2. Click on Currency symbol
3. Enter something that returns no results (i.e. enter "bug" into the search field)
4. Click continue on a empty box.

Expected Result:

It should show something like "no results found" and Confirm button should be disabled.

Actual Result:

It shows a blank results page with an active continue button.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.41-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-rec.2.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1644878029333329

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @sakluger (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[sakluger]

Reproduced this issue, and clarified the action steps in the original GH issue. Ready for engineering. 👌

[MelvinBot]

Triggered auto assignment to @timszot (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

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

[timszot]

Looks good to me, sending to external for better handling of this case in the app.

[NicMendonca]

Upwork job posting: https://www.upwork.com/jobs/~0117a680819923466f

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[MelvinBot]

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

[luacmartins]

Issue looks good. I'd just change the expected behaviour to:

1. Show No results found.
2. As per the new Form guidelines, we should not disable the submit button. Instead, when submit is clicked we should show a form error, maybe something like You must select a currency.

[yousaffsdev]

I suggest to update IOUCurrencySelection.js so that sectionlist has listemptycomponent set to show No results found when data is empty, and a state to hold sectionlist's data

[Santhosh-Sellavel]

@laravue1118 You should be new here. Check out our contributing guidelines first.

And go through these closed issues here for reference.

And make a proper proposal with all the changes you would make to solve this issue.

[thesahindia]

Proposal

 {this.state.currencyData.length === 0 ? (
                                <View style={[styles.ph5, styles.pb5]}>
                                    <Text style={[styles.textLabel, styles.colorMuted]}>
                                        {this.props.translate('common.noResultsFound')}
                                    </Text>
                                </View>
                            )
                            : null }

we can add the code given above after line 181. By this we can show the no results found message below the search input

App/src/pages/iou/IOUCurrencySelection.js

Lines 176 to 181 in 3d2ec23

	<TextInput
	ref={el => this.textInput = el}
	value={this.state.searchValue}
	onChangeText={this.changeSearchValue}
	placeholder={this.props.translate('common.search')}
	/>

And to remove the ALL CURRENCIES header when no result is there we can just add a if statement like below -

    getSections() {
        const sections = [];

        if (this.state.currencyData.length > 0) {
            sections.push({
                title: this.props.translate('iOUCurrencySelection.allCurrencies'),
                data: this.state.currencyData,
                shouldShow: true,
                indexOffset: 0,
            });
        }
        return sections;
    }

[yousaffsdev]

Proposal

I will update getSections function.
`

getSections() {
    const sections = [];

    if (this.state.currencyData.length > 0) {
        sections.push({
            title: this.props.translate('iOUCurrencySelection.allCurrencies'),
            data: this.state.currencyData,
            shouldShow: true,
            indexOffset: 0,
        });
    }

    return sections;
}

`

I will update rendering of sectionlist.

`

                        <SectionList
                              ...
                              ListEmptyComponent={ <Text>No results found</Text>}
                              ...
                              renderSectionHeader={({section: {title}}) => (
                                  this.state.sections.length > 0 ? <View>
                                      <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
                                          {title}
                                      </Text>
                                  </View> : null
                              )}
                          />

`

And in the confirmCurrencySelection, I will check if the data is empty and show error.

`

confirmCurrencySelection() {
    if (this.state.currencyData.length === 0) {
        // show error
       return;
    }
    IOU.setIOUSelectedCurrency(this.state.toggledCurrencyCode);
    Navigation.goBack();
}

`

[Santhosh-Sellavel]

I will check on this by Wednesday.

[luacmartins]

Hmm I actually think it would be ok to keep the All currencies header and display No results found underneath it. @laravue1118 can you expand on how you will show the error?

[thesahindia]

@luacmartins, This is how it will look if we keep the All currencies header -

[luacmartins]

I like that better, but I'll ask for @Expensify/design input here.

[thesahindia]

I had proposed a solution here in case it got missed. I have a better approach for both the options -

                               {this.state.currencyData.length === 0 && (
                                            <Text style={[styles.ph5, styles.textLabel, styles.colorMuted]}>
                                                {this.props.translate('common.noResultsFound')}
                                            </Text>
                                          )}

If we wanna keep the All currencies header we need to add the code written above after line 209

App/src/pages/iou/IOUCurrencySelection.js

Lines 205 to 212 in 3d2ec23

	renderSectionHeader={({section: {title}}) => (
	<View>
	<Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
	{title}
	</Text>
	</View>
	)}
	/>

If we don't want the All currencies header then we can just render the header based on this.state.currencyData.length

renderSectionHeader={({section: {title}}) => (

                                        <View>
                                            {this.state.currencyData.length === 0 ? (
                                                <Text style={[styles.ph5, styles.textLabel, styles.colorMuted]}>
                                                    {this.props.translate('common.noResultsFound')}
                                                </Text>
                                            ) : (
                                                <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
                                                    {title}
                                                </Text>
                                            )}
                                        </View>
                                    )}

cc: @luacmartins

[shawnborton]

When there are no results based on your search, I think I prefer it without the "ALL CURRENCIES" header.

[luacmartins]

Thanks @shawnborton! @thesahindia I like your updated approach, but can you elaborate on how you'll display the error when the user taps Confirm with no selected currency?

[thesahindia]

@luacmartins, I think we don't need an error here as one option always stays selected, so when the user taps confirm the currency that was already selected will be used.

[luacmartins]

Hmm that makes sense. Alright then, let's move forward with your updated approach and removing the All currencies header.

[MelvinBot]

📣 @thesahindia You have been assigned to this job by @luacmartins!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[botify]

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

• show no results found text #8039

If no regressions arise, payment will be issued on 2022-03-22. 🎊

[NicMendonca]

@thesahindia Can you please apply to the job in Upwork so I can issue payment? - https://www.upwork.com/jobs/~0117a680819923466f

[thesahindia]

@thesahindia Can you please apply to the job in Upwork so I can issue payment? - https://www.upwork.com/jobs/~0117a680819923466f

Done ✅

[NicMendonca]

@Santhosh-Sellavel @Tushu17 @thesahindia paid - thank you!

[Santhosh-Sellavel]

@NicMendonca When you have time please end the contract on the Upwork, thanks!