Code cleanup part #1: move all the services and directive JS code in the app.js file into its own files

static/js/directives/ui/billing-options.js

@@ -0,0 +1,113 @@
+/**
+ * An element which displays the billing options for a user or an organization.
+ */
+angular.module('quay').directive('billingOptions', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/billing-options.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'user': '=user',
+      'organization': '=organization'
+    },
+    controller: function($scope, $element, PlanService, ApiService) {
+      $scope.invoice_email = false;
+      $scope.currentCard = null;
+
+      // Listen to plan changes.
+      PlanService.registerListener(this, function(plan) {
+        if (plan && plan.price > 0) {
+          update();
+        }
+      });
+
+      $scope.$on('$destroy', function() {
+        PlanService.unregisterListener(this);
+      });
+
+      $scope.isExpiringSoon = function(cardInfo) {
+        var current = new Date();
+        var expires = new Date(cardInfo.exp_year, cardInfo.exp_month, 1);
+        var difference = expires - current;
+        return difference < (60 * 60 * 24 * 60 * 1000 /* 60 days */);
+      };
+
+      $scope.changeCard = function() {
+        var previousCard = $scope.currentCard;
+        $scope.changingCard = true;
+        var callbacks = {
+          'opened': function() { $scope.changingCard = true; },
+          'closed': function() { $scope.changingCard = false; },
+          'started': function() { $scope.currentCard = null; },
+          'success': function(resp) {
+             $scope.currentCard = resp.card;
+             $scope.changingCard = false;
+          },
+          'failure': function(resp) {
+             $scope.changingCard = false;
+             $scope.currentCard = previousCard;
+
+             if (!PlanService.isCardError(resp)) {
+               $('#cannotchangecardModal').modal({});
+             }
+          }
+        };
+
+        PlanService.changeCreditCard($scope, $scope.organization ? $scope.organization.name : null, callbacks);
+      };
+
+      $scope.getCreditImage = function(creditInfo) {
+        if (!creditInfo || !creditInfo.type) { return 'credit.png'; }
+
+        var kind = creditInfo.type.toLowerCase() || 'credit';
+        var supported = {
+          'american express': 'amex',
+          'credit': 'credit',
+          'diners club': 'diners',
+          'discover': 'discover',
+          'jcb': 'jcb',
+          'mastercard': 'mastercard',
+          'visa': 'visa'
+        };
+
+        kind = supported[kind] || 'credit';
+        return kind + '.png';
+      };
+
+      var update = function() {
+        if (!$scope.user && !$scope.organization) { return; }
+        $scope.obj = $scope.user ? $scope.user : $scope.organization;
+        $scope.invoice_email = $scope.obj.invoice_email;
+
+        // Load the credit card information.
+        PlanService.getCardInfo($scope.organization ? $scope.organization.name : null, function(card) {
+          $scope.currentCard = card;
+        });
+      };
+
+      var save = function() {
+        $scope.working = true;
+
+        var errorHandler = ApiService.errorDisplay('Could not change user details');
+        ApiService.changeDetails($scope.organization, $scope.obj).then(function(resp) {
+          $scope.working = false;
+        }, errorHandler);
+      };
+
+      var checkSave = function() {
+        if (!$scope.obj) { return; }
+        if ($scope.obj.invoice_email != $scope.invoice_email) {
+          $scope.obj.invoice_email = $scope.invoice_email;
+          save();
+        }
+      };
+
+      $scope.$watch('invoice_email', checkSave);
+      $scope.$watch('organization', update);
+      $scope.$watch('user', update);
+    }
+  };
+  return directiveDefinitionObject;
+});