[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>
2025-12-06 00:13:28 +00:00 · 2025-11-12 20:38:13 +01:00
parent 9786594df3
commit 7989ad7b7c
13 changed files with 522 additions and 56 deletions
--- 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 @@
    <dd *ngIf="sub.expiration">{{ sub.expiration | date: "mediumDate" }}</dd>
    <dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
  </dl>
-  <div class="tw-flex tw-w-full" *ngIf="!selfHosted">
-    <div class="tw-w-1/3">
-      <dl>
-        <dt>{{ "status" | i18n }}</dt>
-        <dd>
+  <div class="tw-flex tw-max-w-[1340px] tw-pt-6" *ngIf="!selfHosted">
+    <div class="tw-flex tw-gap-16 tw-justify-between tw-w-full">
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2">{{ "plan" | i18n }}</div>
+        <div>{{ "premiumMembership" | i18n }}</div>
+      </div>
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2">{{ "status" | i18n }}</div>
+        <div>
          <span class="tw-capitalize">{{ (subscription && subscriptionStatus) || "-" }}</span>
-          <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
-            "pendingCancellation" | i18n
-          }}</span>
-        </dd>
-        <dt>{{ "nextCharge" | i18n }}</dt>
-        <dd>
-          {{
-            nextInvoice
-              ? (sub.subscription.periodEndDate | date: "mediumDate") +
-                ", " +
-                (nextInvoice.amount | currency: "$")
-              : "-"
-          }}
-        </dd>
-      </dl>
-    </div>
-    <div class="tw-w-2/3" *ngIf="subscription">
-      <strong class="!tw-block tw-mb-1">{{ "details" | i18n }}</strong>
-      <bit-table>
-        <ng-template body>
-          <tr *ngFor="let i of subscription.items">
-            <td bitCell>
-              {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} &#64;
-              {{ i.amount | currency: "$" }}
-            </td>
-            <td bitCell>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
-          </tr>
-        </ng-template>
-      </bit-table>
+          <span
+            bitBadge
+            variant="warning"
+            *ngIf="subscriptionMarkedForCancel"
+            class="tw-mt-2 tw-block"
+            >{{ "pendingCancellation" | i18n }}</span
+          >
+        </div>
+      </div>
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2 tw-text-right">{{ "nextChargeHeader" | i18n }}</div>
+        <div>
+          <ng-container *ngIf="subscription">
+            <ng-container *ngIf="enableDiscountDisplay$ | async as enableDiscount; else noDiscount">
+              <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap tw-justify-end">
+                <span [attr.aria-label]="'nextChargeDateAndAmount' | i18n">
+                  {{
+                    (sub.subscription.periodEndDate | date: "MMM d, y") +
+                      ", " +
+                      (discountedSubscriptionAmount | currency: "$")
+                  }}
+                </span>
+                <billing-discount-badge
+                  [discount]="getDiscountInfo(sub?.customerDiscount)"
+                ></billing-discount-badge>
+              </div>
+            </ng-container>
+            <ng-template #noDiscount>
+              <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap tw-justify-end">
+                <span [attr.aria-label]="'nextChargeDateAndAmount' | i18n">
+                  {{
+                    (sub.subscription.periodEndDate | date: "MMM d, y") +
+                      ", " +
+                      (subscriptionAmount | currency: "$")
+                  }}
+                </span>
+              </div>
+            </ng-template>
+          </ng-container>
+          <span
+            *ngIf="!subscription"
+            class="tw-block tw-text-right"
+            [attr.aria-label]="'noChargeScheduled' | i18n"
+            >-</span
+          >
+        </div>
+      </div>
    </div>
  </div>
  <ng-container *ngIf="selfHosted">
@@ -90,8 +112,27 @@
      </a>
    </div>
  </ng-container>
-  <ng-container *ngIf="!selfHosted">
-    <div class="tw-flex tw-justify-between">
+  <div class="tw-max-w-[1340px]" *ngIf="!selfHosted">
+    <h3 bitTypography="h3" class="tw-mt-8">{{ "storage" | i18n }}</h3>
+    <p bitTypography="body1">
+      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+    </p>
+    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
+    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
+      <div class="tw-mt-3">
+        <div class="tw-flex tw-gap-4">
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
+            {{ "addStorage" | i18n }}
+          </button>
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
+            {{ "removeStorage" | i18n }}
+          </button>
+        </div>
+      </div>
+    </ng-container>
+    <h3 bitTypography="h3" class="tw-mt-16">{{ "additionalOptions" | i18n }}</h3>
+    <p bitTypography="body1" class="tw-mt-3">{{ "additionalOptionsDesc" | i18n }}</p>
+    <div class="tw-flex tw-gap-4 tw-mt-3">
      <button
        bitButton
        type="button"
@@ -106,7 +147,6 @@
        #cancelBtn
        type="button"
        buttonType="danger"
-        class="tw-ml-auto"
        (click)="cancelSubscription()"
        [appApiAction]="cancelPromise"
        [disabled]="$any(cancelBtn).loading()"
@@ -115,22 +155,5 @@
        {{ "cancelSubscription" | i18n }}
      </button>
    </div>
-    <h3 bitTypography="h3" class="tw-mt-16">{{ "storage" | i18n }}</h3>
-    <p bitTypography="body1">
-      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
-    </p>
-    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
-    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="tw-mt-3">
-        <div class="tw-flex tw-gap-1">
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
-            {{ "addStorage" | i18n }}
-          </button>
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
-            {{ "removeStorage" | i18n }}
-          </button>
-        </div>
-      </div>
-    </ng-container>
-  </ng-container>
+  </div>
 </ng-container>
--- 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<any>;
  reinstatePromise: Promise<any>;

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

--- 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,
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.html
+++ b/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>
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
+++ 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";
+
+<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} />
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
+++ 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<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");
+    });
+  });
+});
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
+++ 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<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,
+  },
+};
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.ts
+++ 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<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)
+    );
+  }
+}
--- 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";