show the plans in the buttons proper

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

@@ -5,12 +5,10 @@ import Subscription from "discourse/plugins/discourse-subscriptions/discourse/mo
 export default Discourse.Route.extend({
   model(params) {
     const product_id = params["subscription-id"];
-    const product = Product.find(product_id);
 
+    const product = Product.find(product_id);
     const subscription = Subscription.create();
-    const plans = Plan.findAll({ product_id: product_id }).then(results =>
-      results.map(p => ({ id: p.id, name: p.subscriptionRate }))
-    );
+    const plans = Plan.findAll({ product_id: product_id });
 
     return Ember.RSVP.hash({ plans, product, subscription });
   }

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

@@ -18,7 +18,7 @@
       class="btn btn-discourse-subscriptions-subscribe"
     }}
       <div class="interval">
-        {{plan.interval}}
+        {{i18n (concat "discourse_subscriptions.plans.interval.adverb." plan.interval)}}
       </div>
       <span class="amount">
         {{format-currency plan.currency plan.amountDollars}}

config/locales/client.en.yml

@@ -25,6 +25,12 @@ en:
         subscriptions: Subscriptions
         subscribe: Subscribe
         billing: Billing
+      plans:
+        interval:
+          adverb:
+            week: Weekly
+            month: Monthly
+            year: Yearly
       user:
         plans:
           rate: Rate

test/javascripts/components/payment-options-test.js.es6

@@ -21,8 +21,8 @@ componentTest("Discourse Subscriptions payment options has content", {
 
   async test(assert) {
     this.set("plans", [
-      { currency: 'AUD', interval: 'year', amountDollars: "44.99" },
-      { currency: 'GDP', interval: 'month', amountDollars: "9.99" },
+      { currency: "aud", interval: "year", amountDollars: "44.99" },
+      { currency: "gdp", interval: "month", amountDollars: "9.99" }
     ]);
 
     assert.equal(
@@ -36,12 +36,16 @@ componentTest("Discourse Subscriptions payment options has content", {
       "The none are selected"
     );
     assert.equal(
-      find(".btn-discourse-subscriptions-subscribe:first-child .interval").text().trim(),
-      "year",
+      find(".btn-discourse-subscriptions-subscribe:first-child .interval")
+        .text()
+        .trim(),
+      "Yearly",
       "The plan interval is shown"
     );
     assert.equal(
-      find(".btn-discourse-subscriptions-subscribe:first-child .amount").text().trim(),
+      find(".btn-discourse-subscriptions-subscribe:first-child .amount")
+        .text()
+        .trim(),
       "$AUD 44.99",
       "The plan amount and currency is shown"
     );
@@ -55,10 +59,13 @@ componentTest("Discourse Subscriptions payment options plan is selected", {
 
   async test(assert) {
     assert.expect(1);
-    this.set("plans", [1, 2]);
+    this.set("plans", [
+      { currency: "aud", interval: "year", amountDollars: "44.99" },
+      { currency: "gdp", interval: "month", amountDollars: "9.99" }
+    ]);
 
     this.set("selectPlan", function(plan) {
-      assert.equal(plan, 1, "the plan is selected");
+      assert.equal(plan, this.get('plans.firstObject'), "the plan is selected");
     });
 
     await click(".btn-discourse-subscriptions-subscribe:first-child");