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

Merge pull request #8056 from Gamboster/fix/integrationsViews 

[v4] Fix: integrations views
This commit is contained in:
Gustavo Maximiliano Cortez 2018-02-16 16:07:27 -03:00 committed by GitHub
parent 49f9b74fb1 de3ea7846b
commit e55dfe42d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 203 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/integrations/amazon/amazon-card-details/amazon-card-details.html
View File

@ -1,17 +1,14 @@
<ion-header>
<ion-navbar>
<ion-title>Details</ion-title>
<ion-buttons start>
<button (click)="cancel()" ion-button>
<button (click)="close()" ion-button>
{{'Close' | translate}}
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div class="header-modal">
<img src="assets/img/amazon/a_generic.jpg" alt="Amazon.com Gift Card" (click)="refreshGiftCard()">
@ -69,11 +66,11 @@
</div>
</div>
<div class="box-notification warning" *ngIf="card.status == 'FAILURE' || card.status == 'RESEND'">
<div class="box-notification assertive" *ngIf="card.status == 'FAILURE' || card.status == 'RESEND'">
There was a failure to the create gift card. Please, contact BitPay support.
</div>
<ion-list class="steps" *ngIf="card.claimCode && card.cardStatus == 'Fulfilled'">
<ion-list *ngIf="card.claimCode && card.cardStatus == 'Fulfilled'" class="steps">
<ion-item-divider>To redeem your gift card, follow these steps:</ion-item-divider>
<ion-item>
@ -97,26 +94,20 @@
<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="steps-info">
*
<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 &reg;,
&trade; &amp; &copy; are IP of
<a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>, Inc. or its affiliates. No expiration date or service fees.
</div>
</ion-item>
<button ion-item block *ngIf="card.status == 'FAILURE' || card.cardStatus == 'Canceled' || card.cardStatus == 'Expired' || card.status == 'expired'"
class="button-footer assertive" (click)="remove()">Remove</button>
<button ion-item block *ngIf="card.status == 'SUCCESS' && card.cardStatus == 'Fulfilled'" class="assertive"
(click)="cancelGiftCard()">Cancel</button>
</ion-list>
<div padding class="steps-info">
*
<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 &reg;, &trade;
&amp; &copy; are IP of
<a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>, Inc. or its affiliates. No expiration date or service fees.
</div>
</ion-content>
<button ion-item block text-center *ngIf="card.status == 'FAILURE' || card.cardStatus == 'Canceled' || card.cardStatus == 'Expired' || card.status == 'expired'"
class="button-footer assertive" (click)="remove()">Remove</button>
<button ion-item block text-center *ngIf="card.status == 'SUCCESS' && card.cardStatus == 'Fulfilled'" class="assertive" (click)="cancelGiftCard()">Cancel</button>
</ion-content>

12
src/pages/integrations/amazon/amazon-card-details/amazon-card-details.scss
View File

@ -19,14 +19,14 @@ page-amazon-card-details {
ion-item {
padding: 0px 16px 0px 16px;
}
.steps-info {
font-size: 12px;
white-space: normal;
color: #666;
line-height: 22px;
}
button {
text-align: center;
}
}
.steps-info {
font-size: 12px;
white-space: normal;
color: #666;
line-height: 22px;
}
}

6
src/pages/integrations/amazon/amazon-card-details/amazon-card-details.ts
View File

