LG-9782: Phone number validity error does not describe how to correct the error

[jmdembe]

🎫 Ticket

LG-9782

🛠 Summary of changes

This PR enhances the error message when the user enters an invalid phone number

📜 Testing Plan

Creating an account

From the home screen, follow all instructions to create an account. When on the "Authentication method setup" setup screen, select "Text or voice message"

For US phone number error message:

• Type out an incomplete phone number. This can be 202555 or any combination of numbers with a US area code and is shorter than 10 digits.
• Click "Send code" to trigger the next step
• Result: Error message will say "Enter a 10 digit phone number."

For non-US numbers:

To toggle for entering a non-US phone number, you can do the following:

• Open the drop-down to select a new country
• Use the + key with the country code. An example would be +51 for Peru
• Type out an incomplete phone number based on the country. With the previous example, you can enter +51 333
• Click "Send code" to go to the next step
• User will see the error "Enter a phone number with the correct number of digits."

👀 Screenshots

If relevant, include a screenshot or screen capture of the changes.

Before:

After:

US phone error	International phone error

[aduth]

The intent of this assertion was to verify that it becomes valid again after entering a complete, valid number.

Could we keep the initial behavior where it validates against a single digit, and then the full number? Since I would expect entering just '5' should have the same behavior.

[jc-gsa]

Another approach to writing this function, and simplifying the string specifications, might be the following:

getInvalidFormatMessage(countryCode: CountryCode): string {
    return countryCode === 'US'
      ? t('errors.messages.invalid_phone_number.us')
      : t('errors.messages.invalid_phone_number.international');
}

Along with adding import { t } from '@18f/identity-i18n'; in the same file.

Glancing at the code quickly, I think that would make it simpler. Maybe I'm overlooking a dependency elsewhere.

[jmdembe]

This is possible, but we're maintaining the strings specifications in phone_input_component.rb

[aduth]

LGTM 👍

[aduth]

It might be good to create a separate test case for international validation, so that we're checking both, similar to what you had before with the revisions "it validates input for US numbers".

We're testing this indirectly with the test case below ("with single option, it validates phone from region"), but could be good to have the standalone test for the non-singular context.

Basically copy this test case and have two versions:

• it('validates input for U.S. number')
• it('validates input for international number')

Or:

context('with international number', () => {
  it('validates input', () => {
    // ...
  });
});