added delivery costs to total / added ribica logo just for fun / added validation check when confirming delivery

front-ui/app/components/cart/cartPage.js

@@ -38,7 +38,7 @@ var CartPage = React.createClass({
       console.log("bla  :" , this.state.items.length);
       var cartTotal = ( 
         <div className="row cart-total">
-           <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} /> 
+           <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts}/> 
            <div className="col-md-1 span1">
               <button className="btn btn-warning" onClick={this._onOrderClick}>Izgleda OK</button>
            </div>

front-ui/app/components/cart/cartTotal.js

@@ -5,6 +5,10 @@ var React = require('react'),
 var Router = require('react-router');
 
 
+
+
+
+
 var CartTotal = React.createClass({
 
     render: function() {
@@ -20,9 +24,20 @@ var CartTotal = React.createClass({
 
       });
 
+      var deliveryCosts = this.props.deliveryCosts.get('delivery_price');
+
       return (  
         <div className="col-md-3 cart-total">
-          Ukupno: {Globals.FormatCurrency(total)} + Dostava
+          <div>
+          Roba: {Globals.FormatCurrency(total)}
+          </div>
+          <div>
+          Dostava: {Globals.FormatCurrency(deliveryCosts)}         
+          </div>
+          <div>
+          Ukupno: {Globals.FormatCurrency(total + (+deliveryCosts))}         
+          </div>
+
         </div>
         );       
 

front-ui/app/components/cart/checkoutPage.js

@@ -599,10 +599,10 @@ var CheckoutPage = React.createClass({
             <div className="form-group">
                   <label className="col-md-4 control-label" htmlFor="order"></label>
                   <div className="col-md-8">
-                        <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} />  <button id="order" name="order" className="btn btn-success" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Naruči</button>
+                        <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />  <button id="order" name="order" className="btn btn-success" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Naruči</button>
                   </div>
             </div>
-      </fieldset>
+      </fieldset> 
 </div>
 </div>
         );       

front-ui/app/components/rootApp.js

@@ -16,7 +16,8 @@ var RootApp = React.createClass({
     <div className='page-header'>
         <h1 className="main-heading">
         
-        <Link to="app"><span style={{color: "#cd3071"}}>ribica.ba</span></Link>
+        <Link to="app"><img src="https://res.cloudinary.com/lfvt7ps2n/image/upload/c_scale,w_132/v1426226452/ribica-ispunjava-zelje_nng0gn.png" /></Link>
+
         </h1>
         <div style={{float:'right'}}>
             <div style={{display: 'inline-block'}}>

front-ui/app/models/place.js

@@ -0,0 +1,22 @@
+var Globals = require('../globals');
+var Backbone = require('backbone');
+var _ = require('underscore');
+
+var FREE_SHIPPING_LIMIT = 50;
+
+var Place = Backbone.Model.extend({
+
+	initialize: function(options) {
+            options || (options = {});
+            this.postalCode = options.postalCode;
+    },
+
+	url: function() {
+		return Globals.ApiUrl + '/place/' + this.postalCode.trim();
+	}
+
+});
+
+
+
+module.exports = Place;

front-ui/app/stores/cartStore.js

@@ -8,6 +8,7 @@ var ItemInCartCollection = require('../models/itemInCartCollection');
 var ItemCollection = require('../models/itemCollection');
 var DeliveryDestination = require('../models/deliveryDestination');
 var OrderConfirmation = require('../models/orderConfirmation');
+var Place = require('../models/place');
 
 var _ = require('underscore');
 
@@ -18,6 +19,9 @@ var _itemsForDisplay = new ItemCollection();
 _itemsForDisplay.setFromCart(true);
 var _deliveryDestination = new DeliveryDestination();
 var _deliveryDestinationErrors = {};
+var _deliveryCosts = new Place({
+    postalCode: _deliveryDestination.get('place')
+})
 
 
 var loadCart = function() {
@@ -41,6 +45,7 @@ var loadCart = function() {
         _deliveryDestination.fetch({
             success: function() {
                 validateDeliveryDestinationForm();
+                fetchPlace();
                 CartActions.dataLoaded();
             }
         });
@@ -48,6 +53,19 @@ var loadCart = function() {
 };
 
 
+var fetchPlace = function() {
+    _deliveryCosts = new Place({
+        postalCode: _deliveryDestination.get('place')
+    })
+    _deliveryCosts.fetch({
+        success: function() {
+            CartActions.dataLoaded();
+        }
+    })
+
+}
+
+
 var saveCartStateForItem = function(itemId) {
     var item = CartStore.getStateFor(itemId);
     item.save({
@@ -84,15 +102,23 @@ var takeItemOut = function(itemId) {
 
 var changeDeliveryDestinationProperty = function(property, value) {
     _deliveryDestination.set(property, value);
+
+    if (property === 'place') {
+        fetchPlace();
+    }
     validateDeliveryDestinationForm();
 };
 
 
-var confirmOrder = function () {
+var confirmOrder = function() {
     console.log("confirming");
-    var oc = new OrderConfirmation({ hamo: 'meho' });
-    oc.save({b:'b'}, {
-        success: function () {
+    var oc = new OrderConfirmation({
+        hamo: 'meho'
+    });
+    oc.save({
+        b: 'b'
+    }, {
+        success: function() {
             console.log("done");
             NavigationActions.goToThankYou();
         }
@@ -102,7 +128,7 @@ var confirmOrder = function () {
 
 var saveDeliveryDestination = function() {
     console.log("saving delivery destination");
-    _deliveryDestination.save(null,{
+    _deliveryDestination.save(null, {
         success: function() {
             console.log("saved delivery destination");
             confirmOrder();
@@ -110,32 +136,32 @@ var saveDeliveryDestination = function() {
     })
 };
 
-var validateDeliveryDestinationForm = function () {
+var validateDeliveryDestinationForm = function() {
     _deliveryDestinationErrors = {};
-    
+
     var nameRegex = /.+\s+.+/i;
-    if(_deliveryDestination.get('name').search(nameRegex) < 0) {
-        _deliveryDestinationErrors['name'] = "I prezime i ime su obavezni"; 
+    if (_deliveryDestination.get('name').search(nameRegex) < 0) {
+        _deliveryDestinationErrors['name'] = "I prezime i ime su obavezni";
     }
 
     var addressRegex = /.+\s+.+/i;
-    if(_deliveryDestination.get('address').search(addressRegex) < 0) {
-        _deliveryDestinationErrors['address'] = "Adresa mora biti ispravna"; 
+    if (_deliveryDestination.get('address').search(addressRegex) < 0) {
+        _deliveryDestinationErrors['address'] = "Adresa mora biti ispravna";
     }
 
     var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/i;
-    if(_deliveryDestination.get('email').search(emailRegex) < 0) {
-        _deliveryDestinationErrors['email'] = "Email mora biti ispravno upisan"; 
+    if (_deliveryDestination.get('email').search(emailRegex) < 0) {
+        _deliveryDestinationErrors['email'] = "Email mora biti ispravno upisan";
     }
 
     var phoneRegex = /[\d\s-]{7,8}/i;
-    if(_deliveryDestination.get('phone').search(phoneRegex) < 0) {
-        _deliveryDestinationErrors['phone'] = "Telefon mora biti ispravan"; 
+    if (_deliveryDestination.get('phone').search(phoneRegex) < 0) {
+        _deliveryDestinationErrors['phone'] = "Telefon mora biti ispravan";
     }
 
     var placeRegex = /^\s{0,1}\d{5}$/i;
-    if(_deliveryDestination.get('place').search(placeRegex) < 0) {
-        _deliveryDestinationErrors['place'] = "Mjesto mora biti izabrano"; 
+    if (_deliveryDestination.get('place').search(placeRegex) < 0) {
+        _deliveryDestinationErrors['place'] = "Mjesto mora biti izabrano";
     }
 
     var requiredFields = ["name", "email", "place", 'address', 'phone'];
@@ -143,17 +169,17 @@ var validateDeliveryDestinationForm = function () {
         var value = _deliveryDestination.get(requiredFields[i]);
         if (value === undefined || value === null || value === "") {
             // if it's required there will be a star there
-            _deliveryDestinationErrors[requiredFields[i]] = "*"; 
+            _deliveryDestinationErrors[requiredFields[i]] = "*";
         }
     }
 
 }
 
 
-var isDeliveryDestinationValid = function () {
-     return Object.getOwnPropertyNames(_deliveryDestinationErrors).length === 0;
-}
-// Extend CartStore with EventEmitter to add eventing capabilities
+var isDeliveryDestinationValid = function() {
+        return Object.getOwnPropertyNames(_deliveryDestinationErrors).length === 0;
+    }
+    // Extend CartStore with EventEmitter to add eventing capabilities
 var CartStore = _.extend({}, EventEmitter.prototype, {
 
     getStateFor: function(itemId) {
@@ -184,8 +210,8 @@ var CartStore = _.extend({}, EventEmitter.prototype, {
             itemCounts: states,
             deliveryDestination: _deliveryDestination,
             deliveryDestinationErrors: _deliveryDestinationErrors,
-            isDeliveryDestinationValid: isDeliveryDestinationValid()
-
+            isDeliveryDestinationValid: isDeliveryDestinationValid(),
+            deliveryCosts: _deliveryCosts
         };
         return state;
     },
@@ -235,7 +261,9 @@ AppDispatcher.register(function(payload) {
             // do nothing - jsut emmit change
             break;
         case CartConstants.SAVE_CART_STATE_FOR_ITEM:
-            saveCartStateForItem(action.itemId);
+            if (isDeliveryDestinationValid()) {
+                saveCartStateForItem(action.itemId);
+            }
             break;
         case CartConstants.CHANGE_DELIVERY_DESTINATION_PROPERTY:
             changeDeliveryDestinationProperty(action.propertyName, action.value)