Merge pull request #1793 from jhawthorn/currency_selector

Number with currency widget

backend/app/assets/javascripts/spree/backend.js

@@ -29,6 +29,7 @@
 //= require spree/backend/admin
 //= require spree/backend/calculator
 //= require spree/backend/checkouts/edit
+//= require spree/backend/components/number_with_currency
 //= require spree/backend/components/tabs
 //= require spree/backend/components/tooltips
 //= require spree/backend/flash

backend/app/assets/javascripts/spree/backend/components/number_with_currency.js

@@ -0,0 +1,12 @@
+Spree.initNumberWithCurrency = function() {
+  $('.js-number-with-currency').each(function() {
+    var view = new Spree.Views.NumberWithCurrency({
+      el: this,
+    });
+    view.render();
+  });
+}
+
+$(function() {
+  Spree.initNumberWithCurrency()
+})

backend/app/assets/javascripts/spree/backend/views/index.js

@@ -9,3 +9,4 @@
 //= require 'spree/backend/views/order/summary'
 //= require 'spree/backend/views/state_select'
 //= require 'spree/backend/views/zones/form'
+//= require 'spree/backend/views/number_with_currency'

backend/app/assets/javascripts/spree/backend/views/number_with_currency.js

@@ -0,0 +1,31 @@
+Spree.Views.NumberWithCurrency = Backbone.View.extend({
+  events: {
+    'change input,select': "render"
+  },
+
+  initialize: function() {
+    this.$currencySelector = this.$('.number-with-currency-select select');
+  },
+
+  getCurrency: function() {
+    if (this.$currencySelector.length) {
+      return this.$currencySelector.find('option:selected').val();
+    } else {
+      return this.$('[data-currency]').data("currency");
+    }
+  },
+
+  getCurrencySymbol: function() {
+    var currency = this.getCurrency();
+    if (currency) {
+      var currencyInfo = Spree.currencyInfo[currency];
+      return currencyInfo[0];
+    } else {
+      return '';
+    }
+  },
+
+  render: function() {
+    this.$('.number-with-currency-symbol').text(this.getCurrencySymbol());
+  }
+});

backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss

@@ -0,0 +1,32 @@
+.number-with-currency {
+  &-symbol {
+    min-width: 2.5em;
+  }
+
+  &-amount {
+    text-align: right;
+  }
+
+  &-addon {
+    width: 5.5rem;
+    text-align: left;
+  }
+
+  & &-select {
+    padding: 0;
+    background: $input-bg;
+
+    select {
+      @extend .c-select;
+
+      width: 100%;
+      height: $input-height;
+      border: 0;
+
+      &::-ms-expand {
+        // Required to see full text of selected value on IE11
+        display: none;
+      }
+    }
+  }
+}

backend/app/assets/stylesheets/spree/backend/spree_admin.scss

@@ -22,6 +22,7 @@
 @import 'spree/backend/components/states';
 @import 'spree/backend/components/actions';
 @import 'spree/backend/components/breadcrumb';
+@import 'spree/backend/components/number_with_currency';
 @import 'spree/backend/components/date-picker';
 @import 'spree/backend/components/hint';
 @import 'spree/backend/components/image_placeholder';

backend/app/controllers/spree/admin/payments_controller.rb

@@ -18,7 +18,7 @@ def index
       end
 
       def new
-        @payment = @order.payments.build
+        @payment = @order.payments.build(amount: @order.outstanding_balance)
       end
 
       def create

backend/app/controllers/spree/admin/store_credits_controller.rb

@@ -68,8 +68,8 @@ def invalidate
       private
 
       def permitted_resource_params
-        params.require(:store_credit).permit([:amount, :category_id, :memo]).
-          merge(currency: Spree::Config[:currency], created_by: try_spree_current_user)
+        params.require(:store_credit).permit([:amount, :currency, :category_id, :memo]).
+          merge(created_by: try_spree_current_user)
       end
 
       def collection
@@ -105,6 +105,12 @@ def render_edit_page
         flash[:error] = "#{Spree.t("admin.store_credits.unable_to_#{translation_key}")}: #{@store_credit.errors.full_messages.join(', ')}"
         render(template) && return
       end
+
+      def build_resource
+        parent.store_credits.build(
+          currency: Spree::Config[:currency]
+        )
+      end
     end
   end
 end

backend/app/views/spree/admin/payments/_form.html.erb

