Display more info before purchase

src/js/controllers/buyMercadoLibre.js

@@ -14,6 +14,11 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
     externalLinkService.open(url);
   };
 
+  var _resetValues = function() {
+    $scope.totalAmountStr = $scope.amount = $scope.invoiceFee = $scope.networkFee = $scope.totalAmount = $scope.wallet = null;
+    createdTx = message = invoiceId = null;
+  };
+
   var showErrorAndBack = function(title, msg) {
     title = title || gettextCatalog.getString('Error');
     $scope.sendStatus = '';
@@ -58,6 +63,30 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
     }
   };
 
+  var satToFiat = function(sat, cb) {
+    txFormatService.toFiat(sat, $scope.currencyIsoCode, function(value) {
+      return cb(value);
+    });
+  };
+
+  var setTotalAmount = function(amountSat, invoiceFeeSat, networkFeeSat) {
+    satToFiat(amountSat, function(a) {
+      $scope.amount = Number(a);
+
+      satToFiat(invoiceFeeSat, function(i) {
+        $scope.invoiceFee = Number(i);
+
+        satToFiat(networkFeeSat, function(n) {
+          $scope.networkFee = Number(n);
+          $scope.totalAmount = $scope.amount + $scope.invoiceFee + $scope.networkFee;
+          $timeout(function() {
+            $scope.$digest();
+          });
+        });
+      });
+    });
+  };
+
   var createInvoice = function(data, cb) {
     mercadoLibreService.createBitPayInvoice(data, function(err, dataInvoice) {
       if (err) {
@@ -184,7 +213,9 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
     'leading': true
   });
 
-  var initialize = function(wallet, parsedAmount) {
+  var initialize = function(wallet) {
+    var parsedAmount = txFormatService.parseAmount(amount, currency);
+    $scope.currencyIsoCode = parsedAmount.currency;
     $scope.amountUnitStr = parsedAmount.amountUnitStr;
     var dataSrc = {
       amount: parsedAmount.amount,
@@ -198,16 +229,18 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
         showErrorAndBack(err.title, err.message);
         return;
       }
+      // Sometimes API does not return this element;
+      invoice['buyerPaidBtcMinerFee'] = invoice.buyerPaidBtcMinerFee || 0;
+      var invoiceFeeSat = (invoice.buyerPaidBtcMinerFee * 100000000).toFixed();
 
-      message = gettextCatalog.getString("Mercado Libre Gift Card {{amountStr}}", {
+      message = gettextCatalog.getString("{{amountStr}} for Mercado Livre Brazil Gift Card", {
         amountStr: $scope.amountUnitStr
       });
 
       createTx(wallet, invoice, message, function(err, ctxp) {
         ongoingProcess.set('loadingTxInfo', false);
         if (err) {
-          // Clear variables
+          _resetValues();
-          createdTx = message = $scope.totalFeeStr = $scope.totalAmountStr = $scope.wallet = null;
           showError(err.title, err.message);
           return;
         }
@@ -225,8 +258,8 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
           invoiceUrl: invoice.url,
           invoiceTime: invoice.invoiceTime
         };
-        $scope.totalFeeStr = txFormatService.formatAmountStr(ctxp.fee);
+        $scope.totalAmountStr = txFormatService.formatAmountStr(ctxp.amount);
-        $scope.totalAmountStr = txFormatService.formatAmountStr(ctxp.amount + ctxp.fee);
+        setTotalAmount(parsedAmount.amountSat, invoiceFeeSat, ctxp.fee);
       });
     });
   };
@@ -295,8 +328,7 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
 
   $scope.onWalletSelect = function(wallet) {
     $scope.wallet = wallet;
-    var parsedAmount = txFormatService.parseAmount(amount, currency);
+    initialize(wallet);
-    initialize(wallet, parsedAmount);
   };
 
   $scope.goBackHome = function() {

www/views/buyMercadoLibre.html

@@ -25,7 +25,7 @@
 
       <div class="info">
         <div class="item item-icon-right" ng-click="showWalletSelector()">
-          <div class="label">From</div>
+          <div class="label" translate>From</div>
           <div class="wallet">
             <i class="icon big-icon-svg">
               <img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg">
@@ -34,21 +34,33 @@
           </div>
           <i class="icon bp-arrow-right"></i>
         </div>
-
         <div ng-show="totalAmountStr">
           <div class="item item-divider" translate>
             Details
           </div>
           <div class="item">
-            <span translate>Network fee</span>
+            <span translate>Gift card</span>
             <span class="item-note">
-              {{totalFeeStr}}
+              {{amount | currency:'$ ':2}}<span ng-if="amount"> {{currencyIsoCode}}</span>
             </span>
           </div>
           <div class="item">
-            <span translate>Total to pay</span>
+            <span translate>Invoice Fee</span>
             <span class="item-note">
-              {{totalAmountStr}}
+              <span>{{invoiceFee | currency:'$ ':2}}<span ng-if="invoiceFee"> {{currencyIsoCode}}</span>
+            </span>
+          </div>
+          <div class="item">
+            <span translate>Network Fee</span>
+            <span class="item-note">
+              <span>{{networkFee | currency:'$ ':2}}<span ng-if="networkFee"> {{currencyIsoCode}}</span>
+            </span>
+          </div>
+          <div class="item">
+            <span translate>Total</span>
+            <span class="item-note">
+              <span ng-if="totalAmount">{{totalAmount | currency:'$ ':2}} {{currencyIsoCode}}</span>
+              <span ng-if="totalAmountStr">({{totalAmountStr}})</span>
             </span>
           </div>
         </div>