display the plan in the plan buttons

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

@@ -17,8 +17,12 @@
       actionParam=plan
       class="btn btn-discourse-subscriptions-subscribe"
     }}
-      <div>Monthly</div>
-      AUD $5.00
+      <div class="interval">
+        {{plan.interval}}
+      </div>
+      <span class="amount">
+        {{format-currency plan.currency plan.amountDollars}}
+      </span>
     {{/d-button}}
   {{/each}}
 </div>

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

@@ -20,7 +20,10 @@ componentTest("Discourse Subscriptions payment options has content", {
   template: `{{payment-options plans=plans}}`,
 
   async test(assert) {
-    this.set("plans", [1, 2]);
+    this.set("plans", [
+      { currency: 'AUD', interval: 'year', amountDollars: "44.99" },
+      { currency: 'GDP', interval: 'month', amountDollars: "9.99" },
+    ]);
 
     assert.equal(
       find(".btn-discourse-subscriptions-subscribe").length,
@@ -32,6 +35,16 @@ componentTest("Discourse Subscriptions payment options has content", {
       0,
       "The none are selected"
     );
+    assert.equal(
+      find(".btn-discourse-subscriptions-subscribe:first-child .interval").text().trim(),
+      "year",
+      "The plan interval is shown"
+    );
+    assert.equal(
+      find(".btn-discourse-subscriptions-subscribe:first-child .amount").text().trim(),
+      "$AUD 44.99",
+      "The plan amount and currency is shown"
+    );
   }
 });