Merge pull request #6197 from ajp8164/feat/unify-card-view

Unifies card history view with wallet view

src/js/controllers/bitpayCard.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService) {
+angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService, timeService) {
 
   var self = this;
   var runningBalance;
@@ -163,6 +163,14 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
     runningBalance -= parseFloat(tx.amount);
   };
 
+  $scope.createdWithinPastDay = function(tx) {
+    var result = false;
+    if (tx.timestamp) {
+      result = timeService.withinPastDay(tx.timestamp);
+    }
+    return result;
+  };
+
   this.openExternalLink = function(url) {
     var optIn = true;
     var title = null;

src/js/controllers/proposals.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('proposalsController',
-  function($timeout, $scope, profileService, $log, txpModalService, addressbookService) {
+  function($timeout, $scope, profileService, $log, txpModalService, addressbookService, timeService) {
 
     $scope.fetchingProposals = true;
 
@@ -27,8 +27,6 @@ angular.module('copayApp.controllers').controller('proposalsController',
     $scope.openTxpModal = txpModalService.open;
 
     $scope.createdWithinPastDay = function(time) {
-      var now = new Date();
+      return timeService.withinPastDay(time);
-      var date = new Date(time * 1000);
-      return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
     };
   });

src/js/controllers/tab-home.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('tabHomeController',
-  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService) {
+  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService) {
     var wallet;
     var listeners = [];
     var notifications = [];
@@ -131,9 +131,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
     });
 
     $scope.createdWithinPastDay = function(time) {
-      var now = new Date();
+      return timeService.withinPastDay(time);
-      var date = new Date(time * 1000);
-      return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
     };
 
     $scope.openExternalLink = function() {

src/js/controllers/walletDetails.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, $ionicHistory, profileService, lodash, configService, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicScrollDelegate, $window, bwcError, gettextCatalog) {
+angular.module('copayApp.controllers').controller('walletDetailsController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, $state, $stateParams, $ionicHistory, profileService, lodash, configService, platformInfo, walletService, txpModalService, externalLinkService, popupService, addressbookService, storageService, $ionicScrollDelegate, $window, bwcError, gettextCatalog, timeService) {
 
   var HISTORY_SHOW_LIMIT = 10;
   var currentTxHistoryPage = 0;
@@ -190,7 +190,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     }
     var curTx = $scope.txHistory[index];
     var prevTx = $scope.txHistory[index - 1];
-    return !createdDuringSameMonth(curTx, prevTx);
+    return !$scope.createdDuringSameMonth(curTx, prevTx);
   };
 
   $scope.isLastInGroup = function(index) {
@@ -200,28 +200,18 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     return $scope.isFirstInGroup(index + 1);
   };
 
-  function createdDuringSameMonth(tx1, tx2) {
+  $scope.createdDuringSameMonth = function(curTx, prevTx) {
-    if (!tx1 || !tx2) return false;
+    return timeService.withinSameMonth(curTx.time * 1000, prevTx.time * 1000);
-    var date1 = new Date(tx1.time * 1000);
+  };
-    var date2 = new Date(tx2.time * 1000);
-    return getMonthYear(date1) === getMonthYear(date2);
-  }
 
   $scope.createdWithinPastDay = function(time) {
-    var now = new Date();
+    return timeService.withinPastDay(time);
-    var date = new Date(time * 1000);
-    return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
   };
 
   $scope.isDateInCurrentMonth = function(date) {
-    var now = new Date();
+    return timeService.isDateInCurrentMonth(date);
-    return getMonthYear(now) === getMonthYear(date);
   };
 
-  function getMonthYear(date) {
-    return date.getMonth() + date.getFullYear();
-  }
-
   $scope.isUnconfirmed = function(tx) {
     return !tx.confirmations || tx.confirmations === 0;
   };

src/js/directives/svg.js

@@ -10,7 +10,7 @@ angular.module('copayApp.directives')
       link: function(scope, element, attrs) {
         var imgId = attrs.id;
         var imgClass = attrs.class;
-        var imgUrl = attrs.src;
+        var imgUrl = attrs.src || attrs.ngSrc;
         var svg;
 
         // Load svg content

src/js/services/bitpayCardService.js

@@ -65,6 +65,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($log,
         n.lastFourDigits = x.lastFourDigits;
         n.token = x.token;
         n.currency = x.currency;
+        n.country = x.country;
         cards.push(n);
       });
 

src/js/services/timeService.js

@@ -0,0 +1,30 @@
+'use strict';
+
+angular.module('copayApp.services').factory('timeService', function() {
+  var root = {};
+
+  root.withinSameMonth = function(time1, time2) {
+    if (!time1 || !time2) return false;
+    var date1 = new Date(time1);
+    var date2 = new Date(time2);
+    return root.getMonthYear(date1) === root.getMonthYear(date2);
+  }
+
+  root.withinPastDay = function(time) {
+    var now = new Date();
+    var date = new Date(time);
+    return (now.getTime() - date.getTime()) < (1000 * 60 * 60 * 24);
+  };
+
+  root.isDateInCurrentMonth = function(date) {
+    var now = new Date();
+    return root.getMonthYear(now) === root.getMonthYear(date);
+  };
+
+  root.getMonthYear = function(date) {
+    return date.getMonth() + date.getFullYear();
+  }
+
+  return root;
+
+});

src/sass/views/bitpayCard.scss

@@ -71,6 +71,100 @@
   }
   .item {
     border-color: $item-border-color;
+    &.activity-header {
+      z-index: 3;
+      border: 0;
+      border-bottom: 1px solid #EFEFEF;
+    }
+    &.activity {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      padding: 0 0 0 1rem;
+      margin: 0;
+      border: 0;
+
+      &.send .svg #-Transaction-icons {
+      }
+      &.receive .svg #-Transaction-icons {
+        stroke: #09C286;
+      }
+      &.pending .svg #-Transaction-icons {
+        stroke: $v-bitcoin-orange;
+      }
+    }
+  }
+  .tx-icon {
+    margin-right: 25px;
+    .houston {
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      border: 1px solid;
+      &.no-border {
+        border: none;
+        .svg {
+          width: 40px;
+          height: 40px;
+          display: block;
+          margin: 0 auto;
+          position: relative;
+          top: 50%;
+          -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+        }
+      }
+      .svg {
+        width: 23px;
+        height: 23px;
+        display: block;
+        margin: 0 auto;
+        position: relative;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+      }
+    }
+  }
+  .tx-content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    padding: 1rem 0;
+    padding-right: 1rem;
+    border-bottom: 1px solid rgb(245, 245, 245);
+    overflow: hidden;
+  }
+  .tx-title {
+    flex-grow: 1;
+    color: $v-dark-gray;
+    overflow: hidden;
+  }
+  .tx-message {
+    margin-right: 1rem;
+  }
+  .tx-location {
+    margin-right: 1rem;
+    font-size: 12.5px;
+    color: $v-light-gray;
+  }
+  .tx-amount {
+    font-size: 16px;
+    white-space: nowrap;
+    &--received {
+      color: #09C286;
+    }
+    &--sent {
+      color: $v-dark-gray;
+    }
+    &--pending {
+      color: $v-bitcoin-orange;
+    }
+  }
+  .tx-time {
+    white-space: nowrap;
+    color: $v-light-gray;
+    font-size: 12.5px;
   }
   .info {
     .badge {

www/views/bitpayCard.html

@@ -64,7 +64,7 @@
       <a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-was-i-overcharged-on-my-bitpay-card-account-why-is-there-a-hold-on-my-account')" translate>Learn More</a>
     </div>
     <div class="list" ng-show="!bitpayCard.getStarted">
-      <label class="item item-input item-select">
+      <label class="item item-input item-select activity-header">
         <div class="input-label" translate>
           Activity
         </div>

www/views/includes/cardActivity.html

@@ -1,43 +1,29 @@
-<div class="item row">
+<div class="item activity" ng-class="{'sent': tx.price.toString().indexOf('-') > -1 && !tx.pending, 'receive': tx.price.toString().indexOf('-') == -1 && !tx.pending, 'pending': tx.pending}">
-  <div class="col col-10 text-center">
+  <div class="tx-icon">
-    <div class="tu size-10">{{tx.timestamp | amDateFormat:'MMM'}}</div>
+    <div class="houston" ng-class="{'no-border': tx.icon.includes('topup')}">
-    <div class="text-light">{{tx.timestamp | amDateFormat:'DD'}}</div>
+      <img class="svg" ng-src="img/mcc-icons/{{tx.icon}}.svg">
-  </div>
-  <div class="col col-10">
-    <img class="m15t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="24">
-  </div>
-
-  <div class="col col-50">
-    <div class="size-12 text-bold">
-      {{tx.merchant.name || 'Unknown Merchant'}}
     </div>
-    <div class="size-12 text-gray">
+  </div>
-      <span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.location}}</span>
+  <div class="tx-content">
-      <span ng-class="{'m5l':tx.merchant.city && tx.merchant.state}">
+    <div class="tx-title">
-        {{tx.timestamp | amDateFormat:'h:mm A'}}
+      <div class="ellipsis">
+        <div class="tx-message ellipsis">{{tx.merchant.name || 'Unknown Merchant'}}</div>
+<!-- Removed to cleanup look and since intl card does not provide location.
+        <div class="tx-location ellipsis" ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.location}}</div>
+-->
+        <div ng-show="tx.pending && tx.transactionId" class="size-12 tx-amount--pending">
+          <div ng-click="bitpayCard.viewOnBlockchain(tx.transactionId)">View Confirmation Status</div>
+        </div>
+      </div>
+    </div>
+    <span class="item-note text-right">
+      <span class="tx-amount" ng-class="{'tx-amount--sent': tx.price.toString().indexOf('-') > -1 && !tx.pending, 'tx-amount--received': tx.price.toString().indexOf('-') == -1 && !tx.pending, 'tx-amount--pending': tx.pending}">
+        {{tx.price | currency:bitpayCard.currencySymbol:2 }}
       </span>
