Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(WIP)(APP-385): BitPay Card intro updates #11943

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

(WIP)(APP-385): BitPay Card intro updates #11943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 39 additions & 10 deletions src/pages/integrations/bitpay-card/bitpay-card-intro/bitpay-card-intro.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
<div class="bitpayCard-item">
<div class="bitpayCard-item-header">
<img src="assets/img/bitpay-card/icon-instant-reloads.svg" />
<div class="bitpayCard-item-title" translate>Instant Reloads*</div>
<div class="bitpayCard-item-title" translate>Instant Reloads<sup>1</sup></div>
</div>
<p>
<span translate>Reload your balance with no conversion fees*.</span>
<span translate>Reload your balance with no conversion fees<sup>1</sup>.</span>
Powered by our competitive <a (click)="openExchangeRates()">exchange rates</a>.
</p>
</div>
Expand All @@ -50,7 +50,7 @@
<img src="assets/img/bitpay-card/icon-worldwide.svg" />
<div class="bitpayCard-item-title" translate>Worldwide</div>
</div>
<p translate>Ready to use in millions of locations around the world with contactless payment, PIN, Google Pay, Apple Pay, or by simply withdrawing cash from any compatible ATM*.</p>
<p translate>Ready to use in millions of locations around the world with contactless payment, PIN, Google Pay, Apple Pay, or by simply withdrawing cash from any compatible ATM<sup>2</sup>.</p>
</div>
<div class="bitpayCard-item">
<div class="bitpayCard-item-header">
Expand All @@ -64,14 +64,43 @@
<div>
<p translate>Shop online or in stores instantly with the virtual BitPay Prepaid Mastercard©, or order your physical card for free today.</p>
</div>
<div class="bitpayCard__agreement">
*Network fees and miner fees may apply.<br>
*Third party fees may apply.<br><br>
BY USING THIS CARD YOU AGREE WITH THE TERMS AND CONDITIONS OF THE CARDHOLDER AGREEMENT AND FEE SCHEDULE, IF ANY. The BitPay Prepaid Mastercard is issued by Metropolitan Commercial Bank (Member FDIC) pursuant to a license from Mastercard International. “Metropolitan Commercial Bank” and “Metropolitan” are registered trademarks of Metropolitan Commercial Bank ©2014.<br><br>
Mastercard is a registered trademark and the circles design is a trademark of Mastercard International Incorporated.
</div>
</div>

<ion-segment mode="md" [(ngModel)]="terms" color="primary">
<ion-segment-button value="limits" mode="md">
<span translate>Limits</span>
</ion-segment-button>
<ion-segment-button value="fees" mode="md">
<span translate>Fees</span>
</ion-segment-button>
</ion-segment>

</div>
<div [ngSwitch]="terms" class="terms-content">
<ion-list no-lines *ngSwitchCase="'limits'" >
<ion-item *ngFor="let limit of limitTerms; let i = index" [ngClass]="{'terms-bg-color': i%2 == 0 }">
<ion-label class="terms-label">{{ limit.title }}</ion-label>
<ion-note class="terms-note" item-end>{{ limit.note }}</ion-note>
</ion-item>
</ion-list>

<ion-list no-lines *ngSwitchCase="'fees'">
<ion-item *ngFor="let fee of feeTerms; let i = index" [ngClass]="{'terms-bg-color': i%2 == 0 }">
<ion-label class="terms-label">{{ fee.title }}</ion-label>
<ion-note class="terms-note" item-end>{{ fee.note }}
<br>
<a class="pointer" *ngIf="fee.linkText" (click)="openExternalLink(fee.linkUrl)">{{fee.linkText}}</a>
</ion-note>
</ion-item>
</ion-list>
</div>

<div class="bitpayCard__agreement">
<span ion-text class="title" color="primary">{{'Privacy Policy' | translate }}</span><br><br><br>
<sup>1</sup> Network fees and miner fees may apply.<br>
<sup>2</sup> Third party fees may apply.<br><br>
BY USING THIS CARD YOU AGREE WITH THE TERMS AND CONDITIONS OF THE CARDHOLDER AGREEMENT AND FEE SCHEDULE, IF ANY. The BitPay Prepaid Mastercard is issued by Metropolitan Commercial Bank (Member FDIC) pursuant to a license from Mastercard International. “Metropolitan Commercial Bank” and “Metropolitan” are registered trademarks of Metropolitan Commercial Bank ©2014.<br><br>
Mastercard is a registered trademark and the circles design is a trademark of Mastercard International Incorporated.
</div>
</ion-content>

<ion-footer *ngIf="ready">
Expand Down
64 changes: 63 additions & 1 deletion src/pages/integrations/bitpay-card/bitpay-card-intro/bitpay-card-intro.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,63 @@ page-bitpay-card-intro {
}
}

