search

woocommerce / woocommerce-ios

WooCommerce iOS app
https://www.woocommerce.com/mobile
GNU General Public License v2.0
298 stars 110 forks source link

[Shipping Labels] Phone Validation in Ship To screen states 10-digit, but requires 11-digit #5160

Open joshheald opened 2 years ago

joshheald commented 2 years ago

Describe the bug When typing a phone number in the customs form Ship from screen, a validation error shows as "Custom forms require a 10-digit phone number". This error shows unless an 11-digit number is entered.

Additionally, the error should read "Customs forms", rather than "Custom forms".

To Reproduce Steps to reproduce the behavior:

  1. Go to the Orders tab
  2. Open an international order
  3. Open the Ship from address and edit the phone number to 10 digits.
  4. See error
  5. Tap other fields and the Done button, see that the error remains
  6. Enter 11 digits and see that error is removed

Screenshots

https://user-images.githubusercontent.com/2472348/136417847-10670ed1-8fa6-4e81-9ad6-0554c3d37042.mp4

Expected behavior When entering 10 digits, validation should pass and no error be shown.

N.B. 10 digits is only applicable for US phone numbers, which (given WCShip is still US-only) is fine for now, but longer and shorter numbers will need to be accommodated when this is released in other countries. It seems like this validation is client-side, so this seemed worth noting. I've confirmed that this validation is not applied to the Ship to phone number.

Isolating the problem (mark completed items with an [x]):

Mobile Environment Please include:

WordPress Environment

``` Copy and paste the system status report from **WooCommerce > System Status** in WordPress admin. ```
itsmeichigo commented 2 years ago

Hi @joshheald 👋

This is actually expected, since this Ship From form expects a US phone number - so if you start the number with 1 it's considered as country code and you'll need extra 10 digits for the phone number.

We're following the behavior on the web app - but if you find a better way for the UX please do leave us a suggestion! Thanks 😄

joshheald commented 2 years ago

Ah, thanks for explaining that @itsmeichigo! That makes sense now.

To improve the UX, I'd suggest that we consider formatting the data entered according to the NANP i.e. +1 (234) 235-5678, which we could do by providing a mask and using an approach like this one

We could also put the mask as placeholder text to hint on the format to the user ahead of entry?

It's a little fiddly and requires autofill testing, but perhaps worth doing from the look of it?

joshheald commented 2 years ago

Or we could use PhoneNumberKit. Not sure whether we really want a dependency for this but it does look pretty effective and future proof.