anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #620 from bitjson/feature/improve-card-integration

Browse source 
Improve card pairing flow
This commit is contained in:
Gustavo Maximiliano Cortez 2016-10-21 01:21:21 -03:00 • committed by GitHub
commit 7918d15e71
4 changed files with 56 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/js/controllers/bitpayCardIntro.js
View file

@ -27,9 +27,9 @@ angular.module('copayApp.controllers').controller('bitpayCardIntroController', f
popupService.showAlert(null, err); popupService.showAlert(null, err);
return; return;
} }
var title = gettextCatalog.getString('Add BitPay Card?'); var title = gettextCatalog.getString('Add BitPay Card Account?');
var msg = gettextCatalog.getString('Would you like to add this account ({{email}}) to your wallet?', {email: obj.email}); var msg = gettextCatalog.getString('Would you like to add this account ({{email}}) to your wallet?', {email: obj.email});
var ok = gettextCatalog.getString('Add cards'); var ok = gettextCatalog.getString('Add Account');
var cancel = gettextCatalog.getString('Go back'); var cancel = gettextCatalog.getString('Go back');
popupService.showConfirm(title, msg, ok, cancel, function(res) { popupService.showConfirm(title, msg, ok, cancel, function(res) {
if (res) { if (res) {
@ -59,14 +59,18 @@ angular.module('copayApp.controllers').controller('bitpayCardIntroController', f
} }
}); });
$scope.bitPayCardInfo = function() {
var url = 'https://bitpay.com/visa/faq';
externalLinkService.open(url);
};
$scope.orderBitPayCard = function() { $scope.orderBitPayCard = function() {
var url = 'https://bitpay.com/visa/'; var url = 'https://bitpay.com/visa/get-started';
externalLinkService.open(url); externalLinkService.open(url);
}; };
$scope.connectBitPayCard = function() { $scope.connectBitPayCard = function() {
var url = 'https://bitpay.com/visa/login'; var url = 'https://bitpay.com/visa/dashboard/add-to-bitpay-wallet-confirm';
externalLinkService.open(url); externalLinkService.open(url);
}; };
}); });

79
src/sass/views/bitpayCardIntro.scss
View file

@ -1,70 +1,55 @@
#bitpayCard-intro { #bitpayCard-intro {
.slider-pager .slider-pager-page { background: url(../img/onboarding-welcome-bg.png), linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
color: #fff; background-position: top center;
} background-size: contain;
.cta-button{ background-repeat: no-repeat;
color: #fff;
.cta-button {
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 55px; bottom: 55px;
padding: 0 1.5rem; padding: 0 1.5rem;
width: 100%; width: 100%;
} }
background: rgba(30, 49, 134, 1);
background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
color: #fff; color: #fff;
height: 100%; height: 100%;
.bar.bar-header { .bar.bar-header {
background: rgb(30, 49, 134); background: transparent none;
color: #fff; border: 0 none transparent;
button {
color: #fff;
}
.secondary-buttons {
button {
color: rgba(255, 255, 255, .5);
}
}
} }
.bar.bar-stable{ .bar.bar-stable{
border-color: transparent; border-color: transparent;
border:none; border:none;
} }
.button-transparent{ .bitpayCard {
background: none !important; &__illustration {
} padding: 2rem;
.button-translucent{ &__img {
background: rgba(215, 215, 215, 0.1) width: 100%;
} max-width: 400px;
.button-primary{ }
background: rgb(100, 124, 232) !important; }
color:#fff; &__info:before {
} font-size: 22px;
.light-blue{ line-height: 22px;
color:rgb(100, 124, 232); margin-top: 6px;
} }
.text-white{
color: #ffffff;
} }
ion-content { ion-content {
background: url(../img/onboarding-welcome-bg.png);
background-position: top center;
background-size: contain;
background-repeat: repeat-x;
height: 100%; height: 100%;
.scroll{ .scroll{
height: 100%; height: 100%;
} }
color: #fff; }
p { .slider__text {
text-align: center; text-align: center;
margin: 40px 20px; margin: 40px 20px;
font-size: 1.2rem; font-size: 1rem;
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .7);
} }
.slider-pager .slider-pager-page {
color: $soft-blue;
font-size: 8px;
margin: 0;
} }
} }

4
www/views/add.html
View file

@ -11,7 +11,7 @@
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" class="bg"/> <img src="img/icon-wallet.svg" class="bg"/>
</i> </i>
<span class="add-type" translate>New Personal Wallet</h2> <span class="add-type" translate>New personal wallet</h2>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
@ -19,7 +19,7 @@
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" class="bg"/> <img src="img/icon-wallet.svg" class="bg"/>
</i> </i>
<span class="add-type" translate>Create Shared Wallet</h2> <span class="add-type" translate>Create shared wallet</h2>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>

29
www/views/bitpayCardIntro.html
View file

@ -1,43 +1,40 @@
<ion-view id="bitpayCard-intro" hide-tabs> <ion-view id="bitpayCard-intro" class="onboarding" hide-tabs>
<ion-nav-bar class="bar-stable"> <ion-nav-bar>
<ion-nav-back-button> <ion-nav-back-button>
</ion-nav-back-button> </ion-nav-back-button>
<ion-nav-title></ion-nav-title> <ion-nav-title></ion-nav-title>
<ion-nav-buttons side="secondary"> <ion-nav-buttons side="secondary">
<button class="button back-button button-clear" ng-click="orderBitPayCard()"> <button class="button button-clear" ng-click="bitPayCardInfo()">
<i class="icon ion-ios-information-outline"></i> <i class="icon ion-ios-information-outline bitpayCard__info"></i>
</button> </button>
</ion-nav-buttons> </ion-nav-buttons>
</ion-nav-bar> </ion-nav-bar>
<ion-content scroll="false"> <ion-content scroll="false">
<div class="text-center padding"> <div class="bitpayCard__illustration">
<img src="img/bitpay-card-visa.svg" width="100%"> <img class="bitpayCard__illustration__img" src="img/bitpay-card-visa.svg">
</div> </div>
<ion-slide-box> <ion-slide-box>
<ion-slide> <ion-slide>
<p translate> <p class="slider__text" translate>
Turn bitcoin into dollars, swipe anywhere Visa&reg; is accepted. Turn bitcoin into dollars, swipe anywhere Visa<sup>&reg;</sup> is accepted.
</p> </p>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<p translate> <p class="slider__text" translate>
<span translate>Get local cash anywhere you go, from any Visa&reg;-compatible ATM.</span> <span translate>Get local cash anywhere you go, from any Visa<sup>&reg;</sup> compatible ATM. ATM bank fees may apply.</span>
<div translate class="size-10 text-center">
*ATM bank fees may apply
</div>
</p> </p>
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<p translate> <p class="slider__text" translate>
Pay 0% fees to turn bitcoin into dollars. Pay 0% fees to turn bitcoin into dollars.
</p> </p>
</ion-slide> </ion-slide>
</ion-slide-box> </ion-slide-box>
<div class="cta-button"> <div class="cta-button">
<button class="button button-block button-primary" ng-click="orderBitPayCard()" translate> <button class="button button-standard button-primary" ng-click="orderBitPayCard()" translate>
Order the BitPay Card Order the BitPay Card
</button> </button>
<button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate> <button class="button button-standard button-secondary button-clear" ng-click="connectBitPayCard()" translate>
Connect my BitPay Card Connect my BitPay Card
</button> </button>
</div> </div>