Merge pull request #327 from msalcala11/slideToPayComponent

Implement Slide to Pay

www/views/confirm.html

@@ -65,7 +65,25 @@
         <i ng-show="!description" class="icon ion-ios-plus-empty size-21"></i>
       </div>
     </div>
-    <button  ng-show="wallets[0]"  class="button button-block button-positive" ng-click="approve()" ng-if="!isCordova" translate>Click to pay</button>
+    <click-to-accept
+      ng-click="approve(statusChangeHandler)"
+      ng-if="hasClick && wallets[0]"
+      click-send-status="sendStatus">
+      Click to pay
+    </click-to-accept>
   </ion-content>
-  <accept class="accept-slide" ng-if="isCordova"></accept>
+  <slide-to-accept
+    ng-if="!hasClick && wallets[0]"
+    slide-on-confirm="onConfirm()"
+    slide-send-status="sendStatus">
+    Slide to pay
+  </slide-to-accept>
+  <slide-to-accept-success
+    slide-success-show="sendStatus === 'success'"
+    slide-success-on-confirm="onSuccessConfirm()"
+    slide-success-hide-on-confirm="true"
+    >
+    <span ng-hide="wallet.m > 1">Payment Sent</span>
+    <span ng-show="wallet.m > 1">Proposal Created</span>
+  </slide-to-accept-success>
 </ion-view>

www/views/includes/acceptSlide.html

@@ -1,9 +0,0 @@
-<ion-slides options="{loop: false, effect: 'flip', speed: 500, pagination: false, initialSlide: 1}" slider="data.slider">
- <ion-slide-page></ion-slide-page>
- <ion-slide-page>
-   <div>
-     <i class="icon ion-ios-arrow-thin-right"></i>
-     <span translate>Slide to accept</span>
-   </div>
- </ion-slide-page>
-</ion-slides>

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>

www/views/includes/slideToAccept.html

@@ -0,0 +1,38 @@
+<div class="slide__listener"
+  ng-touchstart="onTouchstart($event);"
+  ng-touchmove="onTouchmove($event);"
+  ng-touchend="onTouchend($event);"
+  ng-mousedown="onTouchstart($event);"
+  ng-mousemove="onTouchmove($event);"
+  ng-mouseup="onTouchend($event);"
+>
+  <div
+    class="slide__slider"
+    ng-style="sliderStyle"
+  >
+    <div class="slide__slider__tip"></div>
+  </div>
+  <div
+    class="slide__bitcoin"
+    ng-style="bitcoinStyle"
+  >
+    <img src="img/icon-bitcoin-white.svg">
+  </div>
+  <div
+    class="slide__button-text"
+    ng-style="textStyle"
+  >
+    <ng-transclude></ng-transclude>
+  </div>
+  <div
+    class="slide__status-text"
+    ng-class="{enter: isSlidFully}"
+    ng-hide="sendStatus === 'success'"
+  >
+    <img src="img/spinner.png">
+    {{displaySendStatus}}
+  </div>
+  <div class="slide__arrow">
+    <img src="img/icon-arrow-right.svg">
+  </div>
+</div>

www/views/includes/slideToAcceptSuccess.html

@@ -0,0 +1,15 @@
+<div
+  class="slide-success__background"
+  ng-class="{'fill-screen': fillScreen}">
+</div>
+
+<div class="slide-success__content">
+  <img src="img/onboarding-success.svg" ng-class="{reveal: fillScreen}">
+  <div class="slide-success__content__header" ng-class="{reveal: fillScreen}">
+    <ng-transclude>Payment Sent</ng-transclude>
+  </div>
+</div>
+
+<div class="slide-success__footer" ng-class="{reveal: fillScreen}">
+  <a class="slide-success__footer__btn" ng-click="onConfirmButtonClick()">OK</a>
+</div>

www/views/modals/tx-status.html

@@ -1,41 +1,15 @@
 <ion-modal-view id="tx-status" ng-controller="txStatusController">
   <div ng-if="type == 'broadcasted'">
     <div class="popup-txsent text-center m30tp">
-        <i class="icon ion-checkmark-round"></i>
-        <div ng-show="tx.amountStr" class="m20t size-36">
-        {{tx.amountStr}}
-        </div>
-        <div class="size-24 text-gray m20v">
-        <span ng-if="!fromBitPayCard" translate>Sent</span>
-        <span ng-if="fromBitPayCard" translate>Funds sent</span>
-        </div>
-        <div class="text-center m20t" ng-if="entryExist || !fromSendTab || fromPayPro">
-        <a class="button button-positive" ng-click="cancel()" translate>OKAY</a>
-        </div>
-    </div>
-    <div class="collect-address" ng-if="!entryExist && fromSendTab && !fromPayPro">
-      <div class="row">
-        <p translate class="col">Would you like to add this address to your address book?</p>
+      <i class="icon ion-checkmark-round"></i>
+      <div ng-show="tx.amountStr" class="m20t size-36">
+      {{tx.amountStr}}
       </div>
-      <div class="row">
-        <div class="col">
-          <span class="address">
-            <i class="icon ion-social-bitcoin"></i>
-            <contact class="enable_text_select ellipsis" address="{{tx.toAddress}}"></contact>
-          </span>
-        </div>
+      <div class="size-24 text-gray m20v">
+      <span translate>Sent</span>
       </div>
-      <div class="row">
-        <div class="col col-50">
-          <button class="button button-block button-stable" ng-click="cancel()">
-            {{'Skip' | translate}}
-          </button>
-        </div>
-        <div class="col col-50">
-          <button class="button button-block button-stable" ng-click="save(tx.toAddress)">
-            {{'Add Address' | translate}}
-          </button>
-        </div>
+      <div class="text-center m20t">
+      <a class="button button-positive" ng-click="cancel()" translate>OKAY</a>
       </div>
     </div>
   </div>

www/views/modals/txp-details.html

@@ -149,11 +149,13 @@
         </div>
       </div>
     </div>
-    <button class="button button-block button-positive"
-            ng-click="sign()"
-            ng-if="tx.pendingForUs && canSign && !loading && !paymentExpired && !isCordova" translate>
+
+    <click-to-accept
+      ng-click="onConfirm(statusChangeHandler)"
+      ng-if="tx.pendingForUs && canSign && !paymentExpired && hasClick"
+      click-send-status="sendStatus">
       Click to accept
-    </button>
+    </click-to-accept>
     <div class="m30t text-center" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
       <div class="size-12 padding" ng-show="!tx.isGlidera && isShared" translate>
         * A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.
@@ -164,5 +166,17 @@
       </button>
     </div>
   </ion-content>
-  <accept class="accept-slide" ng-if="tx.pendingForUs && canSign && !loading && !paymentExpired && isCordova"></accept>
+
+  <slide-to-accept
+    ng-if="tx.pendingForUs && canSign && !paymentExpired && !hasClick"
+    slide-on-confirm="onConfirm()"
+    slide-send-status="sendStatus">
+    Slide to accept
+  </slide-to-accept>
+  <slide-to-accept-success
+    slide-success-show="sendStatus === 'success'"
+    slide-success-on-confirm="onSuccessConfirm()"
+    >
+    Payment Sent
+  </slide-to-accept-success>
 </ion-modal-view>