1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-09 09:51:02 +01:00

change payment

This commit is contained in:
Kyle Spearrin 2017-04-10 11:30:23 -04:00
parent 40d38ec0db
commit f8fcbbea85
4 changed files with 86 additions and 31 deletions

View File

@ -2,7 +2,9 @@
.module('bit.organization') .module('bit.organization')
.controller('organizationBillingChangePaymentController', function ($scope, $state, $uibModalInstance, apiService, stripe, .controller('organizationBillingChangePaymentController', function ($scope, $state, $uibModalInstance, apiService, stripe,
$analytics) { $analytics, toastr, existingPaymentMethod) {
$scope.existingPaymentMethod = existingPaymentMethod;
$scope.submit = function () { $scope.submit = function () {
$scope.submitPromise = stripe.card.createToken($scope.card).then(function (response) { $scope.submitPromise = stripe.card.createToken($scope.card).then(function (response) {
var request = { var request = {
@ -12,7 +14,15 @@
return apiService.organizations.putPayment({ id: $state.params.orgId }, request).$promise; return apiService.organizations.putPayment({ id: $state.params.orgId }, request).$promise;
}).then(function (response) { }).then(function (response) {
$scope.card = null; $scope.card = null;
$analytics.eventTrack('Changed Payment Method'); if (existingPaymentMethod) {
$analytics.eventTrack('Changed Payment Method');
toastr.success('You have changed your payment method.');
}
else {
$analytics.eventTrack('Added Payment Method');
toastr.success('You have added a payment method.');
}
$uibModalInstance.close(); $uibModalInstance.close();
}); });
}; };

View File

@ -9,8 +9,34 @@
$scope.loading = true; $scope.loading = true;
$scope.$on('$viewContentLoaded', function () { $scope.$on('$viewContentLoaded', function () {
load();
});
$scope.changePayment = function () {
var modal = $uibModal.open({
animation: true,
templateUrl: 'app/organization/views/organizationBillingChangePayment.html',
controller: 'organizationBillingChangePaymentController',
resolve: {
existingPaymentMethod: function () {
return $scope.paymentSource ? $scope.paymentSource.description : null;
}
}
});
modal.result.then(function () {
load();
});
};
$scope.cancel = function () {
};
function load() {
apiService.organizations.getBilling({ id: $state.params.orgId }, function (org) { apiService.organizations.getBilling({ id: $state.params.orgId }, function (org) {
$scope.loading = false; $scope.loading = false;
$scope.noSubscription = org.PlanType === 0;
$scope.plan = { $scope.plan = {
name: org.Plan, name: org.Plan,
@ -18,14 +44,24 @@
seats: org.Seats seats: org.Seats
}; };
$scope.subscription = { $scope.subscription = null;
trialEndDate: org.Subscription.TrialEndDate, if (org.Subscription) {
nextBillDate: org.Subscription.NextBillDate, $scope.subscription = {
cancelNext: org.Subscription.CancelAtNextBillDate, trialEndDate: org.Subscription.TrialEndDate,
status: org.Subscription.Status cancelNext: org.Subscription.CancelAtNextBillDate,
}; status: org.Subscription.Status
};
}
if (org.Subscription.Items) { $scope.nextBill = null;
if (org.UpcomingInvoice) {
$scope.nextBill = {
date: org.UpcomingInvoice.Date,
amount: org.UpcomingInvoice.Amount
};
}
if (org.Subscription && org.Subscription.Items) {
$scope.subscription.items = []; $scope.subscription.items = [];
for (var i = 0; i < org.Subscription.Items.length; i++) { for (var i = 0; i < org.Subscription.Items.length; i++) {
$scope.subscription.items.push({ $scope.subscription.items.push({
@ -37,6 +73,7 @@
} }
} }
$scope.paymentSource = null;
if (org.PaymentSource) { if (org.PaymentSource) {
$scope.paymentSource = { $scope.paymentSource = {
type: org.PaymentSource.Type, type: org.PaymentSource.Type,
@ -60,21 +97,5 @@
} }
$scope.charges = charges; $scope.charges = charges;
}); });
}); }
$scope.changePayment = function () {
var modal = $uibModal.open({
animation: true,
templateUrl: 'app/organization/views/organizationBillingChangePayment.html',
controller: 'organizationBillingChangePaymentController'
});
modal.result.then(function () {
// TODO: reload
});
};
$scope.cancel = function () {
};
}); });

View File

@ -23,12 +23,12 @@
<dl> <dl>
<dt>Status</dt> <dt>Status</dt>
<dd style="text-transform: capitalize;">{{subscription.status || '-'}}</dd> <dd style="text-transform: capitalize;">{{subscription.status || '-'}}</dd>
<dt>Next Bill Date</dt> <dt>Next Charge</dt>
<dd>{{subscription.nextBillDate ? (subscription.nextBillDate | date: format: mediumDate) : '-'}}</dd> <dd>{{nextBillDate ? ((nextBillDate | date: format: mediumDate) + ', ' + (nextBillAmount | currency:'$')) : '-'}}</dd>
</dl> </dl>
</div> </div>
</div> </div>
<div class="row"> <div class="row" ng-if="!noSubscription">
<div class="col-md-6"> <div class="col-md-6">
<strong>Details</strong> <strong>Details</strong>
<div ng-show="loading"> <div ng-show="loading">
@ -54,11 +54,32 @@
<button type="button" class="btn btn-default btn-flat" ng-click="changePlan()"> <button type="button" class="btn btn-default btn-flat" ng-click="changePlan()">
Change Plan Change Plan
</button> </button>
<button type="button" class="btn btn-default btn-flat" ng-click="cancel()"> <button type="button" class="btn btn-default btn-flat" ng-click="cancel()" ng-if="!noSubscription">
Cancel Plan Cancel Plan
</button> </button>
</div> </div>
</div> </div>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">User Seats</h3>
</div>
<div class="box-body">
<div ng-show="loading">
Loading...
</div>
<div ng-show="!loading">
You plan currently has a total of <b>{{plan.seats}}</b> seats.
</div>
</div>
<div class="box-footer" ng-if="!noSubscription">
<button type="button" class="btn btn-default btn-flat" ng-click="addSeats()">
Add Seats
</button>
<button type="button" class="btn btn-default btn-flat" ng-click="removeSeats()">
Remove Seats
</button>
</div>
</div>
<div class="box"> <div class="box">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title">Payment Method</h3> <h3 class="box-title">Payment Method</h3>

View File

@ -1,6 +1,9 @@
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><i class="fa fa-credit-card"></i> Change Payment Method</h4> <h4 class="modal-title">
<i class="fa fa-credit-card"></i>
{{existingPaymentMethod ? 'Change Payment Method' : 'Add Payment Method'}}
</h4>
</div> </div>
<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise"> <form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
<div class="modal-body"> <div class="modal-body">