@@ -1,11 +1,13 @@
-<div data-hook="admin_payment_form_fields" class="row">
-  <div class="col-xs-3">
-    <div class="field">
-      <%= f.label :amount %>
-      <%= f.text_field :amount, value: @order.display_outstanding_balance.money, class: 'fullwidth' %>
+<div data-hook="admin_payment_form_fields">
+  <div class="row">
+    <div class="col-xs-4">
+      <div class="field">
+        <%= f.label :amount %>
+        <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :amount, currency: @order.currency %>
+      </div>
     </div>
   </div>
-  <div class="col-xs-9">
+  <div>
     <div class="field">
       <label><%= Spree::PaymentMethod.model_name.human %></label>
       <ul>

backend/app/views/spree/admin/prices/_form.html.erb

@@ -1,8 +1,7 @@
 <div data-hook="admin_product_price_fields">
 
   <div data-hook="admin_product_price_form">
-    <div class="row">
-      <div class="col-xs-3" data-hook="admin_product_price_form_variant">
+      <div data-hook="admin_product_price_form_variant" class="col-xs-12">
         <%= f.field_container :variant do %>
           <%= f.label :variant %>
           <%= f.select :variant_id,
@@ -12,17 +11,7 @@
         <% end %>
       </div>
 
-      <div class="col-xs-2" data-hook="admin_product_price_form_currency">
-        <%= f.field_container :currency do %>
-          <%= f.label :currency %>
-          <%= f.select :currency,
-                      Money::Currency.all.map { |c| ["#{c.iso_code} (#{c.name})", c.iso_code] },
-                      {},
-                      class: "select2 fullwidth", disabled: !f.object.new_record? %>
-        <% end %>
-      </div>
-
-      <div class="col-xs-2" data-hook="admin_product_price_form_country">
+      <div data-hook="admin_product_price_form_country" class="col-xs-12">
         <%= f.field_container :country do %>
           <%= f.label :country %>
           <%= f.field_hint :country %>
@@ -35,10 +24,10 @@
         <% end %>
       </div>
 
-      <div class="col-xs-2" data-hook="admin_product_price_form_amount">
+      <div data-hook="admin_product_price_form_amount" class="col-xs-4">
         <%= f.field_container :price do %>
           <%= f.label :price %>
-          <%= f.text_field :price, value: f.object.money.format, class: 'fullwidth title' %>
+          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :price, currency_attr: :currency %>
         <% end %>
       </div>
   </div>

backend/app/views/spree/admin/products/_form.html.erb

@@ -32,7 +32,7 @@
       <div data-hook="admin_product_form_price">
         <%= f.field_container :price do %>
           <%= f.label :price, class: 'required' %>
-          <%= f.text_field :price, value: number_to_currency(@product.price, unit: ''), required: true %>
+          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :price, currency: @product.find_or_build_master.default_price.currency %>
           <%= f.error_message_on :price %>
         <% end %>
       </div>
@@ -44,22 +44,16 @@
 
       <div class="row">
 
-        <div data-hook="admin_product_form_cost_price" class="col-xs-6">
+        <div data-hook="admin_product_form_cost_price" class="col-xs-12">
           <%= f.field_container :cost_price do %>
             <%= f.label :cost_price %>
-            <%= f.text_field :cost_price, value: number_to_currency(@product.cost_price, unit: '') %>
-            <%= f.error_message_on :cost_price %>
-          <% end %>
-        </div>
 
-        <div data-hook="admin_product_form_cost_currency" class="col-xs-6">
-          <%= f.field_container :cost_currency do %>
-            <%= f.label :cost_currency %>
-            <%= f.text_field :cost_currency %>
+            <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :cost_price, currency_attr: :cost_currency %>
+
+            <%= f.error_message_on :cost_price %>
             <%= f.error_message_on :cost_currency %>
           <% end %>
         </div>
-
       </div>
 
       <div class="clear"></div>

backend/app/views/spree/admin/promotions/calculators/flat_rate/_fields.html.erb

@@ -0,0 +1,4 @@
+<%= fields_for "#{prefix}[calculator_attributes]", calculator do |f| %>
+  <%= f.label :preferred_amount %>
+  <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :preferred_amount, currency_attr: :preferred_currency %>
+<% end %>

backend/app/views/spree/admin/promotions/rules/_item_total.html.erb

@@ -1,18 +1,15 @@
 <div class="col-xs-12">
   <div class="row">
