91 lines
3.8 KiB
React
91 lines
3.8 KiB
React
|
import React, {Component} from 'react';
|
||
|
|
import {Form, FormGroup, Label, Input} from 'reactstrap';
|
||
|
|
import {profileTexts} from '../../../constants/profileSettingsConstants';
|
||
|
|
|
||
|
|
class AddEditProfileAddress extends Component {
|
||
|
|
constructor(props){
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
const address = this.props.params.profileAddress;
|
||
|
|
this.state = {
|
||
|
|
id: address.id,
|
||
|
|
idCountrySelected: address.idCountrySelected || this.props.params.countries[0].idCountry,
|
||
|
|
city: address.city || '',
|
||
|
|
detailedAddress: address.detailedAddress || '',
|
||
|
|
zipCode: address.zipCode || ''
|
||
|
|
};
|
||
|
|
this.props.params.onAddressChange(this.state);
|
||
|
|
|
||
|
|
this.handleChange = this.handleChange.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleChange(event) {
|
||
|
|
const field = event.target.name;
|
||
|
|
const address = Object.assign({}, this.state);
|
||
|
|
address[field] = event.target.value;
|
||
|
|
this.setState(address);
|
||
|
|
this.props.params.onAddressChange(address);
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {idCountrySelected, city, detailedAddress, zipCode} = this.state;
|
||
|
|
const {countries} = this.props.params;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="address-add-edit-content">
|
||
|
|
<Form className="address-edit-content">
|
||
|
|
<FormGroup>
|
||
|
|
<Label for="address-country">{profileTexts.labels.ADDRESS_COUNTRY}<span className="required-icon">*</span></Label>
|
||
|
|
<Input value={idCountrySelected}
|
||
|
|
type="select"
|
||
|
|
onChange={this.handleChange}
|
||
|
|
name="idCountrySelected"
|
||
|
|
id="address-country"
|
||
|
|
placeholder={profileTexts.labels.ADDRESS_COUNTRY}>
|
||
|
|
{
|
||
|
|
countries.map((country) =>
|
||
|
|
<option key={'country-' + country.idCountry} value={country.idCountry}>{country.countryName}</option>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Input>
|
||
|
|
</FormGroup>
|
||
|
|
|
||
|
|
<FormGroup>
|
||
|
|
<Label for="address-city">{profileTexts.labels.ADDRESS_CITY}<span className="required-icon">*</span></Label>
|
||
|
|
<Input value={city}
|
||
|
|
onChange={this.handleChange}
|
||
|
|
type="text"
|
||
|
|
name="city"
|
||
|
|
id="address-city"
|
||
|
|
placeholder={profileTexts.labels.ADDRESS_CITY} />
|
||
|
|
</FormGroup>
|
||
|
|
|
||
|
|
<FormGroup>
|
||
|
|
<Label for="address-details">{profileTexts.labels.ADDRESS_DETAILS}<span className="required-icon">*</span></Label>
|
||
|
|
<Input value={detailedAddress}
|
||
|
|
onChange={this.handleChange}
|
||
|
|
type="textarea"
|
||
|
|
name="detailedAddress"
|
||
|
|
id="address-details"
|
||
|
|
placeholder={profileTexts.labels.ADDRESS_DETAILS} />
|
||
|
|
</FormGroup>
|
||
|
|
|
||
|
|
<FormGroup>
|
||
|
|
<Label for="address-zip">{profileTexts.labels.ADDRESS_ZIP}<span className="required-icon">*</span></Label>
|
||
|
|
<Input value={zipCode}
|
||
|
|
onChange={this.handleChange}
|
||
|
|
type="text"
|
||
|
|
name="zipCode"
|
||
|
|
id="address-zip"
|
||
|
|
placeholder={profileTexts.labels.ADDRESS_ZIP} />
|
||
|
|
</FormGroup>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default AddEditProfileAddress;
|