FEATURE: Show renewal date on uncanceled subscriptions

assets/javascripts/discourse/models/user-subscription.js.es6

@@ -2,6 +2,7 @@ import EmberObject from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
+import I18n from "I18n";
 
 const UserSubscription = EmberObject.extend({
   @discourseComputed("status")
@@ -9,22 +10,31 @@ const UserSubscription = EmberObject.extend({
     return status === "canceled";
   },
 
+  @discourseComputed("current_period_end", "canceled_at")
+  endDate(current_period_end, canceled_at) {
+    if (!canceled_at) {
+      return moment.unix(current_period_end).format("LL");
+    } else {
+      return I18n.t("discourse_subscriptions.user.subscriptions.cancelled");
+    }
+  },
+
   destroy() {
     return ajax(`/s/user/subscriptions/${this.id}`, {
-      method: "delete"
-    }).then(result => UserSubscription.create(result));
-  }
+      method: "delete",
+    }).then((result) => UserSubscription.create(result));
+  },
 });
 
 UserSubscription.reopenClass({
   findAll() {
-    return ajax("/s/user/subscriptions", { method: "get" }).then(result =>
-      result.map(subscription => {
+    return ajax("/s/user/subscriptions", { method: "get" }).then((result) =>
+      result.map((subscription) => {
         subscription.plan = Plan.create(subscription.plan);
         return UserSubscription.create(subscription);
       })
     );
-  }
+  },
 });
 
 export default UserSubscription;

assets/javascripts/discourse/templates/user/billing/subscriptions.hbs

@@ -5,6 +5,7 @@
       <th>{{i18n 'discourse_subscriptions.user.plans.product'}}</th>
       <th>{{i18n 'discourse_subscriptions.user.plans.rate'}}</th>
       <th>{{i18n 'discourse_subscriptions.user.subscriptions.status'}}</th>
+      <th>Renews</th>
       <th>{{i18n 'discourse_subscriptions.user.subscriptions.created_at'}}</th>
       <th></th>
     </thead>
@@ -14,6 +15,7 @@
         <td>{{subscription.product.name}}</td>
         <td>{{subscription.plan.subscriptionRate}}</td>
         <td>{{subscription.status}}</td>
+        <td>{{subscription.endDate}}</td>
         <td>{{format-unix-date subscription.created}}</td>
         <td class="td-right">
           {{#if subscription.loading}}