[HOLD for payment 2021-09-22] Concierge - Request call without phone number leads to infinite loading. In mobile, app crashes

[isagoico]

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

Upwork Post: https://www.upwork.com/jobs/~0198bddf350b2411a7

---

Action Performed:

1. Go to https://staging.new.expensify.com
2. Log in with any account
3. Search for Concierge
4. Click on Call icon
5. Don't write anything on phone number and click call

Expected Result:

Error message only should appears

Actual Result:

Request call without phone number leads for infinite loading

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

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

Version Number: 1.0.88-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation
In mobile, app crashes.

Bug5210709_Recording__304.mp4

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

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

[Santhosh-Sellavel]

Proposal

We need to add a validation here for the phone number also and show here a user-friendly message using growl like we already do for the firstName & lastName!

App/src/pages/RequestCallPage.js

Lines 81 to 93 in ae38f1b

	onSubmit() {
	this.setState({isLoading: true});
	if (!this.state.firstName.length || !this.state.lastName.length) {
	Growl.success(this.props.translate('requestCallPage.growlMessageEmptyName'));
	this.setState({isLoading: false});
	return;
	}
	const personalPolicy = _.find(this.props.policies, policy => policy.type === CONST.POLICY.TYPE.PERSONAL);
	if (!personalPolicy) {
	Growl.error(this.props.translate('requestCallPage.growlMessageNoPersonalPolicy'), 3000);
	return;
	}

Also, we should allow users to type only Numbers and plus. So we should use CONST.REGEX.DIGITS_AND_PLUS regex and validate onChange.

App/src/pages/RequestCallPage.js

Lines 181 to 188 in ae38f1b

	<ExpensiTextInput
	label={this.props.translate('common.phoneNumber')}
	autoCompleteType="off"
	autoCorrect={false}
	value={this.state.phoneNumber}
	placeholder="+14158675309"
	onChangeText={phoneNumber => this.setState({phoneNumber})}
	/>

Demo of an error Message:

PleaseEnterPhoneNumber.mov

Used success type growl notification which is already used for name validation also, we can change both to error type if needed thanks!

[MelvinBot]

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

[parasharrajat]

I tested out this component. I didn't find infinite loading. On clicking save without phone number, just throw the backend error which seems fine to me.

But looking at the video, it seems the error is at the

App/src/pages/RequestCallPage.js

Line 89 in ae38f1b

const personalPolicy = _.find(this.props.policies, policy => policy.type === CONST.POLICY.TYPE.PERSONAL);

.

It is possible that the policy is empty for the user.

Proposal

Not making this simple component complicated as we already have a backend validation message in place when the phone number is not present or invalid, I would suggest

1. Disable the Call me button until all the fields are filled.
2. Add the check for the policy before checking policy.type so that it does not throw an error as shown in the video i.e. just using lodash.get.
3. If we want to validate the number in the front end before submitting. we can show the error/red outline on the phone input if the number is invalid using the errorText prop in ExpensiInput.

[Jag96]

Posted to upwork here: https://www.upwork.com/jobs/~0198bddf350b2411a7

@parasharrajat your proposal looks good, good eye on the policy error in the video. I've invited you to the Upwork job, once you accept feel free to start on a PR and I'll assign you.

[parasharrajat]

Please assign this issue to me. Thanks.

[isagoico]

Issue reproducible during KI retests

[MelvinBot]

@Jag96 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[isagoico]

Issue reproducible during KI retests

[parasharrajat]

I am on vacation. back on 8.

[botify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[isagoico]

Issue reproducible during KI retests.

[parasharrajat]

@isagoico Could you please a screenshot of the error? Oops, it is not yet moved to staging. Sorry.

[botify]

🚀 Deployed to staging by @Jag96 in version: 1.0.97-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @francoisl in version: 1.0.98-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[isagoico]

Issue not reproducible during KI retests. (Fixed 🎉)

[botify]

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

• https://github.com/Expensify/App/pulls/5169\n

If no regressions arise, payment will be issued on 2021-09-27. 🎊

[mountiny]

This message is a bug, caused by today's deploy and some weird GH API behaviour. Updated the title back to what it was 🙇

[parasharrajat]

Ping for

[Jag96]

Paid!