BitPay Card Intro (slides)

public/views/bitpayCardIntro.html

@@ -0,0 +1,74 @@
+<ion-view id="bitpayCard-intro">
+  <ion-nav-bar class="bar-stable">
+    <ion-nav-title></ion-nav-title>
+    <ion-nav-buttons side="primary">
+      <button class="button back-button button-clear" ng-click="goBack()">
+        <i class="icon ion-ios-arrow-thin-left"></i>
+      </button>
+    </ion-nav-buttons>
+    <ion-nav-buttons side="secondary">
+      <button class="button back-button button-clear" ng-click="openExternalInfo()">
+        <i class="icon ion-ios-information-outline"></i>
+      </button>
+    </ion-nav-buttons>
+  </ion-nav-bar>
+  <ion-slides class="slides" options="options" slider="data.slider">
+    <ion-slide-page>
+      <ion-content scroll="false">
+        <div class="text-center">
+          <img src="img/bitpay-card-visa.svg" width="200">
+        </div>
+        <p translate>
+          Turn bitcoin into dollars, swipe anywhere Visa&reg; is accepted.
+        </p>
+        <div class="cta-button">
+          <button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
+            Order the BitPay Card
+          </button>
+          <button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
+            Connect my BitPay Card
+          </button>
+        </div>
+      </ion-content>
+    </ion-slide-page>
+    <ion-slide-page>
+      <ion-content scroll="false">
+        <div class="text-center">
+          <img src="img/bitpay-card-visa.svg" width="200">
+        </div>
+        <p translate>
+          <span translate>Get local cash anywhere you go, from any Visa&reg;-compatible ATM.</span>
+          <div translate class="size-10 m20t text-center">
+            *ATM bank fees may apply
+          </div>
+        </p>
+        <div class="cta-button">
+          <button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
+            Order the BitPay Card
+          </button>
+          <button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
+            Connect my BitPay Card
+          </button>
+        </div>
+      </ion-content>
+    </ion-slide-page>
+    <ion-slide-page>
+      <ion-content scroll="false">
+        <div class="text-center">
+          <img src="img/bitpay-card-visa.svg" width="200">
+        </div>
+        <p translate>
+          Pay 0% fees to turn bitcoin into dollars.
+        </p>
+        <div class="cta-button">
+          <button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
+            Order the BitPay Card
+          </button>
+          <button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
+            Connect my BitPay Card
+          </button>
+        </div>
+      </ion-content>
+    </ion-slide-page>
+  </ion-slides>
+</ion-view>

src/js/controllers/bitpayCardIntro.js

@@ -0,0 +1,57 @@
+'use strict';
+angular.module('copayApp.controllers').controller('bitpayCardIntroController', function($scope, $state, $timeout, $ionicHistory, storageService, externalLinkService, bitpayCardService) {
+
+  $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    $scope.data = {
+      index: 0
+    };
+
+    $scope.options = {
+      loop: false,
+      effect: 'flip',
+      speed: 500,
+      spaceBetween: 100
+    };
+
+    storageService.getNextStep('BitpayCard', function(err, value) {
+      if (value)  {
+        $ionicHistory.nextViewOptions({
+          disableAnimate: true
+        });
+        $state.go('tabs.home');
+        $timeout(function() {
+          $state.transitionTo('tabs.bitpayCard');
+        }, 100);
+      }
+    });
+  });
+
+  $scope.orderBitPayCard = function() {
+    var url = 'https://bitpay.com/visa/';
+    var target = '_system';
+    externalLinkService.open(url, target);
+  };
+
+  $scope.connectBitPayCard = function() {};
+
+  $scope.goBack = function() {
+    if ($scope.data.index != 0) $scope.slider.slidePrev();
+    else $state.go('tabs.home');
+  };
+
+  $scope.slideNext = function() {
+    if ($scope.data.index != 2) $scope.slider.slideNext();
+    else $state.go('tabs.home');
+  };
+
+  $scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
+    $scope.slider = data.slider;
+  });
+
+  $scope.$on("$ionicSlides.slideChangeStart", function(event, data) {
+    $scope.data.index = data.slider.activeIndex;
+  });
+
+  $scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {});
+});
+

src/js/controllers/tabsController.js

@@ -35,6 +35,7 @@ angular.module('copayApp.controllers').controller('tabsController', function($ro
     'tabs.receive.backup',
     'tabs.bitpayCard.amount',
     'tabs.bitpayCard.confirm',
+    'tabs.bitpayCardIntro'
   ];
 
   $rootScope.$on('$ionicView.beforeEnter', function() {

src/js/routes.js

@@ -846,7 +846,16 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
      *
      */
 
-    .state('tabs.bitpayCard', {
+      .state('tabs.bitpayCardIntro', {
+        url: '/bitpay-card-intro',
+        views: {
+          'tab-home@tabs': {
+            controller: 'bitpayCardIntroController',
+            templateUrl: 'views/bitpayCardIntro.html'
+          }
+        }
+      })
+      .state('tabs.bitpayCard', {
         url: '/bitpay-card',
         views: {
           'tab-home@tabs': {

src/sass/views/bitpayCardIntro.scss

@@ -0,0 +1,78 @@
+#bitpayCard-intro {
+  .swiper-container-horizontal > .swiper-pagination {
+    bottom: 150px;
+  }
+  .cta-button{
+    text-align: center;
+    position: absolute;
+    bottom: 45px;
+    padding: 0 1.5rem;
+    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;
+  height: 100%;
+  .bar.bar-header {
+    background: rgb(30, 49, 134);
+    color: #fff;
+    button {
+      color: #fff;
+    }
+    .secondary-buttons {
+      button {
+        color: rgba(255, 255, 255, .5);
+      }
+    }
+  }
+  .bar.bar-stable{
+    border-color: transparent;
+    border:none;
+  }
+  .swiper-pagination {
+    &-bullet {
+      background: rgb(100, 124, 232);
+      &-active {
+        background: rgb(100, 124, 232);
+      }
+    }
+  }
+  .button-transparent{
+    background: none !important;
+  }
+  .button-translucent{
+    background: rgba(215, 215, 215, 0.1)
+  }
+  .button-primary{
+    background: rgb(100, 124, 232) !important;
+    color:#fff;
+  }
+  .light-blue{
+    color:rgb(100, 124, 232);
+  }
+  .text-white{
+    color: #ffffff;
+  }
+  ion-content {
+    background: url(../img/onboarding-welcome-bg.png);
+    background-position: top center;
+    background-size: contain;
+    background-repeat: repeat-x;
+    height: 100%;
+    .scroll{
+      height: 100%;
+    }
+    color: #fff;
+    p {
+      text-align: center;
+      margin: 40px 20px;
+      font-size: 1.2rem;
+      color: rgba(255, 255, 255, .5);
+    }
+  }
+}

src/sass/views/views.scss

@@ -12,6 +12,7 @@
 @import "walletDetails";
 @import "advancedSettings";
 @import "bitpayCard";
+@import "bitpayCardIntro";
 @import "address-book";
 @import "wallet-backup-phrase";
 @import "zero-state";

www/views/tab-home.html

@@ -138,7 +138,7 @@
         <i class="icon bp-arrow-down" ng-show="hideNextSteps"></i>
       </div>
       <div ng-show="!hideNextSteps">
-        <a ui-sref="tabs.bitpayCard" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
+        <a ui-sref="tabs.bitpayCardIntro" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-bitpay-card"></div>
          </i>