Phone number - Add country code input to phone number field

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Log in to an account that doesn't have a phone number set
2. Navigate to profile settings
3. Scroll to the phone number field

Expected Result:

There should be an input for country codes. It should default to the country code of your current location, and when clicked/tapped, should just be an input for the user to type in their country code. We don't want a big dropdown list of countries, and we don't want to use any additional third-party packages.

Actual Result:

There's no country code selector or instructions to indicate the user that he must add the country code to the phone number.

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web ✔️
iOS✔️
Android✔️
Desktop App✔️
Mobile Web✔️

Version Number: 1.0.74-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Upwork job post: https://www.upwork.com/jobs/~01ee4f567be50b24b3
View all open jobs on Upwork

---

From @aliabbasmalik8 https://expensify.slack.com/archives/C01GTK53T8Q/p1624845554159200

We can add countries' code dropdown while adding phone numbers because most of the time users did not enter their country code before the number and they have no idea what's wrong with their phone number

[MelvinBot]

Triggered auto assignment to @Luke9389 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Luke9389]

Looks like a great External issue 👍

[MelvinBot]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[aliabbasmalik8]

Would like to work on this issue. We can use some components for this issue like https://www.npmjs.com/package/react-native-country-picker-modal example http://xcarpentier.github.io/react-native-country-picker-modal/
OR can make all work custom.

With a custom approach, we can save all country codes in an array and show them in the dropdown list with phone number input.

EXAMPLE WORK VIDEO:

Screen.Recording.2021-06-30.at.5.46.09.AM.mov

Thanks

[devpanther]

PROPOSAL

I have added a country code selector beside the input field for better reach on the user's side, made use of a package(react-native-country-picker-modal) that can be customized to remove and add more countries

VIDEO OF WORK BELOW: -

Screen.Recording.2021-07-01.at.8.34.45.PM.mov

[shubhamgrover93]

Hi,
Thanks for the invitation. I would like to share a solution for this task.
We can use a component of React Native (country-picker-modal) with the help of which, the user would be able to select a country. Once a particular country is selected, its country code will be displayed in the given field and then the regular phone number digits could be added.

There's an alternative to achieve this with custom-functionality. We can create a list of country codes & save it in the database. And can give that as an option for a user along with phone number input.

Please check the attached video:
https://user-images.githubusercontent.com/47270753/124427570-2f5fd600-dd89-11eb-8a36-9e8024fe92f9.mp4

Thanks.

[devpanther]

@shubhamgrover93 did you really have to use my video 😄😄

[Luke9389]

Hey contributors, thanks for the proposals thus far. You've really all been saying the same thing, which is that you want to use a package to make this list. We're not gonna go that route. I've updated the description of this issue to indicate that. I'm gonna give @aliabbasmalik8 a day or two to respond because it was his original comment that lead to the creation of this issue.

[Luke9389]

I also put this on hold to wait for this to be merged.

[aliabbasmalik8]

@Luke9389 would like to work on this when this issue will reopen.

Thanks

[haseeb-islam]

Hi

Yes, I am interested to work with you.
I checked the issue on Github and I will use this "country picker model" in the app

https://www.npmjs.com/package/react-native-country-picker-modal

[Luke9389]

@haseebb Thank you for your interest, but if you read the above thread you'll see that we're not accepting new proposals for this right now, nor are we interested in using npm packages for this solution.

[Luke9389]

I'm going to be OOO for all of next week, so I can get back to this after that

[Luke9389]

Quick update, we're still waiting on this issue to get merged before taking this one off HOLD.

[puneetlath]

@Luke9389 looks like that has been merged. Shall we take this off hold?

[Luke9389]

Oh, nice catch. 👍

[Luke9389]

OK, this issue is now off HOLD and accepting new proposals. @aliabbasmalik8 brought this issue to our attention so I'll see if he's still wanting to submit a proposal.

[aliabbasmalik8]

PROPOSAL

We can add an input field here

App/src/pages/settings/AddSecondaryLoginPage.js

Line 128 in f3228de

</Text>

like this

{
    this.formType === CONST.LOGIN_TYPE.PHONE && (
    <View style={styles.mb6}>
        <ExpensiTextInput
            label={this.props.translate('addSecondaryLoginPage.addCountryCode')}
            ref={el => this.countyCodeRef = el}
            value={this.state.countryCode}
            onChangeText={countryCode => this.setState({countryCode})}
            keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
            returnKeyType="done"
        />
    </View>
    )
}

and also add countryCode in the state, and update submit handler

App/src/pages/settings/AddSecondaryLoginPage.js

Line 87 in f3228de

submitForm() {

like this

submitForm() {
      const login = `${this.state.countryCode}${this.state.login}`;
      setSecondaryLogin(login, this.state.password)
          .then((response) => {
              if (response.jsonCode === 200) {
                  Navigation.navigate(ROUTES.SETTINGS_PROFILE);
              }
          });
  }

and add countyCodeRef ref and focus if country code exist

App/src/pages/settings/AddSecondaryLoginPage.js

Line 109 in f3228de

if (this.phoneNumberInputRef) {

if (this.countyCodeRef) {
    this.countyCodeRef.focus();
} else if (this.phoneNumberInputRef) {
    this.phoneNumberInputRef.focus();
}

Here is screenshot

Thanks

[Luke9389]

Just leaving a quick comment here to shake the Overdue label off of this issue. No internal progress on this just yet.

[Luke9389]

Just leaving a quick comment here to shake the Overdue label off of this issue. No internal progress on this just yet.

[kadiealexander]

Please refer to this post for updated information on the n6 hold, we've raised the bonus to $250 for all issues where a PR is created before the N6 hold is lifted.

[Luke9389]

Been working on other stuff

[Luke9389]

Looping back around to this soon

[iwiznia]

FWIW I am a 👎 on this feature:

I personally find those selectors annoying. I know my country code already, I rather type it than have to select it from a drop down.

[sig5]

Seems like this issue has been inactive for a while, I will drop in my proposal as I would like to work on it.
Proposal

API changes:
Currently we have an object containing country codes in Onyx. We can instead have a country mapping, which contains country code-specific Details (Here currency type and Country mobile code). Also, we can have country code saved in myPersonalDetails instead of localCurrency .

Client Changes
We can introduce a new component AutoCompleteTextInput which can listen to text changes in TextInput and filter the dropdown suggestions in a view that appears below the input.
As soon as the dropdown selection is matched, the focus will be shifted to the Phone number textInput.

I will post more elaborate details if I can be working on this and it has not been taken up by anyone else.

[Luke9389]

Looping back around to this soon

[Luke9389]

I'm going to close this for the time being. I don't forsee being able to push this initiative for at least another month.