add the basic form

assets/javascripts/discourse/components/donation-form.es6

@@ -1 +1,35 @@
-export default Ember.Component.extend({});
+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/templates/components/donation-form.hbs

@@ -1,2 +1,10 @@
-
-hello world
+<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>
+</form>

test/javascripts/components/donation-form-test.es6

@@ -2,10 +2,13 @@ import componentTest from "helpers/component-test";
 
 moduleForComponent("donation-form", { integration: true });
 
-componentTest("donation form", {
+componentTest("donation form has content", {
   template: `{{donation-form}}`,
 
-  test(assert) {
-    assert.ok(true);
+  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');
   }
 });