[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.html

@@ -22,25 +22,45 @@
   [providerName]="userOrg.providerName"
 ></app-org-subscription-hidden>
 
-<ng-container *ngIf="sub && firstLoaded">
+<ng-container *ngIf="subscription && firstLoaded">
   <dl>
     <dt>{{ "billingPlan" | i18n }}</dt>
-    <dd>{{ sub.plan.name }}</dd>
-    <dt>{{ "expiration" | i18n }}</dt>
-    <dd *ngIf="sub.expiration">
-      {{ sub.expiration | date : "mediumDate" }}
-      <span *ngIf="isExpired" class="text-danger ml-2">
-        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-        {{ "licenseIsExpired" | i18n }}
-      </span>
-    </dd>
-    <dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
+    <dd>{{ subscription.planName }}</dd>
     <ng-container *ngIf="billingSyncSetUp">
       <dt>{{ "lastLicenseSync" | i18n }}</dt>
       <dd>
         {{ lastLicenseSync != null ? (lastLicenseSync | date : "medium") : ("never" | i18n) }}
       </dd>
     </ng-container>
+    <dt>
+      <span [ngClass]="{ 'tw-text-danger': showAsExpired }">{{
+        "subscriptionExpiration" | i18n
+      }}</span>
+      <a
+        href="https://bitwarden.com/help/licensing-on-premise/#update-a-renewed-organization-license "
+        target="_blank"
+        [appA11yTitle]="'licensePaidFeaturesHelp' | i18n"
+        rel="noopener"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+        <span class="sr-only">{{ "licensePaidFeaturesHelp" | i18n }}</span>
+      </a>
+    </dt>
+    <dd *ngIf="subscription.hasExpiration" [ngClass]="{ 'tw-text-danger': showAsExpired }">
+      {{
+        (subscription.hasSeparateGracePeriod
+          ? subscription.expirationWithoutGracePeriod
+          : subscription.expirationWithGracePeriod
+        ) | date : "mediumDate"
+      }}
+      <div *ngIf="subscription.hasSeparateGracePeriod" class="tw-text-muted">
+        {{
+          "selfHostGracePeriodHelp"
+            | i18n : (subscription.expirationWithGracePeriod | date : "mediumDate")
+        }}
+      </div>
+    </dd>
+    <dd *ngIf="!subscription.hasExpiration">{{ "neverExpires" | i18n }}</dd>
   </dl>
 
   <a