<section class="content-header">
<h1>
Billing
<small>manage your billing & licensing</small>
</h1>
</section>
<section class="content">
<div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
<h4><i class="fa fa-warning"></i> Canceled</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 box-default">
<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 ng-if="selfHosted">
<dt>Name</dt>
<dd>{{plan.name || '-'}}</dd>
<dt>Expiration</dt>
<dd ng-if="loading">
Loading...
</dd>
<dd ng-if="!loading && expiration">
{{expiration | date: 'medium'}}
</dd>
<dd ng-if="!loading && !expiration">
Never expires
</dd>
</dl>
<dl ng-if="!selfHosted">
<dt>Name</dt>
<dd>{{plan.name || '-'}}</dd>
<dt>Total Seats</dt>
<dd>{{plan.seats || '-'}}</dd>
</dl>
</div>
<div class="col-sm-6" ng-if="!selfHosted">
<dl>
<dt>Status</dt>
<dd>
<span style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</span>
<span ng-if="subscription.markedForCancel">- marked for cancellation</span>
</dd>
<dt>Next Charge</dt>
<dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
</dl>
</div>
</div>
<div class="row" ng-if="!selfHosted && !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 ? '×' + 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" ng-if="!selfHosted">
<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>
<button type="button" class="btn btn-default btn-flat" ng-click="license()"
ng-if="!subscription.cancelled">
Download License
</button>
</div>
<div class="box-footer" ng-if="selfHosted">
<button type="button" class="btn btn-default btn-flat" ng-click="updateLicense()">
Update License
</button>
<a href="https://vault.bitwarden.com" class="btn btn-default btn-flat" target="_blank">
Manage Billing
</a>
</div>
</div>
<div class="box box-default">
<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">
Your plan currently has a total of <b>{{plan.seats}}</b> seats.
</div>
</div>
<div class="box-footer" ng-if="!selfHosted && !noSubscription && canAdjustSeats">
<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 box-default" ng-if="storage && !selfHosted">
<div class="box-header with-border">
<h3 class="box-title">Storage</h3>
</div>
<div class="box-body">
<p>
Your plan has a total of {{storage.maxGb}} GB of encrypted file storage.
You are currently using {{storage.currentName}}.
</p>
<div class="progress" style="margin: 0;">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="{{storage.percentage}}" aria-valuemin="0" aria-valuemax="1"
style="min-width: 50px; width: {{storage.percentage}}%;">
{{storage.percentage}}%
</div>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(true)">
Add Storage
</button>
<button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(false)">
Remove Storage
</button>
</div>
</div>
<div class="box box-default" ng-if="!selfHosted">
<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">
<div class="callout callout-warning" ng-if="paymentSource.type === 1 && paymentSource.needsVerification">
<h4><i class="fa fa-warning"></i> You must verify your bank account</h4>
<p>
We have made two micro-deposits to your bank account (it may take 1-2 business days to show up).
Enter these amounts to verify the bank account. Failure to verify the bank account will result in a
missed payment and your organization being disabled.
</p>
<button class="btn btn-default btn-flat" ng-click="verifyBank()">Verify Now</button>
</div>
<i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></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 box-default" ng-if="!selfHosted">
<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: 30px">
<a href="#" stop-click ng-click="viewInvoice(charge)" title="Invoice">
<i class="fa fa-file-pdf-o"></i>
</a>
</td>
<td style="width: 200px">
{{charge.date | date: 'mediumDate'}}
</td>
<td style="min-width: 150px">
{{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 appear on your statement as <b>BITWARDEN</b>.
</div>
</div>
</section>