org billing settings setup

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

@@ -34,7 +34,7 @@ export class DeleteOrganizationComponent {
         const request = new PasswordVerificationRequest();
         request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
         try {
-            this.formPromise = this.apiService.postDeleteOrganization(this.organizationId, request);
+            this.formPromise = this.apiService.deleteOrganization(this.organizationId, request);
             await this.formPromise;
             this.analytics.eventTrack.next({ action: 'Deleted Organization' });
             this.toasterService.popAsync('success', this.i18nService.t('organizationDeleted'),

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

@@ -0,0 +1,152 @@
+<div class="page-header">
+    <h1>
+        {{'billingAndLicensing' | i18n}}
+        <small>
+            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading"></i>
+        </small>
+    </h1>
+</div>
+<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading"></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"></i>
+            <span>{{'reinstateSubscription' | i18n}}</span>
+        </button>
+    </app-callout>
+    <dl *ngIf="selfHosted">
+        <dt>{{'billingPlan' | i18n}}</dt>
+        <dd>{{billing.plan}}</dd>
+        <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>{{'billingPlan' | i18n}}</dt>
+                <dd>{{billing.plan}}</dd>
+                <ng-container *ngIf="subscription">
+                    <dt>{{'status' | i18n}}</dt>
+                    <dd>
+                        <span class="text-capitalize">{{subscription.status || '-'}}</span>
+                        <span class="badge badge-warning" *ngIf="subscriptionMarkedForCancel">{{'pendingCancellation' | i18n}}</span>
+                    </dd>
+                    <dt>{{'nextCharge' | i18n}}</dt>
+                    <dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$'))
+                        : '-'}}
+                    </dd>
+                </ng-container>
+            </dl>
+        </div>
+        <div class="col-8" *ngIf="subscription">
+            <strong class="d-block mb-1">{{'details' | i18n}}</strong>
+            <table class="table">
+                <tbody>
+                    <tr *ngFor="let i of subscription.items">
+                        <td>
+                            {{i.name}} {{i.quantity > 1 ? '&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 [user]="false" (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)="changePlan()">
+                {{'changeBillingPlan' | i18n}}
+            </button>
+            <button type="button" class="btn btn-outline-secondary ml-1" (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"></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="btn btn-outline-secondary ml-1" (click)="adjustStorage(false)">
+                        {{'removeStorage' | i18n}}
+                    </button>
+                </div>
+                <app-adjust-storage [storageGbPrice]="storageGbPrice" [add]="adjustStorageAdd" [organizationId]="organizationId" [interval]="billingInterval"
+                    (onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)" *ngIf="showAdjustStorage"></app-adjust-storage>
+            </div>
+        </ng-container>
+        <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>
+                <button type="button" class="btn btn-outline-secondary" (click)="verifyBank()">
+                    {{'verifyBankAccount' | i18n}}
+                </button>
+            </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">{{'charges' | i18n}}</h2>
+        <p *ngIf="!charges || !charges.length">{{'noCharges' | i18n}}</p>
+        <table class="table mb-2" *ngIf="charges && charges.length">
+            <tbody>
+                <tr *ngFor="let c of charges">
+                    <td>
+                        <a href="#" appStopClick (click)="viewInvoice(c)" title="{{'invoice' | i18n}}">
+                            <i class="fa fa-file-pdf-o"></i>
+                        </a>
+                    </td>
+                    <td>{{c.createdDate | date:'mediumDate'}}</td>
+                    <td>{{c.paymentSource ? c.paymentSource.description : '-'}}</td>
+                    <td class="text-capitalize">{{c.status}}</td>
+                    <td>{{c.amount | currency:'$'}}</td>
+                </tr>
+            </tbody>
+        </table>
+        <small class="text-muted">* {{'chargesStatement' | i18n : 'BITWARDEN'}}</small>
+    </ng-container>
+</ng-container>

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

@@ -0,0 +1,200 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+
+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 { 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';
+
+@Component({
+    selector: 'app-org-billing',
+    templateUrl: 'organization-billing.component.html',
+})
+export class OrganizationBillingComponent implements OnInit {
+    loading = false;
+    firstLoaded = false;
+    organizationId: string;
+    adjustStorageAdd = true;
+    showAdjustStorage = false;
+    showAdjustPayment = false;
+    showUpdateLicense = false;
+    billing: OrganizationBillingResponse;
+    paymentMethodType = PaymentMethodType;
+    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, 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.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.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;
+        }
+    }
+
+    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;
+    }
+
+    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 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;
+    }
+
+    get charges() {
+        return this.billing != null ? this.billing.charges : 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() {
+        return 4;
+    }
+}