From 982a8199c17dc75c9ae2c7a55ed1a5c2534509f1 Mon Sep 17 00:00:00 2001 From: Roy Calderon Date: Tue, 7 Mar 2017 16:13:36 -0400 Subject: [PATCH 01/12] Elements created. Form to control all the UI. Request to talk correctly with amazon server. Some styles to separate the element for easier scalability. Some development features added: Gulp, to watch and serve the elements and cross-browser sync. Other tasks could be created to vulcanize the element for example. --- .gitignore | 3 + app.html | 81 ++++++++++++++++++ bower.json | 5 +- font-styles.html | 65 ++++++++++++++ gulpfile.js | 36 ++++++++ index.html | 20 ++--- order-styles.html | 23 +++++ package.json | 23 +++++ placeholder.jpg | Bin 0 -> 5222 bytes stitch-order-element.html | 174 +++++++++++++++----------------------- stitch-order-form.html | 91 ++++++++++++++++++++ stitch-order-request.html | 30 +++++++ 12 files changed, 434 insertions(+), 117 deletions(-) create mode 100644 app.html create mode 100644 font-styles.html create mode 100644 gulpfile.js create mode 100644 order-styles.html create mode 100644 package.json create mode 100644 placeholder.jpg create mode 100644 stitch-order-form.html create mode 100644 stitch-order-request.html diff --git a/.gitignore b/.gitignore index 8d4ae25..36f2377 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ bower_components +node_modules + +.idea \ No newline at end of file diff --git a/app.html b/app.html new file mode 100644 index 0000000..a266ec5 --- /dev/null +++ b/app.html @@ -0,0 +1,81 @@ + + + + + + + Stitch + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/bower.json b/bower.json index aa67800..ae69fee 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,10 @@ "description": "Configures an order from Amazon"", "main": "stitch-order-element.html", "dependencies": { - "polymer": "Polymer/polymer#^1.4.0" + "polymer": "Polymer/polymer#^1.8.1", + "paper-styles": "PolymerElements/paper-styles#^1.2.0", + "paper-input": "PolymerElements/paper-input#^1.1.23", + "iron-image": "PolymerElements/iron-image#^1.2.5" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", diff --git a/font-styles.html b/font-styles.html new file mode 100644 index 0000000..7f93e48 --- /dev/null +++ b/font-styles.html @@ -0,0 +1,65 @@ + + + + + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..024efaa --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,36 @@ +'use strict'; + +var gulp = require('gulp'); +var browserSync = require('browser-sync').create(); +var historyApiFallback = require('connect-history-api-fallback'); + +var config = { + paths: { + html: ['./*.html'], + get allFiles(){ + return [].concat(this.html); + } + } +}; + +var server = { + dev: { + port: 5000, + logPrefix: 'Element', + server: { + index: 'app.html', + baseDir: '.' + }, + files: config.paths.allFiles, + notify: false + }, + get config(){ + return this.dev; + } +}; + +gulp.task('browserSync', function(){ + browserSync.init(server.config); +}); + +gulp.task('serve', gulp.series('browserSync')); \ No newline at end of file diff --git a/index.html b/index.html index cb2161b..4ece08d 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,16 @@ - - - + + + - stitch-order-element + stitch-order-element - + - - - - - + + + + + diff --git a/order-styles.html b/order-styles.html new file mode 100644 index 0000000..a43a912 --- /dev/null +++ b/order-styles.html @@ -0,0 +1,23 @@ + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..1d3339d --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "stitch-order-element", + "version": "1.3.0", + "description": "An incredible tool", + "license": "BSD-3-Clause", + "scripts": { + "lint": "eslint . --ext js,html --ignore-path .gitignore", + "test": "npm run lint && polymer test", + "build": "gulp build" + }, + "devDependencies": { + "browser-sync": "^2.18.6", + "connect-history-api-fallback": "^1.3.0", + "eslint": "^3.12.0", + "eslint-config-google": "^0.7.0", + "eslint-plugin-html": "^1.7.0", + "gulp": "gulpjs/gulp#4.0" + }, + "engines": { + "node": ">=4.0" + }, + "private": true +} diff --git a/placeholder.jpg b/placeholder.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f61ac6827a78b8f52afccf7f10b3aae08f1d1413 GIT binary patch literal 5222 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 Jf6bw + + + - - - + + + diff --git a/stitch-order-form.html b/stitch-order-form.html new file mode 100644 index 0000000..a47e9ce --- /dev/null +++ b/stitch-order-form.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + diff --git a/stitch-order-request.html b/stitch-order-request.html new file mode 100644 index 0000000..0760b2d --- /dev/null +++ b/stitch-order-request.html @@ -0,0 +1,30 @@ + + + + + + + From 9c5ab151ccd6a7807e9d807126c571bd9fb5ab80 Mon Sep 17 00:00:00 2001 From: Roy Calderon Date: Tue, 7 Mar 2017 18:29:34 -0400 Subject: [PATCH 02/12] From structure created. The values should be extracted from form and pushed into the request params. Icons for element added. --- bower.json | 4 +- gulpfile.js | 1 - order-styles.html | 23 ------ package.json | 1 - prime.png | Bin 0 -> 3909 bytes stitch-order-form.html | 176 +++++++++++++++++++++++++++++++++++++--- stitch-order-icons.html | 17 ++++ 7 files changed, 183 insertions(+), 39 deletions(-) delete mode 100644 order-styles.html create mode 100644 prime.png create mode 100644 stitch-order-icons.html diff --git a/bower.json b/bower.json index ae69fee..958df22 100644 --- a/bower.json +++ b/bower.json @@ -6,7 +6,9 @@ "polymer": "Polymer/polymer#^1.8.1", "paper-styles": "PolymerElements/paper-styles#^1.2.0", "paper-input": "PolymerElements/paper-input#^1.1.23", - "iron-image": "PolymerElements/iron-image#^1.2.5" + "iron-image": "PolymerElements/iron-image#^1.2.5", + "paper-button": "PolymerElements/paper-button#^1.0.14", + "vaadin-combo-box": "vaadin/vaadin-combo-box#^1.3.2" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", diff --git a/gulpfile.js b/gulpfile.js index 024efaa..fec616e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,7 +2,6 @@ var gulp = require('gulp'); var browserSync = require('browser-sync').create(); -var historyApiFallback = require('connect-history-api-fallback'); var config = { paths: { diff --git a/order-styles.html b/order-styles.html deleted file mode 100644 index a43a912..0000000 --- a/order-styles.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/package.json b/package.json index 1d3339d..ee366e2 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ }, "devDependencies": { "browser-sync": "^2.18.6", - "connect-history-api-fallback": "^1.3.0", "eslint": "^3.12.0", "eslint-config-google": "^0.7.0", "eslint-plugin-html": "^1.7.0", diff --git a/prime.png b/prime.png new file mode 100644 index 0000000000000000000000000000000000000000..e42e3bbb1389787597a56c66cdd576725a2688cf GIT binary patch literal 3909 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 TW|^+Q00000NkvXXu0mjfk@;5T literal 0 HcmV?d00001 diff --git a/stitch-order-form.html b/stitch-order-form.html index a47e9ce..52c87da 100644 --- a/stitch-order-form.html +++ b/stitch-order-form.html @@ -1,13 +1,16 @@ + - - + + + + - From 31fae131021090dfa3861e8c91940fdbb8391ec8 Mon Sep 17 00:00:00 2001 From: Roy Calderon Date: Wed, 8 Mar 2017 14:53:29 -0400 Subject: [PATCH 04/12] AWS request done and handled. request element documentation added. --- app.html | 2 +- bower.json | 3 +- stitch-order-request.html | 189 ++++++++++++++++++++++++++------------ 3 files changed, 134 insertions(+), 60 deletions(-) diff --git a/app.html b/app.html index a266ec5..ff06f92 100644 --- a/app.html +++ b/app.html @@ -54,7 +54,7 @@ if (!webComponentsSupported) { var script = document.createElement('script'); script.async = true; - script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js'; + script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js'; script.onload = onload; document.head.appendChild(script); } else { diff --git a/bower.json b/bower.json index 914e8c6..f239ea2 100644 --- a/bower.json +++ b/bower.json @@ -9,7 +9,8 @@ "iron-image": "PolymerElements/iron-image#^1.2.5", "paper-button": "PolymerElements/paper-button#^1.0.14", "vaadin-combo-box": "vaadin/vaadin-combo-box#^1.3.2", - "jsSHA": "jssha#^2.2.0" + "jsSHA": "jssha#^2.2.0", + "iron-ajax": "PolymerElements/iron-ajax#^1.4.3" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", diff --git a/stitch-order-request.html b/stitch-order-request.html index 20dc2ab..51ca1e5 100644 --- a/stitch-order-request.html +++ b/stitch-order-request.html @@ -3,6 +3,9 @@ From b3149d8df74382bf78dc091bce50703c5436ed66 Mon Sep 17 00:00:00 2001 From: Roy Calderon Date: Wed, 8 Mar 2017 18:12:56 -0400 Subject: [PATCH 05/12] AWS Endpoint connected. Main details extracted and exposed. The options should be mapped accordingly, So they could be displayed and selected. --- bower.json | 4 +- stitch-order-form.html | 18 ++--- stitch-order-request.html | 146 +++++++++++++------------------------- 3 files changed, 60 insertions(+), 108 deletions(-) diff --git a/bower.json b/bower.json index f239ea2..42486ac 100644 --- a/bower.json +++ b/bower.json @@ -9,8 +9,8 @@ "iron-image": "PolymerElements/iron-image#^1.2.5", "paper-button": "PolymerElements/paper-button#^1.0.14", "vaadin-combo-box": "vaadin/vaadin-combo-box#^1.3.2", - "jsSHA": "jssha#^2.2.0", - "iron-ajax": "PolymerElements/iron-ajax#^1.4.3" + "iron-ajax": "PolymerElements/iron-ajax#^1.4.3", + "paper-spinner": "PolymerElements/paper-spinner#^1.2.1" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", diff --git a/stitch-order-form.html b/stitch-order-form.html index 52c87da..e2cbcc4 100644 --- a/stitch-order-form.html +++ b/stitch-order-form.html @@ -3,6 +3,7 @@ + @@ -56,11 +57,13 @@ .left iron-image { display: block; - width: 150px; - height: 150px; + width: 160px; + height: 160px; + @apply(--shadow-elevation-4dp); } .left .checkPrime { + margin: 15px; height: 29px; } @@ -112,19 +115,18 @@

