Refactor buying bitcoin

src/js/controllers/buyCoinbase.js

@@ -5,13 +5,34 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
   var amount;
   var currency;
 
-  var initError = function(err) {
+  var showErrorAndBack = function(err) {
+    $scope.sendStatus = '';
     $log.error(err);
-    popupService.showAlert('Error', 'Could not connect to Coinbase', function() {
+    err = err.errors ? err.errors[0].message : err;
+    popupService.showAlert('Error', err, function() {
       $ionicHistory.goBack();
     });
   };
 
+  var showError = function(err) {
+    $scope.sendStatus = '';
+    $log.error(err);
+    err = err.errors ? err.errors[0].message : err;
+    popupService.showAlert('Error', err);
+  };
+
+  var statusChangeHandler = function (processName, showName, isOn) {
+    $log.debug('statusChangeHandler: ', processName, showName, isOn);
+    if ( processName == 'buyingBitcoin' && !isOn) {
+      $scope.sendStatus = 'success';
+      $timeout(function() {
+        $scope.$digest();
+      }, 100);
+    } else if (showName) {
+      $scope.sendStatus = showName;
+    }
+  };
+
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
     coinbaseService.setCredentials();
 
@@ -19,9 +40,7 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
     currency = data.stateParams.currency;
 
     if (amount < 1) {
-      popupService.showAlert('Error', 'Amount must be at least 1.00 ' + currency, function() {
+      showErrorAndBack('Amount must be at least 1.00 ' + currency);
-        $ionicHistory.goBack();
-      });
       return;
     }
     
@@ -36,7 +55,7 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
     coinbaseService.init(function(err, res) {
       if (err) {
         ongoingProcess.set('connectingCoinbase', false);
-        initError(err);
+        showErrorAndBack(err);
         return;
       }
       var accessToken = res.accessToken;
@@ -46,18 +65,29 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
       coinbaseService.getPaymentMethods(accessToken, function(err, p) {
         if (err) {
           ongoingProcess.set('connectingCoinbase', false);
-          initError(err);
+          showErrorAndBack(err);
           return;
         }
-        lodash.each(p.data, function(pm) {
+
+        var hasPrimary;
+        var pm;
+        for(var i = 0; i < p.data.length; i++) {
+          pm = p.data[i];
           if (pm.allow_buy) {
             $scope.paymentMethods.push(pm);
           }
           if (pm.allow_buy && pm.primary_buy) {
+            hasPrimary = true;
             $scope.selectedPaymentMethodId.value = pm.id;
-            $scope.buyRequest();
           }
-        });
+        }
+        if (lodash.isEmpty($scope.paymentMethods)) {
+          ongoingProcess.set('connectingCoinbase', false);
+          showErrorAndBack('No payment method available to buy');
+          return;
+        }
+        if (!hasPrimary) $scope.selectedPaymentMethodId.value = $scope.paymentMethods[0].id;
+        $scope.buyRequest();
       });
     });
   });
@@ -67,7 +97,7 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
     coinbaseService.init(function(err, res) {
       if (err) {
         ongoingProcess.set('connectingCoinbase', false);
-        initError(err);
+        showErrorAndBack(err);
         return;
       }
       var accessToken = res.accessToken;
@@ -75,18 +105,19 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
       var dataSrc = {
         amount: amount,
         currency: currency,
-        payment_method: $scope.selectedPaymentMethodId.value
+        payment_method: $scope.selectedPaymentMethodId.value,
+        quote: true
       };
       coinbaseService.buyRequest(accessToken, accountId, dataSrc, function(err, data) {
         ongoingProcess.set('connectingCoinbase', false);
         if (err) {
-          $log.error(err);
+          showErrorAndBack(err);
-          popupService.showAlert('Error', 'Could not create a buy request', function() {
-            $ionicHistory.goBack();
-          });
           return;
         }
         $scope.buyRequestInfo = data.data;
+        $timeout(function() {
+          $scope.$apply();
+        }, 100);
       });
     });
   };
