[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

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

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

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>