BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #6104 from gabrielbazan7/feat/cardUI 

improvements on the card UI
This commit is contained in:
Gustavo Maximiliano Cortez 2017-05-29 15:26:31 -03:00 committed by GitHub
parent 82112dc66b 30e64bc72e
commit bc9d4bd994
7 changed files with 160 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/js/controllers/bitpayCard.js
View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService) {
angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, $state, lodash, bitpayCardService, moment, popupService, gettextCatalog, $ionicHistory, bitpayService, externalLinkService) {
var self = this;
var runningBalance;
@ -37,15 +37,15 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
var setGetStarted = function(history, cb) {
// Is the card new?
if (!lodash.isEmpty(history.transactionList))
if (!lodash.isEmpty(history.transactionList))
return cb();
var dateRange = setDateRange('all');
bitpayCardService.getHistory($scope.cardId, dateRange, function(err, history) {
if (!err && lodash.isEmpty(history.transactionList))
self.getStated=true;
if (!err && lodash.isEmpty(history.transactionList))
self.getStarted = true;
return cb();
});
};
@ -60,7 +60,11 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
if (err) {
$log.error(err);
self.bitpayCardTransactionHistory = null;
self.bitpayCardTransactionHistoryCompleted = null;
self.bitpayCardTransactionHistoryConfirming = null;
self.bitpayCardTransactionHistoryPreAuth = null;
self.underpaidInvoiceInList = null;
self.delayedInvoiceInList = null;
self.balance = null;
popupService.showAlert(gettextCatalog.getString('Error'), gettextCatalog.getString('Could not get transactions'));
return;
@ -84,7 +88,26 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
txs[i].merchant.location = txs[i].merchant.city || txs[i].merchant.state || '';
}
}
self.bitpayCardTransactionHistory = txs;
self.bitpayCardTransactionHistoryCompleted = lodash.filter(txs, function(tx) {
return !tx.pending && tx.type.indexOf('93') == -1;
});
self.bitpayCardTransactionHistoryConfirming = lodash.filter(txs, function(tx) {
return tx.pending;
});
self.bitpayCardTransactionHistoryPreAuth = lodash.includes(txs, function(tx) {
return tx.type.indexOf('93') > -1;
});
lodash.forEach(self.bitpayCardTransactionHistoryConfirming, function(tx) {
if (lodash.includes(tx, 'paidPartial'))
self.underpaidInvoiceInList = true;
});
lodash.forEach(self.bitpayCardTransactionHistoryConfirming, function(tx) {
if (lodash.includes(tx, 'paid') || lodash.includes(tx, 'invalid'))
self.delayedInvoiceInList = true;
});
self.balance = history.currentCardBalance;
self.updatedOn = null;
@ -132,13 +155,33 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
};
var _price = function(tx) {
return parseFloat(tx.amount) + parseFloat(tx.fee)
var price = tx.fee ? parseFloat(tx.amount) + parseFloat(tx.fee) : parseFloat(tx.amount);
return price;
};
var _runningBalance = function(tx) {
runningBalance -= parseFloat(tx.amount);
};
this.openExternalLink = function(url) {
var optIn = true;
var title = null;
var message = gettextCatalog.getString('Help and support information is available at the website.');
var okText = gettextCatalog.getString('Open');
var cancelText = gettextCatalog.getString('Go Back');
externalLinkService.open(url, optIn, title, message, okText, cancelText);
};
this.viewOnBlockchain = function(transactionId) {
var url = 'https://insight.bitpay.com/tx/' + transactionId;
var optIn = true;
var title = null;
var message = gettextCatalog.getString('View Transaction on Insight');
var okText = gettextCatalog.getString('Open Insight');
var cancelText = gettextCatalog.getString('Go Back');
externalLinkService.open(url, optIn, title, message, okText, cancelText);
};
$scope.$on("$ionicView.beforeEnter", function(event, data) {
$scope.cardId = data.stateParams.id;
@ -149,7 +192,7 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
$state.go('tabs.home');
}
bitpayCardService.get({
cardId: $scope.cardId,
noRefresh: true,

4
src/js/services/bitpayCardService.js
View File

@ -31,7 +31,9 @@ angular.module('copayApp.services').factory('bitpayCardService', function($log,
amount: invoices[i].price,
type: '00611 = Client Funded Deposit',
pending: true,
status: invoices[i].status
status: invoices[i].status,
transactionId: invoices[i].transactions && invoices[i].transactions[0] ? invoices[i].transactions[0].txid : '',
exceptionStatus: invoices[i].exceptionStatus
});
}
}

17
src/sass/views/bitpayCard.scss
View File

@ -7,6 +7,23 @@
@extend .deflash-blue;
background: white;
.status-label {
font-size: 14px;
font-weight: 300;
color: #727272;
padding: 2px 1rem;
background: #f8f8f9;
}
.comment {
padding: 15px;
background: #f8f8f9;
font-weight: bold;
font-size:0.9em;
color: $v-mid-gray;
display: inline-block;
}
.spinner svg {
stroke: #0067c8;
fill: #0067c8;

77
www/views/bitpayCard.html
View File

@ -46,12 +46,23 @@
class="text-center padding get-started"
ng-show="bitpayCard.getStarted">
<i class="icon ion-ios-arrow-thin-up get-started__arrow"></i>
<h1>Get started</h1>
<div class="get-started__text">
<h1 translate>Get started</h1>
<div class="get-started__text" translate>
Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.
</div>
</div>
<div ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0] && !bitpayCard.underpaidInvoiceInList && bitpayCard.delayedInvoiceInList" class="comment">
<span translate>Confirming transactions take up to 1 block confirmation to proccess.</span>
<a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-do-you-require-one-blockchain-confirmation-for-bitpay-card-loads')" translate>Learn More</a>
</div>
<div ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0] && bitpayCard.underpaidInvoiceInList" class="comment">
<span translate>Confirming load transactions that are underpaid may require at least six blockchain confirmations to process.</span>
<a ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-do-you-require-one-blockchain-confirmation-for-bitpay-card-loads')" translate>Learn More</a>
</div>
<div ng-if="bitpayCard.bitpayCardTransactionHistoryPreAuth[0]" class="comment">
<span translate>(Pre-Auth Holds transactions) The merchant has initiated a hold to make those funds unavailable until your transaction to them has fully settled. Funds are released within 30 days at the latest in the event the merchant decides not to complete the transaction.</span>
<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">
<div class="input-label" translate>
@ -63,46 +74,34 @@
<option value="all" translate>All</option>
</select>
</label>
<div ng-if="bitpayCard.bitpayCardTransactionHistory[0]"
ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory"
class="item row">
<div class="col col-10 text-center">
<div class="tu size-12">{{tx.timestamp | amDateFormat:'MMM'}}</div>
<div class="text-light">{{tx.timestamp | amDateFormat:'DD'}}</div>
</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 ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0]">
<label class="item status-label">
<div translate>
Confirming
</div>
<div class="size-12 text-gray">
<span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.location}}</span>
<span ng-class="{'m5l':tx.merchant.city && tx.merchant.state}">
{{tx.timestamp | amDateFormat:'h:mm A'}}
</span>
</label>
<div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryConfirming">
<span ng-include="'views/includes/cardActivity.html'"></span>
</div>
</div>
<div ng-if="bitpayCard.bitpayCardTransactionHistoryPreAuth[0]">
<label class="item status-label">
<div translate>
Pre-Auth Holds
</div>
</label>
<div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryPreAuth">
<span ng-include="'views/includes/cardActivity.html'"></span>
</div>
<!--
<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,
'stable': tx.price.toString().indexOf('-') == -1 && tx.pending}">
<span ng-show="tx.price.toString().indexOf('-') == -1 && !tx.pending">+ </span>
{{tx.price | currency:'$':2 }}
</div>
<div ng-if="bitpayCard.bitpayCardTransactionHistoryCompleted[0]">
<label ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0]" class="item status-label">
<div translate>
Completed
</div>
<time class="size-12 text-gray" ng-if="!tx.pending">{{tx.runningBalance | currency:'$':2}}</time>
<span class="size-12 text-gray text-italic" ng-if="tx.pending" class="tu" translate>Pending</span>
</label>
<div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryCompleted">
<span ng-include="'views/includes/cardActivity.html'"></span>
</div>
</div>
</div>

