Fixing

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

@@ -19,7 +19,12 @@ var CheckoutPage = React.createClass({
     render: function() {
       var choosePayment = (
         <div className="payment-btn">
-          <PaymentSelect onSubmitPaypal={this._handleOnSubmitPaypal} deliveryDestination={this.state.deliveryDestination} amount={CartStore.getAmount()} deliveryCost={CartStore.getDeliveryCost(false)} />
+          <PaymentSelect deliveryDestination={this.state.deliveryDestination}
+                         amount={CartStore.getAmount()}
+                         deliveryCost={CartStore.getDeliveryCost(false)}
+                         disabled={!this.state.isDeliveryDestinationValid}
+                         onCashClick={this._onOrderClick}
+          />
         </div>
       );
 
@@ -97,25 +102,21 @@ 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['place'] ? '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>
-                   <br />
-                   Plaćanje: <br /><br />
-                   <div className="payment-btn"><button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button></div>
-                   {choosePayment}
-                   </div>
-                  </div>
+              </div>
             </div>
+          </div>
 
-
+          <div className="payment-select-container">
+           {choosePayment}
+           </div>
       </fieldset>
 </div>
 

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

@@ -6,13 +6,29 @@ 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.disabled}/> );
+      var pikpayBtn = ( <PikpaylButton amount={this.props.amount} deliveryCost={this.props.deliveryCost} disabled={this.props.disabled} deliveryDestination={this.props.deliveryDestination}/> );
+      var paypalBtn = ( <PaypalButton disabled={this.props.disabled} deliveryDestination={this.props.deliveryDestination} amount={this.props.amount} deliveryCost={this.props.deliveryCost} /> );
+
         return (
-          <div className="payment_select">
-             <PaypalButton deliveryDestination={this.props.deliveryDestination} amount={this.props.amount} deliveryCost={this.props.deliveryCost} />
-          </div>);
+          <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>);
       }
 });
 

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

@@ -2,27 +2,38 @@ 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(this.props.deliveryDestination);
+      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 notifyUrl = Globals.ApiUrl + "/payment/confirmation";
       var root = location.protocol + '//' + location.host;
-      var return_url = root + "/hvala_paypal";
-      var cancel_return_url = root + "/odgodjeno";
+      var return_url = root + "/hvala";
+      var cancel_return_url = root + "/dostava";
 
       return (
+<<<<<<< HEAD
          <div>
             <form onSubmit={this.props.onSubmitPaypal} action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+=======
+            <button onClick={this._onPaypalClick} disabled={this.props.disabled} type="button" className="btn mybutton payment-btn">Pay with paypal
+            <form id="paypal_form" className="hidden" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+>>>>>>> 7b2552c31c6f356bd24e3df0def6d3a021f6c138
               <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 name" />
+              <input type="hidden" name="item_name" value="Item" />
               <input type="hidden" name="item_number" value="555" />
               <input type="hidden" name="amount" value={amount} />
               <input type="hidden" name="currency_code" value="EUR" />
@@ -40,8 +51,14 @@ var PaypalButton = React.createClass({
               <input name="notify_url" value={notifyUrl} type="hidden" />
               <input name="custom" value={deliveryDestination} type="hidden" />
             </form>
-          </div>
+            </button>
         );
+      },
+      _onPaypalClick: function(e) {
+        CartActions.changeDeliveryDestinationProperty('payment_method', 'paypal');
+        CartStore.saveDeliveryDestinationAnd(function() {
+          $("#paypal_form").submit();
+        });
       }
 });
 

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 * 100;
+      var order_info = "Info";
+      var order_number = "4678678678229";
+      var key = "Ribica"
+      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 (
+          <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;