add billing to confirm dialog

README.md

@@ -41,8 +41,7 @@ Many thanks to Chris Beach and Angus McLeod who helped on the previous version o
 ## TODOs
 
 * Add a description/message
-* Check against other themes
-* Add billing info to confirm dialog
+* Check against other themes (works ok with light and dark)
 * Validate the model properly. Not in the stripe component
 * Show the transaction on the thank you page.
 * Work out where to put the helper tests. Name collision!

assets/javascripts/discourse/templates/components/donation-form.hbs

@@ -2,17 +2,36 @@
 {{#if confirmation}}
   {{#d-modal closeModal=(action "closeModal") modalStyle="inline-modal" title=(i18n "discourse_patrons.payment.payment_confirmation")}}
     {{#d-modal-body}}
-      <table class="discourse-patrons-confirmation">
-        <tr>
-          <td>{{i18n 'discourse_patrons.confirmation.amount'}}</td>
-          <td class="discourse-donations-amount">{{format-curency amount}}</td>
-        </tr>
-        <tr>
-          <td>{{i18n 'discourse_patrons.confirmation.last4'}}</td>
-          <td class="discourse-patrons-last4">.... .... .... {{last4}}</td>
-        </tr>
-      </table>
-
+      <div class="discourse-patrons-section-columns">
+        <div class="section-column">
+          <table class="discourse-patrons-confirmation">
+            <tr>
+              <td>{{i18n 'discourse_patrons.billing.name'}}</td>
+              <td>{{billing.email}}</td>
+            </tr>
+            <tr>
+              <td>{{i18n 'discourse_patrons.billing.email'}}</td>
+              <td>{{billing.email}}</td>
+            </tr>
+            <tr>
+              <td>{{i18n 'discourse_patrons.billing.phone'}}</td>
+              <td>{{billing.phone}}</td>
+            </tr>
+          </table>
+        </div>
+        <div class="section-column">
+          <table class="discourse-patrons-confirmation">
+            <tr>
+              <td>{{i18n 'discourse_patrons.confirmation.amount'}}</td>
+              <td class="discourse-donations-amount">{{format-curency amount}}</td>
+            </tr>
+            <tr>
+              <td>{{i18n 'discourse_patrons.confirmation.last4'}}</td>
+              <td class="discourse-patrons-last4">.... .... .... {{last4}}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
     {{/d-modal-body}}
 
     <div class='modal-footer'>
@@ -30,7 +49,7 @@
   {{/if}}
 
 {{else}}
-  <div class="discourse-patrons-section-columns">
+  <div class="discourse-patrons-section-columns discourse-patrons-payment-details">
     <div class="section-column">
       <h3>{{i18n 'discourse_patrons.payment.your_information'}}</h3>
 

assets/stylesheets/common/discourse-patrons.scss

@@ -47,11 +47,14 @@
   padding: 20px 0;
 }
 
+.discourse-patrons-payment-details {
+  border: 1px $primary-low-mid solid;
+  background-color: $primary-low;
+}
+
 .discourse-patrons-section-columns {
   margin: 20px;
   padding: 20px;
-  border: 1px $primary-low-mid solid;
-  background-color: $primary-low;
 
   .discourse-patrons-billing {
     .ember-text-field {

test/javascripts/components/stripe-card-test.js.es6

@@ -3,7 +3,7 @@ import componentTest from "helpers/component-test";
 moduleForComponent("stripe-card", { integration: true });
 
 componentTest("Discourse Patrons stripe card success", {
-  template: `{{stripe-card handleConfirmStripeCard=onSubmit}}`,
+  template: `{{stripe-card handleConfirmStripeCard=onSubmit billing=billing}}`,
 
   beforeEach() {
     window.Stripe = () => {
@@ -26,6 +26,15 @@ componentTest("Discourse Patrons stripe card success", {
         }
       };
     };
+
+    this.set(
+      "billing",
+      Ember.Object.create({
+        name: "",
+        email: "",
+        phone: ""
+      })
+    );
   },
 
   async test(assert) {