Template, styles and behavior for bank-account component

app/components/payments/bank-account.js

@@ -1,9 +1,21 @@
 import Ember from 'ember';
 
 const {
-  Component
+  Component,
+  computed,
+  get
 } = Ember;
 
 export default Component.extend({
-  classNames: ['bank-account']
+  classNameBindings: ['statusClass'],
+  classNames: ['bank-account', 'account-setup__section'],
+
+  accountNumber: '000123456789',
+  routingNumber: '110000000',
+
+  status: computed.alias('account.bankAccountStatus'),
+
+  statusClass: computed('status', function() {
+    return `account-setup__section--${get(this, 'status')}`;
+  })
 });

app/controllers/project/settings/donations/payments.js

@@ -1,17 +1,26 @@
 import Ember from 'ember';
+import FriendlyError from 'code-corps-ember/utils/friendly-error';
+
 const {
   computed: { alias },
   Controller,
   get,
   inject: { service },
-  merge
+  merge,
+  RSVP,
+  set
 } = Ember;
 
+const ACCOUNT_TOKEN_CREATION_ERROR = 'There was a problem in using your bank account information. Please check your input and try again.';
+const ACCOUNT_ADDING_ERROR = 'There was a problem in attaching the provided bank account information to your Stripe account.';
+
 export default Controller.extend({
   currentUser: service(),
   store: service(),
+  stripe: service(),
 
   user: alias('currentUser.user'),
+  stripeConnectAccount: alias('project.organization.stripeConnectAccount'),
 
   actions: {
     onRecipientInformationSubmitted(organization, email, recipientInformation) {
@@ -20,8 +29,63 @@ export default Controller.extend({
                         .save();
     },
 
-    onBankAccountInformationSubmitted(/* bankAccountInformation */) {
-      // TODO: Handle receiving bank account information
+    onBankAccountInformationSubmitted({ accountNumber, routingNumber }) {
+      set(this, 'isBusy', true);
+
+      let promises = {
+        tokenData: this._createAccountToken(accountNumber, routingNumber),
+        stripeConnectAccount: get(this, 'stripeConnectAccount')
+      };
+
+      RSVP.hash(promises)
+          .then(({ tokenData, stripeConnectAccount }) => this._addBankAccount(tokenData, stripeConnectAccount))
+          .catch((response) => this._handleError(response))
+          .finally(() => set(this, 'isBusy', false));
     }
+  },
+
+  // adding bank account information
+
+  _createAccountToken(accountNumber, routingNumber) {
+    let stripe = get(this, 'stripe');
+    let params = this._bankAccountTokenParams(accountNumber, routingNumber);
+
+    return stripe.bankAccount.createToken(params)
+                      .then((stripeResponse) => RSVP.resolve(stripeResponse))
+                      .catch((reason) => this._handleBankAccountTokenError(reason));
+  },
+
+  _handleBankAccountTokenError() {
+    let friendlyError = new FriendlyError(ACCOUNT_TOKEN_CREATION_ERROR);
+    return RSVP.reject(friendlyError);
+  },
+
+  _addBankAccount(tokenData, stripeConnectAccount) {
+    set(stripeConnectAccount, 'externalAccount', tokenData.id);
+
+    return stripeConnectAccount.save()
+            .then((stripeConnectAccount) => RSVP.resolve(stripeConnectAccount))
+            .catch((reason) => this._handleAddBankAccountError(reason));
+  },
+
+  _handleAddBankAccountError() {
+    let friendlyError = new FriendlyError(ACCOUNT_ADDING_ERROR);
+    return RSVP.reject(friendlyError);
+  },
+
+  _bankAccountTokenParams(accountNumber, routingNumber) {
+    return {
+      account_number: accountNumber,
+      routing_number: routingNumber,
+      object: 'bank_account',
+      country: 'US',
+      currency: 'USD'
+    };
+  },
+
+  // setting error property
+
+  _handleError(error) {
+    this.set('error', error);
   }
 });

app/styles/_colors.scss

@@ -71,10 +71,11 @@ $taskTypeTextOnBackgroundColors: (
 
 $light-red-background: #FFE5E1;
 $light-blue-background: #EDF9FF;
+$light-green-background: #EFFFEE;
 
 $idea-background: #FFF9DE;
 $issue-background: $light-red-background;
-$progress-background: #EFFFEE;
+$progress-background: $light-green-background;
 $task-background: $light-blue-background;
 
 $taskTypeBackgrounds: (

app/styles/_icons.scss

@@ -15,7 +15,7 @@ $spritePath: '/assets/images/icons/sprite';
 $spriteURL: $spritePath + '.png';
 $spritex2URL: $spritePath + '@2x.png';
 $sprite-bgiSizeW: 230px;
-$sprite-bgiSizeH: 304px;
+$sprite-bgiSizeH: 324px;
 $logo: 230px 50px $spriteURL 0px 0px $spritex2URL;
 $logo-small: 161px 35px $spriteURL 0px -50px $spritex2URL;
 $location: 16px 16px $spriteURL 0px -85px $spritex2URL;
@@ -59,6 +59,7 @@ $calendar: 20px 20px $spriteURL -42px -268px $spritex2URL;
 $task-small: 16px 16px $spriteURL 0px -288px $spritex2URL;
 $issue-small: 16px 16px $spriteURL -16px -288px $spritex2URL;
 $idea-small: 16px 16px $spriteURL -32px -288px $spritex2URL;
+$tick-green-large: 20px 20px $spriteURL 0px -304px $spritex2URL;
 
 .box-icon {
   @include sprite($box);

app/styles/app.scss

@@ -50,6 +50,8 @@
 @import "components/navigation-menu";
 @import "components/organization-header";
 @import "components/organization-members";
+@import "components/payments/account-setup";
+@import "components/payments/bank-account";
 @import "components/pager-control";
 @import "components/task-card";
 @import "components/task-comment-list";

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

@@ -0,0 +1,55 @@
+//
+// ACCOUNT SETUP SECTIONS
+//
+.account-setup__section {
+  align-items: center;
+  background-color: #FCFCFC;
+  border: 1px solid #DDD;
+  border-radius: 4px;
+  display: flex;
+  min-height: 4em;
+  padding: 1.5em;
+
+  aside {
+    @include span-columns(3);
+    align-self: baseline;
+  }
+
+  h1 {
+    font-size: 1.1em;
+    font-weight: normal;
+    margin: 0;
+  }
+
+  label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: .3em;
+  }
+
+  section {
+    @include span-columns(9);
+  }
+}
+
+//
+// STATES
+//
+.account-setup__section--required {
+  @include outer-container;
+}
+
+.account-setup__section--verified {
+  background-color: $light-green-background;
+  border-color: $green;
+
+  aside h1:before {
+    content: "";
+    display: block;
+    float: left;
+    height: 20px;
+    margin: 0 10px 0 0;
+    width: 24px;
+    @include sprite($tick-green-large);
+  }
+}

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

@@ -0,0 +1,10 @@
+//
+// ACCOUNT INFORMATION
+//
+.bank-account__account {
+	@extend .input-group;
+}
+
+.bank-account__routing {
+	@extend .input-group;
+}

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

@@ -1,18 +1,9 @@
 <h3>Create a Stripe account for {{organizationName}}</h3>
 
-{{!
-  TODO:
-  Account setup should decide if it should render the "form"
-  for each section, or a "done" component for that particular data.
-
-  Possibly, even, the payments controller should decide and then
-  pass in flags to the account setup, but that might be overkill.
-}}
 {{payments/contact-info email=email}}
 
 {{payments/funds-recipient
   fundsRecipient=fundsRecipient
   recipientInformationSubmitted=(action onRecipientInformationSubmitted email)}}
 
-{{payments/bank-account
-  bankAccountInformationSubmitted=(action onBankAccountInformationSubmitted)}}
+{{payments/bank-account account=account isBusy=isBusy submit=(action onBankAccountInformationSubmitted)}}

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

@@ -1,12 +1,30 @@
-<div class="input-group">
-  <label for="routing-number">Routing Number</label>
-  {{input type="text" name="routing-number" value=routingNumber}}
-</div>
-<div class="input-group">
-  <label for="account-number">Account Number</label>
-  {{input type="text" name="account-number" value=accountNumber}}
-</div>
+<aside>
+  <h1>Bank Account</h1>
+</aside>
 
-<button {{action (action bankAccountInformationSubmitted (hash accountNumber=accountNumber routingNumber=routingNumber))}}>
-  Submit
-</button>
+{{#if (eq status 'required')}}
+  <section>
+    <div class="bank-account__routing">
+      <label for="routing-number">Routing Number</label>
+      {{input disabled=isBusy type="text" name="routing-number" value=routingNumber}}
+    </div>
+    <div class="bank-account__account">
+      <label for="account-number">Account Number</label>
+      {{input disabled=isBusy type="text" name="account-number" value=accountNumber}}
+    </div>
+    <button {{action submit (hash accountNumber=accountNumber routingNumber=routingNumber)}} disabled={{isBusy}} class="default">Submit</button>
+  </section>
+{{/if}}
+
+{{#if (eq status 'verified')}}
+  <section>
+    <div class="bank-account__routing">
+      <label>Routing Number</label>
+      <p>{{account.bankAccountRoutingNumber}}</p>
+    </div>
+    <div class="bank-account__account">
+      <label>Account Number</label>
+      <p>{{account.bankAccountLast4}}</p>
+    </div>
+  </section>
+{{/if}}

app/templates/components/project-settings-menu.hbs

@@ -5,10 +5,10 @@
         {{link-to "Contributors" "project.settings.contributors" project.slug}}
       </li>
       <li>
-        {{link-to "Donations" "project.settings.donations.goals" project.slug}}
+        {{link-to "Donation goals" "project.settings.donations.goals" project.slug}}
       </li>
       <li>
-        {{link-to "Payments" "project.settings.donations.payments" project.slug}}
+        {{link-to "Payment settings" "project.settings.donations.payments" project.slug}}
       </li>
       <li>
         {{link-to "Basic settings" "project.settings.profile" project.slug}}

app/templates/project/settings/donations/payments.hbs

@@ -1,6 +1,10 @@
 {{payments/account-setup
-  email=user.email
+  account=project.organization.stripeConnectAccount
+  isBusy=isBusy
   onBankAccountInformationSubmitted=(action 'onBankAccountInformationSubmitted')
   onRecipientInformationSubmitted=(action 'onRecipientInformationSubmitted' project.organization)
   organizationName=project.organization.name
 }}
+{{#if error}}
+  {{error-formatter error=error}}
+{{/if}}