update state drop

app/components/select/state-select.js

@@ -0,0 +1,65 @@
+import Ember from 'ember';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  classNames: ['select-state'],
+  // Supported states/territories:
+  // https://support.stripe.com/questions/can-i-use-stripe-if-my-business-is-based-in-an-outlying-territory-of-a-supported
+  stateOptions: [
+    { name: 'Alabama', id: 'AL' },
+    { name: 'Alaska', id: 'AK' },
+    { name: 'Arizona', id: 'AZ' },
+    { name: 'Arkansas', id: 'AR' },
+    { name: 'California', id: 'CA' },
+    { name: 'Colorado', id: 'CO' },
+    { name: 'Connecticut', id: 'CT' },
+    { name: 'Delaware', id: 'DE' },
+    { name: 'District of Columbia', id: 'DC' },
+    { name: 'Florida', id: 'FL' },
+    { name: 'Georgia', id: 'GA' },
+    { name: 'Hawaii', id: 'HI' },
+    { name: 'Idaho', id: 'ID' },
+    { name: 'Illinois', id: 'IL' },
+    { name: 'Indiana', id: 'IN' },
+    { name: 'Iowa', id: 'IA' },
+    { name: 'Kansas', id: 'KS' },
+    { name: 'Kentucky', id: 'KY' },
+    { name: 'Louisiana', id: 'LA' },
+    { name: 'Maine', id: 'ME' },
+    { name: 'Maryland', id: 'MD' },
+    { name: 'Massachusetts', id: 'MA' },
+    { name: 'Michigan', id: 'MI' },
+    { name: 'Minnesota', id: 'MN' },
+    { name: 'Mississippi', id: 'MS' },
+    { name: 'Missouri', id: 'MO' },
+    { name: 'Montana', id: 'MT' },
+    { name: 'Nebraska', id: 'NE' },
+    { name: 'Nevada', id: 'NV' },
+    { name: 'New Hampshire', id: 'NH' },
+    { name: 'New Jersey', id: 'NJ' },
+    { name: 'New Mexico', id: 'NM' },
+    { name: 'New York', id: 'NY' },
+    { name: 'North Carolina', id: 'NC' },
+    { name: 'North Dakota', id: 'ND' },
+    { name: 'Ohio', id: 'OH' },
+    { name: 'Oklahoma', id: 'OK' },
+    { name: 'Oregon', id: 'OR' },
+    { name: 'Pennsylvania', id: 'PA' },
+    { name: 'Puerto Rico', id: 'PR' },
+    { name: 'Rhode Island', id: 'RI' },
+    { name: 'South Carolina', id: 'SC' },
+    { name: 'South Dakota', id: 'SD' },
+    { name: 'Tennessee', id: 'TN' },
+    { name: 'Texas', id: 'TX' },
+    { name: 'Utah', id: 'UT' },
+    { name: 'Vermont', id: 'VT' },
+    { name: 'Virginia', id: 'VA' },
+    { name: 'Washington', id: 'WA' },
+    { name: 'West Virginia', id: 'WV' },
+    { name: 'Wisconsin', id: 'WI' },
+    { name: 'Wyoming', id: 'WY' }
+  ]
+});

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

@@ -46,9 +46,7 @@
   </div>
   <div class="input-group">
     <label for="state">State</label>
-    <select value=state name="state">
-      <option value="CA">California</option>
-    </select>
+    {{select/state-select state=state}}
   </div>
   <div class="input-group">
     <label for="zip">Postal Code</label>

app/templates/components/select/state-select.hbs

@@ -0,0 +1,5 @@
+{{#x-select value=state as |xs| }}
+  {{#each stateOptions as |stateOption|}}
+    {{#xs.option value=stateOption.id}}{{stateOption.name}}{{/xs.option}}
+  {{/each}}
+{{/x-select}}

tests/integration/components/select/country-select-test.js

@@ -17,7 +17,7 @@ moduleForComponent('select/country-select', 'Integration | Component | select/co
     page.setContext(this);
   },
   afterEach() {
-    page.setContext(this);
+    page.removeContext();
   }
 });
 

tests/integration/components/select/state-select-test.js

@@ -0,0 +1,31 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+import selectState from '../../../pages/components/select/state-select';
+import PageObject from 'ember-cli-page-object';
+
+const {
+  get,
+  set
+} = Ember;
+
+let page = PageObject.create(selectState);
+
+moduleForComponent('select/state-select', 'Integration | Component | select/state select', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
+});
+
+test('it sets the correct state', function(assert) {
+  assert.expect(1);
+  set(this, 'state', 'CA');
+  page.render(hbs`{{select/state-select state=state}}`);
+  page.state.fillIn('CA');
+  let state = get(this, 'state');
+  assert.equal(state, 'CA');
+});

tests/pages/components/select/state-select.js

@@ -0,0 +1,12 @@
+import {
+  selectable
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.select-state',
+
+  state: {
+    scope: 'select:eq(0)',
+    fillIn: selectable()
+  }
+};