@@ -98,39 +129,45 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
     popupService.showConfirm(null, message, okText, cancelText, function(ok) {
       if (!ok) return;
         
-      ongoingProcess.set('buyingBitcoin', true);
+      ongoingProcess.set('buyingBitcoin', true, statusChangeHandler);
       coinbaseService.init(function(err, res) {
         if (err) {
-          ongoingProcess.set('buyingBitcoin', false);
+          ongoingProcess.set('buyingBitcoin', false, statusChangeHandler);
-          initError(err);
+          showError(err);
           return;
         }
         var accessToken = res.accessToken;
         var accountId = res.accountId;
-        coinbaseService.buyCommit(accessToken, accountId, $scope.buyRequestInfo.id, function(err, b) {
+        var dataSrc = {
+          amount: amount,
+          currency: currency,
+          payment_method: $scope.selectedPaymentMethodId.value,
+          commit: true
+        };
+        coinbaseService.buyRequest(accessToken, accountId, dataSrc, function(err, b) {
           if (err) {
-            ongoingProcess.set('buyingBitcoin', false);
+            ongoingProcess.set('buyingBitcoin', false, statusChangeHandler);
-            popupService.showAlert('Error', 'Could not complete purchase');
+            showError(err);
             return;
           }
-          var tx = b.data.transaction;
+          var tx = b.data ? b.data.transaction : null;
           if (!tx) {
-            ongoingProcess.set('buyingBitcoin', false);
+            ongoingProcess.set('buyingBitcoin', false, statusChangeHandler);
-            popupService.showAlert('Error', 'Transaction not found');
+            showError('Transaction not found');
             return;
           }
 
           $timeout(function() {
             coinbaseService.getTransaction(accessToken, accountId, tx.id, function(err, updatedTx) {
               if (err) {
-                ongoingProcess.set('buyingBitcoin', false);
+                ongoingProcess.set('buyingBitcoin', false, statusChangeHandler);
-                popupService.showAlert('Error', 'Transaction error');
+                showError(err);
                 return;
               }
               walletService.getAddress($scope.wallet, false, function(err, walletAddr) {
                 if (err) {
-                  ongoingProcess.set('buyingBitcoin', false);
+                  ongoingProcess.set('buyingBitcoin', false, statusChangeHandler);
-                  popupService.showAlert('Error', err);
+                  showError(err);
                   return;
                 }
                 updatedTx.data['toAddr'] = walletAddr;
@@ -138,13 +175,8 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
 
                 $log.debug('Saving transaction to process later...');
                 coinbaseService.savePendingTransaction(updatedTx.data, {}, function(err) {
+                  ongoingProcess.set('buyingBitcoin', false, statusChangeHandler);
                   if (err) $log.debug(err);
-                  ongoingProcess.set('buyingBitcoin', false);
-                  $scope.buySuccess = updatedTx.data;
-                  $timeout(function() {
-                    $ionicScrollDelegate.resize();
-                    $scope.$apply();
-                  });
                 });
               });
             });
@@ -164,6 +196,7 @@ angular.module('copayApp.controllers').controller('buyCoinbaseController', funct
   };
 
   $scope.goBackHome = function() {
+    $scope.sendStatus = '';
     $ionicHistory.nextViewOptions({
       disableAnimate: true,
       historyRoot: true

src/js/controllers/sellCoinbase.js

@@ -199,7 +199,6 @@ angular.module('copayApp.controllers').controller('sellCoinbaseController', func
       coinbaseService.sellRequest(accessToken, accountId, dataSrc, function(err, data) {
         ongoingProcess.set('connectingCoinbase', false);
         if (err) {
-          ongoingProcess.set('connectingCoinbase', false);
           showErrorAndBack(err);
           return;
         }

src/js/services/coinbaseService.js

@@ -395,7 +395,8 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
       amount: data.amount,
       currency: data.currency,
       payment_method: data.payment_method || null,
-      commit: data.commit || false
+      commit: data.commit || false,
+      quote: data.quote || false
     };
     $http(_post('/accounts/' + accountId + '/buys', token, data)).then(function(data) {
       $log.info('Coinbase Buy Request: SUCCESS');

www/views/buyCoinbase.html

@@ -5,9 +5,9 @@
     <ion-nav-title>Buy bitcoin</ion-nav-title>
   </ion-nav-bar>
 
-  <ion-content>
+  <ion-content class="add-bottom-for-cta">
     <!-- BUY -->
-    <div class="list" ng-show="!buySuccess">
+    <div class="list">
       <div class="item item-divider">
         Purchase Info
       </div>
@@ -28,12 +28,6 @@
             {{buyRequestInfo.amount.amount}} {{buyRequestInfo.amount.currency}}
           </span>
         </div>
-        <div class="item">
-          Payout at
-          <span class="item-note">
-            {{buyRequestInfo.payout_at | amCalendar}}
-          </span>
-        </div>
         <div class="item" ng-click="showWalletSelector()">
           <span>Receive in</span>
           <span class="item-note">{{wallet ? wallet.name : '...'}}</span>
@@ -67,26 +61,38 @@
       </div>
     </div>
 
-    <button 
-                ng-show="buyRequestInfo && !buySuccess"
-                ng-disabled="!selectedPaymentMethodId.value || !buyRequestInfo || !wallet"
-                class="button button-standard button-primary" 
-                ng-click="buyConfirm()">
-      Confirm
-    </button>
-
-    <div ng-show="buySuccess">
-      <div class="p20">
-        <h1 class="text-center">Bought</h1>
-        Bitcoin purchase completed. Coinbase has queued the transfer to your selected wallet
-      </div>
-      <button 
-           class="button button-standard button-primary" 
-           ng-click="goBackHome()">
-        Done
-      </button>
-    </div>
   </ion-content>
+
+  <click-to-accept
+    ng-disabled="!selectedPaymentMethodId.value || !buyRequestInfo || !wallet"
+    ng-click="buyConfirm()"
+    ng-if="!isCordova && buyRequestInfo"
+    click-send-status="sendStatus"
+    has-wallet-chosen="wallet"
+    insufficient-funds="!selectedPaymentMethodId.value"
+    no-matching-wallet="!buyRequestInfo">
+    Confirm purchase
+  </click-to-accept>
+  <slide-to-accept
+    ng-disabled="!selectedPaymentMethodId.value || !buyRequestInfo || !wallet"
+    ng-if="isCordova && buyRequestInfo"
+    slide-on-confirm="buyConfirm()"
+    slide-send-status="sendStatus"
+    has-wallet-chosen="wallet"
+    insufficient-funds="!selectedPaymentMethodId.value"
+    no-matching-wallet="!buyRequestInfo">
+    Slide to buy
+  </slide-to-accept>
+  <slide-to-accept-success
+    slide-success-show="sendStatus === 'success'"
+    slide-success-on-confirm="goBackHome()"
+    slide-success-hide-on-confirm="true">
+    <span>Bought</span>
+    <div class="m10 size-14">
+      Bitcoin purchase completed. Coinbase has queued the transfer to your selected wallet
+    </div>
+  </slide-to-accept-success>
+
   <wallet-selector
     wallet-selector-title="walletSelectorTitle"
     wallet-selector-wallets="wallets"