diff --git a/app/javascript/packages/phone-input/index.ts b/app/javascript/packages/phone-input/index.ts index 429c4506fd1..6f6ada9906b 100644 --- a/app/javascript/packages/phone-input/index.ts +++ b/app/javascript/packages/phone-input/index.ts @@ -137,6 +137,7 @@ export class PhoneInputElement extends HTMLElement { const iti = intlTelInput(this.textInput, { preferredCountries: ['US', 'CA'], + initialCountry: this.codeInput.value, localizedCountries: countryCodePairs, onlyCountries: supportedCountryCodes, autoPlaceholder: 'off', diff --git a/app/javascript/packages/phone-input/package.json b/app/javascript/packages/phone-input/package.json index 8e5469c4434..538375d3bd3 100644 --- a/app/javascript/packages/phone-input/package.json +++ b/app/javascript/packages/phone-input/package.json @@ -3,7 +3,7 @@ "private": true, "version": "1.0.0", "dependencies": { - "intl-tel-input": "^17.0.8", + "intl-tel-input": "^17.0.19", "libphonenumber-js": "^1.10.11" } } diff --git a/package.json b/package.json index 4fe4fd52077..e2df37ddbaa 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "fast-glob": "^3.2.7", "foundation-emails": "^2.3.1", "identity-style-guide": "^6.7.0", - "intl-tel-input": "^17.0.8", + "intl-tel-input": "^17.0.19", "react": "^17.0.2", "react-dom": "^17.0.2", "source-map-loader": "^4.0.0", diff --git a/spec/features/phone/add_phone_spec.rb b/spec/features/phone/add_phone_spec.rb index 554f9dd24fc..ae08ae2058d 100644 --- a/spec/features/phone/add_phone_spec.rb +++ b/spec/features/phone/add_phone_spec.rb @@ -139,10 +139,15 @@ ) end - scenario 'adding a phone that is already on the user account shows error message' do + scenario 'adding a phone that is already on the user account shows error message', js: true do user = create(:user, :signed_up) phone = user.phone_configurations.first.phone + # Regression handling: The fake phone number generator uses well-formatted numbers, which isn't + # how a user would likely enter their number, and would give detail to the phone initialization + # which wouldn't exist for typical user input. Emulate the user input by removing format hints. + phone = phone.sub(/^\+1\s*/, '').gsub(/\D/, '') + sign_in_and_2fa_user(user) within('.sidenav') do click_on t('account.navigation.add_phone_number') @@ -151,6 +156,7 @@ click_continue expect(page).to have_content(I18n.t('errors.messages.phone_duplicate')) + expect(page).to have_css('.iti__selected-flag .iti__flag.iti__us', visible: :all) end let(:telephony_gem_voip_number) { '+12255551000' } diff --git a/yarn.lock b/yarn.lock index d5c140ab952..fc21062e5bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4026,10 +4026,10 @@ interpret@^2.2.0: resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9" integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw== -intl-tel-input@^17.0.8: - version "17.0.12" - resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-17.0.12.tgz#057c35b57871bd6d6932ac28428d086e63d6cc89" - integrity sha512-jl3DkDQg/aaIPK2hrvtgX2eYgtkz5LxCQW57Ru1Hpdt9MA9VE8PnGUllaMsAm6SeJODHBdMok7XFZR8/M1yytg== +intl-tel-input@^17.0.19: + version "17.0.19" + resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-17.0.19.tgz#4c277e3bf02069fac2ef3821a62a3d7e8b55740a" + integrity sha512-GBNoUT4JVgm2e1N+yFMaBQ24g5EQfZhDznGneCM9IEZwfKsMUAUa1dS+v0wOiKpRAZ5IPNLJMIEEFGgqlCI22A== ipaddr.js@1.9.1: version "1.9.1"