vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

org billing settings setup

This commit is contained in:
Kyle Spearrin 2018-07-16 17:17:07 -04:00
parent 786f6953e7
commit 0650cafb28
17 changed files with 501 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit b2c700ad285d9336426284f766b434be8c509f0a
Subproject commit 6b4ae1b8d591e973fe4036d3c10b6f0be81debc9

6
src/app/app-routing.module.ts
View File

@ -26,6 +26,7 @@ import { ManageComponent as OrgManageComponent } from './organizations/manage/ma
import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
import { SettingsComponent as OrgSettingsComponent } from './organizations/settings/settings.component';
import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
@ -187,6 +188,11 @@ const routes: Routes = [
children: [
{ path: '', pathMatch: 'full', redirectTo: 'account' },
{ path: 'account', component: OrgAccountComponent, data: { titleId: 'myOrganization' } },
{
path: 'billing',
component: OrganizationBillingComponent,
data: { titleId: 'billingAndLicensing' },
},
],
},
],

2
src/app/app.module.ts
View File

@ -53,6 +53,7 @@ import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/m
import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
@ -188,6 +189,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
OptionsComponent,
OrgAccountComponent,
OrgAddEditComponent,
OrganizationBillingComponent,
OrgAttachmentsComponent,
OrgCiphersComponent,
OrgCollectionAddEditComponent,

2
src/app/organizations/settings/delete-organization.component.ts
View File

@ -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'),

152
src/app/organizations/settings/organization-billing.component.html Normal file
View File

@ -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>

200
src/app/organizations/settings/organization-billing.component.ts Normal file
View File

@ -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;
}
}

2
src/app/settings/adjust-payment.component.html
View File

@ -10,7 +10,7 @@
<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="canChange">
<div class="card-body">
<h3 class="card-body-header">{{(currentType != null ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}</h3>
<app-payment [showOptions]="currentType == null"></app-payment>
<app-payment [showOptions]="!organizationId || currentType == null" [hidePaypal]="true" [hideBank]="!organizationId"></app-payment>
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'submit' | i18n}}</span>

6
src/app/settings/adjust-payment.component.ts
View File

