make click to pay flow match slide to pay flow

src/js/controllers/confirm.js

@@ -190,6 +190,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
   };
 
   var setSendError = function(msg) {
+    $scope.sendStatus = '';
     popupService.showAlert(gettextCatalog.getString('Error at confirm:'), msg);
   };
 
@@ -197,7 +198,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.fee = txFormatService.formatAmountStr(txp.fee);
     $scope.txp = txp;
     $scope.$apply();
-  };
+  }
 
   var createTx = function(wallet, dryRun, cb) {
     var config = configService.getSync().wallet;
@@ -327,6 +328,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     }
   }
 
+  $scope.statusChangeHandler = statusChangeHandler;
+
   $scope.onConfirm = function() {
     $scope.approve(statusChangeHandler);
   };
@@ -335,6 +338,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $ionicHistory.nextViewOptions({
       disableAnimate: true
     });
+    $scope.sendStatus = '';
     $state.go('tabs.send');
   };
 

src/js/directives/clickToAccept.js

@@ -0,0 +1,20 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('clickToAccept', function() {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/clickToAccept.html',
+      transclude: true,
+      scope: {
+        sendStatus: '=clickSendStatus',
+      },
+      link: function(scope, element, attrs) {
+        scope.$watch('sendStatus', function() {
+          if(scope.sendStatus !== 'success') {
+            scope.displaySendStatus = scope.sendStatus;
+          }
+        });
+      }
+    };
+  });

src/sass/views/includes/clickToAccept.scss

@@ -0,0 +1,40 @@
+click-to-accept {
+
+  .click-to-accept {
+    &__status-text {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 4;
+      text-transform: capitalize;
+      transform: translateY(2rem);
+      opacity: 0;
+
+      &.enter {
+        transition: transform 250ms ease, opacity 250ms ease;
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      > img {
+        margin-right: 10px;
+        animation-name: spin;
+        animation-duration: 500ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+    }
+
+  }
+
+  @keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+  }
+}

src/sass/views/views.scss

@@ -19,6 +19,7 @@
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";
+@import "includes/clickToAccept";
 @import "includes/slideToAccept";
 @import "includes/slideToAcceptSuccess";
 @import "includes/tx-details";

www/views/confirm.html

@@ -59,7 +59,13 @@
         <i ng-show="!description" class="icon ion-ios-plus-empty size-21"></i>
       </div>
     </div>
-    <button class="button button-block button-positive" ng-click="approve()" ng-if="hasClick" translate>Click to pay</button>
+
+    <click-to-accept
+      ng-click="approve(statusChangeHandler)"
+      ng-if="hasClick"
+      click-send-status="sendStatus">
+      Click to pay
+    </click-to-accept>
   </ion-content>
   <slide-to-accept
     ng-if="!hasClick"

www/views/includes/clickToAccept.html

@@ -0,0 +1,9 @@
+<button class="button button-block button-positive" ng-disabled="sendStatus">
+  <span ng-if="!sendStatus">
+    <ng-transclude></ng-transclude>
+  </span>
+  <span class="click-to-accept__status-text" ng-class="{enter: sendStatus}">
+    <img src="img/spinner.png">
+    {{displaySendStatus}}
+  </span>
+</button>