UX: Improve usability of purchase page

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

@@ -1,6 +1,14 @@
 import Component from "@ember/component";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
+  @discourseComputed("plans")
+  orderedPlans(plans) {
+    if (plans) {
+      return plans.sort((a, b) => (a.unit_amount > b.unit_amount ? 1 : -1));
+    }
+  },
+
   didInsertElement() {
     this._super(...arguments);
     if (this.plans && this.plans.length === 1) {

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

@@ -24,5 +24,5 @@ export default Helper.helper(function (params) {
       currencySign = "$";
   }
 
-  return currencySign + params.map((p) => p.toUpperCase()).join(" ");
+  return currencySign + params[1];
 });

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

@@ -3,7 +3,7 @@
 </p>
 
 <div class="subscribe-buttons">
-  {{#each plans as |plan|}}
+  {{#each orderedPlans as |plan|}}
     {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan")}}
   {{/each}}
 </div>

assets/stylesheets/common/subscribe.scss

@@ -3,6 +3,7 @@
   justify-content: space-around;
 
   .btn-discourse-subscriptions-subscribe {
+    flex-direction: column;
     padding: 10px 20px;
     div {
       margin-bottom: 5px;

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

@@ -36,7 +36,7 @@ componentTest("Payment plan subscription button rendered", {
       find(".btn-discourse-subscriptions-subscribe:first-child .amount")
         .text()
         .trim(),
-      "$AUD 44.99",
+      "$44.99",
       "The plan amount and currency is shown"
     );
   },