Resolved subscription page problem for free org (#8622)

bitwarden · Apr 5, 2024 · 9f8f93e · 9f8f93e
1 parent 775c8a1
commit 9f8f93e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/apps/web/src/app/billing/organizations/subscription-status.component.html b/apps/web/src/app/billing/organizations/subscription-status.component.html
@@ -14,7 +14,7 @@
   <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
     <dt>{{ "billingPlan" | i18n }}</dt>
     <dd>{{ planName }}</dd>
-    <ng-container>
+    <ng-container *ngIf="data.status && data.date">
       <dt>{{ data.status.label }}</dt>
       <dd>
         <span class="tw-capitalize">

diff --git a/apps/web/src/app/billing/organizations/subscription-status.component.ts b/apps/web/src/app/billing/organizations/subscription-status.component.ts
@@ -5,11 +5,11 @@ import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/mode
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 type ComponentData = {
-  status: {
+  status?: {
     label: string;
     value: string;
   };
-  date: {
+  date?: {
     label: string;
     value: string;
   };
@@ -44,13 +44,15 @@ export class SubscriptionStatusComponent {
   }
 
   get status(): string {
-    return this.subscription.status != "canceled" && this.subscription.cancelAtEndDate
-      ? "pending_cancellation"
-      : this.subscription.status;
+    return this.subscription
+      ? this.subscription.status != "canceled" && this.subscription.cancelAtEndDate
+        ? "pending_cancellation"
+        : this.subscription.status
+      : "free";
   }
 
   get subscription() {
-    return this.organizationSubscriptionResponse.subscription;
+    return this.organizationSubscriptionResponse?.subscription;
   }
 
   get data(): ComponentData {
@@ -61,6 +63,9 @@ export class SubscriptionStatusComponent {
     const cancellationDateLabel = this.i18nService.t("cancellationDate");
 
     switch (this.status) {
+      case "free": {
+        return {};
+      }
       case "trialing": {
         return {
           status: {