buy flow rename and fixes

src/js/controllers/confirm.js

@@ -241,6 +241,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
   });
 
   $scope.showWalletSelector = function() {
+    $scope.walletSelectorTitle = !$scope.isGlidera && !$scope.buyGlidera ? 'Send From' : 'Receive in';
     if (!$scope.useSendMax && ($scope.insufficientFunds || $scope.noMatchingWallet)) return;
     $scope.showWallets = true;
   };

src/js/directives/clickToAccept.js

@@ -8,10 +8,11 @@ angular.module('copayApp.directives')
       transclude: true,
       scope: {
         sendStatus: '=clickSendStatus',
+        wallet: '=hasWalletChosen'
       },
       link: function(scope, element, attrs) {
         scope.$watch('sendStatus', function() {
-          if(scope.sendStatus !== 'success') {
+          if (scope.sendStatus !== 'success') {
             scope.displaySendStatus = scope.sendStatus;
           }
         });

src/js/directives/slideToAccept.js

@@ -8,7 +8,8 @@ angular.module('copayApp.directives')
       transclude: true,
       scope: {
         sendStatus: '=slideSendStatus',
-        onConfirm: '&slideOnConfirm'
+        onConfirm: '&slideOnConfirm',
+        wallet: '=hasWalletChosen'
       },
       link: function(scope, element, attrs) {
 
@@ -33,9 +34,9 @@ angular.module('copayApp.directives')
         scope.displaySendStatus = '';
 
         scope.$watch('sendStatus', function() {
-          if(!scope.sendStatus) {
+          if (!scope.sendStatus) {
             reset();
-          } else if(scope.sendStatus === 'success') {
+          } else if (scope.sendStatus === 'success') {
             scope.displaySendStatus = '';
             $timeout(function() {
               reset();
@@ -51,19 +52,20 @@ angular.module('copayApp.directives')
           var startTime = currentEaseStartTime;
           var initialPct = fromPct;
           var distance = pct - fromPct;
+
           function ease() {
-            if(startTime !== currentEaseStartTime) {
+            if (startTime !== currentEaseStartTime) {
               return;
             }
             $window.requestAnimationFrame(function() {
               var now = Date.now();
               var elapsed = now - startTime;
-              var normalizedElapsedTime = elapsed/duration;
+              var normalizedElapsedTime = elapsed / duration;
               var newVal = easeFx(normalizedElapsedTime);
-              var newPct = newVal*distance + initialPct;
+              var newPct = newVal * distance + initialPct;
               animateFx(newPct);
               scope.$digest();
-              if(elapsed < duration) {
+              if (elapsed < duration) {
                 ease();
               } else {
                 deferred.resolve();
@@ -93,31 +95,33 @@ angular.module('copayApp.directives')
         function setNewSliderStyle(pct) {
           var knobWidthPct = getKnobWidthPercentage();
           var translatePct = pct - knobWidthPct;
-          if(isSliding) {
+          if (isSliding) {
-            translatePct += 0.35*pct;
+            translatePct += 0.35 * pct;
           }
           scope.sliderStyle = getTransformStyle(translatePct);
           curSliderPct = pct;
         }
 
         function setNewBitcoinStyle(pct) {
-          var translatePct = -2.25*pct;
+          var translatePct = -2.25 * pct;
           scope.bitcoinStyle = getTransformStyle(translatePct);
           curBitcoinPct = pct;
         }
 
         function setNewTextStyle(pct) {
-          var translatePct = -0.1*pct;
+          var translatePct = -0.1 * pct;
           scope.textStyle = getTransformStyle(translatePct);
           curTextPct = pct;
         }
 
         function getTransformStyle(translatePct) {
-          return {'transform': 'translateX(' + translatePct + '%)'};
+          return {
+            'transform': 'translateX(' + translatePct + '%)'
+          };
         }
 
-        function getKnobWidthPercentage()  {
+        function getKnobWidthPercentage() {
-          var knobWidthPct = (KNOB_WIDTH/elm.clientWidth)*100;
+          var knobWidthPct = (KNOB_WIDTH / elm.clientWidth) * 100;
           return knobWidthPct;
         }
 
@@ -175,8 +179,8 @@ angular.module('copayApp.directives')
 
         function getTouchXPosition($event) {
           var x;
-          if($event.touches || $event.changedTouches) {
+          if ($event.touches || $event.changedTouches) {
-            if($event.touches.length) {
+            if ($event.touches.length) {
               x = $event.touches[0].clientX;
             } else {
               x = $event.changedTouches[0].clientX;
@@ -190,18 +194,18 @@ angular.module('copayApp.directives')
         function getSlidPercentage($event) {
           var x = getTouchXPosition($event);
           var width = elm.clientWidth;
-          var pct = (x/width)*100;
+          var pct = (x / width) * 100;
-          if(x >= width) {
+          if (x >= width) {
             pct = 100;
           }
           return pct;
         }
 
         scope.onTouchstart = function($event) {
-          if(scope.isSlidFully) {
+          if (scope.isSlidFully) {
             return;
           }
-          if(!isSliding) {
+          if (!isSliding) {
             var pct = getSlidPercentage($event);
             if (pct > MAX_SLIDE_START_PERCENTAGE) {
               jiggleSlider();
@@ -209,7 +213,7 @@ angular.module('copayApp.directives')
             } else {
               isSliding = true;
               var knobWidthPct = getKnobWidthPercentage();
-              if(pct < knobWidthPct) {
+              if (pct < knobWidthPct) {
                 pct = knobWidthPct;
               }
               pct += PERCENTAGE_BUMP;
@@ -219,12 +223,12 @@ angular.module('copayApp.directives')
         };
 
         scope.onTouchmove = function($event) {
-          if(!isSliding || scope.isSlidFully) {
+          if (!isSliding || scope.isSlidFully) {
             return;
           }
           var pct = getSlidPercentage($event);
           var knobWidthPct = getKnobWidthPercentage();
-          if(pct < knobWidthPct) {
+          if (pct < knobWidthPct) {
             pct = knobWidthPct;
           }
           pct += PERCENTAGE_BUMP;
@@ -233,11 +237,11 @@ angular.module('copayApp.directives')
         };
 
         scope.onTouchend = function($event) {
-          if(scope.isSlidFully) {
+          if (scope.isSlidFully) {
             return;
           }
           var pct = getSlidPercentage($event);
-          if(isSliding && pct > FULLY_SLID_PERCENTAGE) {
+          if (isSliding && pct > FULLY_SLID_PERCENTAGE) {
             pct = 100;
             setSliderPosition(pct);
             alertSlidFully();

src/js/directives/walletSelector.js

@@ -7,6 +7,7 @@ angular.module('copayApp.directives')
       templateUrl: 'views/includes/walletSelector.html',
       transclude: true,
       scope: {
+        title: '=walletSelectorTitle',
         show: '=walletSelectorShow',
         wallets: '=walletSelectorWallets',
         selectedWallet: '=walletSelectorSelectedWallet',

src/sass/views/amount.scss

@@ -85,8 +85,9 @@
         color: $dark-gray;
         font-weight: bold;
         .limits {
-          margin-top: 20px;
+          margin-top: 10px;
           color: $light-gray;
+          font-size: 12px;
         }
       }
     }

src/sass/views/includes/txp-details.scss

@@ -47,22 +47,6 @@
         color: #9B9B9B;
       }
     }
-    .glidera-explanation {
-      padding: 0 1rem;
-      margin: 1rem 0;
-      white-space: normal;
-    }
-    .glidera-description {
-      text-align: center;
-      font-size: 15px;
-      color: $mid-gray;
-      margin: 1rem 0;
-      a {
-        font-weight: bold;
-        cursor: pointer;
-        cursor: hand;
-      }
-    }
   }
   .item {
     border-color: $item-border-color;
@@ -261,7 +245,6 @@
     color: rgba(58, 58, 58, .6);
     margin-bottom: 1.5rem;
   }
-
   .glidera-success {
     margin-top: 15px;
     span {
@@ -269,4 +252,13 @@
       display: block;
     }
   }
+  .glidera-explanation {
+    padding: 0 1rem;
+    white-space: normal;
+  }
+  .glidera-description {
+    text-align: center;
+    font-size: 12px;
+    color: $mid-gray;
+  }
 }

www/views/confirm.html

@@ -12,26 +12,14 @@
       <div class="item head">
         <div class="sending-label">
           <img src="img/icon-tx-sent-outline.svg">
-          <span translate ng-if="!useSendMax">Sending</span>
+          <span translate ng-if="!useSendMax && !isGlidera">Sending</span>
           <span translate ng-if="useSendMax">Sending maximum amount</span>
+          <span ng-if="isGlidera && glideraBuy">Buying</span>
         </div>
         <div class="amount-label">
           <div class="amount">{{displayAmount || '...'}} <span class="unit">{{displayUnit}}</span></div>
           <div class="alternative">{{alternativeAmountStr || '...'}}</div>
         </div>
-        <div ng-show="isGlidera">
-          <div class="glidera-explanation">
-            <div class="glidera-description" ng-show="buyPrice.qty">
-              Buy {{buyPrice.subtotal|currency:'':2}} {{buyPrice.currency}} in Bitcoin at  {{buyPrice.price}} {{buyPrice.currency}}/BTC
-            </div>
-            <div class="glidera-description">
-              Fiat will be immediately withdrawn from your bank account
-            </div>
-            <div class="glidera-description">
-              Each bitcoin wallet can generate billions of addresses from your 12-word backup. A new address is automatically generated and shown each time your recive a payment
-            </div>
-          </div>
-        </div>
       </div>
       <div class="info">
         <div class="item single-line" ng-if="paypro">
@@ -40,7 +28,8 @@
           <span class="item-note" ng-if="paymentExpired.value" ng-style="{'color': 'red'}" translate>Expired</span>
         </div>
         <div class="item">
-          <span class="label" translate>To</span>
+          <span class="label" ng-if="!isGlidera" translate>To</span>
+          <span class="label" ng-if="isGlidera && glideraBuy">From</span>
           <span class="payment-proposal-to">
             <img ng-if="!cardId && !isGiftCard && !isGlidera" src="img/icon-bitcoin-small.svg">
             <img ng-if="cardId" src="img/icon-card.svg" width="34">
@@ -65,7 +54,8 @@
           </span>
         </div>
         <a class="item item-icon-right" ng-hide="!useSendMax && (insufficientFunds || noMatchingWallet)" ng-click="showWalletSelector()">
-          <span class="label" translate>From</span>
+          <span class="label" ng-if="!isGlidera" translate>From</span>
+          <span class="label" ng-if="isGlidera && glideraBuy" translate>To</span>
           <div class="wallet">
             <i class="icon big-icon-svg">
               <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
@@ -87,6 +77,20 @@
             {{fee || '...'}}
           </span>
         </div>
+        <div class="item" ng-show="isGlidera">
+          <span class="label">Information</span>
+          <div class="glidera-explanation">
+            <div class="glidera-description" ng-show="buyPrice.qty">
+              Buy {{buyPrice.subtotal|currency:'':2}} {{buyPrice.currency}} in Bitcoin at  {{buyPrice.price}} {{buyPrice.currency}}/BTC
+            </div>
+            <div class="glidera-description">
+              Fiat will be immediately withdrawn from your bank account.
+            </div>
+            <div class="glidera-description">
+              The bitcoins will be purchased and deposited to "{{wallet.name || '...' }}" wallet in 2-4 business days.
+            </div>
+          </div>
+        </div>
         <div class="text-center" ng-show="noMatchingWallet">
           <span class="badge badge-energized" translate>No wallets available</span>
         </div>
@@ -97,15 +101,18 @@
     </div>
   </ion-content>
   <click-to-accept
-    ng-click="approve(statusChangeHandler)"
+    ng-click="wallet ? approve(statusChangeHandler) : null"
     ng-if="!isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
-    click-send-status="sendStatus">
+    click-send-status="sendStatus"
+    has-wallet-chosen="wallet">
     Click to pay
   </click-to-accept>
   <slide-to-accept
+    ng-disabled="!wallet"
     ng-if="isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
-    slide-on-confirm="onConfirm()"
+    slide-on-confirm="wallet ? onConfirm() : null"
-    slide-send-status="sendStatus">
+    slide-send-status="sendStatus"
+    has-wallet-chosen="wallet">
     Slide to pay
   </slide-to-accept>
   <slide-to-accept-success
@@ -121,6 +128,7 @@
   </slide-to-accept-success>
 
   <wallet-selector
+    wallet-selector-title="walletSelectorTitle"
     wallet-selector-wallets="wallets"
     wallet-selector-selected-wallet="wallet"
     wallet-selector-show="showWallets"

www/views/includes/clickToAccept.html

@@ -1,4 +1,4 @@
-<button class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
+<button ng-disabled="!wallet" class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
   <span ng-if="!sendStatus">
     <ng-transclude></ng-transclude>
   </span>

www/views/includes/slideToAcceptSuccess.html

@@ -3,7 +3,7 @@
   ng-class="{'fill-screen': fillScreen}">
 </div>
 
-<div class="slide-success__content">
+<div ng-disabled="wallet" 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>

www/views/includes/walletSelector.html

@@ -1,6 +1,6 @@
 <action-sheet action-sheet-show="show" class="wallet-selector">
   <img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
-  <div class="header">Send from</div>
+  <div class="header">{{title}}</div>
   <a
     ng-repeat="w in wallets track by $index"
     class="item item-icon-left item-big-icon-left item-icon-right wallet"