Merge pull request #1684 from CodeNow/SAN-4734-plan-upgrade-notification

SAN-4734 Plan Upgrade Notification

Author: Myztiq

client/directives/environment/environmentController.js

@@ -15,13 +15,11 @@ function EnvironmentController(
   $state,
   $timeout,
   $window,
-  errs,
   favico,
   fetchUser,
   fetchDockerfileForContextVersion,
   fetchInstancesByPod,
   fetchOrgMembers,
-  fetchOrgTeammateInvitations,
   helpCards,
   keypather,
   ModalService,
@@ -142,15 +140,35 @@ function EnvironmentController(
     $window.removeEventListener('scroll', scrollHelper);
   });
 
-  $scope.alert = null;
+  EC.alert = null;
 
   $scope.$on('alert', function (evt, data) {
-    $scope.alert = data;
-    $timeout(function () {
-      $scope.alert = null;
-    }, 5000);
+    EC.alert = data;
+    if (!data.planChanged) {
+      $timeout(function () {
+        EC.actions.closeAlert();
+      }, 5000);
+    }
   });
 
+  EC.actions = {
+    closeAlert: function () {
+      EC.alert = null;
+    },
+    goToBilling: function () {
+      EC.actions.closeAlert();
+      ModalService.showModal({
+        controller: 'SettingsModalController',
+        controllerAs: 'SEMC',
+        templateUrl: 'settingsModalView',
+        inputs: {
+          tab: 'billing',
+          subTab: 'billingForm'
+        }
+      });
+    }
+  };
+
   $scope.helpPopover = {
     data: $scope.help,
     actions: {

client/directives/environment/environmentView.jade

@@ -1,40 +1,44 @@
 //- new alerts
 .grid-block.vertical.notification.notification-sm.js-animate.top-right(
   ng-class = "{\
-    'green': alert.type === 'success',\
-    'red': alert.type === 'deleted',\
-    'plan-changed text-center': $root.featureFlags.billingPlanChangedNotification\
+    'green': EC.alert.type === 'success',\
+    'red': EC.alert.type === 'deleted',\
+    'plan-changed text-center': EC.alert.newPlan\
   }"
-  ng-if = "alert"
+  ng-if = "EC.alert"
 )
   .grid-block.align-center(
-    ng-class = "{'justify-center': $root.featureFlags.billingPlanChangedNotification}"
+    ng-class = "{'justify-center': EC.alert.newPlan}"
   )
     svg.anchor-left.iconnables.icons-check(
-      ng-if = "alert.type === 'success'"
+      ng-if = "EC.alert.type === 'success'"
     )
       use(
         xlink:href = "#icons-check"
       )
     svg.anchor-left.iconnables.icons-trash(
-      ng-if = "alert.type === 'deleted'"
+      ng-if = "EC.alert.type === 'deleted'"
     )
       use(
         xlink:href = "#icons-trash"
       )
-    span {{alert.text}}
+    span {{EC.alert.text}}
     a.link.small.link-undo(
       ng-if = "$root.featureFlags.undoDelete"
     ) Undo
   .grid-block.vertical(
-    ng-if = "$root.featureFlags.billingPlanChangedNotification"
+    ng-if = "EC.alert.newPlan"
   )
     small.small You’ve been bumped into the next plan for 
       strong.strong free
       |  until your next billing period. 
       //- to billing tab
-      a.link Plan Details
-    button.btn.btn-xs.green Got it, thanks!
+      a.link(
+        ng-click = "EC.actions.goToBilling()"
+      ) Plan Details
+    button.btn.btn-xs.green(
+      ng-click = "EC.actions.closeAlert()"
+    ) Got it, thanks!
 
 //- environment page
 .grid-block.environment-wrapper(

client/services/createAndBuildNewContainerService.js

@@ -18,6 +18,7 @@ function createAndBuildNewContainer(
   createNewInstance,
   eventTracking,
   fetchInstancesByPod,
+  fetchPlan,
   fetchUser,
   helpCards
 ) {
@@ -27,11 +28,14 @@ function createAndBuildNewContainer(
     // Save this in case it changes
     var cachedActiveAccount = $rootScope.dataApp.data.activeAccount;
     var instance = null;
+    var oldPlanId = null;
     return $q.all({
       masterInstances: fetchInstancesByPod(cachedActiveAccount.oauthName()),
-      user: fetchUser()
+      user: fetchUser(),
+      plan: fetchPlan()
     })
       .then(function (response) {
+        oldPlanId = response.plan.next.id;
         var instanceOptions = {
           name: containerName,
           owner: {
@@ -47,10 +51,6 @@ function createAndBuildNewContainer(
         return $q.when(createPromiseForState);
       })
       .then(function (newServerModel) {
-        $rootScope.$broadcast('alert', {
-          type: 'success',
-          text: 'Container Created'
-        });
         helpCards.hideActiveCard();
         if (options.isolation) {
           newServerModel.opts.isIsolationGroupMaster = false;
@@ -63,6 +63,20 @@ function createAndBuildNewContainer(
           instance
         );
       })
+      .then(function (instance) {
+        fetchPlan.cache.clear();
+        return fetchPlan()
+          .then(function (newPlan) {
+            $rootScope.$broadcast('alert', {
+              type: 'success',
+              text: 'Container Created',
+              newPlan: newPlan.next.id !== oldPlanId
+            });
+          })
+          .then(function () {
+            return instance;
+          });
+      })
       .then(function (instance) {
         helpCards.refreshAllCards();
         return instance;

client/services/featureFlagService.js

@@ -21,7 +21,6 @@ function featureFlags(
     backup: false,
     blankDockerfile: false, // allows users to skip the verification flow
     billing: false,
-    billingPlanChangedNotification: false, // if plan changes because of container created
     cardStatus: false,
     connections: false,
     configTerminal: false, // flag for terminal in config view

test/unit/services/createAndBuildNewContainerService.unit.js

@@ -13,6 +13,8 @@ var helpCardsMock = require('../apiMocks/HelpCardServiceMock');
 var thisUser = runnable.newUser(apiMocks.user);
 
 describe('createAndBuildNewContainer'.bold.underline.blue, function () {
+  var mockFetchPlan;
+  var mockPlan;
   var ctx = {};
 
   function createMasterPods() {
@@ -49,7 +51,11 @@ describe('createAndBuildNewContainer'.bold.underline.blue, function () {
     ctx.pageNameMock = {
       setTitle: sinon.spy()
     };
-
+    mockPlan = {
+      next: {
+        id: '1234'
+      }
+    };
 
     runnable.reset(apiMocks.user);
     angular.mock.module('app', function ($provide) {
@@ -61,6 +67,13 @@ describe('createAndBuildNewContainer'.bold.underline.blue, function () {
       $provide.factory('helpCards', helpCardsMock.create(ctx));
       $provide.factory('fetchInstancesByPod', fetchInstancesByPodMock.fetch());
       $provide.factory('createNewInstance', createNewInstanceMock.fetch());
+      $provide.factory('fetchPlan', function ($q) {
+        mockFetchPlan = sinon.stub().returns($q.when(mockPlan));
+        mockFetchPlan.cache = {
+          clear: sinon.stub()
+        };
+        return mockFetchPlan;
+      });
       $provide.value('errs', ctx.errs);
     });
     angular.mock.inject(function (
@@ -71,6 +84,7 @@ describe('createAndBuildNewContainer'.bold.underline.blue, function () {
     ) {
       $q = _$q_;
       $rootScope = _$rootScope_;
+      $rootScope.$broadcast = sinon.stub();
       createAndBuildNewContainer = _createAndBuildNewContainer_;
       keypather = _keypather_;
     });
@@ -113,9 +127,18 @@ describe('createAndBuildNewContainer'.bold.underline.blue, function () {
       sinon.assert.calledOnce(instances.add);
       sinon.assert.calledOnce(ctx.eventTracking.triggeredBuild);
 
+      mockFetchPlan.reset();
+      mockFetchPlan.returns($q.when({next: {id: '5678'}}));
       createNewInstanceMock.triggerPromise(instance);
       $rootScope.$digest();
       sinon.assert.calledOnce(ctx.helpCards.refreshAllCards);
+      sinon.assert.calledOnce(mockFetchPlan.cache.clear);
+      sinon.assert.calledOnce(mockFetchPlan);
+      sinon.assert.calledWith($rootScope.$broadcast, 'alert', {
+        type: 'success',
+        text: 'Container Created',
+        newPlan: true
+      });
     });
 
     it('should create a server with isolation', function () {