Move phone validation scripts to intl-tel-input pack

[aduth]

Why: Reduce size of main application bundle, which is loaded in all paths. Phone validation dependencies (notably libphonenumber-js) are quite large, and are only used in the context of the intl-tel-input pack (screens with phone input).

Impact:

Reduction of about 57% in application bundle (55.8kb to 24.1kb gzipped).

(Note: Locally disabled chunk splitting to generate these results to be more readable)

Before:

   js/application-8b2a6c3ef1bc883aa56f.js    196 KiB    0, 1  [emitted] [immutable]         application
js/application-8b2a6c3ef1bc883aa56f.js.br   47.9 KiB          [emitted]
js/application-8b2a6c3ef1bc883aa56f.js.gz   55.8 KiB          [emitted]

After:

   js/application-d3084ec0f1f8843f2518.js   75.9 KiB    0, 1  [emitted] [immutable]         application
js/application-d3084ec0f1f8843f2518.js.br   21.3 KiB          [emitted]
js/application-d3084ec0f1f8843f2518.js.gz   24.1 KiB          [emitted]

[zachmargolis]

LGTM

[mitchellhenke]

😮 😮 😮

This is great!!

[aduth]

FYI this appears to have been previously incorrect. TypeScript caught it. enablePhoneState takes three arguments.

[mitchellhenke]

would it have been throwing JS errors when used?

[aduth]

would it have been throwing JS errors when used?

Just by looking: It probably wouldn't throw, since the smsRadio we were passing as third argument is an HTMLInputElement, for which the innerText assignment is valid. It probably doesn't behave as we'd expect. I'll do some real-world testing to see that this works correctly.

[aduth]

So I think this code is never being reached, due to a bug with how we're populating the country code data.

The warning message is generated if there's a data-sms-only attribute:

identity-idp/app/javascript/app/phone-internationalization.js

Lines 10 to 19 in f518806

	const unsupportedInternationalPhoneOTPDeliveryWarningMessage = () => {
	const selectedOption = selectedInternationCodeOption();
	if (selectedOption.dataset.smsOnly === 'true') {
	const messageTemplate = I18n.t(
	'two_factor_authentication.otp_delivery_preference.phone_unsupported',
	);
	return messageTemplate.replace('%{location}', selectedOption.dataset.countryName);
	}
	return null;
	};

We pass the data attributes via:

identity-idp/app/helpers/form_helper.rb

Lines 99 to 105 in f518806

	def international_phone_codes_data(code_data)
	{
	sms_only: code_data['sms_only'],
	country_code: code_data['country_code'],
	country_name: code_data['name'],
	}
	end

Which pulls from this YAML data:

identity-idp/config/country_dialing_codes.yml

Lines 4 to 8 in f518806

	AD:
	country_code: '376'
	name: Andorra
	supports_sms: true
	supports_voice: false

sms_only isn't a property. Looks like this was changed in #4331.

We probably want to update this logic, optionally pulling in PhoneNumberCapabilities#sms_only? if it makes sense.

[zachmargolis]

oh yikes... good catch re sms_only ..... my bad

[aduth]

Re: Wrong arguments being passed: Yes, we're assigning an innerText to the radio input field itself, which AFAICT is a noop. The problem would manifest itself if the user would select an option which cannot receive phone calls, then switch back to one which can. Normally, this should reset the hint text. Instead, it sticks with the error text:

(Again, due to above behavior with sms_only, this won't ever happen currently)

The same, after the changes here:

[aduth]

I created LG-4144 to track issue with SMS only country options. I expect everything else here should be in good shape.