Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-29 12:55:21 +01:00
Code Issues Projects Releases Wiki Activity

Breakup billing payment and billing history pages

Browse Source
This commit is contained in:
Shane Melton 2022-07-13 14:44:08 -07:00
parent 870b248afa
commit ec77846286
10 changed files with 210 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/app/modules/loose-components.module.ts
View File

@ -28,8 +28,9 @@ import { FrontendLayoutComponent } from "../layouts/frontend-layout.component";
import { NavbarComponent } from "../layouts/navbar.component";
import { UserLayoutComponent } from "../layouts/user-layout.component";
import { BillingSyncApiKeyComponent } from "../organizations/billing/billing-sync-api-key.component";
import { OrganizationBillingHistoryComponent } from "../organizations/billing/organization-billing-history.component";
import { OrganizationBillingTabComponent } from "../organizations/billing/organization-billing-tab.component";
import { OrganizationBillingComponent } from "../organizations/billing/organization-billing.component";
import { OrganizationPaymentMethodComponent } from "../organizations/billing/organization-payment-method.component";
import { OrganizationSubscriptionComponent } from "../organizations/billing/organization-subscription.component";
import { GroupAddEditComponent as OrgGroupAddEditComponent } from "../organizations/groups/group-add-edit.component";
import { GroupsComponent as OrgGroupsComponent } from "../organizations/groups/groups.component";
@ -237,7 +238,8 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
OrgAccountComponent,
OrgAddEditComponent,
OrganizationBillingTabComponent,
OrganizationBillingComponent,
OrganizationPaymentMethodComponent,
OrganizationBillingHistoryComponent,
OrganizationLayoutComponent,
OrganizationPlansComponent,
OrganizationSubscriptionComponent,
@ -394,7 +396,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
OrganizationSwitcherComponent,
OrgAccountComponent,
OrgAddEditComponent,
OrganizationBillingComponent,
OrganizationPaymentMethodComponent,
OrganizationLayoutComponent,
OrganizationPlansComponent,
OrganizationSubscriptionComponent,

96
apps/web/src/app/organizations/billing/organization-billing-history.component.html Normal file
View File

@ -0,0 +1,96 @@
<div class="page-header d-flex">
<h1>
{{ "billingHistory" | i18n }}
</h1>
<button
(click)="load()"
class="btn btn-sm btn-outline-primary ml-auto"
*ngIf="firstLoaded"
[disabled]="loading"
>
<i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
{{ "refresh" | i18n }}
</button>
</div>
<ng-container *ngIf="!firstLoaded && loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container *ngIf="billing">
<h2 class="mt-3">{{ "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"
appA11yTitle="{{ 'downloadInvoice' | i18n }}"
>
<i class="bwi bwi-file-pdf" aria-hidden="true"></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="bwi bwi-check text-success" aria-hidden="true"></i>
{{ "paid" | i18n }}
</span>
<span *ngIf="!i.paid">
<i class="bwi bwi-exclamation-circle text-muted" aria-hidden="true"></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 || t.type === transactionType.Credit">
{{ "chargeNoun" | i18n }}
</span>
<span *ngIf="t.type === transactionType.Refund">{{ "refundNoun" | i18n }}</span>
</td>
<td>
<i
class="bwi bwi-fw"
*ngIf="t.paymentMethodType"
aria-hidden="true"
[ngClass]="{
'bwi-credit-card': t.paymentMethodType === paymentMethodType.Card,
'bwi-bank':
t.paymentMethodType === paymentMethodType.BankAccount ||
t.paymentMethodType === paymentMethodType.WireTransfer,
'bwi-bitcoin text-warning': t.paymentMethodType === paymentMethodType.BitPay,
'bwi-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>

49
apps/web/src/app/organizations/billing/organization-billing-history.component.ts Normal file
View File

@ -0,0 +1,49 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType";
import { TransactionType } from "@bitwarden/common/enums/transactionType";
import { BillingResponse } from "@bitwarden/common/models/response/billingResponse";
@Component({
selector: "app-org-billing-history",
templateUrl: "./organization-billing-history.component.html",
})
export class OrganizationBillingHistoryComponent implements OnInit {
loading = false;
firstLoaded = false;
billing: BillingResponse;
paymentMethodType = PaymentMethodType;
transactionType = TransactionType;
organizationId: string;
constructor(private apiService: ApiService, private route: ActivatedRoute) {}
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;
if (this.organizationId != null) {
this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
}
this.loading = false;
}
get invoices() {
return this.billing != null ? this.billing.invoices : null;
}
get transactions() {
return this.billing != null ? this.billing.transactions : null;
}
}

91
apps/web/src/app/organizations/billing/organization-billing.component.html → apps/web/src/app/organizations/billing/organization-payment-method.component.html
View File

@ -1,6 +1,6 @@
<div class="page-header d-flex">
<h1>
{{ "billing" | i18n }}
{{ "paymentMethod" | i18n }}
</h1>
<button
(click)="load()"
@ -41,6 +41,7 @@
*ngIf="showAddCredit"
>
</app-add-credit>
<h2 class="spaced-header">{{ "paymentMethod" | i18n }}</h2>
<p *ngIf="!paymentSource">{{ "noPaymentMethod" | i18n }}</p>
<ng-container *ngIf="paymentSource">
@ -137,76 +138,28 @@
*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"
appA11yTitle="{{ 'downloadInvoice' | i18n }}"
>
<i class="bwi bwi-file-pdf" aria-hidden="true"></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="bwi bwi-check text-success" aria-hidden="true"></i>
{{ "paid" | i18n }}
</span>
<span *ngIf="!i.paid">
<i class="bwi bwi-exclamation-circle text-muted" aria-hidden="true"></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 || t.type === transactionType.Credit">
{{ "chargeNoun" | i18n }}
</span>
<span *ngIf="t.type === transactionType.Refund">{{ "refundNoun" | i18n }}</span>
</td>
<td>
<h2 class="spaced-header">{{ "taxInformation" | i18n }}</h2>
<p>{{ "taxInformationDesc" | i18n }}</p>
<div *ngIf="!org || loading">
<i
class="bwi bwi-fw"
*ngIf="t.paymentMethodType"
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
[ngClass]="{
'bwi-credit-card': t.paymentMethodType === paymentMethodType.Card,
'bwi-bank':
t.paymentMethodType === paymentMethodType.BankAccount ||
t.paymentMethodType === paymentMethodType.WireTransfer,
'bwi-bitcoin text-warning': t.paymentMethodType === paymentMethodType.BitPay,
'bwi-paypal text-primary': t.paymentMethodType === paymentMethodType.PayPal
}"
></i>
{{ t.details }}
</td>
<td
[ngClass]="{ 'text-strike': t.refunded }"
title="{{ (t.refunded ? 'refunded' : '') | i18n }}"
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<form
*ngIf="org && !loading"
#formTax
(ngSubmit)="submitTaxInfo()"
[appApiAction]="taxFormPromise"
ngNativeValidate
>
{{ t.amount | currency: "$" }}
</td>
</tr>
</tbody>
</table>
<small class="text-muted">* {{ "chargesStatement" | i18n: "BITWARDEN" }}</small>
<app-tax-info></app-tax-info>
<button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
</form>
</ng-container>

