diff --git a/app/components/payments/funds-recipient.js b/app/components/payments/funds-recipient.js
index e89b7f7d1..9feaa4e4d 100644
--- a/app/components/payments/funds-recipient.js
+++ b/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);
},
diff --git a/app/components/select/birth-date.js b/app/components/select/birth-date.js
new file mode 100644
index 000000000..c518a3493
--- /dev/null
+++ b/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()
+});
diff --git a/app/templates/components/payments/funds-recipient.hbs b/app/templates/components/payments/funds-recipient.hbs
index 1dbafcdfd..a6c55bea3 100644
--- a/app/templates/components/payments/funds-recipient.hbs
+++ b/app/templates/components/payments/funds-recipient.hbs
@@ -7,16 +7,6 @@
{{#if (eq recipientType 'company')}}
-
-
-
-
{{input type="text" name="business-name" value=businessName}}
@@ -39,10 +29,8 @@
{{input type="text" name="last-name" value=lastName}}
-
+ {{dobMonth}} {{dobDay}} {{dobYear}}
+ {{select/birth-date day=dobDay month=dobMonth year=dobYear}}
- {{! TODO: Make a proper select dropdown}}
-
@@ -81,4 +67,4 @@
{{input type="text" name="ssn-last4" value=ssnLast4}}
-
\ No newline at end of file
+
diff --git a/app/templates/components/select/birth-date.hbs b/app/templates/components/select/birth-date.hbs
new file mode 100644
index 000000000..0d7ec12f7
--- /dev/null
+++ b/app/templates/components/select/birth-date.hbs
@@ -0,0 +1,22 @@
+
+
+ {{#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}}
+
diff --git a/package.json b/package.json
index 2ebf2dd5f..87e06eaec 100644
--- a/package.json
+++ b/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"
diff --git a/tests/integration/components/select/birth-date-test.js b/tests/integration/components/select/birth-date-test.js
new file mode 100644
index 000000000..4a9250dfe
--- /dev/null
+++ b/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);
+});
diff --git a/tests/pages/components/select/birth-date.js b/tests/pages/components/select/birth-date.js
new file mode 100644
index 000000000..acaba9951
--- /dev/null
+++ b/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()
+ }
+};
diff --git a/tests/test-helper.js b/tests/test-helper.js
index f9ddf8d69..de2c3f63f 100644
--- a/tests/test-helper.js
+++ b/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 {