diff --git a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.html b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.html index 0d63b3d86b3..3e230773a29 100644 --- a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.html +++ b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.html @@ -1,26 +1,28 @@ -@if (step() == PlanSelectionStep) { - @if (hasPremiumPersonally() && premiumToOrganizationUpgradeEnabled()) { + +@if (showPremiumOrgFlow()) { + @if (step() == PlanSelectionStep) { - } @else { - - } -} @else if (step() == PaymentStep && selectedPlan() !== null && account() !== null) { - @if (hasPremiumPersonally()) { + } @else if (step() == PaymentStep && selectedPlan() !== null && account() !== null) { - } @else { + } +} @else { + + @if (step() == PlanSelectionStep) { + + } @else if (step() == PaymentStep && selectedPlan() !== null && account() !== null) { { it("should display app-premium-org-upgrade-payment when user has premium personally", async () => { mockBillingAccountProfileStateService.hasPremiumPersonally$.mockReturnValue(of(true)); + mockConfigService.getFeatureFlag$.mockReturnValue(of(true)); const customDialogData: UnifiedUpgradeDialogParams = { account: mockAccount, diff --git a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts index de214e6b9b1..2bfd3fd3312 100644 --- a/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts +++ b/apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.ts @@ -116,12 +116,13 @@ export class UnifiedUpgradeDialogComponent implements OnInit { this.billingAccountProfileStateService.hasPremiumPersonally$(this.params.account.id), { initialValue: false }, ); - - readonly premiumToOrganizationUpgradeEnabled = toSignal( + protected readonly premiumToOrganizationUpgradeEnabled = toSignal( this.configService.getFeatureFlag$(FeatureFlag.PM29593_PremiumToOrganizationUpgrade), { initialValue: false }, ); - + protected readonly showPremiumOrgFlow = computed( + () => this.hasPremiumPersonally() && this.premiumToOrganizationUpgradeEnabled(), + ); // Type-narrowed computed signal for app-upgrade-payment // When hasPremiumPersonally is false, selectedPlan will only contain PersonalSubscriptionPricingTierId protected readonly selectedPersonalPlanId = computed(