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')
.controller('organizationBillingChangePaymentController', function ($scope, $state, $uibModalInstance, apiService, stripe,
$analytics) {
$analytics, toastr, existingPaymentMethod) {
$scope.existingPaymentMethod = existingPaymentMethod;
$scope.submit = function () {
$scope.submitPromise = stripe.card.createToken($scope.card).then(function (response) {
var request = {
@ -12,7 +14,15 @@
return apiService.organizations.putPayment({ id: $state.params.orgId }, request).$promise;
}).then(function (response) {
$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();
});
};

View File

@ -9,8 +9,34 @@
$scope.loading = true;
$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) {
$scope.loading = false;
$scope.noSubscription = org.PlanType === 0;
$scope.plan = {
name: org.Plan,
@ -18,14 +44,24 @@
seats: org.Seats
};
$scope.subscription = {
trialEndDate: org.Subscription.TrialEndDate,
nextBillDate: org.Subscription.NextBillDate,
cancelNext: org.Subscription.CancelAtNextBillDate,
status: org.Subscription.Status
};
$scope.subscription = null;
if (org.Subscription) {
$scope.subscription = {
trialEndDate: org.Subscription.TrialEndDate,
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 = [];
for (var i = 0; i < org.Subscription.Items.length; i++) {
$scope.subscription.items.push({
@ -37,6 +73,7 @@
}
}
$scope.paymentSource = null;
if (org.PaymentSource) {
$scope.paymentSource = {
type: org.PaymentSource.Type,
@ -60,21 +97,5 @@
}
$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>
<dt>Status</dt>
<dd style="text-transform: capitalize;">{{subscription.status || '-'}}</dd>
<dt>Next Bill Date</dt>
<dd>{{subscription.nextBillDate ? (subscription.nextBillDate | date: format: mediumDate) : '-'}}</dd>
<dt>Next Charge</dt>
<dd>{{nextBillDate ? ((nextBillDate | date: format: mediumDate) + ', ' + (nextBillAmount | currency:'$')) : '-'}}</dd>
</dl>
</div>
</div>
<div class="row">
<div class="row" ng-if="!noSubscription">
<div class="col-md-6">
<strong>Details</strong>
<div ng-show="loading">
@ -54,11 +54,32 @@
<button type="button" class="btn btn-default btn-flat" ng-click="changePlan()">
Change Plan
</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
</button>
</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-header with-border">
<h3 class="box-title">Payment Method</h3>

View File

@ -1,6 +1,9 @@
<div class="modal-header">
<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>
<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
<div class="modal-body">