From 254383371decf5c52d921e66fb1c60be32bbfb34 Mon Sep 17 00:00:00 2001
From: snewcomer24 <snewcomer24@gmail.com>
Date: Mon, 18 Dec 2017 21:56:47 -0800
Subject: [PATCH] rearrange error setter close #22

---
 README.md                                         | 12 ++++++------
 addon/components/stripe-element.js                | 11 ++++++-----
 addon/templates/components/stripe-card-cvc.hbs    |  2 +-
 addon/templates/components/stripe-card-expiry.hbs |  2 +-
 addon/templates/components/stripe-card-number.hbs |  2 +-
 addon/templates/components/stripe-card.hbs        |  2 +-
 addon/templates/components/stripe-postal-code.hbs |  2 +-
 tests/dummy/app/templates/application.hbs         |  6 +++---
 tests/integration/components/stripe-card-test.js  | 11 +++++++++++
 9 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 04c5273..74b2211 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,7 @@ Every component will:
 The components bubble up all of [the JavaScript events that can be handled by the Stripe Element in `element.on()`](https://stripe.com/docs/elements/reference#element-on) from the Ember component using the following actions:
 
 - `blur`
-- `change` (also sets/unsets the `error` property on the component, which can be yielded with the block)
+- `change` (also sets/unsets the `stripeError` property on the component, which can be yielded with the block)
 - `focus`
 
 You could handle these actions yourself, for example:
@@ -119,14 +119,14 @@ This addon gives you components that match the different [Element types](https:/
 
 ### Block usage with `options`
 
-In addition to the simple usage above, like `{{stripe-card}}`, you can also yield to a block, which will yield both an `error` object and [the `stripeElement` itself](https://stripe.com/docs/elements/reference#the-element).
+In addition to the simple usage above, like `{{stripe-card}}`, you can also yield to a block, which will yield both an `stripeError` object and [the `stripeElement` itself](https://stripe.com/docs/elements/reference#the-element).
 
-For example, you can choose to render out the `error`, as below (runnable in our dummy app).
+For example, you can choose to render out the `stripeError`, as below (runnable in our dummy app).
 
 ```hbs
-{{#stripe-card options=options as |stripeElement error|}}
-  {{#if error}}
-    <p class="error">{{error.message}}</p>
+{{#stripe-card options=options as |stripeElement stripeError|}}
+  {{#if stripeError}}
+    <p class="error">{{stripeError.message}}</p>
   {{/if}}
   <button {{action "submit" stripeElement}}>Submit</button>
   {{#if token}}
diff --git a/addon/components/stripe-element.js b/addon/components/stripe-element.js
index 7ac0bf2..e294f65 100644
--- a/addon/components/stripe-element.js
+++ b/addon/components/stripe-element.js
@@ -6,9 +6,9 @@ export default Component.extend({
   classNames: ['ember-stripe-element'],
 
   autofocus: false,
-  error: null,
   options: {},
   stripeElement: null,
+  stripeError: null,
   type: null, // Set in components that extend from `stripe-element`
 
   stripev3: service(),
@@ -68,15 +68,16 @@ export default Component.extend({
     stripeElement.on('blur',    (event) => this.sendAction('blur', stripeElement, event));
     stripeElement.on('focus',   (event) => this.sendAction('focus', stripeElement, event));
     stripeElement.on('change',  (...args) => {
-      let { error, complete } = args[0];
-      set(this, 'error', error);
+      let [{ complete, error: stripeError }] = args;
       this.sendAction('change', stripeElement, ...args);
 
       if (complete) {
         this.sendAction('complete', stripeElement);
-      } else if (error) {
-        this.sendAction('error', error);
+      } else if (stripeError) {
+        this.sendAction('error', stripeError);
       }
+
+      set(this, 'stripeError', stripeError);
     });
   }
 });
diff --git a/addon/templates/components/stripe-card-cvc.hbs b/addon/templates/components/stripe-card-cvc.hbs
index cbec1a0..18095a3 100644
--- a/addon/templates/components/stripe-card-cvc.hbs
+++ b/addon/templates/components/stripe-card-cvc.hbs
@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}
diff --git a/addon/templates/components/stripe-card-expiry.hbs b/addon/templates/components/stripe-card-expiry.hbs
index cbec1a0..18095a3 100644
--- a/addon/templates/components/stripe-card-expiry.hbs
+++ b/addon/templates/components/stripe-card-expiry.hbs
@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}
diff --git a/addon/templates/components/stripe-card-number.hbs b/addon/templates/components/stripe-card-number.hbs
index cbec1a0..18095a3 100644
--- a/addon/templates/components/stripe-card-number.hbs
+++ b/addon/templates/components/stripe-card-number.hbs
@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}
diff --git a/addon/templates/components/stripe-card.hbs b/addon/templates/components/stripe-card.hbs
index cbec1a0..18095a3 100644
--- a/addon/templates/components/stripe-card.hbs
+++ b/addon/templates/components/stripe-card.hbs
@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}
diff --git a/addon/templates/components/stripe-postal-code.hbs b/addon/templates/components/stripe-postal-code.hbs
index cbec1a0..18095a3 100644
--- a/addon/templates/components/stripe-postal-code.hbs
+++ b/addon/templates/components/stripe-postal-code.hbs
@@ -1,4 +1,4 @@
 <div role="mount-point"></div>
 {{#if hasBlock}}
-  {{yield stripeElement error}}
+  {{yield stripeElement stripeError}}
 {{/if}}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index d5ce7cc..6d36371 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -3,9 +3,9 @@
 </p>
 
 <div class="input-group">
-  {{#stripe-card autofocus=true options=cardOptions as |stripeElement error|}}
-    {{#if error}}
-      <p class="error">{{error.message}}</p>
+  {{#stripe-card autofocus=true options=cardOptions as |stripeElement stripeError|}}
+    {{#if stripeError}}
+      <p class="error">{{stripeError.message}}</p>
     {{/if}}
     <button {{action "submit" stripeElement}}>Submit</button>
     {{#if token}}
diff --git a/tests/integration/components/stripe-card-test.js b/tests/integration/components/stripe-card-test.js
index b903c25..4cf3511 100644
--- a/tests/integration/components/stripe-card-test.js
+++ b/tests/integration/components/stripe-card-test.js
@@ -28,3 +28,14 @@ test('it renders', function(assert) {
 
   assert.equal(this.$().text().trim(), 'template block text');
 });
+
+test('yields out error message', function(assert) {
+  this.stripeError = { message: 'oops' };
+  this.render(hbs`
+    {{#stripe-card stripeError=stripeError as |stripeElement stripeError|}}
+      {{stripeError.message}}
+    {{/stripe-card}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'oops');
+});