From 593dc3c71660df0f5e7add2b7d53dd9083b1fe04 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:50:10 +0100
Subject: [PATCH] [AC-2721] [Defect] Apply subscription status updates in
 provider subscription details (#9729)

* Resolve the pending cancellation status

* Add the contact information
---
 apps/web/src/locales/en/messages.json                |  3 +++
 .../subscription/subscription-status.component.ts    | 12 +++++++++---
 .../response/provider-subscription-response.ts       |  2 ++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 18b45f4d458..82aee1e3200 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -8426,5 +8426,8 @@
         "example":"increments of 100,000"
       }
     }
+  },
+  "providerReinstate":{
+    "message": " Contact Customer Support to reinstate your subscription."
   }
 }
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/subscription/subscription-status.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/subscription/subscription-status.component.ts
index fa9a892254e..91cdef10aca 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/subscription/subscription-status.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/subscription/subscription-status.component.ts
@@ -43,6 +43,10 @@ export class SubscriptionStatusComponent {
   }
 
   get status(): string {
+    if (this.subscription.cancelAt && this.subscription.status === "active") {
+      this.subscription.status = "pending_cancellation";
+    }
+
     return this.subscription.status;
   }
 
@@ -151,13 +155,15 @@ export class SubscriptionStatusComponent {
           },
           date: {
             label: cancellationDateLabel,
-            value: this.subscription.currentPeriodEndDate.toDateString(),
+            value: this.subscription.cancelAt,
           },
           callout: {
             severity: "warning",
             header: pendingCancellationText,
-            body: this.i18nService.t("subscriptionPendingCanceled"),
-            showReinstatementButton: true,
+            body:
+              this.i18nService.t("subscriptionPendingCanceled") +
+              this.i18nService.t("providerReinstate"),
+            showReinstatementButton: false,
           },
         };
       }
diff --git a/libs/common/src/billing/models/response/provider-subscription-response.ts b/libs/common/src/billing/models/response/provider-subscription-response.ts
index fb8818fb39d..4986914cc0b 100644
--- a/libs/common/src/billing/models/response/provider-subscription-response.ts
+++ b/libs/common/src/billing/models/response/provider-subscription-response.ts
@@ -9,6 +9,7 @@ export class ProviderSubscriptionResponse extends BaseResponse {
   unpaidPeriodEndDate?: string;
   gracePeriod?: number | null;
   suspensionDate?: string;
+  cancelAt?: string;
 
   constructor(response: any) {
     super(response);
@@ -19,6 +20,7 @@ export class ProviderSubscriptionResponse extends BaseResponse {
     this.unpaidPeriodEndDate = this.getResponseProperty("unpaidPeriodEndDate");
     this.gracePeriod = this.getResponseProperty("gracePeriod");
     this.suspensionDate = this.getResponseProperty("suspensionDate");
+    this.cancelAt = this.getResponseProperty("cancelAt");
     const plans = this.getResponseProperty("plans");
     if (plans != null) {
       this.plans = plans.map((i: any) => new ProviderPlanResponse(i));