Add Recipient destination model and functionality on front end

This commit is contained in:
Adam
2016-01-12 09:01:46 +01:00
parent 794cc2ec69
commit 5ee38f6d9a
5 changed files with 130 additions and 35 deletions

View File

@@ -24,7 +24,7 @@ var CheckoutPage = React.createClass({
amount={CartStore.getAmount()}
deliveryCost={CartStore.getDeliveryCost(false)}
disabled={!this.state.isDeliveryDestinationValid}
cashOnDeliveryDisabled={!this.state.isDeliveryDestinationValid || this.state.deliveryDestination.get('gift')}
cashOnDeliveryDisabled={!this.state.isDeliveryDestinationValid}
onCashClick={this._onOrderClick}
/>
</div>
@@ -115,7 +115,7 @@ var CheckoutPage = React.createClass({
</div>
<br />
<div className="checkbox">
<label><input type="checkbox" name="gift" value={this.state.deliveryDestination.get('gift')} onChange={this._onFieldChange} />Poklon</label>
<label><input type="checkbox" name="gift" checked={this.state.deliveryDestination.get('gift')} onChange={this._onFieldChange} />Poklon</label>
</div>
</div>
</div>
@@ -125,54 +125,60 @@ var CheckoutPage = React.createClass({
<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="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="" onChange={this._onFieldChange} />
<RibicaFormError componentName="name" errorMessagesObject={this.state.recipientDestinationErrors} />
<input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" value={this.state.recipientDestination.get('name')} onChange={this._onFieldRecipientChange} />
<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="" onChange={this._onFieldChange} />
<RibicaFormError componentName="address" errorMessagesObject={this.state.recipientDestinationErrors} />
<input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" value={this.state.recipientDestination.get('address')} onChange={this._onFieldRecipientChange} />
<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} >
<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.recipientDestinationErrors} />
<select id="place" name="place" className="form-control" value={this.state.recipientDestination.get('place')} onChange={this._onFieldRecipientChange} >
{supportedPlaceOptions}
{supportedPlaceOptions}
</select>
</div>
</select>
</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="" onChange={this._onFieldChange} />
</div>
<p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
</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.recipientDestinationErrors} />
<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.recipientDestination.get('phone')} onChange={this._onFieldRecipientChange} />
</div>
<p className="help-block">broj mobitela - mora biti sa jedne od mreža u BiH</p>
</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="" 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="email">E - mail</label>
<div className="col-md-4">
<RibicaFormError componentName="email" errorMessagesObject={this.state.recipientDestinationErrors} />
<input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" value={this.state.recipientDestination.get('email')} onChange={this._onFieldRecipientChange} />
<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">