From ba73e688f2c0c6cf662af1ea811d00702276bb1c Mon Sep 17 00:00:00 2001
From: Rimian Perkins <hello@rimian.com.au>
Date: Thu, 12 Sep 2019 17:47:08 +1000
Subject: [PATCH] validate billing

---
 README.md                                        | 14 ++++++++++++++
 .../discourse/components/stripe-card.js.es6      | 14 +++++++++++++-
 .../templates/components/donation-form.hbs       |  7 +++++--
 assets/stylesheets/common/discourse-patrons.scss | 16 +++++++++++++++-
 config/locales/client.en.yml                     |  1 +
 5 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b3913b8..443caa9 100644
--- a/README.md
+++ b/README.md
@@ -32,3 +32,17 @@ This software comes without warranties or conditions of any kind.
 ## Credits
 
 Many thanks to Chris Beach and Angus McLeod who helped on the previous version of this plugin.
+
+## Known issues
+
+* CSS is mucked up in Safari and probably Firefox too.
+* The phone number isn't sent to Stripe
+
+## TODOs
+
+* Add a description/message
+* Format the currency
+* Check against other themes
+* Add billing info to confirm dialog
+* Validate the model properly. Not in the stripe component
+* Show the transaction on the thank you page.
diff --git a/assets/javascripts/discourse/components/stripe-card.js.es6 b/assets/javascripts/discourse/components/stripe-card.js.es6
index 5b7a3ad..59e8b8d 100644
--- a/assets/javascripts/discourse/components/stripe-card.js.es6
+++ b/assets/javascripts/discourse/components/stripe-card.js.es6
@@ -41,9 +41,21 @@ export default Ember.Component.extend({
     });
   },
 
+  validateBilling() {
+    const billing = this.get('billing');
+    const deleteEmpty = (key) => {
+      if(Ember.isEmpty(billing.get(key))) {
+        billing.set(key, undefined);
+      }
+    }
+    ['name', 'phone', 'email'].forEach((key) => deleteEmpty(key));
+  },
+
   actions: {
     submitStripeCard() {
-      const paymentOptions = { billing_details: this.get("billing") };
+      this.validateBilling();
+
+      const paymentOptions = { billing_details: this.get('billing') };
 
       this.stripe.createPaymentMethod("card", this.card, paymentOptions).then(
         result => {
diff --git a/assets/javascripts/discourse/templates/components/donation-form.hbs b/assets/javascripts/discourse/templates/components/donation-form.hbs
index ab5e592..a34e185 100644
--- a/assets/javascripts/discourse/templates/components/donation-form.hbs
+++ b/assets/javascripts/discourse/templates/components/donation-form.hbs
@@ -34,13 +34,14 @@
     <div class="section-column">
       <h3>{{i18n 'discourse_patrons.payment.your_information'}}</h3>
 
-      <div class="user-controls discource-patrons-fields">
+      <div class="user-controls discourse-patrons-fields discourse-patrons-billing">
         <div class="display-row">
           <div class="field">
             {{i18n 'discourse_patrons.billing.name'}}
           </div>
           <div class="value">
             {{input value=billing.name}}
+            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
           </div>
         </div>
         <div class="display-row">
@@ -49,6 +50,7 @@
           </div>
           <div class="value">
             {{input type="email" value=billing.email}}
+            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
           </div>
         </div>
         <div class="display-row">
@@ -57,6 +59,7 @@
           </div>
           <div class="value">
             {{input value=billing.phone}}
+            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
           </div>
         </div>
       </div>
@@ -65,7 +68,7 @@
     <div class="section-column">
       <h3>{{i18n 'discourse_patrons.payment.payment_information'}}</h3>
 
-      <div class="user-controls discource-patrons-fields">
+      <div class="user-controls discourse-patrons-fields">
         <div class="display-row">
           <div class="field">
             {{i18n 'discourse_patrons.amount'}}
diff --git a/assets/stylesheets/common/discourse-patrons.scss b/assets/stylesheets/common/discourse-patrons.scss
index cfc9546..9467e57 100644
--- a/assets/stylesheets/common/discourse-patrons.scss
+++ b/assets/stylesheets/common/discourse-patrons.scss
@@ -32,6 +32,11 @@
   }
 }
 
+.desc {
+  color: dark-light-choose($primary-medium, $secondary-medium);
+  font-size: 0.8em;
+}
+
 #stripe-elements {
   border: 1px $primary-low-mid solid;
   padding: 10px;
@@ -46,9 +51,18 @@
   padding: 20px;
   border: 1px $primary-low-mid solid;
   background-color: $primary-low;
+
+  .discourse-patrons-billing {
+    .ember-text-field {
+      margin-bottom: 0;
+    }
+    .field {
+      margin-bottom: 10px;
+    }
+  }
 }
 
-.discource-patrons-fields {
+.discourse-patrons-fields {
   .field {
     width: 25%;
   }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 1b629e1..4ca0c14 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -18,6 +18,7 @@ en:
         payment: Make a Payment
         success: Thank you!
       payment:
+        optional: Optional
         your_information: Your information
         payment_information: Payment information
       amount: Amount