2018-07-16 23:17:07 +02:00
|
|
|
<div class="page-header">
|
|
|
|
<h1>
|
2019-02-18 21:28:23 +01:00
|
|
|
{{'subscription' | i18n}}
|
2018-07-16 23:17:07 +02:00
|
|
|
<small>
|
2018-07-18 05:27:56 +02:00
|
|
|
<i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
2018-07-16 23:17:07 +02:00
|
|
|
</small>
|
|
|
|
</h1>
|
|
|
|
</div>
|
2018-07-18 05:27:56 +02:00
|
|
|
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
2019-02-18 21:28:23 +01:00
|
|
|
<ng-container *ngIf="sub">
|
2018-07-16 23:17:07 +02:00
|
|
|
<app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">{{'subscriptionCanceled' | i18n}}</app-callout>
|
|
|
|
<app-callout type="warning" title="{{'pendingCancellation' | i18n}}" *ngIf="subscriptionMarkedForCancel">
|
|
|
|
<p>{{'subscriptionPendingCanceled' | i18n}}</p>
|
|
|
|
<button #reinstateBtn type="button" class="btn btn-outline-secondary btn-submit" (click)="reinstate()" [appApiAction]="reinstatePromise"
|
|
|
|
[disabled]="reinstateBtn.loading">
|
2018-07-18 05:15:15 +02:00
|
|
|
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
2018-07-16 23:17:07 +02:00
|
|
|
<span>{{'reinstateSubscription' | i18n}}</span>
|
|
|
|
</button>
|
|
|
|
</app-callout>
|
|
|
|
<dl *ngIf="selfHosted">
|
|
|
|
<dt>{{'billingPlan' | i18n}}</dt>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dd>{{sub.plan}}</dd>
|
2018-07-16 23:17:07 +02:00
|
|
|
<dt>{{'expiration' | i18n}}</dt>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dd *ngIf="sub.expiration">
|
|
|
|
{{sub.expiration | date:'mediumDate'}}
|
2018-08-01 22:51:25 +02:00
|
|
|
<span *ngIf="isExpired" class="text-danger ml-2">
|
|
|
|
<i class="fa fa-exclamation-triangle"></i>
|
|
|
|
{{'licenseIsExpired' | i18n}}
|
|
|
|
</span>
|
|
|
|
</dd>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
|
2018-07-16 23:17:07 +02:00
|
|
|
</dl>
|
|
|
|
<div class="row" *ngIf="!selfHosted">
|
|
|
|
<div class="col-4">
|
|
|
|
<dl>
|
|
|
|
<dt>{{'billingPlan' | i18n}}</dt>
|
2019-02-18 21:28:23 +01:00
|
|
|
<dd>{{sub.plan}}</dd>
|
2018-07-16 23:17:07 +02:00
|
|
|
<ng-container *ngIf="subscription">
|
|
|
|
<dt>{{'status' | i18n}}</dt>
|
|
|
|
<dd>
|
|
|
|
<span class="text-capitalize">{{subscription.status || '-'}}</span>
|
|
|
|
<span class="badge badge-warning" *ngIf="subscriptionMarkedForCancel">{{'pendingCancellation' | i18n}}</span>
|
|
|
|
</dd>
|
|
|
|
<dt>{{'nextCharge' | i18n}}</dt>
|
|
|
|
<dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$'))
|
|
|
|
: '-'}}
|
|
|
|
</dd>
|
|
|
|
</ng-container>
|
|
|
|
</dl>
|
|
|
|
</div>
|
|
|
|
<div class="col-8" *ngIf="subscription">
|
|
|
|
<strong class="d-block mb-1">{{'details' | i18n}}</strong>
|
|
|
|
<table class="table">
|
|
|
|
<tbody>
|
|
|
|
<tr *ngFor="let i of subscription.items">
|
|
|
|
<td>
|
|
|
|
{{i.name}} {{i.quantity > 1 ? '×' + i.quantity : ''}} @ {{i.amount | currency:'$'}}
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
{{(i.quantity * i.amount) | currency:'$'}} /{{i.interval | i18n}}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ng-container *ngIf="selfHosted">
|
|
|
|
<div>
|
|
|
|
<button type="button" class="btn btn-outline-secondary" (click)="updateLicense()">
|
|
|
|
{{'updateLicense' | i18n}}
|
|
|
|
</button>
|
2018-07-18 04:49:53 +02:00
|
|
|
<a href="https://vault.bitwarden.com" target="_blank" rel="noopener" class="btn btn-outline-secondary">
|
2018-07-16 23:17:07 +02:00
|
|
|
{{'manageSubscription' | i18n}}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="card mt-3" *ngIf="showUpdateLicense">
|
|
|
|
<div class="card-body">
|
|
|
|
<h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
|
2018-07-18 04:49:53 +02:00
|
|
|
<app-update-license [organizationId]="organizationId" (onUpdated)="closeUpdateLicense(true)" (onCanceled)="closeUpdateLicense(false)"></app-update-license>
|
2018-07-16 23:17:07 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="!selfHosted">
|
|
|
|
<div class="d-flex">
|
|
|
|
<button type="button" class="btn btn-outline-secondary" (click)="changePlan()">
|
|
|
|
{{'changeBillingPlan' | i18n}}
|
|
|
|
</button>
|
2018-07-17 17:25:41 +02:00
|
|
|
<button type="button" class="btn btn-outline-secondary btn-submit ml-1" #licenseBtn [appApiAction]="licensePromise" [disabled]="licenseBtn.loading"
|
2018-07-20 18:16:41 +02:00
|
|
|
(click)="downloadLicense()" *ngIf="canDownloadLicense">
|
2018-07-18 05:15:15 +02:00
|
|
|
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
2018-07-17 17:25:41 +02:00
|
|
|
<span>{{'downloadLicense' | i18n}}</span>
|
2018-07-16 23:17:07 +02:00
|
|
|
</button>
|
|
|
|
<button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()" [appApiAction]="cancelPromise"
|
|
|
|
[disabled]="cancelBtn.loading" *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
|
2018-07-18 05:15:15 +02:00
|
|
|
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
2018-07-16 23:17:07 +02:00
|
|
|
<span>{{'cancelSubscription' | i18n}}</span>
|
|
|
|
</button>
|
|
|
|
</div>
|
2018-07-17 18:07:52 +02:00
|
|
|
<h2 class="spaced-header">{{'userSeats' | i18n}}</h2>
|
2019-02-18 21:28:23 +01:00
|
|
|
<p>{{'subscriptionUserSeats' | i18n : sub.seats}}</p>
|
|
|
|
<ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">
|
2018-07-17 18:07:52 +02:00
|
|
|
<div class="mt-3">
|
|
|
|
<div class="d-flex" *ngIf="!showAdjustSeats">
|
|
|
|
<button type="button" class="btn btn-outline-secondary" (click)="adjustSeats(true)">
|
|
|
|
{{'addSeats' | i18n}}
|
|
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustSeats(false)">
|
|
|
|
{{'removeSeats' | i18n}}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<app-adjust-seats [seatPrice]="seatPrice" [add]="adjustSeatsAdd" [organizationId]="organizationId" [interval]="billingInterval"
|
|
|
|
(onAdjusted)="closeSeats(true)" (onCanceled)="closeSeats(false)" *ngIf="showAdjustSeats"></app-adjust-seats>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
2018-07-16 23:17:07 +02:00
|
|
|
<h2 class="spaced-header">{{'storage' | i18n}}</h2>
|
2019-02-18 21:28:23 +01:00
|
|
|
<p>{{'subscriptionStorage' | i18n : sub.maxStorageGb || 0 : sub.storageName || '0 MB'}}</p>
|
2018-07-16 23:17:07 +02:00
|
|
|
<div class="progress">
|
|
|
|
<div class="progress-bar bg-success" role="progressbar" [ngStyle]="{width: storageProgressWidth + '%' }" [attr.aria-valuenow]="storagePercentage"
|
|
|
|
aria-valuemin="0" aria-valuemax="100">{{(storagePercentage / 100) | percent}}</div>
|
|
|
|
</div>
|
2019-02-18 21:28:23 +01:00
|
|
|
<ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
|
2018-07-16 23:17:07 +02:00
|
|
|
<div class="mt-3">
|
|
|
|
<div class="d-flex" *ngIf="!showAdjustStorage">
|
|
|
|
<button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
|
|
|
|
{{'addStorage' | i18n}}
|
|
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustStorage(false)">
|
|
|
|
{{'removeStorage' | i18n}}
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<app-adjust-storage [storageGbPrice]="storageGbPrice" [add]="adjustStorageAdd" [organizationId]="organizationId" [interval]="billingInterval"
|
|
|
|
(onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)" *ngIf="showAdjustStorage"></app-adjust-storage>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
|
|
</ng-container>
|