From 7989ad7b7c05656cd0bb630eca64561b771cee88 Mon Sep 17 00:00:00 2001 From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com> Date: Wed, 12 Nov 2025 20:38:13 +0100 Subject: [PATCH 01/18] [PM-26682] [Milestone 2d] Display discount on subscription page (#17229) * The discount badge implementation * Use existing flag * Added the top spaces as requested * refactor: move discount-badge to pricing library and consolidate discount classes * fix: add CommonModule import to discount-badge component and simplify discounted amount calculation - Add CommonModule import to discount-badge component for *ngIf directive - Simplify discountedSubscriptionAmount to use upcomingInvoice.amount from server instead of manual calculation * Fix the lint errors * Story update --------- Co-authored-by: Alex Morask --- .../user-subscription.component.html | 133 ++++++++++-------- .../individual/user-subscription.component.ts | 42 ++++++ .../billing/shared/billing-shared.module.ts | 3 + apps/web/src/locales/en/messages.json | 9 ++ .../organization-subscription.response.ts | 4 +- .../models/response/subscription.response.ts | 6 + libs/common/src/enums/feature-flag.enum.ts | 2 + .../discount-badge.component.html | 10 ++ .../discount-badge.component.mdx | 67 +++++++++ .../discount-badge.component.spec.ts | 108 ++++++++++++++ .../discount-badge.component.stories.ts | 123 ++++++++++++++++ .../discount-badge.component.ts | 70 +++++++++ libs/pricing/src/index.ts | 1 + 13 files changed, 522 insertions(+), 56 deletions(-) create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.html create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.mdx create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts create mode 100644 libs/pricing/src/components/discount-badge/discount-badge.component.ts diff --git a/apps/web/src/app/billing/individual/user-subscription.component.html b/apps/web/src/app/billing/individual/user-subscription.component.html index e801237467a..b7e490cdf2e 100644 --- a/apps/web/src/app/billing/individual/user-subscription.component.html +++ b/apps/web/src/app/billing/individual/user-subscription.component.html @@ -37,41 +37,63 @@
{{ sub.expiration | date: "mediumDate" }}
{{ "neverExpires" | i18n }}
-
-
-
-
{{ "status" | i18n }}
-
+
+
+
+
{{ "plan" | i18n }}
+
{{ "premiumMembership" | i18n }}
+
+
+
{{ "status" | i18n }}
+
{{ (subscription && subscriptionStatus) || "-" }} - {{ - "pendingCancellation" | i18n - }} -
-
{{ "nextCharge" | i18n }}
-
- {{ - nextInvoice - ? (sub.subscription.periodEndDate | date: "mediumDate") + - ", " + - (nextInvoice.amount | currency: "$") - : "-" - }} -
-
-
-
- {{ "details" | i18n }} - - - - - {{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @ - {{ i.amount | currency: "$" }} - - {{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }} - - - + {{ "pendingCancellation" | i18n }} +
+
+
+
{{ "nextChargeHeader" | i18n }}
+
+ + +
+ + {{ + (sub.subscription.periodEndDate | date: "MMM d, y") + + ", " + + (discountedSubscriptionAmount | currency: "$") + }} + + +
+ + +
+ + {{ + (sub.subscription.periodEndDate | date: "MMM d, y") + + ", " + + (subscriptionAmount | currency: "$") + }} + +
+ + + - +
+
@@ -90,8 +112,27 @@ - -
+
+

{{ "storage" | i18n }}

+

+ {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }} +

+ + +
+
+ + +
+
+ +

{{ "additionalOptions" | i18n }}

+

{{ "additionalOptionsDesc" | i18n }}

+
-

{{ "storage" | i18n }}

-

- {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }} -

- - -
-
- - -
-
- - +
diff --git a/apps/web/src/app/billing/individual/user-subscription.component.ts b/apps/web/src/app/billing/individual/user-subscription.component.ts index 19db9ec8e61..c39b5d153b1 100644 --- a/apps/web/src/app/billing/individual/user-subscription.component.ts +++ b/apps/web/src/app/billing/individual/user-subscription.component.ts @@ -7,13 +7,17 @@ import { firstValueFrom, lastValueFrom } from "rxjs"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service"; +import { BillingCustomerDiscount } from "@bitwarden/common/billing/models/response/organization-subscription.response"; import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/platform/abstractions/log.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { DialogService, ToastService } from "@bitwarden/components"; +import { DiscountInfo } from "@bitwarden/pricing"; import { AdjustStorageDialogComponent, @@ -42,6 +46,10 @@ export class UserSubscriptionComponent implements OnInit { cancelPromise: Promise; reinstatePromise: Promise; + protected enableDiscountDisplay$ = this.configService.getFeatureFlag$( + FeatureFlag.PM23341_Milestone_2, + ); + constructor( private apiService: ApiService, private platformUtilsService: PlatformUtilsService, @@ -54,6 +62,7 @@ export class UserSubscriptionComponent implements OnInit { private billingAccountProfileStateService: BillingAccountProfileStateService, private toastService: ToastService, private accountService: AccountService, + private configService: ConfigService, ) { this.selfHosted = this.platformUtilsService.isSelfHost(); } @@ -187,6 +196,28 @@ export class UserSubscriptionComponent implements OnInit { return this.sub != null ? this.sub.upcomingInvoice : null; } + get subscriptionAmount(): number { + if (!this.subscription?.items || this.subscription.items.length === 0) { + return 0; + } + + return this.subscription.items.reduce( + (sum, item) => sum + (item.amount || 0) * (item.quantity || 0), + 0, + ); + } + + get discountedSubscriptionAmount(): number { + // Use the upcoming invoice amount from the server as it already includes discounts, + // taxes, prorations, and all other adjustments. Fall back to subscription amount + // if upcoming invoice is not available. + if (this.nextInvoice?.amount != null) { + return this.nextInvoice.amount; + } + + return this.subscriptionAmount; + } + get storagePercentage() { return this.sub != null && this.sub.maxStorageGb ? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2) @@ -217,4 +248,15 @@ export class UserSubscriptionComponent implements OnInit { return this.subscription.status; } } + + getDiscountInfo(discount: BillingCustomerDiscount | null): DiscountInfo | null { + if (!discount) { + return null; + } + return { + active: discount.active, + percentOff: discount.percentOff, + amountOff: discount.amountOff, + }; + } } diff --git a/apps/web/src/app/billing/shared/billing-shared.module.ts b/apps/web/src/app/billing/shared/billing-shared.module.ts index fb593b39328..12792cd781a 100644 --- a/apps/web/src/app/billing/shared/billing-shared.module.ts +++ b/apps/web/src/app/billing/shared/billing-shared.module.ts @@ -1,6 +1,7 @@ import { NgModule } from "@angular/core"; import { BannerModule } from "@bitwarden/components"; +import { DiscountBadgeComponent } from "@bitwarden/pricing"; import { EnterBillingAddressComponent, EnterPaymentMethodComponent, @@ -28,6 +29,7 @@ import { UpdateLicenseComponent } from "./update-license.component"; BannerModule, EnterPaymentMethodComponent, EnterBillingAddressComponent, + DiscountBadgeComponent, ], declarations: [ BillingHistoryComponent, @@ -51,6 +53,7 @@ import { UpdateLicenseComponent } from "./update-license.component"; OffboardingSurveyComponent, IndividualSelfHostingLicenseUploaderComponent, OrganizationSelfHostingLicenseUploaderComponent, + DiscountBadgeComponent, ], }) export class BillingSharedModule {} diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 49e29f00748..27faf6f4063 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -3250,9 +3250,18 @@ "nextCharge": { "message": "Next charge" }, + "nextChargeHeader": { + "message": "Next Charge" + }, + "plan": { + "message": "Plan" + }, "details": { "message": "Details" }, + "discount": { + "message": "discount" + }, "downloadLicense": { "message": "Download license" }, diff --git a/libs/common/src/billing/models/response/organization-subscription.response.ts b/libs/common/src/billing/models/response/organization-subscription.response.ts index 6e56eda68c6..f5fdaaba9b2 100644 --- a/libs/common/src/billing/models/response/organization-subscription.response.ts +++ b/libs/common/src/billing/models/response/organization-subscription.response.ts @@ -40,6 +40,7 @@ export class BillingCustomerDiscount extends BaseResponse { id: string; active: boolean; percentOff?: number; + amountOff?: number; appliesTo: string[]; constructor(response: any) { @@ -47,6 +48,7 @@ export class BillingCustomerDiscount extends BaseResponse { this.id = this.getResponseProperty("Id"); this.active = this.getResponseProperty("Active"); this.percentOff = this.getResponseProperty("PercentOff"); - this.appliesTo = this.getResponseProperty("AppliesTo"); + this.amountOff = this.getResponseProperty("AmountOff"); + this.appliesTo = this.getResponseProperty("AppliesTo") || []; } } diff --git a/libs/common/src/billing/models/response/subscription.response.ts b/libs/common/src/billing/models/response/subscription.response.ts index 3bc7d42651c..01ace1ef10a 100644 --- a/libs/common/src/billing/models/response/subscription.response.ts +++ b/libs/common/src/billing/models/response/subscription.response.ts @@ -2,12 +2,15 @@ // @ts-strict-ignore import { BaseResponse } from "../../../models/response/base.response"; +import { BillingCustomerDiscount } from "./organization-subscription.response"; + export class SubscriptionResponse extends BaseResponse { storageName: string; storageGb: number; maxStorageGb: number; subscription: BillingSubscriptionResponse; upcomingInvoice: BillingSubscriptionUpcomingInvoiceResponse; + customerDiscount: BillingCustomerDiscount; license: any; expiration: string; @@ -20,11 +23,14 @@ export class SubscriptionResponse extends BaseResponse { this.expiration = this.getResponseProperty("Expiration"); const subscription = this.getResponseProperty("Subscription"); const upcomingInvoice = this.getResponseProperty("UpcomingInvoice"); + const customerDiscount = this.getResponseProperty("CustomerDiscount"); this.subscription = subscription == null ? null : new BillingSubscriptionResponse(subscription); this.upcomingInvoice = upcomingInvoice == null ? null : new BillingSubscriptionUpcomingInvoiceResponse(upcomingInvoice); + this.customerDiscount = + customerDiscount == null ? null : new BillingCustomerDiscount(customerDiscount); } } diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts index 2d071259aba..7d2d831bfb3 100644 --- a/libs/common/src/enums/feature-flag.enum.ts +++ b/libs/common/src/enums/feature-flag.enum.ts @@ -33,6 +33,7 @@ export enum FeatureFlag { PM26793_FetchPremiumPriceFromPricingService = "pm-26793-fetch-premium-price-from-pricing-service", PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog = "pm-23713-premium-badge-opens-new-premium-upgrade-dialog", PM26462_Milestone_3 = "pm-26462-milestone-3", + PM23341_Milestone_2 = "pm-23341-milestone-2", /* Key Management */ PrivateKeyRegeneration = "pm-12241-private-key-regeneration", @@ -129,6 +130,7 @@ export const DefaultFeatureFlagValue = { [FeatureFlag.PM26793_FetchPremiumPriceFromPricingService]: FALSE, [FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog]: FALSE, [FeatureFlag.PM26462_Milestone_3]: FALSE, + [FeatureFlag.PM23341_Milestone_2]: FALSE, /* Key Management */ [FeatureFlag.PrivateKeyRegeneration]: FALSE, diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.html b/libs/pricing/src/components/discount-badge/discount-badge.component.html new file mode 100644 index 00000000000..e79fbabf355 --- /dev/null +++ b/libs/pricing/src/components/discount-badge/discount-badge.component.html @@ -0,0 +1,10 @@ + + {{ getDiscountText() }} + diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.mdx b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx new file mode 100644 index 00000000000..d3df2dcf0f6 --- /dev/null +++ b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx @@ -0,0 +1,67 @@ +import { Meta, Story, Canvas } from "@storybook/addon-docs"; +import * as DiscountBadgeStories from "./discount-badge.component.stories"; + + + +# Discount Badge + +A reusable UI component for displaying discount information (percentage or fixed amount) in a badge +format. + + + +## Usage + +The discount badge component is designed to be used in billing and subscription interfaces to +display discount information. + +```ts +import { DiscountBadgeComponent, DiscountInfo } from "@bitwarden/pricing"; +``` + +```html + +``` + +## API + +### Inputs + +| Input | Type | Description | +| ---------- | ---------------------- | -------------------------------------------------------------------------------- | +| `discount` | `DiscountInfo \| null` | **Optional.** Discount information object. If null or inactive, badge is hidden. | + +### DiscountInfo Interface + +```ts +interface DiscountInfo { + /** Whether the discount is currently active */ + active: boolean; + /** Percentage discount (0-100 or 0-1 scale) */ + percentOff?: number; + /** Fixed amount discount in the base currency */ + amountOff?: number; +} +``` + +## Behavior + +- The badge is only displayed when `discount` is provided, `active` is `true`, and either + `percentOff` or `amountOff` is greater than 0. +- If both `percentOff` and `amountOff` are provided, `percentOff` takes precedence. +- Percentage values can be provided as 0-100 (e.g., `20` for 20%) or 0-1 (e.g., `0.2` for 20%). +- Amount values are formatted as currency (USD) with 2 decimal places. + +## Examples + +### Percentage Discount + + + +### Amount Discount + + + +### Inactive Discount + + diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts new file mode 100644 index 00000000000..8ccfc5e5d8b --- /dev/null +++ b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts @@ -0,0 +1,108 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; + +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; + +import { DiscountBadgeComponent } from "./discount-badge.component"; + +describe("DiscountBadgeComponent", () => { + let component: DiscountBadgeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DiscountBadgeComponent], + providers: [ + { + provide: I18nService, + useValue: { + t: (key: string) => key, + }, + }, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(DiscountBadgeComponent); + component = fixture.componentInstance; + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + describe("hasDiscount", () => { + it("should return false when discount is null", () => { + fixture.componentRef.setInput("discount", null); + fixture.detectChanges(); + expect(component.hasDiscount()).toBe(false); + }); + + it("should return false when discount is inactive", () => { + fixture.componentRef.setInput("discount", { active: false, percentOff: 20 }); + fixture.detectChanges(); + expect(component.hasDiscount()).toBe(false); + }); + + it("should return true when discount is active with percentOff", () => { + fixture.componentRef.setInput("discount", { active: true, percentOff: 20 }); + fixture.detectChanges(); + expect(component.hasDiscount()).toBe(true); + }); + + it("should return true when discount is active with amountOff", () => { + fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 }); + fixture.detectChanges(); + expect(component.hasDiscount()).toBe(true); + }); + + it("should return false when percentOff is 0", () => { + fixture.componentRef.setInput("discount", { active: true, percentOff: 0 }); + fixture.detectChanges(); + expect(component.hasDiscount()).toBe(false); + }); + + it("should return false when amountOff is 0", () => { + fixture.componentRef.setInput("discount", { active: true, amountOff: 0 }); + fixture.detectChanges(); + expect(component.hasDiscount()).toBe(false); + }); + }); + + describe("getDiscountText", () => { + it("should return null when discount is null", () => { + fixture.componentRef.setInput("discount", null); + fixture.detectChanges(); + expect(component.getDiscountText()).toBeNull(); + }); + + it("should return percentage text when percentOff is provided", () => { + fixture.componentRef.setInput("discount", { active: true, percentOff: 20 }); + fixture.detectChanges(); + const text = component.getDiscountText(); + expect(text).toContain("20%"); + expect(text).toContain("discount"); + }); + + it("should convert decimal percentOff to percentage", () => { + fixture.componentRef.setInput("discount", { active: true, percentOff: 0.15 }); + fixture.detectChanges(); + const text = component.getDiscountText(); + expect(text).toContain("15%"); + }); + + it("should return amount text when amountOff is provided", () => { + fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 }); + fixture.detectChanges(); + const text = component.getDiscountText(); + expect(text).toContain("$10.99"); + expect(text).toContain("discount"); + }); + + it("should prefer percentOff over amountOff", () => { + fixture.componentRef.setInput("discount", { active: true, percentOff: 25, amountOff: 10.99 }); + fixture.detectChanges(); + const text = component.getDiscountText(); + expect(text).toContain("25%"); + expect(text).not.toContain("$10.99"); + }); + }); +}); diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts new file mode 100644 index 00000000000..02631a6b940 --- /dev/null +++ b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts @@ -0,0 +1,123 @@ +import { Meta, moduleMetadata, StoryObj } from "@storybook/angular"; + +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { BadgeModule } from "@bitwarden/components"; + +import { DiscountBadgeComponent, DiscountInfo } from "./discount-badge.component"; + +export default { + title: "Billing/Discount Badge", + component: DiscountBadgeComponent, + description: "A badge component that displays discount information (percentage or fixed amount).", + decorators: [ + moduleMetadata({ + imports: [BadgeModule], + providers: [ + { + provide: I18nService, + useValue: { + t: (key: string) => { + switch (key) { + case "discount": + return "discount"; + default: + return key; + } + }, + }, + }, + ], + }), + ], +} as Meta; + +type Story = StoryObj; + +export const PercentDiscount: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: { + active: true, + percentOff: 20, + } as DiscountInfo, + }, +}; + +export const PercentDiscountDecimal: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: { + active: true, + percentOff: 0.15, // 15% in decimal format + } as DiscountInfo, + }, +}; + +export const AmountDiscount: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: { + active: true, + amountOff: 10.99, + } as DiscountInfo, + }, +}; + +export const LargeAmountDiscount: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: { + active: true, + amountOff: 99.99, + } as DiscountInfo, + }, +}; + +export const InactiveDiscount: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: { + active: false, + percentOff: 20, + } as DiscountInfo, + }, +}; + +export const NoDiscount: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: null, + }, +}; + +export const PercentAndAmountPreferPercent: Story = { + render: (args) => ({ + props: args, + template: ``, + }), + args: { + discount: { + active: true, + percentOff: 25, + amountOff: 10.99, + } as DiscountInfo, + }, +}; diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.ts new file mode 100644 index 00000000000..6057a4573e9 --- /dev/null +++ b/libs/pricing/src/components/discount-badge/discount-badge.component.ts @@ -0,0 +1,70 @@ +import { CommonModule } from "@angular/common"; +import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core"; + +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; +import { BadgeModule } from "@bitwarden/components"; + +/** + * Interface for discount information that can be displayed in the discount badge. + * This is abstracted from the response class to avoid tight coupling. + */ +export interface DiscountInfo { + /** Whether the discount is currently active */ + active: boolean; + /** Percentage discount (0-100 or 0-1 scale) */ + percentOff?: number; + /** Fixed amount discount in the base currency */ + amountOff?: number; +} + +@Component({ + selector: "billing-discount-badge", + templateUrl: "./discount-badge.component.html", + standalone: true, + imports: [CommonModule, BadgeModule], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DiscountBadgeComponent { + readonly discount = input(null); + + private i18nService = inject(I18nService); + + getDiscountText(): string | null { + const discount = this.discount(); + if (!discount) { + return null; + } + + if (discount.percentOff != null && discount.percentOff > 0) { + const percentValue = + discount.percentOff < 1 ? discount.percentOff * 100 : discount.percentOff; + return `${Math.round(percentValue)}% ${this.i18nService.t("discount")}`; + } + + if (discount.amountOff != null && discount.amountOff > 0) { + const formattedAmount = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }).format(discount.amountOff); + return `${formattedAmount} ${this.i18nService.t("discount")}`; + } + + return null; + } + + hasDiscount(): boolean { + const discount = this.discount(); + if (!discount) { + return false; + } + if (!discount.active) { + return false; + } + return ( + (discount.percentOff != null && discount.percentOff > 0) || + (discount.amountOff != null && discount.amountOff > 0) + ); + } +} diff --git a/libs/pricing/src/index.ts b/libs/pricing/src/index.ts index d7c7772bfcb..3405044529e 100644 --- a/libs/pricing/src/index.ts +++ b/libs/pricing/src/index.ts @@ -1,3 +1,4 @@ // Components export * from "./components/pricing-card/pricing-card.component"; export * from "./components/cart-summary/cart-summary.component"; +export * from "./components/discount-badge/discount-badge.component"; From 828fdbd169334208ba3f01a4b5ee18c3d3331c40 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Wed, 12 Nov 2025 21:27:14 +0100 Subject: [PATCH 02/18] [CL-905] Migrate CL/Badge to OnPush (#16959) --- .../src/badge-list/badge-list.component.html | 8 +- .../src/badge-list/badge-list.component.ts | 52 +++++++--- libs/components/src/badge/badge.component.ts | 98 +++++++++++-------- 3 files changed, 97 insertions(+), 61 deletions(-) diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html index 18365cba268..d976b2d2cc4 100644 --- a/libs/components/src/badge-list/badge-list.component.html +++ b/libs/components/src/badge-list/badge-list.component.html @@ -1,15 +1,15 @@
- @for (item of filteredItems; track item; let last = $last) { + @for (item of filteredItems(); track item; let last = $last) { {{ item }} - @if (!last || isFiltered) { + @if (!last || isFiltered()) { , } } - @if (isFiltered) { + @if (isFiltered()) { - {{ "plusNMore" | i18n: (items().length - filteredItems.length).toString() }} + {{ "plusNMore" | i18n: (items().length - filteredItems().length).toString() }} }
diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts index e3d1403be43..a5b306c12fc 100644 --- a/libs/components/src/badge-list/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -1,38 +1,60 @@ -import { Component, OnChanges, input } from "@angular/core"; +import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core"; import { I18nPipe } from "@bitwarden/ui-common"; import { BadgeModule, BadgeVariant } from "../badge"; function transformMaxItems(value: number | undefined) { - return value == undefined ? undefined : Math.max(1, value); + return value == null ? undefined : Math.max(1, value); } -// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush -// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection +/** + * Displays a collection of badges in a horizontal, wrapping layout. + * + * The component automatically handles overflow by showing a limited number of badges + * followed by a "+N more" badge when `maxItems` is specified and exceeded. + * + * Each badge inherits the `variant` and `truncate` settings, ensuring visual consistency + * across the list. Badges are separated by commas for screen readers to improve accessibility. + */ @Component({ selector: "bit-badge-list", templateUrl: "badge-list.component.html", imports: [BadgeModule, I18nPipe], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BadgeListComponent implements OnChanges { - protected filteredItems: string[] = []; - protected isFiltered = false; - +export class BadgeListComponent { + /** + * The visual variant to apply to all badges in the list. + */ readonly variant = input("primary"); + + /** + * Items to display as badges. + */ readonly items = input([]); + + /** + * Whether to truncate long badge text with ellipsis. + */ readonly truncate = input(true); + /** + * Maximum number of badges to display before showing a "+N more" badge. + */ readonly maxItems = input(undefined, { transform: transformMaxItems }); - ngOnChanges() { + protected readonly filteredItems = computed(() => { const maxItems = this.maxItems(); + const items = this.items(); - if (maxItems == undefined || this.items().length <= maxItems) { - this.filteredItems = this.items(); - } else { - this.filteredItems = this.items().slice(0, maxItems - 1); + if (maxItems == null || items.length <= maxItems) { + return items; } - this.isFiltered = this.items().length > this.filteredItems.length; - } + return items.slice(0, maxItems - 1); + }); + + protected readonly isFiltered = computed(() => { + return this.items().length > this.filteredItems().length; + }); } diff --git a/libs/components/src/badge/badge.component.ts b/libs/components/src/badge/badge.component.ts index 8a953b30226..55d7b719ccd 100644 --- a/libs/components/src/badge/badge.component.ts +++ b/libs/components/src/badge/badge.component.ts @@ -1,5 +1,12 @@ import { CommonModule } from "@angular/common"; -import { Component, ElementRef, HostBinding, input } from "@angular/core"; +import { + ChangeDetectionStrategy, + Component, + computed, + ElementRef, + inject, + input, +} from "@angular/core"; import { FocusableElement } from "../shared/focusable-element"; @@ -44,27 +51,56 @@ const hoverStyles: Record = { ], }; /** - * Badges are primarily used as labels, counters, and small buttons. - - * Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the component configurations may be reviewed and adjusted. - - * The Badge directive can be used on a `` (non clickable events), or an `` or `
-
-
- -
- {{ url }} -
- -
+
+ @for (url of savedUrls(); track url) { +
+ +
+ {{ url }} +
+ +
+ }
}

{{ "currentWebsite" | i18n }}

-
- {{ currentUrl }} +
+ {{ currentUrl() }}
- @if (!viewOnly) { + @if (!viewOnly()) { } - @if (!(showAutofillConfirmation$ | async)) { + @if (!(autofillConfirmationFlagEnabled$ | async)) { } diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.spec.ts index 5927da6c3d2..7b71c2b470f 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.spec.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.spec.ts @@ -2,6 +2,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { NoopAnimationsModule } from "@angular/platform-browser/animations"; import { Router } from "@angular/router"; +import { mock } from "jest-mock-extended"; import { BehaviorSubject, of } from "rxjs"; import { CollectionService } from "@bitwarden/admin-console/common"; @@ -66,11 +67,6 @@ describe("ItemMoreOptionsComponent", () => { resolvedDefaultUriMatchStrategy$: uriMatchStrategy$.asObservable(), }; - const hasSearchText$ = new BehaviorSubject(false); - const vaultPopupItemsService = { - hasSearchText$: hasSearchText$.asObservable(), - }; - const baseCipher = { id: "cipher-1", login: { @@ -120,7 +116,7 @@ describe("ItemMoreOptionsComponent", () => { }, { provide: VaultPopupItemsService, - useValue: vaultPopupItemsService, + useValue: mock({}), }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], @@ -153,7 +149,7 @@ describe("ItemMoreOptionsComponent", () => { expect(passwordRepromptService.passwordRepromptCheck).toHaveBeenCalledWith(baseCipher); }); - it("calls the autofill service to autofill without showing the confirmation dialog when the feature flag is disabled or search text is not present", async () => { + it("calls the autofill service to autofill without showing the confirmation dialog when the feature flag is disabled", async () => { autofillSvc.currentAutofillTab$.next({ url: "https://page.example.com" }); await component.doAutofill(); @@ -182,7 +178,7 @@ describe("ItemMoreOptionsComponent", () => { }); it("does not show the exact match dialog when the default match strategy is Exact and autofill confirmation is not to be shown", async () => { - // autofill confirmation dialog is not shown when either the feature flag is disabled or search text is not present + // autofill confirmation dialog is not shown when either the feature flag is disabled uriMatchStrategy$.next(UriMatchStrategy.Exact); autofillSvc.currentAutofillTab$.next({ url: "https://page.example.com/path" }); await component.doAutofill(); @@ -192,9 +188,8 @@ describe("ItemMoreOptionsComponent", () => { describe("autofill confirmation dialog", () => { beforeEach(() => { - // autofill confirmation dialog is shown when feature flag is enabled and search text is present + // autofill confirmation dialog is shown when feature flag is enabled featureFlag$.next(true); - hasSearchText$.next(true); uriMatchStrategy$.next(UriMatchStrategy.Domain); passwordRepromptService.passwordRepromptCheck.mockResolvedValue(true); }); @@ -208,7 +203,7 @@ describe("ItemMoreOptionsComponent", () => { expect(passwordRepromptService.passwordRepromptCheck).toHaveBeenCalledWith(baseCipher); }); - it("opens the autofill confirmation dialog with filtered saved URLs when the feature flag is enabled and search text is present", async () => { + it("opens the autofill confirmation dialog with filtered saved URLs when the feature flag is enabled", async () => { autofillSvc.currentAutofillTab$.next({ url: "https://page.example.com/path" }); const openSpy = mockConfirmDialogResult(AutofillConfirmationDialogResult.Canceled); @@ -216,8 +211,8 @@ describe("ItemMoreOptionsComponent", () => { expect(openSpy).toHaveBeenCalledTimes(1); const args = openSpy.mock.calls[0][1]; - expect(args.data.currentUrl).toBe("https://page.example.com/path"); - expect(args.data.savedUrls).toEqual([ + expect(args.data?.currentUrl).toBe("https://page.example.com/path"); + expect(args.data?.savedUrls).toEqual([ "https://one.example.com", "https://two.example.com/a", ]); diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts index 1316a0d32b8..b498e7cd9a5 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts @@ -84,10 +84,9 @@ export class ItemMoreOptionsComponent { protected autofillAllowed$ = this.vaultPopupAutofillService.autofillAllowed$; - protected showAutofillConfirmation$ = combineLatest([ - this.configService.getFeatureFlag$(FeatureFlag.AutofillConfirmation), - this.vaultPopupItemsService.hasSearchText$, - ]).pipe(map(([isFeatureFlagEnabled, hasSearchText]) => isFeatureFlagEnabled && hasSearchText)); + protected autofillConfirmationFlagEnabled$ = this.configService + .getFeatureFlag$(FeatureFlag.AutofillConfirmation) + .pipe(map((isFeatureFlagEnabled) => isFeatureFlagEnabled)); protected uriMatchStrategy$ = this.domainSettingsService.resolvedDefaultUriMatchStrategy$; @@ -210,7 +209,7 @@ export class ItemMoreOptionsComponent { const cipherHasAllExactMatchLoginUris = uris.length > 0 && uris.every((u) => u.uri && u.match === UriMatchStrategy.Exact); - const showAutofillConfirmation = await firstValueFrom(this.showAutofillConfirmation$); + const showAutofillConfirmation = await firstValueFrom(this.autofillConfirmationFlagEnabled$); const uriMatchStrategy = await firstValueFrom(this.uriMatchStrategy$); if ( From 0af77ced458defef4e55db8d234131ba2f541868 Mon Sep 17 00:00:00 2001 From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com> Date: Thu, 13 Nov 2025 13:23:33 -0600 Subject: [PATCH 15/18] [PM-28173] Only send 1 seat in Families tax calculation (#17368) * Fix family seat count in calculation * Fix test --- .../services/upgrade-payment.service.spec.ts | 2 +- .../services/upgrade-payment.service.ts | 60 +++++++++---------- 2 files changed, 29 insertions(+), 33 deletions(-) diff --git a/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.spec.ts b/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.spec.ts index e20d20b0770..9d17d62e4dc 100644 --- a/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.spec.ts +++ b/apps/web/src/app/billing/individual/upgrade/upgrade-payment/services/upgrade-payment.service.spec.ts @@ -436,7 +436,7 @@ describe("UpgradePaymentService", () => { tier: "families", passwordManager: { additionalStorage: 0, - seats: 6, + seats: 1, sponsored: false, }, }, 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 9bb963c210d..94f1c816168 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 @@ -98,41 +98,37 @@ export class UpgradePaymentService { planDetails: PlanDetails, billingAddress: BillingAddress, ): Promise { + const isFamiliesPlan = planDetails.tier === PersonalSubscriptionPricingTierIds.Families; + const isPremiumPlan = planDetails.tier === PersonalSubscriptionPricingTierIds.Premium; + + let taxClientCall: Promise | null = null; + + if (isFamiliesPlan) { + // Currently, only Families plan is supported for organization plans + const request: OrganizationSubscriptionPurchase = { + tier: "families", + cadence: "annually", + passwordManager: { seats: 1, additionalStorage: 0, sponsored: false }, + }; + + taxClientCall = this.taxClient.previewTaxForOrganizationSubscriptionPurchase( + request, + billingAddress, + ); + } + + if (isPremiumPlan) { + taxClientCall = this.taxClient.previewTaxForPremiumSubscriptionPurchase(0, billingAddress); + } + + if (taxClientCall === null) { + throw new Error("Tax client call is not defined"); + } + try { - const isOrganizationPlan = planDetails.tier === PersonalSubscriptionPricingTierIds.Families; - const isPremiumPlan = planDetails.tier === PersonalSubscriptionPricingTierIds.Premium; - - let taxClientCall: Promise | null = null; - - if (isOrganizationPlan) { - const seats = this.getPasswordManagerSeats(planDetails); - if (seats === 0) { - throw new Error("Seats must be greater than 0 for organization plan"); - } - // Currently, only Families plan is supported for organization plans - const request: OrganizationSubscriptionPurchase = { - tier: "families", - cadence: "annually", - passwordManager: { seats, additionalStorage: 0, sponsored: false }, - }; - - taxClientCall = this.taxClient.previewTaxForOrganizationSubscriptionPurchase( - request, - billingAddress, - ); - } - - if (isPremiumPlan) { - taxClientCall = this.taxClient.previewTaxForPremiumSubscriptionPurchase(0, billingAddress); - } - - if (taxClientCall === null) { - throw new Error("Tax client call is not defined"); - } - const preview = await taxClientCall; return preview.tax; - } catch (error: unknown) { + } catch (error) { this.logService.error("Tax calculation failed:", error); throw error; } From df59f7820a2d08eab524ad35707e51e1632f842e Mon Sep 17 00:00:00 2001 From: Vijay Oommen Date: Thu, 13 Nov 2025 13:33:05 -0600 Subject: [PATCH 16/18] [PM-28036] Sidebar for Critical apps shows incorrect data - fixed (#17363) * PM-28036 added the download button to the code * PM-28036 fix failing tests * PM-28036 added additional unit tests * PM-28036 fixed failed type testing * PM-28036 removed unwanted await from method --- .../critical-applications.component.html | 4 +- ...risk-insights-drawer-dialog.component.html | 18 ++ ...k-insights-drawer-dialog.component.spec.ts | 184 ++++++++++++++++++ .../risk-insights-drawer-dialog.component.ts | 70 ++++++- 4 files changed, 273 insertions(+), 3 deletions(-) diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html index 0e757582855..04c7bd23797 100644 --- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html +++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/critical-applications/critical-applications.component.html @@ -22,7 +22,7 @@ type="button" class="tw-flex-1" tabindex="0" - (click)="dataService.setDrawerForOrgAtRiskMembers('criticalAppsAtRiskMembers')" + (click)="dataService.setDrawerForCriticalAtRiskMembers('criticalAppsAtRiskMembers')" > @if (drawerDetails.atRiskMemberDetails?.length > 0) { +
@@ -77,6 +86,15 @@ }} @if (drawerDetails.atRiskAppDetails?.length > 0) { +
{{ "application" | i18n }} diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.spec.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.spec.ts index 2b5910ed99e..9066462b2b1 100644 --- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.spec.ts +++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.spec.ts @@ -3,8 +3,10 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { mock } from "jest-mock-extended"; import { DrawerDetails, DrawerType } from "@bitwarden/bit-common/dirt/reports/risk-insights"; +import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { DIALOG_DATA } from "@bitwarden/components"; +import { LogService } from "@bitwarden/logging"; import { I18nPipe } from "@bitwarden/ui-common"; import { RiskInsightsDrawerDialogComponent } from "./risk-insights-drawer-dialog.component"; @@ -48,6 +50,8 @@ describe("RiskInsightsDrawerDialogComponent", () => { let component: RiskInsightsDrawerDialogComponent; let fixture: ComponentFixture; const mockI18nService = mock(); + const mockFileDownloadService = mock(); + const mocklogService = mock(); const drawerDetails: DrawerDetails = { open: true, invokerId: "test-invoker", @@ -56,6 +60,7 @@ describe("RiskInsightsDrawerDialogComponent", () => { appAtRiskMembers: null, atRiskAppDetails: null, }; + mockI18nService.t.mockImplementation((key: string) => key); beforeEach(async () => { await TestBed.configureTestingModule({ @@ -64,6 +69,8 @@ describe("RiskInsightsDrawerDialogComponent", () => { { provide: DIALOG_DATA, useValue: drawerDetails }, { provide: I18nPipe, useValue: mock() }, { provide: I18nService, useValue: mockI18nService }, + { provide: FileDownloadService, useValue: mockFileDownloadService }, + { provide: LogService, useValue: mocklogService }, ], }).compileComponents(); @@ -93,4 +100,181 @@ describe("RiskInsightsDrawerDialogComponent", () => { expect(component.isActiveDrawerType(DrawerType.AppAtRiskMembers)).toBeFalsy(); }); }); + describe("downloadAtRiskMembers", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should download CSV when drawer is open with correct type and has data", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskMembers, + atRiskMemberDetails: [ + { email: "user@example.com", atRiskPasswordCount: 5 }, + { email: "admin@example.com", atRiskPasswordCount: 3 }, + ], + appAtRiskMembers: null, + atRiskAppDetails: null, + }; + + mockI18nService.t.mockImplementation((key: string) => key); + + await component.downloadAtRiskMembers(); + + expect(mockFileDownloadService.download).toHaveBeenCalledWith({ + fileName: expect.stringContaining("at-risk-members"), + blobData: expect.any(String), + blobOptions: { type: "text/plain" }, + }); + }); + + it("should not download when drawer is closed", async () => { + component.drawerDetails = { + open: false, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskMembers, + atRiskMemberDetails: [{ email: "user@example.com", atRiskPasswordCount: 5 }], + appAtRiskMembers: null, + atRiskAppDetails: null, + }; + + await component.downloadAtRiskMembers(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + + it("should not download when activeDrawerType is incorrect", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskApps, + atRiskMemberDetails: [{ email: "user@example.com", atRiskPasswordCount: 5 }], + appAtRiskMembers: null, + atRiskAppDetails: null, + }; + + await component.downloadAtRiskMembers(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + + it("should not download when atRiskMemberDetails is null", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskMembers, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: null, + }; + + await component.downloadAtRiskMembers(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + + it("should not download when atRiskMemberDetails is empty array", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskMembers, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: null, + }; + + await component.downloadAtRiskMembers(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + }); + + describe("downloadAtRiskApplications", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should download CSV when drawer is open with correct type and has data", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskApps, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: [ + { applicationName: "App1", atRiskPasswordCount: 10 }, + { applicationName: "App2", atRiskPasswordCount: 7 }, + ], + }; + + await component.downloadAtRiskApplications(); + + expect(mockFileDownloadService.download).toHaveBeenCalledWith({ + fileName: expect.stringContaining("at-risk-applications"), + blobData: expect.any(String), + blobOptions: { type: "text/plain" }, + }); + }); + + it("should not download when drawer is closed", async () => { + component.drawerDetails = { + open: false, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskApps, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: [{ applicationName: "App1", atRiskPasswordCount: 10 }], + }; + + await component.downloadAtRiskApplications(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + + it("should not download when activeDrawerType is incorrect", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskMembers, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: [{ applicationName: "App1", atRiskPasswordCount: 10 }], + }; + + await component.downloadAtRiskApplications(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + + it("should not download when atRiskAppDetails is null", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskApps, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: null, + }; + + await component.downloadAtRiskApplications(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + + it("should not download when atRiskAppDetails is empty array", async () => { + component.drawerDetails = { + open: true, + invokerId: "test-invoker", + activeDrawerType: DrawerType.OrgAtRiskApps, + atRiskMemberDetails: [], + appAtRiskMembers: null, + atRiskAppDetails: [], + }; + + await component.downloadAtRiskApplications(); + + expect(mockFileDownloadService.download).not.toHaveBeenCalled(); + }); + }); }); diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.ts index 82cddda542c..30863f38e43 100644 --- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.ts +++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/risk-insights-drawer-dialog.component.ts @@ -1,7 +1,12 @@ import { Component, ChangeDetectionStrategy, Inject } from "@angular/core"; import { DrawerDetails, DrawerType } from "@bitwarden/bit-common/dirt/reports/risk-insights"; +import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service"; +import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { DIALOG_DATA } from "@bitwarden/components"; +import { LogService } from "@bitwarden/logging"; +import { ExportHelper } from "@bitwarden/vault-export-core"; +import { exportToCSV } from "@bitwarden/web-vault/app/dirt/reports/report-utils"; import { SharedModule } from "@bitwarden/web-vault/app/shared"; @Component({ @@ -10,7 +15,12 @@ import { SharedModule } from "@bitwarden/web-vault/app/shared"; changeDetection: ChangeDetectionStrategy.OnPush, }) export class RiskInsightsDrawerDialogComponent { - constructor(@Inject(DIALOG_DATA) public drawerDetails: DrawerDetails) {} + constructor( + @Inject(DIALOG_DATA) public drawerDetails: DrawerDetails, + private fileDownloadService: FileDownloadService, + private i18nService: I18nService, + private logService: LogService, + ) {} // Get a list of drawer types get drawerTypes(): typeof DrawerType { @@ -20,4 +30,62 @@ export class RiskInsightsDrawerDialogComponent { isActiveDrawerType(type: DrawerType): boolean { return this.drawerDetails.activeDrawerType === type; } + + /** + * downloads at risk members as CSV + */ + downloadAtRiskMembers() { + try { + // Validate drawer is open and showing the correct drawer type + if ( + !this.drawerDetails.open || + this.drawerDetails.activeDrawerType !== DrawerType.OrgAtRiskMembers || + !this.drawerDetails.atRiskMemberDetails || + this.drawerDetails.atRiskMemberDetails.length === 0 + ) { + return; + } + + this.fileDownloadService.download({ + fileName: ExportHelper.getFileName("at-risk-members"), + blobData: exportToCSV(this.drawerDetails.atRiskMemberDetails, { + email: this.i18nService.t("email"), + atRiskPasswordCount: this.i18nService.t("atRiskPasswords"), + }), + blobOptions: { type: "text/plain" }, + }); + } catch (error) { + // Log error for debugging + this.logService.error("Failed to download at-risk members", error); + } + } + + /** + * downloads at risk applications as CSV + */ + downloadAtRiskApplications() { + try { + // Validate drawer is open and showing the correct drawer type + if ( + !this.drawerDetails.open || + this.drawerDetails.activeDrawerType !== DrawerType.OrgAtRiskApps || + !this.drawerDetails.atRiskAppDetails || + this.drawerDetails.atRiskAppDetails.length === 0 + ) { + return; + } + + this.fileDownloadService.download({ + fileName: ExportHelper.getFileName("at-risk-applications"), + blobData: exportToCSV(this.drawerDetails.atRiskAppDetails, { + applicationName: this.i18nService.t("application"), + atRiskPasswordCount: this.i18nService.t("atRiskPasswords"), + }), + blobOptions: { type: "text/plain" }, + }); + } catch (error) { + // Log error for debugging + this.logService.error("Failed to download at-risk applications", error); + } + } } From a41c7b79b4e0b50e0c0916542aa3dcc7fdd42dc3 Mon Sep 17 00:00:00 2001 From: Vijay Oommen Date: Thu, 13 Nov 2025 13:33:56 -0600 Subject: [PATCH 17/18] [PM-20132] Total Member Count (#17330) * PM-20132 total member count * Apply suggestions from code review Co-authored-by: Leslie Tilton <23057410+Banrion@users.noreply.github.com> * PM-20132 updated PR comments * PM-20132 update as per PR comments * PM-20132 removed unwanted code * PM-20132 fixed PR comment from Claude * PM-20132 reduced ambiguity in code * PM-20132 removed unwanted observables * PM-20132 removed default value as it is not needed anymore * PM-20132 fixed failed test --------- Co-authored-by: Leslie Tilton <23057410+Banrion@users.noreply.github.com> --- .../risk-insights-orchestrator.service.ts | 25 ++++++++++++++++--- .../domain/risk-insights-report.service.ts | 4 +-- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-orchestrator.service.ts b/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-orchestrator.service.ts index 59affad10da..38e12373182 100644 --- a/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-orchestrator.service.ts +++ b/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-orchestrator.service.ts @@ -42,6 +42,7 @@ import { createNewSummaryData, flattenMemberDetails, getTrimmedCipherUris, + getUniqueMembers, } from "../../helpers"; import { ApplicationHealthReportDetailEnriched, @@ -234,6 +235,7 @@ export class RiskInsightsOrchestratorService { const updatedSummaryData = this.reportService.getApplicationsSummary( report!.reportData, updatedApplicationData, + report!.summaryData.totalMemberCount, ); // Used for creating metrics with updated application data @@ -366,6 +368,7 @@ export class RiskInsightsOrchestratorService { const updatedSummaryData = this.reportService.getApplicationsSummary( report!.reportData, updatedApplicationData, + report!.summaryData.totalMemberCount, ); // Used for creating metrics with updated application data @@ -502,6 +505,7 @@ export class RiskInsightsOrchestratorService { const updatedSummaryData = this.reportService.getApplicationsSummary( report!.reportData, updatedApplicationData, + report!.summaryData.totalMemberCount, ); // Used for creating metrics with updated application data const manualEnrichedApplications = report!.reportData.map( @@ -656,19 +660,30 @@ export class RiskInsightsOrchestratorService { switchMap(([ciphers, memberCiphers]) => { this.logService.debug("[RiskInsightsOrchestratorService] Analyzing password health"); this._reportProgressSubject.next(ReportProgress.AnalyzingPasswords); - return this._getCipherHealth(ciphers ?? [], memberCiphers); + return forkJoin({ + memberDetails: of(memberCiphers), + cipherHealthReports: this._getCipherHealth(ciphers ?? [], memberCiphers), + }).pipe( + map(({ memberDetails, cipherHealthReports }) => { + const uniqueMembers = getUniqueMembers(memberDetails); + const totalMemberCount = uniqueMembers.length; + + return { cipherHealthReports, totalMemberCount }; + }), + ); }), - map((cipherHealthReports) => { + map(({ cipherHealthReports, totalMemberCount }) => { this.logService.debug("[RiskInsightsOrchestratorService] Calculating risk scores"); this._reportProgressSubject.next(ReportProgress.CalculatingRisks); - return this.reportService.generateApplicationsReport(cipherHealthReports); + const report = this.reportService.generateApplicationsReport(cipherHealthReports); + return { report, totalMemberCount }; }), tap(() => { this.logService.debug("[RiskInsightsOrchestratorService] Generating report data"); this._reportProgressSubject.next(ReportProgress.GeneratingReport); }), withLatestFrom(this.rawReportData$), - map(([report, previousReport]) => { + map(([{ report, totalMemberCount }, previousReport]) => { // Update the application data const updatedApplicationData = this.reportService.getOrganizationApplications( report, @@ -688,6 +703,7 @@ export class RiskInsightsOrchestratorService { const updatedSummary = this.reportService.getApplicationsSummary( report, updatedApplicationData, + totalMemberCount, ); // For now, merge the report with the critical marking flag to make the enriched type // We don't care about the individual ciphers in this instance @@ -964,6 +980,7 @@ export class RiskInsightsOrchestratorService { const summary = this.reportService.getApplicationsSummary( criticalApplications, enrichedReports.applicationData, + enrichedReports.summaryData.totalMemberCount, ); return { ...enrichedReports, diff --git a/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-report.service.ts b/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-report.service.ts index 94c9c85f955..37b788a8e3d 100644 --- a/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-report.service.ts +++ b/bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/domain/risk-insights-report.service.ts @@ -83,8 +83,8 @@ export class RiskInsightsReportService { getApplicationsSummary( reports: ApplicationHealthReportDetail[], applicationData: OrganizationReportApplication[], + totalMemberCount: number, ): OrganizationReportSummary { - const totalUniqueMembers = getUniqueMembers(reports.flatMap((x) => x.memberDetails)); const atRiskUniqueMembers = getUniqueMembers(reports.flatMap((x) => x.atRiskMemberDetails)); const criticalReports = this.filterApplicationsByCritical(reports, applicationData); @@ -94,7 +94,7 @@ export class RiskInsightsReportService { ); return { - totalMemberCount: totalUniqueMembers.length, + totalMemberCount: totalMemberCount, totalAtRiskMemberCount: atRiskUniqueMembers.length, totalApplicationCount: reports.length, totalAtRiskApplicationCount: reports.filter((app) => app.atRiskPasswordCount > 0).length, From e88720d4ed4cddfd16fa340bf2fecebeba5ad142 Mon Sep 17 00:00:00 2001 From: Vijay Oommen Date: Thu, 13 Nov 2025 13:35:03 -0600 Subject: [PATCH 18/18] PM-20961 App header added (#17350) --- .../app/dirt/access-intelligence/risk-insights.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html index 9dbfe582ac9..5e00de853ff 100644 --- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html +++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html @@ -1,3 +1,5 @@ + + @let status = dataService.reportStatus$ | async; @let hasCiphers = dataService.hasCiphers$ | async; @@ -8,7 +10,6 @@ } @else { @if (isRiskInsightsActivityTabFeatureEnabled && !(dataService.hasReportData$ | async)) { -

{{ "accessIntelligence" | i18n }}

@if (!hasCiphers) { @@ -39,7 +40,6 @@
-

{{ "accessIntelligence" | i18n }}

{{ "reviewAtRiskPasswords" | i18n }}