[AC-358] SelfHosted update subscription page (#5101)

* [AC-358] Add selfHostSubscriptionExpiration property to organization-subscription.response.ts

* [AC-358] Update selfHost org subscription template

- Replace "Subscription" with "SubscriptionExpiration"
- Add question mark help link
- Add helper text for grace period
- Add support for graceful fallback in case of missing grace period in subscription response

* Update libs/common/src/billing/models/response/organization-subscription.response.ts

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [AC-358] Remove unnecessary hypen

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [AC-358] Introduce SelfHostedOrganizationSubscription view
- Encapsulate expiration/grace period logic in the new view object.
- Remove API response getters from the angular component
- Replace the API response object with the new view

* [AC-358] Clarify name for new expiration without grace period field

* [AC-358] Update constructor parameter name

* [AC-358] Simplify new selfhost subscription view

- Make expiration date properties public
- Remove obsolete expiration date getters
- Update the component to use new properties
- Add helper to component for determining if the subscription should be rendered as expired (red text)

* [AC-358] Rename isExpired to isExpiredAndOutsideGracePeriod to be more explicit

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormControl, FormGroup } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { concatMap, takeUntil, Subject } from "rxjs";
+import { concatMap, Subject, takeUntil } from "rxjs";
 
 import { ModalConfig, ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -14,7 +14,7 @@ import { OrganizationConnectionType } from "@bitwarden/common/admin-console/enum
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/models/response/organization-connection.response";
 import { BillingSyncConfigApi } from "@bitwarden/common/billing/models/api/billing-sync-config.api";
-import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { SelfHostedOrganizationSubscriptionView } from "@bitwarden/common/billing/models/view/self-hosted-organization-subscription.view";
 
 import {
   BillingSyncKeyComponent,
@@ -31,7 +31,7 @@ enum LicenseOptions {
   templateUrl: "organization-subscription-selfhost.component.html",
 })
 export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDestroy {
-  sub: OrganizationSubscriptionResponse;
+  subscription: SelfHostedOrganizationSubscriptionView;
   organizationId: string;
   userOrg: Organization;
 
@@ -65,6 +65,15 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     return this.existingBillingSyncConnection?.enabled;
   }
 
+  /**
+   * Render the subscription as expired.
+   */
+  get showAsExpired() {
+    return this.subscription.hasSeparateGracePeriod
+      ? this.subscription.isExpiredWithoutGracePeriod
+      : this.subscription.isExpiredAndOutsideGracePeriod;
+  }
+
   constructor(
     private modalService: ModalService,
     private messagingService: MessagingService,
@@ -102,7 +111,10 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     this.loading = true;
     this.userOrg = this.organizationService.get(this.organizationId);
     if (this.userOrg.canViewSubscription) {
-      this.sub = await this.organizationApiService.getSubscription(this.organizationId);
+      const subscriptionResponse = await this.organizationApiService.getSubscription(
+        this.organizationId
+      );
+      this.subscription = new SelfHostedOrganizationSubscriptionView(subscriptionResponse);
     }
 
     this.loading = false;
@@ -159,10 +171,6 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     return this.existingBillingSyncConnection?.id != null;
   }
 
-  get isExpired() {
-    return this.sub?.expiration != null && new Date(this.sub.expiration) < new Date();
-  }
-
   get updateMethod() {
     return this.form.get("updateMethod").value;
   }