Breakup billing payment and billing history pages

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,

apps/web/src/app/organizations/billing/organization-billing-history.component.html

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

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

apps/web/src/app/organizations/billing/organization-payment-method.component.html

@@ -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>
+  <h2 class="spaced-header">{{ "taxInformation" | i18n }}</h2>
-  <table class="table mb-2" *ngIf="invoices && invoices.length">
+  <p>{{ "taxInformationDesc" | i18n }}</p>
-    <tbody>
+  <div *ngIf="!org || loading">
-      <tr *ngFor="let i of invoices">
+    <i
-        <td>{{ i.date | date: "mediumDate" }}</td>
+      class="bwi bwi-spinner bwi-spin text-muted"
-        <td>
+      title="{{ 'loading' | i18n }}"
-          <a
+      aria-hidden="true"
-            href="{{ i.pdfUrl }}"
+    ></i>
-            target="_blank"
+    <span class="sr-only">{{ "loading" | i18n }}</span>
-            rel="noopener"
+  </div>
-            class="mr-2"
+  <form
-            appA11yTitle="{{ 'downloadInvoice' | i18n }}"
+    *ngIf="org && !loading"
-          >
+    #formTax
-            <i class="bwi bwi-file-pdf" aria-hidden="true"></i
+    (ngSubmit)="submitTaxInfo()"
-          ></a>
+    [appApiAction]="taxFormPromise"
-          <a href="{{ i.url }}" target="_blank" rel="noopener" title="{{ 'viewInvoice' | i18n }}">
+    ngNativeValidate
-            {{ "invoiceNumber" | i18n: i.number }}</a
+  >
-          >
+    <app-tax-info></app-tax-info>
-        </td>
+    <button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
-        <td>{{ i.amount | currency: "$" }}</td>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-        <td>
+      <span>{{ "save" | i18n }}</span>
-          <span *ngIf="i.paid">
+    </button>
-            <i class="bwi bwi-check text-success" aria-hidden="true"></i>
+  </form>
-            {{ "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>

apps/web/src/app/organizations/billing/organization-payment-method.component.ts

@@ -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",
+  selector: "app-org-payment-method",
-  templateUrl: "./organization-billing.component.html",
+  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>;
-
+  taxFormPromise: Promise<any>;
-  // TODO - Make sure to properly split out the billing/invoice and payment method/account during org admin refresh
 
   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;
-  }
 }

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

@@ -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] },
           },

apps/web/src/app/organizations/settings/account.component.html

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

apps/web/src/app/organizations/settings/account.component.ts

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

apps/web/src/app/organizations/settings/settings.component.html

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

apps/web/src/locales/en/messages.json

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