UI styling. Improve error handle

This commit is contained in:
Gustavo Maximiliano Cortez 2017-07-06 18:10:04 -03:00
commit 0b3cb389ae
No known key found for this signature in database
GPG key ID: 15EDAD8D9F2EB1AF
6 changed files with 132 additions and 80 deletions

View file

@ -142,13 +142,21 @@ angular.module('copayApp.controllers').controller('buyMercadoLibreController', f
var checkTransaction = lodash.throttle(function(count, dataSrc) {
mercadoLibreService.createGiftCard(dataSrc, function(err, giftCard) {
$log.debug("creating gift card " + count);
if (err || !giftCard.pin) {
if (err) {
$scope.sendStatus = '';
ongoingProcess.set('buyingGiftCard', false, statusChangeHandler);
giftCard = {};
giftCard.status = 'FAILURE';
}
if (giftCard && giftCard.cardStatus && (giftCard.cardStatus != 'active' && giftCard.cardStatus != 'inactive' && giftCard.cardStatus != 'expired')) {
$scope.sendStatus = '';
ongoingProcess.set('buyingGiftCard', false, statusChangeHandler);
giftCard = {};
giftCard.status = 'FAILURE';
}
if (giftCard.status == 'PENDING' && count < 3) {
$log.debug("Waiting for payment confirmation");
checkTransaction(count + 1, dataSrc);

View file

@ -24,18 +24,15 @@ angular.module('copayApp.controllers').controller('mercadoLibreCardsController',
};
$scope.updatePendingGiftCards = lodash.debounce(function() {
$scope.updatingPending = {};
updateGiftCards(function() {
var index = 0;
var gcds = $scope.giftCards;
lodash.forEach(gcds, function(dataFromStorage) {
if (dataFromStorage.status == 'PENDING' || dataFromStorage.status == 'invalid') {
if (dataFromStorage.status == 'PENDING') {
$log.debug("Creating / Updating gift card");
$scope.updatingPending[dataFromStorage.invoiceId] = true;
mercadoLibreService.createGiftCard(dataFromStorage, function(err, giftCard) {
$scope.updatingPending[dataFromStorage.invoiceId] = false;
if (err) {
popupService.showAlert('Error creating gift card', err);
return;
@ -44,6 +41,12 @@ angular.module('copayApp.controllers').controller('mercadoLibreCardsController',
if (giftCard.status != 'PENDING') {
var newData = {};
if (!giftCard.status) dataFromStorage.status = null; // Fix error from server
var cardStatus = giftCard.cardStatus;
if (cardStatus && (cardStatus != 'active' && cardStatus != 'inactive' && cardStatus != 'expired'))
giftCard.status = 'FAILURE';
lodash.merge(newData, dataFromStorage, giftCard);
mercadoLibreService.savePendingGiftCard(newData, null, function(err) {

View file

@ -140,7 +140,7 @@ angular.module('copayApp.services').factory('mercadoLibreService', function($htt
$log.info('Mercado Libre Gift Card Create/Update: ' + status);
return cb(null, data.data);
}, function(data) {
$log.error('Mercado Libre Gift Card Create/Update: ' + data.data.message);
$log.error('Mercado Libre Gift Card Create/Update: ', JSON.stringify(data.data));
return cb(data.data);
});
};

View file

@ -144,3 +144,50 @@
}
}
}
#meli-card {
.card-head {
margin: 20px 0;
text-align: center;
.date {
font-size: 12px;
margin: 10px 0;
}
.amount {
font-size: 16px;
font-weight: bold;
}
}
.card-status {
text-align: center;
margin-bottom: 25px;
.card-status-desc {
margin-top: 5px;
font-size: 12px;
color: $v-text-secondary-color;
}
.redeem-pin {
font-weight: bold;
font-size: 22px;
}
.button-redeem {
margin-top: 10px;
background: transparent;
border: none;
font-size: 12px;
color: $v-text-accent-color;
}
}
.card-remove {
text-align: center;
margin-top: 30px;
.button-remove {
margin-top: 10px;
background: transparent;
border: none;
font-size: 12px;
color: red;
}
}
}

View file

@ -12,19 +12,20 @@
class="item item-avatar"
ng-hide="hideCards">
<img src="img/mercado-libre/icon-ml.svg" alt="{{id}}" width="40">
<ion-spinner class="spinner-dark recent right m10 size-16" icon="crescent" ng-show="updatingPending[item.invoiceId]">
</ion-spinner>
<span class="item-note">
<span class="assertive" ng-if="item.status == 'FAILURE'" translate>Error</span>
<span class="dark" ng-if="item.status == 'expired'" translate>Invoice expired</span>
<span class="calm" ng-if="item.status == 'invalid'" translate>Still pending</span>
<span class="positive" ng-if="item.status == 'PENDING'" translate>Pending</span>
<span class="assertive" ng-if="item.cardStatus == 'inactive'" translate>Inactive</span>
<span class="assertive" ng-if="item.cardStatus == 'expired'" translate>Expired</span>
</span>
<h2 ng-if="item.amount">
{{item.amount | currency : '$ ' : 2}} {{item.currency}}
</h2>
<p>
<span class="assertive" ng-if="item.status == 'FAILURE' || item.status == 'RESEND'">Error</span>
<span class="assertive" ng-if="item.status == 'expired'">Expired</span>
<span class="assertive" ng-if="item.status == 'invalid'">Still waiting confirmation<br> (Use higher fees setting to faster delivery)</span>
<span class="text-gray" ng-if="item.status == 'PENDING'">Pending to confirmation</span>
<span class="assertive" ng-if="item.status == 'SUCCESS' && item.cardStatus == 'Canceled'">Canceled</span>
<span class="text-gray">{{item.date | amTimeAgo}}</span>
</p>
{{item.amount | currency : '' : 2}} {{item.currency}}
</h2>
<p class="dark">{{item.date | amTimeAgo}}</p>
</div>
</div>
</ion-content>

View file

@ -1,82 +1,75 @@
<ion-modal-view ng-controller="mercadoLibreCardDetailsController">
<ion-modal-view id="meli-card" ng-controller="mercadoLibreCardDetailsController">
<ion-header-bar align-title="center" class="bar-royal">
<button class="button button-back button-clear" ng-click="cancel()">
<button class="button button-back button-clear" ng-click="cancel()" translate>
Close
</button>
<h1 class="title">Details</h1>
<h1 class="title" translate>Details</h1>
</ion-header-bar>
<ion-content>
<div class="header-modal text-center">
<img src="img/mercado-libre/giftcard-pt.svg" alt="Mercado Libre Gift Card" width="230" ng-click="refreshGiftCard()">
<div class="card-head">
<img src="img/mercado-libre/giftcard-pt.svg" alt="Mercado Libre Gift Card" width="230" ng-click="refreshGiftCard()">
<div class="m10t">
Gift Card Amount:
<span class="text-bold">
{{card.amount | currency : '$ ' : 2}}
</span>
</div>
<div class="amount">
{{card.amount | currency : '' : 2}} {{card.currency}}
</div>
</div>
<div class="card-status">
<div ng-show="card.cardStatus == 'active'">
<div class="redeem-pin" copy-to-clipboard="card.pin">{{card.pin}}</div>
<button class="button-redeem"
ng-click="openExternalLink('https://www.mercadolivre.com.br/redeem?pin=' + card.pin)" translate>
Redeem Now
</button>
</div>
<div class="m10t">
<span translate>Created</span>
<div ng-show="card.cardStatus == 'inactive'">
<span class="assertive" translate>Inactive</span>
<div class="card-status-desc" translate>Gift Card is not available to use anymore</div>
</div>
<div ng-show="card.cardStatus == 'expired'">
<span class="assertive" translate>Expired</span>
<div class="card-status-desc" translate>Gift Card is not available to use anymore</div>
</div>
<div ng-show="card.status">
<span class="positive" ng-show="card.status == 'PENDING'" translate>
Pending
</span>
<span class="calm" ng-show="card.status=='invalid'" translate>
Still pending
</span>
<span class="assertive" ng-show="card.status == 'FAILURE'" translate>
Error
</span>
<span class="dark" ng-show="card.status == 'expired'" translate>
Invoice expired
</span>
</div>
</div>
<div class="list">
<div class="item">
<span translate>Created</span>
<span class="item-note">
{{card.date | amTimeAgo}}
</div>
<div ng-show="card.pin">
<div ng-show="card.cardStatus !== 'inactive' && card.cardStatus !== 'expired'">
Claim code: <span class="text-bold" copy-to-clipboard="card.pin">{{card.pin}}</span>
</div>
<div class="m10t" ng-show="card.status == 'active'">
<button class="button button-positive"
ng-click="openExternalLink('https://www.mercadolivre.com.br/redeem?pin=' + card.pin)">
Redeem Now
</button>
</div>
<div class="m10t" ng-show="card.cardStatus == 'inactive'">
<div class="m10t">
Status:
<span class="text-bold">
Inactive
</span>
</div>
</div>
</div>
<div ng-show="!card.pin">
<div class="m10t">
Status:
<span class="text-bold" ng-show="card.status == 'PENDING'">
PENDING
</span>
<span class="text-bold" ng-show="card.status=='invalid'">
STILL PENDING
</span>
<span class="text-bold" ng-show="card.status == 'FAILURE' || card.status == 'RESEND'">
FAILURE
</span>
<span class="text-bold" ng-show="card.status == 'expired'">
EXPIRED
</span>
</div>
</div>
<div class="m10t text-center">
<a class="button button-clear button-calm" ng-click="openExternalLink(card.invoiceUrl)">See invoice</a>
</div>
</span>
</div>
<div class="box-notification warning" ng-show="card.status == 'FAILURE' || card.status == 'RESEND'">
There was a failure to the create gift card. Please, contact BitPay support.
<div class="item item-icon-right" ng-click="openExternalLink(card.invoiceUrl)" translate>
<i class="icon bp-arrow-right"></i>
See invoice
</div>
</div>
<div class="list text-center">
<a class="item" ng-show="card.status == 'FAILURE' || card.cardStatus == 'Canceled'
|| card.cardStatus == 'Expired' || card.status == 'expired'" ng-click="remove()">
<span class="assertive">Remove</span>
</a>
</div>
<div class="card-remove" ng-show="card.status == 'FAILURE' || card.cardStatus == 'inactive' || card.cardStatus == 'expired' || card.status == 'expired'">
<button class="button-remove" ng-click="remove()" translate>
Remove
</button>
</div>
</ion-content>
</ion-modal-view>