devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

split billing and subscription management up

This commit is contained in:
Kyle Spearrin 2019-02-18 15:28:23 -05:00
parent af8ab752ad
commit 92b2601ba2
14 changed files with 645 additions and 636 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 3e996ae9adf309f3ee4398630299fb0ab5312f9c
Subproject commit 8b411de034569b36788239a5948d64f5029d6437

16
src/app/app-routing.module.ts
View File

@ -27,6 +27,7 @@ import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/pe
import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
import { SettingsComponent as OrgSettingsComponent } from './organizations/settings/settings.component';
import {
TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
@ -62,6 +63,7 @@ import { PremiumComponent } from './settings/premium.component';
import { SettingsComponent } from './settings/settings.component';
import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
import { UserBillingComponent } from './settings/user-billing.component';
import { UserSubscriptionComponent } from './settings/user-subscription.component';
import { BreachReportComponent } from './tools/breach-report.component';
import { ExportComponent } from './tools/export.component';
@ -145,7 +147,12 @@ const routes: Routes = [
{ path: 'domain-rules', component: DomainRulesComponent, data: { titleId: 'domainRules' } },
{ path: 'two-factor', component: TwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
{ path: 'premium', component: PremiumComponent, data: { titleId: 'goPremium' } },
{ path: 'billing', component: UserBillingComponent, data: { titleId: 'billingAndLicensing' } },
{ path: 'billing', component: UserBillingComponent, data: { titleId: 'billing' } },
{
path: 'subscription',
component: UserSubscriptionComponent,
data: { titleId: 'premiumMembership' },
},
{ path: 'organizations', component: OrganizationsComponent, data: { titleId: 'organizations' } },
{
path: 'create-organization',
@ -271,7 +278,12 @@ const routes: Routes = [
{
path: 'billing',
component: OrganizationBillingComponent,
data: { titleId: 'billingAndLicensing' },
data: { titleId: 'billing' },
},
{
path: 'subscription',
component: OrganizationSubscriptionComponent,
data: { titleId: 'subscription' },
},
],
},

4
src/app/app.module.ts
View File

@ -57,6 +57,7 @@ import { AccountComponent as OrgAccountComponent } from './organizations/setting
import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
import {
TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
@ -116,6 +117,7 @@ import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.compone
import { UpdateKeyComponent } from './settings/update-key.component';
import { UpdateLicenseComponent } from './settings/update-license.component';
import { UserBillingComponent } from './settings/user-billing.component';
import { UserSubscriptionComponent } from './settings/user-subscription.component';
import { VerifyEmailComponent } from './settings/verify-email.component';
import { BreachReportComponent } from './tools/breach-report.component';
@ -271,6 +273,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
OrgAccountComponent,
OrgAddEditComponent,
OrganizationBillingComponent,
OrganizationSubscriptionComponent,
OrgAttachmentsComponent,
OrgCiphersComponent,
OrgCollectionAddEditComponent,
@ -334,6 +337,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
UpdateLicenseComponent,
UserBillingComponent,
UserLayoutComponent,
UserSubscriptionComponent,
VaultComponent,
VerifyEmailComponent,
VerifyEmailTokenComponent,

269
src/app/organizations/settings/organization-billing.component.ts
View File

@ -7,52 +7,20 @@ import { ActivatedRoute } from '@angular/router';
import { ToasterService } from 'angular2-toaster';
import { Angulartics2 } from 'angulartics2';
import { VerifyBankRequest } from 'jslib/models/request/verifyBankRequest';
import { BillingChargeResponse } from 'jslib/models/response/billingResponse';
import { OrganizationBillingResponse } from 'jslib/models/response/organizationBillingResponse';
import { ApiService } from 'jslib/abstractions/api.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { MessagingService } from 'jslib/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { TokenService } from 'jslib/abstractions/token.service';
import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
import { PlanType } from 'jslib/enums/planType';
import { TransactionType } from 'jslib/enums/transactionType';
import { UserBillingComponent } from '../../settings/user-billing.component';
@Component({
selector: 'app-org-billing',
templateUrl: 'organization-billing.component.html',
templateUrl: '../../settings/user-billing.component.html',
})
export class OrganizationBillingComponent implements OnInit {
loading = false;
firstLoaded = false;
organizationId: string;
adjustSeatsAdd = true;
showAdjustSeats = false;
adjustStorageAdd = true;
showAdjustStorage = false;
showAdjustPayment = false;
showUpdateLicense = false;
billing: OrganizationBillingResponse;
paymentMethodType = PaymentMethodType;
transactionType = TransactionType;
selfHosted = false;
verifyAmount1: number;
verifyAmount2: number;
cancelPromise: Promise<any>;
reinstatePromise: Promise<any>;
licensePromise: 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 messagingService: MessagingService, private route: ActivatedRoute) {
this.selfHosted = platformUtilsService.isSelfHost();
export class OrganizationBillingComponent extends UserBillingComponent implements OnInit {
constructor(apiService: ApiService, i18nService: I18nService,
analytics: Angulartics2, toasterService: ToasterService,
private route: ActivatedRoute) {
super(apiService, i18nService, analytics, toasterService);
}
async ngOnInit() {
@ -62,227 +30,4 @@ export class OrganizationBillingComponent implements OnInit {
this.firstLoaded = true;
});
}
async load() {
if (this.loading) {
return;
}
this.loading = true;
this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
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.postOrganizationReinstate(this.organizationId);
await this.reinstatePromise;
this.analytics.eventTrack.next({ action: 'Reinstated Plan' });
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.postOrganizationCancel(this.organizationId);
await this.cancelPromise;
this.analytics.eventTrack.next({ action: 'Canceled Plan' });
this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
this.load();
} catch { }
}
async changePlan() {
const contactSupport = await this.platformUtilsService.showDialog(this.i18nService.t('changeBillingPlanDesc'),
this.i18nService.t('changeBillingPlan'), this.i18nService.t('contactSupport'), this.i18nService.t('close'));
if (contactSupport) {
this.platformUtilsService.launchUri('https://bitwarden.com/contact');
}
}
async downloadLicense() {
if (this.loading) {
return;
}
const installationId = window.prompt(this.i18nService.t('enterInstallationId'));
if (installationId == null || installationId === '') {
return;
}
try {
this.licensePromise = this.apiService.getOrganizationLicense(this.organizationId, installationId);
const license = await this.licensePromise;
const licenseString = JSON.stringify(license, null, 2);
this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
} catch { }
}
updateLicense() {
if (this.loading) {
return;
}
this.showUpdateLicense = true;
}
async verifyBank() {
if (this.loading) {
return;
}
try {
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 { }
}
closeUpdateLicense(updated: boolean) {
this.showUpdateLicense = false;
if (updated) {
this.load();
this.messagingService.send('updatedOrgLicense');
}
}
adjustSeats(add: boolean) {
this.adjustSeatsAdd = add;
this.showAdjustSeats = true;
}
closeSeats(load: boolean) {
this.showAdjustSeats = 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;
}
closePayment(load: boolean) {
this.showAdjustPayment = false;
if (load) {
this.load();
}
}
async viewInvoice(charge: BillingChargeResponse) {
const token = await this.tokenService.getToken();
const url = this.apiService.apiBaseUrl + '/organizations/' + this.organizationId +
'/billing-invoice/' + charge.invoiceId + '?access_token=' + token;
this.platformUtilsService.launchUri(url);
}
get isExpired() {
return this.billing != null && this.billing.expiration != null &&
new Date(this.billing.expiration) < new Date();
}
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 invoices() {
return this.billing != null ? this.billing.invoices : null;
}
get transactions() {
return this.billing != null ? this.billing.transactions : null;
}
get paymentSource() {
return this.billing != null ? this.billing.paymentSource : 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;
}
get billingInterval() {
const monthly = this.billing.planType === PlanType.EnterpriseMonthly ||
this.billing.planType === PlanType.TeamsMonthly;
return monthly ? 'month' : 'year';
}
get storageGbPrice() {
return this.billingInterval === 'month' ? 0.5 : 4;
}
get seatPrice() {
switch (this.billing.planType) {
case PlanType.EnterpriseMonthly:
return 4;
case PlanType.EnterpriseAnnually:
return 36;
case PlanType.TeamsMonthly:
return 2.5;
case PlanType.TeamsAnnually:
return 24;
default:
return 0;
}
}
get canAdjustSeats() {
return this.billing.planType === PlanType.EnterpriseMonthly ||
this.billing.planType === PlanType.EnterpriseAnnually ||
this.billing.planType === PlanType.TeamsMonthly || this.billing.planType === PlanType.TeamsAnnually;
}
get canDownloadLicense() {
return (this.billing.planType !== PlanType.Free && this.subscription == null) ||
(this.subscription != null && !this.subscription.cancelled);
}
}

112
src/app/organizations/settings/organization-billing.component.html → src/app/organizations/settings/organization-subscription.component.html
View File

@ -1,13 +1,13 @@
<div class="page-header">
<h1>
{{'billingAndLicensing' | i18n}}
{{'subscription' | 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="billing">
<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>
@ -19,22 +19,22 @@
</app-callout>
<dl *ngIf="selfHosted">
<dt>{{'billingPlan' | i18n}}</dt>
<dd>{{billing.plan}}</dd>
<dd>{{sub.plan}}</dd>
<dt>{{'expiration' | i18n}}</dt>
<dd *ngIf="billing.expiration">
{{billing.expiration | date:'mediumDate'}}
<dd *ngIf="sub.expiration">
{{sub.expiration | date:'mediumDate'}}
<span *ngIf="isExpired" class="text-danger ml-2">
<i class="fa fa-exclamation-triangle"></i>
{{'licenseIsExpired' | i18n}}
</span>
</dd>
<dd *ngIf="!billing.expiration">{{'neverExpires' | i18n}}</dd>
<dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
</dl>
<div class="row" *ngIf="!selfHosted">
<div class="col-4">
<dl>
<dt>{{'billingPlan' | i18n}}</dt>
<dd>{{billing.plan}}</dd>
<dd>{{sub.plan}}</dd>
<ng-container *ngIf="subscription">
<dt>{{'status' | i18n}}</dt>
<dd>
@ -97,8 +97,8 @@
</button>
</div>
<h2 class="spaced-header">{{'userSeats' | i18n}}</h2>
<p>{{'subscriptionUserSeats' | i18n : billing.seats}}</p>
<ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel && paymentSource">
<p>{{'subscriptionUserSeats' | i18n : sub.seats}}</p>
<ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">
<div class="mt-3">
<div class="d-flex" *ngIf="!showAdjustSeats">
<button type="button" class="btn btn-outline-secondary" (click)="adjustSeats(true)">
@ -113,12 +113,12 @@
</div>
</ng-container>
<h2 class="spaced-header">{{'storage' | i18n}}</h2>
<p>{{'subscriptionStorage' | i18n : billing.maxStorageGb || 0 : billing.storageName || '0 MB'}}</p>
<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 && paymentSource">
<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)">
@ -132,95 +132,5 @@
(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>
<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>
<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>
{{paymentSource.description}}
</p>
</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>
</ng-container>

230
src/app/organizations/settings/organization-subscription.component.ts Normal file
View File

@ -0,0 +1,230 @@
import {
Component,
OnInit,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ToasterService } from 'angular2-toaster';
import { Angulartics2 } from 'angulartics2';
import { OrganizationSubscriptionResponse } from 'jslib/models/response/organizationSubscriptionResponse';
import { ApiService } from 'jslib/abstractions/api.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { MessagingService } from 'jslib/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { TokenService } from 'jslib/abstractions/token.service';
import { PlanType } from 'jslib/enums/planType';
@Component({
selector: 'app-org-subscription',
templateUrl: 'organization-subscription.component.html',
})
export class OrganizationSubscriptionComponent implements OnInit {
loading = false;
firstLoaded = false;
organizationId: string;
adjustSeatsAdd = true;
showAdjustSeats = false;
adjustStorageAdd = true;
showAdjustStorage = false;
showUpdateLicense = false;
sub: OrganizationSubscriptionResponse;
selfHosted = false;
cancelPromise: Promise<any>;
reinstatePromise: Promise<any>;
licensePromise: Promise<any>;
constructor(private tokenService: TokenService, private apiService: ApiService,
private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
private analytics: Angulartics2, private toasterService: ToasterService,
private messagingService: MessagingService, private route: ActivatedRoute) {
this.selfHosted = platformUtilsService.isSelfHost();
}
async ngOnInit() {
this.route.parent.parent.params.subscribe(async (params) => {
this.organizationId = params.organizationId;
await this.load();
this.firstLoaded = true;
});
}
async load() {
if (this.loading) {
return;
}
this.loading = true;
this.sub = await this.apiService.getOrganizationSubscription(this.organizationId);
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.postOrganizationReinstate(this.organizationId);
await this.reinstatePromise;
this.analytics.eventTrack.next({ action: 'Reinstated Plan' });
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.postOrganizationCancel(this.organizationId);
await this.cancelPromise;
this.analytics.eventTrack.next({ action: 'Canceled Plan' });
this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
this.load();
} catch { }
}
async changePlan() {
const contactSupport = await this.platformUtilsService.showDialog(this.i18nService.t('changeBillingPlanDesc'),
this.i18nService.t('changeBillingPlan'), this.i18nService.t('contactSupport'), this.i18nService.t('close'));
if (contactSupport) {
this.platformUtilsService.launchUri('https://bitwarden.com/contact');
}
}
async downloadLicense() {
if (this.loading) {
return;
}
const installationId = window.prompt(this.i18nService.t('enterInstallationId'));
if (installationId == null || installationId === '') {
return;
}
try {
this.licensePromise = this.apiService.getOrganizationLicense(this.organizationId, installationId);
const license = await this.licensePromise;
const licenseString = JSON.stringify(license, null, 2);
this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
} catch { }
}
updateLicense() {
if (this.loading) {
return;
}
this.showUpdateLicense = true;
}
closeUpdateLicense(updated: boolean) {
this.showUpdateLicense = false;
if (updated) {
this.load();
this.messagingService.send('updatedOrgLicense');
}
}
adjustSeats(add: boolean) {
this.adjustSeatsAdd = add;
this.showAdjustSeats = true;
}
closeSeats(load: boolean) {
this.showAdjustSeats = 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 isExpired() {
return this.sub != null && this.sub.expiration != null &&
new Date(this.sub.expiration) < new Date();
}
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;
}
get billingInterval() {
const monthly = this.sub.planType === PlanType.EnterpriseMonthly ||
this.sub.planType === PlanType.TeamsMonthly;
return monthly ? 'month' : 'year';
}
get storageGbPrice() {
return this.billingInterval === 'month' ? 0.5 : 4;
}
get seatPrice() {
switch (this.sub.planType) {
case PlanType.EnterpriseMonthly:
return 4;
case PlanType.EnterpriseAnnually:
return 36;
case PlanType.TeamsMonthly:
return 2.5;
case PlanType.TeamsAnnually:
return 24;
default:
return 0;
}
}
get canAdjustSeats() {
return this.sub.planType === PlanType.EnterpriseMonthly ||
this.sub.planType === PlanType.EnterpriseAnnually ||
this.sub.planType === PlanType.TeamsMonthly || this.sub.planType === PlanType.TeamsAnnually;
}
get canDownloadLicense() {
return (this.sub.planType !== PlanType.Free && this.subscription == null) ||
(this.subscription != null && !this.subscription.cancelled);
}
}

5
src/app/organizations/settings/settings.component.html
View File

@ -7,8 +7,11 @@
<a routerLink="account" class="list-group-item" routerLinkActive="active">
{{'myOrganization' | i18n}}
</a>
<a routerLink="subscription" class="list-group-item" routerLinkActive="active">
{{'subscription' | i18n}}
</a>
<a routerLink="billing" class="list-group-item" routerLinkActive="active">
{{'billingAndLicensing' | i18n}}
{{'billing' | i18n}}
</a>
<a routerLink="two-factor" class="list-group-item" routerLinkActive="active" *ngIf="access2fa">
{{'twoStepLogin' | i18n}}

4
src/app/settings/premium.component.ts
View File

@ -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 {

7
src/app/settings/settings.component.html
View File

@ -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>

241
src/app/settings/user-billing.component.html
View File

@ -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 ? '&times;' + 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>

128
src/app/settings/user-billing.component.ts
View File

@ -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
View 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 ? '&times;' + 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
View 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;
}
}

4
src/locales/en/messages.json
View File

@ -1487,8 +1487,8 @@
"reportError": {
"message": "An error occurred trying to load the report. Try again"
},
"billingAndLicensing": {
"message": "Billing & Licensing"
"billing": {
"message": "Billing"
},
"goPremium": {
"message": "Go Premium",