Restructure the `is-paid-org` guard to be Angular 17+ compliant

apps/web/src/app/admin-console/organizations/guards/is-paid-org.guard.spec.ts

@@ -9,7 +9,7 @@ import { OrganizationUserType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { DialogService } from "@bitwarden/components";
 
-import { IsPaidOrgGuard } from "./is-paid-org.guard";
+import { isPaidOrgGuard } from "./is-paid-org.guard";
 
 @Component({
   template: "<h1>This is the home screen!</h1>",
@@ -58,7 +58,7 @@ describe("Is Paid Org Guard", () => {
           {
             path: "organizations/:organizationId/paidOrganizationsOnly",
             component: PaidOrganizationOnlyComponent,
-            canActivate: [IsPaidOrgGuard],
+            canActivate: [isPaidOrgGuard()],
           },
           {
             path: "organizations/:organizationId/billing/subscription",

apps/web/src/app/admin-console/organizations/guards/is-paid-org.guard.ts

@@ -1,5 +1,10 @@
-import { Injectable } from "@angular/core";
+import { inject } from "@angular/core";
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
+import {
+  ActivatedRouteSnapshot,
+  CanActivateFn,
+  Router,
+  RouterStateSnapshot,
+} from "@angular/router";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { DialogService } from "@bitwarden/components";
@@ -11,27 +16,22 @@ import { DialogService } from "@bitwarden/components";
  * if they have access to upgrade the organization. If the organization is
  * paid routing proceeds."
  */
-@Injectable({
+export function isPaidOrgGuard(): CanActivateFn {
-  providedIn: "root",
+  return async (route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
-})
+    const router = inject(Router);
-export class IsPaidOrgGuard implements CanActivate {
+    const organizationService = inject(OrganizationService);
-  constructor(
+    const dialogService = inject(DialogService);
-    private router: Router,
-    private organizationService: OrganizationService,
-    private dialogService: DialogService,
-  ) {}
 
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    const org = await organizationService.get(route.params.organizationId);
-    const org = await this.organizationService.get(route.params.organizationId);
 
     if (org == null) {
-      return this.router.createUrlTree(["/"]);
+      return router.createUrlTree(["/"]);
     }
 
     if (org.isFreeOrg) {
       // Users without billing permission can't access billing
       if (!org.canEditSubscription) {
-        await this.dialogService.openSimpleDialog({
+        await dialogService.openSimpleDialog({
           title: { key: "upgradeOrganizationCloseSecurityGaps" },
           content: { key: "upgradeOrganizationCloseSecurityGapsDesc" },
           acceptButtonText: { key: "ok" },
@@ -40,7 +40,7 @@ export class IsPaidOrgGuard implements CanActivate {
         });
         return false;
       } else {
-        const upgradeConfirmed = await this.dialogService.openSimpleDialog({
+        const upgradeConfirmed = await dialogService.openSimpleDialog({
           title: { key: "upgradeOrganizationCloseSecurityGaps" },
           content: { key: "upgradeOrganizationCloseSecurityGapsDesc" },
           acceptButtonText: { key: "upgradeOrganization" },
@@ -48,7 +48,7 @@ export class IsPaidOrgGuard implements CanActivate {
           icon: "bwi-arrow-circle-up",
         });
         if (upgradeConfirmed) {
-          await this.router.navigate(["organizations", org.id, "billing", "subscription"], {
+          await router.navigate(["organizations", org.id, "billing", "subscription"], {
             queryParams: { upgrade: true },
           });
         }
@@ -56,5 +56,5 @@ export class IsPaidOrgGuard implements CanActivate {
     }
 
     return !org.isFreeOrg;
-  }
+  };
 }

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

@@ -9,7 +9,7 @@ import { InactiveTwoFactorReportComponent } from "../../../admin-console/organiz
 import { ReusedPasswordsReportComponent } from "../../../admin-console/organizations/tools/reused-passwords-report.component";
 import { UnsecuredWebsitesReportComponent } from "../../../admin-console/organizations/tools/unsecured-websites-report.component";
 import { WeakPasswordsReportComponent } from "../../../admin-console/organizations/tools/weak-passwords-report.component";
-import { IsPaidOrgGuard } from "../guards/is-paid-org.guard";
+import { isPaidOrgGuard } from "../guards/is-paid-org.guard";
 import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard";
 import { OrganizationRedirectGuard } from "../guards/org-redirect.guard";
 import { EventsComponent } from "../manage/events.component";
@@ -45,7 +45,7 @@ const routes: Routes = [
             data: {
               titleId: "exposedPasswordsReport",
             },
-            canActivate: [IsPaidOrgGuard],
+            canActivate: [isPaidOrgGuard()],
           },
           {
             path: "inactive-two-factor-report",
@@ -53,7 +53,7 @@ const routes: Routes = [
             data: {
               titleId: "inactive2faReport",
             },
-            canActivate: [IsPaidOrgGuard],
+            canActivate: [isPaidOrgGuard()],
           },
           {
             path: "reused-passwords-report",
@@ -61,7 +61,7 @@ const routes: Routes = [
             data: {
               titleId: "reusedPasswordsReport",
             },
-            canActivate: [IsPaidOrgGuard],
+            canActivate: [isPaidOrgGuard()],
           },
           {
             path: "unsecured-websites-report",
@@ -69,7 +69,7 @@ const routes: Routes = [
             data: {
               titleId: "unsecuredWebsitesReport",
             },
-            canActivate: [IsPaidOrgGuard],
+            canActivate: [isPaidOrgGuard()],
           },
           {
             path: "weak-passwords-report",
@@ -77,7 +77,7 @@ const routes: Routes = [
             data: {
               titleId: "weakPasswordsReport",
             },
-            canActivate: [IsPaidOrgGuard],
+            canActivate: [isPaidOrgGuard()],
           },
         ],
       },