web/src/app/organization/views/organizationBilling.html

<section class="content-header">
    <h1>
        Billing
        <small>manage your payments</small>
    </h1>
</section>
<section class="content">
    <div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
        <h4><i class="fa fa-warning"></i> Cancelled</h4>
        The subscription to this organization has been canceled.
    </div>
    <div class="callout callout-warning" ng-if="subscription && subscription.markedForCancel">
        <h4><i class="fa fa-warning"></i> Pending Cancellation</h4>
        <p>
            The subscription to this organization has been marked for cancellation at the end of the
            current billing period.
        </p>
        <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()">
            Reinstate Plan
        </button>
    </div>
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Plan</h3>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-6">
                    <dl>
                        <dt>Name</dt>
                        <dd>{{plan.name || '-'}}</dd>
                        <dt>Total Seats</dt>
                        <dd>{{plan.seats || '-'}}</dd>
                    </dl>
                </div>
                <div class="col-sm-6">
                    <dl>
                        <dt>Status</dt>
                        <dd style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</dd>
                        <dt>Next Charge</dt>
                        <dd>{{nextInvoice ? ((nextInvoice.date | date: format: mediumDate) + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
                    </dl>
                </div>
            </div>
            <div class="row" ng-if="!noSubscription">
                <div class="col-md-6">
                    <strong>Details</strong>
                    <div ng-show="loading">
                        Loading...
                    </div>
                    <div class="table-responsive" style="margin: 0;" ng-show="!loading">
                        <table class="table" style="margin: 0;">
                            <tbody>
                                <tr ng-repeat="item in subscription.items">
                                    <td>
                                        {{item.name}} {{item.qty > 1 ? '&times;' + item.qty : ''}}
                                        @ {{item.amount | currency:'$'}} /{{item.interval}}
                                    </td>
                                    <td class="text-right">{{(item.qty * item.amount) | currency:'$'}} /{{item.interval}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <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()"
                    ng-if="!noSubscription && !subscription.cancelled && !subscription.markedForCancel">
                Cancel Plan
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()"
                    ng-if="!noSubscription && subscription.markedForCancel">
                Reinstate 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="adjustSeats(true)">
                Add Seats
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustSeats(false)">
                Remove Seats
            </button>
        </div>
    </div>
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Payment Method</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading && !paymentSource">
                <i class="fa fa-credit-card"></i> No payment method on file.
            </div>
            <div ng-show="!loading && paymentSource">
                <i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
                   'fa-university': paymentSource.type === 1}"></i>
                {{paymentSource.description}}
            </div>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-flat" ng-click="changePayment()">
                {{ paymentSource ? 'Change Payment Method' : 'Add Payment Method' }}
            </button>
        </div>
    </div>
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Charges</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading && !charges.length">
                No charges.
            </div>
            <div class="table-responsive" ng-show="charges.length">
                <table class="table">
                    <tbody>
                        <tr ng-repeat="charge in charges">
                            <td style="width: 200px">
                                {{charge.date | date: format: mediumDate}}
                            </td>
                            <td>
                                {{charge.paymentSource}}
                            </td>
                            <td style="width: 150px; text-transform: capitalize;">
                                {{charge.status}}
                            </td>
                            <td class="text-right" style="width: 150px;">
                                {{charge.amount | currency:'$'}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer">
            Note: Any charges will appears on your credit card statement as <b>BITWARDEN</b>.
        </div>
    </div>
</section>