DEV: Remove deprecations & improve error handling (#12)

- Replace deprecated methods on client
- Fix broken dropdowns due to select kit 2 upgrade
- Graceful error handling when Stripe keys are not configured but plugin enabled

app/controllers/admin/products_controller.rb

@@ -12,9 +12,11 @@ module DiscourseSubscriptions
           product_ids = Product.all.pluck(:external_id)
           products = []
 
-          if product_ids.present?
+          if product_ids.present? && is_stripe_configured?
             products = ::Stripe::Product.list({ ids: product_ids })
             products = products[:data]
+          elsif !is_stripe_configured?
+            products = nil
           end
 
           render_json_dump products

app/controllers/admin/subscriptions_controller.rb

@@ -12,9 +12,11 @@ module DiscourseSubscriptions
           subscription_ids = Subscription.all.pluck(:external_id)
           subscriptions = []
 
-          if subscription_ids.present?
+          if subscription_ids.present? && is_stripe_configured?
             subscriptions = ::Stripe::Subscription.list(expand: ['data.plan.product'])
             subscriptions = subscriptions.select { |sub| subscription_ids.include?(sub[:id]) }
+          elsif !is_stripe_configured?
+            subscriptions = nil
           end
 
           render_json_dump subscriptions

app/controllers/concerns/stripe.rb

@@ -7,5 +7,9 @@ module DiscourseSubscriptions
     def set_api_key
       ::Stripe.api_key = SiteSetting.discourse_subscriptions_secret_key
     end
+
+    def is_stripe_configured?
+      SiteSetting.discourse_subscriptions_public_key.present? && SiteSetting.discourse_subscriptions_secret_key.present?
+    end
   end
 end

app/controllers/products_controller.rb

@@ -11,7 +11,7 @@ module DiscourseSubscriptions
         product_ids = Product.all.pluck(:external_id)
         products = []
 
-        if product_ids.present?
+        if product_ids.present? && is_stripe_configured?
           response = ::Stripe::Product.list({
             ids: product_ids,
             active: true

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

@@ -1,6 +1,7 @@
 import { equal } from "@ember/object/computed";
+import Component from "@ember/component";
 
-export default Ember.Component.extend({
+export default Component.extend({
   planButtonSelected: equal("planTypeIsSelected", true),
   paymentButtonSelected: equal("planTypeIsSelected", false),
 

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

@@ -1,9 +1,16 @@
-import computed from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import User from "discourse/models/user";
+import { isEmpty } from "@ember/utils";
+import Component from "@ember/component";
 
-export default Ember.Component.extend({
-  @computed()
-  currentUser() {
+export default Component.extend({
+  @discourseComputed("products")
+  emptyProducts(products) {
+    return isEmpty(products);
+  },
+
+  @discourseComputed()
+  isLoggedIn() {
     return User.current();
   }
 });

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

@@ -1,4 +1,6 @@
-export default Ember.Component.extend({
+import Component from "@ember/component";
+
+export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
     this.cardElement.mount("#card-element");

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

@@ -1,4 +1,6 @@
-export default Ember.Controller.extend({
+import Controller from "@ember/controller";
+
+export default Controller.extend({
   queryParams: ["order", "descending"],
   order: null,
   descending: true,

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

@@ -1,6 +1,7 @@
+import Controller from "@ember/controller";
 import DiscourseURL from "discourse/lib/url";
 
-export default Ember.Controller.extend({
+export default Controller.extend({
   actions: {
     editPlan(id) {
       return DiscourseURL.redirectTo(

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

@@ -1,6 +1,7 @@
+import Controller from "@ember/controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Ember.Controller.extend({
+export default Controller.extend({
   actions: {
     createPlan() {
       if (this.get("model.plan.product_id") === undefined) {

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

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

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

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

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

@@ -1,16 +1,40 @@
-import computed from "ember-addons/ember-computed-decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import DiscourseURL from "discourse/lib/url";
+import Controller from "@ember/controller";
 
-export default Ember.Controller.extend({
+export default Controller.extend({
   // Also defined in settings.
-  currencies: ["AUD", "CAD", "EUR", "GBP", "USD", "INR"],
+  selectedCurrency: Ember.computed.alias("model.plan.currency"),
+  selectedInterval: Ember.computed.alias("model.plan.interval"),
 
-  @computed("model.plan.isNew")
+  @discourseComputed
+  currencies() {
+    return [
+      { id: "AUD", name: "AUD" },
+      { id: "CAD", name: "CAD" },
+      { id: "EUR", name: "EUR" },
+      { id: "GBP", name: "GBP" },
+      { id: "USD", name: "USD" },
+      { id: "INR", name: "INR" }
+    ];
+  },
+
+  @discourseComputed
+  availableIntervals() {
+    return [
+      { id: "day", name: "day" },
+      { id: "week", name: "week" },
+      { id: "month", name: "month" },
+      { id: "year", name: "year" }
+    ];
+  },
+
+  @discourseComputed("model.plan.isNew")
   planFieldDisabled(isNew) {
     return !isNew;
   },
 
-  @computed("model.product.id")
+  @discourseComputed("model.product.id")
   productId(id) {
     return id;
   },

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

@@ -1,6 +1,7 @@
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import Controller from "@ember/controller";
 
-export default Ember.Controller.extend({
+export default Controller.extend({
   actions: {
     cancelProduct() {
       this.transitionToRoute("adminPlugins.discourse-subscriptions.products");

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

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

assets/javascripts/discourse/controllers/s-index.js.es6

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

assets/javascripts/discourse/controllers/s-show.js.es6

@@ -1,18 +1,19 @@
+import Controller from "@ember/controller";
 import Customer from "discourse/plugins/discourse-subscriptions/discourse/models/customer";
 import Payment from "discourse/plugins/discourse-subscriptions/discourse/models/payment";
 import Subscription from "discourse/plugins/discourse-subscriptions/discourse/models/subscription";
-import computed from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
 
-export default Ember.Controller.extend({
+export default Controller.extend({
   planTypeIsSelected: true,
 
-  @computed("planTypeIsSelected")
+  @discourseComputed("planTypeIsSelected")
   type(planTypeIsSelected) {
     return planTypeIsSelected ? "plans" : "payment";
   },
 
-  @computed("type")
+  @discourseComputed("type")
   buttonText(type) {
     return I18n.t(`discourse_subscriptions.${type}.payment_button`);
   },

assets/javascripts/discourse/controllers/s.js.es6

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

assets/javascripts/discourse/helpers/format-curency.js.es6

@@ -1,20 +0,0 @@
-// TODO: typo in this helper name: currency not curency.
-export default Ember.Helper.helper(function(params) {
-  let currencySign;
-
-  switch (Discourse.SiteSettings.discourse_subscriptions_currency) {
-    case "EUR":
-      currencySign = "€";
-      break;
-    case "GBP":
-      currencySign = "£";
-      break;
-    case "INR":
-      currencySign = "₹";
-      break;
-    default:
-      currencySign = "$";
-  }
-
-  return [currencySign, params[0]].join("");
-});

assets/javascripts/discourse/helpers/format-currency.js.es6

@@ -1,4 +1,6 @@
-export default Ember.Helper.helper(function(params) {
+import Helper from "@ember/component/helper";
+
+export default Helper.helper(function(params) {
   let currencySign;
 
   switch (params[0]) {

assets/javascripts/discourse/helpers/stripe-payment-link.js.es6

@@ -1,4 +1,6 @@
-export default Ember.Helper.helper(function(params) {
+import Helper from "@ember/component/helper";
+
+export default Helper.helper(function(params) {
   const payment = params[0];
 
   return `<a href=\"${payment.url}\">${payment.payment_intent_id}</a>`;

assets/javascripts/discourse/helpers/user-viewing-self.js.es6

@@ -1,10 +1,10 @@
 import { registerUnbound } from "discourse-common/lib/helpers";
+import User from "discourse/models/user";
 
 export default registerUnbound("user-viewing-self", function(model) {
-  if (Discourse.User.current()) {
+  if (User.current()) {
     return (
-      Discourse.User.current().username.toLowerCase() ===
-      model.username.toLowerCase()
+      User.current().username.toLowerCase() === model.username.toLowerCase()
     );
   }
 

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

@@ -1,5 +1,5 @@
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
-import computed from "ember-addons/ember-computed-decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 
 const AdminPlan = Plan.extend({
@@ -10,7 +10,7 @@ const AdminPlan = Plan.extend({
   intervals: ["day", "week", "month", "year"],
   metadata: {},
 
-  @computed("trial_period_days")
+  @discourseComputed("trial_period_days")
   parseTrialPeriodDays(trial_period_days) {
     if (trial_period_days) {
       return parseInt(0 + trial_period_days, 10);

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

@@ -40,9 +40,12 @@ const AdminProduct = EmberObject.extend({
 
 AdminProduct.reopenClass({
   findAll() {
-    return ajax("/s/admin/products", { method: "get" }).then(result =>
-      result.map(product => AdminProduct.create(product))
-    );
+    return ajax("/s/admin/products", { method: "get" }).then(result => {
+      if (result === null) {
+        return { unconfigured: true };
+      }
+      result.map(product => AdminProduct.create(product));
+    });
   },
 
   find(id) {

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

@@ -1,19 +1,19 @@
-import computed from "ember-addons/ember-computed-decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 import EmberObject from "@ember/object";
 
 const AdminSubscription = EmberObject.extend({
-  @computed("status")
+  @discourseComputed("status")
   canceled(status) {
     return status === "canceled";
   },
 
-  @computed("metadata")
+  @discourseComputed("metadata")
   metadataUserExists(metadata) {
     return metadata.user_id && metadata.username;
   },
 
-  @computed("metadata")
+  @discourseComputed("metadata")
   subscriptionUserPath(metadata) {
     return Discourse.getURL(
       `/admin/users/${metadata.user_id}/${metadata.username}`
@@ -31,9 +31,12 @@ AdminSubscription.reopenClass({
   find() {
     return ajax("/s/admin/subscriptions", {
       method: "get"
-    }).then(result =>
-      result.map(subscription => AdminSubscription.create(subscription))
-    );
+    }).then(result => {
+      if (result === null) {
+        return { unconfigured: true };
+      }
+      result.map(subscription => AdminSubscription.create(subscription));
+    });
   }
 });
 

assets/javascripts/discourse/models/plan.js.es6

@@ -1,5 +1,5 @@
 import EmberObject from "@ember/object";
-import computed from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 
 const Plan = EmberObject.extend({
@@ -14,7 +14,7 @@ const Plan = EmberObject.extend({
     }
   }),
 
-  @computed("amountDollars", "currency", "interval")
+  @discourseComputed("amountDollars", "currency", "interval")
   subscriptionRate(amountDollars, currency, interval) {
     return `${amountDollars} ${currency.toUpperCase()} / ${interval}`;
   }

assets/javascripts/discourse/models/subscription.js.es6

@@ -1,9 +1,9 @@
-import computed from "ember-addons/ember-computed-decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 import EmberObject from "@ember/object";
 
 const Subscription = EmberObject.extend({
-  @computed("status")
+  @discourseComputed("status")
   canceled(status) {
     return status === "canceled";
   },

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

@@ -1,9 +1,9 @@
 import EmberObject from "@ember/object";
-import computed from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 
 const UserPayment = EmberObject.extend({
-  @computed("amount")
+  @discourseComputed("amount")
   amountDollars(amount) {
     return parseFloat(amount / 100).toFixed(2);
   }

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

@@ -1,10 +1,10 @@
 import EmberObject from "@ember/object";
-import computed from "ember-addons/ember-computed-decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
 
 const UserSubscription = EmberObject.extend({
-  @computed("status")
+  @discourseComputed("status")
   canceled(status) {
     return status === "canceled";
   },

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

@@ -1,6 +1,7 @@
 import Route from "@ember/routing/route";
 import AdminPlan from "discourse/plugins/discourse-subscriptions/discourse/models/admin-plan";
 import Group from "discourse/models/group";
+import { hash } from "rsvp";
 
 export default Route.extend({
   model(params) {
@@ -14,6 +15,7 @@ export default Route.extend({
       plan = AdminPlan.create({
         active: true,
         isNew: true,
+        interval: "month",
         currency: Discourse.SiteSettings.discourse_subscriptions_currency,
         product: product.get("id")
       });
@@ -23,7 +25,7 @@ export default Route.extend({
 
     const groups = Group.findAll({ ignore_automatic: true });
 
-    return Ember.RSVP.hash({ plan, product, groups });
+    return hash({ plan, product, groups });
   },
 
   renderTemplate() {

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

@@ -2,6 +2,7 @@ import Route from "@ember/routing/route";
 import AdminProduct from "discourse/plugins/discourse-subscriptions/discourse/models/admin-product";
 import AdminPlan from "discourse/plugins/discourse-subscriptions/discourse/models/admin-plan";
 import I18n from "I18n";
+import { hash } from "rsvp";
 
 export default Route.extend({
   model(params) {
@@ -16,7 +17,7 @@ export default Route.extend({
       plans = AdminPlan.findAll({ product_id });
     }
 
-    return Ember.RSVP.hash({ plans, product });
+    return hash({ plans, product });
   },
 
   actions: {

assets/javascripts/discourse/routes/s-show.js.es6

@@ -1,6 +1,7 @@
 import Route from "@ember/routing/route";
 import Product from "discourse/plugins/discourse-subscriptions/discourse/models/product";
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
+import { hash } from "rsvp";
 
 export default Route.extend({
   model(params) {
@@ -9,6 +10,6 @@ export default Route.extend({
     const product = Product.find(product_id);
     const plans = Plan.findAll({ product_id });
 
-    return Ember.RSVP.hash({ plans, product });
+    return hash({ plans, product });
   }
 });

assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-index.hbs

@@ -1,4 +1,7 @@
-
+{{#if model.unconfigured }}
+  <p>{{i18n 'discourse_subscriptions.admin.unconfigured'}}</p>
+  <p><a href="https://meta.discourse.org/t/discourse-subscriptions/140818/">Discourse Subscriptions on Meta</a></p>
+{{else}}
   <p class="btn-right">
     {{#link-to 'adminPlugins.discourse-subscriptions.products.show' 'new' class="btn btn-primary"}}
       {{d-icon "plus"}}
@@ -39,3 +42,4 @@
       {{i18n 'discourse_subscriptions.admin.products.product_help'}}
     </p>
   {{/if}}
+{{/if}}

assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-products-show-plans-show.hbs

@@ -15,7 +15,12 @@
   </p>
   <p>
     <label for="interval">{{i18n 'discourse_subscriptions.admin.plans.plan.group'}}</label>
-    {{combo-box valueAttribute="name" content=model.groups value=model.plan.metadata.group_name}}
+    {{combo-box 
+      valueProperty="name"
+      content=model.groups 
+      value=model.plan.metadata.group_name 
+      onChange=(action (mut model.plan.metadata.group_name))
+    }}
     <div class="control-instructions">
       {{i18n 'discourse_subscriptions.admin.plans.plan.group_help'}}
     </div>
@@ -25,7 +30,12 @@
     {{#if planFieldDisabled}}
       {{input class="plan-amount plan-currency" disabled=true value=model.plan.currency}}
     {{else}}
-      {{combo-box disabled=planFieldDisabled content=currencies value=model.plan.currency}}
+      {{combo-box 
+        disabled=planFieldDisabled 
+        content=currencies 
+        value=model.plan.currency 
+        onChange=(action (mut model.plan.currency))
+      }}
     {{/if}}
     {{input class="plan-amount" type="text" name="name" value=model.plan.amountDollars disabled=planFieldDisabled}}
   </p>
@@ -44,9 +54,14 @@
       {{i18n 'discourse_subscriptions.admin.plans.plan.interval'}}
     </label>
     {{#if planFieldDisabled}}
-      {{input disabled=true value=model.plan.interval}}
+      {{input disabled=true value=selectedInterval}}
     {{else}}
-      {{combo-box valueAttribute="value" content=model.plan.intervals value=model.plan.interval}}
+      {{combo-box 
+        valueProperty="name"
+        content=availableIntervals 
+        value=selectedInterval 
+        onChange=(action (mut selectedInterval))
+      }}
     {{/if}}
   </p>
   <p>

assets/javascripts/discourse/templates/admin/plugins-discourse-subscriptions-subscriptions.hbs

@@ -1,4 +1,7 @@
-
+{{#if model.unconfigured}}
+  <p>{{i18n 'discourse_subscriptions.admin.unconfigured'}}</p>
+  <p><a href="https://meta.discourse.org/t/discourse-subscriptions/140818/">Discourse Subscriptions on Meta</a></p>
+{{else}}
   <table class="table discourse-patrons-table">
     <thead>
       <tr>
@@ -37,3 +40,4 @@
       </tr>
     {{/each}}
   </table>
+{{/if}}

assets/javascripts/discourse/templates/components/product-list.hbs

@@ -1,4 +1,6 @@
-
+{{#if emptyProducts}}
+  <p>{{i18n 'discourse_subscriptions.subscribe.no_products'}}</p>
+{{else}}
   {{#each products as |product|}}
     <div class="product">
       <h2>{{product.name}}</h2>
@@ -7,7 +9,7 @@
         {{product.description}}
       </p>
 
-    {{#if currentUser}}
+      {{#if isLoggedIn}}
         <div class="pull-right">
           {{#link-to "s.show" product.id disabled=product.subscribed class="btn btn-primary"}}
             {{i18n 'discourse_subscriptions.subscribe.title'}}
@@ -17,8 +19,9 @@
     </div>
   {{/each}}
 
-{{#unless currentUser}}
+  {{#unless isLoggedIn}}
     <p>
       {{i18n 'discourse_subscriptions.subscribe.unauthenticated'}}
     </p>
   {{/unless}}
+{{/if}}

assets/javascripts/discourse/templates/connectors/user-main-nav/billing.hbs

@@ -1,3 +1,3 @@
 {{#if (user-viewing-self model)}}
-  {{#link-to 'user.billing'}}{{d-icon "credit-card"}}{{I18n 'discourse_subscriptions.navigation.billing'}}{{/link-to}}
+  {{#link-to 'user.billing'}}{{d-icon "far-credit-card"}}{{I18n 'discourse_subscriptions.navigation.billing'}}{{/link-to}}
 {{/if}}

config/locales/client.en.yml

@@ -67,6 +67,7 @@ en:
               confirm: Are you sure you want to cancel this subscription?
       subscribe:
         title: Subscribe
+        no_products: There are currently no products available.
         unauthenticated: You need to create an account to subscribe.
         card:
           title: Payment
@@ -86,6 +87,7 @@ en:
         confirm_payment: Confirm payment
         success: Go back
       admin:
+        unconfigured: 'Stripe is not configured correctly. Please see Discourse Meta for information.'
         dashboard:
           title: Dashboard
           table:

plugin.rb

@@ -14,7 +14,7 @@ register_asset "stylesheets/common/main.scss"
 register_asset "stylesheets/common/layout.scss"
 register_asset "stylesheets/common/subscribe.scss"
 register_asset "stylesheets/mobile/main.scss"
-register_svg_icon "credit-card" if respond_to?(:register_svg_icon)
+register_svg_icon "far-credit-card" if respond_to?(:register_svg_icon)
 
 register_html_builder('server:before-head-close') do
   "<script src='https://js.stripe.com/v3/'></script>"

test/javascripts/helpers/stripe.js.es6

@@ -1,8 +1,10 @@
+import { Promise } from "rsvp";
+
 export function stubStripe() {
   window.Stripe = () => {
     return {
       createPaymentMethod() {
-        return new Ember.RSVP.Promise(resolve => {
+        return new Promise(resolve => {
           resolve({});
         });
       },