feat: ability to add phone number in profile 📲

[Hamza-Mos]

Description ✏️

Closes #471

• Implement functionality to add/edit phone numbers in general information section of member profile.

Screenshots:

Empty:

Invalid:

Valid:

Database:

Type of Change 🐞

• Feature - A non-breaking change which adds functionality.
• Fix - A non-breaking change which fixes an issue.
• Refactor - A change that neither fixes a bug nor adds a feature.
• Documentation - A change only to in-code or markdown documentation.
• Tests - A change that adds missing unit/integration tests.
• Chore - A change that is likely none of the above.

Checklist ✅

• I have done a self-review of my code.
• I have manually tested my code (if applicable).
• I have added/updated any relevant documentation (if applicable).

[tomas-salgado]

This is great stuff @Hamza-Mos! Just left a few minor comments but almost good to go!

[tomas-salgado]

Nice work @Hamza-Mos, LGTM!

[ramiAbdou]

Awesome work, @Hamza-Mos! 💯

Phone number formatting can get very difficult and I thought you killed that formatPhoneNumber function! That was a neat trick you used to keep the end parenthesis open when the digit length was 3, which made it easy to delete the 4th number (and similarly for the -).

I made an update so that we're only storing digits in our database as opposed to the parentheses/dashes! Thought about storing the country code as well, but don't think we need to since we're only serving US/Canada-based folks. Luckily we avoided a whole slew of complexity by not serving international numbers cause then we would've had to use something like react-phone-number-input which is really heavy and nasty haha.

Can't wait to see this in prod!