From ec7784628675ac1baf5f501fa3c634f7ebf8f071 Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Wed, 13 Jul 2022 14:44:08 -0700 Subject: [PATCH] Breakup billing payment and billing history pages --- .../app/modules/loose-components.module.ts | 8 +- ...rganization-billing-history.component.html | 96 ++++++++++++++++++ .../organization-billing-history.component.ts | 49 +++++++++ ...rganization-payment-method.component.html} | 99 +++++-------------- ... organization-payment-method.component.ts} | 41 ++++---- .../organization-routing.module.ts | 20 +--- .../settings/account.component.html | 27 +---- .../settings/account.component.ts | 9 -- .../settings/settings.component.html | 2 +- apps/web/src/locales/en/messages.json | 3 + 10 files changed, 210 insertions(+), 144 deletions(-) create mode 100644 apps/web/src/app/organizations/billing/organization-billing-history.component.html create mode 100644 apps/web/src/app/organizations/billing/organization-billing-history.component.ts rename apps/web/src/app/organizations/billing/{organization-billing.component.html => organization-payment-method.component.html} (61%) rename apps/web/src/app/organizations/billing/{organization-billing.component.ts => organization-payment-method.component.ts} (77%) diff --git a/apps/web/src/app/modules/loose-components.module.ts b/apps/web/src/app/modules/loose-components.module.ts index d20484ae5a..f449c0a03e 100644 --- a/apps/web/src/app/modules/loose-components.module.ts +++ b/apps/web/src/app/modules/loose-components.module.ts @@ -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, diff --git a/apps/web/src/app/organizations/billing/organization-billing-history.component.html b/apps/web/src/app/organizations/billing/organization-billing-history.component.html new file mode 100644 index 0000000000..1b5a38bf29 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-history.component.html @@ -0,0 +1,96 @@ + + + + {{ "loading" | i18n }} + + +

{{ "invoices" | i18n }}

+

{{ "noInvoices" | i18n }}

+ + + + + + + + + +
{{ i.date | date: "mediumDate" }} + + + + {{ "invoiceNumber" | i18n: i.number }} + {{ i.amount | currency: "$" }} + + + {{ "paid" | i18n }} + + + + {{ "unpaid" | i18n }} + +
+

{{ "transactions" | i18n }}

+

{{ "noTransactions" | i18n }}

+ + + + + + + + + +
{{ t.createdDate | date: "mediumDate" }} + + {{ "chargeNoun" | i18n }} + + {{ "refundNoun" | i18n }} + + + {{ t.details }} + + {{ t.amount | currency: "$" }} +
+ * {{ "chargesStatement" | i18n: "BITWARDEN" }} +
diff --git a/apps/web/src/app/organizations/billing/organization-billing-history.component.ts b/apps/web/src/app/organizations/billing/organization-billing-history.component.ts new file mode 100644 index 0000000000..4197e94269 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-history.component.ts @@ -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; + } +} diff --git a/apps/web/src/app/organizations/billing/organization-billing.component.html b/apps/web/src/app/organizations/billing/organization-payment-method.component.html similarity index 61% rename from apps/web/src/app/organizations/billing/organization-billing.component.html rename to apps/web/src/app/organizations/billing/organization-payment-method.component.html index ce13772296..2b44a4d824 100644 --- a/apps/web/src/app/organizations/billing/organization-billing.component.html +++ b/apps/web/src/app/organizations/billing/organization-payment-method.component.html @@ -1,6 +1,6 @@