Updates to validation check messaging when inviting email/phone numbers

[puneetlath]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Current

Right now, when start a chat with a new user who you've never chatted with before, and you enter only letters this is what you see.

This shows until you enter a valid email format, at which point you see this.

Alternatively, if you enter just numbers, this is what you see from the start.

Unless you enter a number starting with 0, in which case you see this.

New

Instead of this, here's how we'd like it to work:

1. Remove the feedback message "Don't see who you're looking for? Type their email or phone number to invite them to chat."
2. When typing, if the input does not match a valid email or phone number format then show the what they've typed below, but greyed out and unselectable.
3. Once the input matches a valid email or phone number format then show the option as selectable (as we do today)
4. If the input is only numbers and begins with 0, then display message Please enter a phone number including the country code e.g +447814266907

Internal issue: https://github.com/Expensify/Expensify/issues/154200
Upwork job: https://www.upwork.com/jobs/~01c64a96ae738dcc05

[muhammadzaman0510]

This is how I'll fix the issue.

• I will search for those message where those are implemented in code
• Will change the implementation so that instead of showing those message I will pass the updated text whatever is written in text input by the user as explained in job
• For digits I will change the message as explained in job, I believe code already differentiating between string and digits so I only need to update the message there.
• At the end I will verify the happy path when match is found so it should be clickable and for not found it should be grey.

[umarsalahudin]

#Quick Fix

• Review the code carefully and remove the feedback message.
• Make the selectable field border grey and unselectable until the correct email and number is enetered
• Show the field selectable or optional (add green border) if the email is correct.
• Also for digit show the message "Please enter a phone number including the country code e.g +447814266907" if it begins with 0.

[SameeraMadushan]

Hi @puneetlath

Here is my proposal,

Proposal

• New chat, New group, and Search functions used OptionList and OptionSelector components.
• All the functions re-use the same OptionListUtils.js
• Therefore the solution will be focused on OptionsListUtils -> getOptions() function

Solution

• Here is the implementation.

• As you can see here, I have changed getOptions() userToInvite variable with some conditions.

1. First I will check if the search value starts with '0' and if it only contains numbers (this regex can be moved to a different place to increase the re-usability)
2. If YES --> I will skip adding the userToInvite object.
3. If NO --> That means the search value is a valid number or some other text.
4. Then It will check the necessary validations to add country code or not.
5. Again I will check if the searchValue is not a valid email and not a valid phone number.
6. If YES I will add a new key as disable to userToInvite object.

• Then I will change the NO_CONTACTS_FOUND text as follows

• As described in the above (2.) It will skip adding the record and show this text as a message.

• Then to disable the row item, I will add the new property disable to OptionRow.js TouchableOpacity
  

• Then with that property I will change the styles of the row in OptionRow.js

• Image also can be changed in the above-described step number (6)

Outputs

Thanks.

[johndev0711]

Hello. This is John.
I've solved the issues simply and perfectly.
The solutions are as following:
It needs to modifying for mainly only one file. ( getHeaderMessage in OptionsListUtils.js, )
In a word, we have to add the props-searchValue in the getHeaderMessage function and modify the function comments.

By modifying the only four line code, I've fixed all issues.

1. 1.Remove the feedback message "Don't see who you're looking for? Type their email or phone number to invite them to chat."
2. When typing, if the input does not match a valid email or phone number format then show the what they've typed below, but greyed out and unselectable.
3. Once the input matches a valid email or phone number format then show the option as selectable (as we do today)
4. If the input is only numbers and begins with 0, then display message Please enter a phone number including the country code e.g +447814266907

Thanks.

[kaushiktd]

Hi,

This is Kaushik here. I would like to put a technical and pretty self explanatory solution for this

1. Remove the feedback message "Don't see who you're looking for? Type their email or phone number to invite them to chat."
   2. When typing, if the input does not match a valid email or phone number format then show what they've typed below, but greyed out and unselectable.
   3. Once the input matches a valid email or phone number format then show the option as selectable (as we do today)
   4. If the input only numbers and begins with 0, then display message Please enter a phone number including the country code e.g +447814266907