Merge pull request #211 from cmgustavo/ref/design-09

Amazon gift card

public/views/amazon.html

@@ -1,54 +1,38 @@
+<ion-view>
+  <ion-nav-bar class="bar-stable">
+    <ion-nav-buttons side="primary">
+      <button class="button no-border" ui-sref="tabs.home">
+        Close
+      </button>
+    </ion-nav-buttons>
+    <ion-nav-title>Gift cards</ion-nav-title>
+  </ion-nav-bar>
 
-<div class="topbar-container">
+  <ion-content ng-controller="amazonController as amazon" ng-init="amazon.init()">
-  <nav ng-controller="topbarController as topbar"
-       class="tab-bar">
-    <section class="left-small">
-      <a class="p10"
-         ng-click="topbar.goHome()">
-        <span class="text-close">Close</span>
-      </a>
-    </section>
 
-    <section class="middle tab-bar-section">
+    <div ng-show="amazon.sandbox">
-      <h1 class="title ellipsis">
+      <i class="icon ion-information-circled"></i>
-        Gift cards
-      </h1>
-    </section>
-  </nav>
-</div>
-
-<div class="content amazon p20b" ng-controller="amazonController as amazon">
-
-  <div ng-init="amazon.init()">
-
-    <div class="box-notification text-center size-12 text-warning" ng-show="amazon.sandbox">
-      <i class="fi-info"></i>
       Sandbox version. Only for testing purpose
     </div>
 
     <div class="m20t text-center" ng-click="amazon.updatePendingGiftCards()">
       <img src="img/GCs-logo-cllb.png" alt="Amazon.com Gift Card" width="200">
-      <div class="size-10 m5t text-gray"><b>Only</b> redeemable on www.amazon.com (USA website)</div>
+      <div class="size-11 m10t"><b>Only</b> redeemable on www.amazon.com (USA website)</div>
     </div>
 
-    <div ng-if="!giftCards" class="m20t text-center size-12">
+    <div ng-if="!giftCards" class="m20t padding text-center">
 
-      <div class="row">
+      <button class="button button-positive" ui-sref="amazon.buy">
-        <div class="columns">
-          <button class="m20t button black round expand"
-                  ui-sref="buyAmazon">
         Buy now
       </button>
-        </div>
-      </div>
 
-      <div class="text-left p10h m30v">
+      <div class="text-left m30v">
         Amazon.com Gift Cards never expire and can be redeemed towards millions of items at
         <a ng-click="$root.openExternalLink('https://www.amazon.com')">www.amazon.com</a>
       </div>
     </div>
 
-    <div class="p20t" ng-if="giftCards">
+    <div class="m20t" ng-if="giftCards">
       <ul class="no-bullet m0 size-14">
         <li class="line-b line-t p10 pointer" href ui-sref="buyAmazon">
           <i class="fi-shopping-cart size-24 m5l vm dib"></i>
@@ -82,7 +66,6 @@
         </div>
       </div>
     </div>
-  </div>
+  </ion-content>
+</ion-view>
 
-  <div class="extra-margin-bottom"></div>
-</div>

public/views/buyAmazon.html

@@ -1,19 +1,19 @@
-<div
+<ion-view>
-  class="topbar-container"
+  <ion-nav-bar class="bar-stable">
-  ng-include="'views/includes/topbar.html'"
+    <ion-nav-buttons side="primary">
-  ng-init="titleSection='Buy'; goBackToState = 'amazon'; noColor = true">
+      <button class="button no-border" ui-sref="amazon.main">
-</div>
+        <i class="icon ion-chevron-left"></i> Back
+      </button>
+    </ion-nav-buttons>
+    <ion-nav-title>Buy</ion-nav-title>
+  </ion-nav-bar>
 
+  <ion-content ng-controller="buyAmazonController as buy" ng-init="buy.init()">
 
-<div class="content amazon" ng-controller="buyAmazonController as buy">
+    <div class="padding" ng-show="!buy.giftCard">
 
-  <div class="row m10t" ng-show="!buy.giftCard" ng-init="buy.init()">
+      <div class="assertive" ng-show="buy.error" ng-click="buy.error = null">
-    <div class="columns">
-
-      <div class="box-notification m20b" ng-show="buy.error" ng-click="buy.error = null">
-        <span class="text-warning">
         {{buy.error}}
-        </span>
         <div class="m10t size-12" ng-show="buy.errorInfo">
           There was an error when trying to buy gift card, but the funds were sent to BitPay Invoice. Please, contact
           BitPay to refund your bitcoin
@@ -29,51 +29,57 @@
 
       <div class="text-center">
         <img src="img/a_generic.jpg" alt="Amazon.com Gift Card" width="180">
-        <div class="text-left size-10 m10t">
+        <div class="text-center size-10 m10t">
           Use your Amazon.com Gift Card* to shop from a huge selection of books, electronics, music, movies, software, apparel, toys, and more.
         </div>
       </div>
-      <form
+
-         class="m30v"
+      <form class="m20t"
             name="buyAmazonForm"
             ng-submit="buy.createTx()"
             novalidate>
 