-    <div class="col-xs-4">
+    <div class="col-xs-6">
       <div class="field">
         <%= select_tag "#{param_prefix}[preferred_operator]", options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, promotion_rule.preferred_operator), {class: 'select2 select_item_total fullwidth'} %>
       </div>
     </div>
-    <div class="col-xs-4">
+    <div class="col-xs-6">
       <div class="field">
-        <%= text_field_tag "#{param_prefix}[preferred_amount]", promotion_rule.preferred_amount, class: 'fullwidth' %>
-      </div>
-    </div>
-    <div class="col-xs-4">
-      <div class="field">
-        <%= text_field_tag "#{param_prefix}[preferred_currency]", promotion_rule.preferred_currency, class: 'fullwidth' %>
+        <%= fields_for param_prefix, promotion_rule do |f| %>
+          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :preferred_amount, currency_attr: :preferred_currency %>
+        <% end %>
       </div>
     </div>
   </div>

backend/app/views/spree/admin/shared/_number_with_currency.html.erb

@@ -0,0 +1,18 @@
+<% amount_attr ||= :amount %>
+<% currency_attr ||= :currency %>
+<% currency ||= nil %>
+<% required ||= nil %>
+
+<div class="input-group number-with-currency js-number-with-currency">
+  <div class="input-group-addon number-with-currency-symbol"></div>
+  <%= f.text_field amount_attr, value: number_to_currency(f.object.public_send(amount_attr), unit: ''), class: 'form-control number-with-currency-amount', required: required %>
+  <% if currency %>
+    <div class="input-group-addon number-with-currency-addon" data-currency="<%= currency %>">
+      <%= ::Money::Currency.find(currency).iso_code %>
+    </div>
+  <% else %>
+    <div class="input-group-addon number-with-currency-addon number-with-currency-select">
+      <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {required: required} %>
+    </div>
+  <% end %>
+</div>

backend/app/views/spree/admin/store_credits/_form.html.erb

@@ -2,16 +2,17 @@
   <div class="col-xs-12">
     <%= f.field_container :amount do %>
       <%= f.label :amount, class: 'required' %><br />
-      <%= f.number_field :amount, min: 0.00, step: :any %>
+      <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :amount, currency_attr: :currency, required: true %>
       <%= f.error_message_on :amount %>
+      <%= f.error_message_on :currency %>
     <% end %>
   </div>
   <div class="col-xs-12">
-    <%= f.field_container :category do %>
+    <%= f.field_container :category_id do %>
       <%= f.label :category_id, class: 'required' %><br />
       <%= f.select :category_id, options_from_collection_for_select(@credit_categories, :id, :name, f.object.category.try(:id)),
         { include_blank: true }, { class: 'select2 fullwidth', placeholder: Spree.t("admin.store_credits.select_reason") } %>
-      <%= f.error_message_on :category %>
+      <%= f.error_message_on :category_id %>
     <% end %>
   </div>
   <div data-hook="admin_store_credit_memo_field" class="col-xs-12">

backend/app/views/spree/admin/variants/_form.html.erb

@@ -66,7 +66,7 @@
       <div class="col-xs-3">
         <div class="field" data-hook="price">
           <%= f.label :price %>
-          <%= f.text_field :price, value: number_to_currency(@variant.price, unit: ''), class: 'fullwidth' %>
+          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :price, currency: @variant.default_price.currency %>
         </div>
       </div>
 
@@ -79,7 +79,7 @@
       <div class="col-xs-3">
         <div class="field" data-hook="cost_price">
           <%= f.label :cost_price %>
-          <%= f.text_field :cost_price, value: number_to_currency(@variant.cost_price, unit: ''), class: 'fullwidth' %>
+          <%= render "spree/admin/shared/number_with_currency", f: f, amount_attr: :cost_price, currency_attr: :cost_currency %>
         </div>
       </div>
 

backend/spec/controllers/spree/admin/store_credits_controller_spec.rb

@@ -51,6 +51,7 @@
           user_id: user.id,
           store_credit: {
             amount: 1.00,
+            currency: "USD",
             category_id: a_credit_category.id
           }
         }

core/config/locales/en.yml

@@ -29,6 +29,8 @@ en:
         code: Code
         name: Name
         state: State
+      spree/calculator/flat_rate:
+        preferred_amount: Amount
       spree/calculator/tiered_flat_rate:
         preferred_base_amount: Base Amount
         preferred_tiers: Tiers