From 8eef46ad4ec8318bd9eb95e706e80a92676b632d Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Thu, 5 Sep 2024 23:48:15 +0100
Subject: [PATCH] [PM-11417] Customers' Expiration Date in Admin Console
 changing to next invoice date when Pending Invoice items exist (#10774)

* Resolve the wrong subscription expiration date

* Refactor the change to include flag

* refactor the change to consider the flag

* Resolve the year bug for all subscription

* Changes for the premium user

* resolve the premium issue
---
 .../individual/user-subscription.component.html       | 11 ++++++++++-
 .../billing/individual/user-subscription.component.ts |  5 +++++
 .../organization-subscription-cloud.component.html    |  5 ++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

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 08eec09ff9..3430bddc13 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@@ -48,7 +48,7 @@
           }}</span>
         </dd>
         <dt>{{ "nextCharge" | i18n }}</dt>
-        <dd>
+        <dd *ngIf="!enableTimeThreshold">
           {{
             nextInvoice
               ? (nextInvoice.date | date: "mediumDate") +
@@ -57,6 +57,15 @@
               : "-"
           }}
         </dd>
+        <dd *ngIf="enableTimeThreshold">
+          {{
+            nextInvoice
+              ? (sub.subscription.periodEndDate | date: "mediumDate") +
+                ", " +
+                (nextInvoice.amount | currency: "$")
+              : "-"
+          }}
+        </dd>
       </dl>
     </div>
     <div class="tw-w-2/3" *ngIf="subscription">
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 113d2feabe..cca17f6b9c 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@@ -40,9 +40,13 @@ export class UserSubscriptionComponent implements OnInit {
   sub: SubscriptionResponse;
   selfHosted = false;
   cloudWebVaultUrl: string;
+  enableTimeThreshold: boolean;
 
   cancelPromise: Promise<any>;
   reinstatePromise: Promise<any>;
+  protected enableTimeThreshold$ = this.configService.getFeatureFlag$(
+    FeatureFlag.EnableTimeThreshold,
+  );
 
   protected deprecateStripeSourcesAPI$ = this.configService.getFeatureFlag$(
     FeatureFlag.AC2476_DeprecateStripeSourcesAPI,
@@ -67,6 +71,7 @@ export class UserSubscriptionComponent implements OnInit {
   async ngOnInit() {
     this.cloudWebVaultUrl = await firstValueFrom(this.environmentService.cloudWebVaultUrl$);
     await this.load();
+    this.enableTimeThreshold = await firstValueFrom(this.enableTimeThreshold$);
     this.firstLoaded = true;
   }
 
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 656796b443..25c8c547b2 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -53,9 +53,12 @@
           <dt [ngClass]="{ 'tw-text-danger': isExpired }">
             {{ "subscriptionExpiration" | i18n }}
           </dt>
-          <dd [ngClass]="{ 'tw-text-danger': isExpired }">
+          <dd [ngClass]="{ 'tw-text-danger': isExpired }" *ngIf="!enableTimeThreshold">
             {{ nextInvoice ? (nextInvoice.date | date: "mediumDate") : "-" }}
           </dd>
+          <dd [ngClass]="{ 'tw-text-danger': isExpired }" *ngIf="enableTimeThreshold">
+            {{ nextInvoice ? (sub.subscription.periodEndDate | date: "mediumDate") : "-" }}
+          </dd>
         </ng-container>
       </dl>
     </ng-container>