Merge pull request #1678 from CodeNow/SAN-4781-payments-integration-v3

SAN-4781 Payments Integration

Author: Myztiq

Gruntfile.js

@@ -437,6 +437,7 @@ module.exports = function(grunt) {
         configObj.socketHost = process.env.API_SOCK_URL || configObj.host;
         configObj.userContentDomain = process.env.USER_CONTENT_DOMAIN || 'runnableapp.com';
         configObj.corporateUrl = process.env.MARKETING_URL || 'https://runnable.io';
+        configObj.stripeToken = process.env.STRIPE_TOKEN || 'pk_test_sHr5tQaPtgwiE2cpW6dQkzi8';
 
         if (configObj.host.charAt(configObj.host.length - 1) === '/') {
           configObj.host = configObj.host.substr(0, configObj.host.length - 1);

client/assets/styles/scss/forms/forms-billing.scss

@@ -79,7 +79,7 @@
 
     // date
     &:last-child {
-      max-width: 105px;
+      max-width: 125px;
     }
   }
 }

client/assets/styles/scss/forms/forms-plan.scss

@@ -224,7 +224,11 @@
     }
 
     &:hover,
-    &:active,
+    &:active {
+      border-color: $gray-lighter;
+      cursor: default;
+    }
+
     &.active {
       background: $white;
       border-color: $gray-lighter;

client/config/routes.js

@@ -64,8 +64,12 @@ module.exports = [
       grantedOrgs: function (fetchGrantedGithubOrgs) {
         return fetchGrantedGithubOrgs();
       },
-      user: function (fetchUser) {
-        return fetchUser();
+      user: function (fetchUser, $rootScope, keypather) {
+        return fetchUser()
+          .then(function (user) {
+            keypather.set($rootScope, 'dataApp.data.user', user);
+            return user;
+          });
       },
       whitelistedOrgs: function (fetchWhitelistForDockCreated) {
         return fetchWhitelistForDockCreated();
@@ -79,8 +83,12 @@ module.exports = [
     controller: 'WelcomeBackController',
     controllerAs: 'WBC',
     resolve: {
-      user: function (fetchUser) {
-        return fetchUser();
+      user: function (fetchUser, $rootScope, keypather) {
+        return fetchUser()
+          .then(function (user) {
+            keypather.set($rootScope, 'dataApp.data.user', user);
+            return user;
+          });
       },
       booted: function (eventTracking, user) {
         return eventTracking.boot(user);
@@ -161,7 +169,7 @@ module.exports = [
             return $q.reject(new Error('User Unauthorized for Organization'));
           });
         }
-        if (!activeOrg.attrs.allowed) {
+        if (!activeOrg.attrs.isActive) {
           // There is a bug in ui-router and a timeout is the workaround
           return $timeout(function () {
             $state.go('paused');

client/directives/accountsSelect/directiveAccountsSelect.js

@@ -105,7 +105,10 @@ function accountsSelect (
           return '';
         }
         if (currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod) {
-          return currentOrg.poppa.trialDaysRemaining();
+          var trialRemaining = currentOrg.poppa.trialDaysRemaining();
+          if (trialRemaining <= 3) {
+            return trialRemaining;
+          }
         }
         return '';
       };
@@ -114,9 +117,10 @@ function accountsSelect (
         if (!$rootScope.featureFlags.billing) {
           return {};
         }
+        var showBadge = currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod && currentOrg.poppa.trialDaysRemaining() <= 3;
         return {
-          badge: currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod,
-          'badge-orange': currentOrg.poppa.isInTrial() && !currentOrg.poppa.attrs.hasPaymentMethod
+          badge: showBadge,
+          'badge-orange': showBadge
         };
       };
     }

client/directives/animatedPanels/animatedPanelContainerDirective.js

@@ -23,37 +23,35 @@ function animatedPanelContainer(
       }
 
       var isAnimatingForwards = true;
-      var animateOut = false;
+      var isAnimatingOut = false;
       var leavingPanel = null;
       var activelyAnimatingTimeout = false;
-      var activelyAnimating = false;
+      var isActivelyAnimating = false;
 
       var panels = [];
       var panelElements = {};
       $scope.activePanel = null;
 
       $scope.goToPanel = function (panelName, style) {
         if (panels.includes(panelName)) {
-          activelyAnimating = true;
-          $timeout(function () {
-            isAnimatingForwards = style !== 'back';
-            animateOut = false;
-            leavingPanel = $scope.activePanel;
+          isActivelyAnimating = style !== 'immediate';
+          isAnimatingForwards = style !== 'back';
+          isAnimatingOut = false;
+          leavingPanel = $scope.activePanel;
 
-            // Quick move our elements to the right spot, then let them animate into place
-            $timeout(function () {
-              if (style !== 'immediate') {
-                animateOut = true;
-                $timeout.cancel(activelyAnimatingTimeout);
-                activelyAnimatingTimeout = $timeout(function () {
-                  activelyAnimating = false;
-                }, 300);
-              }
-              $scope.activePanel = panelName;
-            }, 0);
+          // Quick move our elements to the right spot, then let them animate into place
+          $timeout(function () {
+            if (style !== 'immediate') {
+              isAnimatingOut = true;
+              $timeout.cancel(activelyAnimatingTimeout);
+              activelyAnimatingTimeout = $timeout(function () {
+                isActivelyAnimating = false;
+              }, 300);
+            }
+            $scope.activePanel = panelName;
           }, 0);
         } else {
-          activelyAnimating = false;
+          isActivelyAnimating = false;
           console.error('Tried going to panel that doesn\'t exist', panelName);
         }
       };
@@ -72,7 +70,7 @@ function animatedPanelContainer(
 
       $scope.getAnimatedPanelStyle = function () {
         var inElement = panelElements[$scope.activePanel];
-        if (!inElement || !activelyAnimating) {
+        if (!inElement || !isActivelyAnimating) {
           return;
         }
         return {
@@ -91,8 +89,8 @@ function animatedPanelContainer(
           out:  panelName !== $scope.activePanel,
           in: panelName === $scope.activePanel,
           back: !goingForwards,
-          animated: animateOut,
-          animating: activelyAnimating
+          animated: isAnimatingOut,
+          animating: isActivelyAnimating
         };
       };
 

client/directives/modals/gracePeriodModal/forms/trialEndView.jade

@@ -34,5 +34,5 @@
               )
     .grid-block.justify-center.modal-outer-footer(
       grace-period-footer
-      close = "WBC.close"
+      close = "EAC.close"
     )

client/directives/modals/gracePeriodModal/welcomeBackController.js

@@ -7,10 +7,9 @@ function WelcomeBackController(
   $rootScope
 ) {
   var WBC = this;
+  WBC.close = angular.noop;
 
-  $rootScope.dataApp = {
-    gracePeriod: true
-  };
+  $rootScope.dataApp.gracePeriod = true;
   WBC.openIntercom = function () {
     window.Intercom(
       'showNewMessage',

client/directives/modals/settingsModal/forms/billingForm/billingForm.jade

@@ -1,5 +1,4 @@
 .modal-form.form-billing
-
   .spinner-wrapper.spinner-md.spinner-gray.in(
     ng-include = "'spinner'"
     ng-if = "$root.isLoading.billingForm"
@@ -27,7 +26,7 @@
 
       .grid-block.vertical.form-plan.label.padding-sm.fade(
         ng-class = "{'in': isActivePanel()}"
-        ng-include = "'showPlanForm'"
+        show-plan-form
         ng-if = "!currentOrg.poppa.isInTrial() || (currentOrg.poppa.isInTrial() && currentOrg.poppa.attrs.hasPaymentMethod)"
       )
       .grid-block.vertical.label.padding-sm.fade(

client/directives/modals/settingsModal/forms/billingForm/billingFormDirective.js

@@ -3,23 +3,35 @@
 require('app').directive('billingForm', billingForm);
 
 function billingForm(
-  currentOrg
+  currentOrg,
+  keypather,
+  fetchPaymentMethod,
+  fetchPlan,
+  fetchInvoices
 ) {
   return {
     restrict: 'A',
     templateUrl: 'billingForm',
-    link: function ($scope, element) {
+    link: function ($scope) {
       $scope.$on('$destroy', function () {
         $scope.SEMC.showFooter = true;
+        fetchPaymentMethod.cache.clear();
+        fetchPlan.cache.clear();
+        fetchInvoices.cache.clear();
       });
       $scope.$on('changed-animated-panel', function (event, panelName) {
         $scope.SEMC.showFooter = panelName === 'billingForm';
       });
       $scope.$broadcast('go-to-panel', $scope.SEMC.subTab || 'billingForm', 'immediate');
       $scope.currentOrg = currentOrg;
+      var startedWithPaymentMethod = keypather.get(currentOrg, 'poppa.attrs.hasPaymentMethod');
       $scope.actions = {
         save: function () {
-          $scope.$broadcast('go-to-panel', 'confirmationForm');
+          if (startedWithPaymentMethod) {
+            $scope.$broadcast('go-to-panel', 'billingForm', 'back');
+          } else {
+            $scope.$broadcast('go-to-panel', 'confirmationForm');
+          }
         },
         cancel: function () {
           $scope.$broadcast('go-to-panel', 'billingForm', 'back');