choose shipping

lib/resources/store.js

@@ -200,9 +200,13 @@ exports.routes = function () {
     });
   });
 
-  app.post('/api/store/rate', function (req, res) {
-    var products = req.body.products;
+  app.post('/api/store/shipping', function (req, res) {
     var address = req.body.address;
+    var cart = req.body.cart;
+
+    var items = _.map(cart, function (quantity, sku) {
+      return {sku: sku, quantity: quantity};
+    });
 
     var params = {
       options: {
@@ -213,32 +217,25 @@ exports.routes = function () {
       },
       order: {
         shipTo: {
-          address1: '5811 Sypes Canyon Road',
+          address1: address.address,
           address2: '',
           address3: '',
-          city: 'Bozeman',
-          postalCode: '59715',
-          region: 'MT',
-          country: 'US',
+          city: address.city,
+          postalCode: address.zip,
+          // region: address.state,
+          country: address.country,
           isCommercial: 0,
           isPoBox: 0
         },
-        items: [
-          {
-            sku: 'M1-Island-Brush',
-            quantity: 1
-          },
-          {
-            sku: 'M3-Island-Brush',
-            quantity: 2
-          }
-        ]
+        items: items
       }
     };
 
     shipwire.rate.get(params, function (err, data) {
-      console.log('shipwire:: ', err, JSON.stringify(data))
-      res.send();
+      if (errorHandler(err, req, res)) return;
+
+      var options = data.resource.rates[0].serviceOptions;
+      res.send({options: options});
     });
 
   });

public/css/fontello-codes.css

@@ -49,4 +49,5 @@
 .icon-basket:before { content: '\e82f'; } /* '' */
 .icon-down-dir:before { content: '\e830'; } /* '' */
 .icon-up-dir:before { content: '\e831'; } /* '' */
-.icon-flash:before { content: '\e832'; } /* '' */
+.icon-flash:before { content: '\e832'; } /* '' */
+.icon-gauge:before { content: '\e833'; } /* '' */

public/css/fontello-ie7-codes.css

@@ -49,4 +49,5 @@
 .icon-basket { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-down-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-up-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-flash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-flash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-gauge { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/css/fontello-ie7.css

@@ -60,4 +60,5 @@
 .icon-basket { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-down-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-up-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-flash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-flash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-gauge { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/css/fontello.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?95586498');
-  src: url('../font/fontello.eot?95586498#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff?95586498') format('woff'),
-       url('../font/fontello.ttf?95586498') format('truetype'),
-       url('../font/fontello.svg?95586498#fontello') format('svg');
+  src: url('../font/fontello.eot?18962076');
+  src: url('../font/fontello.eot?18962076#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?18962076') format('woff'),
+       url('../font/fontello.ttf?18962076') format('truetype'),
+       url('../font/fontello.svg?18962076#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?95586498#fontello') format('svg');
+    src: url('../font/fontello.svg?18962076#fontello') format('svg');
   }
 }
 */
@@ -104,4 +104,5 @@
 .icon-basket:before { content: '\e82f'; } /* '' */
 .icon-down-dir:before { content: '\e830'; } /* '' */
 .icon-up-dir:before { content: '\e831'; } /* '' */
-.icon-flash:before { content: '\e832'; } /* '' */
+.icon-flash:before { content: '\e832'; } /* '' */
+.icon-gauge:before { content: '\e833'; } /* '' */

public/font/config.json

@@ -252,6 +252,12 @@
       "code": 59429,
       "src": "entypo"
     },
+    {
+      "uid": "3a6f0140c3a390bdb203f56d1bfdefcb",
+      "css": "gauge",
+      "code": 59443,
+      "src": "entypo"
+    },
     {
       "uid": "bczb7qup4axmc490xmuuv8qdhcnbgeyf",
       "css": "user",

public/js/views/store.js

@@ -11,9 +11,12 @@ define([
   'util',
   'text!../../templates/store.html',
   'text!../../templates/store.title.html',
+  'text!../../templates/shipping.address.html',
+  'text!../../templates/shipping.options.html',
   'views/lists/events',
   'views/lists/ticks'
-], function ($, _, Backbone, mps, rest, util, template, title, Events, Ticks) {
+], function ($, _, Backbone, mps, rest, util, template, title, shippingAddress,
+      shippingOptions, Events, Ticks) {
 
   return Backbone.View.extend({
 
@@ -22,7 +25,7 @@ define([
     initialize: function (app) {
       this.app = app;
       this.subscriptions = [
-        mps.subscribe('cart/checkout', _.bind(this.checkout, this)),
+        mps.subscribe('cart/checkout', _.bind(this.getShippingOptions, this)),
         mps.subscribe('cart/empty', _.bind(this.emptyCart, this))
       ];
       this.on('rendered', this.setup, this);
@@ -135,31 +138,57 @@ define([
       mps.publish('cart/update');
     },
 
-    checkout: function () {
+    getShippingOptions: function () {
+      $.fancybox(_.template(shippingAddress)({
+        member: this.app.profile.member
+      }), {
+        openEffect: 'fade',
+        closeEffect: 'fade',
+        closeBtn: false,
+        padding: 0
+      });
+      $('.modal-cancel').click(function (e) {
+        $.fancybox.close();
+      });
+      $('.modal-confirm').click(_.bind(function (e) {
+
+        // Get shipping options for sending the cart items to this address.
+        var payload = {
+          cart: store.get('cart') || {},
+          address: $('.shipping-address-form').serializeObject()
+        };
+        rest.post('/api/store/shipping', payload, _.bind(function (err, data) {
+
+          store.set('shippingOptions', data.options);
+
+          $.fancybox.close();
+          this.chooseShippingOption();
+        }, this));
+      }, this));
+
+      return false;
+    },
 
-      rest.post('/api/store/rate', {}, function (err) {
-        console.log('done');
+    chooseShippingOption: function () {
+      $.fancybox(_.template(shippingOptions)({
+        member: this.app.profile.member,
+        cart: store.get('cart'),
+        address: store.get('address'),
+        options: store.get('shippingOptions')
+      }), {
+        openEffect: 'fade',
+        closeEffect: 'fade',
+        closeBtn: false,
+        padding: 0
       });
+      $('.modal-cancel').click(function (e) {
+        $.fancybox.close();
+      });
+      $('.modal-confirm').click(_.bind(function (e) {
 
-      console.log('checkout.... ')
-      return;
+      }, this));
 
-      this.stripeHandler.open({
-        name: 'We Are Island, Inc.',
-        description: 'These things...',
-        amount: price,
-        // image: product.image,
-        token: function (token, args) {
-          var payload = {
-            token: token,
-            // product: product,
-            address: args
-          };
-          rest.post('/api/store/orders', payload, function (err) {
-            console.log('done');
-          });
-        }
-      });
+      return false;
     },
 
     emptyCart: function () {

public/templates/shipping.address.html

@@ -0,0 +1,19 @@
+<div class="modal">
+  <span class="modal-title"><i class="icon-location"></i> Where should we send this stuff?</span>
+  <div class="modal-body">
+    <form class="shipping-address-form">
+      <input type="text" name="name" placeholder="Name" />
+      <input type="text" name="address" placeholder="Address" />
+      <input type="text" name="zip" placeholder="ZIP" />
+      <input type="text" name="city" placeholder="City" />
+      <input type="text" name="country" placeholder="Country" />
+    </form>
+  </div>
+  <div class="modal-actions">
+    <button class="modal-cancel modal-button button">Cancel</button>
+    <button class="modal-confirm modal-button modal-delete button">
+      <span>Choose Shipping</span> <i class="icon-angle-right"></i>
+    </button>
+    <div class="clear"></div>
+  </div>
+</div>

public/templates/shipping.options.html

@@ -0,0 +1,39 @@
+<div class="modal">
+  <span class="modal-title"><i class="icon-gauge"></i> How fast do you want it?</span>
+  <div class="modal-body">
+    <form class="shipping-options-form">
+      <table>
+        <tbody>
+          <% _.each(options, function (o) {
+            var shipment = o.shipments[0];
+            console.log(shipment)
+          %>
+            <tr>
+              <td>
+                <input type="radio" name="option" value="<%= o.serviceLevelCode %>" />
+              </td>
+              <td>
+                <%= o.serviceLevelName %> (<%= shipment.carrier.description %>)
+              </td>
+              <td>
+                Ships <%= new Date(shipment.expectedShipDate).format('ddd, mmm d, h:MMtt Z') %>
+                <br />
+                Delivered by <%= new Date(shipment.expectedDeliveryMaxDate).format('ddd, mmm d, h:MMtt Z') %>
+              </td>
+              <td>
+                <%= shipment.cost.amount %> (<%= shipment.cost.currency %>)
+              </td>
+            </tr>
+          <% }); %>
+        </tbody>
+      </table>
+    </form>
+  </div>
+  <div class="modal-actions">
+    <button class="modal-cancel modal-button button">Cancel</button>
+    <button class="modal-confirm modal-button modal-delete button">
+      <span>Choose Billing</span> <i class="icon-angle-right"></i>
+    </button>
+    <div class="clear"></div>
+  </div>
+</div>