feat(coinbase): clean up coinbase integration onboarding

src/js/controllers/coinbase.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('coinbaseController', function($scope, $timeout, $ionicModal, $ionicHistory, $log, coinbaseService, lodash, platformInfo, ongoingProcess, popupService, externalLinkService) {
+angular.module('copayApp.controllers').controller('coinbaseController', function($scope, $timeout, $ionicModal, $ionicHistory, $log, coinbaseService, lodash, platformInfo, ongoingProcess, popupService, externalLinkService, gettextCatalog) {
 
   var isNW = platformInfo.isNW;
   var isCordova = platformInfo.isCordova;
@@ -9,7 +9,7 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
     $scope.currency = coinbaseService.getAvailableCurrency();
     coinbaseService.getStoredToken(function(at) {
       $scope.accessToken = at;
-      
+
       // Update Access Token if necessary
       $scope.loading = true;
       coinbaseService.init(function(err, data) {
@@ -79,11 +79,35 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
     }
   }
 
+  this.openSignupWindow = function() {
+    var url = coinbaseService.getSignupUrl();
+    var optIn = true;
+    var title = gettextCatalog.getString('Create Account');
+    var message = gettextCatalog.getString('This will open Coinbase.com, where you can create an account.');
+    var okText = gettextCatalog.getString('Go to Coinbase');
+    var cancelText = gettextCatalog.getString('Back');
+    externalLinkService.open(url, optIn, title, message, okText, cancelText);
+  }
+
+  this.openSupportWindow = function() {
+    var url = coinbaseService.getSupportUrl();
+    var optIn = true;
+    var title = gettextCatalog.getString('Coinbase Support');
+    var message = gettextCatalog.getString('Help and support for the Coinbase service is available on their website.');
+    var okText = gettextCatalog.getString('Open Help Center');
+    var cancelText = gettextCatalog.getString('Go Back');
+    externalLinkService.open(url, optIn, title, message, okText, cancelText);
+  }
+
   this.getAuthenticateUrl = function() {
     $scope.showOauthForm = isCordova || isNW ? false : true;
     return coinbaseService.getOauthCodeUrl();
   };
 
+  this.toggleOauthForm = function() {
+    $scope.showOauthForm = !$scope.showOauthForm;
+  }
+
   this.submitOauthCode = function(code) {
     var self = this;
     ongoingProcess.set('connectingCoinbase', true);
@@ -112,6 +136,7 @@ angular.module('copayApp.controllers').controller('coinbaseController', function
 
   var self = this;
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    $scope.showOauthForm = false;
     coinbaseService.setCredentials();
     if (data.stateParams && data.stateParams.code) {
       coinbaseService.getStoredToken(function(at) {

src/js/services/coinbaseService.js

@@ -28,7 +28,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
       name: '10%'
     }
   ];
-  
+
   root.selectedPriceSensitivity = root.priceSensitivity[1];
 
   root.setCredentials = function() {
@@ -117,7 +117,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     var satToBtc = 1 / 100000000;
     var unitToSatoshi = config.unitToSatoshi;
     var amountUnitStr;
-    
+
     // IF 'USD'
     if (currency) {
       amountUnitStr = $filter('formatFiatAmount')(amount) + ' ' + currency;
@@ -128,10 +128,18 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
       amount = (amountSat * satToBtc).toFixed(8);
       currency = 'BTC';
     }
-    
+
     return [amount, currency, amountUnitStr];
   };
 
+  root.getSignupUrl = function() {
+    return credentials.HOST + '/signup';
+  }
+
+  root.getSupportUrl = function() {
+    return 'https://support.coinbase.com/';
+  }
+
   root.getOauthCodeUrl = function() {
     return credentials.HOST
       + '/oauth/authorize?response_type=code&client_id='
@@ -483,7 +491,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
   };
 
   // Pending transactions
-  
+
   root.savePendingTransaction = function(ctx, opts, cb) {
     _savePendingTransaction(ctx, opts, cb);
   };
@@ -516,7 +524,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     storageService.getCoinbaseTxs(credentials.NETWORK, function(err, txs) {
       txs = txs ? JSON.parse(txs) : {};
       coinbasePendingTransactions.data = lodash.isEmpty(txs) ? null : txs;
-    
+
       root.init(function(err, data) {
         if (err || lodash.isEmpty(data)) {
           if (err) $log.error(err);
@@ -529,7 +537,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
           if ((dataFromStorage.type == 'sell' && dataFromStorage.status == 'completed') ||
             (dataFromStorage.type == 'buy' && dataFromStorage.status == 'completed') ||
             dataFromStorage.status == 'error' ||
-            (dataFromStorage.type == 'send' && dataFromStorage.status == 'completed')) 
+            (dataFromStorage.type == 'send' && dataFromStorage.status == 'completed'))
             return;
           root.getTransaction(accessToken, accountId, txId, function(err, tx) {
             if (err || lodash.isEmpty(tx) || (tx.data && tx.data.error)) {
@@ -593,7 +601,7 @@ angular.module('copayApp.services').factory('coinbaseService', function($http, $
     $log.debug('Updating pending transactions...');
     root.setCredentials();
     var pendingTransactions = { data: {} };
-    root.getPendingTransactions(pendingTransactions); 
+    root.getPendingTransactions(pendingTransactions);
   }, 20000);
 
   var _updateTxs = function(coinbasePendingTransactions) {

src/sass/views/integrations/coinbase.scss

@@ -9,7 +9,7 @@
     stroke: #0067c8;
     fill: #0067c8;
   }
-  
+
   .add-bottom-for-cta {
     bottom: 92px;
   }
@@ -73,7 +73,7 @@
         color: $item-label-color;
         margin-bottom: 8px;
       }
-      
+
       .capitalized {
         text-transform: capitalize;
       }

src/sass/views/integrations/integrations.scss

@@ -0,0 +1,43 @@
+@import "coinbase";
+@import "glidera";
+@import "amazon";
+
+.integration-onboarding {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  &-logo {
+    display: inline-block;
+    img {
+      max-width: 170px;
+    }
+  }
+  &-heading {
+    font-size: 20px;
+    margin: 1rem;
+  }
+  &-description {
+    margin-top: 0;
+    margin-left: 2rem;
+    margin-right: 2rem;
+    margin-bottom: 100px;
+    opacity: .6;
+    max-width: 300px;
+  }
+  &-support-link {
+    cursor: pointer;
+  }
+  &-cta, &-oauthform {
+    position: absolute;
+    bottom: 5vh;
+    width: 100%;
+  }
+  &-oauthform {
+    input {
+      border-bottom: 2px solid $light-gray;
+    }
+  }
+}

src/sass/views/views.scss

@@ -42,7 +42,5 @@
 @import "includes/tx-status";
 @import "includes/itemSelector";
 @import "includes/walletSelector";
-@import "integrations/coinbase";
-@import "integrations/glidera";
-@import "integrations/amazon";
+@import "integrations/integrations";
 @import "custom-amount";

www/views/coinbase.html

@@ -4,35 +4,32 @@
     </ion-nav-back-button>
     <ion-nav-title>Coinbase</ion-nav-title>
   </ion-nav-bar>
-
-  <ion-content>
-
-    <div ng-if="!accessToken" ng-init="showOauthForm = false">
-      <div class="text-center m20v">
-        <img src="img/coinbase-logo.png" width="200">
+  <ion-nav-buttons side="secondary">
+    <button class="button button-clear ng-hide" ng-show="!accessToken" ng-click="coinbase.toggleOauthForm()">
+      <span ng-hide="showOauthForm" translate>Enter Code</span>
+      <span ng-show="showOauthForm" translate>Restart</span>
+    </button>
+  </ion-nav-buttons>
+  <ion-content scroll="false" class="ng-hide" ng-show="!accessToken">
+    <div class="integration-onboarding">
+      <div class="integration-onboarding-logo">
+        <img src="img/coinbase-logo.png">
       </div>
-      <div class="text-center small-10 small-centered columns" ng-show="!showOauthForm">
-
-        <p class="m20t text-gray size-12">Connect your Coinbase account to get started</p>
-
-        <button class="button button-standard button-primary"
-          ng-click="coinbase.openAuthenticateWindow()">
-          Connect to Coinbase
-        </button>
-        <div class="m20t">
-          <a href ng-click="showOauthForm = true" class="text-gray size-12">
-            Do you already have the Oauth Code?
-          </a>
-        </div>
+      <div class="integration-onboarding-heading" translate>Connect a Coinbase Account</div>
+      <div class="integration-onboarding-description" translate>If you have trouble with the Coinbase service, please <a class="integration-onboarding-support-link" ng-click="coinbase.openSupportWindow()">contact Coinbase support</a> for direct assistance.</div>
+      <div class="integration-onboarding-cta" ng-show="!showOauthForm">
+        <button class="button button-standard button-primary" ng-click="coinbase.openAuthenticateWindow()" translate>Connect to Coinbase</button>
+        <button class="button button-standard button-secondary" ng-click="coinbase.openSignupWindow()" translate>Create an Account</button>
       </div>
-      <div ng-show="showOauthForm">
+
+      <div ng-show="showOauthForm" class="integration-onboarding-oauthform">
         <form name="oauthCodeForm" ng-submit="coinbase.submitOauthCode(code)" novalidate>
-          <div class="list settings-input-group">
-            <label class="item item-input item-stacked-label">
+          <div class="list">
+            <label class="item item-input item-floating-label">
               <span class="input-label">OAuth Code</span>
               <input type="text"
                      ng-model="code"
-                     ng-attr-placeholder="{{'Paste the authorization code here'}}" required>
+                     placeholder="{{'Enter OAuth Code'}}" required>
             </label>
           </div>
           <input
@@ -41,8 +38,11 @@
         </form>
       </div>
     </div>
+  </ion-content>
 
-  <div ng-if="accessToken">
+  <ion-content class="ng-hide" ng-show="accessToken">
+
+  <div>
 
     <div class="m20t text-center" ng-click="updateTransactions()">
       <img src="img/coinbase-logo.png" width="200">
@@ -52,7 +52,7 @@
       <ion-spinner class="spinner-dark recent" icon="crescent" ng-show="!buyPrice || !sellPrice"></ion-spinner>
       <span ng-show="buyPrice && sellPrice">
         {{buyPrice.amount}} {{buyPrice.currency}}
-         | 
+         |
         {{sellPrice.amount}} {{sellPrice.currency}}
       </span>
     </div>
@@ -77,7 +77,7 @@
     <div class="list card">
       <div class="item item-heading" ng-click="updateTransactions()">
         Activity
-      </div> 
+      </div>
       <a class="item"
          ng-if="pendingTransactions.data && !error"
          ng-repeat="(id, tx) in pendingTransactions.data | orderObjectBy:'updated_at':true track by $index"