bitwarden-estensione-browser/src/app/organizations/settings/organization-billing.component.html

<div class="page-header">
    <h1>
        {{'billingAndLicensing' | 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">
    <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>{{'billingPlan' | i18n}}</dt>
        <dd>{{billing.plan}}</dd>
        <dt>{{'expiration' | i18n}}</dt>
        <dd *ngIf="billing.expiration">
            {{billing.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>
    </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" 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 [organizationId]="organizationId" (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 btn-submit ml-1" #licenseBtn [appApiAction]="licensePromise" [disabled]="licenseBtn.loading"
                (click)="downloadLicense()" *ngIf="canDownloadLicense">
                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
                <span>{{'downloadLicense' | i18n}}</span>
            </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">{{'userSeats' | i18n}}</h2>
        <p>{{'subscriptionUserSeats' | i18n : billing.seats}}</p>
        <ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel && paymentSource">
            <div class="mt-3">
                <div class="d-flex" *ngIf="!showAdjustSeats">
                    <button type="button" class="btn btn-outline-secondary" (click)="adjustSeats(true)">
                        {{'addSeats' | i18n}}
                    </button>
                    <button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustSeats(false)">
                        {{'removeSeats' | i18n}}
                    </button>
                </div>
                <app-adjust-seats [seatPrice]="seatPrice" [add]="adjustSeatsAdd" [organizationId]="organizationId" [interval]="billingInterval"
                    (onAdjusted)="closeSeats(true)" (onCanceled)="closeSeats(false)" *ngIf="showAdjustSeats"></app-adjust-seats>
            </div>
        </ng-container>
        <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>
                <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>