feat(amazon-payments): completely refactor client side flow, support subscription widgets WIP

bower.json

@@ -22,7 +22,7 @@
     "angular-resource": "1.3.9",
     "angular-ui-utils": "~0.1.0",
     "angular-ui-select2": "git://github.com/angular-ui/ui-select2.git",
-    "angular-bootstrap": "~0.12.0",
+    "angular-bootstrap": "~0.13.0",
     "angular-loading-bar": "~0.6.0",
     "bootstrap": "~3.1.0",
     "bootstrap-growl": "git://github.com/ifightcrime/bootstrap-growl.git#master",

website/public/js/services/paymentServices.js

@@ -61,74 +61,150 @@ function($rootScope, User, $http, Content) {
     });
   }
 
+  var amazonOnError = function(error){
+    console.error(error);
+    console.log(error.getErrorMessage(), error.getErrorCode());
+    alert(error.getErrorMessage());
+  };
+
+  Payments.amazonPayments = {};
+
+  Payments.amazonPayments.reset = function(){
+    Payments.amazonPayments.modal.close();
+    // TODO this is needed because if we do not logout
+    // users then if they use donation & then subscription 
+    // the billing agreement will be wrong
+    amazon.Login.logout();
+    Payments.amazonPayments.modal = null;
+    Payments.amazonPayments.type = null;
+    Payments.amazonPayments.loggedIn = false;
+    Payments.amazonPayments.orderReferenceId = null;
+    Payments.amazonPayments.billingAgreementId = null;
+    Payments.amazonPayments.paymentSelected = false;
+    Payments.amazonPayments.recurringConsent = false;
+  };
+
   // Needs to be called everytime the modal/router is accessed
