change payment

src/app/organization/organizationBillingChangePaymentController.js

@@ -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();
             });
         };

src/app/organization/organizationBillingController.js

@@ -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 = {
+                $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 = [];
                     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 () {
-
-        };
     });

src/app/organization/views/organizationBilling.html

@@ -23,12 +23,12 @@
                     <dl>
                         <dt>Status</dt>
                         <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>
                 </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>

src/app/organization/views/organizationBillingChangePayment.html

@@ -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">