[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

@@ -8426,5 +8426,8 @@
         "example":"increments of 100,000"
       }
     }
+  },
+  "providerReinstate":{
+    "message": " Contact Customer Support to reinstate your subscription."
   }
 }

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"),
+            body:
-            showReinstatementButton: true,
+              this.i18nService.t("subscriptionPendingCanceled") +
+              this.i18nService.t("providerReinstate"),
+            showReinstatementButton: false,
           },
         };
       }

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