From 7e905d518bf5ad2ebbf1581a8ae549524a387843 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <acoroiu@bitwarden.com>
Date: Fri, 24 Mar 2023 09:39:22 +0100
Subject: [PATCH] [AC-471] Cloud update subscription page (#4897)

* [AC-471] feat: update copy

* [AC-471] feat: change text color when expired

* [AC-471] feat: remove charge amount
---
 .../organization-subscription-cloud.component.html | 14 +++++---------
 .../organization-subscription-cloud.component.ts   | 10 ++++++++++
 apps/web/src/locales/en/messages.json              |  3 +++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 717ceaf563..c92b09c7e3 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -55,15 +55,11 @@
               "pendingCancellation" | i18n
             }}</span>
           </dd>
-          <dt>{{ "nextCharge" | i18n }}</dt>
-          <dd>
-            {{
-              nextInvoice
-                ? (nextInvoice.date | date : "mediumDate") +
-                  ", " +
-                  (nextInvoice.amount | currency : "$")
-                : "-"
-            }}
+          <dt [ngClass]="{ 'tw-text-danger': isExpired }">
+            {{ "subscriptionExpiration" | i18n }}
+          </dt>
+          <dd [ngClass]="{ 'tw-text-danger': isExpired }">
+            {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
           </dd>
         </ng-container>
       </dl>
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
index 1a4fa29201..0af283c95a 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
@@ -99,6 +99,16 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     return this.sub != null ? this.sub.upcomingInvoice : null;
   }
 
+  get isExpired() {
+    const nextInvoice = this.nextInvoice;
+
+    if (nextInvoice == null) {
+      return false;
+    }
+
+    return new Date(nextInvoice.date).getTime() < Date.now();
+  }
+
   get storagePercentage() {
     return this.sub != null && this.sub.maxStorageGb
       ? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2)
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index b63fa130d8..02ecb4ca21 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -2020,6 +2020,9 @@
   "cancelSubscription": {
     "message": "Cancel subscription"
   },
+  "subscriptionExpiration": {
+    "message": "Subscription expiration"
+  },
   "subscriptionCanceled": {
     "message": "The subscription has been canceled."
   },