Code improvements.

- changed to standard themed button with translatable text
- changed data to use the values set for the payment buttons

Author: jjeffryes

js/languages/en-US.json

@@ -686,6 +686,7 @@
     "OpenAddress": "Open in Local Wallet",
     "CopyAddress": "Copy to Clipboard",
     "RefreshPayment": "Refresh Payment Status",
+    "PayWithAltCoins": "Pay with Altcoins",
     "summaryMsg1": "Your payment has been sent to %{recipient}",
     "summaryMsg2": "The expected processing time for this order is %{time}",
     "summaryMsg3": "You can check the status of your order on your %{purchasesPageLink}",

js/templates/buyWizard.html

@@ -23,15 +23,22 @@ <h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
           })
         %>
       </div>
-      <div class="txt-center row10 textSize20px custCol-text">
-        <img class="js-buyWizardShapeshiftURL" src="https://shapeshift.io/images/shifty/xs_dark_altcoins.png" class="ss-button"></a>
-      </div>
+      <div class="txt-center row10">
         <input type="checkbox" class="textSize11px fieldItem thin" id="BuyWizardQRDetailsInput">
         <label for="BuyWizardQRDetailsInput" class="textSize11px  custCol-text"> <%= polyglot.t('AdditionalPaymentDataInfo') %></label>
       </div>
       <a class="btn btn-txt btn-wide row10 js-buyWizardPayCopy custCol-secondary  custCol-text"><i class="ion-clipboard"></i> <%= polyglot.t('buyFlow.CopyAddress') %></a>
       <a class="btn btn-txt btn-wide row10 js-buyWizardPayLink custCol-secondary custCol-text"><i class="ion-link"></i> <%= polyglot.t('buyFlow.OpenAddress') %></a>
-      <a class="btn btn-txt btn-wide js-buyWizardPayCheck custCol-secondary custCol-text"><i class="ion-refresh"></i> <%= polyglot.t('buyFlow.RefreshPayment') %></a>
+      <div class="flexRow pad">
+        <div class="flexCol-6">
+          <a class="btn btn-txt btn-wide js-buyWizardPayCheck custCol-secondary custCol-text"><i class="ion-refresh"></i> <%= polyglot.t('buyFlow.RefreshPayment') %></a>
+        </div>
+        <div class="flexCol-6">
+          <a class="btn btn-txt btn-wide js-buyWizardShapeshiftURL custCol-secondary custCol-text ss-button">
+            <img src="imgs/shapeshift_logo.png" height="18px" width="18px" style="position: relative; top: 4px;"> <%= polyglot.t('buyFlow.PayWithAltCoins') %>
+          </a>
+        </div>
+      </div>
       <div class="rowTop10 txt-center note custCol-text">
         <%= polyglot.t('buyFlow.paymentNote') %>
       </div>

js/views/buyWizardVw.js

@@ -70,6 +70,7 @@ module.exports = baseModal.extend({
     this.model.set('selectedModerator', "");
     this.model.updateAttributes();
     this.cachePayData = "";
+    this.totalBTCPrice = 0;
     this.partialPaymentAmount = 0;
 
     //create the country select list
@@ -578,18 +579,17 @@ module.exports = baseModal.extend({
       throw new Error('Data must be provided to the showPayAddress function');
     }
 
-    var totalBTCPrice = 0,
-        storeName = encodeURI(this.model.get('page').profile.name),
+    var storeName = encodeURI(this.model.get('page').profile.name),
         message = encodeURI(this.model.get('vendor_offer').listing.item.title.substring(0, 20) + " "+data.order_id),
         payHREF = "",
         dataURI;
     this.$el.find('.js-buyWizardSpinner').addClass('hide');
     this.orderID = data.order_id;
-    totalBTCPrice = data.amount - this.partialPaymentAmount;
-    this.$el.find('.js-buyWizardDetailsTotalBTC').text(templateHelpers.intlNumFormat(totalBTCPrice, 8));
+    this.totalBTCPrice = data.amount - this.partialPaymentAmount;
+    this.$el.find('.js-buyWizardDetailsTotalBTC').text(templateHelpers.intlNumFormat(this.totalBTCPrice, 8));
     this.payURL = data.payment_address;
 
-    payHREF = "bitcoin:"+ data.payment_address+"?amount="+totalBTCPrice;
+    payHREF = "bitcoin:"+ data.payment_address+"?amount="+this.totalBTCPrice;
     if (localStorage.getItem('AdditionalPaymentData') != "false") {
       payHREF += "&label="+storeName+"&message="+message;
     }
@@ -599,15 +599,12 @@ module.exports = baseModal.extend({
     dataURI = qr(payHREF, {type: 10, size: 10, level: 'M'});
     this.$el.find('.js-buyWizardPayQRCode').attr('src', dataURI);
     this.$el.find('.js-buyWizardPayPrice').text();
-    this.$el.find('.js-buyWizardPayURL').text(data.payment_address);
+    this.$el.find('.js-buyWizardPayURL').text(this.payURL);
     this.$el.find('.js-buyWizardPayLink').attr('href', payHREF);
-    console.log(electron);
   },
 
   openShapeshiftURL: function() {
-    var totalBTCPrice = this.buyDetailsView.model.attributes.totalBTCDisplayPrice;
-    var paymentAddress = this.buyRequest.responseJSON.payment_address;
-    var shapeshiftURL = 'https://shapeshift.io/shifty.html?destination='+paymentAddress+'&output=BTC&apiKey=24ad734e196c948de4608e00472ab8a4b956a298c52abc20fda74114d6cebcb632714a9c5a0f38f46cef0bc974dfd41c34488432128d65acc099b3892f92d602&amount='+totalBTCPrice;
+    var shapeshiftURL = 'https://shapeshift.io/shifty.html?destination='+this.payURL+'&output=BTC&apiKey=24ad734e196c948de4608e00472ab8a4b956a298c52abc20fda74114d6cebcb632714a9c5a0f38f46cef0bc974dfd41c34488432128d65acc099b3892f92d602&amount='+this.totalBTCPrice;
     var shapeshiftWin = new BrowserWindow({width: 700, height: 500, frame: true});
     shapeshiftWin.loadURL(shapeshiftURL);
   },