Merge pull request #318 from cmgustavo/ref/design-69

BitPay Card Integration

www/views/amount.html

@@ -12,15 +12,15 @@
     <div>
       <div class="item item-no-bottom-border" translate>Recipient</div>
 
-      <div class="item item-text-wrap item-icon-left bitcoin-address" ng-class="{'item-big-icon-left':isCard}">
+      <div class="item item-text-wrap item-icon-left bitcoin-address" ng-class="{'item-big-icon-left':cardId}">
         <i ng-if="isWallet" class="icon ion-briefcase size-21"></i>
         <span ng-if="!isWallet">
-          <gravatar ng-if="!isCard" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
-          <i ng-if="isCard" class="icon big-icon-svg">
+          <gravatar ng-if="!cardId" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
+          <i ng-if="cardId" class="icon big-icon-svg">
             <div class="bg icon-bitpay-card"></div>
           </i>
         </span>
-        <span ng-class="{'m10l':isCard}">{{toName || toAddress}}</span>
+        <span ng-class="{'m10l':cardId}">{{toName || toAddress}}</span>
       </div>
     </div>
 

www/views/bitpayCard.html

@@ -2,9 +2,9 @@
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
-    <ion-nav-title>BitPay Card</ion-nav-title>
-    <ion-nav-buttons side="secondary" ng-show="bitpayCard.bitpayCardAuthenticated">
-      <button class="button back-button" ui-sref="tabs.bitpayCard.preferences">
+    <ion-nav-title>BitPay Visa&reg; Card</ion-nav-title>
+    <ion-nav-buttons side="secondary">
+      <button class="button back-button" ng-show="!error" ui-sref="tabs.bitpayCard.preferences">
         <i class="icon ion-ios-gear-outline"></i>
       </button>
     </ion-nav-buttons>
@@ -16,145 +16,74 @@
       Sandbox version. Only for testing purpose
     </div>
 
-    <div class="m20t text-center size-12 text-gray" ng-show="!bitpayCard.bitpayCardAuthenticated && bitpayCard.loadingSession">
-      Loading...
-    </div>
-
-    <div ng-show="!bitpayCard.bitpayCardAuthenticated && !bitpayCard.loadingSession">
-        <div class="text-center m20t">
-          <img src="img/bitpay-card-visa.svg" width="200">
+    <div class="oh pr" ng-show="!error">
+      <div class="amount">
+        <div ng-if="bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
+          <div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
+          <a class="button button-positive button-small" ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})">
+            {{'Add Funds'|translate}}
+          </a>
         </div>
-        <h4 class="text-center">
-          <span ng-show="!bitpayCard.bitpayCardTwoFactorPending">Login to your account</span>
-          <span ng-show="bitpayCard.bitpayCardTwoFactorPending">2-Step Verification</span>
-        </h4>
-
-        <form
-             ng-show="!bitpayCard.bitpayCardTwoFactorPending"
-             name="authenticateForm"
-             ng-submit="bitpayCard.authenticate(email, password)"
-             novalidate>
-
-          <div class="card list">
-            <label class="item item-input item-stacked-label">
-              <span class="input-label">Email</span>
-              <input name="email"
-                     type="email"
-                     ng-model="email"
-                     ng-disabled="bitpayCard.authenticating"
-                     required>
-            </label>
-
-            <label class="item item-input item-stacked-label">
-              <span class="input-label">Password</span>
-              <input name="password"
-                     type="password"
-                     ng-model="password"
-                     ng-disabled="bitpayCard.authenticating"
-                     required>
-            </label>
-          </div>
-
-          <input class="button button-block button-positive"
-                 type="submit"
-                 ng-disabled="!authenticateForm.$valid || bitpayCard.authenticating"
-                 value="Login">
-        </form>
-
-        <p ng-show="bitpayCard.bitpayCardTwoFactorPending" class="size-12 text-center text-gray">
-        Enter the verification code generated by the authenticator app on your phone.
-        </p>
-
-        <form
-             ng-show="bitpayCard.bitpayCardTwoFactorPending"
-             name="authenticate2FAForm"
-             ng-submit="bitpayCard.authenticate2FA(twoFactorCode)"
-             novalidate>
-
-          <div class="list">
-            <label class="item item-input item-stacked-label">
-              <span class="input-label">Verification Code</span>
-              <input name="twoFactorCode"
-                     type="text"
-                     ng-model="twoFactorCode"
-                     ng-disabled="bitpayCard.authenticating"
-                     required>
-            </label>
-          </div>
-
-          <input class="button button-block button-positive"
-                 type="submit"
-                 ng-disabled="!authenticate2FAForm.$valid || bitpayCard.authenticating"
-                 value="Login">
-        </form>
-    </div>
-
-    <div ng-show="bitpayCard.bitpayCardAuthenticated">
-      <div class="oh pr">
-        <div class="amount">
-          <div ng-if="!loadingHistory && bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
-            <div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
-            <a class="button button-positive button-small" ui-sref="tabs.bitpayCard.amount({'isCard': true, 'toName': 'BitPay Card'})">
-              <i class="icon ion-ios-plus-empty"></i> {{'Add Funds'|translate}}
-            </a>
-          </div>
-          <div ng-if="loadingHistory" class="m10t">
-            <strong class="size-36">...</strong>
-          </div>
+        <div ng-if="!bitpayCard.bitpayCardCurrentBalance" class="m10t">
+          <strong class="size-36">...</strong>
         </div>
       </div>
