[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-14 07:13:32 +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"
  },