[PM-29138] fix defect with pricing service on self host (#17819)

* [PM-29138] fix defect with pricing service on self host

* use iscloud instead of manually checking region

* fixing strict compile issues

* spacing updates from design review

* final spacing edits

* pr feedback

* typechecking

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

@@ -157,7 +157,7 @@ export class CloudHostedPremiumVNextComponent {
         return {
           tier,
           price:
-            tier?.passwordManager.type === "standalone"
+            tier?.passwordManager.type === "standalone" && tier.passwordManager.annualPrice
               ? Number((tier.passwordManager.annualPrice / 12).toFixed(2))
               : 0,
           features: tier?.passwordManager.features.map((f) => f.value) || [],
@@ -172,7 +172,7 @@ export class CloudHostedPremiumVNextComponent {
         return {
           tier,
           price:
-            tier?.passwordManager.type === "packaged"
+            tier?.passwordManager.type === "packaged" && tier.passwordManager.annualPrice
               ? Number((tier.passwordManager.annualPrice / 12).toFixed(2))
               : 0,
           features: tier?.passwordManager.features.map((f) => f.value) || [],

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

@@ -1,15 +1,15 @@
 import { CdkTrapFocus } from "@angular/cdk/a11y";
 import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, OnInit, computed, input, output, signal } from "@angular/core";
+import { Component, computed, DestroyRef, input, OnInit, output, signal } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { catchError, of } from "rxjs";
 
+import { SubscriptionPricingCardDetails } from "@bitwarden/angular/billing/types/subscription-pricing-card-details";
 import { SubscriptionPricingServiceAbstraction } from "@bitwarden/common/billing/abstractions/subscription-pricing.service.abstraction";
 import {
   PersonalSubscriptionPricingTier,
   PersonalSubscriptionPricingTierId,
   PersonalSubscriptionPricingTierIds,
-  SubscriptionCadence,
   SubscriptionCadenceIds,
 } from "@bitwarden/common/billing/types/subscription-pricing-tier";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -32,14 +32,6 @@ export type UpgradeAccountResult = {
   plan: PersonalSubscriptionPricingTierId | null;
 };
 
-type CardDetails = {
-  title: string;
-  tagline: string;
-  price: { amount: number; cadence: SubscriptionCadence };
-  button: { text: string; type: ButtonType };
-  features: string[];
-};
-
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -60,8 +52,8 @@ export class UpgradeAccountComponent implements OnInit {
   planSelected = output<PersonalSubscriptionPricingTierId>();
   closeClicked = output<UpgradeAccountStatus>();
   protected readonly loading = signal(true);
-  protected premiumCardDetails!: CardDetails;
-  protected familiesCardDetails!: CardDetails;
+  protected premiumCardDetails!: SubscriptionPricingCardDetails;
+  protected familiesCardDetails!: SubscriptionPricingCardDetails;
 
   protected familiesPlanType = PersonalSubscriptionPricingTierIds.Families;
   protected premiumPlanType = PersonalSubscriptionPricingTierIds.Premium;
@@ -122,14 +114,16 @@ export class UpgradeAccountComponent implements OnInit {
   private createCardDetails(
     tier: PersonalSubscriptionPricingTier,
     buttonType: ButtonType,
-  ): CardDetails {
+  ): SubscriptionPricingCardDetails {
     return {
       title: tier.name,
       tagline: tier.description,
-      price: {
-        amount: tier.passwordManager.annualPrice / 12,
-        cadence: SubscriptionCadenceIds.Monthly,
-      },
+      price: tier.passwordManager.annualPrice
+        ? {
+            amount: tier.passwordManager.annualPrice / 12,
+            cadence: SubscriptionCadenceIds.Monthly,
+          }
+        : undefined,
       button: {
         text: this.i18nService.t(
           this.isFamiliesPlan(tier.id) ? "startFreeFamiliesTrial" : "upgradeToPremium",

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

@@ -200,7 +200,8 @@ export class UpgradePaymentService {
   }
 
   private getPasswordManagerSeats(planDetails: PlanDetails): number {
-    return "users" in planDetails.details.passwordManager
+    return "users" in planDetails.details.passwordManager &&
+      planDetails.details.passwordManager.users
       ? planDetails.details.passwordManager.users
       : 0;
   }