diff options
| -rw-r--r-- | StoneIsland/www/index.html | 67 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/account/AccountView.js | 30 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/account/ProfileView.js | 4 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/account/ShippingView.js | 49 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/AddressView.js | 7 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/CreditCardView.js | 11 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/view/Serializable.js | 25 |
7 files changed, 127 insertions, 66 deletions
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 6b3b6495..00f65146 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -674,6 +674,18 @@ <div class="container-row"> <div class="cc"></div> <div class="address"></div> + <div class="checkbox-container"> + <div class="checkbox-row"> + <div class="checkbox-toggle"> + <input id="save_as_default_cart_shipping" type="checkbox" name="IsDefault" value="true" required> + <label for="save_as_default_cart_shipping"></label> + </div> + <label class="checkbox-caption" for="save_as_default_cart_shipping"> + SAVE AS DEFAULT + </label> + </div> + </div> + </div> <div class="container-fill"> <div class="container-message"> @@ -720,13 +732,44 @@ <script type="text/html" id="creditcard_template"> <input type="text" name="Number" placeholder="CREDIT CARD NUMBER" required> <div class="half-input"> - <!-- NOTE text shifted to the left because of dropdown arrow --> - <input type="text" onfocus="(this.type='number')" name="ExpirationMonth" placeholder="EXPIRATION MONTH" required> - <input type="text" onfocus="(this.type='number')" name="ExpirationYear" placeholder="EXPIRATION YEAR" required> + + <div class="select-wrapper"> + <span>EXPIRATION MONTH</span> + <select name="ExpirationMonth"> + <option value="NONE">EXPIRATION MONTH</option> + <option value="01">01</option> + <option value="02">02</option> + <option value="03">03</option> + <option value="04">04</option> + <option value="05">05</option> + <option value="06">06</option> + <option value="07">07</option> + <option value="08">08</option> + <option value="09">09</option> + <option value="10">10</option> + <option value="11">11</option> + <option value="12">12</option> + </select> + </div> + <div class="select-wrapper"> + <span>EXPIRATION YEAR</span> + <select name="ExpirationYear"> + <option value="NONE">EXPIRATION YEAR</option> + <option value="2016">2016</option> + <option value="2017">2017</option> + <option value="2018">2018</option> + <option value="2019">2019</option> + <option value="2020">2020</option> + <option value="2021">2021</option> + <option value="2022">2022</option> + <option value="2023">2023</option> + <option value="2024">2024</option> + <option value="2025">2025</option> + </select> + </div> </div> <!-- NOTE text shifted to the left because of dropdown arrow --> - <input type="text" onfocus="(this.type='number')" name="CVV" placeholder="SECURITY CODE" required> - <span class="address"></span> + <input type="number" name="CVV" placeholder="SECURITY CODE" required> </script> <script type="text/html" id="address_template"> @@ -806,19 +849,6 @@ </div> </div> <input type="number" name="Phone" placeholder="Phone Number"> - - <div class="checkbox-container"> - <div class="checkbox-row"> - <div class="checkbox-toggle"> - <input id="save_as_default_cart_shipping" type="checkbox" name="IsDefault" value="true" required> - <label for="save_as_default_cart_shipping"></label> - </div> - <label class="checkbox-caption" for="save_as_default_cart_shipping"> - SAVE AS DEFAULT - </label> - </div> - </div> - </script> </body> @@ -834,6 +864,7 @@ <script src="js/vendor/promise.js"></script> <script src="js/vendor/flickity.pkgd.js"></script> <script src="js/vendor/util.js"></script> +<script src="js/vendor/jquery.creditCardValidator.js"></script> <script src="js/sdk/_sdk.js"></script> <script src="js/sdk/account.js"></script> diff --git a/StoneIsland/www/js/lib/account/AccountView.js b/StoneIsland/www/js/lib/account/AccountView.js index e1d7ca71..ce976094 100644 --- a/StoneIsland/www/js/lib/account/AccountView.js +++ b/StoneIsland/www/js/lib/account/AccountView.js @@ -16,29 +16,35 @@ var AccountView = View.extend({ } }, - populateAddresses: function(data){ - console.log("populate addresses:", data) + listAddresses: function(cb){ + sdk.address.list({ + success: function(data){ + this.populateAddresses(data, cb) + }.bind(this) + }) + }, + + populateAddresses: function(data, cb){ + console.log("populate addresses:", data.AddressBook.addressBookItem) if (! data.AddressBook) { console.log("no addresses") return } - // console.log(data.AddressBook) data.AddressBook.addressBookItem.forEach(function(item){ - if (item.isDefault) { - // populate app.shipping.address - app.shipping.address.populate(item) + if (item.IsDefault) { + console.log("SHIPPING ADDRESS", item) + app.shipping.populate(item) } - else if (item.isBillingDefault) { - // populate app.billing.address - app.payment.address.populate(item) + if (item.IsBillingDefault) { + console.log("BILLING ADDRESS") + app.payment.populate(item) } }) + cb && cb() }, logged_in: function(cb){ - sdk.address.list({ - success: this.populateAddresses.bind(this) - }) + this.listAddresses() $("#nav .login").hide() $("#nav .account, #nav .logout").show() if (! auth.deferred_product && app.last_view) { diff --git a/StoneIsland/www/js/lib/account/ProfileView.js b/StoneIsland/www/js/lib/account/ProfileView.js index d05ef5cd..999e8d65 100644 --- a/StoneIsland/www/js/lib/account/ProfileView.js +++ b/StoneIsland/www/js/lib/account/ProfileView.js @@ -71,5 +71,9 @@ var ProfileView = FormView.extend({ error: function(data){ }, + + cancel: function(){ + app.router.go("intro") + }, })
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/account/ShippingView.js b/StoneIsland/www/js/lib/account/ShippingView.js index e2426d2e..b8b260ab 100644 --- a/StoneIsland/www/js/lib/account/ShippingView.js +++ b/StoneIsland/www/js/lib/account/ShippingView.js @@ -2,8 +2,7 @@ var ShippingView = FormView.extend({ el: "#shipping", - createAction: sdk.address.add, - updateAction: sdk.address.update, + action: sdk.address.add, events: { }, @@ -11,14 +10,14 @@ var ShippingView = FormView.extend({ test_data: { "Name":"name", "Surname":"surname", - "Address":"address", + "Address":"address1\naddress2", "IsDefault":false, "IsBillingDefault":false, "IsOwner":false, "ZipCode":"88040", "City":"City", - "Province":"Province", - "Phone":"Phone", + "Province":"NY", + "Phone":"1234567890", "Mobile":"Mobile", "Mail":"Mail", "UserId": sdk.auth.user_id, @@ -27,37 +26,51 @@ var ShippingView = FormView.extend({ initialize: function(){ this.$form = this.$("form") this.$msg = this.$(".msg") - this.$isDefault = this.$("[name=IsDefault]") this.address = new AddressView ({ parent: this }) this.scroller = new IScroll('#shipping', app.iscroll_options) - this.preload() }, show: function(){ if (! auth.logged_in()) { return app.router.go("intro") } +// this.preload( this.data || this.test_data ) app.footer.show("SAVE", "CANCEL") document.body.className = "shipping" }, + populate: function(data){ + this.data = data || this.data + this.address.populate(data) + }, + finalize: function(data){ if (this.address.data && this.address.data.Id) { sdk.address.destroy({ id: this.address.data.Id, - success: function(){ console.log("destroyed") }, - error: function(){ console.log("destroyed") }, + success: function(){}, + error: function(){}, }) - this.action = this.updateAction - } - else { - this.action = this.createAction } - data.IsDefault = data.IsDefault ? "true" : "false" - data.Address = data.Address1 + "\n" + data.Address2 - delete data.Address1 - delete data.Address2 + + data.IsDefault = "true" // this.$isDefault.prop("checked") ? "true" : "false" + data.UserId = sdk.auth.user_id + console.log(data) - return return data }, + + success: function(data){ + app.curtain.show("loading") + app.account.listAddresses(function(){ + app.curtain.hide("loading") + }) + }, + + error: function(data){ + console.log(data) + }, + + cancel: function(){ + app.router.go("intro") + }, })
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/nav/AddressView.js b/StoneIsland/www/js/lib/nav/AddressView.js index fb30062e..9d4a97b9 100644 --- a/StoneIsland/www/js/lib/nav/AddressView.js +++ b/StoneIsland/www/js/lib/nav/AddressView.js @@ -18,9 +18,7 @@ var AddressView = SerializableView.extend({ data.Address1 = address[0] data.Address2 = address[1] this.$(".address input").val("") - Object.keys(data).forEach(function(key){ - this.$(".address [name=" + key + "]").val(data[key]) - }.bind(this)) + this.load_data(data) }, validate_presence: { @@ -33,12 +31,11 @@ var AddressView = SerializableView.extend({ validate_fields: function(data, errors){ if (data.Phone.replace(/[^0-9]/g, "").length < 10) { errors.push([ "Phone", "Phone numbers must be at least 10 digits." ]) } - if (data.Province == "NONE") { errors.push([ "Province", "Please choose your state." ]) } + if (! data.Province || data.Province == "NONE") { errors.push([ "Province", "Please choose your state." ]) } data.Address = data.Address1 + "\n" + data.Address2 data.UserId = auth.user_id delete data.Address1 delete data.Address2 - console.log(errors) }, }) diff --git a/StoneIsland/www/js/lib/nav/CreditCardView.js b/StoneIsland/www/js/lib/nav/CreditCardView.js index 33ecab79..eaab7086 100644 --- a/StoneIsland/www/js/lib/nav/CreditCardView.js +++ b/StoneIsland/www/js/lib/nav/CreditCardView.js @@ -8,20 +8,25 @@ var CreditCardView = View.extend({ initialize: function(opt){ this.parent = opt.parent + this.setElement( this.parent.$(".cc") ) this.parent.$(".cc").html(this.template) }, populate: function(data){ this.parent.$(".cc input").val("") - Object.keys(data).forEach(function(key){ - this.parent$(".cc [name=" + key + "]").val(data[key]) - }.bind(this)) + this.$(".cc input").val("") + this.load_data(data) }, validate_presence: { + 'Number': 'Please enter your credit card number.', + 'CVV': 'Please enter your security code.', }, validate_fields: function(data, errors){ + if (! data.ExpirationMonth || data.ExpirationMonth == "NONE") { errors.push([ "ExpirationMonth", "Please enter the expiration month." ]) } + if (! data.ExpirationYear || data.ExpirationYear == "NONE") { errors.push([ "ExpirationYear", "Please select the expiration month." ]) } + data.UserId = auth.user_id }, }) diff --git a/StoneIsland/www/js/lib/view/Serializable.js b/StoneIsland/www/js/lib/view/Serializable.js index 72978985..b1e095d3 100644 --- a/StoneIsland/www/js/lib/view/Serializable.js +++ b/StoneIsland/www/js/lib/view/Serializable.js @@ -10,7 +10,10 @@ var SerializableView = View.extend({ if (! data && sdk.env == "production") { return } data = data || this.test_data if (! data) { return } + this.load_data(data) + }, + load_data: function(data){ Object.keys(data).forEach(function(key){ var value = data[key] var $el = this.$("[name=" + key + "]") @@ -56,22 +59,21 @@ var SerializableView = View.extend({ update_select: function(e){ var $target = $(e.currentTarget), value = $target.val() - var label = $($("select")[0]).find("option").filter(function(){ return this.value === value }).html() - + var label = $target.find("option").filter(function(){ return this.value === value }).html() $target.parent().addClass("picked") $target.parent().find("span").html(label) }, - validate: function(errors){ - var data = this.serialize() - var errors = [] + validate: function(data, errors){ + var data = data || this.serialize() + var errors = errors || [] var presence_msgs = this.validate_presence || {} Object.keys(presence_msgs).forEach(function(k){ if (! data[k]) errors.push( [ k, presence_msgs[k] ] ) }) this.validate_fields && this.validate_fields(data, errors) - this.cc && this.cc.validate(errors) - this.address && this.address.validate(errors) + this.cc && this.cc.validate(data, errors) + this.address && this.address.validate(data, errors) return { errors: errors, data: data } }, @@ -108,13 +110,16 @@ var SerializableView = View.extend({ } var finalized_data = this.finalize(valid.data) - if (! finalized_data) { + this.submit( finalized_data ) + }, + + submit: function(data){ + if (! data) { return } - app.curtain.show("loading") this.action({ - data: finalized_data, + data: data, success: function(data){ app.curtain.hide("loading") this.success(data) |