user billing page

jslib

@@ -1 +1 @@
-Subproject commit ac221d8867c526eb14077398d95399f9016378fa
+Subproject commit ef897695e9b5bfecbfcbbd4ad3aec62b4ecdca25

src/app/settings/premium.component.html

@@ -22,7 +22,7 @@
             {{'premiumSignUpFuture' | i18n}}
         </li>
     </ul>
-    <p class="text-lg mb-0">{{'premiumPrice' | i18n : (premiumPrice | currency:'USD':'$')}}</p>
+    <p class="text-lg mb-0">{{'premiumPrice' | i18n : (premiumPrice | currency:'$')}}</p>
 </app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <h2 class="mt-5">{{'addons' | i18n}}</h2>
@@ -31,15 +31,15 @@
             <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
             <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb" [(ngModel)]="additionalStorage"
                 min="0" max="99" step="1" placeholder="{{'additionalStorageGbDesc' | i18n}}">
-            <small class="text-muted form-text">{{'additionalStorageDesc' | i18n : (storageGbPrice | currency:'USD')}}</small>
+            <small class="text-muted form-text">{{'additionalStorageDesc' | i18n : (storageGbPrice | currency:'$')}}</small>
         </div>
     </div>
     <h2 class="spaced-header">{{'summary' | i18n}}</h2>
-    {{'premiumMembership' | i18n}}: {{premiumPrice | currency:'USD':'$'}}
-    <br> {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} GB &times; {{storageGbPrice | currency:'USD'}} = {{additionalStorageTotal
-    | currency:'USD':'$'}}
+    {{'premiumMembership' | i18n}}: {{premiumPrice | currency:'$'}}
+    <br> {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} GB &times; {{storageGbPrice | currency:'$'}} = {{additionalStorageTotal
+    | currency:'$'}}
     <hr class="my-2">
-    <strong>{{'total' | i18n}}:</strong> USD {{total | currency:'USD'}} /{{'year' | i18n}}
+    <strong>{{'total' | i18n}}:</strong> {{total | currency:'USD $'}} /{{'year' | i18n}}
     <br>
     <small class="text-muted">{{'paymentChargedAnnually' | i18n}}</small>
     <h2 class="spaced-header">{{'paymentInformation' | i18n}}</h2>

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

@@ -1,4 +1,106 @@
 <div class="page-header">
-    <h1>{{'billingAndLicensing' | i18n}}</h1>
+    <h1>
+        {{'billingAndLicensing' | i18n}}
+        <small>
+            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading"></i>
+        </small>
+    </h1>
 </div>
