Merge branch 'develop'

paypal, pikpay and gift support

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

@@ -5,25 +5,54 @@ var React = require('react'),
     NavigationActions = require('../../actions/navigationActions'),
     SingleItem = require('../items/singleItem'),
     Globals = require('../../globals'),
-    CartTotal = require('./cartTotal'), 
+    CartTotal = require('./cartTotal'),
     LinkBanner = require('../linkBanner/linkBanner'),
-    RibicaFormError = require('../shared/ribicaFormError');
-    
+    PaymentSelect = require('../payment/paymentSelect'),
+    RibicaFormError = require('../shared/ribicaFormError'),
+    PaypalButton = require('../payment/paypalButton'),
+    PikpayButton = require('../payment/pikpayButton'),
+    CashOnDeliveryButton = require('../payment/cashOnDeliveryButton');
 
 var Router = require('react-router');
 
 
 var CheckoutPage = React.createClass({
-
     render: function() {
+      var choosePayment = (
+        <div className="payment-btn">
+          <PaymentSelect deliveryDestination={this.state.deliveryDestination}
+                         amount={CartStore.getAmount()}
+                         deliveryCost={CartStore.getDeliveryCost(false)}
+                         disabled={!this.state.isDeliveryDestinationValid}
+                         cashOnDeliveryDisabled={!this.state.isDeliveryDestinationValid || this.state.deliveryDestination.get('gift')}
+                         onCashClick={this._onOrderClick}
+                         cartId={this.state.cart.get('id')}
+          />
+        </div>
+      );
+
+      var last_used_payment;
+      if(this.state.deliveryDestination.get('payment_method') == 'paypal') {
+        last_used_payment = (
+          <PaypalButton disabled={!this.state.isDeliveryDestinationValid} onSubmitPaypal={this._handleOnSubmitPaypal} deliveryDestination={this.state.deliveryDestination} amount={CartStore.getAmount()} deliveryCost={CartStore.getDeliveryCost(false)} cartId={this.state.cart.get('id')}/>
+        );
+      } else if(this.state.deliveryDestination.get('payment_method') == 'pikpay') {
+        last_used_payment = (
+          <PikpayButton amount={CartStore.getAmount()} deliveryCost={CartStore.getDeliveryCost(false)} disabled={!this.state.isDeliveryDestinationValid} deliveryDestination={this.state.deliveryDestination} cartId={this.state.cart.get('id')}/>
+        );
+      } else {
+        last_used_payment = (
+          <CashOnDeliveryButton onCashClick={this._onOrderClick} disabled={!this.state.isDeliveryDestinationValid || this.state.deliveryDestination.get('gift')} cartId={this.state.cart.get('id')}/>
+        );
+      }
 
       var supportedPlaceOptions = CartStore.getSupportedPlaces().map ( function (p) {  return (<option value={p.code}>{p.placeLabel}</option>)});
- 
+
       var content = (
 <div className="checkout-page center">
       <div className="form-horizontal checkout_form_margin">
             <fieldset>
-                  <legend>Dostava</legend>
+                  <legend>Podaci o naručiocu</legend>
                   <div className="form-group ">
 
                         <label className="col-md-4 control-label" htmlFor="name">Prezime i Ime</label>
@@ -41,15 +70,15 @@ var CheckoutPage = React.createClass({
                               <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} >
-                            
-                        {supportedPlaceOptions} 
-                    
+
+                        {supportedPlaceOptions}
+
                         </select>
                   </div>
             </div>
@@ -78,22 +107,88 @@ var CheckoutPage = React.createClass({
                         <textarea className="form-control" id="note" name="note" value={this.state.deliveryDestination.get('note')}  onChange={this._onFieldChange} ></textarea>
                   </div>
             </div>
-            <div className="form-group ">
-                  <label className="col-md-4 control-label" htmlFor="order"></label>
-                  <div className="col-md-8">
-                        <div>      Roba: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} /><br />
-               <span className={this.state.deliveryDestinationErrors['place'] ? 'hidden' : 'shown'}>
-                Dostava: <CartTotal deliveryCosts={this.state.deliveryCosts} /><br />
-                Ukupno:  <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />
+           <div className="form-group">
+              <label className="col-md-4 control-label" htmlFor="order"></label>
+              <div className="col-md-8">
+              <div>      Roba: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} /><br />
+                <span className={this.state.deliveryDestinationErrors[this.state.deliveryCostsTarget] ? 'hidden' : 'shown'}>
+                  Dostava: <CartTotal deliveryCosts={this.state.deliveryCosts} /><br />
+                  Ukupno:  <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />
                 </span>
-                  </div>
-                        <div><button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button></div>
-                  </div>
+              </div>
+              <br />
+              <div className="checkbox">
+                <label><input type="checkbox" name="gift" checked={this.state.deliveryDestination.get('gift')}  onChange={this._onFieldChange} />Poklon</label>
+              </div>
             </div>
-      </fieldset> 
-</div>
-</div>
-        );   
+          </div>
+
+
+      </fieldset>
+
+      <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="recipient_name">Prezime i Ime</label>
+              <div className="col-md-4">
+                    <RibicaFormError componentName="recipient_name" errorMessagesObject={this.state.deliveryDestinationErrors} />
+                    <input id="recipient_name" name="recipient_name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" value={this.state.deliveryDestination.get('recipient_name')}  onChange={this._onFieldChange} />
+                    <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="recipient_address">Adresa</label>
+              <div className="col-md-4">
+                    <RibicaFormError componentName="recipient_address" errorMessagesObject={this.state.deliveryDestinationErrors} />
+                    <input id="recipient_address" name="recipient_address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" value={this.state.deliveryDestination.get('recipient_address')}  onChange={this._onFieldChange} />
+                    <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="recipient_place">Mjesto</label>
+        <div className="col-md-4">
+              <RibicaFormError componentName="recipient_place" errorMessagesObject={this.state.deliveryDestinationErrors} />
+              <select id="recipient_place" name="recipient_place" className="form-control" value={this.state.deliveryDestination.get('recipient_place')}  onChange={this._onFieldChange} >
+
+              {supportedPlaceOptions}
+
+              </select>
+        </div>
+  </div>
+  <div className="form-group ">
+        <label className="col-md-4 control-label" htmlFor="recipient_phone">Telefon</label>
+        <div className="col-md-4">
+              <RibicaFormError componentName="recipient_phone" errorMessagesObject={this.state.deliveryDestinationErrors} />
+              <div className="input-group">
+                    <span className="input-group-addon">+387 </span>
+                    <input id="recipient_phone" name="recipient_phone" className="form-control" placeholder="061 222 333" type="text" required="" value={this.state.deliveryDestination.get('recipient_phone')}  onChange={this._onFieldChange}  />
+              </div>
+              <p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
+        </div>
+  </div>
+  <div className="form-group ">
+        <label className="col-md-4 control-label" htmlFor="recipient_email">E - mail</label>
+        <div className="col-md-4">
+              <RibicaFormError componentName="recipient_email" errorMessagesObject={this.state.deliveryDestinationErrors} />
+              <input id="recipient_email" name="recipient_email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" value={this.state.deliveryDestination.get('recipient_email')}  onChange={this._onFieldChange}  />
+              <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">
+       {choosePayment}
+       </div>
+      </div>
+  </div>
+        );
 
        if(CartStore.isAddressColapsed()) {
 
@@ -109,16 +204,27 @@ var CheckoutPage = React.createClass({
                 Ukupno: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />
 
               </p>
-              <p>
-               <button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button> ili <button className="btn btn-default" onClick={this._onUncolapseClick}>Promijeni adresu</button> 
-               </p>
+
+              <div className="hidden-xs">
+              <button className="btn btn-default gift-btn" onClick={this._onGiftBtnClicked}>Poklon</button>
+              <br />
+
+              <p className="collapsed-address-container">{last_used_payment} ili <button className="btn btn-default" onClick={this._onUncolapseClick}>Promijeni način plaćanja ili adresu</button></p>
+              </div>
+
+              <div className="collapsed-address-container-mobile btn-group-vertical visible-xs">
+              <button className="btn btn-default" onClick={this._onGiftBtnClicked}>Poklon</button>
+              {last_used_payment}
+              <button className="btn btn-default" onClick={this._onUncolapseClick}>Promijeni način plaćanja ili adresu</button>
+              </div>
+
                 <div className="form-group">
                   <label className="col-md-4 control-label" htmlFor="order"></label>
                   <div className="col-md-8">
                         <div> </div>
                         <div></div>
                   </div>
-            </div>
+                </div>
             </div>);
        }
 
@@ -144,10 +250,15 @@ var CheckoutPage = React.createClass({
 
     },
     _onFieldChange: function (event) {
-      CartActions.changeDeliveryDestinationProperty(event.target.name, event.target.value);
+      if(event.target.name === "gift") {
+        CartActions.changeDeliveryDestinationProperty(event.target.name, $(event.target).is(':checked'));
+      } else {
+        CartActions.changeDeliveryDestinationProperty(event.target.name, event.target.value);
+      }
     },
-    
+
     _onOrderClick: function (event) {
+      CartActions.changeDeliveryDestinationProperty("payment_method", "cash_on_delivery");
       CartActions.confirmDelivery();
     },
 
@@ -155,6 +266,16 @@ var CheckoutPage = React.createClass({
       CartActions.setAddressColapsed(false);
     },
 
+    _onGiftBtnClicked: function (event) {
+      CartActions.changeDeliveryDestinationProperty('gift', true);
+      CartActions.setAddressColapsed(false);
+    },
+
+    _handleOnSubmitPaypal: function(event) {
+      CartActions.changeDeliveryDestinationProperty('payment_method', 'paypal');
+      return false;
+    },
+
     getInitialState: function () {
       return CartStore.getWholeCartState();
     }
@@ -162,4 +283,4 @@ var CheckoutPage = React.createClass({
 });
 
 
-module.exports = CheckoutPage; 
+module.exports = CheckoutPage;

front-ui/app/components/payment/cashOnDeliveryButton.js

@@ -0,0 +1,17 @@
+var React = require('react');
+var ItemActions = require('../../actions/itemActions');
+var NavigationActions = require('../../actions/navigationActions');
+var NavigationStore = require('../../stores/navigationStore');
+
+var Globals = require('../../globals');
+var Router = require('react-router');
+
+var CashOnDeliveryButton = React.createClass({
+    render: function() {
+      return (
+          <button type="button" className="btn mybutton payment-btn" disabled={this.props.disabled} onClick={this.props.onCashClick}>Plati prilikom preuzimanja</button>
+        );
+      }
+});
+
+module.exports = CashOnDeliveryButton;

front-ui/app/components/payment/paymentSelect.js

@@ -0,0 +1,36 @@
+var React = require('react');
+var ItemActions = require('../../actions/itemActions');
+var NavigationActions = require('../../actions/navigationActions');
+var NavigationStore = require('../../stores/navigationStore');
+
+var Globals = require('../../globals');
+var Router = require('react-router');
+var PaypalButton = require('./paypalButton');
+var PikpaylButton = require('./pikpayButton');
+var CashOnDeliveryButton = require('./cashOnDeliveryButton');
+
+var PaymentSelect = React.createClass({
+    render: function() {
+      var cashOnDeliveryBtn = ( <CashOnDeliveryButton onCashClick={this.props.onCashClick} disabled={this.props.cashOnDeliveryDisabled} cartId={this.props.cartId}/> );
+      var pikpayBtn = ( <PikpaylButton amount={this.props.amount} deliveryCost={this.props.deliveryCost} disabled={this.props.disabled} deliveryDestination={this.props.deliveryDestination} cartId={this.props.cartId}/> );
+      var paypalBtn = ( <PaypalButton disabled={this.props.disabled} deliveryDestination={this.props.deliveryDestination} amount={this.props.amount} deliveryCost={this.props.deliveryCost} cartId={this.props.cartId}/> );
+
+        return (
+          <div>
+          <div className="payment_select btn-group payment-select-desktop hidden-xs">
+            {cashOnDeliveryBtn}
+            {pikpayBtn}
+            {paypalBtn}
+          </div>
+
+          <div className="payment_select btn-group-vertical payment-select-mobile visible-xs">
+            {cashOnDeliveryBtn}
+            {pikpayBtn}
+            {paypalBtn}
+          </div>
+        </div>);
+      }
+});
+
+
+module.exports = PaymentSelect;

front-ui/app/components/payment/paypalButton.js

@@ -0,0 +1,62 @@
+var React = require('react');
+var ItemActions = require('../../actions/itemActions');
+var NavigationActions = require('../../actions/navigationActions');
+var NavigationStore = require('../../stores/navigationStore');
+var CartStore = require('../../stores/cartStore');
+var CartActions = require('../../actions/cartActions');
+
+var Globals = require('../../globals');
+var Router = require('react-router');
+
+var PaypalButton = React.createClass({
+    render: function() {
+      var deliveryDestination = JSON.stringify(
+        {
+          'anonymous_id_string': this.props.deliveryDestination.get('anonymous_id_string'),
+          'user_id': this.props.deliveryDestination.get('user_id')
+        });
+      var amount = Globals.ConvertToEuro(this.props.amount);
+      var deliveryCost = Globals.ConvertToEuro(this.props.deliveryCost);
+      var root = location.protocol + '//' + location.host;
+      var return_url = root + "/hvala";
+      var cancel_return_url = root + "/dostava";
+      var notifyUrl = Globals.IsUrlAbsolute(Globals.ApiUrl) ? Globals.ApiUrl : root + Globals.ApiUrl;
+      notifyUrl += "/payment/confirmation";
+
+      return (
+            <button onClick={this._onPaypalClick} disabled={this.props.disabled} type="button" className="btn mybutton payment-btn">Paypal
+            <form id="paypal_form" className="hidden" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+              <input type="hidden" name="cmd" value="_xclick" />
+              <input type="hidden" name="business" value={Globals.PaypalId} />
+              <input type="hidden" name="lc" value="BA" />
+              <input type="hidden" name="item_name" value="Item" />
+              <input type="hidden" name="item_number" value={this.props.cartId} />
+              <input type="hidden" name="amount" value={amount} />
+              <input type="hidden" name="currency_code" value="EUR" />
+              <input type="hidden" name="button_subtype" value="services" />
+              <input type="hidden" name="no_note" value="0" />
+              <input type="hidden" name="cn" value="Napomena:" />
+              <input type="hidden" name="no_shipping" value="1" />
+              <input type="hidden" name="rm" value="1" />
+              <input type="hidden" name="return" value={return_url} />
+              <input type="hidden" name="cancel_return" value={cancel_return_url} />
+              <input type="hidden" name="shipping" value={deliveryCost} />
+              <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted" />
+              <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
+              <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
+              <input name="notify_url" value={notifyUrl} type="hidden" />
+              <input name="custom" value={deliveryDestination} type="hidden" />
+            </form>
+            </button>
+        );
+      },
+      _onPaypalClick: function(e) {
+        CartActions.changeDeliveryDestinationProperty('payment_method', 'paypal');
+        CartStore.saveDeliveryDestinationAnd(function() {
+          $("#paypal_form").submit();
+        });
+      }
+});
+
+
+module.exports = PaypalButton;

front-ui/app/components/payment/pikpayButton.js

@@ -0,0 +1,64 @@
+var React = require('react');
+var ItemActions = require('../../actions/itemActions');
+var NavigationActions = require('../../actions/navigationActions');
+var NavigationStore = require('../../stores/navigationStore');
+var CartStore = require('../../stores/cartStore');
+var CartActions = require('../../actions/cartActions');
+
+var Globals = require('../../globals');
+var Router = require('react-router');
+var sha1 = require('sha1');
+
+var PikpayButton = React.createClass({
+    render: function() {
+      var total = this.props.amount + this.props.deliveryCost;
+      total = total.toFixed(2) * 100;
+      var order_info = "Info";
+      var order_number = this.props.cartId;
+      var key = Globals.PikpayKey;
+      var authenticity_token = Globals.PikpayAuthenticityToken;
+      var digest = sha1(key + order_number + total + "BAM");
+      var rebate_digest = sha1(key + order_number + total + total + "BAM");
+      var deliveryDestination = this.props.deliveryDestination;
+      var city = CartStore.getNameOfThePlace(deliveryDestination.get('place'));
+      var custom = JSON.stringify(
+        {
+          'anonymous_id_string': deliveryDestination.get('anonymous_id_string'),
+          'user_id': deliveryDestination.get('user_id')
+        });
+
+      return (<span></span> /*
+          <button type="button" onClick={this._onPikpayClick} disabled={this.props.disabled} className="btn mybutton payment-btn">Plati karticom
+            <form id="pikpay_form" action={Globals.PikpayFormUrl} method="post" target="_top">
+              <input type="hidden" name="ch_full_name" value={deliveryDestination.get('name')} />
+              <input type="hidden" name="ch_address" value={deliveryDestination.get('address')} />
+              <input type="hidden" name="ch_city" value={city} />
+              <input type="hidden" name="ch_zip" value={deliveryDestination.get('place')} />
+              <input type="hidden" name="ch_country" value="Bosna i Hercegovina" />
+              <input type="hidden" name="ch_phone" value={deliveryDestination.get('phone')} />
+              <input type="hidden" name="ch_email" value={deliveryDestination.get('email')} />
+
+              <input type="hidden" name="order_info" value={order_info} />
+              <input type="hidden" name="order_number" value={order_number} />
+              <input type="hidden" name="amount" value={total} />
+              <input type="hidden" name="currency" value="BAM" />
+              <input type="hidden" name="original_amount" value={total} />
+              <input type="hidden" name="language" value="hr" />
+              <input type="hidden" name="transaction_type" value="authorize" />
+              <input type="hidden" name="authenticity_token" value={authenticity_token} />
+              <input type="hidden" name="digest" value={digest} />
+              <input type="hidden" name="rebate_digest" value={rebate_digest} />
+              <input type="hidden" name="custom_params" value={custom} />
+            </form>
+          </button> */
+        );
+      },
+      _onPikpayClick: function(e) {
+        CartActions.changeDeliveryDestinationProperty('payment_method', 'pikpay');
+        CartStore.saveDeliveryDestinationAnd(function() {
+          $("#pikpay_form").submit();
+        });
+      }
+});
+
+module.exports = PikpayButton;

front-ui/app/components/shared/searchBox.js

@@ -34,7 +34,8 @@ var SearchBox = React.createClass({
     },
     onKeyPress: function(e) {
         var enterKeyCode = 13;
-        if(e.which == enterKeyCode) {
+        var whichKey = e.key || e.which;
+        if(whichKey == enterKeyCode) {
             this.doSearch();
             e.preventDefault();
         }