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

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'),
    RibicaFormError = require('../shared/ribicaFormError');
    

var Router = require('react-router');


var CheckoutPage = React.createClass({

    render: function() {

      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">
            <fieldset>
                  <legend>Dostava</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>Ukupno: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} /> </div>
                        <div><button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button></div>
                  </div>
            </div>
      </fieldset> 
</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 />
                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="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) {
      CartActions.changeDeliveryDestinationProperty(event.target.name, event.target.value);
    },
    
    _onOrderClick: function (event) {
      CartActions.confirmDelivery();
    },

    _onUncolapseClick: function (event) {
      CartActions.setAddressColapsed(false);
    },

    getInitialState: function () {
      return CartStore.getWholeCartState();
    }

});


module.exports = CheckoutPage;