stitch-order-element.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="stitch-order-request.html">
<link rel="import" href="stitch-order-form.html">

<!--
`stitch-order-element`
Configures an order from Amazon

@demo demo/index.html 
-->

<dom-module id="stitch-order-element">
	<template>
		<style>
			:host {
				display: block;
			}
		</style>

		<stitch-order-request id="request"
		                      product-url="[[productUrl]]"
		                      product-details="{{details}}">
		</stitch-order-request>

		<stitch-order-form id="form" product-url="{{productUrl}}" product-details="[[details]]"></stitch-order-form>
		<!--
		  Development guidelines:
			- Stick to paper elements if possible for UI widgets
			- The mockup shows the element enclosed inside a white page on an off-white background. No need to build that
			  in; it will be part of the environment in which the element is used.
			- This folder contains a mockup.png with a mockup of the approximate element we're looking for. Interpret it as
			  mostly a guide for what we'd like the layout to look like. We know paper-elements, for example, result in
			  a different visual style than shown there.

		  Error handling:
			- If a product search turns up no results, or more than one results, we'll need to hide the remainder of the form
			  and display an error.
			- When the URL bar is empty (and thus there are no results), we'll need to hide the form and display a message
			  saying to copy and paste an amazon product web page URL in there to create an order.

		  How to read the element below:
			- For the most part, design/develop is up to you. I scaffolded out a *few* bits below as a way to explain a few
			  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: {
		  /**
		   * The current product URL.
		   */
		  productUrl: {
			type: Object,
			notify: true
		  },
		  /**
		   * The current product details retrieved from amazon.
		   *
		   * Note that this object will not have the shipping information.
		   */
		  productDetails: {
			type: Object,
			readOnly: true,
			computed: '_detailsChanged(details)',
			notify: true
		  },

		  /**
		   * The last product submitted (address, product, options are the 3 objects inside this one).
		   *
		   * Note that this object will have the data from the last product submitted
		   * to access the current product data use `productDetails` instead.
		   */
		  lastProduct: {
			type: Object,
			readOnly: true,
			notify: true
		  },
		  /**
		   * The last product submitted URL.
		   *
		   * Note that this URL will be the last product submitted URL
		   * to access the current product URL use `productUrl` instead.
		   */
		  lastUrl: {
			type: String,
			readOnly: true,
			notify: true
		  }
		},

		listeners: {
		  'request.order-details-request': '_loadingProduct',
		  'request.order-response': '_orderDataRetrieved',
		  'request.error': '_errorThrown',
		  'order-submit': '_save'
		},

		/**
		 * Resets the current form data.
		 *
		 * This will wipe `productUrl` and `productDetails`.
		 * `lastProduct` and `lastUrl` will remain unchanged.
		 */
		reset: function(){
		  this.$.form.reset();
		},

		_detailsChanged: function(details){
		  return details;
		},

		_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]);
		},
		/**
		 * Capture the `order-submit` event and set the data into the `lastProduct` Object
		 */
		_save: function(e){
		  this._setlastUrl(this.productUrl);
		  this._setLastProduct(e.detail);
		}
	  });
	</script>
</dom-module>