user billing page
This commit is contained in:
Kyle Spearrin
parent
1ac22c6d48
commit
f7b9416460
2
jslib
2
jslib
|
|
@ -1 +1 @@
|
|||
Subproject commit ac221d8867c526eb14077398d95399f9016378fa
|
||||
Subproject commit ef897695e9b5bfecbfcbbd4ad3aec62b4ecdca25
|
||||
|
|
@ -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 × {{storageGbPrice | currency:'USD'}} = {{additionalStorageTotal
|
||||
| currency:'USD':'$'}}
|
||||
{{'premiumMembership' | i18n}}: {{premiumPrice | currency:'$'}}
|
||||
<br> {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} GB × {{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>
|
||||
|
|
|
|||
|
|
@ -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 ? '×' + 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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue