-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[$250] Improve Phone Number Entry Validation and Error Messaging for Users #55337
Comments
Triggered auto assignment to @bfitzexpensify ( |
🚨 Edited by proposal-police: This proposal was edited at 2025-01-16 04:29:02 UTC. ProposalPlease re-state the problem that we are trying to solve in this issue.Improve Phone Number Entry Validation and Error Messaging for Users What is the root cause of that problem?Improvement What changes do you think we should make in order to solve the problem?we should update validate function like this:
const validate = useCallback(
(
values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>
): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
// Validate that the phone number field is not empty
if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.PHONE_NUMBER])) {
errors[INPUT_IDS.PHONE_NUMBER] = translate('common.error.fieldRequired');
return errors; // Early return if field is empty
}
try {
// Sanitize input: Remove all non-numeric characters except the leading '+'
const sanitizedPhoneNumber = values[INPUT_IDS.PHONE_NUMBER].replace(/[^+\d]/g, '');
// Append country code if missing
const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(sanitizedPhoneNumber);
// Parse and validate the phone number
const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);
// Check if the phone number is possible and valid in E.164 format
if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode)) {
errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');
}
} catch (error) {
// Handle unexpected errors during parsing or validation
console.error('Error validating phone number:', error);
errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');
}
// Clear the error if the user tries to validate the form and there are errors
if (validateLoginError && Object.keys(errors).length > 0) {
PersonalDetails.clearPhoneNumberError();
}
return errors;
},
[translate, validateLoginError],
);
Line 1989 in e251143
to Please enter a complete phone number (e.g., +1-(201)-867-5309). or like Line 346 in e251143
Update to const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(values?.phoneNumber ?? '');
const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);
PersonalDetails.updatePhoneNumber(parsedPhoneNumber.number?.e164 ?? '', currenPhoneNumber); What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?Create validation UI tests for each case update What alternative solutions did you explore? (Optional)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. |
ProposalPlease re-state the problem that we are trying to solve in this issue.Improve Phone Number Entry Validation and Error Messaging for Users What is the root cause of that problem?In validation function here App/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx Lines 52 to 71 in 5133090
We have 2 problems -
When we show the error message the size of the view that contains the avatar increases which causes avatar to get centre with respect to the DotIndicator (error message). What changes do you think we should make in order to solve the problem?Fixes
Note We should do the similar changes in https://github.com/Expensify/App/blob/513309085f5ab12ba75d8f8f659d94142d8dd551/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?NA since this is validation change What alternative solutions did you explore? (Optional)NA |
ProposalPlease re-state the problem that we are trying to solve in this issue.Update the phone number validation when the user enters the phone number incorrectly. What is the root cause of that problem?Here is the code for phone number validation
These code didn't include correct logic according to the requirement. What changes do you think we should make in order to solve the problem?We have to update this code according to the requirement by adding new validation logic. What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?N/A |
🚨 Edited by proposal-police: This proposal was edited at 2025-01-16 11:01:48 UTC. ProposalPlease re-state the problem that we are trying to solve in this issue.Improve phone number input validation and provide clear error messages for users. What is the root cause of that problem?The validation function in the following file is causing issues: 'src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx' on line 52 src/languages/en.ts on line 1989 What changes do you think we should make in order to solve the problem?Fixes: Update the error message to provide a clearer example: New Message: Update in
Modify in
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?
What alternative solutions did you explore? (Optional)Adding a country selector with flags to allow users to choose their country code directly. This would eliminate the need for users to manually type the + prefix and ensure proper formatting. While this approach enhances usability |
Does anyone have in the RCA why this existing |
@trjExpensify Because we use |
ProposalPlease re-state the problem that we are trying to solve in this issue.Improve Phone Number Entry Validation and Error Messaging for Users What is the root cause of that problem?1. The issue is that our validation function processes 2. We are getting wrong error message because we are fetching What changes do you think we should make in order to solve the problem?We should pass const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode); to get the correct error message we should update
to translate('common.error.phoneNumber'); What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?What alternative solutions did you explore? (Optional)If we want to allow the user to follow format other then E164 we can use const cleanedPhoneNumber = values[INPUT_IDS.PHONE_NUMBER].replace(/[\s\-\(\)]/g, '');
const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(cleanedPhoneNumber);
const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);
if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode.slice(0))) {
errors[INPUT_IDS.PHONE_NUMBER] = translate('common.error.phoneNumber');
} This approach allows the user to enter the phone number in any way as their preference (e.g., with spaces, dashes, or parentheses), but the |
Why? Given that we have |
@trjExpensify Might have been sync mistake while creating that page. |
Job added to Upwork: https://www.upwork.com/jobs/~021880325640829343919 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox ( |
@suneox, @bfitzexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick! |
Thank you for all the proposals. I'll check them within today. |
Base on expected result @huult proposal satisfies the requirement. It ignores non-numeric characters before formatting/validation, and currently the BE only allow phone numbers in E.164 format can be saved other formats cannot be saved. Therefore, we need to format the phone number to E.164 before submit to BE, and it also included in his proposal. @shubham1206agra Your proposal does not support saving in another formats like +1 201-867-5309Screen.Recording.2025-01-21.at.23.25.57.mp4However, I agree that we should fix the same issue in substeps/PhoneNumber.tsx Overall, we can proceed with @huult proposal and apply the same fix in 🎀 👀 🎀 C+ reviewed |
Triggered auto assignment to @NikkiWines, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
Sorry @suneox, but this is a BE problem then since we should allow saving in different formats as it is. We allow these formats in BA flow, so why not here? |
I'm not sure if the BE can support various phone number formats with different country codes and patterns to process with a phone number mask, such as cc: @bfitzexpensify |
@suneox If it was explicitly written in expected result that we need to save in E.164 format, I would have adjusted the logic. Since this is not in scope of the actual issue. We should not make decision on something that is outside scope of the issue or can be easily modified during the PR phase. |
We can wait for feedback from the internal team |
Correct. Phone numbers are currently saved in this format, so I don't consider it out of the scope of the issue to take that into account when making proposals for this issue. I think @huult's proposal looks good too. And we should use this format for the error message for the sake of consistency |
📣 @suneox 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app! |
📣 @huult 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
Thank you all, I will create pull request within 24 hours. |
Excited to see this live 👀 |
We are still working on an edge case in the PR. |
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Version Number: 9.0.86-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): convert
Action Performed:
Expected Result:
The system should accept phone numbers with or without the + prefix and ignore non-numeric characters during validation.
The error message should be clear and provide an example of a correctly formatted phone number.
Update the error message to:
"Please enter a complete phone number (e.g., +1-(201)-867-5309)."
This provides a clearer example of the expected format.
Actual Result:
The system requires a strict format starting with + and rejects numbers with non-numeric characters.
The error message shown is vague and unhelpful: "Please enter a valid phone number."
Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @suneoxThe text was updated successfully, but these errors were encountered: