toggle address form on cart

8 files changed, 103 insertions, 39 deletions

diff --git a/StoneIsland/www/css/cart.css b/StoneIsland/www/css/cart.css
index 6467e8d3..6ba83675 100644
--- a/StoneIsland/www/css/cart.css
+++ b/StoneIsland/www/css/cart.css
@@ -1,11 +1,5 @@
 
 .cart #cart { display: block; }
-.cart #footer .cancel { display: block }
-.cart #footer .checkout { display: block }
-/* 
-.cart #footer .checkout_proceed { display: block }
- */
-
 #cart {
   display: none;
 }
@@ -246,4 +240,10 @@ color:#000;
   background:#a9a9a9;
   position:absolute;
   z-index:999;
-}
\ No newline at end of file
+}
+#cart_shipping .address {
+  display: none;
+}
+.address .save_as_default {
+  display: none;
+}
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 62046a43..9c92a4f1 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -620,24 +620,27 @@
       <div class="scroll">
         <form>
           <div class="dropdown-wrapper">
-          <div class="dropdown-title add_edit">add / edit</div>
-          <div class="dropdown select_address">
-            ADDRESS
-          </div>
+            <div class="dropdown-title add_edit">add / edit</div>
+            <div class="dropdown select_address">
+              ADDRESS
+            </div>
           </div>
-          <div class="address_form">
-            <div class="checkbox-container">
+          <div class="address_list checkbox-container">
+            <script type="text/html" class="template">
               <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>
+                   <input id="address-checkbox-{{id}}" type="radio" name="AddressId" value="{{id}}" {{checked}}>
+                   <label for="address-checkbox-{{id}}"></label>
                 </div>
-                <label class="checkbox-caption" for="save_as_default_cart_shipping">
-                  SAVE AS DEFAULT
+                <label class="checkbox-caption" for="address-checkbox-{{id}}">
+                  {{name}}<br>
+                  {{address}}<br>
+                  {{city}} {{state}} {{zip}}
                 </label>
               </div>
-            </div>
+            </script>
           </div>
+          <div class="address"></div>
           
           <h3>SHIPPING METHOD</h3>
     
@@ -664,6 +667,17 @@
             </div>
           </div>
 
+          <div class="container-row">
+            <div class="container-fill">
+              <div class="container-message">
+                <span class="msg">
+                  * Your personal and payment<br>
+                  information will always remain private           
+                </span>
+              </div>
+            </div>
+          </div>
+
         </form>
       </div>
     </div>
@@ -672,29 +686,16 @@
       <div class="scroll">
         <form>
         <div class="billing-container container">
-        <div class="container-row">
-          <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 class="container-row">
+            <div class="container-fill">
+              <div class="container-message">
+                <span class="msg">
+                  * Your personal and payment<br>
+                  information will always remain private           
+                </span>
               </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">
-              <span class="msg">
-                * Your personal and payment<br>
-                information will always remain private           
-              </span>
             </div>
           </div>
-          </div>
         </form>
       </div>
     </div>
@@ -846,6 +847,18 @@
  -->
     </div>
   </div>
+  <div class="checkbox-container save_as_default">
+    <div class="checkbox-row">
+      <div class="checkbox-toggle">
+         <input id="save_as_default_cart_shipping" type="checkbox" name="IsDefault" value="true">
+         <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>
diff --git a/StoneIsland/www/js/lib/account/AccountView.js b/StoneIsland/www/js/lib/account/AccountView.js
index a100ded0..fb22cf60 100644
--- a/StoneIsland/www/js/lib/account/AccountView.js
+++ b/StoneIsland/www/js/lib/account/AccountView.js
@@ -16,6 +16,7 @@ var AccountView = View.extend({
     }
   },
   
