refactor: rename PremiumOrgUpgradeComponent to PremiumOrgUpgradePlanSelectionComponent

apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.html

@@ -1,5 +1,5 @@
 @if (step() == PlanSelectionStep) {
-  <app-premium-org-upgrade
+  <app-premium-org-upgrade-plan-selection
     (planSelected)="onPlanSelected($event)"
     (closeClicked)="onCloseClicked()"
   />

apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.spec.ts

@@ -16,12 +16,12 @@ import { mockAccountInfoWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
 import { DIALOG_DATA, DialogRef } from "@bitwarden/components";
 
-import { PremiumOrgUpgradeComponent } from "../premium-org-upgrade/premium-org-upgrade.component";
 import {
   PremiumOrgUpgradePaymentComponent,
   PremiumOrgUpgradePaymentResult,
   PremiumOrgUpgradePaymentStatus,
 } from "../premium-org-upgrade-payment/premium-org-upgrade-payment.component";
+import { PremiumOrgUpgradePlanSelectionComponent } from "../premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component";
 
 import {
   PremiumOrgUpgradeDialogComponent,
@@ -30,13 +30,13 @@ import {
 } from "./premium-org-upgrade-dialog.component";
 
 @Component({
-  selector: "app-premium-org-upgrade",
+  selector: "app-premium-org-upgrade-plan-selection",
   template: "",
   standalone: true,
-  providers: [PremiumOrgUpgradeComponent],
+  providers: [PremiumOrgUpgradePlanSelectionComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-class MockPremiumOrgUpgradeComponent {
+class MockPremiumOrgUpgradePlanSelectionComponent {
   readonly dialogTitleMessageOverride = input<string | null>(null);
   readonly hideContinueWithoutUpgradingButton = input<boolean>(false);
   planSelected = output<BusinessSubscriptionPricingTierId>();
@@ -108,10 +108,13 @@ describe("PremiumOrgUpgradeDialogComponent", () => {
     })
       .overrideComponent(PremiumOrgUpgradeDialogComponent, {
         remove: {
-          imports: [PremiumOrgUpgradeComponent, PremiumOrgUpgradePaymentComponent],
+          imports: [PremiumOrgUpgradePlanSelectionComponent, PremiumOrgUpgradePaymentComponent],
         },
         add: {
-          imports: [MockPremiumOrgUpgradeComponent, MockPremiumOrgUpgradePaymentComponent],
+          imports: [
+            MockPremiumOrgUpgradePlanSelectionComponent,
+            MockPremiumOrgUpgradePaymentComponent,
+          ],
         },
       })
       .compileComponents();
@@ -149,10 +152,13 @@ describe("PremiumOrgUpgradeDialogComponent", () => {
     })
       .overrideComponent(PremiumOrgUpgradeDialogComponent, {
         remove: {
-          imports: [PremiumOrgUpgradeComponent, PremiumOrgUpgradePaymentComponent],
+          imports: [PremiumOrgUpgradePlanSelectionComponent, PremiumOrgUpgradePaymentComponent],
         },
         add: {
-          imports: [MockPremiumOrgUpgradeComponent, MockPremiumOrgUpgradePaymentComponent],
+          imports: [
+            MockPremiumOrgUpgradePlanSelectionComponent,
+            MockPremiumOrgUpgradePaymentComponent,
+          ],
         },
       })
       .compileComponents();
@@ -426,11 +432,12 @@ describe("PremiumOrgUpgradeDialogComponent", () => {
 
   describe("Child Component Display Logic", () => {
     describe("Plan Selection Step", () => {
-      it("should display app-premium-org-upgrade on plan selection step", async () => {
+      it("should display app-premium-org-upgrade-plan-selection on plan selection step", async () => {
         const { fixture } = await createComponentWithDialogData(defaultDialogData);
 
-        const premiumOrgUpgradeElement =
-          fixture.nativeElement.querySelector("app-premium-org-upgrade");
+        const premiumOrgUpgradeElement = fixture.nativeElement.querySelector(
+          "app-premium-org-upgrade-plan-selection",
+        );
 
         expect(premiumOrgUpgradeElement).toBeTruthy();
       });

apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.ts

@@ -1,13 +1,6 @@
 import { DIALOG_DATA } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  Inject,
-  OnInit,
-  signal,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, Inject, signal } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { Router } from "@angular/router";
 
@@ -30,11 +23,11 @@ import {
 
 import { AccountBillingClient, PreviewInvoiceClient } from "../../../clients";
 import { BillingServicesModule } from "../../../services";
-import { PremiumOrgUpgradeComponent } from "../premium-org-upgrade/premium-org-upgrade.component";
 import {
   PremiumOrgUpgradePaymentComponent,
   PremiumOrgUpgradePaymentResult,
 } from "../premium-org-upgrade-payment/premium-org-upgrade-payment.component";
+import { PremiumOrgUpgradePlanSelectionComponent } from "../premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component";
 import { UpgradePaymentService } from "../upgrade-payment/services/upgrade-payment.service";
 
 export const PremiumOrgUpgradeDialogStatus = {
@@ -81,13 +74,13 @@ export type PremiumOrgUpgradeDialogParams = {
     DialogModule,
     ButtonModule,
     BillingServicesModule,
-    PremiumOrgUpgradeComponent,
+    PremiumOrgUpgradePlanSelectionComponent,
     PremiumOrgUpgradePaymentComponent,
   ],
   providers: [UpgradePaymentService, AccountBillingClient, PreviewInvoiceClient],
   templateUrl: "./premium-org-upgrade-dialog.component.html",
 })
-export class PremiumOrgUpgradeDialogComponent implements OnInit {
+export class PremiumOrgUpgradeDialogComponent {
   // Use signals for dialog state because inputs depend on parent component
   protected readonly step = signal<PremiumOrgUpgradeDialogStep>(
     PremiumOrgUpgradeDialogStep.PlanSelection,
@@ -117,9 +110,7 @@ export class PremiumOrgUpgradeDialogComponent implements OnInit {
     private router: Router,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private configService: ConfigService,
-  ) {}
-
-  async ngOnInit(): Promise<void> {
+  ) {
     if (!this.showPremiumToOrganizationUpgrade()) {
       // If the premium to organization upgrade feature is not enabled or user does not have premium personally, close the dialog
       this.close({ status: PremiumOrgUpgradeDialogStatus.Closed });

apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.spec.ts

@@ -17,11 +17,11 @@ import { PricingCardComponent } from "@bitwarden/pricing";
 
 import { BillingServicesModule } from "../../../services";
 
-import { PremiumOrgUpgradeComponent } from "./premium-org-upgrade.component";
+import { PremiumOrgUpgradePlanSelectionComponent } from "./premium-org-upgrade-plan-selection.component";
 
-describe("PremiumOrgUpgradeComponent", () => {
-  let sut: PremiumOrgUpgradeComponent;
-  let fixture: ComponentFixture<PremiumOrgUpgradeComponent>;
+describe("PremiumOrgUpgradePlanSelectionComponent", () => {
+  let sut: PremiumOrgUpgradePlanSelectionComponent;
+  let fixture: ComponentFixture<PremiumOrgUpgradePlanSelectionComponent>;
   const mockI18nService = mock<I18nService>();
   const mockSubscriptionPricingService = mock<SubscriptionPricingServiceAbstraction>();
   const mockToastService = mock<ToastService>();
@@ -88,7 +88,7 @@ describe("PremiumOrgUpgradeComponent", () => {
     );
 
     await TestBed.configureTestingModule({
-      imports: [PremiumOrgUpgradeComponent, PricingCardComponent, CdkTrapFocus],
+      imports: [PremiumOrgUpgradePlanSelectionComponent, PricingCardComponent, CdkTrapFocus],
       providers: [
         { provide: I18nService, useValue: mockI18nService },
         {
@@ -98,12 +98,12 @@ describe("PremiumOrgUpgradeComponent", () => {
         { provide: ToastService, useValue: mockToastService },
       ],
     })
-      .overrideComponent(PremiumOrgUpgradeComponent, {
+      .overrideComponent(PremiumOrgUpgradePlanSelectionComponent, {
         remove: { imports: [BillingServicesModule] },
       })
       .compileComponents();
 
-    fixture = TestBed.createComponent(PremiumOrgUpgradeComponent);
+    fixture = TestBed.createComponent(PremiumOrgUpgradePlanSelectionComponent);
     sut = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -203,7 +203,7 @@ describe("PremiumOrgUpgradeComponent", () => {
         of(mockBusinessPricingTiers),
       );
 
-      fixture = TestBed.createComponent(PremiumOrgUpgradeComponent);
+      fixture = TestBed.createComponent(PremiumOrgUpgradePlanSelectionComponent);
       sut = fixture.componentInstance;
       fixture.detectChanges();
 

apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.ts

@@ -37,7 +37,7 @@ export type PremiumOrgUpgradeStatus = UnionOfValues<typeof PremiumOrgUpgradeStat
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: "app-premium-org-upgrade",
+  selector: "app-premium-org-upgrade-plan-selection",
   imports: [
     CommonModule,
     DialogModule,
@@ -46,9 +46,9 @@ export type PremiumOrgUpgradeStatus = UnionOfValues<typeof PremiumOrgUpgradeStat
     PricingCardComponent,
     CdkTrapFocus,
   ],
-  templateUrl: "./premium-org-upgrade.component.html",
+  templateUrl: "./premium-org-upgrade-plan-selection.component.html",
 })
-export class PremiumOrgUpgradeComponent implements OnInit {
+export class PremiumOrgUpgradePlanSelectionComponent implements OnInit {
   planSelected = output<PersonalSubscriptionPricingTierId | BusinessSubscriptionPricingTierId>();
   closeClicked = output<PremiumOrgUpgradeStatus>();
   protected closedStatus = PremiumOrgUpgradeStatus.Closed;
@@ -69,7 +69,7 @@ export class PremiumOrgUpgradeComponent implements OnInit {
     private destroyRef: DestroyRef,
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     combineLatest([
       this.subscriptionPricingService.getPersonalSubscriptionPricingTiers$(),
       this.subscriptionPricingService.getBusinessSubscriptionPricingTiers$(),