bitwarden_rs/web-vault/app/settings/views/settingsBilling.html

<section class="content-header">
    <h1>Billing <small>manage your membership</small></h1>
</section>
<section class="content">
    <div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
        <h4><i class="fa fa-warning"></i> Canceled</h4>
        The premium membership subscription has been canceled.
    </div>
    <div class="callout callout-warning" ng-if="subscription && subscription.markedForCancel">
        <h4><i class="fa fa-warning"></i> Pending Cancellation</h4>
        <p>
            The premium membership has been marked for cancellation at the end of the
            current billing period.
        </p>
        <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()">
            Reinstate
        </button>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Premium Membership</h3>
        </div>
        <div class="box-body">
            <dl ng-if="selfHosted">
                <dt>Expiration</dt>
                <dd ng-if="loading">
                    Loading...
                </dd>
                <dd ng-if="!loading && expiration">
                    {{expiration | date: 'medium'}}
                </dd>
                <dd ng-if="!loading && !expiration">
                    Never expires
                </dd>
            </dl>
            <div class="row" ng-if="!selfHosted">
                <div class="col-md-5">
                    <dl>
                        <dt>Status</dt>
                        <dd>
                            <span style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</span>
                            <span ng-if="subscription.markedForCancel">- marked for cancellation</span>
                        </dd>
                        <dt>Next Charge</dt>
                        <dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
                    </dl>
                </div>
                <div class="col-md-7">
                    <strong>Details</strong>
                    <div ng-show="loading">
                        Loading...
                    </div>
                    <div class="table-responsive" style="margin: 0;" ng-show="!loading">
                        <table class="table" style="margin: 0;">
                            <tbody>
                                <tr ng-repeat="item in subscription.items">
                                    <td>
                                        {{item.name}} {{item.qty > 1 ? '&times;' + item.qty : ''}}
                                        @ {{item.amount | currency:'$'}}
                                    </td>
                                    <td class="text-right">{{(item.qty * item.amount) | currency:'$'}} /{{item.interval}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer" ng-if="!selfHosted && !loading && subscription &&
             (!subscription.cancelled || subscription.markedForCancel)">
            <button type="button" class="btn btn-default btn-flat" ng-click="cancel()"
                    ng-if="!subscription.cancelled && !subscription.markedForCancel">
                Cancel
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()"
                    ng-if="subscription.markedForCancel">
                Reinstate
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="license()"
                    ng-if="!subscription.cancelled">
                Download License
            </button>
        </div>
        <div class="box-footer" ng-if="selfHosted">
            <button type="button" class="btn btn-default btn-flat" ng-click="updateLicense()">
                Update License
            </button>
            <a href="https://vault.bitwarden.com" class="btn btn-default btn-flat" target="_blank">
                Manage Membership
            </a>
        </div>
    </div>
    <div class="box box-default" ng-if="storage && !selfHosted">
        <div class="box-header with-border">
            <h3 class="box-title">Storage</h3>
        </div>
        <div class="box-body">
            <p>
                Your membership has a total of {{storage.maxGb}} GB of encrypted file storage.
                You are currently using {{storage.currentName}}.
            </p>
            <div class="progress" style="margin: 0;">
                <div class="progress-bar progress-bar-info" role="progressbar"
                     aria-valuenow="{{storage.percentage}}" aria-valuemin="0" aria-valuemax="1"
                     style="min-width: 50px; width: {{storage.percentage}}%;">
                    {{storage.percentage}}%
                </div>
            </div>
        </div>
        <div class="box-footer" ng-if="subscription && paymentSource && !subscription.cancelled">
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(true)">
                Add Storage
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(false)">
                Remove Storage
            </button>
        </div>
    </div>
    <div class="box box-default" ng-if="!selfHosted">
        <div class="box-header with-border">
            <h3 class="box-title">Payment Method</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading && !paymentSource">
                <i class="fa fa-credit-card"></i> No payment method on file.
            </div>
            <div ng-show="!loading && paymentSource">
                <i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
                   'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></i>
                {{paymentSource.description}}
            </div>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-flat" ng-click="changePayment()">
                {{ paymentSource ? 'Change Payment Method' : 'Add Payment Method' }}
            </button>
        </div>
    </div>
    <div class="box box-default" ng-if="!selfHosted">
        <div class="box-header with-border">
            <h3 class="box-title">Charges</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading && !charges.length">
                No charges.
            </div>
            <div class="table-responsive" ng-show="charges.length">
                <table class="table">
                    <tbody>
                        <tr ng-repeat="charge in charges">
                            <td style="width: 200px">
                                {{charge.date | date: 'mediumDate'}}
                            </td>
                            <td style="min-width: 150px">
                                {{charge.paymentSource}}
                            </td>
                            <td style="width: 150px; text-transform: capitalize;">
                                {{charge.status}}
                            </td>
                            <td class="text-right" style="width: 150px;">
                                {{charge.amount | currency:'$'}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer">
            Note: Any charges will appear on your statement as <b>BITWARDEN</b>.
        </div>
    </div>
</section>