-  Payments.initAmazonDonation = function(){
+  Payments.amazonPayments.init = function(type){
     if(!isAmazonReady) return;
+    if(type !== 'donation' && type !== 'subscription') return;
+    Payments.amazonPayments.type = type;
 
-    OffAmazonPayments.Button('AmazonPayButtonDonation', window.env.AMAZON_PAYMENTS.SELLER_ID, {
-      type:  'PwA',
-      color: 'Gold',
-      size:  'small',
-
-      authorization: function(){
-        amazon.Login.authorize({
-          scope: 'payments:widget',
-          popup: true
-        }, function(response){
-          if(response.error) return alert(response.error);
-
-          var url = '/amazon/verifyAccessToken'
-          $http.post(url, response).success(function(){
-            Payments.amazonDonationLoggedIn = true;
-            Payments.amazonDonationInitWidgets();
-          }).error(function(res){
-            alert(res.err);
-          });
-        });
-      },
-
-      onError: function(error) {
-        console.error('amazon error ', error);
-      }
+    var modal = Payments.amazonPayments.modal = $rootScope.openModal('amazonPayments', {
+      // Allow the modal to be closed only by pressing cancel
+      // because no easy method to intercept those types of closings
+      // and we need to make some cleanup
+      keyboard: false,
+      backdrop: 'static' 
     });
+
+    modal.rendered.then(function(){
+      OffAmazonPayments.Button('AmazonPayButton', window.env.AMAZON_PAYMENTS.SELLER_ID, {
+        type:  'PwA',
+        color: 'Gold',
+        size:  'small',
+
+        authorization: function(){
+          amazon.Login.authorize({
+            scope: 'payments:widget',
+            popup: true
+          }, function(response){
+            if(response.error) return alert(response.error);
+
+            var url = '/amazon/verifyAccessToken'
+            $http.post(url, response).success(function(){
+              Payments.amazonPayments.loggedIn = true;
+              Payments.amazonPayments.initWidgets();
+            }).error(function(res){
+              alert(res.err);
+            });
+          });
+        },
+
+        onError: amazonOnError
+      });
+    });
+
   }
 
-  Payments.amazonDonationLoggedIn = false;
-  Payments.amazonDonationPaymentSelected = false;
-  Payments.amazonDonationOrderReferenceId;
+  Payments.amazonPayments.canCheckout = function(){
+    if(Payments.amazonPayments.type === 'donation'){
+      return Payments.amazonPayments.paymentSelected === true;
+    }else if(Payments.amazonPayments.type === 'subscription'){
+      return Payments.amazonPayments.paymentSelected === true && 
+              // Mah.. one is a boolean the other a string...
+              Payments.amazonPayments.recurringConsent === 'true'; 
+    }else{
+      return false;
+    }
+  },
 
-  Payments.amazonDonationInitWidgets = function(){
-    new OffAmazonPayments.Widgets.Wallet({
+  Payments.amazonPayments.initWidgets = function(){
+    var walletParams = {
       sellerId: window.env.AMAZON_PAYMENTS.SELLER_ID,
-      onOrderReferenceCreate: function(orderReference) {
-        Payments.amazonDonationOrderReferenceId = orderReference.getAmazonOrderReferenceId();
-      },
-      onPaymentSelect: function(orderReference) {
-        $rootScope.$apply(function(){
-          Payments.amazonDonationPaymentSelected = true;
-        });        
-      },
       design: {
         designMode: 'responsive'
       },
-      onError: function(error) {
-        console.error('amazon error ', error.getErrorMessage());
+
+      onPaymentSelect: function(orderReference) {
+        $rootScope.$apply(function(){
+          Payments.amazonPayments.paymentSelected = true;
+        });        
+      },
+
+      onError: amazonOnError
+    };
+
+    if(Payments.amazonPayments.type === 'donation'){
+      walletParams.onOrderReferenceCreate = function(orderReference) {
+        Payments.amazonPayments.orderReferenceId = orderReference.getAmazonOrderReferenceId();
       }
-    }).bind('AmazonPayWalletDonation');
+    }else if(Payments.amazonPayments.type === 'subscription'){
+      walletParams.onReady = function(billingAgreement) {
+        Payments.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
+
+        new OffAmazonPayments.Widgets.Consent({
+          sellerId: window.env.AMAZON_PAYMENTS.SELLER_ID,
+          amazonBillingAgreementId: Payments.amazonPayments.billingAgreementId, 
+          design: {
+            designMode: 'responsive'
+          },
+
+          onReady: function(consent){
+            $rootScope.$apply(function(){
+              Payments.amazonPayments.recurringConsent = consent.getConsentStatus();
+            });
+          },
+
+          onConsent: function(consent){
+            $rootScope.$apply(function(){
+              Payments.amazonPayments.recurringConsent = consent.getConsentStatus();
+            });
+          },
+
+          onError: amazonOnError
+        }).bind('AmazonPayRecurring');
+      };
+
+      walletParams.agreementType = 'BillingAgreement';
+    }
+
+    new OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
   }
 
-  Payments.amazonDonationCheckout = function(){
-    var url = '/amazon/checkout'
-    $http.post(url, {orderReferenceId: Payments.amazonDonationOrderReferenceId}).success(function(){
-      console.log(arguments);
-    }).error(function(res){
-      alert(res.err);
-    });
-  }
-
-  // Needs to be called everytime the modal/router is accessed
-  Payments.initAmazonSubscription = function(){
-
+  Payments.amazonPayments.checkout = function(){
+    if(Payments.amazonPayments.type === 'donation'){
+      var url = '/amazon/checkout'
+      $http.post(url, {orderReferenceId: Payments.amazonPayments.orderReferenceId}).success(function(){
+        console.log(arguments);
+        Payments.amazonPayments.reset();
+      }).error(function(res){
+        alert(res.err);
+        Payments.amazonPayments.reset();
+      });
+    }else if(Payments.amazonPayments.type === 'subscription'){
+      return false
+    }
   }
 
   Payments.cancelSubscription = function(){

website/src/server.js

@@ -95,7 +95,6 @@ if (cores!==0 && cluster.isMaster && (isDev || isProd)) {
   app.use(express.compress());
   app.set("views", __dirname + "/../views");
   app.set("view engine", "jade");
-  app.set("view cache", true);
   app.use(express.favicon(publicDir + '/favicon.ico'));
   app.use(middleware.cors);
   app.use(middleware.forceSSL);

website/views/shared/modals/amazon-payments.jade

@@ -0,0 +1,15 @@
+script(id='modals/amazonPayments.html', type='text/ng-template')
+  .modal-header
+    h4 Amazon Payments
+  .modal-body
+    p Click the button to pay using Amazon Payments
+    #AmazonPayButton
+    br(ng-show="Payments.amazonPayments.loggedIn")
+    #AmazonPayWallet(ng-show="Payments.amazonPayments.loggedIn", style="width: 400px; height: 228px;")
+    br(ng-show="Payments.amazonPayments.loggedIn")
+    #AmazonPayRecurring(ng-show="Payments.amazonPayments.loggedIn && Payments.amazonPayments.type === 'subscription'",
+                        style="width: 400px; height: 140px;")
+
+  .modal-footer
+    .btn.btn-default(ng-click='Payments.amazonPayments.reset()')=env.t('cancel')
+    .btn.btn-primary(ng-disabled="!Payments.amazonPayments.canCheckout()", ng-click="Payments.amazonPayments.checkout()")=env.t('checkout')

website/views/shared/modals/buy-gems.jade

@@ -22,9 +22,7 @@ script(id='modals/buyGems.html', type='text/ng-template')
                 small.muted=env.t('paymentMethods')
               .btn.btn-primary(ng-click='Payments.showStripe({})')=env.t('card')
               a.btn.btn-warning(href='/paypal/checkout?_id={{user._id}}&apiToken={{user.apiToken}}') PayPal
-              div#AmazonPayButtonDonation(ng-init="Payments.initAmazonDonation()")
-              div#AmazonPayWalletDonation(ng-show="Payments.amazonDonationLoggedIn", style="width: 400px; height: 228px;")
-              a.btn.btn-warning(ng-show="Payments.amazonDonationPaymentSelected", ng-click="Payments.amazonDonationCheckout()") Checkout
+              .btn.btn-default(ng-click="Payments.amazonPayments.init('donation')") Amazon Payments
       
       div(ng-include="'partials/options.settings.subscription.html'")
 

website/views/shared/modals/index.jade

@@ -3,6 +3,7 @@ include ./reroll
 include ./death
 include ./new-stuff
 include ./buy-gems
+include ./amazon-payments
 include ./members
 include ./settings
 include ./drops