+      <div class="wallet-details-wallet-info">
+        <img style="height:0.6em"  ng-show="loadingHistory" src="img/icon-sync-white.svg">
+      </div>
+    </div>
 
+    <div ng-show="error" class="text-center m10t assertive">
+      {{error}}
+    </div>
+
+    <div
+      class="m10t text-center padding"
+      ng-if="!loadingHistory && !bitpayCard.bitpayCardTransactionHistory[0] && !error">
+      <i class="icon ion-ios-arrow-thin-up size-24"></i>
+      <h1>Get started</h1>
+      <h4>Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.</h4>
+    </div>
+
+    <div class="list" ng-if="bitpayCard.bitpayCardTransactionHistory[0] && !error">
+      <div class="item item-divider">
+      <select class="select-style" ng-model="dateRange.value" ng-change="bitpayCard.update()">
+        <option value="last30Days">Recent Activity</option>
+        <option value="lastMonth">Last Month</option>
+        <option value="all">All Activity</option>
+      </select>
+      </div>
       <div
-        class="m10t text-center padding"
-        ng-show="!bitpayCard.bitpayCardTransactionHistory[0] &&
-        !bitpayCard.bitpayCardInvoiceHistory[0] && (!loadingHistory || !bitpayCardCached)">
-        <i class="icon ion-ios-arrow-thin-up size-24"></i>
-        <h1>Get started</h1>
-        <h4>Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.</h4>
-      </div>
-
-      <div class="list" ng-if="bitpayCardCached">
-        <div class="item item-divider">
-        <select class="select-style" ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
-          <option value="last30Days">Recent Activity</option>
-          <option value="lastMonth">Last Month</option>
-          <option value="all">All Activity</option>
-        </select>
+        ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
+        class="item row">
+        <div class="col col-10">
+          <img class="m5t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="22">
         </div>
-        <div
-          ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
-          class="item row"
-          ng-init="bitpayCard.getMerchantInfo(tx)">
-          <div class="col col-10" ng-init="icon = bitpayCard.getIconName(tx)">
-            <img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
-          </div>
 
-          <div class="col">
-            <div class="size-12 text-bold">
-              {{tx.merchant.name}}
-            </div>
-            <div class="size-12">
-              {{tx.merchant.city}}, {{tx.merchant.state}}
-            </div>
+        <div class="col">
+          <div class="size-12 text-bold">
+            {{tx.merchant.name}}
           </div>
-          <div
-            ng-init="desc = bitpayCard.processDescription(tx)"
-            class="col size-12">
-            {{desc}}
+          <div class="size-12">
+            {{tx.merchant.city}}, {{tx.merchant.state}}
           </div>
-          <div class="col">
-            <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
-            <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
-          </div>
-          <div class="col text-right size-12 text-gray">
-            <div class="size-14"
-                 ng-class="{
-                 'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
-                 'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
-              {{tx.amount | currency:'$':2 }}
-            </div>
-            <time>{{tx.timestamp | amTimeAgo}}</time>
+        </div>
+        <div class="col size-12">
+          {{tx.desc}}
+        </div>
+        <div class="col">
+          <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
+          <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
+        </div>
+        <div class="col text-right size-12 text-gray">
+          <div class="size-14"
+               ng-class="{
+               'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
+               'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
+            {{tx.amount | currency:'$':2 }}
           </div>
+          <time ng-if="!tx.pending">{{tx.timestamp | amCalendar}}</time>
+          <span ng-if="tx.pending" class="tu" translate>Pending</span>
         </div>
       </div>
     </div>

www/views/bitpayCardIntro.html

