From 7f84cee940d816e3c94a318e6fad9ab63bb69753 Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Tue, 16 Feb 2021 12:07:53 -0600
Subject: [PATCH] UX: Improve usability of purchase page (#54)

Commit does 3 things:

    Remove the duplicative currency abbreviation in favor of the currency symbol alone
    Reorders plans by the cost in ascending order.
    Fixes a flexbox button bug
---
 .../discourse/components/payment-options.js.es6           | 8 ++++++++
 .../javascripts/discourse/helpers/format-currency.js.es6  | 2 +-
 .../discourse/templates/components/payment-options.hbs    | 2 +-
 assets/stylesheets/common/subscribe.scss                  | 1 +
 test/javascripts/components/payment-plan-test.js.es6      | 2 +-
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/assets/javascripts/discourse/components/payment-options.js.es6 b/assets/javascripts/discourse/components/payment-options.js.es6
index b39beb3..d555752 100644
--- a/assets/javascripts/discourse/components/payment-options.js.es6
+++ b/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) {
diff --git a/assets/javascripts/discourse/helpers/format-currency.js.es6 b/assets/javascripts/discourse/helpers/format-currency.js.es6
index 1c0d2e6..a4b637c 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 62552fa..8e2d6c2 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 c571235..82480a2 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;
diff --git a/test/javascripts/components/payment-plan-test.js.es6 b/test/javascripts/components/payment-plan-test.js.es6
index 8da2f2c..0bd3973 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"
     );
   },