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,14 +118,6 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
           tier: this.selectedPlanId(),
           details: planDetails,
         };
-      }
-    });
-
-    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,
@@ -138,6 +130,11 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
         );
 
         this.estimatedTax = 0;
+      } else {
+        this.complete.emit({ status: UpgradePaymentStatus.Closed, organizationId: null });
+        return;
+      }
+    });
 
     this.formGroup.valueChanges
       .pipe(debounceTime(1000), takeUntilDestroyed(this.destroyRef))
@@ -146,8 +143,10 @@ export class UpgradePaymentComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    if (this.cartSummaryComponent) {
       this.cartSummaryComponent.isExpanded.set(false);
     }
+  }
 
   protected get isPremiumPlan(): boolean {
     return this.selectedPlanId() === PersonalSubscriptionPricingTierIds.Premium;