DEV: Refactor payment plan buttons (#131)

assets/javascripts/discourse/components/ds-button.js

@@ -1,12 +0,0 @@
-import Button from "discourse/components/d-button";
-
-export default Button.extend({
-  seleted: false,
-
-  init() {
-    this._super(...arguments);
-    this.classNameBindings = this.classNameBindings.concat(
-      "selected:btn-primary"
-    );
-  },
-});

assets/javascripts/discourse/components/payment-plan.js

@@ -5,8 +5,8 @@ const RECURRING = "recurring";
 
 export default Component.extend({
   @discourseComputed("selectedPlan")
-  selected(planId) {
+  selectedClass(planId) {
-    return planId === this.plan.id;
+    return planId === this.plan.id ? "btn-primary" : "";
   },
 
   @discourseComputed("plan.type")

assets/javascripts/discourse/templates/components/payment-plan.hbs

@@ -1,14 +1,11 @@
-{{#ds-button
+<DButton
-  action=(action "planClick")
+  @action={{action "planClick"}} @class={{concat "btn-discourse-subscriptions-subscribe " selectedClass}}>
-  selected=selected
-  class="btn-discourse-subscriptions-subscribe"
-}}
   <div class="interval">
-    {{#if recurringPlan}}
+    {{#if this.recurringPlan}}
       {{i18n
         (concat
           "discourse_subscriptions.plans.interval.adverb."
-          plan.recurring.interval
+          this.plan.recurring.interval
         )
       }}
     {{else}}
@@ -17,6 +14,6 @@
   </div>
 
   <span class="amount">
-    {{format-currency plan.currency plan.amountDollars}}
+    {{format-currency this.plan.currency this.plan.amountDollars}}
   </span>
-{{/ds-button}}
+</DButton>