Admin order payments ui cleanup

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

@@ -3,3 +3,4 @@
 //= require spree/backend/models/order
 //= require spree/backend/models/shipment
 //= require spree/backend/models/taxonomy
+//= require spree/backend/models/payment

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

@@ -0,0 +1,5 @@
+Spree.Models.Payment = Backbone.Model.extend({
+  urlRoot: function() {
+    return Spree.routes.payments_api(this.get('order_id'));
+  }
+});

backend/app/assets/javascripts/spree/backend/payments/edit.js.coffee

@@ -1,33 +1,7 @@
-PaymentRowView = Backbone.View.extend
-  events:
-    "click .js-edit": "onEdit"
-    "click .js-save": "onSave"
-    "click .js-cancel": "onCancel"
-
-  onEdit: (e) ->
-    e.preventDefault()
-    @$el.addClass("editing")
-
-  onCancel: (e) ->
-    e.preventDefault()
-    @$el.removeClass("editing")
-
-  onSave: (e) ->
-    e.preventDefault()
-    amount = @$(".js-edit-amount").val()
-    options =
-      success: (model, response, options) =>
-        @$(".js-display-amount").text(model.attributes.display_amount)
-        @$el.removeClass("editing")
-      error: (model, response, options) =>
-        show_flash 'error', response.responseJSON.error
-    @model.save({ amount: amount }, options)
-
 Spree.ready ->
   order_id = $('#payments').data('order-id')
-  Payment = Backbone.Model.extend
-    urlRoot: Spree.routes.payments_api(order_id)
 
   $('tr.payment').each ->
-    model = new Payment({id: $(@).data('payment-id')})
-    new PaymentRowView({el: @, model: model})
+    payment_id = $(@).data('payment-id')
+    model = new Spree.Models.Payment({id: payment_id, order_id: order_id})
+    new Spree.Views.Payment.PaymentRow({el: @, model: model})

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

@@ -15,6 +15,7 @@
 //= require 'spree/backend/views/zones/form'
 //= require 'spree/backend/views/number_with_currency'
 //= require 'spree/backend/views/payment/new'
+//= require 'spree/backend/views/payment/payment_row'
 //= require 'spree/backend/views/payment/edit_credit_card'
 //= require 'spree/backend/views/tables/editable_table'
 //= require 'spree/backend/views/tables/editable_table_row'

backend/app/assets/javascripts/spree/backend/views/payment/payment_row.js

@@ -0,0 +1,35 @@
+Spree.Views.Payment.PaymentRow = Backbone.View.extend({
+  events: {
+    "click .js-edit": "onEdit",
+    "click .js-save": "onSave",
+    "click .js-cancel": "onCancel"
+  },
+
+  onEdit: function(e) {
+    e.preventDefault();
+    this.$el.addClass("editing");
+  },
+
+  onCancel: function(e) {
+    e.preventDefault();
+    this.$el.removeClass("editing");
+  },
+
+  onSave: function(e) {
+    var view = this;
+    var amount = this.$(".js-edit-amount").val();
+    var options = {
+      success: function(model, response, options) {
+        view.$(".js-display-amount").text(model.attributes.display_amount);
+        view.$el.removeClass("editing");
+      },
+      error: function(model, response, options) {
+        show_flash('error', response.responseJSON.error);
+      }
+    };
+    e.preventDefault();
+    this.model.save({
+      amount: amount
+    }, options);
+  }
+});

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

@@ -4,11 +4,12 @@
   }
 
   &-amount {
+    min-width: 5rem;
     text-align: right;
   }
 
   &-addon {
-    width: 5.5rem;
+    min-width: 3.5rem;
     text-align: left;
   }
 

backend/app/assets/stylesheets/spree/backend/shared/_tables.scss

