payments/funds recipient/personal id number component

app/components/payments/funds-recipient/personal-id-number.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+const {
+  Component,
+  computed: { alias }
+} = Ember;
+
+export default Component.extend({
+  classNames: ['personal-id-number'],
+  status: alias('stripeConnectAccount.personalIdNumberStatus')
+});

app/components/payments/funds-recipient/verification-document.js

@@ -5,6 +5,7 @@ const {
   computed,
   get,
   set
+
 } = Ember;
 
 const VALIDATION_ERROR = 'The file you selected is invalid. Only .jpg and .png images of up to 8mb in size are supported.';

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

@@ -10,11 +10,11 @@ const {
   setProperties
 } = Ember;
 
-const ACCOUNT_ADDING_ERROR = 'There was a problem submitting your bank account information.';
-const ACCOUNT_TOKEN_CREATION_ERROR = 'There was a problem in using your bank account information. Please check your input and try again.';
-const STRIPE_ACCOUNT_CREATION_ERROR = 'There was a problem with creating your account. Please check your input and try again.';
-const STRIPE_RECIPIENT_DETAILS_UPDATE_ERROR = 'There was a problem with your account information. Please check your input and try again.';
-const VERIFICATION_DOCUMENT_ERROR = 'There was a problem in attaching the verification document to your stripe account';
+const ACCOUNT_CREATION_ERROR = 'There was a problem with creating your account. Please check your input and try again.';
+const ACCOUNT_UPDATE_ERROR = 'There was a problem with your account information. Please check your input and try again.';
+const BANK_ACCOUNT_TOKEN_CREATION_ERROR = 'There was a problem in using your bank account information. Please check your input and try again.';
+const BANK_ACCOUNT_ADDING_ERROR = 'There was a problem submitting your bank account information.';
+const VERIFICATION_DOCUMENT_ERROR = 'There was a problem with attaching your document. Please try again.';
 
 export default Controller.extend({
   currentUser: service(),
@@ -63,24 +63,24 @@ export default Controller.extend({
         .finally(() => set(this, 'isBusy', false));
     },
 
-    onPersonalIdNumberSubmitted() {
-      console.log(arguments);
+    onPersonalIdNumberSubmitted(personalIdNumber) {
+      set(this, 'isBusy', true);
+
+      get(this, 'stripeConnectAccount')
+        .then((account) => this._assignPersonalIdNumber(account, personalIdNumber))
+        .catch((response) => this._handleError(response))
+        .finally(() => set(this, 'isBusy', false));
     }
   },
 
   // creating account
 
   _createStripeAccount(organization, country) {
     return get(this, 'store')
-            .createRecord('stripe-connect-account', { organization, country })
-            .save()
-            .then((account) => RSVP.resolve(account))
-            .catch((reason) => this._handleAccountCreationError(reason));
-  },
-
-  _handleAccountCreationError() {
-    let friendlyError = new FriendlyError(STRIPE_ACCOUNT_CREATION_ERROR);
-    return RSVP.reject(friendlyError);
+      .createRecord('stripe-connect-account', { organization, country })
+      .save()
+      .then(RSVP.resolve)
+      .catch(() => this._wrapError(ACCOUNT_CREATION_ERROR));
   },
 
   // udating recipient info
@@ -89,29 +89,31 @@ export default Controller.extend({
     setProperties(stripeConnectAccount, recipientDetails);
 
     return stripeConnectAccount
-            .save()
-            .then((account) => RSVP.resolve(account))
-            .catch((reason) => this._handleRecipientDetailsUpdateError(reason));
-  },
-
-  _handleRecipientDetailsUpdateError() {
-    let friendlyError = new FriendlyError(STRIPE_RECIPIENT_DETAILS_UPDATE_ERROR);
-    return RSVP.reject(friendlyError);
+      .save()
+      .then(RSVP.resolve)
+      .catch(() => this._handleRecipientDetailsUpdateError(ACCOUNT_UPDATE_ERROR));
   },
 
   // uploading and assigning an id verification document
 
-  _assignIdentityVerificationDocument(account, stripeFileUploadId) {
-    set(account, 'identityDocumentId', stripeFileUploadId);
+  _assignIdentityVerificationDocument(stripeConnectAccount, stripeFileUploadId) {
+    set(stripeConnectAccount, 'identityDocumentId', stripeFileUploadId);
 
-    return account.save()
-                  .then((account) => RSVP.resolve(account))
-                  .catch((reason) => this._handleIdentityVerificationDocumentError(reason));
+    return stripeConnectAccount
+      .save()
+      .then(RSVP.resolve)
+      .catch(() => this._wrapError(VERIFICATION_DOCUMENT_ERROR));
   },
 
-  _handleIdentityVerificationDocumentError() {
-    let friendlyError = new FriendlyError(VERIFICATION_DOCUMENT_ERROR);
-    return RSVP.reject(friendlyError);
+  // assigning a personal id number
+
+  _assignPersonalIdNumber(stripeConnectAccount, personalIdNumber) {
+    set(stripeConnectAccount, 'personalIdNumber', personalIdNumber);
+
+    return stripeConnectAccount
+      .save()
+      .then(RSVP.resolve)
+      .catch(() => this._wrapError(ACCOUNT_UPDATE_ERROR));
   },
 
   // bank account - token step
@@ -122,7 +124,7 @@ export default Controller.extend({
 
     return stripe.bankAccount.createToken(params)
                       .then((stripeResponse) => RSVP.resolve(stripeResponse))
-                      .catch((reason) => this._handleBankAccountTokenError(reason));
+                      .catch(() => this._wrapError(BANK_ACCOUNT_TOKEN_CREATION_ERROR));
   },
 
   _bankAccountTokenParams(accountNumber, routingNumber) {
@@ -135,23 +137,21 @@ export default Controller.extend({
     };
   },
 
-  _handleBankAccountTokenError() {
-    let friendlyError = new FriendlyError(ACCOUNT_TOKEN_CREATION_ERROR);
-    return RSVP.reject(friendlyError);
-  },
-
   // bank account - updating connect account record step
 
   _addBankAccount(tokenData, stripeConnectAccount) {
     set(stripeConnectAccount, 'externalAccount', tokenData.id);
 
-    return stripeConnectAccount.save()
-            .then((stripeConnectAccount) => RSVP.resolve(stripeConnectAccount))
-            .catch((reason) => this._handleAddBankAccountError(reason));
+    return stripeConnectAccount
+      .save()
+      .then(RSVP.resolve)
+      .catch(() => this._wrapError(BANK_ACCOUNT_ADDING_ERROR));
   },
 
-  _handleAddBankAccountError() {
-    let friendlyError = new FriendlyError(ACCOUNT_ADDING_ERROR);
+  // friendly error wrapping
+
+  _wrapError(message) {
+    let friendlyError = new FriendlyError(message);
     return RSVP.reject(friendlyError);
   },
 

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

@@ -14,9 +14,10 @@
     isBusy=isBusy
     onVerificationDocumentSubmitted=(action onVerificationDocumentSubmitted)
     stripeConnectAccount=stripeConnectAccount}}
-  <section class="personal-id-number">
-    TODO: personal-id-number component goes here
-  </section>
+  {{payments/funds-recipient/personal-id-number
+    isBusy=isBusy
+    stripeConnectAccount=stripeConnectAccount
+    submit=(action onPersonalIdNumberSubmitted)}}
 {{/if}}
 
 {{#if (eq status 'verified')}}

app/templates/components/payments/funds-recipient/personal-id-number.hbs

@@ -0,0 +1,16 @@
+{{#if (eq status 'required')}}
+  <div class="input-section">
+    <div class="input-section__label">We need your full personal ID number</div>
+    <div class="input-section__content">
+      <div class="input-group">
+        <label for="personal-id-number">Personal ID Number</label>
+        {{input type="text" name="personal-id-number" value=personalIdNumber disabled=isBusy}}
+      </div>
+    </div>
+  </div>
+  <button {{action submit personalIdNumber}} disabled={{isBusy}} class="default">Submit</button>
+{{/if}}
+
+{{#if (eq status 'verifying')}}
+  We're verifying your ID number
+{{/if}}

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

@@ -1,4 +1,3 @@
-
 {{#if (eq status 'required')}}
   {{#if isBusy}}
     Processing...
@@ -23,4 +22,4 @@
 {{/if}}
 {{#if (eq status 'verifying')}}
   Please be patient while we review the document you provided.
-{{/if}}
+{{/if}}

tests/integration/components/payments/funds-recipient-test.js

@@ -7,10 +7,7 @@ import fundsRecipientComponent from '../../../pages/components/payments/funds-re
 
 let page = PageObject.create(fundsRecipientComponent);
 
-const {
-  setProperties,
-  K
-} = Ember;
+const { setProperties, K } = Ember;
 
 function setHandlers(context, { detailsHandler = K, documentHandler = K, idHandler = K }) {
   setProperties(context, { detailsHandler, documentHandler, idHandler });
@@ -61,7 +58,7 @@ test('it renders correctly when "required"', function(assert) {
   assert.ok(page.rendersDetailsForm, 'Component renders the details form subcomponent.');
 });
 
-test('it renders correctly when "verifying"', function(assert) {
+test('it renders correctly when "verifying" and document status "required"', function(assert) {
   assert.expect(3);
 
   let stripeConnectAccount = { recipientStatus: 'verifying' };
@@ -107,30 +104,52 @@ test('it renders correctly when "verified" for business', function(assert) {
   assert.ok(page.businessNameText, 'Company Inc.', 'Component renders the name of the registered business.');
 });
 
-// TODO: These need to be implemented once subcomponents are done and pass out actions
-// test('it passes out submit action from details subcomponent', function(assert) {
-//   assert.expect(1);
+test('it passes out submit action from details subcomponent', function(assert) {
+  assert.expect(1);
 
-//   let stripeConnectAccount = { recipientStatus: 'required' };
-//   this.set('stripeConnectAccount', stripeConnectAccount);
+  let stripeConnectAccount = { recipientStatus: 'required' };
+  this.set('stripeConnectAccount', stripeConnectAccount);
 
-//   renderPage();
-// });
+  function detailsHandler() {
+    assert.ok(true, 'Action got called');
+  }
+  setHandlers(this, { detailsHandler });
+
+  renderPage();
+
+  page.detailsForm.clickSubmit();
+});
+
+// TODO: Get this working
 
 // test('it passes out submit action from document upload subcomponent', function(assert) {
 //   assert.expect(1);
 
-//   let stripeConnectAccount = { recipientStatus: 'verifying' };
+//   let stripeConnectAccount = { recipientStatus: 'verifying', verificationDocumentStatus: 'required' };
 //   this.set('stripeConnectAccount', stripeConnectAccount);
 
+//   function documentHandler() {
+//     assert.ok(true, 'Action got called');
+//   };
+//   setHandlers(this, { documentHandler });
+
 //   renderPage();
+
+//   page.verificationDocument.pickFile(this);
 // });
 
-// test('it passes out submit action from personal id number subcomponent', function(assert) {
-//   assert.expect(1);
+test('it passes out submit action from personal id number subcomponent', function(assert) {
+  assert.expect(1);
 
-//   let stripeConnectAccount = { recipientStatus: 'verifying' };
-//   this.set('stripeConnectAccount', stripeConnectAccount);
+  let stripeConnectAccount = { recipientStatus: 'verifying', personalIdNumberStatus: 'required' };
+  this.set('stripeConnectAccount', stripeConnectAccount);
 
-//   renderPage();
-// });
+  function idHandler() {
+    assert.ok(true, 'Action got called');
+  }
+  setHandlers(this, { idHandler });
+
+  renderPage();
+
+  page.personalIdNumber.clickSubmit();
+});