Add label to customer balance so it's clear to the manager what's the balance status: credit owed or balance due

app/assets/javascripts/admin/customers/controllers/customers_controller.js.coffee

@@ -47,3 +47,8 @@ angular.module("admin.customers").controller "customersCtrl", ($scope, $q, $filt
         tag.text.toLowerCase().indexOf(query.toLowerCase()) != -1
       defer.resolve filtered
     defer.promise
+
+  $scope.displayBalanceStatus = (customer) ->
+    return unless customer.balance_status
+
+    t('admin.customers.index.' + customer.balance_status)

app/assets/stylesheets/admin/shared/typography.scss

@@ -154,3 +154,7 @@ input.text-big {
 .pad-top {
   padding-top: 1em;
 }
+
+.white-space-nowrap {
+  white-space: nowrap;
+}

app/serializers/api/admin/customer_serializer.rb

@@ -1,6 +1,6 @@
 class Api::Admin::CustomerSerializer < ActiveModel::Serializer
   attributes :id, :email, :enterprise_id, :user_id, :code, :tags, :tag_list, :name,
-             :allow_charges, :default_card_present?, :balance
+             :allow_charges, :default_card_present?, :balance, :balance_status
 
   has_one :ship_address, serializer: Api::AddressSerializer
   has_one :bill_address, serializer: Api::AddressSerializer
@@ -14,8 +14,17 @@ class Api::Admin::CustomerSerializer < ActiveModel::Serializer
   end
 
   def balance
-    balance = OpenFoodNetwork::UserBalanceCalculator.new(object.email, object.enterprise).balance
-    Spree::Money.new(balance, { currency: Spree::Config[:currency] }).to_s
+    Spree::Money.new(balance_value, { currency: Spree::Config[:currency] }).to_s
+  end
+
+  def balance_status
+    if balance_value > 0
+      "credit_owed"
+    elsif balance_value < 0
+      "balance_due"
+    else
+      ""
+    end
   end
 
   def tags
@@ -38,4 +47,8 @@ class Api::Admin::CustomerSerializer < ActiveModel::Serializer
 
     options[:customer_tags].andand[object.id] || []
   end
+
+  def balance_value
+    @balance_value ||= OpenFoodNetwork::UserBalanceCalculator.new(object.email, object.enterprise).balance
+  end
 end

app/views/admin/customers/index.html.haml

@@ -94,7 +94,8 @@
               %a{ id: 'bill-address-link', href: 'javascript:void(0)', "ng-bind" => "customer.bill_address ? customer.bill_address.address1 : '#{t('admin.customers.index.edit')}' | limitTo: 15", 'edit-address-dialog' => true }
             %td.ship_address{ 'ng-show' => 'columns.ship_address.visible' }
               %a{ id: 'ship-address-link', href: 'javascript:void(0)', "ng-bind" => "customer.ship_address ? customer.ship_address.address1 : '#{t('admin.customers.index.edit')}' | limitTo: 15", 'edit-address-dialog' => true }
-            %td.balance{ 'ng-show' => 'columns.balance.visible'}
+            %td.balance.align-center{ 'ng-show' => 'columns.balance.visible'}
+              %span.state.white-space-nowrap{ 'ng-class' => 'customer.balance_status', 'ng-bind' => 'displayBalanceStatus(customer)' }
               %span{ 'ng-bind' => '::customer.balance' }
             %td.actions
               %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }

config/locales/en.yml

@@ -445,20 +445,22 @@ en:
         bill_address: "Billing Address"
         ship_address: "Shipping Address"
         balance: "Balance"
-        update_address_success: 'Address updated successfully.'
-        update_address_error: 'Sorry! Please input all of the required fields!'
-        edit_bill_address: 'Edit Billing Address'
-        edit_ship_address: 'Edit Shipping Address'
-        required_fileds: 'Required fields are denoted with an asterisk '
-        select_country: 'Select Country'
-        select_state: 'Select State'
-        edit: 'Edit'
-        update_address: 'Update Address'
-        confirm_delete: 'Sure to delete?'
+        update_address_success: "Address updated successfully."
+        update_address_error: "Sorry! Please input all of the required fields!"
+        edit_bill_address: "Edit Billing Address"
+        edit_ship_address: "Edit Shipping Address"
+        required_fileds: "Required fields are denoted with an asterisk "
+        select_country: "Select Country"
+        select_state: "Select State"
+        edit: "Edit"
+        update_address: "Update Address"
+        confirm_delete: "Sure to delete?"
         search_by_email: "Search by email/code..."
-        guest_label: 'Guest checkout'
+        guest_label: "Guest checkout"
+        credit_owed: "Credit Owed"
+        balance_due: "Balance Due"
       destroy:
-        has_associated_orders: 'Delete failed: customer has associated orders with his shop'
+        has_associated_orders: "Delete failed: customer has associated orders with his shop"
 
     contents:
       edit: