DEV: Convert to native class syntax

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,23 +176,23 @@ export default Component.extend({
       (!dismissedBannerKey || now - bannerDismissedTime > threeMonths) &&
       !dismissed
     );
-  },
+  }
 
   @discourseComputed
   subscribeRoute() {
     if (this.pricingTableEnabled) {
       return "subscriptions";
     }
     return "subscribe";
-  },
+  }
 
   @discourseComputed
   isGoalMet() {
     const currentVolume = this.subscriberGoal
       ? 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,
+  }
+
+  @action
+  createNewCoupon() {
+    const createParams = {
+      promo: this.promoCode,
+      discount_type: this.discountType,
+      discount: this.discount,
+      active: this.active,
+    };
 
-  actions: {
-    createNewCoupon() {
-      const createParams = {
-        promo: this.promoCode,
-        discount_type: this.discountType,
-        discount: this.discount,
-        active: this.active,
-      };
+    this.create(createParams);
+  }
 
-      this.create(createParams);
-    },
-    cancelCreate() {
-      this.cancel();
-    },
-  },
-});
+  @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] };
     });
-  }),
-});
+  }
+}