From 836a5836d9ae9ab50b4c5874a778b04130568061 Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Mon, 28 May 2018 23:31:57 +0100 Subject: [PATCH 1/3] fixed country_state selectors on checkout --- .../checkout/country_controller.js.coffee | 8 +++ app/helpers/checkout_helper.rb | 4 -- app/views/checkout/_billing.html.haml | 38 ++++++++------ .../checkout/_shipping_ship_address.html.haml | 52 ++++++++++--------- app/views/checkout/edit.html.haml | 1 + 5 files changed, 58 insertions(+), 45 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/controllers/checkout/country_controller.js.coffee diff --git a/app/assets/javascripts/darkswarm/controllers/checkout/country_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/checkout/country_controller.js.coffee new file mode 100644 index 0000000000..347fa367ad --- /dev/null +++ b/app/assets/javascripts/darkswarm/controllers/checkout/country_controller.js.coffee @@ -0,0 +1,8 @@ +Darkswarm.controller "CountryCtrl", ($scope, availableCountries) -> + + $scope.countries = availableCountries + + $scope.countriesById = $scope.countries.reduce (obj, country) -> + obj[country.id] = country + obj + , {} diff --git a/app/helpers/checkout_helper.rb b/app/helpers/checkout_helper.rb index a874d996d9..b0bca2c05e 100644 --- a/app/helpers/checkout_helper.rb +++ b/app/helpers/checkout_helper.rb @@ -76,10 +76,6 @@ module CheckoutHelper [[]] + address.country.states.map { |c| [c.name, c.id] } end - def checkout_country_options - available_countries.map { |c| [c.name, c.id] } - end - def validated_input(name, path, args = {}) attributes = { required: true, diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index bd590d63a5..ef3d09e052 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -19,25 +19,29 @@ %input{type: :checkbox, "ng-model" => "Checkout.default_bill_address"} = t :checkout_default_bill_address - = f.fields_for :bill_address, @order.bill_address do |ba| - .row - .small-12.columns - = validated_input t(:address), "order.bill_address.address1", "ofn-focus" => "accordion['billing']" - .row - .small-12.columns - = validated_input t(:address2), "order.bill_address.address2", required: false - .row - .small-6.columns - = validated_input t(:city), "order.bill_address.city" + %div{ "ng-controller" => "CountryCtrl" } + = f.fields_for :bill_address, @order.bill_address do |ba| + .row + .small-12.columns + = validated_input t(:address), "order.bill_address.address1", "ofn-focus" => "accordion['billing']" + .row + .small-12.columns + = validated_input t(:address2), "order.bill_address.address2", required: false + .row + .small-6.columns + = validated_input t(:city), "order.bill_address.city" - .small-6.columns - = validated_select t(:state), "order.bill_address.state_id", checkout_state_options(:billing) - .row - .small-6.columns - = validated_input t(:postcode), "order.bill_address.zipcode" + .small-6.columns + %label{ for: 'order.bill_address.state_id' } {{ "state" | t }} + %select.chunky{ id: 'order.bill_address.state_id', ng: { model: 'order.bill_address.state_id', options: 's.id as s.abbr for s in countriesById[order.bill_address.country_id].states' } } - .small-6.columns.right - = validated_select t(:country), "order.bill_address.country_id", checkout_country_options + .row + .small-6.columns + = validated_input t(:postcode), "order.bill_address.zipcode" + + .small-6.columns.right + %label{ for: 'order.bill_address.country_id' } {{ "country" | t }} + %select.chunky{ id: 'order.bill_address.country_id', required: false, ng: { init: "order.bill_address.country_id = #{Spree::Config[:default_country_id]}", model: 'order.bill_address.country_id', options: 'c.id as c.name for c in countries' } } .row .small-12.columns.text-right diff --git a/app/views/checkout/_shipping_ship_address.html.haml b/app/views/checkout/_shipping_ship_address.html.haml index 7b4db0d54c..99605480b2 100644 --- a/app/views/checkout/_shipping_ship_address.html.haml +++ b/app/views/checkout/_shipping_ship_address.html.haml @@ -1,28 +1,32 @@ .small-12.columns #ship_address{"ng-if" => "Checkout.requireShipAddress()"} %div.visible{"ng-if" => "!Checkout.ship_address_same_as_billing"} - .row - .small-6.columns - = validated_input t(:first_name), "order.ship_address.firstname", "ofn-focus" => "accordion['shipping']" - .small-6.columns - = validated_input t(:last_name), "order.ship_address.lastname" - .row - .small-12.columns - = validated_input t(:address), "order.ship_address.address1" - .row - .small-12.columns - = validated_input t(:address2), "order.ship_address.address2", required: false - .row - .small-6.columns - = validated_input t(:city), "order.ship_address.city" - .small-6.columns - = validated_select t(:state), "order.ship_address.state_id", checkout_state_options(:shipping) - .row - .small-6.columns - = validated_input t(:postcode), "order.ship_address.zipcode" - .small-6.columns.right - = validated_select t(:country), "order.ship_address.country_id", checkout_country_options + %div{ "ng-controller" => "CountryCtrl" } + .row + .small-6.columns + = validated_input t(:first_name), "order.ship_address.firstname", "ofn-focus" => "accordion['shipping']" + .small-6.columns + = validated_input t(:last_name), "order.ship_address.lastname" + .row + .small-12.columns + = validated_input t(:address), "order.ship_address.address1" + .row + .small-12.columns + = validated_input t(:address2), "order.ship_address.address2", required: false + .row + .small-6.columns + = validated_input t(:city), "order.ship_address.city" + .small-6.columns + %label{ for: 'order.ship_address.state_id' } {{ "state" | t }} + %select.chunky{ id: 'order.ship_address.state_id', ng: { model: 'order.ship_address.state_id', options: 's.id as s.abbr for s in countriesById[order.ship_address.country_id].states' } } - .row - .small-6.columns - = validated_input t(:phone), "order.ship_address.phone" + .row + .small-6.columns + = validated_input t(:postcode), "order.ship_address.zipcode" + .small-6.columns.right + %label{ for: 'order.ship_address.country_id' } {{ "country" | t }} + %select.chunky{ id: 'order.ship_address.country_id', required: false, ng: { init: "order.ship_address.country_id = #{Spree::Config[:default_country_id]}", model: 'order.ship_address.country_id', options: 'c.id as c.name for c in countries' } } + + .row + .small-6.columns + = validated_input t(:phone), "order.ship_address.phone" diff --git a/app/views/checkout/edit.html.haml b/app/views/checkout/edit.html.haml index b3d30ed442..75c9eff08f 100644 --- a/app/views/checkout/edit.html.haml +++ b/app/views/checkout/edit.html.haml @@ -2,6 +2,7 @@ = t :checkout_title = inject_enterprise_and_relatives += inject_available_countries .darkswarm.footer-pad - content_for :order_cycle_form do From 3cb0b76d21be4b7c1d6d7bc9d2fc067dd63754a2 Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Thu, 31 May 2018 00:39:36 +0100 Subject: [PATCH 2/3] fixed checkout tests by replacing state abbr with name in address selector boxes --- app/views/checkout/_billing.html.haml | 2 +- app/views/checkout/_shipping_ship_address.html.haml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index ef3d09e052..4e451b51cd 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -33,7 +33,7 @@ .small-6.columns %label{ for: 'order.bill_address.state_id' } {{ "state" | t }} - %select.chunky{ id: 'order.bill_address.state_id', ng: { model: 'order.bill_address.state_id', options: 's.id as s.abbr for s in countriesById[order.bill_address.country_id].states' } } + %select.chunky{ id: 'order.bill_address.state_id', ng: { model: 'order.bill_address.state_id', options: 's.id as s.name for s in countriesById[order.bill_address.country_id].states' } } .row .small-6.columns diff --git a/app/views/checkout/_shipping_ship_address.html.haml b/app/views/checkout/_shipping_ship_address.html.haml index 99605480b2..aa64e6c521 100644 --- a/app/views/checkout/_shipping_ship_address.html.haml +++ b/app/views/checkout/_shipping_ship_address.html.haml @@ -18,7 +18,7 @@ = validated_input t(:city), "order.ship_address.city" .small-6.columns %label{ for: 'order.ship_address.state_id' } {{ "state" | t }} - %select.chunky{ id: 'order.ship_address.state_id', ng: { model: 'order.ship_address.state_id', options: 's.id as s.abbr for s in countriesById[order.ship_address.country_id].states' } } + %select.chunky{ id: 'order.ship_address.state_id', ng: { model: 'order.ship_address.state_id', options: 's.id as s.name for s in countriesById[order.ship_address.country_id].states' } } .row .small-6.columns From ea9ea83fee377e7534b5c6b6584b983905fcd64a Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Thu, 31 May 2018 23:00:14 +0100 Subject: [PATCH 3/3] improved checkout country and state selectors code --- app/helpers/checkout_helper.rb | 10 ---------- app/views/checkout/_billing.html.haml | 7 ++----- app/views/checkout/_shipping_ship_address.html.haml | 8 ++------ 3 files changed, 4 insertions(+), 21 deletions(-) diff --git a/app/helpers/checkout_helper.rb b/app/helpers/checkout_helper.rb index b0bca2c05e..bc885bd5dc 100644 --- a/app/helpers/checkout_helper.rb +++ b/app/helpers/checkout_helper.rb @@ -66,16 +66,6 @@ module CheckoutHelper Spree::Money.new order.total - order.total_tax, currency: order.currency end - def checkout_state_options(source_address) - if source_address == :billing - address = @order.billing_address - elsif source_address == :shipping - address = @order.shipping_address - end - - [[]] + address.country.states.map { |c| [c.name, c.id] } - end - def validated_input(name, path, args = {}) attributes = { required: true, diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml index 4e451b51cd..07b0d0f251 100644 --- a/app/views/checkout/_billing.html.haml +++ b/app/views/checkout/_billing.html.haml @@ -32,16 +32,13 @@ = validated_input t(:city), "order.bill_address.city" .small-6.columns - %label{ for: 'order.bill_address.state_id' } {{ "state" | t }} - %select.chunky{ id: 'order.bill_address.state_id', ng: { model: 'order.bill_address.state_id', options: 's.id as s.name for s in countriesById[order.bill_address.country_id].states' } } - + = validated_select t(:state), "order.bill_address.state_id", {}, {"ng-options" => "s.id as s.name for s in countriesById[order.bill_address.country_id].states"} .row .small-6.columns = validated_input t(:postcode), "order.bill_address.zipcode" .small-6.columns.right - %label{ for: 'order.bill_address.country_id' } {{ "country" | t }} - %select.chunky{ id: 'order.bill_address.country_id', required: false, ng: { init: "order.bill_address.country_id = #{Spree::Config[:default_country_id]}", model: 'order.bill_address.country_id', options: 'c.id as c.name for c in countries' } } + = validated_select t(:country), "order.bill_address.country_id", {}, {"ng-init" => "order.bill_address.country_id = order.bill_address.country_id || #{Spree::Config[:default_country_id]}", "ng-options" => "c.id as c.name for c in countries"} .row .small-12.columns.text-right diff --git a/app/views/checkout/_shipping_ship_address.html.haml b/app/views/checkout/_shipping_ship_address.html.haml index aa64e6c521..1119886a47 100644 --- a/app/views/checkout/_shipping_ship_address.html.haml +++ b/app/views/checkout/_shipping_ship_address.html.haml @@ -17,16 +17,12 @@ .small-6.columns = validated_input t(:city), "order.ship_address.city" .small-6.columns - %label{ for: 'order.ship_address.state_id' } {{ "state" | t }} - %select.chunky{ id: 'order.ship_address.state_id', ng: { model: 'order.ship_address.state_id', options: 's.id as s.name for s in countriesById[order.ship_address.country_id].states' } } - + = validated_select t(:state), "order.ship_address.state_id", {}, {"ng-options" => "s.id as s.name for s in countriesById[order.ship_address.country_id].states"} .row .small-6.columns = validated_input t(:postcode), "order.ship_address.zipcode" .small-6.columns.right - %label{ for: 'order.ship_address.country_id' } {{ "country" | t }} - %select.chunky{ id: 'order.ship_address.country_id', required: false, ng: { init: "order.ship_address.country_id = #{Spree::Config[:default_country_id]}", model: 'order.ship_address.country_id', options: 'c.id as c.name for c in countries' } } - + = validated_select t(:country), "order.ship_address.country_id", {}, {"ng-init" => "order.ship_address.country_id = order.ship_address.country_id || #{Spree::Config[:default_country_id]}", "ng-options" => "c.id as c.name for c in countries"} .row .small-6.columns = validated_input t(:phone), "order.ship_address.phone"