[HOLD for payment 2023-03-16] Allow searching for phone numbers with parenthesis, spaces and dashes in them

[puneetlath]

Problem

It is very common for phone numbers to be formatted with dashes, parenthesis, and spaces. For example, my iPhone will automatically format 2345678899 to (234) 567-8899. If I then copy that phone number into the New Chat page in Expensify, it won't recognize it as a phone number that I can create a chat with. It only recognizes 2345678899 or +12345678899.

This is unlike the sign in page, which handles phone numbers like this just fine.

Solution

Treat phone numbers with these characters as phone numbers. We should not modify the user's input that they type, but we should strip these characters when validating whether it is a phone number. That would mean that I can create a chat with (234) 567-8899. Or, if I search for (234) 567-8899 it will find my chat with +12345678899.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0185423b9270557864
• Upwork Job ID: 1630220601905479680
• Last Price Increase: 2023-02-27

[narefyev91]

Hello, I'm Nicolay from Callstack and I'm interested in taking and analysing this issue to work on a fix for it.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~0185423b9270557864

[MelvinBot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @sobitneupane (Internal)

[puneetlath]

Great, looking forward to working with you @narefyev91. Please post a high-level proposal here about how you plan to approach the solution before you raise a PR. You can use the proposal template here. Thanks!

[vegtelenseg]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Allow searching for phone numbers with parenthesis, spaces and dashes in them

What is the root cause of that problem?

The onChangeText handler of the OptionsSelector passes the user input as is (i.e including hyphens and brackets) instead of sanitising it first, before passing it down to getNewChatOptions.

What changes do you think we should make in order to solve the problem?

Before passing the user input as an argument to onChangeText handler, a regex can be employed to remove all the unnecessary characters in the phone number so that the function that does the searching, receives input that matches the internal structure of a valid phone number.

The flow would be as follows:

1. If user input has any characters (with or without special characters), then it is either a name or email address, therefore
2. Continue as normal
3. If input has some special characters (without regular characters), then assume it is a number, therefore
4. Apply the regex, and then
5. Continue as normal (but now using the result of step 4)

What alternative solutions did you explore? (Optional)

[MelvinBot]

📣 @vegtelenseg! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[vegtelenseg]

Contributor details
Your Expensify account email: mzam.siya@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f892a17f2136554

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[narefyev91]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Searching with formatted phone number is not working, application won't recognise it as a phone number that we can create a chat with

What is the root cause of that problem?

The main issue here that search mechanism is not understand formatted phones.
To make it working we should do some code steps:

1. We need to catch if user typing/pasted formatted phone number
2. If yes - we need to remove all characters which is not numbers (we will not remove them from user input). All work will be happened in this method updateOptionsWithSearchTerm right before sending information to OptionsListUtils.getNewChatOptions. We will modify searchValue inside updateOptionsWithSearchTerm and nothing in global state. That's why user will not see any changes in input
3. if not - no changes needed

To catch phone number - we will use regExp which will indicate that user adds phone number in input field
Example:
/^\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/; - this will work for most of the common phone formats
To remove any characters which are not numbers we will use simply replace(/\D/g, '') function

What alternative solutions did you explore?

cc @puneetlath

[puneetlath]

This mostly sounds good to me.

However for this:

If yes - we need to remove all characters which is not numbers

We want to make sure that we don't edit the user input. The user should see what they typed unchanged. Meaning the user should see the value in the input field exactly how they typed it. However if they type a formatted number, any matching unformatted phone number chats should show in the list and creating the chat should work properly. Can you update the proposal accordingly?

Also @sobitneupane if you have any other thoughts.

[narefyev91]

@puneetlath
2. If yes - we need to remove all characters which is not numbers (we will not remove them from user input). All work will be happened in this method updateOptionsWithSearchTerm right before sending information to OptionsListUtils.getNewChatOptions. We will modify searchValue inside updateOptionsWithSearchTerm and nothing in global state. That's why user will not see any changes in input

[puneetlath]

Ok cool. That sounds good to me. Two other things:

1. it looks like we have a few different existing regexes for phone numbers in CONST.js. So we should see if any of those will work and if not probably update them rather than adding a new one.
2. We should make sure this update is applied to any page that takes phone number input. I know of the new chat and search pages, but there might be others. And we should do it in a DRY way if we can.

Otherwise, the proposal sounds good to me.

[narefyev91]

@puneetlath
Sure - i will debug existing regexes and see if any can be used, and also will checking all possible places in which we will apply those changes

[MelvinBot]

@puneetlath, @sobitneupane, @narefyev91 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[puneetlath]

PR is on staging.

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.80-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Allow searching for phone numbers with parenthesis, spaces and dashes in them #15594

If no regressions arise, payment will be issued on 2023-03-16. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[puneetlath]

@sobitneupane sent you a hiring offer.

For me: https://www.upwork.com/nx/wm/pre-hire/c/8577561/offer/23642022

[sobitneupane]

@puneetlath Thanks. Accepted the offer.

[puneetlath]

All paid. Thanks @narefyev91 and @sobitneupane!