Order Product

+ +
- - - + the Prime Logo with a checkmark
-

[[productDetails.Title]]

+

[[productDetails.title]]

Select Options

@@ -156,7 +158,7 @@

Shipping information

Total Cost

-
$ [[productDetails.cost]] + shipping
+
[[productDetails.cost]] + shipping

(Note: shipping is calculated when purchase is made)

diff --git a/stitch-order-request.html b/stitch-order-request.html index 51ca1e5..6a22509 100644 --- a/stitch-order-request.html +++ b/stitch-order-request.html @@ -3,7 +3,9 @@ @@ -21,7 +23,7 @@ */ /** - * Fired when a response is received. + * Fired when a response is received and parsed. * * @event order-response */ @@ -33,24 +35,13 @@ */ properties: { - /** - * The Amazon Access Key Id. - */ - accessKeyID: String, - /** - * The Amazon Associate Tag. - */ - associateTag: String, - /** - * The Amazon Secret Access Key. - * Required - */ - secretAccessKey: String, - /** * The URL target of the request. */ - productUrl: String, + productUrl: { + type: String, + observer: '_setRequestParams' + }, /** * productUrl's response. @@ -65,108 +56,67 @@ */ productDetails: { type: Object, - notify: true + notify: true, + value: {} } }, - observers: [ - '_setRequestParams(productUrl, accessKeyID, associateTag, secretAccessKey)' - ], + ready: function(){ + this.request = (function(){ + var endpoint = 'https://kc5nsidmrk.execute-api.us-west-2.amazonaws.com/production/item/lookup'; - attached: function(){ - this.secretAccessKey = 'qSgTh1+jiDkga1Tt/ql8EcnS/ze6gHP6W+oqHlQn'; - this.associateTag = 'buttonjoy-20'; - this.accessKeyID = 'AKIAIO5T5P757JAH47QA'; + var body = { + itemId: undefined, //Required, extracted from amazon product URL + ResponseGroup: 'Images,ItemAttributes,OfferListings,Offers' + }; + + return { + body: function(itemId){ + var request = JSON.parse(JSON.stringify(body)); + request.itemId = itemId; + + return request; + }, + get endpoint(){ + return endpoint; + } + }; + })(); }, - _setRequestParams: function(productUrl, accessKeyID, associateTag, secretAccessKey){ + _setRequestParams: function(productUrl){ this.debounce('requesting-product', function(){ - if (productUrl.length > 23 && accessKeyID && associateTag && secretAccessKey) { + if (productUrl.length > 23) { var ajax = this.$$('iron-ajax'); var itemID = this._getItemIdFromURL(productUrl); - var query = _service.paramsAsQuery(itemID, accessKeyID, associateTag); - var url = this._signedUrl(_service.url(), query, secretAccessKey); - ajax.set('url', url); - var request = ajax.generateRequest(); - this.fire('order-request', {url: url, itemId: itemID}); + ajax.set('body', this.request.body(itemID)); + ajax.generateRequest(); + + this.fire('order-request', {itemId: itemID}); } }, 300); }, _handleResponse: function(e){ - var response = e.detail.response; - console.log(response); - this.fire('order-response', response); + var response = e.detail.response[0]; + var product = { + id: response.ASIN[0], + title: response.ItemAttributes[0].Title[0], + image: response.MediumImage[0].URL[0], + cost: response.ItemAttributes[0].ListPrice[0].FormattedPrice[0], + prime: !!Number(response.Offers[0].Offer[0].OfferListing[0].IsEligibleForPrime[0]) + }; + + this.set('productDetails', product); + this.fire('order-response', product); }, _getItemIdFromURL: function(url){ - var regex = /\/dp\/(\w+)\//; + var regex = /\/dp\/(\w+)\/?/; return regex.exec(url)[1]; - }, - _signString: function(stringToSignParam, secret){ - var shaObj = new jsSHA('SHA-256', 'TEXT'); - shaObj.setHMACKey(secret, 'TEXT'); - shaObj.update(stringToSignParam); - var signature = shaObj.getHMAC('B64'); - return encodeURIComponent(signature); - }, - _signedUrl: function(url, canonicalizedQueryString, secret){ - var parser = document.createElement('a'); - parser.href = url; - var hostname = parser.hostname; - var pathname = parser.pathname; - var stringToSign = ['GET', hostname, pathname, canonicalizedQueryString].join('\n'); - - return url + '?' + [canonicalizedQueryString, 'Signature=' + this._signString(stringToSign, secret)].join('&'); } }); - - var _service = (function(){ - var awsUrl = 'http://webservices.amazon.com/onca/xml'; - - var params = { - Service: 'AWSECommerceService', - Operation: 'ItemLookup', - IdType: 'ASIN', - ResponseGroup: ['Images', 'ItemAttributes', 'Offers'] - }; - - return { - params: function(itemID, accessKeyID, associateTag){ - var requestParams = JSON.parse(JSON.stringify(params)); - requestParams.ItemId = itemID; - requestParams.AWSAccessKeyId = accessKeyID; - requestParams.AssociateTag = associateTag; - - return requestParams; - }, - query: function(params, timestampParam){ - var query = []; - for (var param in params) { - if (params.hasOwnProperty(param)) { - query.push(param + '=' + params[param]); - } - } - - var tiemstamp = timestampParam || new Date().toISOString(); - query = query.join('&').replace(/,/g, '%2C').split('&'); - query.push('Timestamp=' + encodeURIComponent(tiemstamp)); - - return query.sort().join('&'); - }, - paramsAsQuery: function(itemID, accessKeyID, associateTag, timestampParam){ - return this.query(this.params(itemID, accessKeyID, associateTag, timestampParam)); - }, - url: function(query){ - if (query instanceof Object) { - query = this.query(query); - } - - return awsUrl + (query ? '?' + query : ''); - } - } - })(); })(); From c9c3ea3b4aaba19eb4ef7a7b97c66c0d9719ae20 Mon Sep 17 00:00:00 2001 From: Roy Calderon Date: Thu, 9 Mar 2017 03:06:58 -0400 Subject: [PATCH 06/12] - Replace PATH's for use with polymer serve - Implemented new request with the parent item ASIN to get all options values - Add Quantity option static - Others improvments --- app.html | 4 +-- demo/index.html | 5 ++- font-styles.html | 4 +-- stitch-order-element.html | 2 +- stitch-order-form.html | 23 ++++++------- stitch-order-icons.html | 2 +- stitch-order-request.html | 69 ++++++++++++++++++++++++++++++++++----- 7 files changed, 83 insertions(+), 26 deletions(-) diff --git a/app.html b/app.html index ff06f92..2c36005 100644 --- a/app.html +++ b/app.html @@ -54,7 +54,7 @@ if (!webComponentsSupported) { var script = document.createElement('script'); script.async = true; - script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js'; + script.src = '../webcomponentsjs/webcomponents-lite.min.js'; script.onload = onload; document.head.appendChild(script); } else { @@ -64,7 +64,7 @@ - + -
+

Basic stitch-order-element demo

@@ -268,17 +268,12 @@

Total Cost

/** * The product details and options requests from amazon are on the fly. */ - loading: { - type: Boolean, - value: false - }, + loading: Boolean, /** * The product details where retrieved from amazon. */ - loaded: { - type: Boolean, - value: false - }, + loaded: Boolean, + /** * The product could not be retrieved through the amazon API or another error gets captured. */ @@ -333,6 +328,7 @@

Total Cost

this.$.form.reset(); this.productUrl = URL || ''; this.address = address || {}; + this.loading = this.loaded = false; this._setFail(false); this._setFailMessage(''); }, @@ -373,6 +369,9 @@

Total Cost

this.$.form.submit(); } }, + _reset: function(){ + this.reset(); + }, _validate: function(){ return true; }