BitPay Card Intro (slides)

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";