@@ -3,7 +3,9 @@ table {
   @extend .table;
   border-spacing: 0;
 
-  &.sortable td {
+  &.sortable td,
+  tr.vertical-middle td,
+  tr.vertical-middle th {
     vertical-align: middle;
   }
 

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

@@ -1,31 +1,47 @@
 <table class="index" id='payments' data-order-id='<%= @order.number %>'>
+  <colgroup>
+    <col style="width: 15%"/>
+    <col style="width: 15%"/>
+    <col style="width: 15%"/>
+    <col style="width: 10%"/>
+    <col style="width: 10%"/>
+    <col style="width: 20%"/>
+    <col style="width: 15%"/>
+  </colgroup>
   <thead>
     <tr data-hook="payments_header">
       <th><%= Spree::Payment.human_attribute_name(:number) %></th>
       <th><%= Spree::Payment.human_attribute_name(:created_at) %></th>
-      <th><%= Spree::Payment.human_attribute_name(:amount) %></th>
       <th><%= Spree::PaymentMethod.model_name.human %></th>
       <th><%= Spree::Payment.human_attribute_name(:response_code) %></th>
       <th><%= Spree::Payment.human_attribute_name(:state) %></th>
+      <th class="align-right"><%= Spree::Payment.human_attribute_name(:amount) %></th>
       <th class="actions"></th>
     </tr>
   </thead>
   <tbody>
     <% payments.each do |payment| %>
-      <tr id="<%= dom_id(payment) %>" data-hook="payments_row" class="payment" data-payment-id="<%= payment.id %>">
+      <tr id="<%= dom_id(payment) %>" data-hook="payments_row" class="payment vertical-middle" data-payment-id="<%= payment.id %>">
         <td><%= link_to payment.number, spree.admin_order_payment_path(@order, payment) %></td>
-        <td><%= pretty_time(payment.created_at) %></td>
-        <td class="amount">
-          <%= text_field_tag :amount, payment.amount, class: 'js-edit-amount align-right editing-show' %>
-          <span class="js-display-amount editing-hide"><%= payment.display_amount.to_html %></span>
-        </td>
+        <td><%= l(payment.created_at, format: :short) %></td>
         <td><%= payment_method_name(payment) %></td>
         <td><%= payment.transaction_id %></td>
         <td>
           <span class="pill pill-<%= payment.state %>">
             <%= t(payment.state, scope: 'spree.payment_states') %>
           </span>
         </td>
+        <td class="amount align-right">
+          <div class="editing-show">
+            <div class="input-group">
+              <div class="input-group-addon number-with-currency-symbol">
+                <%= ::Money::Currency.find(@order.currency).symbol %>
+              </div>
+              <%= text_field_tag :amount, payment.amount, class: 'js-edit-amount align-right form-control' %>
+            </div>
+          </div>
+          <span class="js-display-amount editing-hide"><%= payment.display_amount.to_html %></span>
+        </td>
         <td class="actions">
           <div class="editing-show">
             <%= link_to_with_icon 'save', t('spree.actions.save'), nil, no_text: true, class: "js-save", data: {action: 'save'} %>

backend/app/views/spree/admin/payments/source_forms/_gateway.html.erb

@@ -1,20 +1,19 @@
 <fieldset class="no-border-bottom js-edit-credit-card">
-  <div class="field" data-hook="previous_cards">
-    <% if previous_cards.any? %>
+  <legend><%= payment_method.name %></legend>
+
+  <% if previous_cards.any? %>
+    <div class="field" data-hook="previous_cards">
       <% previous_cards.each do |card| %>
         <label><%= radio_button_tag :card, card.id, card == previous_cards.first %> <%= card.display_number %><br /></label>
       <% end %>
       <label><%= radio_button_tag :card, 'new', false, { id: "card_new#{payment_method.id}" } %> <%= t('spree.use_new_cc') %></label>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 
   <div id="card_form<%= payment_method.id %>" data-hook class="js-new-credit-card-form">
     <% param_prefix = "payment_source[#{payment_method.id}]" %>
-
-    <div class="clear"></div>
-
     <div class="row">
-      <div class="col-5">
+      <div class="col-6">
         <div data-hook="card_number">
           <div class="field">
             <%= hidden_field_tag "#{param_prefix}[cc_type]", '', {class: 'ccType'} %>
@@ -23,36 +22,36 @@
           </div>
         </div>
       </div>
-      <div class="col-5">
+      <div class="col-6">
         <div data-hook="card_name">
           <div class="field">
             <%= label_tag "card_name#{payment_method.id}", Spree::CreditCard.human_attribute_name(:name), class: 'required' %>
             <%= text_field_tag "#{param_prefix}[name]", '', id: "card_name#{payment_method.id}", class: 'required fullwidth', maxlength: 19 %>
           </div>
         </div>
       </div>
-      <div class="col-4">
+    </div>
+    <div class="row">
+      <div class="col-6">
         <div data-hook="card_expiration" class="field">
           <%= label_tag "card_expiry#{payment_method.id}", Spree::CreditCard.human_attribute_name(:expiration), class: 'required' %>
-          <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry", placeholder: "MM / YY" %>
+          <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry fullwidth", placeholder: "MM / YY" %>
         </div>
       </div>
-      <div class="col-3">
+      <div class="col-6">
         <div data-hook="card_code" class="field">
           <%= label_tag "card_code#{payment_method.id}", Spree::CreditCard.human_attribute_name(:card_code), class: 'required' %>
           <%= text_field_tag "#{param_prefix}[verification_value]", '', id: "card_code#{payment_method.id}", class: 'required fullwidth cardCode', size: 5 %>
         </div>
       </div>
     </div>
-
-    <div class="clear"></div>
-
-    <%= label_tag "card_address#{payment_method.id}", t('spree.billing_address') %>
-    <% address = @order.bill_address || @order.ship_address || Spree::Address.build_default %>
-    <%= fields_for "#{param_prefix}[address_attributes]", address do |f| %>
-      <%= render partial: 'spree/admin/shared/address_form', locals: { f: f, type: "billing" } %>
-    <% end %>
-
-    <div class="clear"></div>
   </div>
 </fieldset>
+
+<fieldset>
+  <legend><%= t('spree.billing_address') %></legend>
+  <% address = @order.bill_address || @order.ship_address || Spree::Address.build_default %>
+  <%= fields_for "#{param_prefix}[address_attributes]", address do |f| %>
+    <%= render partial: 'spree/admin/shared/address_form', locals: { f: f, type: "billing" } %>
+  <% end %>
+</fieldset>

backend/spec/features/admin/orders/payments_spec.rb

@@ -62,21 +62,19 @@
       expect(page).to have_content 'my cc address'
     end
 
-    it 'lists and create payments for an order', js: true do
+    it 'lists, updates and creates payments for an order', js: true do
       within_row(1) do
-        expect(column_text(3)).to eq('$150.00')
-        expect(column_text(4)).to eq('Credit Card')
-        expect(column_text(6)).to eq('Checkout')
+        expect(column_text(3)).to eq('Credit Card')
+        expect(column_text(5)).to eq('Checkout')
+        expect(column_text(6)).to have_content('$150.00')
       end
 
       click_icon :void
       expect(page).to have_css('#payment_status', text: 'Balance due')
       expect(page).to have_content('Payment Updated')
 
       within_row(1) do
-        expect(column_text(3)).to eq('$150.00')
-        expect(column_text(4)).to eq('Credit Card')
-        expect(column_text(6)).to eq('Void')
+        expect(column_text(5)).to eq('Void')
       end
 
       click_on 'New Payment'
@@ -135,7 +133,6 @@
           click_icon(:save)
         end
         expect(page).to have_selector('.flash.error', text: 'Invalid resource. Please fix errors and try again.')
-        expect(page).to have_field('amount', with: 'invalid')
         expect(payment.reload.amount).to eq(150.00)
       end
     end

core/config/locales/en.yml

@@ -141,7 +141,7 @@ en:
         created_at: Date/Time
         number: Identifier
         response_code: Transaction ID
-        state: Payment State
+        state: State
       spree/payment_method:
         active: Active
         auto_capture: Auto Capture