mirror of https://github.com/BTCPrivate/copay.git
Feat: amazon card details modal
This commit is contained in:
Gabriel Masclef
parent
eb77b7648f
commit
dbbd624eab
|
|
@ -1,11 +1,11 @@
|
|||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>amazon-card-details</ion-title>
|
||||
<ion-title>Details</ion-title>
|
||||
<ion-buttons start>
|
||||
<button (click)="goBack()" ion-button icon-only>
|
||||
<ion-icon name="arrow-back"></ion-icon>
|
||||
</button>
|
||||
<button (click)="cancel()" ion-button>
|
||||
Close
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
|
||||
|
|
@ -13,5 +13,96 @@
|
|||
|
||||
|
||||
<ion-content>
|
||||
<div class="header-modal">
|
||||
<img src="assets/img/amazon/a_generic.jpg" alt="Amazon.com Gift Card" (click)="refreshGiftCard()">
|
||||
<div class="header-modal-amount">
|
||||
Gift Card Amount:
|
||||
<span class="text-bold">
|
||||
{{card.amount | currency : '$ ' : 2}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
Created {{card.date | amTimeAgo}}
|
||||
</div>
|
||||
|
||||
<div *ngIf="card.claimCode">
|
||||
<div *ngIf="card.cardStatus !== 'Canceled'">
|
||||
Claim code: <span class="text-bold" copy-to-clipboard="card.claimCode">{{card.claimCode}}</span>
|
||||
</div>
|
||||
<div *ngIf="card.cardStatus == 'Fulfilled'">
|
||||
<button ion-button (click)="openExternalLink('https://www.amazon.com/gc/redeem?claimCode=' + card.claimCode)">
|
||||
Redeem Now
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="card.cardStatus == 'Canceled'">
|
||||
<div>
|
||||
Status:
|
||||
<span class="text-bold">
|
||||
CANCELED
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!card.claimCode">
|
||||
<div>
|
||||
Status:
|
||||
<span class="text-bold" *ngIf="card.status == 'PENDING'">
|
||||
PENDING
|
||||
</span>
|
||||
<span class="text-bold" *ngIf="card.status=='invalid'">
|
||||
STILL PENDING
|
||||
</span>
|
||||
<span class="text-bold" *ngIf="card.status == 'FAILURE' || card.status == 'RESEND'">
|
||||
FAILURE
|
||||
</span>
|
||||
<span class="text-bold" *ngIf="card.status == 'expired'">
|
||||
EXPIRED
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice">
|
||||
<a class="button button-clear button-calm" (click)="openExternalLink(card.invoiceUrl)">See invoice</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-notification warning" *ngIf="card.status == 'FAILURE' || card.status == 'RESEND'">
|
||||
There was a failure to the create gift card. Please, contact BitPay support.
|
||||
</div>
|
||||
|
||||
<div class="oh m20t size-12 p15h" *ngIf="card.claimCode && card.cardStatus == 'Fulfilled'">
|
||||
To redeem your gift card, follow these steps:
|
||||
|
||||
<ol class="m10t size-12">
|
||||
<li>1. Visit <a (click)="openExternalLink('https://www.amazon.com/gc')">www.amazon.com/gc</a>
|
||||
<li>2. Click Apply to Account and enter the Claim Code when prompted.
|
||||
<li>3. Gift card funds will be applied automatically to eligible orders during the checkout process.
|
||||
<li>4. You must pay for any remaining balance on your order with another payment method.
|
||||
</ol>
|
||||
|
||||
<p class="size-12">
|
||||
Your gift card claim code may also be entered when prompted during checkout. To redeem your gift card using the Amazon.com
|
||||
1-Click® service, first add the gift card funds to Your Account.
|
||||
</p>
|
||||
|
||||
<p class="size-12">
|
||||
If you have questions about redeeming your gift card, please visit
|
||||
<a (click)="openExternalLink('https://www.amazon.com/gc-redeem')">www.amazon.com/gc-redeem</a>. If you have questions
|
||||
regarding the BitPay Introductory offer, please contact BitPay.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="size-12 p15 m30v">
|
||||
* <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> is not a sponsor of this promotion. Except as required
|
||||
by law, <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> Gift Cards ("GCs") cannot be transferred for
|
||||
value or redeemed for cash. GCs may be used only for purchases of eligible goods at <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a> or certain of its affiliated websites. For complete terms and conditions, see
|
||||
<a (click)="openExternalLink('https://www.amazon.com/gc-legal')">www.amazon.com/gc-legal</a>. GCs are issued by ACI Gift
|
||||
Cards, Inc., a Washington corporation. All Amazon ®, ™ & © are IP of <a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>,
|
||||
Inc. or its affiliates. No expiration date or service fees.
|
||||
</div>
|
||||
|
||||
<button ion-button block *ngIf="card.status == 'FAILURE' || card.cardStatus == 'Canceled' || card.cardStatus == 'Expired' || card.status == 'expired'"
|
||||
class="button-footer assertive" (click)="remove()">Remove</button>
|
||||
<button ion-button block *ngIf="card.status == 'SUCCESS' && card.cardStatus == 'Fulfilled'" class="button-footer assertive"
|
||||
(click)="cancelGiftCard()">Cancel</button>
|
||||
</ion-content>
|
||||
|
|
@ -1,3 +1,17 @@
|
|||
page-amazon-card-details {
|
||||
|
||||
.scroll-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
.header-modal {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 230px;
|
||||
}
|
||||
&-amount {
|
||||
padding: 1rem;
|
||||
}
|
||||
.invoice {
|
||||
margin: 2rem 0 5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ViewController } from 'ionic-angular';
|
||||
import { NavParams, ViewController } from 'ionic-angular';
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
// Provider
|
||||
import { AmazonProvider } from '../../../../providers/amazon/amazon';
|
||||
import { BwcErrorProvider } from '../../../../providers/bwc-error/bwc-error';
|
||||
import { ExternalLinkProvider } from '../../../../providers/external-link/external-link';
|
||||
import { OnGoingProcessProvider } from "../../../../providers/on-going-process/on-going-process";
|
||||
import { PopupProvider } from '../../../../providers/popup/popup';
|
||||
|
||||
@Component({
|
||||
selector: 'page-amazon-card-details',
|
||||
|
|
@ -8,18 +16,91 @@ import { Logger } from '@nsalaun/ng-logger';
|
|||
})
|
||||
export class AmazonCardDetailsPage {
|
||||
|
||||
public card: any;
|
||||
|
||||
constructor(
|
||||
private amazonProvider: AmazonProvider,
|
||||
private bwcErrorProvider: BwcErrorProvider,
|
||||
private logger: Logger,
|
||||
private externalLinkProvider: ExternalLinkProvider,
|
||||
private navParams: NavParams,
|
||||
private onGoingProcessProvider: OnGoingProcessProvider,
|
||||
private popupProvider: PopupProvider,
|
||||
private viewCtrl: ViewController
|
||||
) {
|
||||
this.card = this.navParams.data.card;
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.logger.info('ionViewDidLoad AmazonCardDetailsPage');
|
||||
}
|
||||
|
||||
public goBack(): void {
|
||||
this.viewCtrl.dismiss();
|
||||
public cancelGiftCard(): void {
|
||||
this.onGoingProcessProvider.set('cancelingGiftCard', true);
|
||||
this.amazonProvider.cancelGiftCard(this.card, (err: any, data: any) => {
|
||||
this.onGoingProcessProvider.set('cancelingGiftCard', false);
|
||||
if (err) {
|
||||
this.popupProvider.ionicAlert('Error canceling gift card', this.bwcErrorProvider.msg(err));
|
||||
return;
|
||||
}
|
||||
this.card.cardStatus = data.cardStatus;
|
||||
this.amazonProvider.savePendingGiftCard(this.card, null, (err: any) => {
|
||||
this.refreshGiftCard();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public remove(): void {
|
||||
this.amazonProvider.savePendingGiftCard(this.card, {
|
||||
remove: true
|
||||
}, (err: any) => {
|
||||
this.cancel();
|
||||
});
|
||||
}
|
||||
|
||||
public refreshGiftCard(): void {
|
||||
this.onGoingProcessProvider.set('updatingGiftCard', true);
|
||||
this.amazonProvider.getPendingGiftCards((err: any, gcds: any) => {
|
||||
if (_.isEmpty(gcds)) {
|
||||
this.onGoingProcessProvider.set('updatingGiftCard', false);
|
||||
}
|
||||
if (err) {
|
||||
this.popupProvider.ionicAlert('Error', err);
|
||||
return;
|
||||
}
|
||||
var index = 0;
|
||||
_.forEach(gcds, function (dataFromStorage) {
|
||||
if (++index == Object.keys(gcds).length) {
|
||||
this.onGoingProcessProvider.set('updatingGiftCard', false);
|
||||
}
|
||||
if (dataFromStorage.status == 'PENDING' && dataFromStorage.invoiceId == this.card.invoiceId) {
|
||||
this.logger.debug("creating gift card");
|
||||
this.amazonProvider.createGiftCard(dataFromStorage, (err: any, giftCard: any) => {
|
||||
if (err) {
|
||||
this.popupProvider.ionicAlert('Error', this.bwcErrorProvider.msg(err));
|
||||
return;
|
||||
}
|
||||
if (!_.isEmpty(giftCard)) {
|
||||
var newData = {};
|
||||
_.merge(newData, dataFromStorage, giftCard);
|
||||
this.amazonProvider.savePendingGiftCard(newData, null, (err: any) => {
|
||||
this.logger.debug("Saving new gift card");
|
||||
this.card = newData;
|
||||
});
|
||||
} else this.logger.debug("pending gift card not available yet");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public cancel(): void {
|
||||
this.viewCtrl.dismiss();
|
||||
};
|
||||
|
||||
public openExternalLink(url: string): void {
|
||||
this.externalLinkProvider.open(url);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ export class AmazonCardsPage {
|
|||
public openCardModal(card: any): void {
|
||||
this.card = card;
|
||||
|
||||
let modal = this.modalCtrl.create(AmazonCardDetailsPage);
|
||||
let modal = this.modalCtrl.create(AmazonCardDetailsPage, { card: this.card });
|
||||
modal.present();
|
||||
|
||||
modal.onDidDismiss(() => {
|
||||
|
|
|
|||
|
|
@ -39,14 +39,14 @@
|
|||
<ion-card-content>
|
||||
<ion-list>
|
||||
<button ion-item (click)="goTo('Amount')">
|
||||
<!-- TODO: no-low-fee -->
|
||||
<ion-icon name="ios-pricetags-outline"></ion-icon>
|
||||
<span>Buy Gift Card</span>
|
||||
</button>
|
||||
<!-- TODO: no-low-fee -->
|
||||
<ion-icon name="ios-pricetags-outline"></ion-icon>
|
||||
<span>Buy Gift Card</span>
|
||||
</button>
|
||||
<button ion-item (click)="goTo('AmazonCards')">
|
||||
<ion-icon name="ios-folder-outline"></ion-icon>
|
||||
Your cards
|
||||
</button>
|
||||
<ion-icon name="ios-folder-outline"></ion-icon>
|
||||
Your cards
|
||||
</button>
|
||||
</ion-list>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
|
|
|||
|
|
@ -98,6 +98,10 @@ $global-colors: (
|
|||
.text-gray {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
/*
|
||||
* Wallet selector
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue