order info

13 files changed, 286 insertions, 73 deletions

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 5033cf22..7d6247c2 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -38,15 +38,17 @@
 #orders {
   display: none;
 }
-
-#orders.list {
+#orders #order_list {
+  display: block;
 }
-#orders.single {
+#orders #single_order {
+  display: none;
 }
-
-#order_list {
+#orders.single #order_list {
+  display: none;
 }
-#single_order {
+#orders.single #single_order {
+  display: block;
 }
 
 .settings #settings { display: block }
diff --git a/StoneIsland/www/img/spinner.gif b/StoneIsland/www/img/spinner.gif
new file mode 100644
index 00000000..d9e986d3
--- /dev/null
+++ b/StoneIsland/www/img/spinner.gif
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 3d84d4dc..a213694d 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -497,31 +497,75 @@
   </div>
   
   <div id="orders">
-    <h1>ORDERS</h1>
-    <div id="order_list">
-      <div class="scroll">
-        <script type="text/html" class="template">
-          <div class="item">
+    <div class="scroll">
+      <h1>ORDERS</h1>
+      <div id="order_list">
+        <div class="list"></div>
+        <div class="empty">You have no orders.</div>
+        <script type="text/html" class="list_template">
+          <div class="item" data-id="{{id}}">
             <div class="details">
               Details &gt;
             </div>
             <div class="txt">
               {{date}}<br>
-              {{order_id}}<br>
+              {{id}}<br>
               {{total}}
             </div>
-            <div id="images">
+            <div class="images">
             </div>
           </div>
         </script>
       </div>
-    </div>
-    <div id="single_order">
-      <div class="scroll">
-        <div class="content">
+    
+      <div id="single_order">
+        <div class="order_section">
+          <h2>ORDER SUMMARY</h2>
+
+          <div class="rows">
+            <script type="text/html" class="item_template">
+              <div class="cart_item_info">
+                <span class="sku">{{sku}}</span>
+                <span class="title">{{title}}</span>
+                <span class="type">{{type}}</span>
+                <div class="meta">
+                  <div class="meta-size"><b>SIZE:</b> {{size}}</div>
+                  <div class="meta-color"><b>COLOR:</b> {{color}}</div>
+                  <div class="meta-quantity"><b>QUANTITY:</b> {{quantity}}</div>
+                </div>
+              </div>
+              <div class="cart_item_price">
+                <span class="price">{{price}}</span>
+              </div>
+            </script>
+          </div>
+          <div class="cart-summary">
+            <div class="cart-summary-row">
+              <span class="label">SUB TOTAL</span>
+              <span class="subtotal"></span>
+            </div>
+            <div class="cart-summary-row">
+              <span class="label">ESTIMATED SHIPPING<br>& HANDLING</span>
+              <span class="shipping"></span>
+            </div>
+            <div class="cart-summary-row">
+              <span class="label">TAX</span>
+              <span class="tax"></span>
+            </div>
+            <div class="cart-summary-row">
+              <span class="label">TOTAL</span>
+              <span class="total"></span>
+            </div>
+          </div>
         </div>
-        <script type="text/html" class="template">
-        </script>
+
+        <div class="order_section">
+          <h2>SHIP TO</h2>
+          
+          <div class="shipping_address"></div>
+          <div class="shipping_method"></div>
+        </div>
+
       </div>
     </div>
   </div>
@@ -1045,8 +1089,6 @@
 <script src="js/lib/account/ShippingView.js"></script>
 <script src="js/lib/account/SettingsView.js"></script>
 <script src="js/lib/account/OrdersView.js"></script>
-<script src="js/lib/account/orders/OrderList.js"></script>
-<script src="js/lib/account/orders/SingleOrder.js"></script>
 
 <script src="js/lib/products/CollectionView.js"></script>
 <script src="js/lib/products/filters/CategoryFilter.js"></script>
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index 546bd637..208eab21 100644
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -63,7 +63,7 @@ var app = (function(){
   
   app.ready = function(){
     if (window.cordova) {
-      // cordova.plugins.Keyboard.disableScroll(true)
+      cordova.plugins.Keyboard.disableScroll(true)
     }
 
     app.view = null
diff --git a/StoneIsland/www/js/lib/account/OrdersView.js b/StoneIsland/www/js/lib/account/OrdersView.js
index 7283b65c..6465792f 100644
--- a/StoneIsland/www/js/lib/account/OrdersView.js
+++ b/StoneIsland/www/js/lib/account/OrdersView.js
@@ -1,29 +1,185 @@
-var OrdersView = View.extend({
+var OrdersView = ScrollableView.extend({
 
   el: "#orders",
+  
+  loaded: false,
+  
+  list_template: $("#orders .list_template").html(),
+  item_template: $("#orders .item_template").html(),
 
   events: {
     "click .back": "back",
-    "click .details": "load_single",
+    "click .item": "load_single",
   },
 
   initialize: function(){
-    this.single = new SingleOrder ({ parent: this })
-    this.list = new OrderList ({ parent: this })
+    this.$list = this.$(".list")
+    this.$empty = this.$(".empty")
+    this.$single_order = this.$("#single_order")
+
+    this.$rows = this.$(".rows")
+    this.$subtotal = this.$(".subtotal")
+    this.$shipping = this.$(".shipping")
+    this.$tax = this.$(".tax")
+    this.$total = this.$(".total")
+    
+    this.$shipping_address = this.$(".shipping_address")
+    this.$shipping_method = this.$(".shipping_method")
+
+    this.scroller = new IScroll('#orders', app.iscroll_options)
   },
 
   show: function(){
     if (! auth.logged_in()) { return app.router.go("intro") }
+    app.header.set_back(false)
     app.footer.hide()
     document.body.className = "orders"
-    this.el.className = "list"
+    this.el.className = ""
+    
+    if (this.loaded) {
+      this.populate()
+    }
+    else {
+      this.fetch()
+    }
+  },
+  
+  orders: null,
+  orderLookup: {},
+  
+  fetch: function(){
+    this.$list.empty()
+    this.$empty.hide()
+    this.loader = new Loader(this.ready.bind(this))
+    app.curtain.show("loading")
+    sdk.account.fetch_orders({
+      success: function(data){
+        this.loader.register("orders")
+        this.orders = data.OrderDetails
+        data.OrderDetails.forEach(function(row){
+          this.loader.register(row.OrderNumber)
+          sdk.account.fetch_single_order({
+            id: row.OrderNumber,
+            success: function(row_data){
+              this.orderLookup[ row.OrderNumber ] = row_data.OrderFullDetails
+              this.loader.ready(row.OrderNumber)
+            }.bind(this),
+            error: function(){
+              this.orderLookup[ row.OrderNumber ] = null
+              this.loader.ready(row.OrderNumber)
+            }.bind(this),
+          })
+        }.bind(this))
+        this.loader.ready("orders")
+      }.bind(this),
+      error: function(){
+        console.log("error fetching orders")
+      }.bind(this),
+    })
+  },
+  
+  ready: function(){
+    this.populate()
+    app.curtain.hide("loading")
+  },
+  
+  populate: function(){
+    this.$list.empty()
+
+    if (! this.orders.length) {
+      this.$empty.show()
+      return
+    }
+    else {
+      this.$empty.hide()
+    }
+    this.orders.forEach(function(row){
+      var order = this.orderLookup[ row.OrderNumber ]
+      if (! order) { return }
+      var t = this.list_template.replace(/{{date}}/g, moment(order['Date']).format("ddd MM/DD/YYYY").toUpperCase())
+                                .replace(/{{id}}/g, row.OrderNumber)
+                                .replace(/{{total}}/g, as_cash( order.TotalAmount ))
+      var $t = $(t), $images = $t.find(".images")
+      order.Items.forEach(function(item){
+        var img = new Image ()
+        img.src = sdk.image(item['Code10'], "11_f")
+        $images.append(img)
+      }.bind(this))
+      this.$list.append($t)
+    }.bind(this))
+
+    this.refreshScroller()
   },
+  
+  load_single: function(e){
+    var id = $(e.currentTarget).data("id")
+    var order = this.orderLookup[ id ]
+    if (! order) { return }
+    
+    console.log(order)
+    
+    order.Items.forEach(function(item){
+      var $el = $("<div class='item'><img src='img/spinner.gif'></div>")
+      this.$rows.append($el)
+      var code_ten = item.Code10
+
+      var code = code_ten.substr(0, 8)
+      app.product.find(code, function(data, details){
+        var descriptions = app.product.get_descriptions( details )
+
+        var name_partz = descriptions['ModelNames'].split(' ')
+        var num = name_partz.shift()
+        var title = name_partz.join(' ')
+        var type = title_case( descriptions['MicroCategory'] )
+        
+        var color_name, size_name
 
-  load_single: function(){
+        details.Item.ModelColors.some(function(color){
+          if (color['Code10'] == code_ten) {
+            color_name = color['ColorDescription']
+            return true
+          }
+          return false
+        })
+        size_name = item.DefaultSize + " " + item.DefaultSizeClassFamily
+
+        var t = this.item_template
+                    .replace(/{{image}}/, sdk.image(item['Code10'], '11_f'))
+                    .replace(/{{sku}}/, num)
+                    .replace(/{{title}}/, title)
+                    .replace(/{{type}}/, type)
+                    .replace(/{{size}}/, size_name || "DEFAULT")
+                    .replace(/{{color}}/, color_name || "DEFAULT")
+                    .replace(/{{quantity}}/, 1)
+                    .replace(/{{price}}/, as_cash(details.Item.Price.DiscountedPrice))
+        $el.data("price", details.Item.Price.DiscountedPrice)
+        $el.html(t)
+        this.refreshScroller()
+      }.bind(this))
+    }.bind(this))
+    
+    var subtotal = order.ItemsTotalAmount
+    var shipping_cost = order.Delivery.Amount
+    var tax = order.SalesTaxAmount
+    var total = order.TotalToPay
+    
+    this.$subtotal.html( as_cash(subtotal) )
+    this.$shipping.html( as_cash(shipping_cost) )
+    this.$tax.html( as_cash(tax) )
+    this.$total.html( as_cash(total) )
+
+    var street = order.Delivery.Address.replace(/\n$/,"").replace("\n","<br>")
+    var address = order.Delivery.Name + "<br>" + street + "<br>" + order.Delivery.City + " " + order.Delivery.ZipCode
+    this.$shipping_address.html(address)
+    this.$shipping_method.html(order.Delivery.Type + " - " + order.Delivery.Time)
+    
+    app.header.set_back(true)
+    this.$el.addClass("single")
   },
 
   back: function(){
-    this.list.show()
+    this.el.className = ""
   },
 
 })
+
diff --git a/StoneIsland/www/js/lib/account/orders/OrderList.js b/StoneIsland/www/js/lib/account/orders/OrderList.js
deleted file mode 100644
index 876f609e..00000000
--- a/StoneIsland/www/js/lib/account/orders/OrderList.js
+++ /dev/null
@@ -1,17 +0,0 @@
-var OrderList = ScrollableView.extend({
-
-  el: "#order_list",
-  
-  template: $("#order_list .template"),
-
-  initialize: function(opt){
-    this.parent = opt.parent
-    this.scroller = new IScroll('#order_list', app.iscroll_options)
-  },
-
-  show: function(){
-    document.body.className = "orders"
-    app.orders.el.className = "list"
-  },
-  
-})
diff --git a/StoneIsland/www/js/lib/account/orders/SingleOrder.js b/StoneIsland/www/js/lib/account/orders/SingleOrder.js
deleted file mode 100644
index 21416401..00000000
--- a/StoneIsland/www/js/lib/account/orders/SingleOrder.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var SingleOrder = ScrollableView.extend({
-
-  el: "#single_order",
-
-  template: $("#single_order .template"),
-
-  initialize: function(opt){
-    this.parent = opt.parent
-    this.scroller = new IScroll('#single_order', app.iscroll_options)
-  },
-
-  show: function(id){
-    document.body.className = "orders"
-    app.orders.el.className = "single"
-    this.deferScrollToTop()
-  },
-
-})
diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js
index 9a24afa5..0240e050 100644
--- a/StoneIsland/www/js/lib/cart/CartSummary.js
+++ b/StoneIsland/www/js/lib/cart/CartSummary.js
@@ -95,6 +95,10 @@ var CartSummary = ScrollableView.extend({
             // console.log(size)
             size_name = size['Default']['Text']
             size_name = SIZE_LOOKUP[ size_name ] || size_name
+            if (! size_name && ! size['Default']['Labeled']) {
+              size_name = size['Default']['Text'] + " " + size['Default']['ClassFamily']
+            }
+
             return true
           }
           return false
@@ -109,7 +113,6 @@ var CartSummary = ScrollableView.extend({
                     .replace(/{{color}}/, color_name)
                     .replace(/{{quantity}}/, 1)
                     .replace(/{{price}}/, as_cash(details.Item.Price.DiscountedPrice))
-        $el.data("price", details.Item.Price.DiscountedPrice)
         $el.html(t)
         this.refreshScroller()
       }.bind(this))
diff --git a/StoneIsland/www/js/lib/cart/CartThanks.js b/StoneIsland/www/js/lib/cart/CartThanks.js
index 993fd9ac..eb95197b 100644
--- a/StoneIsland/www/js/lib/cart/CartThanks.js
+++ b/StoneIsland/www/js/lib/cart/CartThanks.js
@@ -14,6 +14,8 @@ var CartThanks = View.extend({
     app.cart.el.className = "thanks"
     app.footer.show("&lt; BACK TO COLLECTION")
     app.footer.hide()
+    
+    app.orders.loaded = false
   },
   
   ok: function(){
diff --git a/StoneIsland/www/js/lib/nav/CreditCardView.js b/StoneIsland/www/js/lib/nav/CreditCardView.js
index 1855b7a9..ba3ac54a 100644
--- a/StoneIsland/www/js/lib/nav/CreditCardView.js
+++ b/StoneIsland/www/js/lib/nav/CreditCardView.js
@@ -4,7 +4,7 @@ var CreditCardView = SerializableView.extend({
   template: $("#creditcard_template").html(),
   
   cardOptions: {
-    accept: ['visa', 'mastercard', 'amex'],
+    accept: ['visa', 'mastercard', 'amex', 'jcb'],
   },
   
   events: {
@@ -46,8 +46,15 @@ var CreditCardView = SerializableView.extend({
     if (! data.ExpirationYear || data.ExpirationYear == "NONE") { errors.push([ "ExpirationYear", "Please select the expiration month." ]) }
     data.UserId = auth.user_id
     if (card.valid) {
-      data.Type = card.card_type.name
+      data.Type = YOOX_CREDIT_CARD_NAME_LOOKUP[ card.card_type.name ]
     }
   },
 
 })
+
+var YOOX_CREDIT_CARD_NAME_LOOKUP = {
+  "visa": "Visa",
+  "mastercard": "Mastercard",
+  "amex": "AmericanExpress",
+  "jcb": "JCB",
+}
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 87b386d3..18a8af52 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -45,7 +45,7 @@ var ProductView = ScrollableView.extend({
   cache: {},
   
   find: function(code, cb){
-    data = app.collection.items[code]
+    data = app.collection.items[code] || {}
     if (code in this.cache) {
       return cb(data, this.cache[code])
     }
@@ -168,9 +168,6 @@ var ProductView = ScrollableView.extend({
         sizes: {},
       }
     })
-    console.log(details['Item']['ModelSizes'])
-    ClassFamily: "inches"
-    Text: "34"
 
     details['Item']['ModelSizes'].forEach(function(size){
       var label = SIZE_LOOKUP[ size['Default']['Text'] ]
diff --git a/StoneIsland/www/js/lib/view/Scrollable.js b/StoneIsland/www/js/lib/view/Scrollable.js
index 7cd96f89..d06ed590 100644
--- a/StoneIsland/www/js/lib/view/Scrollable.js
+++ b/StoneIsland/www/js/lib/view/Scrollable.js
@@ -1,7 +1,7 @@
 var ScrollableView = View.extend({
   
   events: {
-    "load img": "deferScrollToTop",
+    "load img": "deferRefresh",
   },
 
   deferScrollToTop: function(){
@@ -10,8 +10,15 @@ var ScrollableView = View.extend({
   
   refreshScroller: function(){
     this.scroller.refresh()
+    clearTimeout( this.scrollerRefreshTimeout )
   },
-  
+
+  scrollerRefreshTimeout: null,
+  deferRefresh: function(){
+    clearTimeout( this.scrollerRefreshTimeout )
+    this.scrollerRefreshTimeout = setTimeout(this.refreshScroller.bind(this))
+  },
+    
   scrollToTop: function(){
     this.scroller.refresh()
     app.collection.scroller.scrollTo(0, 0)
diff --git a/StoneIsland/www/js/sdk/account.js b/StoneIsland/www/js/sdk/account.js
index fe5f03cd..3eb3f3bd 100644
--- a/StoneIsland/www/js/sdk/account.js
+++ b/StoneIsland/www/js/sdk/account.js
@@ -96,6 +96,38 @@ sdk.account = (function(){
     })
   }
   
+  account.fetch_orders = function(opt){
+    return $.ajax({
+      method: "GET",
+      url: sdk.path("Account.API/1.5", "users/" + auth.user_id + "/orders.json"),
+      headers: {
+        "x-yoox-appname": auth.appname,
+        "x-yoox-account-token": auth.access_token,
+      },
+      data: JSON.stringify( opt.data ),
+      success: function(data){
+        opt.success(data)
+      },
+      error: opt.error,
+    })
+  }
+  
+  account.fetch_single_order = function(opt){
+    return $.ajax({
+      method: "GET",
+      url: sdk.path("Account.API/1.5", "users/" + auth.user_id + "/orders/" + opt.id + ".json"),
+      headers: {
+        "x-yoox-appname": auth.appname,
+        "x-yoox-account-token": auth.access_token,
+      },
+      data: JSON.stringify( opt.data ),
+      success: function(data){
+        opt.success(data)
+      },
+      error: opt.error,
+    })
+  }
+  
   return account
 
 })()