From 8d8e9f9ad15e076f60e61fcf25b90a08fe3aa8b3 Mon Sep 17 00:00:00 2001
From: Rimian Perkins <hello@rimian.com.au>
Date: Wed, 28 Aug 2019 14:59:45 +1000
Subject: [PATCH] abstract out the stripe component for easy future testing

---
 README.md                                     |  12 +-
 .../discourse/components/donation-form.es6    |  32 ---
 .../discourse/components/stripe-card.js.es6   |   1 +
 .../discourse/controllers/donate.js.es6       |   4 +
 .../templates/components/donation-form.hbs    |  13 +-
 .../templates/components/stripe-card.hbs      | 194 +++++++++---------
 .../discourse/templates/donate.hbs            |  33 +--
 .../components/donation-form-test.es6         |  10 +-
 .../components/donation-row-test.js.es6       |   8 +-
 9 files changed, 120 insertions(+), 187 deletions(-)

diff --git a/README.md b/README.md
index 0cdb751..048d6de 100644
--- a/README.md
+++ b/README.md
@@ -28,17 +28,9 @@ Accept donations from visitors to your [Discourse](https://www.discourse.org/) f
 
 ## Testing
 
-* To run the rails specs, install the plugin and run `bundle exec rake plugin:spec[discourse-donations]` in the discourse root directory.
-* To run qunit tests: `MODULE='Acceptance: Discourse Donations' bundle exec rake qunit:test[20000]`.
-* To run Component tests: `MODULE='component:stripe-card' bundle exec rake qunit:test[20000]`.
+These commands should run:
 
-**Note:**
-
-* If you're using a zsh shell, then you probably get this error: `zsh: no matches found ...` and you'll need to escape the square brackets with backslashes.
-
-## TODO
-
-* Handle custom fields
+* ```yarn prettier --list-different 'assets/**/*.scss' '**/*.es6'```
 
 ## Tested Credit Card Numbers
 
diff --git a/assets/javascripts/discourse/components/donation-form.es6 b/assets/javascripts/discourse/components/donation-form.es6
index 4e8c1c3..bedeb36 100644
--- a/assets/javascripts/discourse/components/donation-form.es6
+++ b/assets/javascripts/discourse/components/donation-form.es6
@@ -1,35 +1,3 @@
-import { default as computed } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
-  @computed
-  causes() {
-    const categoryEnabled =
-      Discourse.SiteSettings.discourse_donations_cause_category;
-
-    if (categoryEnabled) {
-      let categoryIds = Discourse.SiteSettings.discourse_donations_causes_categories.split(
-        "|"
-      );
-
-      if (categoryIds.length) {
-        categoryIds = categoryIds.map(Number);
-        return this.site
-          .get("categoriesList")
-          .filter(c => {
-            return categoryIds.indexOf(c.id) > -1;
-          })
-          .map(c => {
-            return {
-              id: c.id,
-              name: c.name
-            };
-          });
-      } else {
-        return [];
-      }
-    } else {
-      const causes = Discourse.SiteSettings.discourse_donations_causes;
-      return causes ? causes.split("|") : [];
-    }
-  }
 });
diff --git a/assets/javascripts/discourse/components/stripe-card.js.es6 b/assets/javascripts/discourse/components/stripe-card.js.es6
index abc9af1..25a1ac8 100644
--- a/assets/javascripts/discourse/components/stripe-card.js.es6
+++ b/assets/javascripts/discourse/components/stripe-card.js.es6
@@ -265,6 +265,7 @@ export default Ember.Component.extend({
                 self.concatMessages(result.messages);
 
                 self.endTranscation();
+                self.onCompleteTransation();
               });
             }
           }
