Contact form: Fix problem when inserting phone number that begins with same digits as country code

[leonardost]

Changes proposed in this Pull Request

The phone input field in the domain contact information form has had a problem for some time (issue #25039): when a user tries to input a phone number which begins with the same digits as the selected country's international dialing code, these numbers are removed from the input. Copy and pasting also doesn't work, the initial digits are removed the same.

For example, Brazil's dial code is +55, and a valid Brazilian phone number is 55 1234-5678, 55 being a national city code. This video shows what happens when you try to input that number by typing or pasting:

Kapture.2021-07-12.at.18.11.31.mp4

This PR fixes that behavior by updating the logic of when the international dialing prefix should be removed.

Testing instructions

This component has been tweaked several times (#41783, #37603, #24870, #10447 to cite a few), so please test it thoroughly. 🙇‍♂️

Unit tests should all be passing: yarn run test-client client/components/phone-input/test, but manual testing is also appreciated. The contact information form can be reached in the checkout page when buying a domain.

• Open the contact information form, enter phone number +555512345678 and ensure Brazil becomes the selected country. The number should be formatted like +55 55 1234-5678
• Clear that number and while Brazil is still selected, try to enter phone number 5512345678. Ensure the 55 city code prefix is not removed.
• Try other combinations of countries and phone numbers, for example:
  • Select Italy (dial code +39) and enter phone number 3911711711 - ensure the initial 39 remains there
  • Select India (dial code +91) and enter phone number 9100123456 - ensure the initial 91 remains there
  • Select a NANPA (North American Numbering Plan Administrator) country - the US, Canada, etc. - enter a valid phone number and ensure it is formatted correctly

Related to #25039

[matticbot]

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

Sections (~17 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases        +61 B  (+0.0%)      +17 B  (+0.0%)
purchases             +61 B  (+0.0%)      +17 B  (+0.0%)
domains               +61 B  (+0.0%)      +17 B  (+0.0%)
checkout              +61 B  (+0.0%)      +17 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 (~17 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-design-playground                           +61 B  (+0.0%)      +17 B  (+0.0%)
async-load-design                                      +61 B  (+0.0%)      +17 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal        +61 B  (+0.0%)      +17 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.

[matticbot]

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor update/fix-problem-when-inserting-phone-number-that-begins-with-same-numbers-as-country-code on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

[matticbot]

This PR modifies the release build for notifications

To test your changes on WordPress.com, run install-plugin.sh notifications update/fix-problem-when-inserting-phone-number-that-begins-with-same-numbers-as-country-code on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-elI-p2

[matticbot]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-10054
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-10054&env=jetpack

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/fix-problem-when-inserting-phone-number-that-begins-with-same-numbers-as-country-code on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[delputnam]

Ok. I've reviewed this and tested it every way I can think if. It seems to work great.
Thank you for this fix and for adding the tests! 🙇