@@ -0,0 +1,45 @@
+<ion-view id="bitpayCard-intro">
+  <ion-nav-bar class="bar-stable">
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+    <ion-nav-title></ion-nav-title>
+    <ion-nav-buttons side="secondary">
+      <button class="button back-button button-clear" ng-click="orderBitPayCard()">
+        <i class="icon ion-ios-information-outline"></i>
+      </button>
+    </ion-nav-buttons>
+  </ion-nav-bar>
+  <ion-content scroll="false">
+    <div class="text-center padding">
+      <img src="img/bitpay-card-visa.svg" width="100%">
+    </div>
+    <ion-slide-box>
+      <ion-slide>
+        <p translate>
+        Turn bitcoin into dollars, swipe anywhere Visa&reg; is accepted.
+        </p>
+      </ion-slide>
+      <ion-slide>
+        <p translate>
+        <span translate>Get local cash anywhere you go, from any Visa&reg;-compatible ATM.</span>
+        <div translate class="size-10 text-center">
+          *ATM bank fees may apply
+        </div>
+        </p>
+      </ion-slide>
+      <ion-slide>
+        <p translate>
+        Pay 0% fees to turn bitcoin into dollars.
+        </p>
+      </ion-slide>
+    </ion-slide-box>
+    <div class="cta-button">
+      <button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
+        Order the BitPay Card
+      </button>
+      <button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
+        Connect my BitPay Card
+      </button>
+    </div>
+  </ion-content>
+</ion-view>

www/views/confirm.html

@@ -23,8 +23,15 @@
         <div class="item">
           <span class="label" translate>To</span>
           <span class="payment-proposal-to" copy-to-clipboard="toAddress">
-            <img src="img/icon-bitcoin-small.svg">
-            <contact class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
+            <img ng-if="!cardId" src="img/icon-bitcoin-small.svg">
+            <img ng-if="cardId" src="img/icon-card.svg" width="34">
+            <span ng-if="toName">{{toName}}</span>
+            <contact ng-if="!toName" class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
+            <div ng-show="_paypro" ng-click="openPPModal(_paypro)">
+              <i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
+              <i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
+              {{_paypro.domain}}
+            </div>
             <!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
             <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
           </span>

www/views/preferencesBitpayCard.html

@@ -2,14 +2,21 @@
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
-    <ion-nav-title>Preferences</ion-nav-title>
+    <ion-nav-title>BitPay Visa&reg; Cards</ion-nav-title>
   </ion-nav-bar>
 
-  <ion-content ng-controller="preferencesBitpayCardController">
-    <ul class="list">
-      <li class="item assertive" ng-click="logout()">
-        Log out
-      </li>
-    </ul>
+  <ion-content>
+    <div class="list">
+      <div class="item item-divider" translate>
+        Cards
+      </div>
+      <div class="item" ng-repeat="card in bitpayCards">
+        xxxx-xxxx-xxxx-{{card.lastFourDigits}}
+      </div>
+      <div class="item item-divider"></div>
+      <div class="item assertive" ng-click="remove()">
+        Removes all data from this device
+      </div>
+    </div>
   </ion-content>
 </ion-view>

www/views/tab-home.html

@@ -78,7 +78,6 @@
               {{wallet.m}}-of-{{wallet.n}}
             </span>
           </span>
-
           <p>
           <span ng-if="!wallet.isComplete()" class="assertive" translate>
             Incomplete
@@ -91,15 +90,26 @@
           </p>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <a ui-sref="tabs.bitpayCard"
-           ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
-           class="item item-sub item-icon-left item-big-icon-left item-icon-right">
+
+        <a ng-repeat="card in bitpayCards"
+           ui-sref="tabs.bitpayCard({id:card.id})"
+           ng-if="bitpayCardEnabled && bitpayCards[0]"
+           class="item item-icon-left item-big-icon-left item-icon-right">
           <i class="icon big-icon-svg">
             <div class="bg icon-bitpay-card"></div>
           </i>
-          <h2>BitPay Card</h2>
-          <p ng-if="!bitpayCard" translate>Add funds to get started</p>
-          <span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
+          <h2>BitPay Visa&reg; Card</h2>
+          <p>{{cardsHistory[card.id].balance ? '$' + cardsHistory[card.id].balance : 'Add funds to get started'|translate}}</p>
+          <i class="icon bp-arrow-right"></i>
+        </a>
+        <a ui-sref="tabs.bitpayCardIntro"
+           ng-if="bitpayCardEnabled && !bitpayCards[0] && externalServices.BitpayCard"
+           class="item item-icon-left item-big-icon-left item-icon-right">
+          <i class="icon big-icon-svg">
+            <div class="bg icon-bitpay-card"></div>
+          </i>
+          <h2>BitPay Visa&reg; Card</h2>
+          <p translate>Add your cards</p>
           <i class="icon bp-arrow-right"></i>
         </a>
       </div>
@@ -138,7 +148,7 @@
         <i class="icon bp-arrow-down" ng-show="hideNextSteps"></i>
       </div>
       <div ng-show="!hideNextSteps">
-        <a ui-sref="tabs.bitpayCard" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
+        <a ui-sref="tabs.bitpayCardIntro" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-bitpay-card"></div>
          </i>