+  addresses: [],
   listAddresses: function(cb){
     sdk.address.list({
       success: function(data){
@@ -26,11 +27,14 @@ var AccountView = View.extend({
   
   populateAddresses: function(data, cb){
     console.log("populate addresses:", data.AddressBook.addressBookItem)
+    
     if (! data.AddressBook) {
       console.log("no addresses")
       cb && cb()
       return
     }
+    
+    this.addresses = data.AddressBook.addressBookItem
     data.AddressBook.addressBookItem.forEach(function(item){
       if (item.IsDefault) {
         console.log("SHIPPING ADDRESS", item)
@@ -41,6 +45,9 @@ var AccountView = View.extend({
         app.payment.populate(item)
       }
     })
+    
+    app.cart.shipping.populate()
+    
     cb && cb()
   },
   
diff --git a/StoneIsland/www/js/lib/cart/CartConfirm.js b/StoneIsland/www/js/lib/cart/CartConfirm.js
index 687f3a93..aa6ec9e4 100644
--- a/StoneIsland/www/js/lib/cart/CartConfirm.js
+++ b/StoneIsland/www/js/lib/cart/CartConfirm.js
@@ -14,6 +14,7 @@ var CartConfirm = FormView.extend({
     document.body.className = "cart"
     app.cart.el.className = "confirm"
     app.footer.show("PLACE ORDER", "CANCEL")
+    window.location.hash = "#/cart/confirm"
     this.deferScrollToTop()
   },
 
diff --git a/StoneIsland/www/js/lib/cart/CartPayment.js b/StoneIsland/www/js/lib/cart/CartPayment.js
index acbd8380..8412f35d 100644
--- a/StoneIsland/www/js/lib/cart/CartPayment.js
+++ b/StoneIsland/www/js/lib/cart/CartPayment.js
@@ -25,6 +25,7 @@ var CartPayment = FormView.extend({
     document.body.className = "cart"
     app.cart.el.className = "payment"
     app.footer.show("CONFIRM &gt;", "CANCEL")
+    window.location.hash = "#/cart/payment"
 
     this.deferScrollToTop()
 
diff --git a/StoneIsland/www/js/lib/cart/CartShipping.js b/StoneIsland/www/js/lib/cart/CartShipping.js
index 7d7c8540..7236347f 100644
--- a/StoneIsland/www/js/lib/cart/CartShipping.js
+++ b/StoneIsland/www/js/lib/cart/CartShipping.js
@@ -2,12 +2,19 @@ var CartShipping = FormView.extend({
   
   el: "#cart_shipping",
   
+  list_mode: true,
+  
+  template: $("#cart_shipping .template").html(),
+  
   events: {
+    "click .dropdown-wrapper": "toggle_dropdown",
   },
 
   initialize: function(opt){
     this.parent = opt.parent
     this.$form = this.$("form")
+    this.$address_list = this.$(".address_list")
+    this.$address_form = this.$(".address")
     this.$msg = this.$(".msg")
     this.address = new AddressView ({ parent: this })
     this.scroller = new IScroll('#cart_shipping', app.iscroll_options)
@@ -17,17 +24,50 @@ var CartShipping = FormView.extend({
     document.body.className = "cart"
     app.cart.el.className = "shipping"
     app.footer.show("PAYMENT &gt;", "CANCEL")
+    window.location.hash = "#/cart/shipping"
+    this.populate()
     this.deferScrollToTop()
   },
   
+  populate: function(){
+    // id checked name address city state zip
+    this.$(".save_as_default").show()
+    this.$address_list.empty()
+    if (! app.account.addresses.length) {
+      this.toggle_dropdown(true)
+    }
+    app.account.addresses.forEach(function(address){
+      var t = this.template.replace(/{{id}}/g, address.Id)
+                           .replace(/{{checked}}/g, address.IsDefault ? "checked" : "")
+                           .replace(/{{name}}/g, address.Name + " " + address.Surname)
+                           .replace(/{{address}}/g, address.Address.replace(/\n$/,"").replace("\n", "<br>"))
+                           .replace(/{{city}}/g, address.City)
+                           .replace(/{{state}}/g, address.Province)
+                           .replace(/{{zip}}/g, address.ZipCode)
+      this.$address_list.append(t)
+    }.bind(this))
+  },
+  
+  toggle_dropdown: function(state){
+    this.list_mode = typeof state == "boolean" ? state : ! this.list_mode
+    this.$address_form.toggle(! this.list_mode)
+    this.$address_list.toggle(this.list_mode)
+  },
+  
   // sdk.cart.set_shipping_address
   // sdk.shipping.get_delivery_types
   // sdk.shipping.set_delivery_type
   
-  save: function(){
+  finalize: function(data){
+    console.log(data)
+    return
+  },
+  
+  success: function(){
   },
   
   cancel: function(){
+    app.cart.cart_summary.show()
   },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js
index 05842380..7872d32c 100644
--- a/StoneIsland/www/js/lib/cart/CartSummary.js
+++ b/StoneIsland/www/js/lib/cart/CartSummary.js
@@ -27,6 +27,7 @@ var CartSummary = ScrollableView.extend({
   show: function(){
     document.body.className = "cart"
     app.cart.el.className = "summary"
+    window.location.hash = "#/cart/summary"
     if (auth.has_cart()) {
       this.load()
     }
diff --git a/StoneIsland/www/js/lib/nav/AddressView.js b/StoneIsland/www/js/lib/nav/AddressView.js
index 7f64f27d..90520a1e 100644
--- a/StoneIsland/www/js/lib/nav/AddressView.js
+++ b/StoneIsland/www/js/lib/nav/AddressView.js
@@ -27,6 +27,7 @@ var AddressView = SerializableView.extend({
     "Surname": "Please enter your last name.",
     "Address1": "Please enter your street address.",
     "City": "Please enter your city.",
+    "ZipCode": "Please enter your zip code.",
   },
   
   validate_fields: function(data, errors){