Add bank account bank name

app/models/stripe-connect-account.js

@@ -4,6 +4,9 @@ import { belongsTo } from 'ember-data/relationships';
 
 export default Model.extend({
   bankAccountStatus: attr(),
+  bankAccountBankName: attr(),
+  bankAccountLast4: attr(),
+  bankAccountRoutingNumber: attr(),
   businessName: attr(),
   businessUrl: attr(),
   canAcceptDonations: attr(),

app/styles/components/payments/bank-account.scss

@@ -5,6 +5,10 @@
 	@extend .input-group;
 }
 
+.bank-account__bank-name {
+	@extend .input-group;
+}
+
 .bank-account__routing {
 	@extend .input-group;
 }

app/templates/components/payments/bank-account.hbs

@@ -18,6 +18,10 @@
 
 {{#if (eq status 'verified')}}
   <section>
+    <div class="bank-account__bank-name">
+      <label>Bank Name</label>
+      <p>{{stripeConnectAccount.bankAccountBankName}}</p>
+    </div>
     <div class="bank-account__routing">
       <label>Routing Number</label>
       <p>{{stripeConnectAccount.bankAccountRoutingNumber}}</p>

tests/integration/components/payments/bank-account-test.js

@@ -54,22 +54,28 @@ test('it renders correctly for "required" status', function(assert) {
   renderPage();
 
   assert.ok(page.rendersRequired, 'Component is rendered in required mode.');
-  assert.ok(page.rendersAccountNumberField, 'Component renders the account number field.');
-  assert.ok(page.rendersRoutingNumberField, 'Component renders the routing number field.');
-  assert.ok(page.rendersSubmitButton, 'Component renders the submit button.');
+  assert.ok(page.rendersAccountNumberField, 'Renders the account number field.');
+  assert.ok(page.rendersRoutingNumberField, 'Renders the routing number field.');
+  assert.ok(page.rendersSubmitButton, 'Renders the submit button.');
 });
 
 test('it renders correctly for "verified" status', function(assert) {
-  assert.expect(3);
+  assert.expect(4);
 
-  let stripeConnectAccount = { bankAccountLast4: 4321, bankAccountRoutingNumber: 123456, bankAccountStatus: 'verified' };
+  let stripeConnectAccount = {
+    bankAccountBankName: 'Wells Fargo',
+    bankAccountLast4: 4321,
+    bankAccountRoutingNumber: 123456,
+    bankAccountStatus: 'verified'
+  };
   set(this, 'stripeConnectAccount', stripeConnectAccount);
 
   renderPage();
 
   assert.ok(page.rendersVerified, 'Component is rendered in verified mode.');
-  assert.equal(page.accountLast4Text, 4321, 'Component renders last 4 digits of account number.');
-  assert.equal(page.routingNumberText, 123456, 'Component renders routing number.');
+  assert.equal(page.bankNameText, 'Wells Fargo', 'Renders bank account name.');
+  assert.equal(page.accountLast4Text, 4321, 'Renders last 4 digits of account number.');
+  assert.equal(page.routingNumberText, 123456, 'Renders routing number.');
 });
 
 test('it sends properties with submit action', function(assert) {

tests/pages/components/payments/bank-account.js

@@ -12,6 +12,7 @@ export default {
   rendersSubmitButton:isVisible('button'),
 
   accountLast4Text: text('.bank-account__account p'),
+  bankNameText: text('.bank-account__bank-name p'),
   routingNumberText: text('.bank-account__routing p'),
 
   accountNumber: fillable('[name=account-number]'),

tests/unit/models/stripe-connect-account-test.js

@@ -13,6 +13,9 @@ test('it exists', function(assert) {
 
 testForAttributes('stripe-connect-account', [
   'bankAccountStatus',
+  'bankAccountBankName',
+  'bankAccountLast4',
+  'bankAccountRoutingNumber',
   'businessName',
   'businessUrl',
   'canAcceptDonations',