split billing and subscription management up

jslib

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

src/app/app-routing.module.ts

@@ -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' },
                     },
                 ],
             },

src/app/app.module.ts

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

src/app/organizations/settings/organization-billing.component.ts

@@ -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);
-    }
 }

src/app/organizations/settings/organization-subscription.component.html

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

src/app/organizations/settings/organization-subscription.component.ts

@@ -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);
+    }
+}

src/app/organizations/settings/settings.component.html

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

src/app/settings/premium.component.ts

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

src/app/settings/settings.component.html

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

src/app/settings/user-billing.component.html

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

src/app/settings/user-billing.component.ts

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

src/app/settings/user-subscription.component.html

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

src/app/settings/user-subscription.component.ts

@@ -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;
+    }
+}

src/locales/en/messages.json

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