Billing/pm 26686/update upgrade account component to be responsive (#16808)

* fix(billing): Update initialization of payment component

* fix(billing): Add more signal validation

* fix(billing): Add responsiveness to upgrade-account component

apps/web/src/app/billing/individual/upgrade/unified-upgrade-dialog/unified-upgrade-dialog.component.html

@@ -1,6 +1,6 @@
 @if (step() == PlanSelectionStep) {
   <app-upgrade-account (planSelected)="onPlanSelected($event)" (closeClicked)="onCloseClicked()" />
-} @else if (step() == PaymentStep && selectedPlan() !== null) {
+} @else if (step() == PaymentStep && selectedPlan() !== null && account() !== null) {
   <app-upgrade-payment
     [selectedPlanId]="selectedPlan()"
     [account]="account()"

apps/web/src/app/billing/individual/upgrade/upgrade-account/upgrade-account.component.html

@@ -1,6 +1,6 @@
 @if (!loading()) {
   <section
-    class="tw-bg-background tw-rounded-xl tw-shadow-lg tw-max-w-5xl tw-min-w-[332px] tw-w-[870px] tw-border-secondary-100 tw-border-solid tw-border"
+    class="tw-w-screen tw-max-h-screen tw-min-w-[332px] md:tw-max-w-4xl tw-overflow-y-auto tw-self-center tw-bg-background tw-rounded-xl tw-shadow-lg tw-border-secondary-100 tw-border-solid tw-border"
     cdkTrapFocus
     cdkTrapFocusAutoCapture
   >
@@ -24,10 +24,10 @@
         </p>
       </div>
 
-      <div class="tw-flex tw-flex-row tw-gap-6 tw-mb-4">
+      <div class="tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 tw-gap-5 tw-mb-4">
         @if (premiumCardDetails) {
           <billing-pricing-card
-            class="tw-flex-1 tw-basis-0 tw-min-w-0"
+            class="tw-w-full tw-min-w-[216px] tw-max-w-[456px]"
             [tagline]="premiumCardDetails.tagline"
             [price]="premiumCardDetails.price"
             [button]="premiumCardDetails.button"
@@ -42,7 +42,7 @@
 
         @if (familiesCardDetails) {
           <billing-pricing-card
-            class="tw-flex-1 tw-basis-0 tw-min-w-0"
+            class="tw-w-full tw-min-w-[216px] tw-max-w-[456px]"
             [tagline]="familiesCardDetails.tagline"
             [price]="familiesCardDetails.price"
             [button]="familiesCardDetails.button"

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

@@ -26,6 +26,7 @@
       <section>
         @if (passwordManager) {
           <billing-cart-summary
+            #cartSummaryComponent
             [passwordManager]="passwordManager"
             [estimatedTax]="estimatedTax"
           ></billing-cart-summary>

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

@@ -118,27 +118,24 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
           tier: this.selectedPlanId(),
           details: planDetails,
         };
+        this.passwordManager = {
+          name: this.isFamiliesPlan ? "familiesMembership" : "premiumMembership",
+          cost: this.selectedPlan.details.passwordManager.annualPrice,
+          quantity: 1,
+          cadence: "year",
+        };
+
+        this.upgradeToMessage = this.i18nService.t(
+          this.isFamiliesPlan ? "upgradeToFamilies" : "upgradeToPremium",
+        );
+
+        this.estimatedTax = 0;
+      } else {
+        this.complete.emit({ status: UpgradePaymentStatus.Closed, organizationId: null });
+        return;
       }
     });
 
-    if (!this.selectedPlan) {
-      this.complete.emit({ status: UpgradePaymentStatus.Closed, organizationId: null });
-      return;
-    }
-
-    this.passwordManager = {
-      name: this.isFamiliesPlan ? "familiesMembership" : "premiumMembership",
-      cost: this.selectedPlan.details.passwordManager.annualPrice,
-      quantity: 1,
-      cadence: "year",
-    };
-
-    this.upgradeToMessage = this.i18nService.t(
-      this.isFamiliesPlan ? "upgradeToFamilies" : "upgradeToPremium",
-    );
-
-    this.estimatedTax = 0;
-
     this.formGroup.valueChanges
       .pipe(debounceTime(1000), takeUntilDestroyed(this.destroyRef))
       .subscribe(() => this.refreshSalesTax());
@@ -146,7 +143,9 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.cartSummaryComponent.isExpanded.set(false);
+    if (this.cartSummaryComponent) {
+      this.cartSummaryComponent.isExpanded.set(false);
+    }
   }
 
   protected get isPremiumPlan(): boolean {