From f3892c112f37fc5f5f350be01f4508ca35d8f654 Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Mon, 15 Feb 2021 13:34:34 -0600
Subject: [PATCH 1/2] UX: Improve usability of purchase page

---
 .../javascripts/discourse/components/payment-options.js.es6 | 6 ++++++
 assets/javascripts/discourse/helpers/format-currency.js.es6 | 2 +-
 .../discourse/templates/components/payment-options.hbs      | 2 +-
 assets/stylesheets/common/subscribe.scss                    | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/assets/javascripts/discourse/components/payment-options.js.es6 b/assets/javascripts/discourse/components/payment-options.js.es6
index b39beb3c..f5f10eea 100644
--- a/assets/javascripts/discourse/components/payment-options.js.es6
+++ b/assets/javascripts/discourse/components/payment-options.js.es6
@@ -1,6 +1,12 @@
 import Component from "@ember/component";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
+  @discourseComputed("plans")
+  orderedPlans(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) {
diff --git a/assets/javascripts/discourse/helpers/format-currency.js.es6 b/assets/javascripts/discourse/helpers/format-currency.js.es6
index 1c0d2e60..a4b637c9 100644
--- a/assets/javascripts/discourse/helpers/format-currency.js.es6
+++ b/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];
 });
diff --git a/assets/javascripts/discourse/templates/components/payment-options.hbs b/assets/javascripts/discourse/templates/components/payment-options.hbs
index 62552fa1..8e2d6c2c 100644
--- a/assets/javascripts/discourse/templates/components/payment-options.hbs
+++ b/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>
diff --git a/assets/stylesheets/common/subscribe.scss b/assets/stylesheets/common/subscribe.scss
index c5712358..82480a2c 100644
--- a/assets/stylesheets/common/subscribe.scss
+++ b/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;

From 960417e73f047afcb881be126b501c2a664da9ae Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Mon, 15 Feb 2021 13:52:18 -0600
Subject: [PATCH 2/2] Fix up tests

---
 .../javascripts/discourse/components/payment-options.js.es6   | 4 +++-
 test/javascripts/components/payment-plan-test.js.es6          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/javascripts/discourse/components/payment-options.js.es6 b/assets/javascripts/discourse/components/payment-options.js.es6
index f5f10eea..d5557529 100644
--- a/assets/javascripts/discourse/components/payment-options.js.es6
+++ b/assets/javascripts/discourse/components/payment-options.js.es6
@@ -4,7 +4,9 @@ import discourseComputed from "discourse-common/utils/decorators";
 export default Component.extend({
   @discourseComputed("plans")
   orderedPlans(plans) {
-    return plans.sort((a, b) => (a.unit_amount > b.unit_amount ? 1 : -1));
+    if (plans) {
+      return plans.sort((a, b) => (a.unit_amount > b.unit_amount ? 1 : -1));
+    }
   },
 
   didInsertElement() {
diff --git a/test/javascripts/components/payment-plan-test.js.es6 b/test/javascripts/components/payment-plan-test.js.es6
index 8da2f2c4..0bd3973b 100644
--- a/test/javascripts/components/payment-plan-test.js.es6
+++ b/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"
     );
   },