[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

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>

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)

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."
   },