Merge pull request #327 from msalcala11/slideToPayComponent

Implement Slide to Pay

www/img/icon-arrow-right.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="16px" viewBox="0 0 22 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>arrows-24px-outline-1_tail-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Button/Slide-to-complete" transform="translate(-330.000000, -41.000000)" stroke-width="2" stroke="#FFFFFF">
+            <g id="arrows-24px-outline-1_tail-right" transform="translate(330.000000, 42.000000)">
+                <g id="Group">
+                    <path d="M0,7 L20,7" id="Shape"></path>
+                    <polyline id="Shape" points="13 0 20 7 13 14"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

www/img/icon-bitcoin-white.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="32px" viewBox="0 0 22 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>Imported Layers</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.229999989">
+        <g id="Button/Slide-to-complete" transform="translate(-21.000000, -30.000000)" fill="#FFFFFF">
+            <g id="Imported-Layers-+-Imported-Layers" transform="translate(29.296522, 45.671231) rotate(-13.000000) translate(-29.296522, -45.671231) translate(5.796522, 21.671231)">
+                <path d="M33.836573,25.7756997 C34.7704654,25.0754201 35.4853422,24.0606858 35.7717349,22.8201828 C36.673248,18.9153006 34.9235595,16.0435455 31.105899,15.1621691 L31.1083424,15.1627332 L32.1877147,10.4763105 C32.2275616,10.3037147 32.2072923,10.361553 32.2545315,10.1569372 L30.1219459,9.67034919 C29.9573284,9.63234424 29.8275684,9.59662857 29.8275684,9.59662857 L28.6650396,14.5986523 L26.2217369,14.0345715 L27.3011093,9.34814878 C27.3409562,9.17555298 27.3311499,9.21524176 27.3738817,9.03015035 L24.9336331,8.46677457 C24.8693732,8.74511457 24.9080695,8.60746054 24.8630626,8.77244875 L23.7784342,13.4704906 L18.2691133,12.1942861 C18.2691133,12.1942861 18.2452251,12.3409526 18.2048311,12.5124349 L17.6912795,14.6971594 L18.311573,14.8403654 C19.6608869,15.1518791 20.4965381,16.5234293 20.1779073,17.9035709 L17.8733934,27.9008449 C17.5718192,29.207106 17.2972414,30.3330336 15.693824,29.9628555 C15.5637181,29.9328182 14.6597278,29.7295447 14.242992,29.6333337 L13.7475204,31.7794569 C13.7159762,31.9049424 13.6506979,32.1988413 13.6506979,32.1988413 C13.6506979,32.1988413 13.960357,32.2621057 14.0544242,32.2838228 L19.1627593,33.4631749 L18.0063793,38.46086 L20.449682,39.0249409 L20.5218031,38.7125503 L21.6060621,34.0272558 L24.0493648,34.5913367 L22.8953655,39.6232981 L25.0088224,40.1112281 L25.3223287,40.1836067 L26.4926675,35.1554175 L27.7118755,35.4368939 C31.529536,36.3182703 34.3610402,34.5041668 35.2625533,30.5992846 C35.684858,28.7700816 35.0727322,26.9723687 33.836573,25.7756997 L33.836573,25.7756997 Z M25.3513718,17.7831539 L29.0163259,18.6292752 C30.3656398,18.9407888 31.201291,20.3123391 30.8826602,21.6924806 C30.5640294,23.0726222 29.211703,23.939038 27.8623891,23.6275243 L24.197435,22.781403 L25.3513718,17.7831539 L25.3513718,17.7831539 Z M27.3581643,31.4071903 L22.4715589,30.2790286 L23.6254956,25.2807794 L28.512101,26.4089411 C29.861415,26.7204548 30.6970662,28.0920051 30.3784354,29.4721466 C30.0598046,30.8522882 28.7074782,31.718704 27.3581643,31.4071903 L27.3581643,31.4071903 Z" id="Imported-Layers"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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>