-<app-premium *ngIf="!premium" (onPremiumPurchased)="loadPremiumStatus()"></app-premium>
+<app-premium *ngIf="!premium" (onPremiumPurchased)="load()"></app-premium>
+<ng-container *ngIf="premium">
+    <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.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>
+        <div class="row">
+            <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">
+                <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="!subscription.cancelled || subscriptionMarkedForCancel">
+            <div class="d-flex">
+                <button type="button" class="btn btn-outline-secondary" (click)="license()" *ngIf="!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.cancelled && !subscriptionMarkedForCancel">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'cancelSubscription' | i18n}}</span>
+                </button>
+            </div>
+        </ng-container>
+        <ng-container *ngIf="!selfHosted">
+            <h2 class="spaced-header">{{'storage' | i18n}}</h2>
+            <p>{{'subscriptionStorage' | i18n : billing.maxStorageGb : billing.storageName}}</p>
+            <div class="progress">
+                <div class="progress-bar bg-success" role="progressbar" [ngStyle]="{width: storagePercentage + '%' }" [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">
+                    <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
+                        {{'addStorage' | i18n}}
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(false)">
+                        {{'removeStorage' | i18n}}
+                    </button>
+                </div>
+            </ng-container>
+            <h2 class="spaced-header">{{'paymentMethod' | i18n}}</h2>
+            <p *ngIf="!paymentSource">{{'noPaymentMethod' | i18n}}</p>
+            <p *ngIf="paymentSource">
+                <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>
+            <button type="button" class="btn btn-outline-secondary" (click)="changePayment()">
+                {{(paymentSource ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}
+            </button>
+            <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>{{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>
+</ng-container>

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

@@ -3,22 +3,132 @@ import {
     OnInit,
 } from '@angular/core';
 
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+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';
+
 @Component({
     selector: 'app-user-billing',
     templateUrl: 'user-billing.component.html',
 })
 export class UserBillingComponent implements OnInit {
     premium = false;
+    loading = false;
+    firstLoaded = false;
+    billing: BillingResponse;
+    paymentMethodType = PaymentMethodType;
 
-    constructor(private tokenService: TokenService) { }
+    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) { }
 
     async ngOnInit() {
-        this.loadPremiumStatus();
+        await this.load();
+        this.firstLoaded = true;
     }
 
-    loadPremiumStatus() {
+    async load() {
+        if (this.loading) {
+            return;
+        }
+
         this.premium = this.tokenService.getPremium();
+        if (this.premium) {
+            this.loading = true;
+            this.billing = await this.apiService.getUserBilling();
+        }
+        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 { }
+    }
+
+    license() {
+        if (this.loading) {
+            return;
+        }
+
+        const licenseString = JSON.stringify(this.billing.license, null, 2);
+        this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_premium_license.json');
+    }
+
+    adjustStorage(add: boolean) {
+
+    }
+
+    changePayment() {
+
+    }
+
+    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 ? +(100 * (this.billing.storageGb / this.billing.maxStorageGb)).toFixed(2) : 0;
     }
 }

src/app/vault/ciphers.component.html

@@ -52,7 +52,8 @@
         <i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded"></i>
         <ng-container *ngIf="loaded">
             <p>{{'noItemsInList' | i18n}}</p>
-            <button (click)="addCipher()" class="btn btn-outline-primary">{{'addItem' | i18n}}</button>
+            <button (click)="addCipher()" class="btn btn-outline-primary">
+                <i class="fa fa-plus fa-fw"></i>{{'addItem' | i18n}}</button>
         </ng-container>
     </div>
 </ng-container>

src/locales/en/messages.json

@@ -215,6 +215,9 @@
   "cancel": {
     "message": "Cancel"
   },
+  "canceled": {
+    "message": "Canceled"
+  },
   "close": {
     "message": "Close"
   },
@@ -1282,5 +1285,103 @@
   },
   "paypalClickSubmit": {
     "message": "Click the PayPal button to log into your PayPal account, then click the Submit button below to continue."
+  },
+  "cancelSubscription": {
+    "message": "Cancel Subscription"
+  },
+  "subscriptionCanceled": {
+    "message": "The subscription has been canceled."
+  },
+  "pendingCancellation": {
+    "message": "Pending Cancellation"
+  },
+  "subscriptionPendingCanceled": {
+    "message": "The subscription has been marked for cancellation at the end of the current billing period."
+  },
+  "reinstateSubscription": {
+    "message": "Reinstate Subscription"
+  },
+  "reinstateConfirmation": {
+    "message": "Are you sure you want to remove the pending cancellation request and reinstate your subscription?"
+  },
+  "reinstated": {
+    "message": "The subscription has been reinstated."
+  },
+  "cancelConfirmation": {
+    "message": "Are you sure you want to cancel? You will lose access to all of this subscription's features at the end of this billing cycle."
+  },
+  "canceledSubscription": {
+    "message": "The subscription has been canceled."
+  },
+  "neverExpires": {
+    "message": "Never Expires"
+  },
+  "status": {
+    "message": "Status"
+  },
+  "nextCharge": {
+    "message": "Next Charge"
+  },
+  "details": {
+    "message": "Details"
+  },
+  "downloadLicense": {
+    "message": "Download License"
+  },
+  "updateLicense": {
+    "message": "Update License"
+  },
+  "manageSubscription": {
+    "message": "Manage Subscription"
+  },
+  "storage": {
+    "message": "Storage"
+  },
+  "addStorage": {
+    "message": "Add Storage"
+  },
+  "removeStorage": {
+    "message": "Remove Storage"
+  },
+  "subscriptionStorage": {
+    "message": "Your subscription has a total of $MAX_STORAGE$ GB of encrypted file storage. You are currently using $USED_STORAGE$.",
+    "placeholders": {
+      "max_storage": {
+        "content": "$1",
+        "example": "4"
+      },
+      "used_storage": {
+        "content": "$2",
+        "example": "65 MB"
+      }
+    }
+  },
+  "paymentMethod": {
+    "message": "Payment Method"
+  },
+  "noPaymentMethod": {
+    "message": "No payment method on file."
+  },
+  "addPaymentMethod": {
+    "message": "Add Payment Method"
+  },
+  "changePaymentMethod": {
+    "message": "Change Payment Method"
+  },
+  "charges": {
+    "message": "Charges",
+    "description": "Credit card charges/payments."
+  },
+  "noCharges": {
+    "message": "No charges."
+  },
+  "chargesStatement": {
+    "message": "Any charges will appear on your statement as $STATEMENT_NAME$.",
+    "placeholders": {
+      "statement_name": {
+        "content": "$1",
+        "example": "BITWARDEN"
+      }
+    }
   }
 }

src/scss/styles.scss

@@ -383,6 +383,16 @@ app-avatar {
     }
 }
 
+app-user-billing {
+    .progress {
+        height: 20px;
+        
+        .progress-bar {
+            min-width: 50px;
+        }
+    }
+}
+
 #duo-frame {
     background: url('../images/loading.svg') 0 0 no-repeat;
     height: 330px;