[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 contributors@expensify.com 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.