diff --git a/assets/javascripts/discourse/controllers/donate.js.es6 b/assets/javascripts/discourse/controllers/donate.js.es6
index e2c7f63..c6d7fde 100644
--- a/assets/javascripts/discourse/controllers/donate.js.es6
+++ b/assets/javascripts/discourse/controllers/donate.js.es6
@@ -22,6 +22,10 @@ export default Ember.Controller.extend({
   },
 
   actions: {
+    stripeTransationCompleteCtr() {
+      console.log('done!');
+    },
+
     loadDonations() {
       let email = this.get("email");
 
diff --git a/assets/javascripts/discourse/templates/components/donation-form.hbs b/assets/javascripts/discourse/templates/components/donation-form.hbs
index c105263..2449ad2 100644
--- a/assets/javascripts/discourse/templates/components/donation-form.hbs
+++ b/assets/javascripts/discourse/templates/components/donation-form.hbs
@@ -1,10 +1,9 @@
 <form id="payment-form" class="form-horizontal">
-  <div class="control-group discourse-donations-cause">
-    <label class="control-label">
-      {{i18n 'discourse_donations.cause.label'}}
-    </label>
-    <div class="controls controls-dropdown">
-      {{combo-box content=causes value=cause none='discourse_donations.cause.placeholder'}}
-    </div>
+  <div class="donations-page-payment">
+    {{stripe-card
+      charges=charges
+      subscriptions=subscriptions
+      onCompleteTransation=onCompleteTransation
+    }}
   </div>
 </form>
diff --git a/assets/javascripts/discourse/templates/components/stripe-card.hbs b/assets/javascripts/discourse/templates/components/stripe-card.hbs
index 34e5f43..a682436 100644
--- a/assets/javascripts/discourse/templates/components/stripe-card.hbs
+++ b/assets/javascripts/discourse/templates/components/stripe-card.hbs
@@ -1,128 +1,118 @@
-<form id="payment-form" class="form-horizontal">
-  <div class="control-group discourse-donations-cause">
-    <label class="control-label">
-      {{i18n 'discourse_donations.cause.label'}}
-    </label>
-    <div class="controls controls-dropdown">
-      {{combo-box content=causes value=cause none='discourse_donations.cause.placeholder'}}
+<div class="control-group">
+  <label class="control-label">
+    {{i18n 'discourse_donations.type'}}
+  </label>
+  <div class="controls controls-dropdown">
+    {{combo-box content=donationTypes value=type}}
+  </div>
+</div>
+
+<div class="control-group">
+  <label class="control-label" for="card-element">
+    {{i18n 'discourse_donations.amount'}}
+    {{siteSettings.discourse_donations_currency}}
+  </label>
+  <div class="controls controls-dropdown">
+    {{combo-box valueAttribute="value" content=donateAmounts value=amount}}
+  </div>
+</div>
+
+{{#if siteSettings.discourse_donations_enable_transaction_fee}}
+  <div class="control-group">
+    <div class="controls">
+      {{input type="checkbox" checked=includeTransactionFee}}
+      <span>{{i18n 'discourse_donations.transaction_fee.label' transactionFee=transactionFee currency=siteSettings.discourse_donations_currency}}</span>
+      <div class='transaction-fee-description' {{action 'toggleTransactionFeeDescription'}}>
+        {{d-icon 'info-circle'}}
+        {{#if showTransactionFeeDescription}}
+          <div class="transaction-fee-description-modal">
+            {{i18n 'discourse_donations.transaction_fee.description'}}
+          </div>
+        {{/if}}
+      </div>
     </div>
   </div>
 
   <div class="control-group">
-    <label class="control-label">
-      {{i18n 'discourse_donations.type'}}
+    <label class='control-label'>
+      {{i18n 'discourse_donations.transaction_fee.total'}}
     </label>
-    <div class="controls controls-dropdown">
-      {{combo-box content=donationTypes value=type}}
-    </div>
-  </div>
-
-  <div class="control-group">
-    <label class="control-label" for="card-element">
-      {{i18n 'discourse_donations.amount'}}
+    <div class="controls">
       {{siteSettings.discourse_donations_currency}}
-    </label>
-    <div class="controls controls-dropdown">
-      {{combo-box valueAttribute="value" content=donateAmounts value=amount}}
+      {{totalAmount}}
+      {{period}}
+    </div>
+  </div>
+{{/if}}
+
+<div class="control-group" style="width: 550px;">
+  <label class="control-label" for="card-element">{{i18n 'discourse_donations.card'}}</label>
+  <div class="controls">
+    <div id="card-element"></div>
+    {{#if stripeError}}
+      <div class="stripe-error">{{stripeError}}</div>
+    {{/if}}
+  </div>
+</div>
+
+{{#unless currentUser}}
+  <div class="control-group">
+    <label class="control-label" for="card-element">{{i18n 'user.email.title'}}</label>
+    <div class="controls">
+      {{text-field value=email}}
+      {{#if showEmailError}}
+        <div class="error">{{i18n 'user.email.invalid'}}</div>
+      {{else}}
+        <div class="instructions">{{i18n 'discourse_donations.email_instructions'}}</div>
+      {{/if}}
     </div>
   </div>
 
-  {{#if siteSettings.discourse_donations_enable_transaction_fee}}
+  {{#if create_accounts}}
     <div class="control-group">
+      <label class="control-label" for="card-element">{{i18n 'user.username.title'}}</label>
       <div class="controls">
-        {{input type="checkbox" checked=includeTransactionFee}}
-        <span>{{i18n 'discourse_donations.transaction_fee.label' transactionFee=transactionFee currency=siteSettings.discourse_donations_currency}}</span>
-        <div class='transaction-fee-description' {{action 'toggleTransactionFeeDescription'}}>
-          {{d-icon 'info-circle'}}
-          {{#if showTransactionFeeDescription}}
-            <div class="transaction-fee-description-modal">
-              {{i18n 'discourse_donations.transaction_fee.description'}}
-            </div>
-          {{/if}}
-        </div>
+        {{text-field value=username}}
       </div>
     </div>
 
     <div class="control-group">
-      <label class='control-label'>
-        {{i18n 'discourse_donations.transaction_fee.total'}}
-      </label>
+      <label class="control-label" for="card-element">{{i18n 'user.name.title'}}</label>
       <div class="controls">
-        {{siteSettings.discourse_donations_currency}}
-        {{totalAmount}}
-        {{period}}
+        {{text-field value=name}}
+      </div>
+    </div>
+
+    <div class="control-group">
+      <label class="control-label" for="card-element">{{i18n 'user.password.title'}}</label>
+      <div class="controls">
+        {{input type="password" value=password}}
       </div>
     </div>
   {{/if}}
+{{/unless}}
 
-  <div class="control-group" style="width: 550px;">
-    <label class="control-label" for="card-element">{{i18n 'discourse_donations.card'}}</label>
-    <div class="controls">
-      <div id="card-element"></div>
-      {{#if stripeError}}
-        <div class="stripe-error">{{stripeError}}</div>
+<div class="control-group save-button">
+  <div class="controls">
+
+    {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment"}}
+      {{#if create_accounts}}
+        {{i18n 'discourse_donations.submit_with_create_account'}}
+      {{else}}
+        {{i18n 'discourse_donations.submit'}}
       {{/if}}
-    </div>
-  </div>
+    {{/d-button}}
 
-  {{#unless currentUser}}
-    <div class="control-group">
-      <label class="control-label" for="card-element">{{i18n 'user.email.title'}}</label>
-      <div class="controls">
-        {{text-field value=email}}
-        {{#if showEmailError}}
-          <div class="error">{{i18n 'user.email.invalid'}}</div>
-        {{else}}
-          <div class="instructions">{{i18n 'discourse_donations.email_instructions'}}</div>
-        {{/if}}
-      </div>
-    </div>
-
-    {{#if create_accounts}}
-      <div class="control-group">
-        <label class="control-label" for="card-element">{{i18n 'user.username.title'}}</label>
-        <div class="controls">
-          {{text-field value=username}}
-        </div>
-      </div>
-
-      <div class="control-group">
-        <label class="control-label" for="card-element">{{i18n 'user.name.title'}}</label>
-        <div class="controls">
-          {{text-field value=name}}
-        </div>
-      </div>
-
-      <div class="control-group">
-        <label class="control-label" for="card-element">{{i18n 'user.password.title'}}</label>
-        <div class="controls">
-          {{input type="password" value=password}}
-        </div>
-      </div>
+    {{#if transactionInProgress}}
+      {{loading-spinner size="small"}}
     {{/if}}
-  {{/unless}}
 
-  <div class="control-group save-button">
-    <div class="controls">
-      {{#d-button action="submitStripeCard" disabled=disableSubmit class="btn btn-primary btn-payment"}}
-        {{#if create_accounts}}
-          {{i18n 'discourse_donations.submit_with_create_account'}}
-        {{else}}
-          {{i18n 'discourse_donations.submit'}}
-        {{/if}}
-      {{/d-button}}
+    {{#each result as |message|}}
+      <p>{{{message}}}</p>
+    {{/each}}
 
-      {{#if transactionInProgress}}
-        {{loading-spinner size="small"}}
-      {{/if}}
-
-      {{#each result as |message|}}
-        <p>{{{message}}}</p>
-      {{/each}}
-
-      {{#if success}}
-        <p>{{i18n 'discourse_donations.messages.success'}}</p>
-      {{/if}}
-    </div>
+    {{#if success}}
+      <p>{{i18n 'discourse_donations.messages.success'}}</p>
+    {{/if}}
   </div>
-</form>
+</div>
diff --git a/assets/javascripts/discourse/templates/donate.hbs b/assets/javascripts/discourse/templates/donate.hbs
index c639b0c..cddcda4 100644
--- a/assets/javascripts/discourse/templates/donate.hbs
+++ b/assets/javascripts/discourse/templates/donate.hbs
@@ -5,32 +5,9 @@
 </div>
 
 <div class="donations-page-payment">
-  {{stripe-card charges=charges subscriptions=subscriptions}}
-</div>
-
-<div class="donations-page-donations">
-  <h3>{{i18n 'discourse_donations.donations.title'}}</h3>
-  {{#if loadingDonations}}
-    <span>{{i18n 'discourse_donations.donations.loading'}}</span>
-    {{loading-spinner size='small'}}
-  {{else}}
-    {{#if currentUser}}
-      {{#if hasDonations}}
-        {{donation-list charges=charges subscriptions=subscriptions customer=customer}}
-      {{else}}
-        {{i18n 'discourse_donations.donations.none'}}
-      {{/if}}
-    {{else}}
-      {{#if hasDonations}}
-        {{donation-list charges=charges subscriptions=subscriptions customer=customer}}
-      {{else}}
-        {{#if hasEmailResult}}
-          {{i18n 'discourse_donations.donations.none_email' email=email}}
-        {{else}}
-          {{input value=email placeholder=(i18n 'email')}}
-          {{d-button action='loadDonations' label='discourse_donations.donations.load' disabled=loadDonationsDisabled}}
-        {{/if}}
-      {{/if}}
-    {{/if}}
-  {{/if}}
+  {{donation-form
+    charges=charges
+    subscriptions=subscriptions
+    onCompleteTransation=(action "stripeTransationCompleteCtr")
+  }}
 </div>
diff --git a/test/javascripts/components/donation-form-test.es6 b/test/javascripts/components/donation-form-test.es6
index f2ffa49..7ec0bf6 100644
--- a/test/javascripts/components/donation-form-test.es6
+++ b/test/javascripts/components/donation-form-test.es6
@@ -5,10 +5,12 @@ moduleForComponent("donation-form", { integration: true });
 componentTest("donation form has content", {
   template: `{{donation-form}}`,
 
+  beforeEach() {
+    this.registry.register('component:stripe-card', Ember.Component.extend({ tagName: 'dummy-component-tag' }));
+  },
+
   async test(assert) {
-    assert.ok(find('#payment-form').length, 'The form renders');
-    assert.equal(find('.discourse-donations-cause .selected-name')
-      .text()
-      .trim(), 'Select a cause', 'It has the combo box');
+    assert.ok(find('#payment-form').length, "The form renders");
+    assert.ok(find('dummy-component-tag').length, "The stripe component renders");
   }
 });
diff --git a/test/javascripts/components/donation-row-test.js.es6 b/test/javascripts/components/donation-row-test.js.es6
index 46479f1..4f462fd 100644
--- a/test/javascripts/components/donation-row-test.js.es6
+++ b/test/javascripts/components/donation-row-test.js.es6
@@ -6,9 +6,9 @@ componentTest("donation-row", {
   template: `{{donation-row currency=3 amount=21 period='monthly'}}`,
 
   test(assert) {
-    assert.equal(find(".donation-row-currency").text(), "3");
-    assert.equal(find(".donation-row-amount").text(), "21");
-    assert.equal(find(".donation-row-period").text(), "monthly");
+    assert.equal(find(".donation-row-currency").text(), "3", "It has currency");
+    assert.equal(find(".donation-row-amount").text(), "21", "It has an amount");
+    assert.equal(find(".donation-row-period").text(), "monthly", "It has a period");
   }
 });
 
@@ -21,6 +21,6 @@ componentTest("donation-row cancels subscription", {
   },
 
   async test(assert) {
-    assert.ok(find(".donation-row-subscription").length);
+    assert.ok(find(".donation-row-subscription").length, "It has a subscription");
   }
 });