Credit/debit formatting, use filters for money formatting, use full page width for table

app/assets/javascripts/darkswarm/filters/format_balance.js.coffee

@@ -0,0 +1,7 @@
+Darkswarm.filter "formatBalance", (localizeCurrencyFilter, tFilter)->
+  # Convert number to string currency using injected currency configuration.
+  (balance) ->
+    if balance < 0
+      tFilter('credit') + ": " + localizeCurrencyFilter(Math.abs(balance))
+    else
+      tFilter('balance_due') + ": " + localizeCurrencyFilter(Math.abs(balance))

app/assets/javascripts/darkswarm/services/orders.js.coffee

@@ -4,4 +4,3 @@ Darkswarm.factory 'Orders', (orders_by_distributor, currencyConfig, CurrentHub,
       # Populate Orders.orders from json in page.
       @orders_by_distributor = orders_by_distributor
       @currency_symbol = currencyConfig.symbol
-      # Sorting by most orders (most recent/frequent?)

app/serializers/api/order_serializer.rb

@@ -1,5 +1,5 @@
 class Api::OrderSerializer < ActiveModel::Serializer
-  attributes :number, :completed_at, :total, :state, :shipment_state, :payment_state, :outstanding_balance, :total_money, :balance_money, :payments, :path
+  attributes :number, :completed_at, :total, :state, :shipment_state, :payment_state, :outstanding_balance, :payments, :path
 
   has_many :payments, serializer: Api::PaymentSerializer
 
@@ -7,8 +7,8 @@ class Api::OrderSerializer < ActiveModel::Serializer
     object.completed_at.blank? ? "" : object.completed_at.to_formatted_s(:long_ordinal)
   end
 
-  def total_money
-    to_money(object.total)
+  def total
+    object.total.to_money.to_s
   end
 
   def shipment_state
@@ -23,17 +23,7 @@ class Api::OrderSerializer < ActiveModel::Serializer
     object.state ? object.state.humanize : nil # Or a call to t() here?
   end
 
-  def balance_money
-    to_money(object.outstanding_balance)
-  end
-
   def path
     spree.order_url(object.number, only_path: true)
   end
-
-  private
-
-  def to_money(amount)
-    {currency_symbol:amount.to_money.currency_symbol, amount:amount.to_money.to_s}
-  end
 end

app/views/spree/users/_fat.html.haml

@@ -2,25 +2,25 @@
   .columns.small-12.medium-12.large-12.fat
     %table
       %tr
-        %th{"bo-text" => "'transaction' | t"}
-        %th{"bo-text" => "'transaction_date' | t"}
-        %th{"bo-text" => "'payment_state' | t"}
-        %th{"bo-text" => "'shipping_state' | t"}
-        %th{"bo-text" => "'value' | t"}
-        %th{"bo-text" => "'balance' | t"}
+        %th.order1{"bo-text" => "'transaction' | t"}
+        %th.order2{"bo-text" => "'transaction_date' | t"}
+        %th.order3{"bo-text" => "'payment_state' | t"}
+        %th.order4{"bo-text" => "'shipping_state' | t"}
+        %th.order5{"bo-text" => "'value' | t"}
+        %th.order6{"bo-text" => "'balance' | t"}
       %tbody{"ng-repeat" => "order in distributor.distributed_orders"}
         %tr
-          %td
+          %td.order1
             %a{"bo-href" => "order.path", "bo-text" => "('order' | t )+ ' ' + order.number"}
-          %td{"bo-text" => "order.completed_at"}
-          %td{"bo-text" => "order.payment_state | t"}
-          %td{"bo-text" => "order.shipment_state | t"}
-          %td.text-right{"bo-text" => "order.total_money.currency_symbol + order.total_money.amount"}
-          %td.text-right{"ng-class" => "{'credit' : order.outstanding_balance < 0, 'debit' : order.outstanding_balance > 0, 'paid' : order.outstanding_balance == 0}", "bo-text" => "order.balance_money.currency_symbol + order.balance_money.amount"}
+          %td.order2{"bo-text" => "order.completed_at"}
+          %td.order3{"bo-text" => "order.payment_state | t"}
+          %td.order4{"bo-text" => "order.shipment_state | t"}
+          %td.order5.text-right{"bo-text" => "order.total | localizeCurrency"}
+          %td.order6.text-right{"ng-class" => "{'credit' : order.outstanding_balance < 0, 'debit' : order.outstanding_balance > 0, 'paid' : order.outstanding_balance == 0}", "bo-text" => "order.outstanding_balance | localizeCurrency"}
           %tr{"ng-repeat" => "payment in order.payments"}
-            %td{"bo-text" => "'Payment '+ payment.identifier"}
-            %td{"bo-text" => "payment.updated_at"}
-            %td{"bo-text" => "payment.payment_method"}
-            %td
-            %td.text-right {{order.total_money.currency_symbol}}&nbsp{{payment.amount}}
-            %td
+            %td.order1{"bo-text" => "'Payment '+ payment.identifier"}
+            %td.order2{"bo-text" => "payment.updated_at"}
+            %td.order3{"bo-text" => "payment.payment_method"}
+            %td.order4
+            %td.order5.text-right{"bo-text" => "payment.amount | localizeCurrency"}
+            %td.order6

app/views/spree/users/_skinny.html.haml

@@ -1,14 +1,13 @@
-.row.active_table_row{"ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open()}"}
-  .skinny-head
+.row.active_table_row.skinny-head.margin-top{"ng-click" => "toggle($event)", "ng-class" => "{'closed' : !open()}"}
+  .columns.small-2
     %span.margin-top
-      .columns.medium-2.large-2
-        %span.margin-top
-          %img{"bo-src" => "distributor.logo"}
-      .columns.small-10.medium-8.large-5
-        %span.margin-top
-          %strong{"bo-text" => "distributor.name"}
-      .columns.small-6.medium-3.large-3
-        %span.margin-top{"bo-text" => "('balance' | t) + ': ' + Orders.currency_symbol + distributor.balance", "ng-class" => "{'credit' : order.outstanding_balance < 0, 'debit' : order.outstanding_balance > 0, 'paid' : order.outstanding_balance == 0}"}
-      .columns.small-2.medium-2.large-2.text-right
-        %span.margin-top
-          %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}
+      %img{"bo-src" => "distributor.logo"}
+  .columns.small-10.medium-5
+    %span.margin-top
+      %strong{"bo-text" => "distributor.name"}
+  .columns.small-8.small-offset-2.medium-3
+    %span.margin-top{"bo-text" => "distributor.balance | formatBalance", "ng-class" => "{'credit' : distributor.balance < 0, 'debit' : distributor.balance > 0, 'paid' : distributor.balance == 0}" }
+    -#  %span.margin-top{"bo-text" => "('balance' | t) + ': ' + Orders.currency_symbol + distributor.balance", "ng-class" => "{'credit' : order.outstanding_balance < 0, 'debit' : order.outstanding_balance > 0, 'paid' : order.outstanding_balance == 0}"}
+  .columns.small-2.medium-2.text-right
+    %span.margin-top
+      %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}