-    </div>
+      <div>
-    <div ng-show="tx.pending && tx.transactionId" class="size-12">
+        <time class="tx-time" ng-if="createdWithinPastDay(tx)">{{tx.timestamp | amTimeAgo}}</time>
-      <a ng-click="bitpayCard.viewOnBlockchain(tx.transactionId)">View Confirmation Status</a>
+        <time class="tx-time" ng-if="!createdWithinPastDay(tx)">{{tx.timestamp | amDateFormat:'MMM D, YYYY'}}</time>
-    </div>
+      </div>
-  </div>
+    </span>
-
-  <!-- <div class="col size-12">
-    {{tx.desc}}
-  </div>
-  <div class="col col-10 text-center p10t">
-    <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">
-    <div ng-class="{
-         'balanced': tx.price.toString().indexOf('-') == -1 && !tx.pending,
-         'text-gray': tx.price.toString().indexOf('-') == -1 && tx.pending}">
-      <span ng-show="tx.price.toString().indexOf('-') == -1">+ </span>
-      {{tx.price | currency:bitpayCard.currencySymbol:2 }}
-    </div>
-    <time class="size-12 text-gray" ng-if="!tx.pending">{{tx.runningBalance | currency:bitpayCard.currencySymbol:2}}</time>
-    <span class="size-12 text-gray text-italic" ng-if="tx.pending" class="tu" translate>Pending</span>
   </div>
 </div>

www/views/includes/txp.html

@@ -28,8 +28,8 @@
       </span>
     </span>
     <div>
-      <time class="wallet-details__tx-time" ng-if="tx.createdOn && createdWithinPastDay(tx.createdOn)">{{tx.createdOn * 1000 | amTimeAgo}}</time>
+      <time class="wallet-details__tx-time" ng-if="tx.createdOn && createdWithinPastDay(tx.createdOn * 1000)">{{tx.createdOn * 1000 | amTimeAgo}}</time>
-      <time class="wallet-details__tx-time" ng-if="tx.createdOn && !createdWithinPastDay(tx.createdOn)">{{tx.createdOn * 1000 | date:'MMMM d, y'}}</time>
+      <time class="wallet-details__tx-time" ng-if="tx.createdOn && !createdWithinPastDay(tx.createdOn * 1000)">{{tx.createdOn * 1000 | date:'MMMM d, y'}}</time>
     </div>
   </span>
 </div>

www/views/includes/walletHistory.html

@@ -64,8 +64,8 @@
         </span>
       </span>
       <div>
-        <time class="wallet-details__tx-time" ng-if="btx.time && createdWithinPastDay(btx.time)">{{btx.time * 1000 | amTimeAgo}}</time>
+        <time class="wallet-details__tx-time" ng-if="btx.time && createdWithinPastDay(btx.time * 1000)">{{btx.time * 1000 | amTimeAgo}}</time>
-        <time class="wallet-details__tx-time" ng-if="btx.time && !createdWithinPastDay(btx.time)">
+        <time class="wallet-details__tx-time" ng-if="btx.time && !createdWithinPastDay(btx.time * 1000)">
           {{btx.time * 1000 | amDateFormat:'MMM D, YYYY'}}
         </time>
       </div>