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'),
    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>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;