From 9e39c4fbaa488b3999b1898a1e2a2df3497a02ee Mon Sep 17 00:00:00 2001
From: Nikola Begedin <begedinnikola@gmail.com>
Date: Thu, 1 Dec 2016 14:05:30 +0100
Subject: [PATCH 1/2] Wrap donation container form/card list in a busy
 indicator Remove setting of unused "isSubmitting" property

---
 app/components/donation/credit-card.js        |  1 -
 app/styles/app.scss                           |  1 +
 .../donation/donation-container.scss          | 10 +++++++
 .../donation/donation-container.hbs           | 28 +++++++++++--------
 4 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 app/styles/components/donation/donation-container.scss

diff --git a/app/components/donation/credit-card.js b/app/components/donation/credit-card.js
index 6e63db185..29fddad5c 100644
--- a/app/components/donation/credit-card.js
+++ b/app/components/donation/credit-card.js
@@ -81,7 +81,6 @@ export default Component.extend({
 
   actions: {
     submit() {
-      this.set('isSubmitting', true);
       let cardAttrs = this.getProperties('cvc', 'cardNumber', 'year', 'month');
       let onSubmit = this.get('submit');
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 51adbcd7e..2583f44cc 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -36,6 +36,7 @@
 @import "components/comment-item";
 @import "components/create-comment-form";
 @import "components/donation/card-item";
+@import "components/donation/donation-container";
 @import "components/donations/donation-progress";
 @import "components/donations/donation-status";
 @import "components/donation-goal";
diff --git a/app/styles/components/donation/donation-container.scss b/app/styles/components/donation/donation-container.scss
new file mode 100644
index 000000000..62ee4be01
--- /dev/null
+++ b/app/styles/components/donation/donation-container.scss
@@ -0,0 +1,10 @@
+.donation-container {
+  .loading-indicator {
+    text-align: center;
+
+    div {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}
diff --git a/app/templates/components/donation/donation-container.hbs b/app/templates/components/donation/donation-container.hbs
index 458dd032a..31c53a1d3 100644
--- a/app/templates/components/donation/donation-container.hbs
+++ b/app/templates/components/donation/donation-container.hbs
@@ -11,21 +11,27 @@
   </p>
 </div>
 
-{{#if card}}
-  {{donation/card-item card=card}}
+{{#if isBusy}}
+  <div class="loading-indicator">
+    <div class="spinner small"></div>
+    <div>Processing...</div>
+  </div>
 {{else}}
-  {{#donation/credit-card isBusy=isBusy submit=(action saveAndDonate)}}
+  {{#if card}}
+    {{donation/card-item card=card}}
+  {{else}}
+    {{#donation/credit-card isBusy=isBusy submit=(action saveAndDonate)}}
+      {{!show errors}}
+      {{yield}}
+    {{/donation/credit-card}}
+  {{/if}}
+
+  {{#if card}}
+    <button class="button {{unless isBusy "default"}} large donate" {{action donate}} disabled={{isBusy}}>Donate</button>
     {{!show errors}}
     {{yield}}
-  {{/donation/credit-card}}
-{{/if}}
-
-{{#if card}}
-  <button class="button {{unless isBusy "default"}} large donate" {{action donate}} disabled={{isBusy}}>Donate</button>
-  {{!show errors}}
-  {{yield}}
+  {{/if}}
 {{/if}}
-
 <footer>
   Your donation will repeat automatically each month.
   You can cancel or edit your donation at any time.

From 260044fad2533d666810c6bae8f347fcb22bc2ca Mon Sep 17 00:00:00 2001
From: Nikola Begedin <begedinnikola@gmail.com>
Date: Thu, 1 Dec 2016 14:30:17 +0100
Subject: [PATCH 2/2] Remove unused code

---
 app/components/donation/credit-card.js          |  6 ++----
 .../components/donation/credit-card.hbs         | 16 ++++++----------
 .../components/donation/donation-container.hbs  |  4 ++--
 .../components/donation/credit-card-test.js     | 17 -----------------
 4 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/app/components/donation/credit-card.js b/app/components/donation/credit-card.js
index 29fddad5c..192bd33ef 100644
--- a/app/components/donation/credit-card.js
+++ b/app/components/donation/credit-card.js
@@ -3,7 +3,7 @@ import Ember from 'ember';
 const {
   Component,
   computed,
-  computed: { and, not, or },
+  computed: { and, not },
   inject: { service }
 } = Ember;
 
@@ -20,10 +20,8 @@ export default Component.extend({
    */
   stripe: service(),
 
-  cardInvalid: not('cardValid'),
   cardValid: and('isCardNumberValid', 'isCVCValid', 'isExpiryValid'),
-
-  isBusyOrInvalid: or('isBusy', 'cardInvalid'),
+  isInvalid: not('cardValid'),
 
   date: computed('month', 'year', function() {
     let month = this.get('month');
diff --git a/app/templates/components/donation/credit-card.hbs b/app/templates/components/donation/credit-card.hbs
index 9f781a467..2f931ff7a 100644
--- a/app/templates/components/donation/credit-card.hbs
+++ b/app/templates/components/donation/credit-card.hbs
@@ -17,7 +17,6 @@
 </div>
 
 <div class="input-group">
-
   <div class="row">
     <label>
       <span>Expiration</span>
@@ -40,14 +39,11 @@
   </div>
 </div>
 
-<button
-  class="button {{unless isBusyOrInvalid "default"}} large submit-card"
-  disabled={{isBusyOrInvalid}}
-  {{action "submit"}}>
-  {{#if isBusy}}Processing...{{else}}Donate{{/if}}
+<button class="button {{unless isInvalid "default"}} large submit-card" disabled={{isInvalid}} {{action "submit"}}>
+  Donate
 </button>
 
-{{#unless isBusy}}
-  {{!validation errors can be passed in from parent, using a block}}
-  {{yield}}
-{{/unless}}
+
+{{!validation errors can be passed in from parent, using a block}}
+{{yield}}
+
diff --git a/app/templates/components/donation/donation-container.hbs b/app/templates/components/donation/donation-container.hbs
index 31c53a1d3..0af816eae 100644
--- a/app/templates/components/donation/donation-container.hbs
+++ b/app/templates/components/donation/donation-container.hbs
@@ -20,14 +20,14 @@
   {{#if card}}
     {{donation/card-item card=card}}
   {{else}}
-    {{#donation/credit-card isBusy=isBusy submit=(action saveAndDonate)}}
+    {{#donation/credit-card submit=(action saveAndDonate)}}
       {{!show errors}}
       {{yield}}
     {{/donation/credit-card}}
   {{/if}}
 
   {{#if card}}
-    <button class="button {{unless isBusy "default"}} large donate" {{action donate}} disabled={{isBusy}}>Donate</button>
+    <button class="button default large donate" {{action donate}}>Donate</button>
     {{!show errors}}
     {{yield}}
   {{/if}}
diff --git a/tests/integration/components/donation/credit-card-test.js b/tests/integration/components/donation/credit-card-test.js
index c9b1cd899..9829063d4 100644
--- a/tests/integration/components/donation/credit-card-test.js
+++ b/tests/integration/components/donation/credit-card-test.js
@@ -57,23 +57,6 @@ test('it sends submit with credit card fields when button is clicked', function(
   page.clickSubmit();
 });
 
-test('it renders button as disabled and "Processing" when busy', function(assert) {
-  assert.expect(2);
-
-  stubService(this, 'stripe', {
-    card: {
-      validateCardNumber: () => true,
-      validateCVC: () => true,
-      validateExpiry: () => true
-    }
-  });
-
-  page.render(hbs`{{donation/credit-card isBusy=true submit=submitHandler}}`);
-
-  assert.ok(page.submitDisabled, 'Submit button is disabled');
-  assert.equal(page.submitButtonText, 'Processing...', 'Submit button changed text');
-});
-
 test('it renders button as disabled and "Donate" when card is invalid', function(assert) {
   assert.expect(2);