diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.html b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.html index ff0e2a2ad4a..7392e83f7ca 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.html +++ b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.html @@ -1,5 +1,5 @@ @if (step() == PlanSelectionStep) { - diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.spec.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.spec.ts index f43fa1612c7..8c425966948 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.spec.ts +++ b/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(null); readonly hideContinueWithoutUpgradingButton = input(false); planSelected = output(); @@ -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(); }); diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.ts index 88f7a37c74a..3ac5db44e1a 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-dialog/premium-org-upgrade-dialog.component.ts +++ b/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.PlanSelection, @@ -117,9 +110,7 @@ export class PremiumOrgUpgradeDialogComponent implements OnInit { private router: Router, private billingAccountProfileStateService: BillingAccountProfileStateService, private configService: ConfigService, - ) {} - - async ngOnInit(): Promise { + ) { 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 }); diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.html b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.html similarity index 100% rename from apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.html rename to apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.html diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.spec.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.spec.ts similarity index 93% rename from apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.spec.ts rename to apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.spec.ts index 49004835d31..2abeaa7d702 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.spec.ts +++ b/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; +describe("PremiumOrgUpgradePlanSelectionComponent", () => { + let sut: PremiumOrgUpgradePlanSelectionComponent; + let fixture: ComponentFixture; const mockI18nService = mock(); const mockSubscriptionPricingService = mock(); const mockToastService = mock(); @@ -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(); diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.ts similarity index 96% rename from apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts rename to apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-plan-selection/premium-org-upgrade-plan-selection.component.ts index 24f566cda91..7d1ccd466ae 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts +++ b/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(); closeClicked = output(); protected closedStatus = PremiumOrgUpgradeStatus.Closed; @@ -69,7 +69,7 @@ export class PremiumOrgUpgradeComponent implements OnInit { private destroyRef: DestroyRef, ) {} - ngOnInit(): void { + async ngOnInit(): Promise { combineLatest([ this.subscriptionPricingService.getPersonalSubscriptionPricingTiers$(), this.subscriptionPricingService.getBusinessSubscriptionPricingTiers$(),