Add Recipient destination model and functionality on front end

2016-01-12 09:01:46 +01:00
parent 794cc2ec69
commit 5ee38f6d9a
5 changed files with 130 additions and 35 deletions
--- a/front-api/controllers/cart.rb
+++ b/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
--- a/front-ui/app/actions/cartActions.js
+++ b/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;
--- a/front-ui/app/components/cart/checkoutPage.js
+++ b/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} />
-                    <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" value=""  onChange={this._onFieldChange} />
+                    <RibicaFormError componentName="name" errorMessagesObject={this.state.recipientDestinationErrors} />
+                    <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} />
-                    <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" value=""  onChange={this._onFieldChange} />
+                    <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={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 ">
-              <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
-              <div className="col-md-4">
-                    <RibicaFormError componentName="place" errorMessagesObject={this.state.deliveryDestinationErrors} />
-                    <select id="place" name="place" className="form-control" value={this.state.deliveryDestination.get('place')}  onChange={this._onFieldChange} >
+  <div className="form-group ">
+        <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
+        <div className="col-md-4">
+              <RibicaFormError componentName="place" errorMessagesObject={this.state.recipientDestinationErrors} />
+              <select id="place" name="place" className="form-control" value={this.state.recipientDestination.get('place')}  onChange={this._onFieldRecipientChange} >

-                    {supportedPlaceOptions}
+              {supportedPlaceOptions}

-                    </select>
-              </div>
+              </select>
        </div>
-        <div className="form-group ">
-              <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
-              <div className="col-md-4">
-                    <RibicaFormError componentName="phone" errorMessagesObject={this.state.deliveryDestinationErrors} />
-                    <div className="input-group">
-                          <span className="input-group-addon">+387 </span>
-                          <input id="phone" name="phone" className="form-control" placeholder="061 222 333" type="text" required="" value=""  onChange={this._onFieldChange}  />
-                    </div>
-                    <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
+  </div>
+  <div className="form-group ">
+        <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
+        <div className="col-md-4">
+              <RibicaFormError componentName="phone" errorMessagesObject={this.state.recipientDestinationErrors} />
+              <div className="input-group">
+                    <span className="input-group-addon">+387 </span>
+                    <input id="phone" name="phone" className="form-control" placeholder="061 222 333" type="text" required="" value={this.state.recipientDestination.get('phone')}  onChange={this._onFieldRecipientChange}  />
              </div>
+              <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
        </div>
-        <div className="form-group ">
-              <label className="col-md-4 control-label" htmlFor="email">E - mail</label>
-              <div className="col-md-4">
-                    <RibicaFormError componentName="email" errorMessagesObject={this.state.deliveryDestinationErrors} />
-                    <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" value=""  onChange={this._onFieldChange}  />
-                    <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>
-              </div>
+  </div>
+  <div className="form-group ">
+        <label className="col-md-4 control-label" htmlFor="email">E - mail</label>
+        <div className="col-md-4">
+              <RibicaFormError componentName="email" errorMessagesObject={this.state.recipientDestinationErrors} />
+              <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}  />
+              <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">
--- a/front-ui/app/constants/cartConstants.js
+++ b/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,
--- a/front-ui/app/stores/cartStore.js
+++ b/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;