LG-5333: Improve error state for countries where phone verification disabled

.rubocop.yml

@@ -737,6 +737,12 @@ Rails/Blank:
 Rails/Delegate:
   Enabled: false
 
+Rails/DynamicFindBy:
+  Include:
+    - tests/features/**/*.rb
+  AllowedMethods:
+    - find_by_id
+
 Rails/FilePath:
   Enabled: false
 

app/assets/stylesheets/components/_phone-input.scss

@@ -1,3 +1,11 @@
+lg-phone-input {
+  display: block;
+
+  .iti__flag {
+    background-image: image-url('intl-tel-input/build/img/flags.png');
+  }
+}
+
 .phone-input__international-code-wrapper {
   display: none;
 
@@ -6,8 +14,14 @@
   }
 }
 
-lg-phone-input .iti__flag {
-  background-image: image-url('intl-tel-input/build/img/flags.png');
+.iti:not(.iti--allow-dropdown) input {
+  padding-left: 36px;
+  padding-right: 6px;
+}
+
+.iti:not(.iti--allow-dropdown) .iti__flag-container {
+  left: 0;
+  right: auto;
 }
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

app/assets/stylesheets/components/_validated-field.scss

@@ -0,0 +1,8 @@
+lg-validated-field {
+  display: block;
+  width: min-content;
+}
+
+.validated-field__input-wrapper {
+  width: max-content;
+}

app/assets/stylesheets/components/all.scss

@@ -25,3 +25,4 @@
 @import 'step-indicator';
 @import 'troubleshooting-options';
 @import 'i18n-dropdown';
+@import 'validated-field';

app/components/accordion_component.html.erb

@@ -4,12 +4,12 @@
       type="button"
       class="usa-accordion__button"
       aria-expanded="false"
-      aria-controls="<%= @target_id %>"
+      aria-controls="accordion-<%= unique_id %>"
     >
       <%= header %>
     </button>
   </div>
-  <div id="<%= @target_id %>" class="usa-accordion__container">
+  <div id="accordion-<%= unique_id %>" class="usa-accordion__container">
     <div class="usa-accordion__content usa-prose">
       <%= content %>
     </div>

app/components/accordion_component.rb

@@ -1,7 +1,3 @@
 class AccordionComponent < BaseComponent
   renders_one :header
-
-  def initialize
-    @target_id = "accordion-#{SecureRandom.hex(4)}"
-  end
 end

app/components/base_component.rb

@@ -10,4 +10,8 @@ def before_render
   def self.scripts
     @scripts ||= _sidecar_files(['js']).map { |file| File.basename(file, '.js') }
   end
+
+  def unique_id
+    @unique_id ||= SecureRandom.hex(4)
+  end
 end

app/components/phone_input_component.html.erb

@@ -1,10 +1,11 @@
-<lg-phone-input>
+<%= content_tag(
+      'lg-phone-input',
+      class: tag_options[:class],
+      data: { delivery_methods: delivery_methods },
+    ) do %>
   <%= content_tag(
         :script,
-        {
-          country_code_label: t('components.phone_input.country_code_label'),
-          invalid_phone: t('errors.messages.improbable_phone'),
-        }.to_json,
+        strings.to_json,
         {
           type: 'application/json',
           class: 'phone-input__strings',
@@ -35,15 +36,21 @@
     <%= t('forms.example') %>
     <span class="phone-input__example"></span>
   </div>
-  <%= f.input(
-        :phone,
+  <%= render ValidatedFieldComponent.new(
+        form: f,
+        name: :phone,
+        error_messages: {
+          valueMissing: t('errors.messages.phone_required'),
+        },
         as: :tel,
         required: required,
         label: false,
+        wrapper_html: {
+          class: 'margin-bottom-0',
+        },
         input_html: {
-          aria: { invalid: false },
           class: 'phone-input__number',
         },
       ) %>
-</lg-phone-input>
+<% end %>
 <%= stylesheet_link_tag 'intl-tel-input/build/css/intlTelInput' %>

app/components/phone_input_component.rb

@@ -1,33 +1,66 @@
 class PhoneInputComponent < BaseComponent
-  attr_reader :form, :required
+  attr_reader :form, :required, :allowed_countries, :delivery_methods, :tag_options
+
   alias_method :f, :form
 
-  def initialize(form:, required: false)
+  def initialize(
+    form:,
+    allowed_countries: nil,
+    delivery_methods: [:sms, :voice],
+    required: false,
+    **tag_options
+  )
+    @allowed_countries = allowed_countries
     @form = form
     @required = required
+    @delivery_methods = delivery_methods
+    @tag_options = tag_options
   end
 
   def supported_country_codes
-    PhoneNumberCapabilities::INTERNATIONAL_CODES.keys
+    codes = PhoneNumberCapabilities::INTERNATIONAL_CODES.keys
+    codes &= allowed_countries if allowed_countries
+    codes
   end
 
   def international_phone_codes
-    codes = PhoneNumberCapabilities::INTERNATIONAL_CODES.map do |key, value|
-      [
-        international_phone_code_label(value),
-        key,
-        { data: international_phone_codes_data(value) },
-      ]
-    end
+    supported_country_codes.
+      map do |code_key|
+        code_data = PhoneNumberCapabilities::INTERNATIONAL_CODES[code_key]
+        [
+          international_phone_code_label(code_data),
+          code_key,
+          { data: international_phone_codes_data(code_data) },
+        ]
+      end.
+      sort_by do |label, code_key, _data|
+        # Sort alphabetically by label, but put the US first in the list
+        [code_key == 'US' ? -1 : 1, label]
+      end
+  end
 
-    # Sort alphabetically by label, but put the US first in the list
-    codes.sort_by do |label, key, _data|
-      [key == 'US' ? -1 : 1, label]
-    end
+  def strings
+    {
+      country_code_label: t('components.phone_input.country_code_label'),
+      invalid_phone: t('errors.messages.invalid_phone_number'),
+      country_constraint_usa: t('errors.messages.phone_country_constraint_usa'),
+      unsupported_country: unsupported_country_string,
+    }
   end
 
   private
 
+  def unsupported_country_string
+    case delivery_methods.sort
+    when [:sms, :voice]
+      t('two_factor_authentication.otp_delivery_preference.no_supported_options')
+    when [:sms]
+      t('two_factor_authentication.otp_delivery_preference.sms_unsupported')
+    when [:voice]
+      t('two_factor_authentication.otp_delivery_preference.voice_unsupported')
+    end
+  end
+
   def international_phone_code_label(code_data)
     "#{code_data['name']} +#{code_data['country_code']}"
   end

app/components/validated_field_component.html.erb

@@ -0,0 +1,28 @@
+<lg-validated-field>
+  <%= content_tag(
+        :script,
+        error_messages.to_json,
+        {
+          type: 'application/json',
+          class: 'validated-field__error-strings',
+        },
+        false,
+      ) %>
+  <%= f.input(
+        name,
+        tag_options.deep_merge(
+          error: false,
+          wrapper_html: {
+            class: [*tag_options.dig(:wrapper_html, :class), 'validated-field__input-wrapper'],
+          },
+          input_html: {
+            class: [*tag_options.dig(:input_html, :class), 'validated-field__input'],
+            aria: {
+              invalid: false,
+              describedby: "validated-field-error-#{unique_id}",
+            },
+          },
+        ),
+      ) %>
+  <%= f.error(name, id: "validated-field-error-#{unique_id}") %>
+</lg-validated-field>

app/components/validated_field_component.js

@@ -0,0 +1,5 @@
+import { loadPolyfills } from '@18f/identity-polyfill';
+
+loadPolyfills(['custom-elements', 'classlist'])
+  .then(() => import('@18f/identity-validated-field'))
+  .then(({ ValidatedField }) => customElements.define('lg-validated-field', ValidatedField));

app/components/validated_field_component.rb

@@ -0,0 +1,19 @@
+class ValidatedFieldComponent < BaseComponent
+  attr_reader :form, :name, :tag_options
+
+  alias_method :f, :form
+
+  def initialize(form:, name:, error_messages: {}, **tag_options)
+    @form = form
+    @name = name
+    @error_messages = error_messages
+    @tag_options = tag_options
+  end
+
+  def error_messages
+    {
+      valueMissing: t('simple_form.required.text'),
+      **@error_messages,
+    }
+  end
+end

app/forms/idv/phone_form.rb

@@ -4,7 +4,7 @@ class PhoneForm
 
     ALL_DELIVERY_METHODS = [:sms, :voice].freeze
 
-    attr_reader :user, :phone, :allowed_countries, :delivery_methods
+    attr_reader :user, :phone, :allowed_countries, :delivery_methods, :international_code
 
     validate :validate_valid_phone_for_allowed_countries
     validate :validate_phone_delivery_methods

app/javascript/packages/eslint-plugin/configs/recommended.js

@@ -21,6 +21,7 @@ const config = {
     'max-len': 'off',
     'max-classes-per-file': 'off',
     'newline-per-chained-call': 'off',
+    'no-cond-assign': ['error', 'except-parens'],
     'no-console': 'error',
     'no-empty': ['error', { allowEmptyCatch: true }],
     'no-param-reassign': ['off', 'never'],