Add Recipient destination model and functionality on front end

front-api/controllers/cart.rb

@@ -53,6 +53,21 @@ update_delivery_destination = ->() {
 put '/cart/delivery_destination', &update_delivery_destination
 post '/cart/delivery_destination', &update_delivery_destination
 
+get '/cart/recipient_destination' do
+  cart = Cart.just_find(anonymous_id, logged_in_user_id)
+  cart.recipient.to_json(:except => [:created_at, :email_verification_code, :phone_verification_code])
+end
+
+update_recipient_destination = ->() {
+  cart = Cart.just_find(anonymous_id, logged_in_user_id)
+  allowed_keys = ["name", "address", "place", "postal_code", "phone", "email"]
+  params = @json_params.reject { |key,_| !allowed_keys.include?(key) }
+  cart.recipient_destination.update_attributes(params)
+  cart.recipient_destination.save!
+  cart.recipient_destination.to_json(:except => [:created_at, :email_verification_code, :phone_verification_code])
+}
+put '/cart/recipient_destination', &update_delivery_destination
+post '/cart/recipient_destination', &update_delivery_destination
 
 def report_to_trello(cart)
   Thread.new do

front-ui/app/actions/cartActions.js

@@ -47,6 +47,13 @@ var CartActions = {
             value: value
         });
     },