@ -26,7 +26,7 @@ export class AdjustPaymentComponent {
@ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
@Input() currentType?: PaymentMethodType;
@Input() user = true;
@Input() organizationId: string;
@Output() onAdjusted = new EventEmitter();
@Output() onCanceled = new EventEmitter();
@ -41,8 +41,10 @@ export class AdjustPaymentComponent {
const request = new PaymentRequest();
this.formPromise = this.paymentComponent.createPaymentToken().then((token) => {
request.paymentToken = token;
if (this.user) {
if (this.organizationId == null) {
return this.apiService.postAccountPayment(request);
} else {
return this.apiService.postOrganizationPayment(this.organizationId, request);
}
});
await this.formPromise;

6
src/app/settings/adjust-storage.component.ts
View File

@ -20,7 +20,7 @@ import { StorageRequest } from 'jslib/models/request/storageRequest';
export class AdjustStorageComponent {
@Input() storageGbPrice = 0;
@Input() add = true;
@Input() user = true;
@Input() organizationId: string;
@Input() interval = 'year';
@Output() onAdjusted = new EventEmitter<number>();
@Output() onCanceled = new EventEmitter();
@ -39,8 +39,10 @@ export class AdjustStorageComponent {
request.storageGbAdjustment *= -1;
}
if (this.user) {
if (this.organizationId == null) {
this.formPromise = this.apiService.postAccountStorage(request);
} else {
this.formPromise = this.apiService.postOrganizationStorage(this.organizationId, request);
}
await this.formPromise;
this.analytics.eventTrack.next({ action: this.add ? 'Added Storage' : 'Removed Storage' });

2
src/app/settings/create-organization.component.html
View File

@ -169,7 +169,7 @@
</div>
<small class="text-muted font-italic">{{'paymentChargedWithTrial' | i18n : (interval | i18n) }}</small>
<h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
<app-payment></app-payment>
<app-payment [hidePaypal]="true"></app-payment>
</ng-container>
<div [ngClass]="{'mt-4': plans[plan].noPayment}">
<button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="form.loading">

2
src/app/settings/delete-account.component.ts
View File

@ -32,7 +32,7 @@ export class DeleteAccountComponent {
const request = new PasswordVerificationRequest();
request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
try {
this.formPromise = this.apiService.postDeleteAccount(request);
this.formPromise = this.apiService.deleteAccount(request);
await this.formPromise;
this.analytics.eventTrack.next({ action: 'Deleted Account' });
this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),

35
src/app/settings/payment.component.html
View File

@ -4,7 +4,12 @@
<label class="form-check-label" for="method-card">
<i class="fa fa-fw fa-credit-card"></i> {{'creditCard' | i18n}}</label>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline mr-4" *ngIf="!hideBank">
<input class="form-check-input" type="radio" name="Method" id="method-bank" value="bank" [(ngModel)]="method" (change)="changeMethod()">
<label class="form-check-label" for="method-bank">
<i class="fa fa-fw fa-university"></i> {{'bankAccount' | i18n}}</label>
</div>
<div class="form-check form-check-inline" *ngIf="!hidePaypal">
<input class="form-check-input" type="radio" name="Method" id="method-paypal" value="paypal" [(ngModel)]="method" (change)="changeMethod()">
<label class="form-check-label" for="method-paypal">
<i class="fa fa-fw fa-paypal"></i> PayPal</label>
@ -309,3 +314,31 @@
<small class="text-muted">{{'paypalClickSubmit' | i18n}}</small>
</div>
</ng-container>
<ng-container *ngIf="method === 'bank'">
<app-callout type="warning" title="{{'verifyBankAccount' | i18n}}">
{{'verifyBankAccountInitialDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}
</app-callout>
<div class="row">
<div class="form-group col-6">
<label for="routing_number">{{'routingNumber' | i18n}}</label>
<input id="routing_number" class="form-control" type="text" name="routing_number" [(ngModel)]="bank.routing_number" required>
</div>
<div class="form-group col-6">
<label for="account_number">{{'accountNumber' | i18n}}</label>
<input id="account_number" class="form-control" type="text" name="account_number" [(ngModel)]="bank.account_number" required>
</div>
<div class="form-group col-6">
<label for="account_holder_name">{{'accountHolderName' | i18n}}</label>
<input id="account_holder_name" class="form-control" type="text" name="account_holder_name" [(ngModel)]="bank.account_holder_name"
required>
</div>
<div class="form-group col-6">
<label for="account_holder_type">{{'bankAccountType' | i18n}}</label>
<select id="account_holder_type" class="form-control" name="account_holder_type" [(ngModel)]="bank.account_holder_type" required>
<option value="">-- {{'select' | i18n}} --</option>
<option value="company">{{'bankAccountTypeCompany' | i18n}}</option>
<option value="individual">{{'bankAccountTypeIndividual' | i18n}}</option>
</select>
</div>
</div>
</ng-container>

36
src/app/settings/payment.component.ts
View File

@ -20,8 +20,10 @@ const Keys = {
})
export class PaymentComponent implements OnInit {
@Input() showOptions = true;
@Input() method = 'card';
@Input() hideBank = false;
@Input() hidePaypal = false;
method = 'card';
card: any = {
number: null,
exp_month: null,
@ -29,6 +31,14 @@ export class PaymentComponent implements OnInit {
address_country: '',
address_zip: null,
};
bank: any = {
routing_number: null,
account_number: null,
account_holder_name: null,
account_holder_type: '',
currency: 'USD',
country: 'US',
};
cardExpMonthOptions: any[];
cardExpYearOptions: any[];
@ -68,24 +78,32 @@ export class PaymentComponent implements OnInit {
{ name: '-- ' + i18nService.t('select') + ' --', value: null },
];
const year = (new Date()).getFullYear();
for (let i = year; i < (year + 10); i++) {
for (let i = year; i < (year + 15); i++) {
this.cardExpYearOptions.push({ name: i.toString(), value: i.toString().slice(-2) });
}
}
ngOnInit() {
if (!this.showOptions) {
this.hidePaypal = this.method !== 'paypal';
this.hideBank = this.method !== 'bank';
}
window.document.head.appendChild(this.stripeScript);
if (!this.hidePaypal) {
window.document.head.appendChild(this.btScript);
}
}
ngOnDestroy() {
window.document.head.removeChild(this.stripeScript);
window.document.head.removeChild(this.btScript);
Array.from(window.document.querySelectorAll('iframe')).forEach((el) => {
if (el.src != null && el.src.indexOf('stripe') > -1) {
window.document.body.removeChild(el);
}
});
if (!this.hidePaypal) {
window.document.head.removeChild(this.btScript);
}
}
changeMethod() {
@ -127,7 +145,7 @@ export class PaymentComponent implements OnInit {
}).catch((err: any) => {
reject(err.message);
});
} else {
} else if (this.method === 'card') {
(window as any).Stripe.card.createToken(this.card, (status: number, response: any) => {
if (status === 200 && response.id != null) {
resolve(response.id);
@ -137,6 +155,16 @@ export class PaymentComponent implements OnInit {
reject();
}
});
} else if (this.method === 'bank') {
(window as any).Stripe.bankAccount.createToken(this.bank, (status: number, response: any) => {
if (status === 200 && response.id != null) {
resolve(response.id);
} else if (response.error != null) {
reject(response.error.message);
} else {
reject();
}
});
}
});
}

2
src/app/settings/premium.component.html
View File

@ -65,7 +65,7 @@
</div>
<small class="text-muted font-italic">{{'paymentChargedAnnually' | i18n}}</small>
<h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
<app-payment></app-payment>
<app-payment [hideBank]="true"></app-payment>
<button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="form.loading">
<i class="fa fa-spinner fa-spin"></i>
<span>{{'submit' | i18n}}</span>

18
src/app/settings/user-billing.component.html
View File

@ -36,7 +36,7 @@
</dd>
</dl>
</div>
<div class="col-8">
<div class="col-8" *ngIf="subscription">
<strong class="d-block mb-1">{{'details' | i18n}}</strong>
<table class="table">
<tbody>
@ -82,22 +82,22 @@
</div>
</ng-container>
<h2 class="spaced-header">{{'storage' | i18n}}</h2>
<p>{{'subscriptionStorage' | i18n : billing.maxStorageGb : billing.storageName || '0 MB'}}</p>
<p>{{'subscriptionStorage' | i18n : billing.maxStorageGb || 0 : billing.storageName || '0 MB'}}</p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" [ngStyle]="{width: storagePercentage + '%' }" [attr.aria-valuenow]="storagePercentage"
<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">
<ng-container *ngIf="!showAdjustStorage">
<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" (click)="adjustStorage(false)">
<button type="button" class="ml-1 btn btn-outline-secondary" (click)="adjustStorage(false)">
{{'removeStorage' | i18n}}
</button>
</ng-container>
<app-adjust-storage [storageGbPrice]="4" [add]="adjustStorageAdd" [user]="true" (onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)"
</div>
<app-adjust-storage [storageGbPrice]="4" [add]="adjustStorageAdd" (onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)"
*ngIf="showAdjustStorage"></app-adjust-storage>
</div>
</ng-container>
@ -112,8 +112,8 @@
<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" [user]="true" (onAdjusted)="closePayment(true)"
(onCanceled)="closePayment(false)" *ngIf="showAdjustPayment">
<app-adjust-payment [currentType]="paymentSource != null ? paymentSource.type : null" (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>

7
src/app/settings/user-billing.component.ts
View File

@ -170,6 +170,11 @@ export class UserBillingComponent implements OnInit {
}
get storagePercentage() {
return this.billing != null ? +(100 * (this.billing.storageGb / this.billing.maxStorageGb)).toFixed(2) : 0;
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;
}
}

45
src/locales/en/messages.json
View File

@ -2170,5 +2170,50 @@
},
"taxInformationDesc": {
"message": "Please contact support to provide (or update) tax information for your invoices."
},
"billingPlan": {
"message": "Plan",
"description": "A billing plan/package. For example: families, teams, enterprise, etc."
},
"changeBillingPlan": {
"message": "Change Plan",
"description": "A billing plan/package. For example: families, teams, enterprise, etc."
},
"invoice": {
"message": "Invoice"
},
"verifyBankAccount": {
"message": "Verify Bank Account"
},
"verifyBankAccountDesc": {
"message": "We have made two micro-deposits to your bank account (it may take 1-2 business days to show up). Enter these amounts to verify the bank account."
},
"verifyBankAccountInitialDesc": {
"message": "Payment with a bank account is only available to customers in the United States. You will be required to verify your bank account. We will make two micro-deposits within the next 1-2 business days. Enter these amounts on the organization's billing page to verify the bank account."
},
"verifyBankAccountFailureWarning": {
"message": "Failure to verify the bank account will result in a missed payment and your subscription being disabled."
},
"bankAccount": {
"message": "Bank Account"
},
"routingNumber": {
"message": "Routing Number",
"description": "Bank account routing number"
},
"accountNumber": {
"message": "Account Number"
},
"accountHolderName": {
"message": "Account Holder Name"
},
"bankAccountType": {
"message": "Account Type"
},
"bankAccountTypeCompany": {
"message": "Company (Business)"
},
"bankAccountTypeIndividual": {
"message": "Individual (Personal)"
}
}