config/locales/en.yml

@@ -679,5 +679,8 @@ Please follow the instructions there to make your enterprise visible on the Open
   shipping_state: "Shipping status"
   value: "Value"
   "Balance due": "Balance due" # TODO: In /accounts better to pass the symbol and translate rather than humanize
+  balance_due: "Balance due"
+  credit: "Credit"
   Paid: "Paid"
   Ready: "Ready"
+  you_have_no_orders_yet: "You have no orders yet"

spec/factories.rb

@@ -189,6 +189,16 @@ FactoryGirl.define do
     distributor { create(:distributor_enterprise) }
   end
 
+  factory :order_with_credit_payment, parent: :completed_order_with_totals do
+    distributor { create(:distributor_enterprise)}
+    order_cycle { create(:simple_order_cycle) }
+
+    after(:create) do |order|
+      create(:payment, amount: order.total + 10000, order: order, state: "completed")
+      order.reload
+    end
+  end
+
   factory :zone_with_member, :parent => :zone do
     default_tax true
 

spec/features/consumer/account_spec.rb

@@ -11,22 +11,27 @@ feature %q{
   let!(:user2) {create(:user)}
   let!(:distributor1) { create(:distributor_enterprise) }
   let!(:distributor2) { create(:distributor_enterprise) }
+  let!(:distributor_credit) { create(:distributor_enterprise) }
   let!(:distributor_without_orders) { create(:distributor_enterprise) }
-  let!(:d1o1) { create(:completed_order_with_totals, distributor: distributor1, user_id: user.id, total: 10000)}
-  let!(:d1o2) { create(:completed_order_with_totals, distributor: distributor1, user_id: user.id, total: 5000)}
-  let!(:d2o1) { create(:completed_order_with_totals, distributor: distributor2, user_id: user.id)}
+  let!(:d1o1) { create(:completed_order_with_totals, distributor_id: distributor1.id, user_id: user.id, total: 10000)}
+  let!(:d1o2) { create(:completed_order_with_totals, distributor_id: distributor1.id, user_id: user.id, total: 5000)}
+  let!(:d2o1) { create(:completed_order_with_totals, distributor_id: distributor2.id, user_id: user.id)}
+  let!(:credit_order) { create(:order_with_credit_payment, distributor_id: distributor_credit.id, user_id: user.id)}
+#  let!(:credit_payment) { create(:payment, amount: 12000.00, order_id: credit_order.id)}
 
-  let!(:d1o1p) { create(:payment, order: d1o1)}
 
   before do
+    credit_order.update!
     login_as user
     visit "/account"
   end
 
-  it "shows all hubs that have been ordered from" do
+  it "shows all hubs that have been ordered from with balance or credit" do
     expect(page).to have_content distributor1.name
     expect(page).to have_content distributor2.name
     expect(page).not_to have_content distributor_without_orders.name
+    expect(page).to have_content distributor1.name + " " + "Balance due"
+    expect(page).to have_content distributor_credit.name + " Credit"
   end
 
   it "reveals table of orders for distributors when clicked" do
@@ -43,7 +48,7 @@ feature %q{
     end
 
     it "displays an appropriate message" do
-      expect(page).to have_content "You have no orders yet"
+      expect(page).to have_content {t :you_have_no_orders_yet}
     end
   end