abstract out the stripe component for easy future testing

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
 

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("|") : [];
-    }
-  }
 });

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();
               });
             }
           }

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");
 

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>

assets/javascripts/discourse/templates/components/stripe-card.hbs

@@ -1,13 +1,3 @@
-<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>
-
 <div class="control-group">
   <label class="control-label">
     {{i18n 'discourse_donations.type'}}
@@ -104,7 +94,8 @@
 
 <div class="control-group save-button">
   <div class="controls">
-      {{#d-button action="submitStripeCard" disabled=disableSubmit class="btn btn-primary btn-payment"}}
+
+    {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment"}}
       {{#if create_accounts}}
         {{i18n 'discourse_donations.submit_with_create_account'}}
       {{else}}
@@ -125,4 +116,3 @@
     {{/if}}
   </div>
 </div>
-</form>

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>

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");
   }
 });

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");
   }
 });