PhoneNumberInput needs masking prop

[nnnnat]

PhoneNumberInput

Overview / Summary

Summary description of UI component

The PhoneNumberInput component was added with the AddressForm and currently is just a simple copy of the TextInput that removes special characters from the input value on change.

The PhoneNumberInput could use 2 modification:

1. Update component code to just be a wrapper if the TextInput component instead of a copy. This was my original approach but I was unable to get the wrapped input to return a value to the Form component on submit.
2. The PhoneNumberInput needs to accept a prop that set the inputs formatting pattern. Not totally sure how to best do it but I was thinking you could pass a regX as a prop. @reactioncommerce/ design would like to use (XXX) XXX-XXXX as the default value format.
   • One caveat is we need the input to display the value with the provided phone number format we always need to return a phone number that has been stripped of all special characters (i.e. 5042347878)

[aldeed]

The best solution I've found for this is https://text-mask.github.io/text-mask/. We should be able to just swap the input for that, and supply the mask. The hard part would be figuring out the mask for each country.

Alternatively, there is https://www.npmjs.com/package/react-phone-number-input, which already has the country selection. If it's not too hard to style that to match and tweak it to work with ReactoForm, it has more out-of-the-box features.