diff --git a/apps/web/src/app/billing/organizations/subscription-status.component.html b/apps/web/src/app/billing/organizations/subscription-status.component.html
index 4bb2c91b85..99673a228e 100644
--- 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 @@
- {{ "billingPlan" | i18n }}
- {{ planName }}
-
+
- {{ data.status.label }}
-
diff --git a/apps/web/src/app/billing/organizations/subscription-status.component.ts b/apps/web/src/app/billing/organizations/subscription-status.component.ts
index 54af940be5..9a0b634edc 100644
--- 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: {