Add ability to view and change the credit card associated with an account
This commit is contained in:
Joseph Schorr
parent
68f58eb856
commit
cc0f042c00
23 changed files with 290 additions and 26 deletions
161
static/js/app.js
161
static/js/app.js
|
|
@ -122,8 +122,22 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
|
|||
$provide.factory('PlanService', ['Restangular', 'KeyService', 'UserService', function(Restangular, KeyService, UserService) {
|
||||
var plans = null;
|
||||
var planDict = {};
|
||||
var planService = {}
|
||||
var planService = {};
|
||||
var listeners = [];
|
||||
|
||||
planService.registerListener = function(obj, callback) {
|
||||
listeners.push({'obj': obj, 'callback': callback});
|
||||
};
|
||||
|
||||
planService.unregisterListener = function(obj) {
|
||||
for (var i = 0; i < listeners.length; ++i) {
|
||||
if (listeners[i].obj == obj) {
|
||||
listeners.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
planService.verifyLoaded = function(callback) {
|
||||
if (plans) {
|
||||
callback(plans);
|
||||
|
|
@ -192,8 +206,8 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
|
|||
});
|
||||
};
|
||||
|
||||
planService.getSubscription = function(organization, success, failure) {
|
||||
var url = planService.getSubscriptionUrl(organization);
|
||||
planService.getSubscription = function(orgname, success, failure) {
|
||||
var url = planService.getSubscriptionUrl(orgname);
|
||||
var getSubscription = Restangular.one(url);
|
||||
getSubscription.get().then(success, failure);
|
||||
};
|
||||
|
|
@ -213,7 +227,14 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
|
|||
|
||||
var url = planService.getSubscriptionUrl(orgname);
|
||||
var createSubscriptionRequest = Restangular.one(url);
|
||||
createSubscriptionRequest.customPUT(subscriptionDetails).then(success, failure);
|
||||
createSubscriptionRequest.customPUT(subscriptionDetails).then(function(resp) {
|
||||
success(resp);
|
||||
planService.getPlan(planId, function(plan) {
|
||||
for (var i = 0; i < listeners.length; ++i) {
|
||||
listeners[i]['callback'](plan);
|
||||
}
|
||||
});
|
||||
}, failure);
|
||||
};
|
||||
|
||||
planService.changePlan = function($scope, orgname, planId, hasExistingSubscription, callbacks) {
|
||||
|
|
@ -228,6 +249,58 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
|
|||
planService.setSubscription(orgname, planId, callbacks['success'], callbacks['failure']);
|
||||
};
|
||||
|
||||
planService.changeCreditCard = function($scope, orgname, callbacks) {
|
||||
if (callbacks['opening']) {
|
||||
callbacks['opening']();
|
||||
}
|
||||
|
||||
var submitToken = function(token) {
|
||||
$scope.$apply(function() {
|
||||
if (callbacks['started']) {
|
||||
callbacks['started']();
|
||||
}
|
||||
|
||||
var cardInfo = {
|
||||
'token': token.id
|
||||
};
|
||||
|
||||
var url = orgname ? getRestUrl('organization', orgname, 'card') : 'user/card';
|
||||
var changeCardRequest = Restangular.one(url);
|
||||
changeCardRequest.customPOST(cardInfo).then(callbacks['success'], callbacks['failure']);
|
||||
});
|
||||
};
|
||||
|
||||
var email = planService.getEmail(orgname);
|
||||
StripeCheckout.open({
|
||||
key: KeyService.stripePublishableKey,
|
||||
address: false,
|
||||
email: email,
|
||||
currency: 'usd',
|
||||
name: 'Update credit card',
|
||||
description: 'Enter your credit card number',
|
||||
panelLabel: 'Update',
|
||||
token: submitToken,
|
||||
image: 'static/img/quay-icon-stripe.png',
|
||||
opened: function() { $scope.$apply(function() { callbacks['opened']() }); },
|
||||
closed: function() { $scope.$apply(function() { callbacks['closed']() }); }
|
||||
});
|
||||
};
|
||||
|
||||
planService.getEmail = function(orgname) {
|
||||
var email = null;
|
||||
if (UserService.currentUser()) {
|
||||
email = UserService.currentUser().email;
|
||||
|
||||
if (orgname) {
|
||||
org = UserService.getOrganization(orgname);
|
||||
if (org) {
|
||||
emaiil = org.email;
|
||||
}
|
||||
}
|
||||
}
|
||||
return email;
|
||||
};
|
||||
|
||||
planService.showSubscribeDialog = function($scope, orgname, planId, callbacks) {
|
||||
if (callbacks['opening']) {
|
||||
callbacks['opening']();
|
||||
|
|
@ -245,18 +318,7 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
|
|||
};
|
||||
|
||||
planService.getPlan(planId, function(planDetails) {
|
||||
var email = null;
|
||||
if (UserService.currentUser()) {
|
||||
email = UserService.currentUser().email;
|
||||
|
||||
if (orgname) {
|
||||
org = UserService.getOrganization(orgname);
|
||||
if (org) {
|
||||
emaiil = org.email;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var email = planService.getEmail(orgname);
|
||||
StripeCheckout.open({
|
||||
key: KeyService.stripePublishableKey,
|
||||
address: false,
|
||||
|
|
@ -632,13 +694,71 @@ quayApp.directive('billingOptions', function () {
|
|||
'user': '=user',
|
||||
'organization': '=organization'
|
||||
},
|
||||
controller: function($scope, $element, Restangular) {
|
||||
controller: function($scope, $element, PlanService, Restangular) {
|
||||
$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.changeCard = function() {
|
||||
$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() {
|
||||
$('#couldnotchangecardModal').modal({});
|
||||
$scope.changingCard = false;
|
||||
}
|
||||
};
|
||||
|
||||
PlanService.changeCreditCard($scope, $scope.organization ? $scope.organization.name : null, callbacks);
|
||||
};
|
||||
|
||||
$scope.getCreditImage = function(creditInfo) {
|
||||
if (!creditInfo) { 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.
|
||||
var url = $scope.organization ?
|
||||
getRestUrl('organization', $scope.organization.name, 'card') : 'user/card';
|
||||
|
||||
var getCard = Restangular.one(url);
|
||||
getCard.customGET().then(function(resp) {
|
||||
$scope.currentCard = resp.card;
|
||||
});
|
||||
};
|
||||
|
||||
var save = function() {
|
||||
|
|
@ -677,7 +797,8 @@ quayApp.directive('planManager', function () {
|
|||
scope: {
|
||||
'user': '=user',
|
||||
'organization': '=organization',
|
||||
'readyForPlan': '&readyForPlan'
|
||||
'readyForPlan': '&readyForPlan',
|
||||
'planChanged': '&planChanged'
|
||||
},
|
||||
controller: function($scope, $element, PlanService, Restangular) {
|
||||
var hasSubscription = false;
|
||||
|
|
@ -715,6 +836,10 @@ quayApp.directive('planManager', function () {
|
|||
PlanService.getPlan(sub.plan, function(subscribedPlan) {
|
||||
$scope.subscribedPlan = subscribedPlan;
|
||||
$scope.planUsagePercent = sub.usedPrivateRepos * 100 / $scope.subscribedPlan.privateRepos;
|
||||
|
||||
if ($scope.planChanged) {
|
||||
$scope.planChanged({ 'plan': subscribedPlan });
|
||||
}
|
||||
|
||||
if (sub.usedPrivateRepos > $scope.subscribedPlan.privateRepos) {
|
||||
$scope.limit = 'over';
|
||||
|
|
|
|||
Reference in a new issue