diff --git a/app/styles/layout/_forms.scss b/app/styles/layout/_forms.scss index 06b410f51..6d790df63 100644 --- a/app/styles/layout/_forms.scss +++ b/app/styles/layout/_forms.scss @@ -147,7 +147,7 @@ form { .error { color: $red; - margin: 5px; + margin: 5px 0; } .login-form, .signup-form, .reset-password-form, .forgot-password-form { diff --git a/app/templates/components/payments/funds-recipient/verification-document.hbs b/app/templates/components/payments/funds-recipient/verification-document.hbs index 94e498615..740bcf8db 100644 --- a/app/templates/components/payments/funds-recipient/verification-document.hbs +++ b/app/templates/components/payments/funds-recipient/verification-document.hbs @@ -1,4 +1,4 @@ -{{#if (eq status 'required')}} +{{#if (or (eq status 'required') (eq status 'errored'))}} {{#if isBusy}}

Processing...

{{else if isUploading}} @@ -6,7 +6,7 @@ {{else}}

We need you to upload a copy of your personal ID to verify your identity.

Please upload either a PNG or JPG image. Your file should be less than 8MB.

-
+

{{payments/funds-recipient/identity-document-file-upload isBusy=isBusy stripeConnectAccount=stripeConnectAccount @@ -15,7 +15,10 @@ uploadDone=(action onUploadDone) uploadError=(action onUploadError) validationError=(action onValidationError)}} -

+

+ {{#if (eq status 'errored')}} +

Stripe was unable to verify your identity with the document you provided. Please try again.

+ {{/if}} {{#if error}}
{{error}}
{{/if}} diff --git a/tests/integration/components/payments/funds-recipient/verification-document-test.js b/tests/integration/components/payments/funds-recipient/verification-document-test.js index 105c5f248..6a7843c4e 100644 --- a/tests/integration/components/payments/funds-recipient/verification-document-test.js +++ b/tests/integration/components/payments/funds-recipient/verification-document-test.js @@ -86,7 +86,17 @@ test('it shows errors if any', function(assert) { renderPage(); - assert.equal(page.errorText, 'Lorem ipsum', 'Error is rendered'); + assert.equal(page.error.text, 'Lorem ipsum', 'Error is rendered'); +}); + +test('it renders Stripe error correctly', function(assert) { + assert.expect(2); + this.set('stripeConnectAccount', { verificationDocumentStatus: 'errored' }); + + renderPage(); + + assert.ok(page.error.isVisible, 'Error is rendered'); + assert.ok(page.rendersFileUpload, 'File upload subcomponent is rendered'); }); // TODO: Figure out how to write these diff --git a/tests/pages/components/payments/funds-recipient/verification-document.js b/tests/pages/components/payments/funds-recipient/verification-document.js index d2d18dfd4..e6a8d6896 100644 --- a/tests/pages/components/payments/funds-recipient/verification-document.js +++ b/tests/pages/components/payments/funds-recipient/verification-document.js @@ -1,14 +1,19 @@ import Ember from 'ember'; -import { clickable, isVisible, text } from 'ember-cli-page-object'; +import { clickable, isVisible } from 'ember-cli-page-object'; const { $, run } = Ember; export default { scope: '.verification-document', - errorText: text('.error'), - rendersFileUpload: isVisible('input[type=file]'), + clickSubmit: clickable('button'), + error: { + scope: '.error' + }, + + rendersFileUpload: isVisible('input[type=file]'), + // since it's near impossible to simulate selecting a file with a filepicker // this does the "next best" thing and triggers the "upload done" action on the component triggerDocumentSubmitted(context, stripeFileId = 'fil_test') { @@ -20,4 +25,3 @@ export default { }); } }; -