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(