mirror of
https://github.com/bitwarden/web
synced 2026-01-03 17:13:58 +00:00
split billing and subscription management up
This commit is contained in:
Kyle Spearrin
@@ -45,7 +45,7 @@ export class PremiumComponent implements OnInit {
|
||||
this.canAccessPremium = await this.userService.canAccessPremium();
|
||||
const premium = await this.tokenService.getPremium();
|
||||
if (premium) {
|
||||
this.router.navigate(['/settings/billing']);
|
||||
this.router.navigate(['/settings/subscription']);
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -95,7 +95,7 @@ export class PremiumComponent implements OnInit {
|
||||
this.analytics.eventTrack.next({ action: 'Signed Up Premium' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('premiumUpdated'));
|
||||
this.messagingService.send('purchasedPremium');
|
||||
this.router.navigate(['/settings/billing']);
|
||||
this.router.navigate(['/settings/subscription']);
|
||||
}
|
||||
|
||||
get additionalStorageTotal(): number {
|
||||
|
||||
@@ -13,12 +13,15 @@
|
||||
<a routerLink="organizations" class="list-group-item" routerLinkActive="active">
|
||||
{{'organizations' | i18n}}
|
||||
</a>
|
||||
<a routerLink="billing" class="list-group-item" routerLinkActive="active" *ngIf="premium">
|
||||
{{'billingAndLicensing' | i18n}}
|
||||
<a routerLink="subscription" class="list-group-item" routerLinkActive="active" *ngIf="premium">
|
||||
{{'premiumMembership' | i18n}}
|
||||
</a>
|
||||
<a routerLink="premium" class="list-group-item" routerLinkActive="active" *ngIf="!premium">
|
||||
{{'goPremium' | i18n}}
|
||||
</a>
|
||||
<a routerLink="billing" class="list-group-item" routerLinkActive="active">
|
||||
{{'billing' | i18n}}
|
||||
</a>
|
||||
<a routerLink="two-factor" class="list-group-item" routerLinkActive="active">
|
||||
{{'twoStepLogin' | i18n}}
|
||||
</a>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
{{'billingAndLicensing' | i18n}}
|
||||
{{'billing' | i18n}}
|
||||
<small>
|
||||
<i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
||||
</small>
|
||||
@@ -8,163 +8,96 @@
|
||||
</div>
|
||||
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
||||
<ng-container *ngIf="billing">
|
||||
<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">
|
||||
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
||||
<span>{{'reinstateSubscription' | i18n}}</span>
|
||||
</button>
|
||||
</app-callout>
|
||||
<dl>
|
||||
<dt>{{'subscription' | i18n}}</dt>
|
||||
<dd>{{'premiumMembership' | i18n}}</dd>
|
||||
</dl>
|
||||
<dl *ngIf="selfHosted">
|
||||
<dt>{{'expiration' | i18n}}</dt>
|
||||
<dd *ngIf="billing.expiration">{{billing.expiration | date:'mediumDate'}}</dd>
|
||||
<dd *ngIf="!billing.expiration">{{'neverExpires' | i18n}}</dd>
|
||||
</dl>
|
||||
<div class="row" *ngIf="!selfHosted">
|
||||
<div class="col-4">
|
||||
<dl>
|
||||
<dt>{{'status' | i18n}}</dt>
|
||||
<dd>
|
||||
<span class="text-capitalize">{{(subscription && 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>
|
||||
</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>
|
||||
<a href="https://vault.bitwarden.com/#/settings/billing" target="_blank" rel="noopener" class="btn btn-outline-secondary">
|
||||
{{'manageSubscription' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="card mt-3" *ngIf="showUpdateLicense">
|
||||
<div class="card-body">
|
||||
<h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
|
||||
<app-update-license (onUpdated)="closeUpdateLicense(true)" (onCanceled)="closeUpdateLicense(false)"></app-update-license>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!selfHosted">
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="downloadLicense()" *ngIf="!subscription || !subscription.cancelled">
|
||||
{{'downloadLicense' | i18n}}
|
||||
</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">
|
||||
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
||||
<span>{{'cancelSubscription' | i18n}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<h2 class="spaced-header">{{'storage' | i18n}}</h2>
|
||||
<p>{{'subscriptionStorage' | i18n : billing.maxStorageGb || 0 : billing.storageName || '0 MB'}}</p>
|
||||
<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>
|
||||
<ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel && paymentSource">
|
||||
<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="ml-1 btn btn-outline-secondary" (click)="adjustStorage(false)">
|
||||
{{'removeStorage' | i18n}}
|
||||
</button>
|
||||
<h2>{{'paymentMethod' | i18n}}</h2>
|
||||
<p *ngIf="!paymentSource">{{'noPaymentMethod' | i18n}}</p>
|
||||
<ng-container *ngIf="paymentSource">
|
||||
<app-callout type="warning" title="{{'verifyBankAccount' | i18n}}"
|
||||
*ngIf="paymentSource.type === paymentMethodType.BankAccount && paymentSource.needsVerification">
|
||||
<p>{{'verifyBankAccountDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}</p>
|
||||
<form #verifyForm class="form-inline" (ngSubmit)="verifyBank()" [appApiAction]="verifyBankPromise"
|
||||
ngNativeValidate>
|
||||
<label class="sr-only" for="verifyAmount1">{{'amount' | i18n : '1'}}</label>
|
||||
<div class="input-group mr-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">$0.</div>
|
||||
</div>
|
||||
<input type="number" class="form-control" id="verifyAmount1" placeholder="xx" name="Amount1"
|
||||
[(ngModel)]="verifyAmount1" min="1" max="99" step="1" required>
|
||||
</div>
|
||||
<app-adjust-storage [storageGbPrice]="4" [add]="adjustStorageAdd" (onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)"
|
||||
*ngIf="showAdjustStorage"></app-adjust-storage>
|
||||
</div>
|
||||
</ng-container>
|
||||
<h2 class="spaced-header">{{'paymentMethod' | i18n}}</h2>
|
||||
<p *ngIf="!paymentSource">{{'noPaymentMethod' | i18n}}</p>
|
||||
<p *ngIf="paymentSource">
|
||||
<label class="sr-only" for="verifyAmount2">{{'amount' | i18n : '2'}}</label>
|
||||
<div class="input-group mr-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">$0.</div>
|
||||
</div>
|
||||
<input type="number" class="form-control" id="verifyAmount2" placeholder="xx" name="Amount2"
|
||||
[(ngModel)]="verifyAmount2" min="1" max="99" step="1" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-primary btn-submit" [disabled]="verifyForm.loading">
|
||||
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
||||
<span>{{'verifyBankAccount' | i18n}}</span>
|
||||
</button>
|
||||
</form>
|
||||
</app-callout>
|
||||
<p>
|
||||
<i class="fa fa-fw" [ngClass]="{'fa-credit-card': paymentSource.type === paymentMethodType.Card,
|
||||
'fa-university': paymentSource.type === paymentMethodType.BankAccount,
|
||||
'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal}"></i>
|
||||
'fa-university': paymentSource.type === paymentMethodType.BankAccount,
|
||||
'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal}"></i>
|
||||
{{paymentSource.description}}
|
||||
</p>
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
|
||||
{{(paymentSource ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}
|
||||
</button>
|
||||
<app-adjust-payment [currentType]="paymentSource != null ? paymentSource.type : null" (onAdjusted)="closePayment(true)" (onCanceled)="closePayment(false)"
|
||||
*ngIf="showAdjustPayment">
|
||||
</app-adjust-payment>
|
||||
<h2 class="spaced-header">{{'invoices' | i18n}}</h2>
|
||||
<p *ngIf="!invoices || !invoices.length">{{'noInvoices' | i18n}}</p>
|
||||
<table class="table mb-2" *ngIf="invoices && invoices.length">
|
||||
<tbody>
|
||||
<tr *ngFor="let i of invoices">
|
||||
<td>{{i.date | date:'mediumDate'}}</td>
|
||||
<td>
|
||||
<a href="{{i.pdfUrl}}" target="_blank" rel="noopener" class="mr-2" title="{{'downloadInvoice' | i18n}}">
|
||||
<i class="fa fa-file-pdf-o"></i></a>
|
||||
<a href="{{i.url}}" target="_blank" rel="noopener" title="{{'viewInvoice' | i18n}}">
|
||||
{{'invoiceNumber' | i18n : i.number}}</a>
|
||||
</td>
|
||||
<td>{{i.amount | currency:'$'}}</td>
|
||||
<td>
|
||||
<span *ngIf="i.paid">
|
||||
<i class="fa fa-check text-success"></i>
|
||||
{{'paid' | i18n}}
|
||||
</span>
|
||||
<span *ngIf="!i.paid">
|
||||
<i class="fa fa-exclamation-circle text-muted"></i>
|
||||
{{'unpaid' | i18n}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 class="spaced-header">{{'transactions' | i18n}}</h2>
|
||||
<p *ngIf="!transactions || !transactions.length">{{'noTransactions' | i18n}}</p>
|
||||
<table class="table mb-2" *ngIf="transactions && transactions.length">
|
||||
<tbody>
|
||||
<tr *ngFor="let t of transactions">
|
||||
<td>{{t.createdDate | date:'mediumDate'}}</td>
|
||||
<td>
|
||||
<span *ngIf="t.type === transactionType.Charge">{{'chargeNoun' | i18n}}</span>
|
||||
<span *ngIf="t.type === transactionType.Refund">{{'chargeRefund' | i18n}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fa fa-fw"
|
||||
*ngIf="t.type === transactionType.Charge || t.type === transactionType.Refund"
|
||||
[ngClass]="{'fa-credit-card': t.paymentMethodType === paymentMethodType.Card,
|
||||
</ng-container>
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
|
||||
{{(paymentSource ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}
|
||||
</button>
|
||||
<app-adjust-payment [currentType]="paymentSource != null ? paymentSource.type : null" [organizationId]="organizationId"
|
||||
(onAdjusted)="closePayment(true)" (onCanceled)="closePayment(false)" *ngIf="showAdjustPayment">
|
||||
</app-adjust-payment>
|
||||
<h2 class="spaced-header">{{'invoices' | i18n}}</h2>
|
||||
<p *ngIf="!invoices || !invoices.length">{{'noInvoices' | i18n}}</p>
|
||||
<table class="table mb-2" *ngIf="invoices && invoices.length">
|
||||
<tbody>
|
||||
<tr *ngFor="let i of invoices">
|
||||
<td>{{i.date | date:'mediumDate'}}</td>
|
||||
<td>
|
||||
<a href="{{i.pdfUrl}}" target="_blank" rel="noopener" class="mr-2" title="{{'downloadInvoice' | i18n}}">
|
||||
<i class="fa fa-file-pdf-o"></i></a>
|
||||
<a href="{{i.url}}" target="_blank" rel="noopener" title="{{'viewInvoice' | i18n}}">
|
||||
{{'invoiceNumber' | i18n : i.number}}</a>
|
||||
</td>
|
||||
<td>{{i.amount | currency:'$'}}</td>
|
||||
<td>
|
||||
<span *ngIf="i.paid">
|
||||
<i class="fa fa-check text-success"></i>
|
||||
{{'paid' | i18n}}
|
||||
</span>
|
||||
<span *ngIf="!i.paid">
|
||||
<i class="fa fa-exclamation-circle text-muted"></i>
|
||||
{{'unpaid' | i18n}}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 class="spaced-header">{{'transactions' | i18n}}</h2>
|
||||
<p *ngIf="!transactions || !transactions.length">{{'noTransactions' | i18n}}</p>
|
||||
<table class="table mb-2" *ngIf="transactions && transactions.length">
|
||||
<tbody>
|
||||
<tr *ngFor="let t of transactions">
|
||||
<td>{{t.createdDate | date:'mediumDate'}}</td>
|
||||
<td>
|
||||
<span *ngIf="t.type === transactionType.Charge">{{'chargeNoun' | i18n}}</span>
|
||||
<span *ngIf="t.type === transactionType.Refund">{{'chargeRefund' | i18n}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<i class="fa fa-fw" *ngIf="t.type === transactionType.Charge || t.type === transactionType.Refund"
|
||||
[ngClass]="{'fa-credit-card': t.paymentMethodType === paymentMethodType.Card,
|
||||
'fa-university': t.paymentMethodType === paymentMethodType.BankAccount,
|
||||
'fa-paypal text-primary': t.paymentMethodType === paymentMethodType.PayPal}"></i>
|
||||
{{t.details}}
|
||||
</td>
|
||||
<td [ngClass]="{'text-strike': t.refunded}" title="{{(t.refunded ? 'refunded' : '') | i18n}}">{{t.amount | currency:'$'}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<small class="text-muted">* {{'chargesStatement' | i18n : 'BITWARDEN'}}</small>
|
||||
</ng-container>
|
||||
{{t.details}}
|
||||
</td>
|
||||
<td [ngClass]="{'text-strike': t.refunded}" title="{{(t.refunded ? 'refunded' : '') | i18n}}">{{t.amount
|
||||
| currency:'$'}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<small class="text-muted">* {{'chargesStatement' | i18n : 'BITWARDEN'}}</small>
|
||||
</ng-container>
|
||||
|
||||
@@ -2,7 +2,6 @@ import {
|
||||
Component,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
@@ -11,11 +10,10 @@ import { BillingResponse } from 'jslib/models/response/billingResponse';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
import { TokenService } from 'jslib/abstractions/token.service';
|
||||
|
||||
import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
|
||||
import { TransactionType } from 'jslib/enums/transactionType';
|
||||
import { VerifyBankRequest } from 'jslib/models/request/verifyBankRequest';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-billing',
|
||||
@@ -24,24 +22,18 @@ import { TransactionType } from 'jslib/enums/transactionType';
|
||||
export class UserBillingComponent implements OnInit {
|
||||
loading = false;
|
||||
firstLoaded = false;
|
||||
adjustStorageAdd = true;
|
||||
showAdjustStorage = false;
|
||||
showAdjustPayment = false;
|
||||
showUpdateLicense = false;
|
||||
billing: BillingResponse;
|
||||
paymentMethodType = PaymentMethodType;
|
||||
transactionType = TransactionType;
|
||||
selfHosted = false;
|
||||
organizationId: string;
|
||||
verifyAmount1: number;
|
||||
verifyAmount2: number;
|
||||
|
||||
cancelPromise: Promise<any>;
|
||||
reinstatePromise: Promise<any>;
|
||||
verifyBankPromise: Promise<any>;
|
||||
|
||||
constructor(private tokenService: TokenService, private apiService: ApiService,
|
||||
private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
|
||||
private analytics: Angulartics2, private toasterService: ToasterService,
|
||||
private router: Router) {
|
||||
this.selfHosted = platformUtilsService.isSelfHost();
|
||||
}
|
||||
constructor(protected apiService: ApiService, protected i18nService: I18nService,
|
||||
protected analytics: Angulartics2, protected toasterService: ToasterService) { }
|
||||
|
||||
async ngOnInit() {
|
||||
await this.load();
|
||||
@@ -52,93 +44,32 @@ export class UserBillingComponent implements OnInit {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.tokenService.getPremium()) {
|
||||
this.loading = true;
|
||||
this.billing = await this.apiService.getUserBilling();
|
||||
this.loading = true;
|
||||
if (this.organizationId != null) {
|
||||
this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
|
||||
} else {
|
||||
this.router.navigate(['/settings/premium']);
|
||||
return;
|
||||
this.billing = await this.apiService.getUserBilling();
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
async reinstate() {
|
||||
async verifyBank() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('reinstateConfirmation'),
|
||||
this.i18nService.t('reinstateSubscription'), this.i18nService.t('yes'), this.i18nService.t('cancel'));
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.reinstatePromise = this.apiService.postReinstatePremium();
|
||||
await this.reinstatePromise;
|
||||
this.analytics.eventTrack.next({ action: 'Reinstated Premium' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('reinstated'));
|
||||
const request = new VerifyBankRequest();
|
||||
request.amount1 = this.verifyAmount1;
|
||||
request.amount2 = this.verifyAmount2;
|
||||
this.verifyBankPromise = this.apiService.postOrganizationVerifyBank(this.organizationId, request);
|
||||
await this.verifyBankPromise;
|
||||
this.analytics.eventTrack.next({ action: 'Verified Bank Account' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('verifiedBankAccount'));
|
||||
this.load();
|
||||
} catch { }
|
||||
}
|
||||
|
||||
async cancel() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('cancelConfirmation'),
|
||||
this.i18nService.t('cancelSubscription'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.cancelPromise = this.apiService.postCancelPremium();
|
||||
await this.cancelPromise;
|
||||
this.analytics.eventTrack.next({ action: 'Canceled Premium' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
|
||||
this.load();
|
||||
} catch { }
|
||||
}
|
||||
|
||||
downloadLicense() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const licenseString = JSON.stringify(this.billing.license, null, 2);
|
||||
this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_premium_license.json');
|
||||
}
|
||||
|
||||
updateLicense() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.showUpdateLicense = true;
|
||||
}
|
||||
|
||||
closeUpdateLicense(load: boolean) {
|
||||
this.showUpdateLicense = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
adjustStorage(add: boolean) {
|
||||
this.adjustStorageAdd = add;
|
||||
this.showAdjustStorage = true;
|
||||
}
|
||||
|
||||
closeStorage(load: boolean) {
|
||||
this.showAdjustStorage = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
changePayment() {
|
||||
this.showAdjustPayment = true;
|
||||
}
|
||||
@@ -150,18 +81,6 @@ export class UserBillingComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
get subscriptionMarkedForCancel() {
|
||||
return this.subscription != null && !this.subscription.cancelled && this.subscription.cancelAtEndDate;
|
||||
}
|
||||
|
||||
get subscription() {
|
||||
return this.billing != null ? this.billing.subscription : null;
|
||||
}
|
||||
|
||||
get nextInvoice() {
|
||||
return this.billing != null ? this.billing.upcomingInvoice : null;
|
||||
}
|
||||
|
||||
get paymentSource() {
|
||||
return this.billing != null ? this.billing.paymentSource : null;
|
||||
}
|
||||
@@ -173,13 +92,4 @@ export class UserBillingComponent implements OnInit {
|
||||
get transactions() {
|
||||
return this.billing != null ? this.billing.transactions : null;
|
||||
}
|
||||
|
||||
get storagePercentage() {
|
||||
return this.billing != null && this.billing.maxStorageGb ?
|
||||
+(100 * (this.billing.storageGb / this.billing.maxStorageGb)).toFixed(2) : 0;
|
||||
}
|
||||
|
||||
get storageProgressWidth() {
|
||||
return this.storagePercentage < 5 ? 5 : 0;
|
||||
}
|
||||
}
|
||||
|
||||
103
src/app/settings/user-subscription.component.html
Normal file
103
src/app/settings/user-subscription.component.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
{{'premiumMembership' | i18n}}
|
||||
<small>
|
||||
<i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
||||
</small>
|
||||
</h1>
|
||||
</div>
|
||||
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
||||
<ng-container *ngIf="sub">
|
||||
<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">
|
||||
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
||||
<span>{{'reinstateSubscription' | i18n}}</span>
|
||||
</button>
|
||||
</app-callout>
|
||||
<dl *ngIf="selfHosted">
|
||||
<dt>{{'expiration' | i18n}}</dt>
|
||||
<dd *ngIf="sub.expiration">{{sub.expiration | date:'mediumDate'}}</dd>
|
||||
<dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
|
||||
</dl>
|
||||
<div class="row" *ngIf="!selfHosted">
|
||||
<div class="col-4">
|
||||
<dl>
|
||||
<dt>{{'status' | i18n}}</dt>
|
||||
<dd>
|
||||
<span class="text-capitalize">{{(subscription && 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>
|
||||
</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>
|
||||
<a href="https://vault.bitwarden.com/#/settings/subscription" target="_blank" rel="noopener" class="btn btn-outline-secondary">
|
||||
{{'manageSubscription' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="card mt-3" *ngIf="showUpdateLicense">
|
||||
<div class="card-body">
|
||||
<h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
|
||||
<app-update-license (onUpdated)="closeUpdateLicense(true)" (onCanceled)="closeUpdateLicense(false)"></app-update-license>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!selfHosted">
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="downloadLicense()" *ngIf="!subscription || !subscription.cancelled">
|
||||
{{'downloadLicense' | i18n}}
|
||||
</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">
|
||||
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
||||
<span>{{'cancelSubscription' | i18n}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<h2 class="spaced-header">{{'storage' | i18n}}</h2>
|
||||
<p>{{'subscriptionStorage' | i18n : sub.maxStorageGb || 0 : sub.storageName || '0 MB'}}</p>
|
||||
<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>
|
||||
<ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
|
||||
<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="ml-1 btn btn-outline-secondary" (click)="adjustStorage(false)">
|
||||
{{'removeStorage' | i18n}}
|
||||
</button>
|
||||
</div>
|
||||
<app-adjust-storage [storageGbPrice]="4" [add]="adjustStorageAdd" (onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)"
|
||||
*ngIf="showAdjustStorage"></app-adjust-storage>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
156
src/app/settings/user-subscription.component.ts
Normal file
156
src/app/settings/user-subscription.component.ts
Normal file
@@ -0,0 +1,156 @@
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
|
||||
import { SubscriptionResponse } from 'jslib/models/response/subscriptionResponse';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
import { TokenService } from 'jslib/abstractions/token.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-subscription',
|
||||
templateUrl: 'user-subscription.component.html',
|
||||
})
|
||||
export class UserSubscriptionComponent implements OnInit {
|
||||
loading = false;
|
||||
firstLoaded = false;
|
||||
adjustStorageAdd = true;
|
||||
showAdjustStorage = false;
|
||||
showUpdateLicense = false;
|
||||
sub: SubscriptionResponse;
|
||||
selfHosted = false;
|
||||
|
||||
cancelPromise: Promise<any>;
|
||||
reinstatePromise: Promise<any>;
|
||||
|
||||
constructor(private tokenService: TokenService, private apiService: ApiService,
|
||||
private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
|
||||
private analytics: Angulartics2, private toasterService: ToasterService,
|
||||
private router: Router) {
|
||||
this.selfHosted = platformUtilsService.isSelfHost();
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
await this.load();
|
||||
this.firstLoaded = true;
|
||||
}
|
||||
|
||||
async load() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.tokenService.getPremium()) {
|
||||
this.loading = true;
|
||||
this.sub = await this.apiService.getUserSubscription();
|
||||
} else {
|
||||
this.router.navigate(['/settings/premium']);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
async reinstate() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('reinstateConfirmation'),
|
||||
this.i18nService.t('reinstateSubscription'), this.i18nService.t('yes'), this.i18nService.t('cancel'));
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.reinstatePromise = this.apiService.postReinstatePremium();
|
||||
await this.reinstatePromise;
|
||||
this.analytics.eventTrack.next({ action: 'Reinstated Premium' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('reinstated'));
|
||||
this.load();
|
||||
} catch { }
|
||||
}
|
||||
|
||||
async cancel() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('cancelConfirmation'),
|
||||
this.i18nService.t('cancelSubscription'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.cancelPromise = this.apiService.postCancelPremium();
|
||||
await this.cancelPromise;
|
||||
this.analytics.eventTrack.next({ action: 'Canceled Premium' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
|
||||
this.load();
|
||||
} catch { }
|
||||
}
|
||||
|
||||
downloadLicense() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const licenseString = JSON.stringify(this.sub.license, null, 2);
|
||||
this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_premium_license.json');
|
||||
}
|
||||
|
||||
updateLicense() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.showUpdateLicense = true;
|
||||
}
|
||||
|
||||
closeUpdateLicense(load: boolean) {
|
||||
this.showUpdateLicense = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
adjustStorage(add: boolean) {
|
||||
this.adjustStorageAdd = add;
|
||||
this.showAdjustStorage = true;
|
||||
}
|
||||
|
||||
closeStorage(load: boolean) {
|
||||
this.showAdjustStorage = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
get subscriptionMarkedForCancel() {
|
||||
return this.subscription != null && !this.subscription.cancelled && this.subscription.cancelAtEndDate;
|
||||
}
|
||||
|
||||
get subscription() {
|
||||
return this.sub != null ? this.sub.subscription : null;
|
||||
}
|
||||
|
||||
get nextInvoice() {
|
||||
return this.sub != null ? this.sub.upcomingInvoice : null;
|
||||
}
|
||||
|
||||
get storagePercentage() {
|
||||
return this.sub != null && this.sub.maxStorageGb ?
|
||||
+(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2) : 0;
|
||||
}
|
||||
|
||||
get storageProgressWidth() {
|
||||
return this.storagePercentage < 5 ? 5 : 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user