231 lines
10 KiB
HTML
231 lines
10 KiB
HTML
|
<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>
|