diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.spec.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.spec.ts index fdfc3e7f4f7..38c60173f77 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.spec.ts +++ b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.spec.ts @@ -337,7 +337,7 @@ describe("PremiumOrgUpgradePaymentComponent", () => { expect(mockToastService.showToast).toHaveBeenCalledWith({ variant: "success", - message: "organizationUpdated", + message: "plansUpdated", }); expect(completeSpy).toHaveBeenCalledWith({ status: PremiumOrgUpgradePaymentStatus.UpgradedToTeams, diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.ts index c7ca7a88383..380e116911c 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.ts +++ b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade-payment/premium-org-upgrade-payment.component.ts @@ -177,7 +177,7 @@ export class PremiumOrgUpgradePaymentComponent implements OnInit, AfterViewInit type: "amount-off", value: this.estimatedInvoice().credit, translationKey: "premiumMembershipDiscount", - quantity: 1, + hideFormattedAmount: true, }, }; }); diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.html b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.html index 69d238cb521..8f8bd11a02b 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.html +++ b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.html @@ -4,6 +4,17 @@ cdkTrapFocus cdkTrapFocusAutoCapture > +
+ +

diff --git a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts index 5a5d21d363e..fa5112f9971 100644 --- a/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts +++ b/apps/web/src/app/billing/individual/upgrade/premium-org-upgrade/premium-org-upgrade.component.ts @@ -1,6 +1,13 @@ import { CdkTrapFocus } from "@angular/cdk/a11y"; import { CommonModule } from "@angular/common"; -import { Component, DestroyRef, OnInit, output, signal } from "@angular/core"; +import { + Component, + DestroyRef, + OnInit, + output, + signal, + ChangeDetectionStrategy, +} from "@angular/core"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { combineLatest, catchError, of } from "rxjs"; @@ -16,15 +23,21 @@ import { SubscriptionCadenceIds, } from "@bitwarden/common/billing/types/subscription-pricing-tier"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values"; import { ButtonType, DialogModule, ToastService } from "@bitwarden/components"; import { PricingCardComponent } from "@bitwarden/pricing"; import { SharedModule } from "../../../../shared"; import { BillingServicesModule } from "../../../services"; +export const PremiumOrgUpgradeStatus = { + Closed: "closed", + ProceededToPayment: "proceeded-to-payment", +} as const; + +export type PremiumOrgUpgradeStatus = UnionOfValues; -// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush -// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, selector: "app-premium-org-upgrade", imports: [ CommonModule, @@ -38,6 +51,9 @@ import { BillingServicesModule } from "../../../services"; }) export class PremiumOrgUpgradeComponent implements OnInit { planSelected = output(); + closeClicked = output(); + protected closedStatus = PremiumOrgUpgradeStatus.Closed; + protected readonly loading = signal(true); protected familiesCardDetails!: SubscriptionPricingCardDetails; protected teamsCardDetails!: SubscriptionPricingCardDetails; @@ -129,11 +145,13 @@ export class PremiumOrgUpgradeComponent implements OnInit { } let priceAmount: number | undefined; + let shouldShowPerUser = false; if ("annualPrice" in tier.passwordManager) { priceAmount = tier.passwordManager.annualPrice; } else if ("annualPricePerUser" in tier.passwordManager) { priceAmount = tier.passwordManager.annualPricePerUser; + shouldShowPerUser = true; } return { @@ -144,6 +162,7 @@ export class PremiumOrgUpgradeComponent implements OnInit { ? { amount: priceAmount / 12, cadence: SubscriptionCadenceIds.Monthly, + showPerUser: shouldShowPerUser, } : undefined, button: { diff --git a/libs/angular/src/billing/types/subscription-pricing-card-details.ts b/libs/angular/src/billing/types/subscription-pricing-card-details.ts index 9000b10a729..fb13706a69a 100644 --- a/libs/angular/src/billing/types/subscription-pricing-card-details.ts +++ b/libs/angular/src/billing/types/subscription-pricing-card-details.ts @@ -4,7 +4,7 @@ import { ButtonType } from "@bitwarden/components"; export type SubscriptionPricingCardDetails = { title: string; tagline: string; - price?: { amount: number; cadence: SubscriptionCadence }; + price?: { amount: number; cadence: SubscriptionCadence; showPerUser?: boolean }; button: { text: string; type: ButtonType; icon?: { type: string; position: "before" | "after" } }; features: string[]; };