LG-6026: Telephone input country listing is not translated

app/components/phone_input_component.html.erb

@@ -1,7 +1,10 @@
 <%= content_tag(
       'lg-phone-input',
       class: tag_options[:class],
-      data: { delivery_methods: delivery_methods },
+      data: {
+        delivery_methods: delivery_methods,
+        translated_country_code_names: translated_country_code_names,
+      },
     ) do %>
   <%= content_tag(
         :script,

app/components/phone_input_component.rb

@@ -21,15 +21,25 @@ def initialize(
   end
 
   def supported_country_codes
-    codes = PhoneNumberCapabilities::INTERNATIONAL_CODES.keys
-    codes &= allowed_countries if allowed_countries
-    codes
+    @supported_country_codes ||= begin
+      codes = PhoneNumberCapabilities::INTERNATIONAL_CODES.keys
+      codes &= allowed_countries if allowed_countries
+      codes
+    end
+  end
+
+  def translated_country_code_names
+    supported_country_codes.map do |code|
+      code = code.downcase
+      [code, I18n.t("countries.#{code}")]
+    end.to_h
   end
 
   def international_phone_codes
     supported_country_codes.
       map do |code_key|
-        code_data = PhoneNumberCapabilities::INTERNATIONAL_CODES[code_key]
+        code_data = PhoneNumberCapabilities.translated_international_codes[code_key]
+
         [
           international_phone_code_label(code_data),
           code_key,

app/javascript/packages/phone-input/index.js

@@ -42,15 +42,20 @@ export class PhoneInput extends HTMLElement {
   /** @type {string[]} */
   deliveryMethods = [];
 
+  /** @type {Object.<string,*>} */
+  countryCodePairs = {};
+
   connectedCallback() {
     /** @type {HTMLInputElement?} */
     this.textInput = this.querySelector('.phone-input__number');
     /** @type {HTMLSelectElement?} */
     this.codeInput = this.querySelector('.phone-input__international-code');
     this.codeWrapper = this.querySelector('.phone-input__international-code-wrapper');
     this.exampleText = this.querySelector('.phone-input__example');
+
     try {
       this.deliveryMethods = JSON.parse(this.dataset.deliveryMethods || '');
+      this.countryCodePairs = JSON.parse(this.dataset.translatedCountryCodeNames || '');
     } catch {}
 
     if (!this.textInput || !this.codeInput) {
@@ -118,11 +123,12 @@ export class PhoneInput extends HTMLElement {
   }
 
   initializeIntlTelInput() {
-    const { supportedCountryCodes } = this;
+    const { supportedCountryCodes, countryCodePairs } = this;
     const allowDropdown = supportedCountryCodes && supportedCountryCodes.length > 1;
 
     const iti = intlTelInput(this.textInput, {
       preferredCountries: ['US', 'CA'],
+      localizedCountries: countryCodePairs,
       onlyCountries: supportedCountryCodes,
       autoPlaceholder: 'off',
       allowDropdown,

app/javascript/packages/phone-input/index.spec.js

@@ -30,9 +30,14 @@ describe('PhoneInput', () => {
     isSingleOption = false,
     isNonUSSingleOption = false,
     deliveryMethods = ['sms', 'voice'],
+    translatedCountryCodeNames = {},
   } = {}) {
     const element = document.createElement('lg-phone-input');
     element.setAttribute('data-delivery-methods', JSON.stringify(deliveryMethods));
+    element.setAttribute(
+      'data-translated-country-code-names',
+      JSON.stringify(translatedCountryCodeNames),
+    );
     element.innerHTML = `
       <script type="application/json" class="phone-input__strings">
         {
@@ -165,4 +170,14 @@ describe('PhoneInput', () => {
       );
     });
   });
+
+  context('with translated country code names', () => {
+    it('renders the translated label', () => {
+      createAndConnectElement({ translatedCountryCodeNames: { us: 'Custom USA' } });
+
+      const itiOptionName = document.querySelector('[data-country-code="us"] .iti__country-name');
+
+      expect(itiOptionName.textContent).to.equal('Custom USA');
+    });
+  });
 });

spec/components/phone_input_component_spec.rb

@@ -25,9 +25,10 @@
       **tag_options,
     }.compact
   end
+  let(:instance) { described_class.new(**options) }
 
   subject(:rendered) do
-    render_inline(described_class.new(**options))
+    render_inline(instance)
   end
 
   it 'renders an lg-phone-input tag' do
@@ -42,6 +43,28 @@
     )
   end
 
+  describe '#supported_country_codes' do
+    subject { instance.supported_country_codes }
+
+    it { is_expected.to start_with(['AD', 'AE', 'AF', 'AG']) }
+
+    context 'with allowed_countries' do
+      let(:allowed_countries) { ['US', 'CA'] }
+
+      it { is_expected.to eq(['CA', 'US']) }
+    end
+  end
+
+  describe '#translated_country_code_names' do
+    subject { instance.translated_country_code_names }
+
+    before do
+      I18n.locale = :es
+    end
+
+    it { is_expected.to include('us' => 'Estados Unidos') }
+  end
+
   context 'with class tag option' do
     let(:tag_options) { { class: 'example-class' } }
 
@@ -72,6 +95,21 @@
     end
   end
 
+  context 'when the locale has been changed' do
+    before do
+      I18n.locale = :es
+    end
+
+    let(:allowed_countries) { ['US'] }
+
+    it 'translates the allowed country name' do
+      expect(rendered).to have_select(
+        t('components.phone_input.country_code_label'),
+        options: ['Estados Unidos +1'],
+      )
+    end
+  end
+
   context 'with sms delivery constraint' do
     let(:delivery_methods) { [:sms] }