user cancels subscription

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

@@ -7,6 +7,11 @@ const Subscription = Discourse.Model.extend({
     return moment.unix(created).format();
   },
 
+  @computed("status")
+  canceled(status) {
+    return status === 'canceled';
+  },
+
   save() {
     const data = {
       customer: this.customer,
@@ -17,7 +22,9 @@ const Subscription = Discourse.Model.extend({
   },
 
   destroy() {
-    return ajax(`/patrons/subscriptions/${this.id}`, { method: "delete" });
+    return ajax(`/patrons/subscriptions/${this.id}`, { method: "delete" }).then(result =>
+      Subscription.create(result)
+    );
   },
 });
 

assets/javascripts/discourse/routes/user-subscriptions.js.es6

@@ -11,5 +11,25 @@ export default Discourse.Route.extend({
     } else {
       controller.setProperties({ model });
     }
+  },
+
+  actions: {
+    cancelSubscription(subscription) {
+      bootbox.confirm(
+        I18n.t("discourse_patrons.user.subscriptions.operations.destroy.confirm"),
+        I18n.t("no_value"),
+        I18n.t("yes_value"),
+        confirmed => {
+          if (confirmed) {
+            subscription
+              .destroy()
+              .then(result => subscription.set('status', result.status))
+              .catch(data =>
+                bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
+              );
+          }
+        }
+      );
+    }
   }
 });

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

@@ -1,21 +1,23 @@
-{{#d-section class="user-secondary-navigation" pageClass="user-subscriptions"}}
 
-  <h3>{{i18n 'discourse_patrons.user.subscriptions.title'}}</h3>
+{{i18n 'discourse_patrons.user.subscriptions.title'}}
 
-  {{#if model}}
-    <table class="topic-list">
-      <thead>
-        <th>{{i18n 'discourse_patrons.user.subscriptions.created_at'}}</th>
-        <th></th>
-      </thead>
-      {{#each model as |subscription|}}
-        <tr>
-          <td>{{format-date subscription.createdFormatted}}</td>
-        </tr>
-      {{/each}}
-    </table>
-  {{else}}
-    <p>{{i18n 'discourse_patrons.user.subscriptions_help'}}</p>
-  {{/if}}
-
-{{/d-section}}
+{{#if model}}
+  <table class="table discourse-patrons-user-table">
+    <thead>
+      <th>{{i18n 'discourse_patrons.user.subscriptions.id'}}</th>
+      <th>{{i18n 'discourse_patrons.user.subscriptions.status'}}</th>
+      <th>{{i18n 'discourse_patrons.user.subscriptions.created_at'}}</th>
+      <th></th>
+    </thead>
+    {{#each model as |subscription|}}
+      <tr>
+        <td>{{subscription.id}}</td>
+        <td>{{subscription.status}}</td>
+        <td>{{format-date subscription.createdFormatted}}</td>
+        <td class="td-right">{{d-button disabled=subscription.canceled label="cancel" action=(route-action "cancelSubscription" subscription) icon="times"}}</td>
+      </tr>
+    {{/each}}
+  </table>
+{{else}}
+  <p>{{i18n 'discourse_patrons.user.subscriptions_help'}}</p>
+{{/if}}