41
apps/web/src/app/organizations/billing/organization-billing.component.ts → apps/web/src/app/organizations/billing/organization-payment-method.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from "@angular/core";
import { Component, OnInit, ViewChild } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
@ -6,29 +6,32 @@ import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType";
import { TransactionType } from "@bitwarden/common/enums/transactionType";
import { VerifyBankRequest } from "@bitwarden/common/models/request/verifyBankRequest";
import { BillingResponse } from "@bitwarden/common/models/response/billingResponse";
import { OrganizationResponse } from "@bitwarden/common/models/response/organizationResponse";
import { TaxInfoComponent } from "src/app/settings/tax-info.component";
@Component({
selector: "app-org-billing",
templateUrl: "./organization-billing.component.html",
selector: "app-org-payment-method",
templateUrl: "./organization-payment-method.component.html",
})
export class OrganizationBillingComponent implements OnInit {
export class OrganizationPaymentMethodComponent implements OnInit {
@ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent;
loading = false;
firstLoaded = false;
showAdjustPayment = false;
showAddCredit = false;
billing: BillingResponse;
org: OrganizationResponse;
paymentMethodType = PaymentMethodType;
transactionType = TransactionType;
organizationId: string;
verifyAmount1: number;
verifyAmount2: number;
verifyBankPromise: Promise<any>;
// TODO - Make sure to properly split out the billing/invoice and payment method/account during org admin refresh
taxFormPromise: Promise<any>;
constructor(
private apiService: ApiService,
@ -52,7 +55,13 @@ export class OrganizationBillingComponent implements OnInit {
}
this.loading = true;
if (this.organizationId != null) {
this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
const billingPromise = this.apiService.getOrganizationBilling(this.organizationId);
const orgPromise = this.apiService.getOrganization(this.organizationId);
const results = await Promise.all([billingPromise, orgPromise]);
this.billing = results[0];
this.org = results[1];
}
this.loading = false;
}
@ -82,6 +91,12 @@ export class OrganizationBillingComponent implements OnInit {
}
}
async submitTaxInfo() {
this.taxFormPromise = this.taxInfo.submitTaxInfo();
await this.taxFormPromise;
this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated"));
}
addCredit() {
if (this.paymentSourceInApp) {
this.platformUtilsService.showDialog(
@ -143,12 +158,4 @@ export class OrganizationBillingComponent implements OnInit {
this.paymentSource.type === PaymentMethodType.GoogleInApp)
);
}
get invoices() {
return this.billing != null ? this.billing.invoices : null;
}
get transactions() {
return this.billing != null ? this.billing.transactions : null;
}
}

20
apps/web/src/app/organizations/organization-routing.module.ts
View File

@ -6,8 +6,9 @@ import { Permissions } from "@bitwarden/common/enums/permissions";
import { OrganizationVaultModule } from "../modules/vault/modules/organization-vault/organization-vault.module";
import { OrganizationBillingHistoryComponent } from "./billing/organization-billing-history.component";
import { OrganizationBillingTabComponent } from "./billing/organization-billing-tab.component";
import { OrganizationBillingComponent } from "./billing/organization-billing.component";
import { OrganizationPaymentMethodComponent } from "./billing/organization-payment-method.component";
import { OrganizationSubscriptionComponent } from "./billing/organization-subscription.component";
import { GroupsComponent } from "./groups/groups.component";
import { PermissionsGuard } from "./guards/permissions.guard";
@ -164,23 +165,12 @@ const routes: Routes = [
data: { permissions: NavigationPermissionsService.getPermissions("settings") },
children: [
{ path: "", pathMatch: "full", redirectTo: "account" },
{ path: "account", component: AccountComponent, data: { titleId: "myOrganization" } },
{ path: "account", component: AccountComponent, data: { titleId: "organizationInfo" } },
{
path: "two-factor",
component: TwoFactorSetupComponent,
data: { titleId: "twoStepLogin" },
},
{
path: "billing",
component: OrganizationBillingComponent,
canActivate: [PermissionsGuard],
data: { titleId: "billing", permissions: [Permissions.ManageBilling] },
},
{
path: "subscription",
component: OrganizationSubscriptionComponent,
data: { titleId: "subscription" },
},
],
},
{
@ -293,13 +283,13 @@ const routes: Routes = [
},
{
path: "payment-method",
component: OrganizationBillingComponent,
component: OrganizationPaymentMethodComponent,
canActivate: [PermissionsGuard],
data: { titleId: "paymentMethod", permissions: [Permissions.ManageBilling] },
},
{
path: "history",
component: OrganizationBillingComponent,
component: OrganizationBillingHistoryComponent,
canActivate: [PermissionsGuard],
data: { titleId: "billingHistory", permissions: [Permissions.ManageBilling] },
},

27
apps/web/src/app/organizations/settings/account.component.html
View File

@ -1,5 +1,5 @@
<div class="page-header">
<h1>{{ "myOrganization" | i18n }}</h1>
<h1>{{ "organizationInfo" | i18n }}</h1>
</div>
<div *ngIf="loading">
<i
@ -87,31 +87,6 @@
{{ "rotateApiKey" | i18n }}
</button>
</ng-container>
<div class="secondary-header border-0 mb-0">
<h1>{{ "taxInformation" | i18n }}</h1>
</div>
<p>{{ "taxInformationDesc" | i18n }}</p>
<div *ngIf="!org || loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<form
*ngIf="org && !loading"
#formTax
(ngSubmit)="submitTaxInfo()"
[appApiAction]="taxFormPromise"
ngNativeValidate
>
<app-tax-info></app-tax-info>
<button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
</form>
<div class="secondary-header text-danger border-0 mb-0">
<h1>{{ "dangerZone" | i18n }}</h1>
</div>

9
apps/web/src/app/organizations/settings/account.component.ts
View File

@ -15,7 +15,6 @@ import { OrganizationResponse } from "@bitwarden/common/models/response/organiza
import { ApiKeyComponent } from "../../settings/api-key.component";
import { PurgeVaultComponent } from "../../settings/purge-vault.component";
import { TaxInfoComponent } from "../../settings/tax-info.component";
import { DeleteOrganizationComponent } from "./delete-organization.component";
@ -32,7 +31,6 @@ export class AccountComponent {
apiKeyModalRef: ViewContainerRef;
@ViewChild("rotateApiKeyTemplate", { read: ViewContainerRef, static: true })
rotateApiKeyModalRef: ViewContainerRef;
@ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent;
selfHosted = false;
canManageBilling = true;
@ -40,7 +38,6 @@ export class AccountComponent {
canUseApi = false;
org: OrganizationResponse;
formPromise: Promise<any>;
taxFormPromise: Promise<any>;
private organizationId: string;
@ -104,12 +101,6 @@ export class AccountComponent {
}
}
async submitTaxInfo() {
this.taxFormPromise = this.taxInfo.submitTaxInfo();
await this.taxFormPromise;
this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated"));
}
async deleteOrganization() {
await this.modalService.openViewRef(
DeleteOrganizationComponent,

2
apps/web/src/app/organizations/settings/settings.component.html
View File

@ -5,7 +5,7 @@
<div class="card-header">{{ "settings" | i18n }}</div>
<div class="list-group list-group-flush">
<a routerLink="account" class="list-group-item" routerLinkActive="active">
{{ "myOrganization" | i18n }}
{{ "organizationInfo" | i18n }}
</a>
<a
routerLink="two-factor"

3
apps/web/src/locales/en/messages.json
View File

@ -2890,6 +2890,9 @@
"myOrganization": {
"message": "My Organization"
},
"organizationInfo": {
"message": "Organization Info"
},
"deleteOrganization": {
"message": "Delete Organization"
},