Prefixes phone number based on selected country

as requested in https://www.notion.so/Apply-Form-pre-fill-country-code-13efee17e5754d4fa43690f2d80f7a25,
this diff enables prefixing of volunteer Phone field with international
country code based on selected country to speed up the submission
process.

- adds a new Gem [^1] for fetching country codes
- adds a new route for sending GET requests with alpha2 country params
  and getting back the country code
- adds a feature spec for checking the implementation. This spec is
  currently disabled because our JS is not loading in test env. Filed a
  separate issue here: #61

[^1]: [Countries Gem](https://github.com/hexorx/countries).

Gemfile

@@ -30,6 +30,7 @@ gem 'bootsnap', '>= 1.4.2', require: false
 
 gem 'city-state', '>= 0.1.0'
 gem 'country_state_select', '>= 3.0.5'
+gem 'countries'
 gem 'simple_form', '>= 5.0.2'
 gem 'bootstrap', '~>4.3.1'
 gem 'inline_svg', '>= 1.7.1'

Gemfile.lock

@@ -82,6 +82,10 @@ GEM
       rubyzip (>= 1.1)
     coderay (1.1.2)
     concurrent-ruby (1.1.6)
+    countries (3.0.1)
+      i18n_data (~> 0.10.0)
+      sixarm_ruby_unaccent (~> 1.1)
+      unicode_utils (~> 1.4)
     country_state_select (3.0.5)
       city-state
       rails
@@ -105,6 +109,7 @@ GEM
       activesupport (>= 4.2.0)
     i18n (1.8.2)
       concurrent-ruby (~> 1.0)
+    i18n_data (0.10.0)
     inline_svg (1.7.1)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
@@ -216,6 +221,7 @@ GEM
     simple_form (5.0.2)
       actionpack (>= 5.0)
       activemodel (>= 5.0)
+    sixarm_ruby_unaccent (1.2.0)
     spring (2.1.0)
     spring-watcher-listen (2.0.1)
       listen (>= 2.7, < 4.0)
@@ -235,6 +241,7 @@ GEM
     turbolinks-source (5.2.0)
     tzinfo (1.2.6)
       thread_safe (~> 0.1)
+    unicode_utils (1.4.0)
     web-console (4.0.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -265,6 +272,7 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   city-state (>= 0.1.0)
+  countries
   country_state_select (>= 3.0.5)
   dotenv-rails
   factory_bot_rails

app/controllers/countries_controller.rb

@@ -0,0 +1,14 @@
+class CountriesController < ApplicationController
+  def show
+    country = ISO3166::Country.find_country_by_alpha2(country_params[:country])
+    if country
+      render partial: "country_code", locals: {
+        country_code: country.country_code,
+      }
+    end
+  end
+
+  def country_params
+    params.require(:volunteer).permit(:country)
+  end
+end

app/views/countries/_country_code.js.erb

@@ -0,0 +1,5 @@
+var phoneInput = document.getElementsByName("volunteer[phone]")[0]
+var countryCode = "+#{ISO3166::Country.find_country_by_alpha2(e.target.value)}"
+phoneInput.value = "+" + <%= country_code %>
+
+

app/views/volunteers/_form.html.erb

@@ -2,7 +2,14 @@
   <%= f.input :country,
     label: false,
     collection: countries,
-    :selected => 'US'
+    :selected => 'US',
+    input_html: {
+      data: {
+        country_code: "true",
+        remote: :true,
+        url: "/country-code",
+      }
+    }
   %>
 
   <%= f.input :state,

config/routes.rb

@@ -17,4 +17,6 @@
   get '/about', to: 'pages#about'
   get '/terms', to: 'pages#terms'
   get '/privacy', to: 'pages#privacy'
+
+  get'/country-code', to: "countries#show"
 end

spec/features/volunteer_registering_spec.rb

@@ -0,0 +1,15 @@
+require "rails_helper"
+
+RSpec.describe "A volunteer fills out registration form", js: true do
+  scenario "their phone number if prefixed with country code" do
+    pending "fix node sass error in test"
+    visit "/"
+    expect(page).to have_content(I18n.t("home.index.section-titles.form"))
+    expect do
+      select "Romania", from: "volunteer[country]"
+    end.
+      to change { find_field("volunteer[phone]").value }.
+      from("").
+      to("+40")
+  end
+end

spec/views/layouts/application.html.erb_spec.rb

@@ -10,8 +10,8 @@
     expect(rendered).to match t("layouts.application.faq_nav_link")
     # Footer is temporarily looking for contributors
     # expect(rendered).to match t("layouts.application.footer.text")
-    expect(rendered).to match t("layouts.application.footer.about")
-    expect(rendered).to match t("layouts.application.footer.terms")
-    expect(rendered).to match t("layouts.application.footer.privacy")
+    expect(rendered).to match t("common.about")
+    expect(rendered).to match t("common.terms")
+    expect(rendered).to match t("common.privacy")
   end
 end