-        <label>
+        <div class="list">
-          Amount
+          <label class="item item-input item-stacked-label">
-        </label>
+            <span class="input-label">Amount</span>
-        <div class="input">
+            <input type="number"
-          <input type="number" id="fiat"
+                   id="fiat"
-          name="fiat" ng-attr-placeholder="{{'Amount in USD'}}"
+                   name="fiat"
-          min="0.01" max="500"
+                   ng-attr-placeholder="{{'Amount in USD'}}"
-          ng-model="fiat" autocomplete="off" required>
+                   min="0.01"
+                   max="500"
+                   ng-model="fiat"
+                   autocomplete="off" required>
 
             <a class="postfix button black">USD</a>
-        </div>
+          </label>
 
-        <div class="m10b">
+
-          <label>Pay From Copay Wallet</label>
+          <label class="item item-input item-stacked-label">
-          <div class="input">
+            <span class="input-label">Pay From Copay Wallet</span>
-            <input type="text" id="address" name="address" ng-disabled="buy.selectedWalletId"
+            <input type="text"
+                   id="address"
+                   name="address"
+                   ng-disabled="buy.selectedWalletId"
                    ng-attr-placeholder="{{'Choose your source wallet'}}"
                    ng-model="buy.selectedWalletName" required>
-            <a ng-click="openWalletsModal(buy.allWallets)" class="postfix size-12 m0 text-gray">
+            <a on-tap="openWalletsModal(buy.allWallets)" class="button button-light">
-              <i class="icon-wallet size-18"></i>
+              <i class="icon ion-folder size-18"></i>
             </a>
-          </div>
+          </label>
         </div>
 
-        <div class="input m20t">
+        <button class="button button-block button-positive"
-          <input class="button black round expand"
                 ng-disabled="!buy.selectedWalletId || !fiat"
-                   type="submit" value="Buy now">
+                type="submit"
+                value="Buy now">
+          Buy now
+        </button>
         <div class="size-10 text-gray text-center">
           Purchase Amount is limited to USD 500 per day
         </div>
-        </div>
       </form>
     </div>
-  </div>
 
     <div class="m10t" ng-show="buy.giftCard">
       <div class="m10h" ng-show="buy.giftCard.status != 'SUCCESS' && buy.giftCard.status != 'PENDING'">
@@ -162,5 +168,6 @@
       No expiration date or service fees.
     </div>
 
-</div>
+  </ion-content>
-<div class="extra-margin-bottom"></div>
+</ion-view>
+

public/views/tab-home.html

@@ -89,7 +89,7 @@
         <i class="icon ion-cash"></i>
             Buy and Sell
       </li>
-      <li menu-toggle href ui-sref="amazon" class="item item-icon-left">
+      <li menu-toggle href ui-sref="amazon.main" class="item item-icon-left">
         <i class="icon ion-ios-cart"></i>
         Gift Cards
         <span class="item-note">

src/js/controllers/buyAmazon.js

@@ -16,14 +16,15 @@ angular.module('copayApp.controllers').controller('buyAmazonController',
 
     this.init = function() {
       var network = amazonService.getEnvironment();
-      self.allWallets = profileService.getWallets(network, 1);
+      self.allWallets = profileService.getWallets({
-      client = profileService.focusedClient;
+        network: network,
-
+        n: 1,
-      if (!client) return;
+        onlyComplete: true
+      });
 
       if (lodash.isEmpty(self.allWallets)) return;
 
-      if (client.credentials.network != network) return;
+      client = self.allWallets[0];
 
       $timeout(function() {
         self.selectedWalletId = client.credentials.walletId;
@@ -157,8 +158,6 @@ angular.module('copayApp.controllers').controller('buyAmazonController',
                   });
                   return;
                 }
-                $scope.$emit('Local/NeedsConfirmation', createdTxp, function(accept) {
-                  if (accept) {
                 self.confirmTx(createdTxp, function(err, tx) {
                   if (err) {
                     ongoingProcess.set('Processing Transaction...', false);
@@ -178,8 +177,6 @@ angular.module('copayApp.controllers').controller('buyAmazonController',
 
                   self.debounceCreate(count, dataSrc);
                 });
-                  }
-                });
               });
             });
           });

src/js/routes.js

@@ -610,11 +610,24 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
 
       .state('amazon', {
         url: '/amazon',
-        templateUrl: 'views/amazon.html'
+        abstract: true,
+        template: '<ion-nav-view name="amazon"></ion-nav-view>'
       })
-      .state('buyAmazon', {
+      .state('amazon.main', {
-        url: '/buyamazon',
+        url: '/main',
+        views: {
+          'amazon': {
+            templateUrl: 'views/amazon.html'
+          }
+        }
+      })
+      .state('amazon.buy', {
+        url: '/buy',
+        views: {
+          'amazon': {
             templateUrl: 'views/buyAmazon.html'
+          }
+        }
       });
   })
   .run(function($rootScope, $state, $location, $log, $timeout, $ionicPlatform, lodash, platformInfo, profileService, uxLanguage, gettextCatalog) {

src/js/services/txStatus.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.services').factory('txStatus', function(lodash, profileService, $timeout, platformInfo) {
+angular.module('copayApp.services').factory('txStatus', function($stateParams, lodash, profileService, $timeout, platformInfo) {
   var root = {};
   var isCordova = platformInfo.isCordova;