cart billing/confirm html

4 files changed, 156 insertions, 7 deletions

diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 9c92a4f1..cbe67700 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -635,7 +635,7 @@
                 <label class="checkbox-caption" for="address-checkbox-{{id}}">
                   {{name}}<br>
                   {{address}}<br>
-                  {{city}} {{state}} {{zip}}
+                  {{city}}, {{state}} {{zip}}
                 </label>
               </div>
             </script>
@@ -651,7 +651,7 @@
                  <label for="express-shipping"></label>
               </div>
               <label class="checkbox-caption" for="express-shipping">
-                <b>COMPLIMENTARY EXPRESS $10</b><br>
+                <b>COMPLIMENTARY EXPRESS $19.50</b><br>
                 (DELIVERY IN 2-4 WORKING DAYS)
               </label>
             </div>
@@ -661,7 +661,7 @@
                  <label for="standard-shipping"></label>
               </div>
               <label class="checkbox-caption" for="standard-shipping">
-                <b>STANDARD SHIPPING</b><br>
+                <b>STANDARD SHIPPING $9.50</b><br>
                 (DELIVERY IN 5-8 WORKING DAYS)
               </label>
             </div>
@@ -685,8 +685,55 @@
     <div id="cart_payment">
       <div class="scroll">
         <form>
-        <div class="billing-container container">
-          <div class="container-row">
+        
+          <div class="billing-container container">
+            <div class="container-row">
+
+              <div class="address_list checkbox-container">
+                <div class="checkbox-row">
+                  <div class="checkbox-toggle">
+                     <input id="same-as-shipping" type="checkbox" name="SameAsShipping" value="true">
+                     <label for="same-as-shipping"></label>
+                  </div>
+                  <label class="checkbox-caption" for="same-as-shipping">
+                    SAME AS SHIPPING ADDRESS
+                  </label>
+                </div>
+              </div>
+
+              <div class="dropdown-wrapper">
+                <div class="dropdown-title add_edit">add / edit</div>
+                <div class="dropdown select_address">
+                  BILLING ADDRESS
+                </div>
+              </div>
+              <div class="address_list checkbox-container">
+                <script type="text/html" class="template">
+                  <div class="checkbox-row">
+                    <div class="checkbox-toggle">
+                       <input id="address-checkbox-{{id}}" type="radio" name="AddressId" value="{{id}}" {{checked}}>
+                       <label for="address-checkbox-{{id}}"></label>
+                    </div>
+                    <label class="checkbox-caption" for="address-checkbox-{{id}}">
+                      {{name}}<br>
+                      {{address}}<br>
+                      {{city}}, {{state}} {{zip}}
+                    </label>
+                  </div>
+                </script>
+              </div>
+
+              <div class="dropdown-wrapper">
+                <div class="dropdown-title add_edit">add / edit</div>
+                <div class="dropdown select_address">
+                  PAYMENT METHOD
+                </div>
+              </div>
+
+              <div class="cc"></div>
+              <div class="address"></div>
+            </div>
+
             <div class="container-fill">
               <div class="container-message">
                 <span class="msg">
@@ -696,6 +743,7 @@
               </div>
             </div>
           </div>
+
         </form>
       </div>
     </div>
@@ -703,6 +751,62 @@
     <div id="cart_confirm">
       <div class="scroll">
         <h1>CONFIRM</h1>
+        
+        <div class="order_section">
+          <h2>ORDER SUMMARY</h2>
+
+          <div class="rows">
+            <script type="text/html" class="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>
+
+        <div class="order_section">
+          <h2>SHIP TO</h2>
+          
+          <div class="shipping_address"></div>
+          <div class="shipping_method"></div>
+        </div>
+
+        <div class="order_section">
+          <h2>BILL TO</h2>
+          
+          <div class="payment_name"></div>
+          <div class="payment_method"></div>
+          <div class="payment_address"></div>
+        </div>
+
       </div>
     </div>
     
@@ -847,6 +951,7 @@
  -->
     </div>
   </div>
+<!--
   <div class="checkbox-container save_as_default">
     <div class="checkbox-row">
       <div class="checkbox-toggle">
@@ -858,6 +963,7 @@
       </label>
     </div>
   </div>
+-->
 
 </script>
 
