Skip to content
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

Show first & last name length errors on front end #5963

Merged
merged 12 commits into from
Oct 22, 2021

Conversation

Beamanator
Copy link
Contributor

@Beamanator Beamanator commented Oct 20, 2021

Details

Idea coming from here: #5091 (comment) - we're starting to standardize showing input errors when submitting the form - validating on the front end instead of on the back-end. This speeds up users seeing errors and prevents some unnecessary API calls.

Related Issues

Related to: #5091

Tests

  1. Log in with any account

Profile page:
2. Open your profile page (Settings -> Profile)
3. Add a first & last name over 50 characters (ex: 012345678901234567890123456789012345678901234567890)
4. Try to save the form, verify you see red outlined fields & errors under each
- Screen Shot 2021-10-20 at 11 35 16 AM
5. Change your first name to be between 0 and 50 characters
6. Resubmit the form, verify you only see the last name field with red outline & error underneath
7. Change your last name to be between 0 and 50 characters
8. Resubmit the form, verify there's no errors and you see the success growl

Request call page:

  1. Navigate to your chat with Concierge, click the "Request call" icon
  2. Repeat tests from profile page, verifying you see:
    • Errors under both name inputs when their lengths are > 50 characters
    • No errors under either input when their lengths are between 1 and 50 characters
    • An error shows if either the first or last names are empty
    • You still see phone number errors if it's empty or if it's an invalid phone number

QA Steps

Same as above

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web

Profile Page:
Screen Shot 2021-10-20 at 11 35 16 AM

Request a call:

Screen.Recording.2021-10-20.at.11.47.05.AM.mov

Mobile Web

Profile Page:
Screen Shot 2021-10-20 at 12 20 39 PM

Request a call:

Screen.Recording.2021-10-20.at.12.20.57.PM.mov

Desktop

Profile Page:
Screen Shot 2021-10-20 at 11 57 31 AM

Request a call:

Screen.Recording.2021-10-20.at.12.06.21.PM.mov

iOS

Profile Page:
Screen Shot 2021-10-20 at 12 16 56 PM

Request a call:

Screen.Recording.2021-10-20.at.12.17.39.PM.mov

Android

Profile Page:
Screen Shot 2021-10-20 at 12 04 20 PM

Request a call:

Screen.Recording.2021-10-20.at.12.09.58.PM.mov

@Beamanator Beamanator requested a review from a team as a code owner October 20, 2021 18:21
@Beamanator Beamanator self-assigned this Oct 20, 2021
@MelvinBot MelvinBot requested review from nickmurray47 and removed request for a team October 20, 2021 18:22
@Beamanator Beamanator mentioned this pull request Oct 20, 2021
5 tasks
@Beamanator Beamanator changed the title Beaman show name length errors on front end Show first & last name length errors on front end Oct 20, 2021
Copy link
Contributor

@nickmurray47 nickmurray47 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few small linting errors, but the rest lgtm

@Beamanator
Copy link
Contributor Author

Responded & resolved comments, fixed eslint issues, back on track! Looks like iOS e2e failing is due to this: https://expensify.slack.com/archives/C01GTK53T8Q/p1634754414008400

@Beamanator
Copy link
Contributor Author

Tests passed! 💪

Copy link
Contributor

@nickmurray47 nickmurray47 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good - had one more small comment for clarity!

@Beamanator
Copy link
Contributor Author

Updated! 👍

Copy link
Contributor

@nickmurray47 nickmurray47 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 nice!

@nickmurray47 nickmurray47 merged commit a6c9b6a into main Oct 22, 2021
@nickmurray47 nickmurray47 deleted the beaman-showNameLengthErrorsOnFrontEnd branch October 22, 2021 07:16
@OSBotify
Copy link
Contributor

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

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @nickmurray47 in version: 1.1.8-10 🚀

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

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @roryabraham in version: 1.1.10-2 🚀

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants