DEV: Convert to native class syntax (#249)

assets/javascripts/discourse/components/campaign-banner.js

@@ -3,43 +3,53 @@ import { action } from "@ember/object";
 import { equal } from "@ember/object/computed";
 import { later } from "@ember/runloop";
 import { service } from "@ember/service";
+import { classNameBindings } from "@ember-decorators/component";
+import { observes } from "@ember-decorators/object";
 import { ajax } from "discourse/lib/ajax";
 import { setting } from "discourse/lib/computed";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 
 const SIDEBAR_BODY_CLASS = "subscription-campaign-sidebar";
 
-export default Component.extend({
-  router: service(),
-  dismissed: false,
-  loading: false,
-  dropShadowColor: setting(
-    "discourse_subscriptions_campaign_banner_shadow_color"
-  ),
-  backgroundImageUrl: setting(
-    "discourse_subscriptions_campaign_banner_bg_image"
-  ),
-  isSidebar: equal(
+@classNameBindings("isGoalMet:goal-met")
+export default class CampaignBanner extends Component {
+  @service router;
+
+  dismissed = false;
+  loading = false;
+
+  @setting("discourse_subscriptions_campaign_banner_shadow_color")
+  dropShadowColor;
+
+  @setting("discourse_subscriptions_campaign_banner_bg_image")
+  backgroundImageUrl;
+
+  @equal(
     "siteSettings.discourse_subscriptions_campaign_banner_location",
     "Sidebar"
-  ),
-  subscribers: setting("discourse_subscriptions_campaign_subscribers"),
-  subscriberGoal: equal(
-    "siteSettings.discourse_subscriptions_campaign_type",
-    "Subscribers"
-  ),
-  currency: setting("discourse_subscriptions_currency"),
-  amountRaised: setting("discourse_subscriptions_campaign_amount_raised"),
-  goalTarget: setting("discourse_subscriptions_campaign_goal"),
-  product: setting("discourse_subscriptions_campaign_product"),
-  pricingTableEnabled: setting("discourse_subscriptions_pricing_table_enabled"),
-  showContributors: setting(
-    "discourse_subscriptions_campaign_show_contributors"
-  ),
-  classNameBindings: ["isGoalMet:goal-met"],
+  )
+  isSidebar;
+
+  @setting("discourse_subscriptions_campaign_subscribers") subscribers;
+
+  @equal("siteSettings.discourse_subscriptions_campaign_type", "Subscribers")
+  subscriberGoal;
+
+  @setting("discourse_subscriptions_currency") currency;
+
+  @setting("discourse_subscriptions_campaign_amount_raised") amountRaised;
+
+  @setting("discourse_subscriptions_campaign_goal") goalTarget;
+
+  @setting("discourse_subscriptions_campaign_product") product;
+
+  @setting("discourse_subscriptions_pricing_table_enabled") pricingTableEnabled;
+
+  @setting("discourse_subscriptions_campaign_show_contributors")
+  showContributors;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.set("contributors", []);
 
@@ -66,10 +76,10 @@ export default Component.extend({
         });
       });
     }
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     if (this.isSidebar && this.shouldShow && !this.site.mobileView) {
       document.body.classList.add(SIDEBAR_BODY_CLASS);
     } else {
@@ -94,12 +104,12 @@ export default Component.extend({
         document.body.classList.add("success-animation-off");
       }
     }
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
     document.body.classList.remove(SIDEBAR_BODY_CLASS);
-  },
+  }
 
   @discourseComputed("backgroundImageUrl")
   bannerInfoStyle(backgroundImageUrl) {
@@ -114,7 +124,7 @@ export default Component.extend({
         var(--campaign-background-image);
       background-size: cover;
       background-repeat: no-repeat;`;
-  },
+  }
 
   @discourseComputed(
     "router.currentRouteName",
@@ -143,14 +153,14 @@ export default Component.extend({
     }
 
     return showOnRoute && currentUser && enabled && visible;
-  },
+  }
 
   @observes("dismissed")
   _updateBodyClasses() {
     if (this.dismissed) {
       document.body.classList.remove(SIDEBAR_BODY_CLASS);
     }
-  },
+  }
 
   @discourseComputed("dismissed")
   visible(dismissed) {
@@ -166,7 +176,7 @@ export default Component.extend({
       (!dismissedBannerKey || now - bannerDismissedTime > threeMonths) &&
       !dismissed
     );
-  },
+  }
 
   @discourseComputed
   subscribeRoute() {
@@ -174,7 +184,7 @@ export default Component.extend({
       return "subscriptions";
     }
     return "subscribe";
-  },
+  }
 
   @discourseComputed
   isGoalMet() {
@@ -182,7 +192,7 @@ export default Component.extend({
       ? this.subscribers
       : this.amountRaised;
     return currentVolume >= this.goalTarget;
-  },
+  }
 
   @action
   dismissBanner() {
@@ -191,5 +201,5 @@ export default Component.extend({
       key: "dismissed_campaign_banner",
       value: Date.now(),
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/components/create-coupon-form.js

@@ -1,32 +1,35 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+export default class CreateCouponForm extends Component {
+  discountType = "amount";
+  discount = null;
+  promoCode = null;
+  active = false;
+
   @discourseComputed
   discountTypes() {
     return [
       { id: "amount", name: "Amount" },
       { id: "percent", name: "Percent" },
     ];
-  },
-  discountType: "amount",
-  discount: null,
-  promoCode: null,
-  active: false,
+  }
 
-  actions: {
-    createNewCoupon() {
-      const createParams = {
-        promo: this.promoCode,
-        discount_type: this.discountType,
-        discount: this.discount,
-        active: this.active,
-      };
+  @action
+  createNewCoupon() {
+    const createParams = {
+      promo: this.promoCode,
+      discount_type: this.discountType,
+      discount: this.discount,
+      active: this.active,
+    };
 
-      this.create(createParams);
-    },
-    cancelCreate() {
-      this.cancel();
-    },
-  },
-});
+    this.create(createParams);
+  }
+
+  @action
+  cancelCreate() {
+    this.cancel();
+  }
+}

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

@@ -1,23 +1,24 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+export default class PaymentOptions extends Component {
   @discourseComputed("plans")
   orderedPlans(plans) {
     if (plans) {
       return plans.sort((a, b) => (a.unit_amount > b.unit_amount ? 1 : -1));
     }
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     if (this.plans && this.plans.length === 1) {
       this.set("selectedPlan", this.plans[0].id);
     }
-  },
-  actions: {
-    clickPlan(plan) {
-      this.set("selectedPlan", plan.id);
-    },
-  },
-});
+  }
+
+  @action
+  clickPlan(plan) {
+    this.set("selectedPlan", plan.id);
+  }
+}

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

@@ -1,25 +1,25 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
 const RECURRING = "recurring";
 
-export default Component.extend({
-  tagName: "",
-
+@tagName("")
+export default class PaymentPlan extends Component {
   @discourseComputed("selectedPlan")
   selectedClass(planId) {
     return planId === this.plan.id ? "btn-primary" : "";
-  },
+  }
 
   @discourseComputed("plan.type")
   recurringPlan(type) {
     return type === RECURRING;
-  },
+  }
 
-  actions: {
-    planClick() {
-      this.clickPlan(this.plan);
-      return false;
-    },
-  },
-});
+  @action
+  planClick() {
+    this.clickPlan(this.plan);
+    return false;
+  }
+}

assets/javascripts/discourse/components/product-item.js

@@ -1,5 +1,5 @@
 import Component from "@ember/component";
+import { classNames } from "@ember-decorators/component";
 
-export default Component.extend({
-  classNames: ["product"],
-});
+@classNames("product")
+export default class ProductItem extends Component {}

assets/javascripts/discourse/components/product-list.js

@@ -1,12 +1,12 @@
 import Component from "@ember/component";
 import { isEmpty } from "@ember/utils";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  classNames: ["product-list"],
-
+@classNames("product-list")
+export default class ProductList extends Component {
   @discourseComputed("products")
   emptyProducts(products) {
     return isEmpty(products);
-  },
-});
+  }
+}

assets/javascripts/discourse/components/subscribe-ca-province-select.js

@@ -1,22 +1,27 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "I18n";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
-  pluginApiIdentifiers: ["subscribe-ca-province-select"],
-  classNames: ["subscribe-address-state-select"],
-  nameProperty: "name",
-  valueProperty: "value",
+@selectKitOptions({
+  filterable: true,
+  allowAny: false,
+  translatedNone: I18n.t(
+    "discourse_subscriptions.subscribe.cardholder_address.province"
+  ),
+})
+@pluginApiIdentifiers("subscribe-ca-province-select")
+@classNames("subscribe-address-state-select")
+export default class SubscribeCaProvinceSelect extends ComboBoxComponent {
+  nameProperty = "name";
+  valueProperty = "value";
 
-  selectKitOptions: {
-    filterable: true,
-    allowAny: false,
-    translatedNone: I18n.t(
-      "discourse_subscriptions.subscribe.cardholder_address.province"
-    ),
-  },
-
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       ["AB", "Alberta"],
       ["BC", "British Columbia"],
@@ -34,5 +39,5 @@ export default ComboBoxComponent.extend({
     ].map((arr) => {
       return { value: arr[0], name: arr[1] };
     });
-  }),
-});
+  }
+}

assets/javascripts/discourse/components/subscribe-card.js

@@ -1,11 +1,11 @@
 import Component from "@ember/component";
 
-export default Component.extend({
+export default class SubscribeCard extends Component {
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.cardElement.mount("#card-element");
     this.setCardElementStyles();
-  },
+  }
 
   setCardElementStyles() {
     const root = document.querySelector(":root");
@@ -23,9 +23,9 @@ export default Component.extend({
         },
       },
     });
-  },
+  }
 
   didDestroyElement() {
-    this._super(...arguments);
-  },
-});
+    super.didDestroyElement(...arguments);
+  }
+}

assets/javascripts/discourse/components/subscribe-country-select.js

@@ -1,22 +1,27 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "I18n";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
-  pluginApiIdentifiers: ["subscribe-country-select"],
-  classNames: ["subscribe-address-country-select"],
-  nameProperty: "name",
-  valueProperty: "value",
+@pluginApiIdentifiers("subscribe-country-select")
+@selectKitOptions({
+  filterable: true,
+  allowAny: false,
+  translatedNone: I18n.t(
+    "discourse_subscriptions.subscribe.cardholder_address.country"
+  ),
+})
+@classNames("subscribe-address-country-select")
+export default class SubscribeCountrySelect extends ComboBoxComponent {
+  nameProperty = "name";
+  valueProperty = "value";
 
-  selectKitOptions: {
-    filterable: true,
-    allowAny: false,
-    translatedNone: I18n.t(
-      "discourse_subscriptions.subscribe.cardholder_address.country"
-    ),
-  },
-
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       ["AF", I18n.t("discourse_subscriptions.subscribe.countries.AF")],
       ["AX", I18n.t("discourse_subscriptions.subscribe.countries.AX")],
@@ -270,5 +275,5 @@ export default ComboBoxComponent.extend({
     ].map((arr) => {
       return { value: arr[0], name: arr[1] };
     });
-  }),
-});
+  }
+}

assets/javascripts/discourse/components/subscribe-us-state-select.js

@@ -1,22 +1,27 @@
 import { computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import I18n from "I18n";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import {
+  pluginApiIdentifiers,
+  selectKitOptions,
+} from "select-kit/components/select-kit";
 
-export default ComboBoxComponent.extend({
-  pluginApiIdentifiers: ["subscribe-us-state-select"],
-  classNames: ["subscribe-address-state-select"],
-  nameProperty: "name",
-  valueProperty: "value",
+@pluginApiIdentifiers("subscribe-us-state-select")
+@selectKitOptions({
+  filterable: true,
+  allowAny: false,
+  translatedNone: I18n.t(
+    "discourse_subscriptions.subscribe.cardholder_address.state"
+  ),
+})
+@classNames("subscribe-address-state-select")
+export default class SubscribeUsStateSelect extends ComboBoxComponent {
+  nameProperty = "name";
+  valueProperty = "value";
 
-  selectKitOptions: {
-    filterable: true,
-    allowAny: false,
-    translatedNone: I18n.t(
-      "discourse_subscriptions.subscribe.cardholder_address.state"
-    ),
-  },
-
-  content: computed(function () {
+  @computed
+  get content() {
     return [
       ["AL", "Alabama"],
       ["AK", "Alaska"],
@@ -84,5 +89,5 @@ export default ComboBoxComponent.extend({
     ].map((arr) => {
       return { value: arr[0], name: arr[1] };
     });
-  }),
-});
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-coupons.js

@@ -1,42 +1,50 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import AdminCoupon from "discourse/plugins/discourse-subscriptions/discourse/models/admin-coupon";
 
-export default Controller.extend({
-  creating: null,
+export default class AdminPluginsDiscourseSubscriptionsCouponsController extends Controller {
+  creating = null;
 
-  actions: {
-    openCreateForm() {
-      this.set("creating", true);
-    },
-    closeCreateForm() {
-      this.set("creating", false);
-    },
-    createNewCoupon(params) {
-      AdminCoupon.save(params)
-        .then(() => {
-          this.send("closeCreateForm");
-          this.send("reloadModel");
-        })
-        .catch(popupAjaxError);
-    },
-    deleteCoupon(coupon) {
-      AdminCoupon.destroy(coupon)
-        .then(() => {
-          this.send("reloadModel");
-        })
-        .catch(popupAjaxError);
-    },
-    toggleActive(coupon) {
-      const couponData = {
-        id: coupon.id,
-        active: !coupon.active,
-      };
-      AdminCoupon.update(couponData)
-        .then(() => {
-          this.send("reloadModel");
-        })
-        .catch(popupAjaxError);
-    },
-  },
-});
+  @action
+  openCreateForm() {
+    this.set("creating", true);
+  }
+
+  @action
+  closeCreateForm() {
+    this.set("creating", false);
+  }
+
+  @action
+  createNewCoupon(params) {
+    AdminCoupon.save(params)
+      .then(() => {
+        this.send("closeCreateForm");
+        this.send("reloadModel");
+      })
+      .catch(popupAjaxError);
+  }
+
+  @action
+  deleteCoupon(coupon) {
+    AdminCoupon.destroy(coupon)
+      .then(() => {
+        this.send("reloadModel");
+      })
+      .catch(popupAjaxError);
+  }
+
+  @action
+  toggleActive(coupon) {
+    const couponData = {
+      id: coupon.id,
+      active: !coupon.active,
+    };
+    AdminCoupon.update(couponData)
+      .then(() => {
+        this.send("reloadModel");
+      })
+      .catch(popupAjaxError);
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-dashboard.js

@@ -1,19 +1,20 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 
-export default Controller.extend({
-  queryParams: ["order", "descending"],
-  order: null,
-  descending: true,
+export default class AdminPluginsDiscourseSubscriptionsDashboardController extends Controller {
+  queryParams = ["order", "descending"];
+  order = null;
+  descending = true;
 
-  actions: {
-    loadMore() {},
+  @action
+  loadMore() {}
 
-    orderPayments(order) {
-      if (order === this.get("order")) {
-        this.toggleProperty("descending");
-      }
+  @action
+  orderPayments(order) {
+    if (order === this.get("order")) {
+      this.toggleProperty("descending");
+    }
 
-      this.set("order", order);
-    },
-  },
-});
+    this.set("order", order);
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-plans-index.js

@@ -1,12 +1,12 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import DiscourseURL from "discourse/lib/url";
 
-export default Controller.extend({
-  actions: {
-    editPlan(id) {
-      return DiscourseURL.redirectTo(
-        `/admin/plugins/discourse-subscriptions/plans/${id}`
-      );
-    },
-  },
-});
+export default class AdminPluginsDiscourseSubscriptionsPlansIndexController extends Controller {
+  @action
+  editPlan(id) {
+    return DiscourseURL.redirectTo(
+      `/admin/plugins/discourse-subscriptions/plans/${id}`
+    );
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-plans-show.js

@@ -1,25 +1,23 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend({
-  router: service(),
+export default class AdminPluginsDiscourseSubscriptionsPlansShowController extends Controller {
+  @service router;
 
-  actions: {
-    createPlan() {
-      if (this.get("model.plan.product_id") === undefined) {
-        const productID = this.get("model.products.firstObject.id");
-        this.set("model.plan.product_id", productID);
-      }
+  @action
+  createPlan() {
+    if (this.get("model.plan.product_id") === undefined) {
+      const productID = this.get("model.products.firstObject.id");
+      this.set("model.plan.product_id", productID);
+    }
 
-      this.get("model.plan")
-        .save()
-        .then(() => {
-          this.router.transitionTo(
-            "adminPlugins.discourse-subscriptions.plans"
-          );
-        })
-        .catch(popupAjaxError);
-    },
-  },
-});
+    this.get("model.plan")
+      .save()
+      .then(() => {
+        this.router.transitionTo("adminPlugins.discourse-subscriptions.plans");
+      })
+      .catch(popupAjaxError);
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-plans.js

@@ -1,3 +1,3 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({});
+export default class AdminPluginsDiscourseSubscriptionsPlansController extends Controller {}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-products-index.js

@@ -1,3 +1,3 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({});
+export default class AdminPluginsDiscourseSubscriptionsProductsIndexController extends Controller {}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-products-show-plans-show.js

@@ -1,4 +1,5 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { alias } from "@ember/object/computed";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import DiscourseURL from "discourse/lib/url";
@@ -7,15 +8,15 @@ import discourseComputed from "discourse-common/utils/decorators";
 const RECURRING = "recurring";
 const ONE_TIME = "one_time";
 
-export default Controller.extend({
+export default class AdminPluginsDiscourseSubscriptionsProductsShowPlansShowController extends Controller {
   // Also defined in settings.
-  selectedCurrency: alias("model.plan.currency"),
-  selectedInterval: alias("model.plan.interval"),
+  @alias("model.plan.currency") selectedCurrency;
+  @alias("model.plan.interval") selectedInterval;
 
   @discourseComputed("model.plan.metadata.group_name")
   selectedGroup(groupName) {
     return groupName || "no-group";
-  },
+  }
 
   @discourseComputed("model.groups")
   availableGroups(groups) {
@@ -26,7 +27,7 @@ export default Controller.extend({
       },
       ...groups,
     ];
-  },
+  }
 
   @discourseComputed
   currencies() {
@@ -43,7 +44,7 @@ export default Controller.extend({
       { id: "JPY", name: "JPY" },
       { id: "ZAR", name: "ZAR" },
     ];
-  },
+  }
 
   @discourseComputed
   availableIntervals() {
@@ -53,49 +54,50 @@ export default Controller.extend({
       { id: "month", name: "month" },
       { id: "year", name: "year" },
     ];
-  },
+  }
 
   @discourseComputed("model.plan.isNew")
   planFieldDisabled(isNew) {
     return !isNew;
-  },
+  }
 
   @discourseComputed("model.product.id")
   productId(id) {
     return id;
-  },
+  }
 
   redirect(product_id) {
     DiscourseURL.redirectTo(
       `/admin/plugins/discourse-subscriptions/products/${product_id}`
     );
-  },
+  }
 
-  actions: {
-    changeRecurring() {
-      const recurring = this.get("model.plan.isRecurring");
-      this.set("model.plan.type", recurring ? ONE_TIME : RECURRING);
-      this.set("model.plan.isRecurring", !recurring);
-    },
+  @action
+  changeRecurring() {
+    const recurring = this.get("model.plan.isRecurring");
+    this.set("model.plan.type", recurring ? ONE_TIME : RECURRING);
+    this.set("model.plan.isRecurring", !recurring);
+  }
 
-    createPlan() {
-      if (this.model.plan.metadata.group_name === "no-group") {
-        this.set("model.plan.metadata.group_name", null);
-      }
-      this.get("model.plan")
-        .save()
-        .then(() => this.redirect(this.productId))
-        .catch(popupAjaxError);
-    },
+  @action
+  createPlan() {
+    if (this.model.plan.metadata.group_name === "no-group") {
+      this.set("model.plan.metadata.group_name", null);
+    }
+    this.get("model.plan")
+      .save()
+      .then(() => this.redirect(this.productId))
+      .catch(popupAjaxError);
+  }
 
-    updatePlan() {
-      if (this.model.plan.metadata.group_name === "no-group") {
-        this.set("model.plan.metadata.group_name", null);
-      }
-      this.get("model.plan")
-        .update()
-        .then(() => this.redirect(this.productId))
-        .catch(popupAjaxError);
-    },
-  },
-});
+  @action
+  updatePlan() {
+    if (this.model.plan.metadata.group_name === "no-group") {
+      this.set("model.plan.metadata.group_name", null);
+    }
+    this.get("model.plan")
+      .update()
+      .then(() => this.redirect(this.productId))
+      .catch(popupAjaxError);
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-products-show.js

@@ -1,36 +1,38 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend({
-  router: service(),
+export default class AdminPluginsDiscourseSubscriptionsProductsShowController extends Controller {
+  @service router;
 
-  actions: {
-    cancelProduct() {
-      this.router.transitionTo("adminPlugins.discourse-subscriptions.products");
-    },
+  @action
+  cancelProduct() {
+    this.router.transitionTo("adminPlugins.discourse-subscriptions.products");
+  }
 
-    createProduct() {
-      this.get("model.product")
-        .save()
-        .then((product) => {
-          this.router.transitionTo(
-            "adminPlugins.discourse-subscriptions.products.show",
-            product.id
-          );
-        })
-        .catch(popupAjaxError);
-    },
+  @action
+  createProduct() {
+    this.get("model.product")
+      .save()
+      .then((product) => {
+        this.router.transitionTo(
+          "adminPlugins.discourse-subscriptions.products.show",
+          product.id
+        );
+      })
+      .catch(popupAjaxError);
+  }
 
-    updateProduct() {
-      this.get("model.product")
-        .update()
-        .then(() => {
-          this.router.transitionTo(
-            "adminPlugins.discourse-subscriptions.products"
-          );
-        })
-        .catch(popupAjaxError);
-    },
-  },
-});
+  @action
+  updateProduct() {
+    this.get("model.product")
+      .update()
+      .then(() => {
+        this.router.transitionTo(
+          "adminPlugins.discourse-subscriptions.products"
+        );
+      })
+      .catch(popupAjaxError);
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-subscriptions.js

@@ -5,10 +5,11 @@ import I18n from "discourse-i18n";
 import AdminCancelSubscription from "../components/modal/admin-cancel-subscription";
 import AdminSubscription from "../models/admin-subscription";
 
-export default Controller.extend({
-  modal: service(),
-  dialog: service(),
-  loading: false,
+export default class AdminPluginsDiscourseSubscriptionsSubscriptionsController extends Controller {
+  @service modal;
+  @service dialog;
+
+  loading = false;
 
   @action
   showCancelModal(subscription) {
@@ -18,7 +19,7 @@ export default Controller.extend({
         cancelSubscription: this.cancelSubscription,
       },
     });
-  },
+  }
 
   @action
   loadMore() {
@@ -34,7 +35,7 @@ export default Controller.extend({
         }
       );
     }
-  },
+  }
 
   @action
   cancelSubscription(model) {
@@ -56,5 +57,5 @@ export default Controller.extend({
         subscription.set("loading", false);
         closeModal();
       });
-  },
-});
+  }
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions.js

@@ -7,24 +7,24 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
 
-export default Controller.extend({
-  loading: false,
-  dialog: service(),
+export default class AdminPluginsDiscourseSubscriptionsController extends Controller {
+  @service dialog;
+  loading = false;
 
   @discourseComputed
   stripeConfigured() {
     return !!this.siteSettings.discourse_subscriptions_public_key;
-  },
+  }
 
   @discourseComputed
   campaignEnabled() {
     return this.siteSettings.discourse_subscriptions_campaign_enabled;
-  },
+  }
 
   @discourseComputed
   campaignProductSet() {
     return !!this.siteSettings.discourse_subscriptions_campaign_product;
-  },
+  }
 
   @action
   triggerManualRefresh() {
@@ -35,7 +35,7 @@ export default Controller.extend({
         I18n.t("discourse_subscriptions.campaign.refresh_page")
       );
     });
-  },
+  }
 
   @action
   createOneClickCampaign() {
@@ -62,5 +62,5 @@ export default Controller.extend({
           .catch(popupAjaxError);
       },
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/controllers/subscribe-index.js

@@ -2,9 +2,9 @@ import Controller from "@ember/controller";
 import User from "discourse/models/user";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
+export default class SubscribeIndexController extends Controller {
   @discourseComputed()
   isLoggedIn() {
     return User.current();
-  },
-});
+  }
+}

assets/javascripts/discourse/controllers/subscribe-show.js

@@ -1,5 +1,6 @@
 /* global Stripe */
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { not } from "@ember/object/computed";
 import { service } from "@ember/service";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -7,25 +8,28 @@ import I18n from "I18n";
 import Subscription from "discourse/plugins/discourse-subscriptions/discourse/models/subscription";
 import Transaction from "discourse/plugins/discourse-subscriptions/discourse/models/transaction";
 
-export default Controller.extend({
-  dialog: service(),
-  router: service(),
-  selectedPlan: null,
-  promoCode: null,
-  cardholderName: null,
-  cardholderAddress: {
+export default class SubscribeShowController extends Controller {
+  @service dialog;
+  @service router;
+
+  selectedPlan = null;
+  promoCode = null;
+  cardholderName = null;
+  cardholderAddress = {
     line1: null,
     city: null,
     state: null,
     country: null,
     postalCode: null,
-  },
-  isAnonymous: not("currentUser"),
-  isCountryUS: false,
-  isCountryCA: false,
+  };
+
+  @not("currentUser") isAnonymous;
+
+  isCountryUS = false;
+  isCountryCA = false;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.set(
       "stripe",
       Stripe(this.siteSettings.discourse_subscriptions_public_key)
@@ -36,11 +40,11 @@ export default Controller.extend({
 
     this.set("isCountryUS", this.cardholderAddress.country === "US");
     this.set("isCountryCA", this.cardholderAddress.country === "CA");
-  },
+  }
 
   alert(path) {
     this.dialog.alert(I18n.t(`discourse_subscriptions.${path}`));
-  },
+  }
 
   @discourseComputed("model.product.repurchaseable", "model.product.subscribed")
   canPurchase(repurchaseable, subscribed) {
@@ -49,7 +53,7 @@ export default Controller.extend({
     }
 
     return true;
-  },
+  }
 
   createSubscription(plan) {
     return this.stripe
@@ -77,7 +81,7 @@ export default Controller.extend({
           return subscription.save();
         }
       });
-  },
+  }
 
   handleAuthentication(plan, transaction) {
     return this.stripe
@@ -94,7 +98,7 @@ export default Controller.extend({
           return result;
         }
       });
-  },
+  }
 
   _advanceSuccessfulTransaction(plan) {
     this.alert("plans.success");
@@ -106,90 +110,86 @@ export default Controller.extend({
         : "user.billing.payments",
       this.currentUser.username.toLowerCase()
     );
-  },
+  }
 
-  actions: {
-    changeCountry(country) {
-      this.set("cardholderAddress.country", country);
-      this.set("isCountryUS", country === "US");
-      this.set("isCountryCA", country === "CA");
-    },
+  @action
+  changeCountry(country) {
+    this.set("cardholderAddress.country", country);
+    this.set("isCountryUS", country === "US");
+    this.set("isCountryCA", country === "CA");
+  }
 
-    changeState(stateOrProvince) {
-      this.set("cardholderAddress.state", stateOrProvince);
-    },
+  @action
+  changeState(stateOrProvince) {
+    this.set("cardholderAddress.state", stateOrProvince);
+  }
 
-    stripePaymentHandler() {
-      this.set("loading", true);
-      const plan = this.get("model.plans")
-        .filterBy("id", this.selectedPlan)
-        .get("firstObject");
-      const cardholderAddress = this.cardholderAddress;
-      const cardholderName = this.cardholderName;
+  @action
+  stripePaymentHandler() {
+    this.set("loading", true);
+    const plan = this.get("model.plans")
+      .filterBy("id", this.selectedPlan)
+      .get("firstObject");
+    const cardholderAddress = this.cardholderAddress;
+    const cardholderName = this.cardholderName;
 
-      if (!plan) {
-        this.alert("plans.validate.payment_options.required");
-        this.set("loading", false);
-        return;
-      }
+    if (!plan) {
+      this.alert("plans.validate.payment_options.required");
+      this.set("loading", false);
+      return;
+    }
 
-      if (!cardholderName) {
-        this.alert("subscribe.invalid_cardholder_name");
-        this.set("loading", false);
-        return;
-      }
+    if (!cardholderName) {
+      this.alert("subscribe.invalid_cardholder_name");
+      this.set("loading", false);
+      return;
+    }
 
-      if (!cardholderAddress.country) {
-        this.alert("subscribe.invalid_cardholder_country");
-        this.set("loading", false);
-        return;
-      }
+    if (!cardholderAddress.country) {
+      this.alert("subscribe.invalid_cardholder_country");
+      this.set("loading", false);
+      return;
+    }
 
-      if (cardholderAddress.country === "US" && !cardholderAddress.state) {
-        this.alert("subscribe.invalid_cardholder_state");
-        this.set("loading", false);
-        return;
-      }
+    if (cardholderAddress.country === "US" && !cardholderAddress.state) {
+      this.alert("subscribe.invalid_cardholder_state");
+      this.set("loading", false);
+      return;
+    }
 
-      if (cardholderAddress.country === "CA" && !cardholderAddress.state) {
-        this.alert("subscribe.invalid_cardholder_province");
-        this.set("loading", false);
-        return;
-      }
+    if (cardholderAddress.country === "CA" && !cardholderAddress.state) {
+      this.alert("subscribe.invalid_cardholder_province");
+      this.set("loading", false);
+      return;
+    }
 
-      let transaction = this.createSubscription(plan);
+    let transaction = this.createSubscription(plan);
 
-      transaction
-        .then((result) => {
-          if (result.error) {
-            this.dialog.alert(result.error.message || result.error);
-          } else if (
-            result.status === "incomplete" ||
-            result.status === "open"
-          ) {
-            const transactionId = result.id;
-            const planId = this.selectedPlan;
-            this.handleAuthentication(plan, result).then(
-              (authenticationResult) => {
-                if (authenticationResult && !authenticationResult.error) {
-                  return Transaction.finalize(transactionId, planId).then(
-                    () => {
-                      this._advanceSuccessfulTransaction(plan);
-                    }
-                  );
-                }
+    transaction
+      .then((result) => {
+        if (result.error) {
+          this.dialog.alert(result.error.message || result.error);
+        } else if (result.status === "incomplete" || result.status === "open") {
+          const transactionId = result.id;
+          const planId = this.selectedPlan;
+          this.handleAuthentication(plan, result).then(
+            (authenticationResult) => {
+              if (authenticationResult && !authenticationResult.error) {
+                return Transaction.finalize(transactionId, planId).then(() => {
+                  this._advanceSuccessfulTransaction(plan);
+                });
               }
-            );
-          } else {
-            this._advanceSuccessfulTransaction(plan);
-          }
-        })
-        .catch((result) => {
-          this.dialog.alert(
-            result.jqXHR.responseJSON.errors[0] || result.errorThrown
+            }
           );
-          this.set("loading", false);
-        });
-    },
-  },
-});
+        } else {
+          this._advanceSuccessfulTransaction(plan);
+        }
+      })
+      .catch((result) => {
+        this.dialog.alert(
+          result.jqXHR.responseJSON.errors[0] || result.errorThrown
+        );
+        this.set("loading", false);
+      });
+  }
+}

assets/javascripts/discourse/controllers/subscribe.js

@@ -1,3 +1,3 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({});
+export default class SubscribeController extends Controller {}

assets/javascripts/discourse/controllers/subscriptions.js

@@ -3,16 +3,18 @@ import { computed } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 import I18n from "I18n";
 
-export default Controller.extend({
+export default class SubscriptionsController extends Controller {
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     if (this.currentUser) {
       this.currentUser
         .checkEmail()
         .then(() => this.set("email", this.currentUser.email));
     }
-  },
-  pricingTable: computed("email", function () {
+  }
+
+  @computed("email")
+  get pricingTable() {
     try {
       const pricingTableId =
         this.siteSettings.discourse_subscriptions_pricing_table_id;
@@ -39,5 +41,5 @@ export default Controller.extend({
     } catch {
       return I18n.t("discourse_subscriptions.subscribe.no_products");
     }
-  }),
-});
+  }
+}

assets/javascripts/discourse/controllers/user-billing-subscriptions-card.js

@@ -6,21 +6,21 @@ import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n from "I18n";
 
-export default Controller.extend({
-  dialog: service(),
+export default class UserBillingSubscriptionsCardController extends Controller {
+  @service dialog;
 
-  loading: false,
-  saved: false,
+  loading = false;
+  saved = false;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.set(
       "stripe",
       Stripe(this.siteSettings.discourse_subscriptions_public_key)
     );
     const elements = this.get("stripe").elements();
     this.set("cardElement", elements.create("card", { hidePostalCode: true }));
-  },
+  }
 
   @action
   async updatePaymentMethod() {
@@ -56,5 +56,5 @@ export default Controller.extend({
       this.set("loading", false);
       this.cardElement?.clear();
     }
-  },
-});
+  }
+}

assets/javascripts/discourse/models/admin-coupon.js

@@ -2,19 +2,8 @@ import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 
-const AdminCoupon = EmberObject.extend({
-  @discourseComputed("coupon.amount_off", "coupon.percent_off")
-  discount(amount_off, percent_off) {
-    if (amount_off) {
-      return `${parseFloat(amount_off * 0.01).toFixed(2)}`;
-    } else if (percent_off) {
-      return `${percent_off}%`;
-    }
-  },
-});
-
-AdminCoupon.reopenClass({
-  list() {
+export default class AdminCoupon extends EmberObject {
+  static list() {
     return ajax("/s/admin/coupons", {
       method: "get",
     }).then((result) => {
@@ -23,8 +12,9 @@ AdminCoupon.reopenClass({
       }
       return result.map((coupon) => AdminCoupon.create(coupon));
     });
-  },
-  save(params) {
+  }
+
+  static save(params) {
     const data = {
       promo: params.promo,
       discount_type: params.discount_type,
@@ -36,9 +26,9 @@ AdminCoupon.reopenClass({
       method: "post",
       data,
     }).then((coupon) => AdminCoupon.create(coupon));
-  },
+  }
 
-  update(params) {
+  static update(params) {
     const data = {
       id: params.id,
       active: params.active,
@@ -48,9 +38,9 @@ AdminCoupon.reopenClass({
       method: "put",
       data,
     }).then((coupon) => AdminCoupon.create(coupon));
-  },
+  }
 
-  destroy(params) {
+  static destroy(params) {
     const data = {
       coupon_id: params.coupon.id,
     };
@@ -58,7 +48,14 @@ AdminCoupon.reopenClass({
       method: "delete",
       data,
     });
-  },
-});
+  }
 
-export default AdminCoupon;
+  @discourseComputed("coupon.amount_off", "coupon.percent_off")
+  discount(amount_off, percent_off) {
+    if (amount_off) {
+      return `${parseFloat(amount_off * 0.01).toFixed(2)}`;
+    } else if (percent_off) {
+      return `${percent_off}%`;
+    }
+  }
+}

assets/javascripts/discourse/models/admin-plan.js

@@ -2,13 +2,25 @@ import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
 
-const AdminPlan = Plan.extend({
-  isNew: false,
-  name: "",
-  interval: "month",
-  unit_amount: 0,
-  intervals: ["day", "week", "month", "year"],
-  metadata: {},
+export default class AdminPlan extends Plan {
+  static findAll(data) {
+    return ajax("/s/admin/plans", { method: "get", data }).then((result) =>
+      result.map((plan) => AdminPlan.create(plan))
+    );
+  }
+
+  static find(id) {
+    return ajax(`/s/admin/plans/${id}`, { method: "get" }).then((plan) =>
+      AdminPlan.create(plan)
+    );
+  }
+
+  isNew = false;
+  name = "";
+  interval = "month";
+  unit_amount = 0;
+  intervals = ["day", "week", "month", "year"];
+  metadata = {};
 
   @discourseComputed("trial_period_days")
   parseTrialPeriodDays(trialDays) {
@@ -17,7 +29,7 @@ const AdminPlan = Plan.extend({
     } else {
       return 0;
     }
-  },
+  }
 
   save() {
     const data = {
@@ -33,7 +45,7 @@ const AdminPlan = Plan.extend({
     };
 
     return ajax("/s/admin/plans", { method: "post", data });
-  },
+  }
 
   update() {
     const data = {
@@ -44,21 +56,5 @@ const AdminPlan = Plan.extend({
     };
 
     return ajax(`/s/admin/plans/${this.id}`, { method: "patch", data });
-  },
-});
-
-AdminPlan.reopenClass({
-  findAll(data) {
-    return ajax("/s/admin/plans", { method: "get", data }).then((result) =>
-      result.map((plan) => AdminPlan.create(plan))
-    );
-  },
-
-  find(id) {
-    return ajax(`/s/admin/plans/${id}`, { method: "get" }).then((plan) =>
-      AdminPlan.create(plan)
-    );
-  },
-});
-
-export default AdminPlan;
+  }
+}

assets/javascripts/discourse/models/admin-product.js

@@ -1,13 +1,28 @@
 import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 
-const AdminProduct = EmberObject.extend({
-  isNew: false,
-  metadata: {},
+export default class AdminProduct extends EmberObject {
+  static findAll() {
+    return ajax("/s/admin/products", { method: "get" }).then((result) => {
+      if (result === null) {
+        return { unconfigured: true };
+      }
+      return result.map((product) => AdminProduct.create(product));
+    });
+  }
+
+  static find(id) {
+    return ajax(`/s/admin/products/${id}`, {
+      method: "get",
+    }).then((product) => AdminProduct.create(product));
+  }
+
+  isNew = false;
+  metadata = {};
 
   destroy() {
     return ajax(`/s/admin/products/${this.id}`, { method: "delete" });
-  },
+  }
 
   save() {
     const data = {
@@ -21,7 +36,7 @@ const AdminProduct = EmberObject.extend({
       method: "post",
       data,
     }).then((product) => AdminProduct.create(product));
-  },
+  }
 
   update() {
     const data = {
@@ -35,24 +50,5 @@ const AdminProduct = EmberObject.extend({
       method: "patch",
       data,
     });
-  },
-});
-
-AdminProduct.reopenClass({
-  findAll() {
-    return ajax("/s/admin/products", { method: "get" }).then((result) => {
-      if (result === null) {
-        return { unconfigured: true };
-      }
-      return result.map((product) => AdminProduct.create(product));
-    });
-  },
-
-  find(id) {
-    return ajax(`/s/admin/products/${id}`, {
-      method: "get",
-    }).then((product) => AdminProduct.create(product));
-  },
-});
-
-export default AdminProduct;
+  }
+}

assets/javascripts/discourse/models/admin-subscription.js

@@ -3,35 +3,8 @@ import { ajax } from "discourse/lib/ajax";
 import getURL from "discourse-common/lib/get-url";
 import discourseComputed from "discourse-common/utils/decorators";
 
-const AdminSubscription = EmberObject.extend({
-  @discourseComputed("status")
-  canceled(status) {
-    return status === "canceled";
-  },
-
-  @discourseComputed("metadata")
-  metadataUserExists(metadata) {
-    return metadata.user_id && metadata.username;
-  },
-
-  @discourseComputed("metadata")
-  subscriptionUserPath(metadata) {
-    return getURL(`/admin/users/${metadata.user_id}/${metadata.username}`);
-  },
-
-  destroy(refund) {
-    const data = {
-      refund,
-    };
-    return ajax(`/s/admin/subscriptions/${this.id}`, {
-      method: "delete",
-      data,
-    }).then((result) => AdminSubscription.create(result));
-  },
-});
-
-AdminSubscription.reopenClass({
-  find() {
+export default class AdminSubscription extends EmberObject {
+  static find() {
     return ajax("/s/admin/subscriptions", {
       method: "get",
     }).then((result) => {
@@ -43,8 +16,9 @@ AdminSubscription.reopenClass({
       );
       return result;
     });
-  },
-  loadMore(lastRecord) {
+  }
+
+  static loadMore(lastRecord) {
     return ajax(`/s/admin/subscriptions?last_record=${lastRecord}`, {
       method: "get",
     }).then((result) => {
@@ -53,7 +27,30 @@ AdminSubscription.reopenClass({
       );
       return result;
     });
-  },
-});
+  }
 
-export default AdminSubscription;
+  @discourseComputed("status")
+  canceled(status) {
+    return status === "canceled";
+  }
+
+  @discourseComputed("metadata")
+  metadataUserExists(metadata) {
+    return metadata.user_id && metadata.username;
+  }
+
+  @discourseComputed("metadata")
+  subscriptionUserPath(metadata) {
+    return getURL(`/admin/users/${metadata.user_id}/${metadata.username}`);
+  }
+
+  destroy(refund) {
+    const data = {
+      refund,
+    };
+    return ajax(`/s/admin/subscriptions/${this.id}`, {
+      method: "delete",
+      data,
+    }).then((result) => AdminSubscription.create(result));
+  }
+}

assets/javascripts/discourse/models/plan.js

@@ -1,26 +1,24 @@
 import EmberObject, { computed } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 
-const Plan = EmberObject.extend({
-  amountDollars: computed("unit_amount", {
-    get() {
-      return parseFloat(this.get("unit_amount") / 100).toFixed(2);
-    },
-    set(key, value) {
-      const decimal = parseFloat(value) * 100;
-      this.set("unit_amount", decimal);
-      return value;
-    },
-  }),
+export default class Plan extends EmberObject {
+  @computed("unit_amount")
+  get amountDollars() {
+    return parseFloat(this.get("unit_amount") / 100).toFixed(2);
+  }
+
+  set amountDollars(value) {
+    const decimal = parseFloat(value) * 100;
+    this.set("unit_amount", decimal);
+  }
+
   @discourseComputed("recurring.interval")
   billingInterval(interval) {
     return interval || "one-time";
-  },
+  }
 
   @discourseComputed("amountDollars", "currency", "billingInterval")
   subscriptionRate(amountDollars, currency, interval) {
     return `${amountDollars} ${currency.toUpperCase()} / ${interval}`;
-  },
-});
-
-export default Plan;
+  }
+}

assets/javascripts/discourse/models/product.js

@@ -1,14 +1,10 @@
 import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 
-const Product = EmberObject.extend({});
-
-Product.reopenClass({
-  findAll() {
+export default class Product extends EmberObject {
+  static findAll() {
     return ajax("/s", { method: "get" }).then((result) =>
       result.map((product) => Product.create(product))
     );
-  },
-});
-
-export default Product;
+  }
+}

assets/javascripts/discourse/models/subscription.js

@@ -2,11 +2,15 @@ import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 
-const Subscription = EmberObject.extend({
+export default class Subscription extends EmberObject {
+  static show(id) {
+    return ajax(`/s/${id}`, { method: "get" });
+  }
+
   @discourseComputed("status")
   canceled(status) {
     return status === "canceled";
-  },
+  }
 
   save() {
     const data = {
@@ -18,13 +22,5 @@ const Subscription = EmberObject.extend({
     };
 
     return ajax("/s/create", { method: "post", data });
-  },
-});
-
-Subscription.reopenClass({
-  show(id) {
-    return ajax(`/s/${id}`, { method: "get" });
-  },
-});
-
-export default Subscription;
+  }
+}

assets/javascripts/discourse/models/user-payment.js

@@ -2,21 +2,17 @@ import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 
-const UserPayment = EmberObject.extend({
-  @discourseComputed("amount")
-  amountDollars(amount) {
-    return parseFloat(amount / 100).toFixed(2);
-  },
-});
-
-UserPayment.reopenClass({
-  findAll() {
+export default class UserPayment extends EmberObject {
+  static findAll() {
     return ajax("/s/user/payments", { method: "get" }).then((result) =>
       result.map((payment) => {
         return UserPayment.create(payment);
       })
     );
-  },
-});
+  }
 
-export default UserPayment;
+  @discourseComputed("amount")
+  amountDollars(amount) {
+    return parseFloat(amount / 100).toFixed(2);
+  }
+}

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

@@ -4,11 +4,20 @@ import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
 
-const UserSubscription = EmberObject.extend({
+export default class UserSubscription extends EmberObject {
+  static findAll() {
+    return ajax("/s/user/subscriptions", { method: "get" }).then((result) =>
+      result.map((subscription) => {
+        subscription.plan = Plan.create(subscription.plan);
+        return UserSubscription.create(subscription);
+      })
+    );
+  }
+
   @discourseComputed("status")
   canceled(status) {
     return status === "canceled";
-  },
+  }
 
   @discourseComputed("current_period_end", "canceled_at")
   endDate(current_period_end, canceled_at) {
@@ -17,7 +26,7 @@ const UserSubscription = EmberObject.extend({
     } else {
       return I18n.t("discourse_subscriptions.user.subscriptions.cancelled");
     }
-  },
+  }
 
   @discourseComputed("discount")
   discounted(discount) {
@@ -33,24 +42,11 @@ const UserSubscription = EmberObject.extend({
     } else {
       return I18n.t("no_value");
     }
-  },
+  }
 
   destroy() {
     return ajax(`/s/user/subscriptions/${this.id}`, {
       method: "delete",
     }).then((result) => UserSubscription.create(result));
-  },
-});
-
-UserSubscription.reopenClass({
-  findAll() {
-    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/routes/admin-plugins-discourse-subscriptions-coupons.js

@@ -2,13 +2,13 @@ import { action } from "@ember/object";
 import Route from "@ember/routing/route";
 import AdminCoupon from "discourse/plugins/discourse-subscriptions/discourse/models/admin-coupon";
 
-export default Route.extend({
+export default class AdminPluginsDiscourseSubscriptionsCouponsRoute extends Route {
   model() {
     return AdminCoupon.list();
-  },
+  }
 
   @action
   reloadModel() {
     this.refresh();
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-plans-index.js

@@ -1,8 +1,8 @@
 import Route from "@ember/routing/route";
 import AdminPlan from "discourse/plugins/discourse-subscriptions/discourse/models/admin-plan";
 
-export default Route.extend({
+export default class AdminPluginsDiscourseSubscriptionsPlansIndexRoute extends Route {
   model() {
     return AdminPlan.findAll();
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-plans.js

@@ -1,3 +1,3 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({});
+export default class AdminPluginsDiscourseSubscriptionsPlansRoute extends Route {}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-products-index.js

@@ -4,12 +4,12 @@ import { service } from "@ember/service";
 import I18n from "I18n";
 import AdminProduct from "discourse/plugins/discourse-subscriptions/discourse/models/admin-product";
 
-export default Route.extend({
-  dialog: service(),
+export default class AdminPluginsDiscourseSubscriptionsProductsIndexRoute extends Route {
+  @service dialog;
 
   model() {
     return AdminProduct.findAll();
-  },
+  }
 
   @action
   destroyProduct(product) {
@@ -32,5 +32,5 @@ export default Route.extend({
           );
       },
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-products-show-plans-show.js

@@ -3,7 +3,7 @@ import { hash } from "rsvp";
 import Group from "discourse/models/group";
 import AdminPlan from "discourse/plugins/discourse-subscriptions/discourse/models/admin-plan";
 
-export default Route.extend({
+export default class AdminPluginsDiscourseSubscriptionsProductsShowPlansShowRoute extends Route {
   model(params) {
     const id = params["plan-id"];
     const product = this.modelFor(
@@ -35,7 +35,7 @@ export default Route.extend({
     const groups = Group.findAll({ ignore_automatic: true });
 
     return hash({ plan, product, groups });
-  },
+  }
 
   renderTemplate() {
     this.render(
@@ -47,5 +47,5 @@ export default Route.extend({
           "adminPlugins.discourse-subscriptions.products.show.plans.show",
       }
     );
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-products-show.js

@@ -6,8 +6,9 @@ import I18n from "I18n";
 import AdminPlan from "discourse/plugins/discourse-subscriptions/discourse/models/admin-plan";
 import AdminProduct from "discourse/plugins/discourse-subscriptions/discourse/models/admin-product";
 
-export default Route.extend({
-  dialog: service(),
+export default class AdminPluginsDiscourseSubscriptionsProductsShowRoute extends Route {
+  @service dialog;
+
   model(params) {
     const product_id = params["product-id"];
     let product;
@@ -21,7 +22,7 @@ export default Route.extend({
     }
 
     return hash({ plans, product });
-  },
+  }
 
   @action
   destroyPlan(plan) {
@@ -42,5 +43,5 @@ export default Route.extend({
           );
       },
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-products.js

@@ -1,3 +1,3 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({});
+export default class AdminPluginsDiscourseSubscriptionsProductsRoute extends Route {}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-subscriptions.js

@@ -1,8 +1,8 @@
 import Route from "@ember/routing/route";
 import AdminSubscription from "discourse/plugins/discourse-subscriptions/discourse/models/admin-subscription";
 
-export default Route.extend({
+export default class AdminPluginsDiscourseSubscriptionsSubscriptionsRoute extends Route {
   model() {
     return AdminSubscription.find();
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions.js

@@ -2,8 +2,8 @@ import { action } from "@ember/object";
 import Route from "@ember/routing/route";
 import { service } from "@ember/service";
 
-export default Route.extend({
-  router: service(),
+export default class AdminPluginsDiscourseSubscriptionsRoute extends Route {
+  @service router;
 
   @action
   showSettings() {
@@ -15,5 +15,5 @@ export default Route.extend({
         controller.set("_skipBounce", true);
         controller.filterContentNow("plugins");
       });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/subscribe-index.js

@@ -2,12 +2,12 @@ import Route from "@ember/routing/route";
 import { service } from "@ember/service";
 import Product from "discourse/plugins/discourse-subscriptions/discourse/models/product";
 
-export default Route.extend({
-  router: service(),
+export default class SubscribeIndexRoute extends Route {
+  @service router;
 
   model() {
     return Product.findAll();
-  },
+  }
 
   afterModel(products) {
     if (products.length === 1) {
@@ -22,5 +22,5 @@ export default Route.extend({
         this.router.transitionTo("subscribe.show", product.id);
       }
     }
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/subscribe-show.js

@@ -3,7 +3,7 @@ import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/pla
 import Product from "discourse/plugins/discourse-subscriptions/discourse/models/product";
 import Subscription from "discourse/plugins/discourse-subscriptions/discourse/models/subscription";
 
-export default Route.extend({
+export default class SubscribeShowRoute extends Route {
   model(params) {
     const product_id = params["subscription-id"];
 
@@ -15,5 +15,5 @@ export default Route.extend({
 
       return result;
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/user-billing-index.js

@@ -1,11 +1,12 @@
 import Route from "@ember/routing/route";
 import { service } from "@ember/service";
 
-export default Route.extend({
-  router: service(),
-  templateName: "user/billing/index",
+export default class UserBillingIndexRoute extends Route {
+  @service router;
+
+  templateName = "user/billing/index";
 
   redirect() {
     this.router.transitionTo("user.billing.subscriptions.index");
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/user-billing-payments.js

@@ -1,10 +1,10 @@
 import Route from "@ember/routing/route";
 import UserPayment from "discourse/plugins/discourse-subscriptions/discourse/models/user-payment";
 
-export default Route.extend({
-  templateName: "user/billing/payments",
+export default class UserBillingPaymentsRoute extends Route {
+  templateName = "user/billing/payments";
 
   model() {
     return UserPayment.findAll();
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/user-billing-subscriptions-card.js

@@ -1,7 +1,7 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({
+export default class UserBillingSubscriptionsCardRoute extends Route {
   model(params) {
     return params["stripe-subscription-id"];
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/user-billing-subscriptions-index.js

@@ -4,17 +4,19 @@ import { service } from "@ember/service";
 import I18n from "I18n";
 import UserSubscription from "discourse/plugins/discourse-subscriptions/discourse/models/user-subscription";
 
-export default Route.extend({
-  dialog: service(),
-  router: service(),
+export default class UserBillingSubscriptionsIndexRoute extends Route {
+  @service dialog;
+  @service router;
+
   model() {
     return UserSubscription.findAll();
-  },
+  }
 
   @action
   updateCard(subscriptionId) {
     this.router.transitionTo("user.billing.subscriptions.card", subscriptionId);
-  },
+  }
+
   @action
   cancelSubscription(subscription) {
     this.dialog.yesNoConfirm({
@@ -36,5 +38,5 @@ export default Route.extend({
           });
       },
     });
-  },
-});
+  }
+}

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

@@ -1,3 +1,3 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend();
+export default class UserBillingSubscriptionsRoute extends Route {}

assets/javascripts/discourse/routes/user-billing.js

@@ -1,10 +1,10 @@
 import Route from "@ember/routing/route";
 import { service } from "@ember/service";
 
-export default Route.extend({
-  router: service(),
+export default class UserBillingRoute extends Route {
+  @service router;
 
-  templateName: "user/billing",
+  templateName = "user/billing";
 
   setupController(controller, model) {
     if (this.currentUser.id !== this.modelFor("user").id) {
@@ -12,5 +12,5 @@ export default Route.extend({
     } else {
       controller.setProperties({ model });
     }
-  },
-});
+  }
+}