diff --git a/StoneIsland/www/js/lib/account/AccountView.js b/StoneIsland/www/js/lib/account/AccountView.js
index f76541be..116d5ba1 100644
--- a/StoneIsland/www/js/lib/account/AccountView.js
+++ b/StoneIsland/www/js/lib/account/AccountView.js
@@ -18,6 +18,9 @@ var AccountView = View.extend({
   
   addresses: [],
   addressLookup: {},
+  ccs: [],
+  ccLookup: {},
+  
   listAddresses: function(cb){
     sdk.address.list({
       success: function(data){
@@ -64,10 +67,16 @@ var AccountView = View.extend({
   
   populateCreditCards: function(data, cb){
     console.log(data)
+    this.ccs = data.CreditCards
+    this.ccLookup = {}
     if (! data.CreditCards || ! data.CreditCards.length) {
     }
     else {
+      data.CreditCards.forEach(function(cc){
+        this.ccLookup[cc.Id] = cc
+      }.bind(this))
       app.payment.populate( data.CreditCards[0] )
+      app.cart.payment.populate()
     }
     cb && cb()
   },
diff --git a/StoneIsland/www/js/lib/cart/CartPayment.js b/StoneIsland/www/js/lib/cart/CartPayment.js
index 8412f35d..90fe4a76 100644
--- a/StoneIsland/www/js/lib/cart/CartPayment.js
+++ b/StoneIsland/www/js/lib/cart/CartPayment.js
@@ -2,16 +2,26 @@ var CartPayment = FormView.extend({
   
   el: "#cart_payment",
   
+  action: sdk.cart.set_credit_card,
+  
   events: {
+    "change [name=same_as_shipping]": "toggle_shipping",
+    "click .dropdown-wrapper": "toggle_dropdown",
   },
 
   initialize: function(opt){
     this.parent = opt.parent
     this.$form = this.$("form")
     this.$msg = this.$(".msg")
+    this.$address_list = this.$(".address_list")
+    this.$address_form = this.$(".address")
+    this.$cc_form = this.$(".cc")
+
     this.address = new AddressView ({ parent: this, checkPhone: false })
     this.cc = new CreditCardView ({ parent: this })
     this.scroller = new IScroll('#cart_payment', app.iscroll_options)
+    this.address.disabled = true
+    this.cc.disabled = true
   },
 
   // sdk.cart.set_credit_card
@@ -27,12 +37,29 @@ var CartPayment = FormView.extend({
     app.footer.show("CONFIRM &gt;", "CANCEL")
     window.location.hash = "#/cart/payment"
 
+    this.populate()
     this.deferScrollToTop()
+  },
+
+  toggle_dropdown: function(state){
+    if (! app.account.ccs.length) {
+      state = false
+    }
+    this.list_mode = typeof state == "boolean" ? state : ! this.list_mode
+    this.address.disabled = this.list_mode
+    this.$address_form.toggle(! this.list_mode)
+    this.$cc_form.toggle(! this.list_mode)
+    this.$address_list.toggle(this.list_mode)
+  },
 
-    sdk.cart.set_payment_type({ data: payment_id })
+  populate: function(){
+    app.account.ccs.forEach(function(cc){
+    })
   },
   
   save: function(){
+    // use stored credit card
+    return
   },
   
   cancel: function(){
diff --git a/StoneIsland/www/js/lib/cart/CartShipping.js b/StoneIsland/www/js/lib/cart/CartShipping.js
index d1e1a97e..e52eec4c 100644
--- a/StoneIsland/www/js/lib/cart/CartShipping.js
+++ b/StoneIsland/www/js/lib/cart/CartShipping.js
@@ -15,6 +15,7 @@ var CartShipping = FormView.extend({
   initialize: function(opt){
     this.parent = opt.parent
     this.$form = this.$("form")
+    this.$dropdown_wrapper = this.$(".dropdown-wrapper")
     this.$address_list = this.$(".address_list")
     this.$address_form = this.$(".address")
     this.$msg = this.$(".msg")
@@ -37,7 +38,8 @@ var CartShipping = FormView.extend({
     this.$(".save_as_default").show()
     this.$address_list.empty()
     if (! app.account.addresses.length) {
-      this.toggle_dropdown(true)
+      this.toggle_dropdown(false)
+      return
     }
     app.account.addresses.forEach(function(address){
       var t = this.template.replace(/{{id}}/g, address.Id)
@@ -52,7 +54,11 @@ var CartShipping = FormView.extend({
   },
   
   toggle_dropdown: function(state){
+    if (! app.account.addresses.length) {
+      state = false
+    }
     this.list_mode = typeof state == "boolean" ? state : ! this.list_mode
+    this.$dropdown_wrapper.toggle( ! app.account.addresses.length )
     this.address.disabled = this.list_mode
     this.$address_form.toggle(! this.list_mode)
     this.$address_list.toggle(this.list_mode)
@@ -70,6 +76,7 @@ var CartShipping = FormView.extend({
   finalize: function(data){
     var shipping_info = {}, address_data, address_id
     var shipping_type = $("[name=ShippingType]").filter(function(){ return $(this).prop("checked") }).val()
+
     sdk.shipping.set_delivery_type({
       id: this.shipping_types[shipping_type],
       success: function(data){ console.log("set shipping type", data) },