Add birthdate select

app/components/payments/funds-recipient.js

@@ -10,6 +10,9 @@ export default Component.extend({
 
   init() {
     this.setProperties(get(this, 'fundsRecipient'));
+    set(this, 'dobDay', 1);
+    set(this, 'dobMonth', 1);
+    set(this, 'dobYear', 2016);
     this._super(...arguments);
   },
 
@@ -18,14 +21,6 @@ export default Component.extend({
       set(this, 'businessType', value);
     },
 
-    setDob(value) {
-      let dobDay = value.getDay() + 1;
-      let dobMonth = value.getMonth() + 1;
-      let dobYear = value.getFullYear();
-
-      this.setProperties({ dobDay, dobMonth, dobYear });
-    },
-
     setRecipientType(value) {
       set(this, 'recipientType', value);
     },

app/components/select/birth-date.js

@@ -0,0 +1,38 @@
+import Ember from 'ember';
+import moment from 'moment';
+
+const {
+  Component
+ } = Ember;
+
+export default Component.extend({
+  classNames: ['select-birth-date'],
+
+  monthOptions: function() {
+    return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12].map((i) => {
+      return {
+        number: i,
+        text: moment.months(i - 1)
+      };
+    });
+  }.property(),
+
+  dayOptions: function() {
+    let results = [];
+    for (let i = 1; i <= 31; i++) {
+      results.push(i);
+    }
+    return results;
+  }.property(),
+
+  yearOptions: function() {
+    let thisYear = moment().year();
+    let results = [];
+    return (function() {
+      for (let i = thisYear, ref = thisYear - 120; thisYear <= ref ? i <= ref : i >= ref; thisYear <= ref ? i++ : i--) {
+        results.push(i);
+      }
+      return results;
+    }).apply(this);
+  }.property()
+});

app/templates/components/payments/funds-recipient.hbs

@@ -7,16 +7,6 @@
 </div>
 
 {{#if (eq recipientType 'company')}}
-  <div class="input-group">
-    <label for="business-type">Business Type</label>
-    <select onchange={{action (mut businessType) value="target.value"}} name="business-type" value={{businessType}}>
-      <option value="sole_prop">Sole Proprietorship</option>
-      <option value="corporation">Corporation</option>
-      <option value="non_profit">Nonprofit</option>
-      <option value="partnership">Partnership</option>
-      <option value="llc">LLC</option>
-    </select>
-  </div>
   <div class="input-group">
     <label for="business-name">Business Name</label>
     {{input type="text" name="business-name" value=businessName}}
@@ -39,10 +29,8 @@
   {{input type="text" name="last-name" value=lastName}}
 </div>
 <div class="input-group">
-  <label>
-    Birthday
-    {{pikaday-input format="MM/DD/YYYY" onSelection=(action 'setDob') value=dob}}
-  </label>
+  {{dobMonth}} {{dobDay}} {{dobYear}}
+  {{select/birth-date day=dobDay month=dobMonth year=dobYear}}
 </div>
 <div class="input-group">
   <div class="input-group">
@@ -59,8 +47,7 @@
   </div>
   <div class="input-group">
     <label for="state">State</label>
-    {{! TODO: Make a proper select dropdown}}
-    <select disabled=true value=state name="state">
+    <select value=state name="state">
       <option value="CA">California</option>
     </select>
   </div>
@@ -70,8 +57,7 @@
   </div>
   <div class="input-group">
     <label for="country">Country</label>
-    {{! TODO: Make a proper select dropdown}}
-    <select disabled=true value=country name="country">
+    <select value=country name="country">
       <option value="US">United States</option>
     </select>
   </div>
@@ -81,4 +67,4 @@
   {{input type="text" name="ssn-last4" value=ssnLast4}}
 </div>
 
-<input type="submit" {{action "submit"}} value="Submit information" />
+<input type="submit" {{action "submit"}} value="Submit information" />

app/templates/components/select/birth-date.hbs

@@ -0,0 +1,22 @@
+<label>
+  Birth Date
+</label>
+<div>
+  {{#x-select value=month as |xs|}}
+    {{#each monthOptions as |monthOption|}}
+      {{#xs.option value=monthOption.number}}{{monthOption.text}}{{/xs.option}}
+    {{/each}}
+  {{/x-select}}
+
+  {{#x-select value=day as |xs|}}
+    {{#each dayOptions as |dayOption|}}
+      {{#xs.option value=dayOption}}{{dayOption}}{{/xs.option}}
+    {{/each}}
+  {{/x-select}}
+
+  {{#x-select value=year as |xs|}}
+    {{#each yearOptions as |yearOption|}}
+      {{#xs.option value=yearOption}}{{yearOption}}{{/xs.option}}
+    {{/each}}
+  {{/x-select}}
+</div>

package.json

@@ -77,7 +77,6 @@
     "ember-modal-dialog": "0.8.8",
     "ember-moment": "7.1.0",
     "ember-page-title": "^3.0.10",
-    "ember-pikaday": "2.2.0",
     "ember-resolver": "^2.0.3",
     "ember-route-action-helper": "^2.0.0",
     "ember-simple-auth": "1.1.0",
@@ -88,6 +87,7 @@
     "ember-tooltips": "2.5.0",
     "ember-truth-helpers": "1.2.0",
     "ember-typed": "0.1.3",
+    "emberx-select": "2.2.2",
     "eslint-plugin-ember-suave": "^1.0.0",
     "loader.js": "^4.0.10",
     "phantomjs": "^1.9.20"

tests/integration/components/select/birth-date-test.js

@@ -0,0 +1,44 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import selectBirthDate from '../../../pages/components/select/birth-date';
+import PageObject from 'ember-cli-page-object';
+
+let page = PageObject.create(selectBirthDate);
+
+moduleForComponent('select/birth-date', 'Integration | Component | select/birth date', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('it sets the month strings correctly', function(assert) {
+  assert.expect(1);
+  page.render(hbs`{{select/birth-date}}`);
+  assert.equal(page.month.text, 'January February March April May June July August September October December');
+});
+
+test('it sets to the correct date', function(assert) {
+  assert.expect(3);
+
+  this.set('month', 1);
+  this.set('day', 1);
+  this.set('year', 2016);
+
+  page.render(hbs`{{select/birth-date month=month day=day year=year}}`);
+
+  page.month.fillIn('4');
+  page.day.fillIn('13');
+  page.year.fillIn('1970');
+
+  let month = this.get('month');
+  let day = this.get('day');
+  let year = this.get('year');
+
+  assert.equal(month, 4);
+  assert.equal(day, 13);
+  assert.equal(year, 1970);
+});

tests/pages/components/select/birth-date.js

@@ -0,0 +1,20 @@
+import {
+  selectable
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.select-birth-date',
+
+  month: {
+    scope: 'select:eq(0)',
+    fillIn: selectable()
+  },
+  day: {
+    scope: 'select:eq(1)',
+    fillIn: selectable()
+  },
+  year: {
+    scope: 'select:eq(2)',
+    fillIn: selectable()
+  }
+};

tests/test-helper.js

@@ -1,4 +1,6 @@
 import resolver from './helpers/resolver';
+import registerSelectHelper from './helpers/register-select-helper';
+registerSelectHelper();
 import './helpers/flash-message';
 
 import {