From c4a2d66cd1addf51462194b594e6a8665a9cef3d Mon Sep 17 00:00:00 2001
From: John Hawthorn <john@stembolt.com>
Date: Fri, 16 Jun 2017 15:09:35 -0700
Subject: [PATCH] Use normal <select> in admin Customer Details step

Previously the country and state input used select2. In the past, using
select2 was the only way to style a select consistently with the rest of
our inputs.

This replaces the select2 on country and state with a normal select
with has bootstrap's custom-select styling applied.

This doesn't replace the "Choose a customer" select2 input, which is
still needed since it searches and fetches ajax data.
---
 .../spree/backend/views/order/address.js      |  6 +-----
 .../spree/backend/views/state_select.js       |  8 ++++----
 .../spree/admin/shared/_address_form.html.erb |  4 ++--
 .../admin/orders/customer_details_spec.rb     | 19 +++++++++----------
 .../features/admin/orders/new_order_spec.rb   |  6 +++---
 5 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/backend/app/assets/javascripts/spree/backend/views/order/address.js b/backend/app/assets/javascripts/spree/backend/views/order/address.js
index 0051da5b85f..f81e26e2bc2 100644
--- a/backend/app/assets/javascripts/spree/backend/views/order/address.js
+++ b/backend/app/assets/javascripts/spree/backend/views/order/address.js
@@ -1,7 +1,5 @@
 Spree.Views.Order.Address = Backbone.View.extend({
   initialize: function(options) {
-    this.$(".js-country_id").select2();
-
     // read initial values from page
     this.onChange();
 
@@ -26,7 +24,7 @@ Spree.Views.Order.Address = Backbone.View.extend({
   eachField: function(callback){
     var view = this;
     var fields = ["firstname", "lastname", "company", "address1", "address2",
-      "city", "zipcode", "phone"];
+      "city", "zipcode", "phone", "country_id"];
     _.each(fields, function(field) {
       var el = view.$('[name$="[' + field + ']"]');
       if (el.length) callback(field, el);
@@ -38,7 +36,6 @@ Spree.Views.Order.Address = Backbone.View.extend({
     this.eachField(function(name, el) {
       attributes[name] = el.val();
     });
-    attributes['country_id'] = this.$(".js-country_id").select2("val")
     return attributes;
   },
 
@@ -47,6 +44,5 @@ Spree.Views.Order.Address = Backbone.View.extend({
     this.eachField(function(name, el) {
       el.val(model.get(name))
     })
-    this.$(".js-country_id").select2("val", this.model.get("country_id"))
   }
 });
diff --git a/backend/app/assets/javascripts/spree/backend/views/state_select.js b/backend/app/assets/javascripts/spree/backend/views/state_select.js
index baf523e967a..e43759b1c2e 100644
--- a/backend/app/assets/javascripts/spree/backend/views/state_select.js
+++ b/backend/app/assets/javascripts/spree/backend/views/state_select.js
@@ -24,7 +24,7 @@ Spree.Views.StateSelect = Backbone.View.extend({
   onChange: function() {
     this.model.set({
       state_name: this.$state_input.val(),
-      state_id: this.$state_select.select2("val")
+      state_id: this.$state_select.val()
     })
   },
 
@@ -39,11 +39,11 @@ Spree.Views.StateSelect = Backbone.View.extend({
   },
 
   render: function() {
-    this.$state_select.empty().select2("destroy").hide();
+    this.$state_select.empty().hide();
     this.$state_input.hide();
 
     if (!this.states.fetched) {
-      this.$state_select.show().select2().select2("disable");
+      this.$state_select.show().prop("disabled", true);
     } else if (this.states.length) {
       var $state_select = this.$state_select;
       this.states.each(function(state) {
@@ -52,7 +52,7 @@ Spree.Views.StateSelect = Backbone.View.extend({
         );
       })
       this.$state_select.val(this.model.get("state_id"))
-      this.$state_select.show().select2().select2("enable");
+      this.$state_select.show().prop("disabled", false);
     } else {
       this.$state_input.prop('disabled', false).show();
     }
diff --git a/backend/app/views/spree/admin/shared/_address_form.html.erb b/backend/app/views/spree/admin/shared/_address_form.html.erb
index fe52da77cbd..443b8e6662e 100644
--- a/backend/app/views/spree/admin/shared/_address_form.html.erb
+++ b/backend/app/views/spree/admin/shared/_address_form.html.erb
@@ -41,7 +41,7 @@
   <div class="field <%= "#{type}-row" %>">
     <%= f.label :country_id, Spree::Country.model_name.human %>
     <span id="<%= s_or_b %>country">
-      <%= f.collection_select :country_id, available_countries, :id, :name, {}, {class: 'select2 fullwidth js-country_id'} %>
+      <%= f.collection_select :country_id, available_countries, :id, :name, {}, {class: 'custom-select fullwidth js-country_id'} %>
     </span>
   </div>
 
@@ -51,7 +51,7 @@
       <%= f.text_field :state_name,
             style: "display: #{f.object.country.states.empty? ? 'block' : 'none' };",
            disabled: !f.object.country.states.empty?, class: 'fullwidth state_name js-state_name' %>
-      <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, {include_blank: true}, {class: 'select2 fullwidth js-state_id', style: "display: #{f.object.country.states.empty? ? 'none' : 'block' };", disabled: f.object.country.states.empty?} %>
+      <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, {include_blank: true}, {class: 'custom-select fullwidth js-state_id', style: "display: #{f.object.country.states.empty? ? 'none' : 'block' };", disabled: f.object.country.states.empty?} %>
     </span>
   </div>
 
diff --git a/backend/spec/features/admin/orders/customer_details_spec.rb b/backend/spec/features/admin/orders/customer_details_spec.rb
index 57348f74d0a..96171021ba6 100644
--- a/backend/spec/features/admin/orders/customer_details_spec.rb
+++ b/backend/spec/features/admin/orders/customer_details_spec.rb
@@ -78,7 +78,7 @@
         click_link "Customer"
 
         within("#billing") do
-          targetted_select2 "Brazil", from: "#s2id_order_bill_address_attributes_country_id"
+          select "Brazil", from: "Country"
           fill_in "order_bill_address_attributes_state_name", with: "Piaui"
         end
 
@@ -94,8 +94,8 @@
       order.save!
 
       click_link "Customer"
-      within("#shipping") { fill_in_address "ship" }
-      within("#billing") { fill_in_address "bill" }
+      within("#shipping") { fill_in_address }
+      within("#billing") { fill_in_address }
 
       click_button "Update"
       click_link "Customer"
@@ -158,18 +158,17 @@
         fill_in "order_ship_address_attributes_city",       with: "Bethesda"
         fill_in "order_ship_address_attributes_zipcode",    with: "20170"
 
-        select_state('Alabama', 'ship')
+        within("#shipping") do
+          select 'Alabama', from: "State"
+        end
+
         fill_in "order_ship_address_attributes_phone", with: "123-456-7890"
         click_button "Update"
       end
     end
   end
 
-  def select_state(state_name, kind = "bill")
-    targetted_select2 state_name, from: "#s2id_order_#{kind}_address_attributes_state_id"
-  end
-
-  def fill_in_address(kind = "bill")
+  def fill_in_address
     fill_in "First Name",              with: "John 99"
     fill_in "Last Name",               with: "Doe"
     fill_in "Company",                 with: "Company"
@@ -177,7 +176,7 @@ def fill_in_address(kind = "bill")
     fill_in "Street Address (cont'd)", with: "#101"
     fill_in "City",                    with: "Bethesda"
     fill_in "Zip Code",                with: "20170"
-    select_state("Alabama", kind)
+    select 'Alabama', from: "State"
     fill_in "Phone",                   with: "123-456-7890"
   end
 end
diff --git a/backend/spec/features/admin/orders/new_order_spec.rb b/backend/spec/features/admin/orders/new_order_spec.rb
index 811b0bc406d..43c2ae3d1bf 100644
--- a/backend/spec/features/admin/orders/new_order_spec.rb
+++ b/backend/spec/features/admin/orders/new_order_spec.rb
@@ -4,7 +4,7 @@
   include OrderFeatureHelper
 
   let!(:product) { create(:product_in_stock) }
-  let!(:state) { create(:state) }
+  let!(:state) { create(:state, state_code: 'CA') }
   let!(:store) { create(:store) }
   let!(:user) { create(:user, ship_address: create(:address), bill_address: create(:address)) }
   let!(:payment_method) { create(:check_payment_method) }
@@ -193,14 +193,14 @@
     end
   end
 
-  def fill_in_address(kind = "bill")
+  def fill_in_address
     fill_in "First Name",                with: "John 99"
     fill_in "Last Name",                 with: "Doe"
     fill_in "Street Address",            with: "100 first lane"
     fill_in "Street Address (cont'd)",   with: "#101"
     fill_in "City",                      with: "Bethesda"
     fill_in "Zip Code",                  with: "20170"
-    targetted_select2_search state.name, from: "#s2id_order_#{kind}_address_attributes_state_id"
+    select state.name, from: "State"
     fill_in "Phone",                     with: "123-456-7890"
   end
 end