+    changeRecipientDestinationProperty: function(property, value) {
+        AppDispatcher.handleAction({
+            actionType: CartConstants.CHANGE_RECIPIENT_DESTINATION_PROPERTY,
+            propertyName: property,
+            value: value
+        });
+    },
     confirmDelivery: function() {
         AppDispatcher.handleAction({
             actionType: CartConstants.CONFIRM_DELIVERY,
@@ -75,4 +82,4 @@ var CartActions = {
     }
 };
 
-module.exports = CartActions;
+module.exports = CartActions;

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

@@ -24,7 +24,7 @@ var CheckoutPage = React.createClass({
                          amount={CartStore.getAmount()}
                          deliveryCost={CartStore.getDeliveryCost(false)}
                          disabled={!this.state.isDeliveryDestinationValid}
-                         cashOnDeliveryDisabled={!this.state.isDeliveryDestinationValid || this.state.deliveryDestination.get('gift')}
+                         cashOnDeliveryDisabled={!this.state.isDeliveryDestinationValid}
                          onCashClick={this._onOrderClick}
           />
         </div>
@@ -115,7 +115,7 @@ var CheckoutPage = React.createClass({
               </div>
               <br />
               <div className="checkbox">
-                <label><input type="checkbox" name="gift" value={this.state.deliveryDestination.get('gift')}  onChange={this._onFieldChange} />Poklon</label>
+                <label><input type="checkbox" name="gift" checked={this.state.deliveryDestination.get('gift')}  onChange={this._onFieldChange} />Poklon</label>
               </div>
             </div>
           </div>
@@ -125,54 +125,60 @@ var CheckoutPage = React.createClass({
 
       <fieldset className={this.state.deliveryDestination.get('gift') ? 'shown' : 'hidden'}>
         <legend>Podaci o dostavi</legend>
+
+
+
         <div className="form-group ">
 
               <label className="col-md-4 control-label" htmlFor="name">Prezime i Ime</label>
               <div className="col-md-4">
-                    <RibicaFormError componentName="name" errorMessagesObject={this.state.deliveryDestinationErrors} />
+                    <RibicaFormError componentName="name" errorMessagesObject={this.state.recipientDestinationErrors} />
-                    <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" value=""  onChange={this._onFieldChange} />
+                    <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" value={this.state.recipientDestination.get('name')}  onChange={this._onFieldRecipientChange} />
                     <span className="help-block">ime osobe koja prima pošiljku</span>
               </div>
         </div>
         <div className="form-group ">
               <label className="col-md-4 control-label" htmlFor="name">Adresa</label>
               <div className="col-md-4">
-                    <RibicaFormError componentName="address" errorMessagesObject={this.state.deliveryDestinationErrors} />
+                    <RibicaFormError componentName="address" errorMessagesObject={this.state.recipientDestinationErrors} />
-                    <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" value=""  onChange={this._onFieldChange} />
+                    <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" value={this.state.recipientDestination.get('address')}  onChange={this._onFieldRecipientChange} />
                     <span className="help-block">adresa na koju će roba biti isporučena</span>
               </div>
         </div>
 
-        <div className="form-group ">
+  <div className="form-group ">
-              <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
+        <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
-              <div className="col-md-4">
+        <div className="col-md-4">
-                    <RibicaFormError componentName="place" errorMessagesObject={this.state.deliveryDestinationErrors} />
+              <RibicaFormError componentName="place" errorMessagesObject={this.state.recipientDestinationErrors} />
-                    <select id="place" name="place" className="form-control" value={this.state.deliveryDestination.get('place')}  onChange={this._onFieldChange} >
+              <select id="place" name="place" className="form-control" value={this.state.recipientDestination.get('place')}  onChange={this._onFieldRecipientChange} >
 
-                    {supportedPlaceOptions}
+              {supportedPlaceOptions}
 
-                    </select>
+              </select>
-              </div>
         </div>
-        <div className="form-group ">
+  </div>
-              <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
+  <div className="form-group ">
-              <div className="col-md-4">
+        <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
-                    <RibicaFormError componentName="phone" errorMessagesObject={this.state.deliveryDestinationErrors} />
+        <div className="col-md-4">
-                    <div className="input-group">
+              <RibicaFormError componentName="phone" errorMessagesObject={this.state.recipientDestinationErrors} />
-                          <span className="input-group-addon">+387 </span>
+              <div className="input-group">
-                          <input id="phone" name="phone" className="form-control" placeholder="061 222 333" type="text" required="" value=""  onChange={this._onFieldChange}  />
+                    <span className="input-group-addon">+387 </span>
-                    </div>
+                    <input id="phone" name="phone" className="form-control" placeholder="061 222 333" type="text" required="" value={this.state.recipientDestination.get('phone')}  onChange={this._onFieldRecipientChange}  />
-                    <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
               </div>
+              <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
         </div>
-        <div className="form-group ">
+  </div>
-              <label className="col-md-4 control-label" htmlFor="email">E - mail</label>
+  <div className="form-group ">
-              <div className="col-md-4">
+        <label className="col-md-4 control-label" htmlFor="email">E - mail</label>
-                    <RibicaFormError componentName="email" errorMessagesObject={this.state.deliveryDestinationErrors} />
+        <div className="col-md-4">
-                    <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" value=""  onChange={this._onFieldChange}  />
+              <RibicaFormError componentName="email" errorMessagesObject={this.state.recipientDestinationErrors} />
-                    <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>
+              <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" value={this.state.recipientDestination.get('email')}  onChange={this._onFieldRecipientChange}  />
-              </div>
+              <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>
         </div>
+  </div>
+
+
+
       </fieldset>
 
       <div className="payment-select-container">

front-ui/app/constants/cartConstants.js

@@ -6,6 +6,7 @@ module.exports = keyMirror({
   CART_DATA_LOADED: null,
   SAVE_CART_STATE_FOR_ITEM: null,
   CHANGE_DELIVERY_DESTINATION_PROPERTY: null,
+  CHANGE_RECIPIENT_DESTINATION_PROPERTY: null,
   CONFIRM_DELIVERY: null,
   SET_ITEM_COUNT: null,
   ADD_N_ITEMS: null,

front-ui/app/stores/cartStore.js

@@ -7,6 +7,7 @@ var ItemInCart = require('../models/itemInCart');
 var ItemInCartCollection = require('../models/itemInCartCollection');
 var ItemCollection = require('../models/itemCollection');
 var DeliveryDestination = require('../models/deliveryDestination');
+var RecipientDestination = require('../models/recipientDestination');
 var OrderConfirmation = require('../models/orderConfirmation');
 var Place = require('../models/place');
 var Validation = require('../utils/validation');
@@ -23,7 +24,13 @@ var _deliveryDestination = new DeliveryDestination();
 var _deliveryDestinationErrors = {};
 var _deliveryCosts = new Place({
     postalCode: _deliveryDestination.get('place')
-})
+});
+
+var _recipientDestination = new RecipientDestination();
+var _recipientDestinationErrors = {};
+var _recipientCosts = new Place({
+    postalCode: _recipientDestination.get('place')
+});
 
 var _addressColapsed = false;
 
@@ -2701,6 +2708,15 @@ var changeDeliveryDestinationProperty = function(property, value) {
     validateDeliveryDestinationForm();
 };
 
+var changeRecipientDestinationProperty = function(property, value) {
+    _recipientDestination.set(property, value);
+
+    if (property === 'place') {
+        fetchPlace();
+    }
+
+    validateRecipientDestinationForm();
+};
 
 var confirmOrder = function() {
 
@@ -2774,10 +2790,52 @@ var validateDeliveryDestinationForm = function() {
 
 }
 
+var validateRecipientDestinationForm = function() {
+    _recipientDestinationErrors = {};
+
+    var nameRegex = /.+\s+.+/i;
+    if (Validation.safeString(_recipientDestinationErrors.get('name')).search(nameRegex) < 0) {
+        _recipientDestinationErrors['name'] = "I prezime i ime su obavezni";
+    }
+
+    var addressRegex = /.+\s+.+/i;
+    if (Validation.safeString(_recipientDestinationErrors.get('address')).search(addressRegex) < 0) {
+        _recipientDestinationErrors['address'] = "Adresa mora biti ispravna";
+    }
+
+    var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/i;
+    if (Validation.safeString(_recipientDestinationErrors.get('email')).search(emailRegex) < 0) {
+        _recipientDestinationErrors['email'] = "Email mora biti ispravno upisan";
+    }
+
+    var phoneRegex = /^[\d\s-]{8,12}$/i;
+    if (Validation.safeString(_recipientDestinationErrors.get('phone')).search(phoneRegex) < 0) {
+        _recipientDestinationErrors['phone'] = "Telefon mora biti ispravan";
+    }
+
+    var placeRegex = /^\s{0,1}\d{5}$/i;
+    if (Validation.safeString(_recipientDestinationErrors.get('place')).search(placeRegex) < 0) {
+        _recipientDestinationErrors['place'] = "Mjesto mora biti izabrano";
+    }
+
+    var requiredFields = ["name", "place", 'address', 'phone'];
+    for (var i in requiredFields) {
+        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]] = "*";
+        }
+    }
+
+}
 
 var isDeliveryDestinationValid = function() {
-        return Object.getOwnPropertyNames(_deliveryDestinationErrors).length === 0;
+    return Object.getOwnPropertyNames(_deliveryDestinationErrors).length === 0;
-    }
+}
+
+var isRecipientDestinationValid = function() {
+    return Object.getOwnPropertyNames(_recipientDestinationErrors).length === 0;
+}
     // Extend CartStore with EventEmitter to add eventing capabilities
 var CartStore = _.extend({}, EventEmitter.prototype, {
 
@@ -2842,7 +2900,12 @@ var CartStore = _.extend({}, EventEmitter.prototype, {
             deliveryDestinationErrors: _deliveryDestinationErrors,
             isDeliveryDestinationValid: isDeliveryDestinationValid(),
             deliveryCosts: _deliveryCosts,
-            destinationValid: isDeliveryDestinationValid()
+            destinationValid: isDeliveryDestinationValid(),
+            recipientDestination: _recipientDestination,
+            recipientDestinationErrors: _recipientDestinationErrors,
+            isRecipientDestinationValid: isRecipientDestinationValid(),
+            recipientCosts: _recipientCosts,
+            recipientValid: isRecipientDestinationValid()
         };
         return state;
     },
@@ -2915,6 +2978,9 @@ AppDispatcher.register(function(payload) {
         case CartConstants.CHANGE_DELIVERY_DESTINATION_PROPERTY:
             changeDeliveryDestinationProperty(action.propertyName, action.value)
             break;
+        case CartConstants.CHANGE_RECIPIENT_DESTINATION_PROPERTY:
+            changeRecipientDestinationProperty(action.propertyName, action.value)
+            break;
         case CartConstants.CONFIRM_DELIVERY:
             saveDeliveryDestination();
             break;