From e2cec16b99003d5a6aabd9ad1b90e7ee9d6aae28 Mon Sep 17 00:00:00 2001
From: Rimian Perkins <hello@rimian.com.au>
Date: Thu, 12 Sep 2019 16:16:38 +1000
Subject: [PATCH] forms and settings

---
 .../templates/components/donation-form.hbs    | 39 ++++++++++---------
 .../templates/components/stripe-card.hbs      | 25 ++++++------
 .../discourse/templates/patrons/index.hbs     |  6 +--
 .../discourse/templates/patrons/show.hbs      |  6 +--
 .../stylesheets/common/discourse-patrons.scss | 10 +++++
 config/locales/client.en.yml                  | 17 ++++----
 6 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/assets/javascripts/discourse/templates/components/donation-form.hbs b/assets/javascripts/discourse/templates/components/donation-form.hbs
index 68b05a9..1320583 100644
--- a/assets/javascripts/discourse/templates/components/donation-form.hbs
+++ b/assets/javascripts/discourse/templates/components/donation-form.hbs
@@ -16,7 +16,7 @@
     {{/d-modal-body}}
 
     <div class='modal-footer'>
-      {{#d-button action="confirmStripeCard" class="btn btn-primary btn-payment"}}
+      {{#d-button action="confirmStripeCard" class="btn btn-primary btn-payment btn-discourse-patrons"}}
         {{i18n 'discourse_patrons.submit'}} {{amount}}
       {{/d-button}}
     </div>
@@ -35,15 +35,6 @@
       <h3>{{i18n 'discourse_patrons.your_information'}}</h3>
 
       <div class="user-controls discource-patrons-fields">
-        <div class="display-row">
-          <div class="field">
-            {{i18n 'discourse_patrons.amount'}}
-            {{siteSettings.discourse_patrons_currency}}
-          </div>
-          <div class="value">
-            {{combo-box valueAttribute="value" content=amounts value=amount}}
-          </div>
-        </div>
         <div class="display-row">
           <div class="field">
             {{i18n 'discourse_patrons.billing.name'}}
@@ -57,7 +48,7 @@
             {{i18n 'discourse_patrons.billing.email'}}
           </div>
           <div class="value">
-            {{input value=billing.email}}
+            {{input type="email" value=billing.email}}
           </div>
         </div>
         <div class="display-row">
@@ -72,14 +63,26 @@
 
     </div>
     <div class="section-column">
-      <div style>
-        {{stripe-card
-          amount=amount
-          currency=currency
-          billing=billing
-          handleConfirmStripeCard=(action "handleConfirmStripeCard")
-        }}
+      <h3>{{i18n 'discourse_patrons.payment_information'}}</h3>
+
+      <div class="user-controls discource-patrons-fields">
+        <div class="display-row">
+          <div class="field">
+            {{i18n 'discourse_patrons.amount'}}
+            {{siteSettings.discourse_patrons_currency}}
+          </div>
+          <div class="value">
+            {{combo-box valueAttribute="value" content=amounts value=amount}}
+          </div>
+        </div>
       </div>
+
+      {{stripe-card
+        amount=amount
+        currency=currency
+        billing=billing
+        handleConfirmStripeCard=(action "handleConfirmStripeCard")
+      }}
     </div>
   </div>
 {{/if}}
diff --git a/assets/javascripts/discourse/templates/components/stripe-card.hbs b/assets/javascripts/discourse/templates/components/stripe-card.hbs
index ec23080..beaa64e 100644
--- a/assets/javascripts/discourse/templates/components/stripe-card.hbs
+++ b/assets/javascripts/discourse/templates/components/stripe-card.hbs
@@ -1,16 +1,15 @@
 
-<h3>{{i18n 'discourse_patrons.payment_information'}}</h3>
+<div id="stripe-elements">
+  <div id="card-element"></div>
+  <div id="card-action">
+    {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment btn-discourse-patrons"}}
+      {{i18n 'discourse_patrons.confirm'}}{{amount}}
+    {{/d-button}}
 
-<div id="card-element"></div>
-
-<div id="card-action">
-  {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment"}}
-    {{i18n 'discourse_patrons.confirm'}}<br>{{amount}}
-  {{/d-button}}
-
-  {{#if cardError}}
-    <div class="popup-tip bad">
-      {{cardError}}
-    </div>
-  {{/if}}
+    {{#if cardError}}
+      <div class="popup-tip bad">
+        {{cardError}}
+      </div>
+    {{/if}}
+  </div>
 </div>
diff --git a/assets/javascripts/discourse/templates/patrons/index.hbs b/assets/javascripts/discourse/templates/patrons/index.hbs
index 329520a..f131386 100644
--- a/assets/javascripts/discourse/templates/patrons/index.hbs
+++ b/assets/javascripts/discourse/templates/patrons/index.hbs
@@ -1,9 +1,9 @@
 
-<h3>{{i18n 'discourse_patrons.title' site_name=siteSettings.title}}</h3>
+<h3>{{i18n 'discourse_patrons.heading.payment' site_name=siteSettings.title}}</h3>
 
-<div class="donations-page-description">
+<p>
   {{cook-text siteSettings.discourse_patrons_payment_page}}
-</div>
+</p>
 
 <div class="donations-page-payment">
   {{donation-form
diff --git a/assets/javascripts/discourse/templates/patrons/show.hbs b/assets/javascripts/discourse/templates/patrons/show.hbs
index dad802b..10eef59 100644
--- a/assets/javascripts/discourse/templates/patrons/show.hbs
+++ b/assets/javascripts/discourse/templates/patrons/show.hbs
@@ -1,10 +1,10 @@
 
 
-<h3>{{i18n 'discourse_patrons.title' site_name=siteSettings.title}}</h3>
+<h3>{{i18n 'discourse_patrons.heading.success' site_name=siteSettings.title}}</h3>
 
-<div class="donations-page-description">
+<p>
   {{cook-text siteSettings.discourse_patrons_success_page}}
-</div>
+</p>
 
 {{#d-button action="goBack" class="btn btn-primary"}}
   {{i18n 'discourse_patrons.button.success'}}
diff --git a/assets/stylesheets/common/discourse-patrons.scss b/assets/stylesheets/common/discourse-patrons.scss
index 5cd1b36..cfc9546 100644
--- a/assets/stylesheets/common/discourse-patrons.scss
+++ b/assets/stylesheets/common/discourse-patrons.scss
@@ -32,6 +32,11 @@
   }
 }
 
+#stripe-elements {
+  border: 1px $primary-low-mid solid;
+  padding: 10px;
+}
+
 #card-element {
   padding: 20px 0;
 }
@@ -60,3 +65,8 @@
     padding: 10px;
   }
 }
+
+.btn-discourse-patrons {
+  white-space: nowrap;
+  border: 1px blue solid;
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 4522540..82800d0 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -10,17 +10,16 @@ en:
     discourse_patrons_success_page: "Text to be added to success page. Markdown is supported."
     discourse_patrons_reward_badge_name: "Grant this badge to user when a payment is successful"
     errors:
-      discourse_patrons_amount_must_be_currency: "Currency amounts must be currencies (eg 1.50)"
+      discourse_patrons_amount_must_be_currency: "Currency amounts must be currencies without dollar symbol (eg 1.50)"
   js:
     discourse_patrons:
       nav_item: Payment
-      title: "Make a Payment"
-      amount: Amount $
-      card: Card
-      your_information: Your information
-      payment_information: Credit card information
-      submit: Make payment $
-      confirm: Confirm payment $
+      heading:
+        payment: Make a Payment
+        success: Thank you!
+      payment:
+        your_information: Your information
+        payment_information: Payment information
       billing:
         name: Full name
         email: Email
@@ -29,4 +28,6 @@ en:
         amount: Amount $
         last4: Card number
       buttons:
+        make_payment: Make payment $
+        confirm_payment: Confirm payment $
         success: Go back