add to transaction modal

Author: jjeffryes

js/templates/transactionModal.html

@@ -41,16 +41,20 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
       <div class="modal-hero js-transactionPay background1">
         <div class="positionTop width100 padding20">
           <img class="pull-left qrCode js-transactionPayQRCode" height="180" width="180" src="imgs/defaultItem.png"/>
-          <div class="pull-left rowtop20 pad20Left txt-bright" style="width:255px;">
-            <div class="txt-center row20 textSize16px">
+          <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}) %>
             </div>
-            <div class="txt-center row20">
+            <div class="txt-center row10">
               <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>
             </div>
+            <div class="txt-center row10">
+              <input type="checkbox" class="textSize11px fieldItem thin" id="BuyWizardQRDetailsInput">
+              <label for="BuyWizardQRDetailsInput" class="textSize11px"> <%= polyglot.t('AdditionalPaymentDataInfo') %></label>
+            </div>
             <a class="btn btn-txt btn-wide row10 js-transactionPayCopy"><i class="ion-clipboard"></i> <%= polyglot.t('buyFlow.CopyAddress') %></a>
             <a class="btn btn-txt btn-wide row10 js-externalLink"
                href="bitcoin:<%= ob.buyer_order.order.payment.address %>?amount=<%= ob.buyer_order.order.payment.amount %>&message=<%= ob.vendor_offer.listing.item.title %>">

js/views/buyWizardVw.js

@@ -201,7 +201,7 @@ module.exports = baseVw.extend({
 
       //set the QR details checkbox
       var QRtoggleVal = localStorage.getItem('AdditionalPaymentData') != "false" ? true : false;
-      this.$('#BuyWizardQRDetailsInput').prop('checked', QRtoggleVal);
+      self.$('#BuyWizardQRDetailsInput').prop('checked', QRtoggleVal);
     });
     return this;
   },
@@ -535,8 +535,6 @@ module.exports = baseVw.extend({
     if(localStorage.getItem('AdditionalPaymentData') != "false") {
         payHREF += "&label="+storeName+"&message="+message;
     }
-
-    console.log(payHREF)
 
     this.hideMaps();
     this.$el.find('.js-buyWizardPay').removeClass('hide');

js/views/transactionModalVw.js

@@ -58,6 +58,7 @@ module.exports = baseVw.extend({
     'blur .js-transactionDiscussionSendText': 'blurInput',
     'blur input': 'validateInput',
     'blur textarea': 'validateInput',
+    'click #BuyWizardQRDetailsInput': 'toggleQRDetails',
     'keydown #transactionDiscussionSendText': 'onKeydownDiscussion',
     'keyup #transactionDiscussionSendText': 'onKeyupDiscussion'
   },
@@ -166,6 +167,9 @@ module.exports = baseVw.extend({
       self.getDiscussion();
       self.discussionScroller = self.$('.js-discussionScroller');
       self.moderatorPercentage = self.model.get('displayModerator').feeDecimal;
+      //set the QR details checkbox
+      var QRtoggleVal = localStorage.getItem('AdditionalPaymentData') != "false" ? true : false;
+      self.$('#BuyWizardQRDetailsInput').prop('checked', QRtoggleVal);
     });
   },
 
@@ -205,12 +209,24 @@ module.exports = baseVw.extend({
     }
   },
 
+  toggleQRDetails: function(){
+    var toggleInput = this.$('#BuyWizardQRDetailsInput'),
+        toggleVal = toggleInput.prop('checked');
+    localStorage.setItem('AdditionalPaymentData',  toggleVal);
+    this.showPayment();
+  },
+
   showPayment: function(){
     var totalBTCPrice = 0,
         payHREF,
         dataURI;
     if(this.model.get('buyer_order')){
-      payHREF = "bitcoin:" + this.model.get('buyer_order').order.payment.address + "?amount=" + this.model.get('buyer_order').order.payment.amount + "&message=" + this.model.get('vendor_offer').listing.item.title.substring(0, 20);
+      payHREF = "bitcoin:" + this.model.get('buyer_order').order.payment.address + "?amount=" + this.model.get('buyer_order').order.payment.amount;
+
+      if(localStorage.getItem('AdditionalPaymentData') != "false") {
+        payHREF += "&message=" + this.model.get('vendor_offer').listing.item.title.substring(0, 20) + " " + this.orderID;
+      }
+      
       dataURI = qr(payHREF, {type: 10, size: 10, level: 'M'});
       this.$el.find('.js-transactionPayQRCode').attr('src', dataURI);
     } else {