user cancels subscription

app/controllers/subscriptions_controller.rb

@@ -13,7 +13,6 @@ module DiscoursePatrons
           expand: ['data.subscriptions']
         )
 
-
         subscriptions = customers[:data].map do |customer|
           customer[:subscriptions][:data]
         end.flatten(1)

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">
+  <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}}
-
-{{/d-section}}

assets/stylesheets/common/discourse-patrons.scss

@@ -16,10 +16,15 @@ textarea[readonly] {
   }
 }
 
-table.discourse-patrons-table {
 .td-right {
   text-align: right;
 }
+
+table.discourse-patrons-user-table {
+  width: 100%;
+  th, td {
+    padding: 10px;
+  }
 }
 
 .desc {

config/locales/client.en.yml

@@ -28,14 +28,12 @@ en:
         subscriptions_help: You have no subscriptions.
         subscriptions:
           title: Subscriptions
+          id: Subscription ID
+          status: Status
           created_at: Created
-        billing_help: We couldn't find a customer identifier in our system.
+          operations:
-        billing:
+            destroy:
-          title: Billing
+              confirm: Are you sure you want to cancel this subscription?
-          invoices:
-            amount: Amount
-            number: Invoice Number
-            created_at: Created
         title: Subscribe
         card:
           title: Payment