Add support for org-based subscriptions

static/css/quay.css

@@ -2,6 +2,10 @@
   font-family: 'Droid Sans', sans-serif;
 }
 
+.button-hidden {
+  visibility: hidden;
+}
+
 .organization-header-element {
   padding: 20px;
   margin-bottom: 20px;
@@ -1242,10 +1246,6 @@ p.editable:hover i {
   text-align: center;
 }
 
-.user-admin .panel-plan .button-hidden {
-  visibility: hidden;
-}
-
 .user-admin .plan-description {
   font-size: 1.2em;
   margin-bottom: 10px;

static/js/app.js

@@ -31,6 +31,17 @@ function getFirstTextLine(commentString) {
   return '';
 }
 
+function getRestUrl(args) {
+  var url = '';
+  for (var i = 0; i < arguments.length; ++i) {
+    if (i > 0) {
+       url += '/';
+    }
+    url += encodeURI(arguments[i])
+  }
+  return url;
+}
+
 function getMarkedDown(string) {
   return Markdown.getSanitizingConverter().makeHtml(string || '');
 }
@@ -160,7 +171,7 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
         });
       };
 
-      planService.showSubscribeDialog = function($scope, planId, started, success, failed) {
+      planService.showSubscribeDialog = function($scope, planId, orgname, started, success, failed) {
         var submitToken = function(token) {
           $scope.$apply(function() {
             started();
@@ -173,7 +184,8 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
             plan: planId,
           };
 
-          var createSubscriptionRequest = Restangular.one('user/plan');
+          var url = orgname ? getRestUrl('organization', orgname, 'plan') : 'user/plan';
+          var createSubscriptionRequest = Restangular.one(url);
           $scope.$apply(function() {
             createSubscriptionRequest.customPUT(subscriptionDetails).then(success, failed);
           });

static/js/controllers.js

@@ -14,17 +14,6 @@ $.fn.clipboardCopy = function() {
   });
 };
 
-function getRestUrl(args) {
-  var url = '';
-  for (var i = 0; i < arguments.length; ++i) {
-    if (i > 0) {
-       url += '/';
-    }
-    url += encodeURI(arguments[i])
-  }
-  return url;
-}
-
 function HeaderCtrl($scope, $location, UserService, Restangular) {
   $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
     $scope.user = currentUser;
@@ -716,7 +705,7 @@ function UserAdminCtrl($scope, $timeout, Restangular, PlanService, UserService,
 
   $scope.planChanging = false;
   $scope.subscribe = function(planId) {
-    PlanService.showSubscribeDialog($scope, planId, function() {
+    PlanService.showSubscribeDialog($scope, planId, null, function() {
       // Subscribing.
       $scope.planChanging = true;
     }, function(plan) {
@@ -1035,7 +1024,7 @@ function NewRepoCtrl($scope, $location, $http, $timeout, UserService, Restangula
   };
 
   $scope.upgradePlan = function() {
-    PlanService.showSubscribeDialog($scope, $scope.planRequired.stripeId, function() {
+    PlanService.showSubscribeDialog($scope, $scope.planRequired.stripeId, null, function() {
       // Subscribing.
       $scope.planChanging = true;
     }, function(plan) {
@@ -1203,6 +1192,7 @@ function OrgAdminCtrl($rootScope, $scope, Restangular, $routeParams, UserService
   };
 
   var subscribedToPlan = function(sub) {
+    $scope.planChanging = false;
     $scope.subscription = sub;
     PlanService.getPlan(sub.plan, function(subscribedPlan) {
       $scope.subscribedPlan = subscribedPlan;
@@ -1223,9 +1213,11 @@ function OrgAdminCtrl($rootScope, $scope, Restangular, $routeParams, UserService
 
   var loadSubscription = function() {
     $scope.planLoading = true;
-    UserService.getCurrentSubscription(subscribedToPlan, function() {
+
+    var getSubscription = Restangular.one(getRestUrl('organization', orgname, 'plan'));
+    getSubscription.get().then(subscribedToPlan, function() {
       // Organization has no subscription.
-      $scope.planLoading = false;
+      subscribedToPlan({'plan': 'bus-free'});
     });
   };
 
@@ -1235,6 +1227,38 @@ function OrgAdminCtrl($rootScope, $scope, Restangular, $routeParams, UserService
     return 'success';
   };
 
+  $scope.subscribe = function(planId) {
+    $scope.planChanging = true;
+    PlanService.showSubscribeDialog($scope, planId, orgname, function() {
+      // Subscribing.
+    }, function(plan) {
+      // Subscribed.
+      subscribedToPlan(plan);
+    }, function() {
+      // Failure.
+      $scope.planChanging = false;
+    });
+  };
+
+  $scope.changeSubscription = function(planId) {
+    $scope.planChanging = true;
+    $scope.errorMessage = undefined;
+
+    var subscriptionDetails = {
+      plan: planId,
+    };
+
+    var changeSubscriptionRequest = Restangular.one(getRestUrl('organization', orgname, 'plan'));
+    changeSubscriptionRequest.customPUT(subscriptionDetails).then(subscribedToPlan, function() {
+      // Failure
+      $scope.planChanging = false;
+    });
+  };
+
+  $scope.cancelSubscription = function() {
+    $scope.changeSubscription('bus-free');
+  };
+
   loadSubscription();
   loadOrganization();
 }

static/partials/org-admin.html

@@ -70,7 +70,9 @@
             upgrading your subscription to avoid future disruptions in your organization's service.
           </div>
 
-          <table class="table table-hover plans-table">
+          <i class="fa fa-spinner fa-spin fa-3x" ng-show="planChanging"></i>
+
+          <table class="table table-hover plans-table" ng-show="!planChanging">
             <thead>
               <td>Plan</td>
               <td>Private Repositories</td>
@@ -84,12 +86,15 @@
               <td><div class="plan-price">${{ plan.price / 100 }}</div></td>
               <td class="controls">
                  <div ng-switch='plan.stripeId'>
-                   <div ng-switch-when='free'>
+                   <div ng-switch-when='bus-free'>
                      <button class="btn button-hidden">Hidden!</button>
                    </div>
                    <div ng-switch-default>
-                     <button class="btn btn-primary" ng-show="subscription.plan === 'free'" ng-click="subscribe(plan.stripeId)">Subscribe</button>
-                     <button class="btn btn-default" ng-hide="subscription.plan === 'free' || subscription.plan === plan.stripeId" ng-click="changeSubscription(plan.stripeId)">Change</button>
+                     <button class="btn btn-primary" ng-show="subscription.plan === 'bus-free'" ng-click="subscribe(plan.stripeId)">Subscribe</button>
+                     <button class="btn btn-default" ng-hide="subscription.plan === 'bus-free' || subscription.plan === plan.stripeId"
+                             ng-click="changeSubscription(plan.stripeId)">
+                       Change
+                     </button>
                      <button class="btn btn-danger" ng-show="subscription.plan === plan.stripeId" ng-click="cancelSubscription()">Cancel</button>
                    </div>
                  </div>