diff --git a/apps/web/src/app/billing/individual/premium/cloud-hosted-premium-vnext.component.ts b/apps/web/src/app/billing/individual/premium/cloud-hosted-premium-vnext.component.ts index d78451e4f3a..aac7fd3156f 100644 --- a/apps/web/src/app/billing/individual/premium/cloud-hosted-premium-vnext.component.ts +++ b/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) || [], diff --git a/apps/web/src/app/billing/individual/upgrade/upgrade-account/upgrade-account.component.ts b/apps/web/src/app/billing/individual/upgrade/upgrade-account/upgrade-account.component.ts index a4089d7a47a..2ac44ff72db 100644 --- a/apps/web/src/app/billing/individual/upgrade/upgrade-account/upgrade-account.component.ts +++ b/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(); closeClicked = output(); 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", diff --git a/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.ts b/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.ts index 94f1c816168..ae18ab4c629 100644 --- a/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.ts +++ b/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; } diff --git a/libs/angular/src/billing/components/premium-upgrade-dialog/premium-upgrade-dialog.component.html b/libs/angular/src/billing/components/premium-upgrade-dialog/premium-upgrade-dialog.component.html index 3b89d7cf56a..52cd36e9356 100644 --- a/libs/angular/src/billing/components/premium-upgrade-dialog/premium-upgrade-dialog.component.html +++ b/libs/angular/src/billing/components/premium-upgrade-dialog/premium-upgrade-dialog.component.html @@ -20,33 +20,35 @@
-
+

{{ "upgradeToPremium" | i18n }}

-
+

{{ cardDetails.tagline }}

-
-
- {{ - cardDetails.price.amount | currency: "$" - }} - - / {{ cardDetails.price.cadence | i18n }} - + @if (cardDetails.price) { +
+
+ {{ + cardDetails.price.amount | currency: "$" + }} + + / {{ cardDetails.price.cadence | i18n }} + +
-
+ } -
+