Create initial 'Billing' tab

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

@@ -27,6 +27,10 @@ import { FooterComponent } from "../layouts/footer.component";
 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 { OrganizationBillingTabComponent } from "../organizations/billing/organization-billing-tab.component";
+import { OrganizationBillingComponent } from "../organizations/billing/organization-billing.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";
 import { OrganizationLayoutComponent } from "../organizations/layouts/organization-layout.component";
@@ -59,13 +63,10 @@ import { ReportListComponent as OrgReportListComponent } from "../organizations/
 import { ReportingComponent as OrgReportingComponent } from "../organizations/reporting/reporting.component";
 import { AccountComponent as OrgAccountComponent } from "../organizations/settings/account.component";
 import { AdjustSubscription } from "../organizations/settings/adjust-subscription.component";
-import { BillingSyncApiKeyComponent } from "../organizations/settings/billing-sync-api-key.component";
 import { ChangePlanComponent } from "../organizations/settings/change-plan.component";
 import { DeleteOrganizationComponent } from "../organizations/settings/delete-organization.component";
 import { DownloadLicenseComponent } from "../organizations/settings/download-license.component";
 import { ImageSubscriptionHiddenComponent as OrgSubscriptionHiddenComponent } from "../organizations/settings/image-subscription-hidden.component";
-import { OrganizationBillingComponent } from "../organizations/settings/organization-billing.component";
-import { OrganizationSubscriptionComponent } from "../organizations/settings/organization-subscription.component";
 import { SettingsComponent as OrgSettingComponent } from "../organizations/settings/settings.component";
 import { TwoFactorSetupComponent as OrgTwoFactorSetupComponent } from "../organizations/settings/two-factor-setup.component";
 import { AcceptFamilySponsorshipComponent } from "../organizations/sponsorships/accept-family-sponsorship.component";
@@ -235,6 +236,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrganizationSwitcherComponent,
     OrgAccountComponent,
     OrgAddEditComponent,
+    OrganizationBillingTabComponent,
     OrganizationBillingComponent,
     OrganizationLayoutComponent,
     OrganizationPlansComponent,

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

@@ -0,0 +1,23 @@
+<div class="container page-content">
+  <div class="row">
+    <div class="col-3">
+      <div class="card">
+        <div class="card-header">{{ "billing" | i18n }}</div>
+        <div class="list-group list-group-flush">
+          <a routerLink="subscription" class="list-group-item" routerLinkActive="active">
+            {{ "subscription" | i18n }}
+          </a>
+          <a routerLink="payment-method" class="list-group-item" routerLinkActive="active">
+            {{ "paymentMethod" | i18n }}
+          </a>
+          <a routerLink="history" class="list-group-item" routerLinkActive="active">
+            {{ "billingHistory" | i18n }}
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="col-9">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { Organization } from "@bitwarden/common/models/domain/organization";
+
+@Component({
+  selector: "app-org-billing-tab",
+  templateUrl: "organization-billing-tab.component.html",
+})
+export class OrganizationBillingTabComponent implements OnInit {
+  organization: Organization;
+
+  constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {}
+
+  ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      this.organization = await this.organizationService.get(params.organizationId);
+    });
+  }
+}

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

@@ -6,6 +6,9 @@ import { Permissions } from "@bitwarden/common/enums/permissions";
 
 import { OrganizationVaultModule } from "../modules/vault/modules/organization-vault/organization-vault.module";
 
+import { OrganizationBillingTabComponent } from "./billing/organization-billing-tab.component";
+import { OrganizationBillingComponent } from "./billing/organization-billing.component";
+import { OrganizationSubscriptionComponent } from "./billing/organization-subscription.component";
 import { GroupsComponent } from "./groups/groups.component";
 import { PermissionsGuard } from "./guards/permissions.guard";
 import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
@@ -18,8 +21,6 @@ import { ReportListComponent } from "./reporting/report-list.component";
 import { ReportingComponent } from "./reporting/reporting.component";
 import { NavigationPermissionsService } from "./services/navigation-permissions.service";
 import { AccountComponent } from "./settings/account.component";
-import { OrganizationBillingComponent } from "./settings/organization-billing.component";
-import { OrganizationSubscriptionComponent } from "./settings/organization-subscription.component";
 import { SettingsComponent } from "./settings/settings.component";
 import { TwoFactorSetupComponent } from "./settings/two-factor-setup.component";
 import { ExposedPasswordsReportComponent } from "./tools/exposed-passwords-report.component";
@@ -276,6 +277,34 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "billing",
+        component: OrganizationBillingTabComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          permissions: [Permissions.ManageBilling],
+        },
+        children: [
+          { path: "", pathMatch: "full", redirectTo: "subscription" },
+          {
+            path: "subscription",
+            component: OrganizationSubscriptionComponent,
+            data: { titleId: "subscription" },
+          },
+          {
+            path: "payment-method",
+            component: OrganizationBillingComponent,
+            canActivate: [PermissionsGuard],
+            data: { titleId: "paymentMethod", permissions: [Permissions.ManageBilling] },
+          },
+          {
+            path: "history",
+            component: OrganizationBillingComponent,
+            canActivate: [PermissionsGuard],
+            data: { titleId: "billingHistory", permissions: [Permissions.ManageBilling] },
+          },
+        ],
+      },
     ],
   },
 ];

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

@@ -7,17 +7,6 @@
           <a routerLink="account" class="list-group-item" routerLinkActive="active">
             {{ "myOrganization" | i18n }}
           </a>
-          <a routerLink="subscription" class="list-group-item" routerLinkActive="active">
-            {{ "subscription" | i18n }}
-          </a>
-          <a
-            routerLink="billing"
-            class="list-group-item"
-            routerLinkActive="active"
-            *ngIf="showBilling"
-          >
-            {{ "billing" | i18n }}
-          </a>
           <a
             routerLink="two-factor"
             class="list-group-item"