[HOLD #2934] Enhancements for "Debounce account search typing & fix how validation displays in UI"

[mallenexpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

On hold for #2934 since that one adds a necessary fix to phone number validation, and this one builds on that

These are enhancements are related to #2934. Please review that job for more details
Whomever is assigned that issue can work on these concurrently or after 2934 is fixed. If the assigner of 2934 doesn't want to work on this issue then it's held for anyone else until a week after 2934 is closed (to ensure there aren't regressions)

Enhancements:

When entering an email address or phone number in OptionsSelector's TextInputWithFocuStyles (on all screens where this exists), the app should do a few things:

1. Show a spinner when user is typing (debounce input, so stop showing spinner 300ms after user stops typing and do validation checks below)
2. When user has stopped typing for 300ms, do basic front-end validation checks
   • Email validation looks decent for now (Str.isValidEmai and !Str.isDomainEmail)
   • Phone number validation should get more strict, it's super basic at the moment (see Str.isValidPhone)
3. If above validation passes, do API-level validation for phone numbers only
   • Call the new Expensify API command IsValidPhoneNumber, which validates phone numbers in this format: '(\+?\d{10,15}|\d\d\d-\d\d\d-\d\d\d\d)'.

Make sure validation error messages still show correctly

• If phone number is invalid, show error message "Please enter a phone number including the country code e.g +447814266907". Example:
  • 
• If email address is invalid, show "Please enter a valid email address". Examples:
  • 
  • 

View all open jobs on Upwork

[MelvinBot]

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

[MelvinBot]

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

[Beamanator]

Removing @thienlnam b/c I'm happy to review proposals 👍

[Beamanator]

Oops, shouldn't have added Exported yet since this job isn't on Upwork yet :O

[pranshuchittora]

Proposal 📄

When entering an email address or phone number in OptionsSelector's TextInputWithFocuStyles (on all screens where this exists), the app should do a few things:

• Show a spinner when user is typing (debounce input, so stop showing spinner 300ms after user stops typing and do validation checks below)
• When user has stopped typing for 300ms, do basic front-end validation checks Email validation looks decent for now (Str.isValidEmai and !Str.isDomainEmail) Phone number validation should get more strict, it's super basic at the moment (see Str.isValidPhone)
• If above validation passes, do API-level validation for phone numbers only Call the new Expensify API command IsValidPhoneNumber, which validates phone numbers in this format: (\+?\d{10,15}|\d\d\d-\d\d\d-\d\d\d\d).
  Show errors below input box If phone number is invalid, show error message "Please enter a phone number including the country code e.g +447814266907".
• If email address is invalid, show "Please enter a valid email address". Examples:

Research/Investigation 🕵🏻‍♂️

• We need to implement debouncing
• Need to show the spinner
• Handle Validations

Approach 👨🏼‍💻

File of concern : Multiple (UI + Logic/Services)

• For implementing debouncing we can use lodash.
• We need to call the validate method/API on every keypress (debounced)
• The validation API and other required things are already provided by the author 👍🏼
• Sibling issue [PAY 8/19] Fix how validation displays in UI #2934 talks about the implementation of error methods, therefore some amount of dependency exists on the resolutions of the following issue.

Best Practices 💃🏼

• No hard-coded regexes
• No inline styling
• Accessibility
• Follow React Native best practices

Testing Strategy 🧪

• Unit tests for the underlying modules

Expected Delivery Time 📦

Approx 3-7 days. Considering any possible blockers

Open Questions ❓

• Any documentation for IsValidPhoneNumber. So far this is not been implemented in the codebase.
• Any UI design for this?
• Any specific spinner component (<ActivityIndicator />)?

Previous Experience 🙅🏼‍♂️

• [Hold - for payment on Wed 26th] Add an About and App download links page to Expensify.cash #2811

[Beamanator]

Thanks for the proposal, @pranshuchittora !

Here's some responses to your questions:

• Any documentation for IsValidPhoneNumber. So far this is not been implemented in the codebase.

  • Input: Object in format: { phoneNumber: "720-111-1111"}.
    • Valid if phoneNumber satisfies this regex: '(\+?\d{10,15}|\d\d\d-\d\d\d-\d\d\d\d)'
    • Example:

      API.IsValidPhoneNumber({ // you will have to create this in `/src/libs/API.js`
          phoneNumber: "720-111-1111",
      }).then((response) => { ...

  • Output: Json with these properties:
    • isValid (boolean) - is the passed phone number valid
    • jsonCode (number) - should be 200 if the request made it to the api & back to front-end successfully. Otherwise, maybe an internet connection error occurred
    • requestID (string) - this is for internal expensify log tracking, not needed for this job

• Any UI design for this?

  • For error message designs, please follow what you see in the screenshots in the original post.
  • For spinner design, see below

• Any specific spinner component ()?

  • ActivityIndicator should be perfect, we currently use that component in a few places in our app
  • @shawnborton I bet we can just do size="small" on this spinner, right? Care what color we use? Maybe themeColors.spinner?

[pranshuchittora]

Is that works @Beamanator

Peek.2021-05-17.22-13.mp4

Debounce

Peek.2021-05-17.22-14.mp4

[Beamanator]

Hey @pranshuchittora !

I like the debouncing, but I believe we should show the spinner while we're waiting for the user to stop typing (for 300ms) and while waiting or the IsValidPhoneNumber response to come back. Also are you planning to make sure the "Concierge" & "pranshu_...@srmuniv..." chats are hidden while the text input is debounced?

[pranshuchittora]

Hi @Beamanator

• Will add the spinner

Also are you planning to make sure the "Concierge" & "pranshu_...@srmuniv..." chats are hidden while the text input is denounced?

Not sure about this but I have decided to keep them because so that user have something to go for. Thinking in terms of the User Experience, it is better to show something instead of nothing. Would love to hear your thoughts on this as well :)

[pranshuchittora]

✔️ Spinner
✔️ Debounce
✔️ Ignore phone number validation on email
✔️ Edge cases

Peek.2021-05-18.18-42.mp4

cc @Beamanator

[Beamanator]

I absolutely don't consider myself an expert in design, which is why I'd recommend we consult with the @Expensify/design group :D

Hey designers! How do y'all feel about the above design, specifically:

1. When typing in that text box, should we show only the spinner? Or should we also show matching chats?
2. When the user stops typing and there's some validation error (phone or email) and then keeps typing, the error should go away right?

[michelle-thompson]

When typing in that text box, should we show only the spinner? Or should we also show matching chats?

I think we should show matching chats. I know there have been times where I partially know a phone/name/email and search results fill in the rest, so I think it's helpful.

When the user stops typing and there's some validation error (phone or email) and then keeps typing, the error should go away right?

This makes sense to me, yeah.

[shawnborton]

I think the constant jumping around feels really strange. Could we do something where:

• There is always a small gap under the search box and above the top search result row. When there is the small validation message below the search box, it fills this space without causing the rows below it to jump around
• Could we place the loader in the text input, perhaps floating off to the right or something? Or perhaps place it absolutely positioned on top of the search results, and perhaps slightly fade out the results while typing?

Basically this flow should feel ultra smooth and not bouncey/jumpy like it does in the video, so hopefully the ideas above will help us solve that.

[Beamanator]

Ooh I like these ideas! What do you think @pranshuchittora ?

[Beamanator]

Ooh that looks great! Let's see what the @Expensify/design team things too :D

[michelle-thompson]

Looks good! My only comment is that the search results feel too close to the input. It should look like this, which has 12px padding between input and results:

[pranshuchittora]

Done @michelle-thompson I have updated the PR

[michelle-thompson]

The spacing looks great!

One more comment -- it looks like the focus border is on top of the original input border, you can see a light grey border on all four corners. Can we ensure that the corner radii for the focus matches so we don't see two borders?

[pranshuchittora]

The spacing looks great!

One more comment -- it looks like the focus border is on top of the original input border, you can see a light grey border on all four corners. Can we ensure that the corner radii for the focus matches so we don't see two borders?

The focus border is browser behaviour. It depends on the browser and platform (OS). Overriding it might not be feasible.
cc @Beamanator

[Beamanator]

@pranshuchittora I think you're right about that - also, there's another issue (#3108) to handle form styling, so as long as this PR doesn't introduce any new form styling issue (which I don't think it does), you can definitely leave this as is :D

[mallenexpensify]

@Beamanator @pranshuchittora , can I get an update on this? Want to post in the parent issue where we're at. Thanks

[Beamanator]

Waiting on @pranshuchittora to respond to my comments or work on requested changes

[Beamanator]

Unassigning for lack of updates - I'm going to clean up requirements & put this on hold for #2934

[Beamanator]

Issue we're holding for hasn't been completely fixed yet

[Beamanator]

Back to weekly since I'm focusing on some other tasks for now

[Beamanator]

Closing this issue since it would be nice to have a fresh start when we're ready

[mallenexpensify]

Canceled job in Upwork