[PM-26019] Pre-Launch Payment Dialog (#16859)

apps/web/src/app/billing/individual/premium/premium-vnext.component.ts

@@ -42,6 +42,13 @@ import {
   UnifiedUpgradeDialogStep,
 } from "../upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component";
 
+const RouteParams = {
+  callToAction: "callToAction",
+} as const;
+const RouteParamValues = {
+  upgradeToPremium: "upgradeToPremium",
+} as const;
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -61,6 +68,7 @@ export class PremiumVNextComponent {
   protected hasPremiumFromAnyOrganization$: Observable<boolean>;
   protected hasPremiumPersonally$: Observable<boolean>;
   protected shouldShowNewDesign$: Observable<boolean>;
+  protected shouldShowUpgradeDialogOnInit$: Observable<boolean>;
   protected personalPricingTiers$: Observable<PersonalSubscriptionPricingTier[]>;
   protected premiumCardData$: Observable<{
     tier: PersonalSubscriptionPricingTier | undefined;
@@ -72,7 +80,6 @@ export class PremiumVNextComponent {
     price: number;
     features: string[];
   }>;
-
   protected subscriber!: BitwardenSubscriber;
   protected isSelfHost = false;
   private destroyRef = inject(DestroyRef);
@@ -134,6 +141,17 @@ export class PremiumVNextComponent {
       )
       .subscribe();
 
+    this.shouldShowUpgradeDialogOnInit$ = combineLatest([
+      this.hasPremiumFromAnyOrganization$,
+      this.hasPremiumPersonally$,
+      this.activatedRoute.queryParams,
+    ]).pipe(
+      map(([hasOrgPremium, hasPersonalPremium, queryParams]) => {
+        const cta = queryParams[RouteParams.callToAction];
+        return !hasOrgPremium && !hasPersonalPremium && cta === RouteParamValues.upgradeToPremium;
+      }),
+    );
+
     this.personalPricingTiers$ =
       this.subscriptionPricingService.getPersonalSubscriptionPricingTiers$();
 
@@ -166,6 +184,17 @@ export class PremiumVNextComponent {
       }),
       shareReplay({ bufferSize: 1, refCount: true }),
     );
+
+    this.shouldShowUpgradeDialogOnInit$
+      .pipe(
+        switchMap(async (shouldShowUpgradeDialogOnInit) => {
+          if (shouldShowUpgradeDialogOnInit) {
+            from(this.openUpgradeDialog("Premium"));
+          }
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe();
   }
 
   private navigateToSubscriptionPage = (): Promise<boolean> =>

apps/web/src/app/billing/individual/upgrade/upgrade-payment/upgrade-payment.component.ts

@@ -1,5 +1,5 @@
 import {
-  AfterViewInit,
+  AfterViewChecked,
   Component,
   DestroyRef,
   input,
@@ -96,7 +96,7 @@ export type UpgradePaymentParams = {
   providers: [UpgradePaymentService],
   templateUrl: "./upgrade-payment.component.html",
 })
-export class UpgradePaymentComponent implements OnInit, AfterViewInit {
+export class UpgradePaymentComponent implements OnInit, AfterViewChecked {
   protected readonly selectedPlanId = input.required<PersonalSubscriptionPricingTierId>();
   protected readonly account = input.required<Account>();
   protected goBack = output<void>();
@@ -118,6 +118,7 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
   });
 
   protected readonly loading = signal(true);
+  private cartSummaryConfigured = false;
   private pricingTiers$!: Observable<PersonalSubscriptionPricingTier[]>;
 
   // Cart Summary data
@@ -201,9 +202,11 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
     this.loading.set(false);
   }
 
-  ngAfterViewInit(): void {
-    if (this.cartSummaryComponent) {
+  ngAfterViewChecked(): void {
+    // Configure cart summary only once when it becomes available
+    if (this.cartSummaryComponent && !this.cartSummaryConfigured) {
       this.cartSummaryComponent.isExpanded.set(false);
+      this.cartSummaryConfigured = true;
     }
   }