Feature Request (Polish) : Format the phone numbers like 123-456-7890

[kavimuru]

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

---

Problem:

Phone numbers are displayed without any format (123456789) which looks ugly

Solution:

We should better format them (e.g. 123-456-7890 instead of 1234567890). T

Context/Examples/Screenshots/Notes:

Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1679077176883759

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013a52bba4f477d2f9
• Upwork Job ID: 1638900508027600896
• Last Price Increase: 2023-03-23

[puneetlath]

Ideally we can find a global solution to this. Such that phone numbers from any region will be formatted nicely according to that region. Perhaps we could use a JS library like this one to help here.

[koko57]

I'll be happy to work on this feature :)

[MelvinBot]

📣 @koko57! 📣

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>

[koko57]

Proposal

Please re-state the problem that we are trying to solve in this issue. What is the root cause of that problem?

The phone numbers displayed are not formatted well. They are just extracted from login or display name.

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

We can use external library to format the numbers accordingly to the region. I think in our case we can use https://github.com/grantila/awesome-phonenumber - a lightweight library which uses Google's libphonenumber. It has a very simple API, decent docs and TS support. In App we have some utils dealing with phone numbers - we can make them use the lib.

What alternative solutions did you explore? (Optional)

We can use another library - libphonenumber-js.

[puneetlath]

That seems like a good option! I started a little bit of a discussion here about what considerations we should have when choosing a library.

In the meantime, let's assume we were to use that library. Let's talk a little bit about how we should display phone numbers. I would think something like:

• Use the national format for any phone numbers from the same country as you
• Use the international format for any phone numbers from other countries
• Display phone numbers consistently wherever they are displayed

[koko57]

@puneetlath I think I would go with the third option and display the numbers consistently using the international format. :) WhatsApp also follows this international format convention.