Handle partial payments on transaction modal

Author: jjeffryes

js/templates/transactionModal.html

@@ -44,7 +44,7 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
           <div class="pull-left pad20Left txt-bright" style="width:255px;">
             <div class="txt-center row10 textSize16px">
               <%= polyglot.t('buyFlow.SendBTCtoAddress', {
-                  amount: ob.buyer_order.order.payment.amount,
+                  amount: ob.intlNumFormat(ob.orderDue, 20),
                   recipient: '<a class="textSize11px" href="bitcoin:' + ob.buyer_order.order.payment.address + '?amount=' + ob.buyer_order.order.payment.amount + '&message=' + ob.vendor_offer.listing.item.title + '">' + ob.buyer_order.order.payment.address + '</a>'
                 })
               %>
@@ -585,6 +585,11 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
       <div style="height: 264px;" class="scrollOverflowY customThemeScrollbar">
 
         <div class="flexRow custCol-border borderBottom">
+          <% if(ob.status == 0 && ob.transactionType == "purchases"){ %>
+          <div class="flexRow rowItem padding15">
+            You have paid <%= ob.intlNumFormat(ob.orderPaid, 8) %> out of <%= ob.intlNumFormat(ob.orderPrice, 8) %>
+          </div>
+          <% } %>
           <div class="flexRow rowItem padding15">
             <div class="flexCol-7 overflowHidden">
               <a href="#userPage/<%- ob.vendor_offer.listing.id.guid %>/listing/<%- ob.vendor_offer.listing.contract_id %>">

js/views/transactionModalVw.js

@@ -142,15 +142,25 @@ module.exports = baseVw.extend({
   },
 
   render: function () {
-    var self = this;
+    var self = this,
+        orderPrice = 0,
+        orderPaid = 0,
+        orderDue = 0;
+
     $('.js-loadingModal').addClass("hide");
-    //this.model.set('status', this.status);
     //makde sure data is valid
     if (this.model.get('invalidData')){
       messageModal.show(window.polyglot.t('errorMessages.serverError', self.model.get('error')));
       return;
     }
 
+    //calculate how much has been paid
+    orderPrice = this.model.get("buyer_order").order.payment.amount;
+    __.each(this.model.get("bitcoin_txs"), function(payment){
+      orderPaid += payment.value;
+    });
+    orderDue = orderPrice - orderPaid;
+
     loadTemplate('./js/templates/transactionModal.html', function(loadedTemplate) {
       //hide the modal when it first loads
       self.parentEl.html(self.$el);
@@ -163,7 +173,10 @@ module.exports = baseVw.extend({
         status: self.status,
         avatarURL: self.avatarURL,
         avatar_hash: self.avatar_hash,
-        orderID: self.orderID
+        orderID: self.orderID,
+        orderPrice: orderPrice,
+        orderPaid: orderPaid,
+        orderDue: orderDue
       })
       ));
       // add blur to container
@@ -195,6 +208,10 @@ module.exports = baseVw.extend({
         this.status = 2;
         this.tabState = "summary";
         break;
+      case "partial payment":
+        this.status = 0;
+        this.tabState = "summary";
+        break;
         /* //this notification is not sent yet by the server
         case "payment released":
           this.status = 3;