Contact Form: Improve phone no formatting

[eltongo]

Changes proposed in this Pull Request

This PR introduces an improvement of formatting code of the phone input in the contact form, fixing a few annoying issues, and increasing its stability in general 🙏

Testing instructions

To replicate the issues (before applying the changes):

• Fill in a number with the country code (e.g. +441234567), and then insert a 0 between the + and the first digit of the country code (i.e. +0441234567). You'll notice the country code will be duplicated (in this example, it will become +44441234567)
• Open the Dev Tools. Clear the field, choose a country (e.g. UK), and enter a national phone no starting with a few zeros: (e.g 000123456), and then save. In the Network tab of Dev Tools, check the phone number that is sent in the API call: it should be +44.00123456 (i.e. only one zero removed)

After applying the fix:

• Verify that you can enter as many zeroes as you want between the + and the first digit of the country code. Also verify that those zeroes will be removed once you submit (check the API call as well)
• Verify that all zeroes before the national number are removed (e.g. 000123456 with UK chosen as the country, becomes +44.123456 when sent to the backend)
• Trying to enter any amount of zeroes followed by the country code for the currently selected country should "strip" the country code from the input (e.g. choosing UK and entering 0044123, the number becomes 0123)
• Try to make it fail... please.

[matticbot]

Test live: https://calypso.live/?branch=fix/phone-input-duplicate-cc

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~124 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
woocommerce        +63 B  (+0.0%)      +31 B  (+0.0%)
purchases          +63 B  (+0.0%)      +31 B  (+0.0%)
domains            +63 B  (+0.0%)      +31 B  (+0.0%)
checkout           +63 B  (+0.0%)      +31 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~92 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
async-load-design-playground        +63 B  (+0.0%)      +31 B  (+0.0%)
async-load-design-blocks            +63 B  (+0.0%)      +30 B  (+0.0%)
async-load-design                   +63 B  (+0.0%)      +31 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[klimeryk]

Tested, no obvious regressions, seems to work exactly as I'd hoped - thanks! 👍

[klimeryk]

Gotta admit, at first I thought it meant "0, followed by as many 0 as you can get".

AFAIK 0{0,} == 0*? If so, I'd say the latter is the clearer way of writing it IMHO.

[eltongo]

Ahh I knew there was a better way, so obvious 😅

Thank you, great suggestion.