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$(),