@ -55,7 +55,7 @@ export class AmazonCardDetailsPage {
this.amazonProvider.savePendingGiftCard(this.card, {
remove: true
}, (err: any) => {
this.cancel();
this.close();
});
}
@ -84,7 +84,7 @@ export class AmazonCardDetailsPage {
this.amazonProvider.savePendingGiftCard(newData, {
remove: true
}, (err: any) => {
this.cancel();
this.close();
});
return;
}
@ -100,7 +100,7 @@ export class AmazonCardDetailsPage {
});
}
public cancel(): void {
public close(): void {
this.viewCtrl.dismiss();
}

139
src/pages/integrations/amazon/amazon.html
View File

@ -1,81 +1,78 @@
<ion-header>
<ion-navbar>
<ion-title>Amazon.com Gift Cards</ion-title>
</ion-navbar>
</ion-header>
<ion-content *ngIf="!giftCards" no-bounce>
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="center-header">
<div class="logo">
<img src="assets/img/amazon/GCs-logo-cllb.png" alt="Amazon.com Gift Card">
<ion-content no-bounce>
<div class="container" *ngIf="!giftCards">
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="description" padding>Gift Cards are only redeemable on Amazon.com (US website). Cards never expire and can be redeemed towards millions of
items.
</div>
<div *ngIf="!showOauthForm">
<button ion-button outline block (click)="goTo('Amount')" no-low-fee>Buy a Gift Card</button>
<button ion-button clear small block color="dark" (click)="openExternalLink('https://www.amazon.com')">Visit Amazon.com &rarr;</button>
</div>
</div>
</ion-content>
<ion-content *ngIf="giftCards" no-bounce>
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="integration-giftCard-logo">
<img src="assets/img/amazon/GCs-logo-cllb.png" alt="Amazon.com Gift Card">
<div class="subtitle">
<b>Only</b> redeemable on www.amazon.com (US website).
</div>
<button color="dark" ion-button clear icon-right no-low-fee (click)="goTo('Amount')">
Buy Gift Card
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<ion-list>
<ion-item-divider>Your cards</ion-item-divider>
<button ion-item *ngFor="let item of (giftCards | keys : 'date') | orderBy : ['-order']" (click)="openCardModal(item.value)">
<div class="amazon-card">
<img src="assets/img/amazon/a-smile_color_btn.png" alt="" class="avatar">
<div class="card-info">
<h2 *ngIf="item.value.amount">
{{item.value.amount | currency : '$ ' : 2}} {{item.value.currency}}
</h2>
<p>
<span class="text-gray">{{item.value.date | amTimeAgo}}</span>
<span *ngIf="updatingPending[item.value.invoiceId]">...</span>
<span *ngIf="!updatingPending[item.value.invoiceId]">
<span class="assertive" *ngIf="item.value.status == 'FAILURE' || item.value.status == 'RESEND'">Error</span>
<span class="assertive" *ngIf="item.value.status == 'expired'">Expired</span>
<span class="assertive" *ngIf="item.value.status == 'invalid'">Still waiting confirmation
(Use higher fees setting to faster delivery)
</span>
<span class="text-gray" *ngIf="item.value.status == 'PENDING'">Pending to confirmation</span>
<span class="assertive" *ngIf="item.value.status == 'SUCCESS' && item.value.cardStatus == 'Canceled'">Canceled</span>
</span>
</p>
</div>
<div class="center-header">
<div class="logo">
<img src="assets/img/amazon/GCs-logo-cllb.png" alt="Amazon.com Gift Card">
</div>
</button>
<ion-item-divider></ion-item-divider>
</ion-list>
<div *ngIf="giftCards" class="integration-giftCard-info">
*
<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 &reg;, &trade;
&amp; &copy; are IP of
<a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>, Inc. or its affiliates. No expiration date or service fees.
<div class="description" padding>Gift Cards are only redeemable on Amazon.com (US website). Cards never expire and can be redeemed towards millions
of items.
</div>
<div *ngIf="!showOauthForm">
<button ion-button outline block (click)="goTo('Amount')" no-low-fee>Buy a Gift Card</button>
<button ion-button clear small block color="dark" (click)="openExternalLink('https://www.amazon.com')">Visit Amazon.com &rarr;</button>
</div>
</div>
</div>
</ion-content>
<div class="container" *ngIf="giftCards">
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="integration-giftCard-logo">
<img src="assets/img/amazon/GCs-logo-cllb.png" alt="Amazon.com Gift Card">
<div class="subtitle">
<b>Only</b> redeemable on www.amazon.com (US website).
</div>
<button color="dark" ion-button clear icon-right no-low-fee (click)="goTo('Amount')">
Buy Gift Card
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<ion-list>
<ion-item-divider>Your cards</ion-item-divider>
<button ion-item *ngFor="let item of (giftCards | keys : 'date') | orderBy : ['-order']" (click)="openCardModal(item.value)">
<div class="amazon-card">
<img src="assets/img/amazon/a-smile_color_btn.png" alt="" class="avatar">
<div class="card-info">
<h2 *ngIf="item.value.amount">
{{item.value.amount | currency : '$ ' : 2}} {{item.value.currency}}
</h2>
<p>
<span class="text-gray">{{item.value.date | amTimeAgo}}</span>
<span *ngIf="updatingPending[item.value.invoiceId]">...</span>
<span *ngIf="!updatingPending[item.value.invoiceId]">
<span class="assertive" *ngIf="item.value.status == 'FAILURE' || item.value.status == 'RESEND'">Error</span>
<span class="assertive" *ngIf="item.value.status == 'expired'">Expired</span>
<span class="assertive" *ngIf="item.value.status == 'invalid'">Still waiting confirmation (Use higher fees setting to faster delivery)
</span>
<span class="text-gray" *ngIf="item.value.status == 'PENDING'">Pending to confirmation</span>
<span class="assertive" *ngIf="item.value.status == 'SUCCESS' && item.value.cardStatus == 'Canceled'">Canceled</span>
</span>
</p>
</div>
</div>
</button>
<ion-item-divider></ion-item-divider>
</ion-list>
<div *ngIf="giftCards" class="integration-giftCard-info">
*
<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 &reg;, &trade;
&amp; &copy; are IP of
<a (click)="openExternalLink('http://amazon.com')">Amazon.com</a>, Inc. or its affiliates. No expiration date or service fees.
</div>
</div>
</ion-content>

3
src/pages/integrations/amazon/amazon.scss
View File

@ -3,6 +3,9 @@ page-amazon {
background: #f4a460;
margin: 0rem;
}
.container {
height: 100%;
}
.center-header {
height: 100%;
display: flex;

117
src/pages/integrations/mercado-libre/mercado-libre.html
View File

@ -1,67 +1,66 @@
<ion-header>
<ion-navbar>
<ion-title>{{'Mercado Livre Brazil Gift Cards'|translate}}s</ion-title>
</ion-navbar>
</ion-header>
<ion-content *ngIf="!giftCards" no-bounce>
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="center-header">
<div class="logo">
<img src="assets/img/mercado-libre/mlbr.svg" alt="Mercado Libre">
<ion-content no-bounce>
<div class="container" *ngIf="!giftCards">
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="description" translate padding>
<b>Only</b> redeemable on Mercado Livre (Brazil)
</div>
<div *ngIf="!showOauthForm">
<button ion-button outline block (click)="goTo('Amount')" no-low-fee translate>Buy a Gift Card</button>
<button ion-button clear small block color="dark" (click)="openExternalLink('https://www.mercadolivre.com.br')" translate>Visit mercadolivre.com.br &rarr;</button>
</div>
</div>
</ion-content>
<ion-content *ngIf="giftCards" no-bounce>
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="integration-giftCard-logo">
<img src="assets/img/mercado-libre/mlbr.svg" alt="Mercado Libre">
<div class="subtitle" translate>
<b>Only</b> redeemable on Mercado Livre (Brazil)
</div>
<button color="dark" ion-button clear icon-right no-low-fee (click)="goTo('Amount')">
<span translate>Buy Gift Card</span>
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<ion-list>
<ion-item-divider>{{'Your Gift Cards'|translate}}</ion-item-divider>
<button ion-item *ngFor="let item of (giftCards | keys : 'date') | orderBy : ['-order']" (click)="openCardModal(item.value)">
<div class="mercado-libre-card">
<img src="assets/img/mercado-libre/meli-card-24px.png" alt="" class="avatar">
<div class="card-info">
<div class="amount">
<h2 *ngIf="item.value.amount">
{{item.value.amount | currency : '$ ' : 2}} {{item.value.currency}}
</h2>
<span>
<span class="assertive" *ngIf="item.value.status == 'FAILURE'">Error</span>
<span class="dark" *ngIf="item.value.status == 'expired'">Invoice expired</span>
<span class="calm" *ngIf="item.value.status == 'invalid'">Still pending</span>
<span class="positive" *ngIf="item.value.status == 'PENDING'">Pending</span>
<span class="assertive" *ngIf="item.value.cardStatus == 'inactive'" translate>Inactive</span>
<span class="assertive" *ngIf="item.value.cardStatus == 'expired'" translate>Expired</span>
</span>
</div>
<span class="dark">{{item.value.date | amTimeAgo}}</span>
</div>
<div class="center-header">
<div class="logo">
<img src="assets/img/mercado-libre/mlbr.svg" alt="Mercado Libre">
</div>
</button>
</ion-list>
</ion-content>
<div class="description" translate padding>
<b>Only</b> redeemable on Mercado Livre (Brazil)
</div>
<div *ngIf="!showOauthForm">
<button ion-button outline block (click)="goTo('Amount')" no-low-fee translate>Buy a Gift Card</button>
<button ion-button clear small block color="dark" (click)="openExternalLink('https://www.mercadolivre.com.br')" translate>Visit mercadolivre.com.br &rarr;</button>
</div>
</div>
</div>
<div class="container" *ngIf="giftCards">
<div class="box-notification warning" *ngIf="network == 'testnet'">
Sandbox version. Only for testing purpose.
</div>
<div class="integration-giftCard-logo">
<img src="assets/img/mercado-libre/mlbr.svg" alt="Mercado Libre">
<div class="subtitle" translate>
<b>Only</b> redeemable on Mercado Livre (Brazil)
</div>
<button color="dark" ion-button clear icon-right no-low-fee (click)="goTo('Amount')">
<span translate>Buy Gift Card</span>
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<ion-list>
<ion-item-divider>{{'Your Gift Cards'|translate}}</ion-item-divider>
<button ion-item *ngFor="let item of (giftCards | keys : 'date') | orderBy : ['-order']" (click)="openCardModal(item.value)">
<div class="mercado-libre-card">
<img src="assets/img/mercado-libre/meli-card-24px.png" alt="" class="avatar">
<div class="card-info">
<div class="amount">
<h2 *ngIf="item.value.amount">
{{item.value.amount | currency : '$ ' : 2}} {{item.value.currency}}
</h2>
<span>
<span class="assertive" *ngIf="item.value.status == 'FAILURE'">Error</span>
<span class="dark" *ngIf="item.value.status == 'expired'">Invoice expired</span>
<span class="calm" *ngIf="item.value.status == 'invalid'">Still pending</span>
<span class="positive" *ngIf="item.value.status == 'PENDING'">Pending</span>
<span class="assertive" *ngIf="item.value.cardStatus == 'inactive'" translate>Inactive</span>
<span class="assertive" *ngIf="item.value.cardStatus == 'expired'" translate>Expired</span>
</span>
</div>
<span class="dark">{{item.value.date | amTimeAgo}}</span>
</div>
</div>
</button>
</ion-list>
</div>
</ion-content>

4
src/pages/integrations/mercado-libre/mercado-libre.scss
View File

@ -3,7 +3,9 @@ page-mercado-libre {
background: #ffc900;
margin: 0rem;
}
.container {
height: 100%;
}
.center-header {
height: 100%;
display: flex;

2
src/pages/integrations/shapeshift/shapeshift-details/shapeshift-details.ts
View File

@ -32,7 +32,7 @@ export class ShapeshiftDetailsPage {
this.shapeshiftProvider.saveShapeshift(this.ssData, {
remove: true
}, function (err) {
this.cancel();
this.close();
});
}

82
src/pages/integrations/shapeshift/shapeshift.html
View File

@ -4,47 +4,47 @@
</ion-navbar>
</ion-header>
<ion-content *ngIf="!shifts.data" no-bounce>
<div class="center-header">
<img src="assets/img/shapeshift/logo-shapeshift.svg" width="200" alt="Shapeshift">
<div padding>
<h4>The Safest, Fastest Asset Exchange on Earth</h4>
<p>Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.</p>
</div>
<button ion-button outline no-low-fee (click)="goTo('Shift')">Start</button>
<button ion-button clear small color="light" (click)="openExternalLink('https://shapeshift.io')">Visit Shapeshift.io &rarr;</button>
</div>
</ion-content>
<ion-content *ngIf="shifts.data" no-bounce>
<div class="main-header">
<img src="assets/img/shapeshift/logo-shapeshift.svg" width="180" (click)="update()">
<button ion-button clear icon-right no-low-fee (click)="goTo('Shift')">
Shift
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<ion-list>
<ion-item-divider>Transactions</ion-item-divider>
<button ion-item *ngFor="let item of shifts.data | keys" (click)="openShiftModal(item.value)">
<ion-label>
<div class="ellipsis">{{item.value.title || item.value.address}}</div>
<div class="status">
<span class="assertive" *ngIf="item.value.status == 'failed'">Failed</span>
<span class="balanced" *ngIf="item.value.status == 'complete'">Completed</span>
<span class="royal" *ngIf="item.value.status == 'received'">Pending</span>
<span class="calm" *ngIf="item.value.status == 'no_deposits'">Pending</span>
</div>
</ion-label>
<div item-content text-end>
<div class="text-bold">{{ item.value.amount }}</div>
<div class="date calm">{{item.value.date | amTimeAgo}}</div>
<ion-content no-bounce>
<div class="container" *ngIf="!shifts.data">
<div class="center-header">
<img src="assets/img/shapeshift/logo-shapeshift.svg" width="200" alt="Shapeshift">
<div padding>
<h4>The Safest, Fastest Asset Exchange on Earth</h4>
<p>Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.</p>
</div>
</button>
</ion-list>
<button ion-button outline no-low-fee (click)="goTo('Shift')">Start</button>
<button ion-button clear small color="light" (click)="openExternalLink('https://shapeshift.io')">Visit Shapeshift.io &rarr;</button>
</div>
</div>
<div class="container" *ngIf="shifts.data">
<div class="main-header">
<img src="assets/img/shapeshift/logo-shapeshift.svg" width="180" (click)="update()">
<button ion-button clear icon-right no-low-fee (click)="goTo('Shift')">
Shift
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<ion-list>
<ion-item-divider>Transactions</ion-item-divider>
<button ion-item *ngFor="let item of shifts.data | keys" (click)="openShiftModal(item.value)">
<ion-label>
<div class="ellipsis">{{item.value.title || item.value.address}}</div>
<div class="status">
<span class="assertive" *ngIf="item.value.status == 'failed'">Failed</span>
<span class="balanced" *ngIf="item.value.status == 'complete'">Completed</span>
<span class="royal" *ngIf="item.value.status == 'received'">Pending</span>
<span class="calm" *ngIf="item.value.status == 'no_deposits'">Pending</span>
</div>
</ion-label>
<div item-content text-end>
<div class="text-bold">{{ item.value.amount }}</div>
<div class="date calm">{{item.value.date | amTimeAgo}}</div>
</div>
</button>
</ion-list>
</div>
</ion-content>
<ion-footer *ngIf="shifts.data" class="shift-problems">
@ -52,4 +52,4 @@
<a (click)="openExternalLink('https://shapeshift.zendesk.com/hc/en-us/requests/new')">
Contact the ShapeShift support team.
</a>
</ion-footer>
</ion-footer>

3
src/pages/integrations/shapeshift/shapeshift.scss
View File

@ -1,4 +1,7 @@
page-shapeshift {
.container {
height: 100%;
}
.center-header {
h4 {
color: color($colors, light);