43
www/views/includes/cardActivity.html Normal file
View File

@ -0,0 +1,43 @@
<div class="item row">
<div class="col col-10 text-center">
<div class="tu size-12">{{tx.timestamp | amDateFormat:'MMM'}}</div>
<div class="text-light">{{tx.timestamp | amDateFormat:'DD'}}</div>
</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">
<span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.location}}</span>
<span ng-class="{'m5l':tx.merchant.city && tx.merchant.state}">
{{tx.timestamp | amDateFormat:'h:mm A'}}
</span>
</div>
<div ng-show="tx.pending && tx.transactionId" class="size-12">
<a ng-click="bitpayCard.viewOnBlockchain(tx.transactionId)">View Confirmation Status</a>
</div>
</div>
<!-- <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:'$':2 }}
</div>
<time class="size-12 text-gray" ng-if="!tx.pending">{{tx.runningBalance | currency:'$':2}}</time>
<span class="size-12 text-gray text-italic" ng-if="tx.pending" class="tu" translate>Pending</span>
</div>
</div>

8
www/views/modals/bitpay-card-confirmation.html
View File

@ -1,17 +1,17 @@
<ion-modal-view>
<ion-content ng-controller="bitpayCardConfirmationController">
<div class="text-center">
<h1 class="text-center m20b p20h">Are you sure you would like to log out of your Bitpay Card account?</h1>
<p class="text-gray p20h">You will need to log back for fill in your Bitpay Card.</p>
<h1 class="text-center m20b p20h" translate>Are you sure you would like to log out of your Bitpay Card account?</h1>
<p class="text-gray p20h" translate>You will need to log back for fill in your Bitpay Card.</p>
<div class="row">
<div class="col">
<button class="button button-block button-stable" ng-click="cancel()">
<button class="button button-block button-stable" ng-click="cancel()" translate>
Cancel
</button>
</div>
<div class="col">
<button class="button button-block button-assertive" ng-click="ok()">
<span>Log out</span>
<span translate>Log out</span>
</button>
</div>
</div>

6
www/views/topup.html
View File

@ -23,7 +23,7 @@
<span ng-if="!rate">...</span>
</div>
</div>
</div>
</div>
<div class="info">
@ -31,7 +31,7 @@
<div class="label">From</div>
<div class="wallet">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg">
<img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg">
</i>
{{wallet ? wallet.name : '...'}}
</div>
@ -52,7 +52,7 @@
<span class="item-note">
{{cardInfo.email}}
</span>
</div>
</div>
</div>
</div>