Updated logic to have custom alert when the user changes their billing plan.

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

@@ -16,8 +16,10 @@ function createAndBuildNewContainer(
   $q,
   $rootScope,
   createNewInstance,
+  currentOrg,
   eventTracking,
   fetchInstancesByPod,
+  fetchPlan,
   fetchUser,
   helpCards
 ) {
@@ -27,11 +29,14 @@ function createAndBuildNewContainer(
     // Save this in case it changes
     var cachedActiveAccount = $rootScope.dataApp.data.activeAccount;
     var instance = null;
+    var oldPlan = null;
     return $q.all({
       masterInstances: fetchInstancesByPod(cachedActiveAccount.oauthName()),
-      user: fetchUser()
+      user: fetchUser(),
+      plan: fetchPlan()
     })
       .then(function (response) {
+        oldPlan = response.plan.next.id;
         var instanceOptions = {
           name: containerName,
           owner: {
@@ -47,10 +52,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 +64,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 !== oldPlan
+            });
+          })
+          .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