ion-segment {
width: 40%;
margin-left: 16px;
margin-top: 50px;
ion-segment-button.segment-activated.segment-button {
border-bottom-width: 1px;
}
.segment-button {
span {
font-size: 18px;
font-weight: 700;
color: #000;
text-transform: none;
}
}
.segment-activated {
span {
color: color($colors, primary);
}
}
}
.terms-content {
border-bottom: 1px solid #f5f7f8;
ion-list {
margin: 0px;
}
ion-item {
padding: 32px 16px;
&.item-ios,
&.item-md {
.item-inner {
padding-right: 0px;
}
}
}
.terms {
&-label {
font-size: 14px;
font-weight: 500;
color: #000;
width: 50%;
text-align: left;
}
&-note {
font-size: 14px;
font-weight: 400;
color: #252525;
margin-right: 0px;
width: 50%;
text-align: right;
}
&-bg-color {
background-color: #f5f7f8;
}
}
}

@keyframes fadein {
from {
transform: translateY(20px);
Expand Down Expand Up @@ -100,9 +157,14 @@ page-bitpay-card-intro {
}
}
&__agreement {
margin: 20px 0 150px 0;
margin: 26px 16px 150px 16px;
font-size: 11px;
color: #434d5a;
.title {
font-size: 14px;
font-weight: 400;
padding-top: 26px;
}
}
&__link-button {
cursor: pointer;
Expand Down
76 changes: 76 additions & 0 deletions src/pages/integrations/bitpay-card/bitpay-card-intro/bitpay-card-intro.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,15 @@ export class BitPayCardIntroPage {
public cardExperimentEnabled: boolean;
public ready: boolean;
public bitPayIdConnected: boolean;
public terms: string = 'limits';
public feeTerms: Array<{
title: string;
note: string;
linkText?: string;
linkUrl?: string;
}>;
public limitTerms: Array<{ title: string; note: string }>;

constructor(
private translate: TranslateService,
private actionSheetCtrl: ActionSheetController,
Expand All @@ -47,6 +56,69 @@ export class BitPayCardIntroPage {
this.persistenceProvider.getCardExperimentFlag().then(status => {
this.cardExperimentEnabled = status === 'enabled';
});

this.limitTerms = [
{
title: this.translate.instant('Cash Withdrawal (ATM & bank teller)'),
note: this.translate.instant(
'$2,000 per withdrawal, 3 withdrawals per day, $25,000 per month'
)
},
{
title: this.translate.instant('Load Limits'),
note: this.translate.instant('$10,000 per day')
},
{
title: this.translate.instant('Spending Limits'),
note: this.translate.instant('$10,000 per day')
},
{
title: this.translate.instant('Maximum Balance'),
note: '$25,000'
}
];

this.feeTerms = [
{
title: this.translate.instant('Virtual Card Issuance and Replacement'),
note: '$0.00'
},
{
title: this.translate.instant('Physical Card Issuance'),
note: '$10.00'
},
{
title: this.translate.instant('Physical Card Replacement'),
note: '$10.00'
},
{
title: this.translate.instant('Monthly Fee'),
note: '$0.00'
},
{
title: this.translate.instant(
'Cash Withdrawal Fee (ATM or Inside Financial Institution) Physical Card Only'
),
note: '$2.50'
},
{
title: this.translate.instant('Card Load'),
note: this.translate.instant('No conversion fee'),
linkText: this.translate.instant('Network and miner fees may apply'),
linkUrl:
'https://support.bitpay.com/hc/en-us/articles/115003393863-What-are-bitcoin-miner-fees-'
},
{
title: this.translate.instant('International Currency Conversion'),
note: '3%'
},
{
title: this.translate.instant('Inactivity Fee'),
note: this.translate.instant(
'$5 per month after 90 days with no transactions'
)
}
];
}

ionViewWillEnter() {
Expand Down Expand Up @@ -236,4 +308,8 @@ export class BitPayCardIntroPage {
});
}
}

public openExternalLink(url: string) {
this.externalLinkProvider.open(url);
}
}
31 changes: 31 additions & 0 deletions src/theme/dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -614,6 +614,37 @@
background-color: $bg-color-dark-theme-2;
}

.terms-content {
border-bottom: 1px solid $bg-color-dark-theme-3;
ion-item {
background-color: $bg-color-dark-theme;
}
.terms {
&-label {
color: $text-color-dark-theme;
}
&-note {
color: $text-color-dark-theme-2;
}
&-bg-color {
background-color: $bg-color-dark-theme-2;
}
}
}

ion-segment {
.segment-button {
span {
color: $text-color-dark-theme-2;
}
}
.segment-activated {
span {
color: color($colors, primary);
}
}
}

.bitpayCard {
&-header {
&-title {
Expand Down