[Enhancement]: Enhance the Phone input in the Checkout block

[mikejolley]

We'd like to enhance the phone number input with some form of validation or pattern/mask to ensure customer provided values are correct. Currently the field on checkout is plain text and has no form of validation.

There are some use cases (international stores) where this could be important:

For a webshop shipping in Europe it is not uncommon to ship across borders, and some countries have similar phone number formats. Without a country code prefix we risk sending out shipping information to the wrong customers as the shipping providers require a country code when we provide recipient phone number. An example could be a Danish shop shipping domestically and to Norway - both countries have the same phone number format, but as long as the customer is not told or required to provide a country code during checkout we really do not know what country the phone number belongs to

@pmcpinto

In Feb we did a code spike into this to assess various libraries pca54o-7aK-p2 To summarise the components and libraries we investigated:

We produced two working demos but each had flaws. We're thinking AriaKit could be a good fit and now we're using React 18x this is no longer a blocker.

I believe that once we have a decent working solution, we should bundle it for reuse in the @woocommerce/components package.

Open questions and considerations

1. Package size impact
2. What features should this component support, so that it’s reusable across Woo?
3. How will we handle the allowed countries (all vs subset)?
4. How should the component look in the end? (design input needed)
5. Should we handle mobile and landline numbers?
6. Should we allow merchants to control the input once they ship to one country?

[pmcpinto]

Thanks for the ping. This is a good improvement. Personally, I find it easy to make typos when I need to input a phone number. So, validation is always useful. It will be helpful to estimate the effort required before prioritizing this work.

Is WooPay still using intl-tel-input? What's the biggest downside of this option? Bundle size? We should have a component that can be used by us and WooPay. cc @nikkivias

How will we handle the allowed countries (all vs subset)?

Should we allow merchants to control the input once they ship to one country?

Are these questions about what we should do if merchants define specific rules in the Selling location(s), Shipping location(s), and Default customer location settings?

Should we handle mobile and landline numbers?

IMO we should start with mobile numbers, as it's the most common use case. But it depends on the difference in terms of effort to support mobile-only or both.