Initial commit

client-wiaas/src/containers/profileSettings/components/AddEditBillingAddress.jsx

@@ -0,0 +1,123 @@
+import React, {Component} from 'react';
+import {Form, FormGroup, Label, Input} from 'reactstrap';
+import {profileTexts} from '../../../constants/profileSettingsConstants';
+
+class AddEditBillingAddress extends Component {
+    constructor(props){
+        super(props);
+
+        const address = this.props.params.address;
+        this.state = {
+            id: address.id,
+            firstName: address.firstName || '',
+            lastName: address.lastName || '',
+            invoiceMail: address.invoiceMail || '',
+            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);
+    }
+
+    render() {
+        const {idCountrySelected, city, detailedAddress, zipCode, firstName, lastName, invoiceMail} = this.state;
+        const {countries} = this.props.params;
+
+        return (
+            <div className="address-add-edit-content">
+                <Form className="address-edit-content">
+                    <h5>{profileTexts.labels.DELEGATE}</h5>
+                    <FormGroup>
+                          <Label for="address-first-name">{profileTexts.labels.FIRST_NAME}</Label>
+                          <Input value={firstName}
+                              onChange={this.handleChange}
+                              type="text"
+                              name="firstName"
+                              id="address-first-name"
+                              placeholder={profileTexts.labels.FIRST_NAME} />
+                    </FormGroup>
+
+                    <FormGroup>
+                          <Label for="address-last-name">{profileTexts.labels.LAST_NAME}</Label>
+                          <Input value={lastName}
+                              onChange={this.handleChange}
+                              type="text"
+                              name="lastName"
+                              id="address-last-name"
+                              placeholder={profileTexts.labels.LAST_NAME} />
+                    </FormGroup>
+
+                    <FormGroup>
+                          <Label for="address-invoice-mail">{profileTexts.labels.INVOICE_MAIL}</Label>
+                          <Input value={invoiceMail}
+                              onChange={this.handleChange}
+                              type="text"
+                              name="invoiceMail"
+                              id="address-invoice-mail"
+                              placeholder={profileTexts.labels.INVOICE_MAIL} />
+                    </FormGroup>
+
+                    <h5>{profileTexts.labels.BILLING_ADDRESSES}</h5>
+                    <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 AddEditBillingAddress;