287 lines
15 KiB
JavaScript
287 lines
15 KiB
JavaScript
var React = require('react'),
|
|
CartStore = require('../../stores/cartStore'),
|
|
AddToCart = require('../cart/addToCart'),
|
|
CartActions = require('../../actions/cartActions'),
|
|
NavigationActions = require('../../actions/navigationActions'),
|
|
SingleItem = require('../items/singleItem'),
|
|
Globals = require('../../globals'),
|
|
CartTotal = require('./cartTotal'),
|
|
LinkBanner = require('../linkBanner/linkBanner'),
|
|
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.deliveryDestination.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.deliveryDestination.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.deliveryDestination.get('id')}/>
|
|
);
|
|
} else {
|
|
last_used_payment = (
|
|
<CashOnDeliveryButton onCashClick={this._onOrderClick} disabled={!this.state.isDeliveryDestinationValid || this.state.deliveryDestination.get('gift')} cartId={this.state.deliveryDestination.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>Podaci o naručiocu</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={this.state.deliveryDestination.get('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="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={this.state.deliveryDestination.get('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="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}
|
|
|
|
</select>
|
|
</div>
|
|
</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={this.state.deliveryDestination.get('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="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={this.state.deliveryDestination.get('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>
|
|
<div className="form-group ">
|
|
<label className="col-md-4 control-label" htmlFor="note">Napomena</label>
|
|
<div className="col-md-4">
|
|
<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[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>
|
|
<br />
|
|
<div className="checkbox">
|
|
<label><input type="checkbox" name="gift" checked={this.state.deliveryDestination.get('gift')} onChange={this._onFieldChange} />Poklon</label>
|
|
</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()) {
|
|
|
|
var address = CartStore.getHumanReadableAddress().map(function (a) { return (<span>{a}<br /></span>)});
|
|
content = (
|
|
<div className="checkout-page center text-center" >
|
|
<h2> Roba će biti dostavljena na adresu: </h2>
|
|
<p className="lead">
|
|
{address}
|
|
<br />
|
|
Roba: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} /><br />
|
|
Dostava: <CartTotal deliveryCosts={this.state.deliveryCosts} /><br />
|
|
Ukupno: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />
|
|
|
|
</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>);
|
|
}
|
|
|
|
|
|
return content;
|
|
|
|
},
|
|
|
|
// Add change listeners to stores
|
|
componentDidMount: function() {
|
|
CartStore.addChangeListener(this._onChange);
|
|
CartActions.load();
|
|
},
|
|
|
|
componentWillUnmount: function () {
|
|
CartStore.removeChangeListener(this._onChange);
|
|
},
|
|
|
|
_onChange: function () {
|
|
if (this.isMounted()) {
|
|
this.setState(CartStore.getWholeCartState());
|
|
}
|
|
|
|
},
|
|
_onFieldChange: function (event) {
|
|
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();
|
|
},
|
|
|
|
_onUncolapseClick: function (event) {
|
|
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();
|
|
}
|
|
|
|
});
|
|
|
|
|
|
module.exports = CheckoutPage;
|