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

assets/stylesheets/common/discourse-patrons.scss

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

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

spec/requests/subscriptions_controller_spec.rb

@@ -49,7 +49,7 @@ module DiscoursePatrons
 
           get "/patrons/subscriptions.json"
 
-          expect(JSON.parse(response.body)).to eq([{"id"=>"sub_1234"}, {"id"=>"sub_4567"}])
+          expect(JSON.parse(response.body)).to eq([{ "id" => "sub_1234" }, { "id" => "sub_4567" }])
         end
       end