From 0c5824cf1a025fe979a740d392646abb8deace5a Mon Sep 17 00:00:00 2001
From: Roy Calderon <royedc4@gmail.com>
Date: Fri, 10 Mar 2017 11:46:40 -0400
Subject: [PATCH] - Error captured and displayed. - Loading spinners connected
 to the request and load process.

---
 stitch-order-element.html | 31 ++++++++++++++++++++++++-------
 stitch-order-form.html    | 32 +++++++++++++++++++++++++++++---
 stitch-order-icons.html   |  6 ++++++
 stitch-order-request.html |  9 ++++++---
 4 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/stitch-order-element.html b/stitch-order-element.html
index 861848a..8058b52 100644
--- a/stitch-order-element.html
+++ b/stitch-order-element.html
@@ -17,8 +17,8 @@
 			}
 		</style>
 
-		<stitch-order-request product-url="[[url]]" product-details="{{details}}"></stitch-order-request>
-		<stitch-order-form product-url="{{url}}" product-details="[[details]]"></stitch-order-form>
+		<stitch-order-request id="request" product-url="[[url]]" product-details="{{details}}"></stitch-order-request>
+		<stitch-order-form id="form" product-url="{{url}}" product-details="[[details]]"></stitch-order-form>
 
 		<!--
 		  Development guidelines:
@@ -40,25 +40,42 @@
 			  particular architecture needs that we anticipate in order to integrate with our system.
 			  e.g.: the different userOrder and userOrderForSave objects.
 		-->
-
-
 	</template>
 
 	<script>
 	  Polymer({
-
 		is: 'stitch-order-element',
 
 		properties: {},
 
+		listeners: {
+		  'request.order-details-request': '_loadingProduct',
+		  'request.order-response': '_orderDataRetrieved',
+		  'request.error': '_errorThrown'
+		},
 
+		_loadingProduct: function(e){
+		  this.$.form.reset(null, e.detail.URL);
+		  this.$.form.set('loading', true);
+		  this.$.form.set('loaded', false);
+		},
+		_orderDataRetrieved: function(e){
+		  if (e.detail.details) {
+			this.$.form.set('loaded', true);
+		  }
+		  if (e.detail.options) {
+			this.$.form.set('loading', false);
+		  }
+		},
+		_errorThrown: function(e){
+		  this.$.form.error(e.detail.request.response[0].Error[0]);
+		},
 		  /*
 		   * Resets the form.
 		   */
 		reset: function(){
-
+		  this.$.form.reset();
 		},
-
 		  /*
 		   * When the Set Up Order button is clicked.
 		   */
diff --git a/stitch-order-form.html b/stitch-order-form.html
index 6758ea0..971291d 100644
--- a/stitch-order-form.html
+++ b/stitch-order-form.html
@@ -39,6 +39,18 @@
 				@apply(--layout-center-center);
 			}
 
+			#error p, #error iron-icon {
+				display: inline-block;
+			}
+
+			#error p {
+				color: var(--primary-error-color, --paper-red-a200);
+			}
+
+			#error iron-icon {
+				color: var(--primary-error-color, --paper-red-a700);
+			}
+
 			form {
 				height: 0;
 				overflow: hidden;
@@ -141,6 +153,11 @@ <h1>Order Product</h1>
 
 		<div class="spinner">
 			<paper-spinner id="formSpinner" alt="Loading product details"></paper-spinner>
+
+			<div id="error" hidden$="[[!fail]]">
+				<iron-icon icon="stitch-order:error"></iron-icon>
+				<p>[[failMessage]]</p>
+			</div>
 		</div>
 
 		<form is="iron-form" id="form" method="get" content-type="application/json">
@@ -267,6 +284,7 @@ <h3>Total Cost</h3>
 			 */
 			fail: {
 			  type: Boolean,
+			  readOnly: true,
 			  value: false
 			},
 			/**
@@ -274,6 +292,7 @@ <h3>Total Cost</h3>
 			 */
 			failMessage: {
 			  type: Boolean,
+			  readOnly: true,
 			  value: false
 			},
 
@@ -310,10 +329,17 @@ <h3>Total Cost</h3>
 			this.reset();
 		  },
 
-		  reset: function(){
-			this.productUrl = '';
-			this.address = {};
+		  reset: function(address, URL){
 			this.$.form.reset();
+			this.productUrl = URL || '';
+			this.address = address || {};
+			this._setFail(false);
+			this._setFailMessage('');
+		  },
+		  error: function(details){
+			this._errorDetails = details;
+			this._setFail(true);
+			this._setFailMessage(details.Message[0]);
 		  },
 
 		  _loadingContent: function(loading, loaded){
diff --git a/stitch-order-icons.html b/stitch-order-icons.html
index 251fd14..4866a00 100644
--- a/stitch-order-icons.html
+++ b/stitch-order-icons.html
@@ -12,6 +12,12 @@
 			<g id="shopping-cart">
 				<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
 			</g>
+			<g id="error">
+				<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+			</g>
+			<g id="error-outline">
+				<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
+			</g>
 		</defs>
 	</svg>
 </iron-iconset-svg>
\ No newline at end of file
diff --git a/stitch-order-request.html b/stitch-order-request.html
index 59ad37b..bd9b92a 100644
--- a/stitch-order-request.html
+++ b/stitch-order-request.html
@@ -106,7 +106,7 @@
 				ajax.set('body', this.request.body(itemID));
 				ajax.generateRequest();
 
-				this.fire('order-details-request', {itemId: itemID});
+				this.fire('order-details-request', {itemId: itemID, URL: this.productUrl});
 			  }
 			}, 300);
 		  },
@@ -148,7 +148,9 @@
 			  ajax.set('body', this.request.body(parentID, true));
 			  ajax.generateRequest();
 
-			  this.fire('order-options-request', {itemId: product.ASIN[0], parentId: parentID});
+			  this.fire('order-options-request', {itemId: product.ASIN[0], parentId: parentID, URL: this.productUrl});
+			} else {
+			  this.fire('order-response', {options: this.productDetails.options});
 			}
 		  },
 		  _setProductOptions: function(details){
@@ -180,8 +182,9 @@
 			  options.forEach(function(option){
 				self.push('productDetails.options', option);
 			  });
-			  this.fire('order-response', {options: this.productDetails.options});
 			}
+
+			this.fire('order-response', {options: this.productDetails.options});
 		  }
 		});
 	  })();