[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 <amorask@bitwarden.com>

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") || [];
   }
 }

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);
   }
 }
 

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,

libs/pricing/src/components/discount-badge/discount-badge.component.html

@@ -0,0 +1,10 @@
+<span
+  *ngIf="hasDiscount()"
+  bitBadge
+  variant="success"
+  class="tw-w-fit"
+  role="status"
+  [attr.aria-label]="getDiscountText()"
+>
+  {{ getDiscountText() }}
+</span>

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";
+
+<Meta of={DiscountBadgeStories} />
+
+# Discount Badge
+
+A reusable UI component for displaying discount information (percentage or fixed amount) in a badge
+format.
+
+<Canvas of={DiscountBadgeStories.PercentDiscount} />
+
+## 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
+<billing-discount-badge [discount]="discountInfo"></billing-discount-badge>
+```
+
+## 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
+
+<Canvas of={DiscountBadgeStories.PercentDiscount} />
+
+### Amount Discount
+
+<Canvas of={DiscountBadgeStories.AmountDiscount} />
+
+### Inactive Discount
+
+<Canvas of={DiscountBadgeStories.InactiveDiscount} />

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<DiscountBadgeComponent>;
+
+  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");
+    });
+  });
+});

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<DiscountBadgeComponent>;
+
+type Story = StoryObj<DiscountBadgeComponent>;
+
+export const PercentDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 20,
+    } as DiscountInfo,
+  },
+};
+
+export const PercentDiscountDecimal: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 0.15, // 15% in decimal format
+    } as DiscountInfo,
+  },
+};
+
+export const AmountDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      amountOff: 10.99,
+    } as DiscountInfo,
+  },
+};
+
+export const LargeAmountDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      amountOff: 99.99,
+    } as DiscountInfo,
+  },
+};
+
+export const InactiveDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: false,
+      percentOff: 20,
+    } as DiscountInfo,
+  },
+};
+
+export const NoDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: null,
+  },
+};
+
+export const PercentAndAmountPreferPercent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 25,
+      amountOff: 10.99,
+    } as DiscountInfo,
+  },
+};

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<DiscountInfo | null>(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)
+    );
+  }
+}

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";