initial docker setup

frontend/src/containers/profileSettings/BillingAddressesContainer.jsx

@@ -0,0 +1,151 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Row, Col, Button} from 'reactstrap';
+import BillingAddress from './components/BillingAddress.jsx';
+import SelectBillingAddress from '../cart/components/SelectBillingAddress.jsx';
+import AddEditBillingAddress from './components/AddEditBillingAddress.jsx';
+import RemoveBillingAddress from './components/RemoveBillingAddress.jsx';
+import {profileTexts} from '../../constants/profileSettingsConstants';
+import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
+import {saveBillingAddress, removeBillingAddress} from '../../actions/profileSettings/addressActions';
+import './style/AddressesContainer.css';
+
+class BillingAddressesContainer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.changedAddress = {};
+
+        this.openAddressDialog = this.openAddressDialog.bind(this);
+        this.onAddressChange = this.onAddressChange.bind(this);
+    }
+
+    saveBillingAddress(address){
+        this.props.dispatch(saveBillingAddress(this.props.idUser, this.props.idCompany, address));
+    }
+
+    onAddressChange(address){
+        this.changedAddress = Object.assign({}, address);
+    }
+
+    removeBillingAddress(address){
+        this.props.dispatch(removeBillingAddress(this.props.idUser, address.id));
+    }
+
+    getDialogContent(action, address){
+        if(action === 'add'){
+            return {
+                buttons: [
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.SAVE ,
+                        id: 'save-profile-address-btn',
+                        action: () => {this.saveBillingAddress(this.changedAddress)},
+                        waitForAction: true
+                    },
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.CANCEL,
+                        id: 'cancel-profile-address-btn'
+                    }
+                ],
+                header: profileTexts.labels.ADD_BILLING_ADDRESS,
+                TagName: AddEditBillingAddress,
+                class: 'address-dialog',
+                params: {address: {}, countries: this.props.countries, onAddressChange: this.onAddressChange}
+            };
+        }else if(action === 'edit'){
+            return {
+                buttons: [
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.SAVE ,
+                        id: 'save-profile-address-btn',
+                        action: () => {this.saveBillingAddress(this.changedAddress)},
+                        waitForAction: true
+                    },
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.CANCEL,
+                        id: 'cancel-profile-address-btn'
+                    }
+                ],
+                header: profileTexts.labels.EDIT_BILLING_ADDRESS,
+                TagName: AddEditBillingAddress,
+                class: 'address-dialog',
+                params: {address, countries: this.props.countries, onAddressChange: this.onAddressChange}
+            };
+        }else if(action === 'remove'){
+            return{
+                buttons: [
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.YES ,
+                        id: 'remove-profile-address-btn',
+                        action: () => {this.removeBillingAddress(address)}
+                    },
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.NO,
+                        id: 'cancel-remove-profile-address-btn'
+                    }
+                ],
+                header: profileTexts.labels.REMOVE_BILLING_ADDRESS,
+                TagName: RemoveBillingAddress,
+                params: {address}
+            };
+        }else{
+            return {};
+        }
+    }
+
+    openAddressDialog(action, address){
+        const dialogContent = this.getDialogContent(action, address);
+
+        this.props.dispatch(setDialogOpenFlag(true));
+        this.props.dispatch(setDialogContent(dialogContent));
+    }
+
+    render() {
+        const {profileInfo} = this.props;
+        const {location, handleBillingChange, idSelectedBillingAddress} = this.props.params || '';
+        const TagName = location === 'cart' ? SelectBillingAddress :  BillingAddress;
+
+        return (
+            <div>
+                <div id="billing-addresses" className="user-addresses edit-content">
+                    <Row>
+                        <Col>
+                            <h5>{profileTexts.labels.BILLING_ADDRESSES}</h5>
+                            <Button color="secondary"
+                                    onClick={() => {this.openAddressDialog('add')}}
+                                    className="add-address-btn wiaas-button">
+                                    <i className="fa fa-plus" aria-hidden="true"></i> {' '} {profileTexts.buttons.ADD_ADDRESS}
+                            </Button>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            {
+                                (profileInfo && profileInfo.billingAddresses && profileInfo.billingAddresses.length > 0 ) &&
+                                profileInfo.billingAddresses.map(address =>
+                                    <TagName key={'address-'+ address.id}
+                                        idSelectedBillingAddress={idSelectedBillingAddress}
+                                        handleBillingChange={handleBillingChange}
+                                        openAddressDialog={this.openAddressDialog}
+                                        billingAddress={address}/>)
+                            }
+
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    profileInfo: state.profileSettingsReducer.profileInfo,
+    countries: state.profileSettingsReducer.countries
+});
+export default connect(mapStateToProps)(BillingAddressesContainer);

frontend/src/containers/profileSettings/ChangePasswordContainer.jsx

@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Row, Col, Button, Alert} from 'reactstrap';
+import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
+import {generatePassword} from '../../actions/login/authActions';
+import {profileTexts} from '../../constants/profileSettingsConstants';
+import {loginMessages} from '../../constants/authConstants';
+
+class ChangePasswordContainer extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            isPasswordChanged: false
+        };
+
+        this.generatePassword = this.generatePassword.bind(this);
+    }
+
+    generatePassword() {
+        const {mail} = this.props.profileInfo || '';
+        this.props.dispatch(generatePassword(mail));
+        this.setState({isPasswordChanged: true});
+    }
+
+    render() {
+        return (
+            <div>
+                <WiaasBox id="profile-edit">
+                    <div className="edit-content">
+                        <Row>
+                            <Col>
+                                <h5>{profileTexts.labels.CHANGE_PASSWORD}</h5>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <div>
+                                    <Button color="secondary"
+                                        onClick={this.generatePassword}
+                                        className="change-password wiaas-button">{profileTexts.buttons.GENERATE_TOKEN}</Button>
+                                </div>
+                                {
+                                    this.state.isPasswordChanged &&
+                                    <div id="change-password-message">
+                                        {loginMessages[this.props.errorMessage] && <Alert className='wiaas-alert' color={this.props.messageColor}>{loginMessages[this.props.errorMessage]}</Alert>}
+                                    </div>
+                                }
+                            </Col>
+                        </Row>
+                    </div>
+                </WiaasBox>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    errorMessage: state.auth.errorMessage,
+    messageColor: state.auth.messageColor
+});
+
+export default connect(mapStateToProps)(ChangePasswordContainer);

frontend/src/containers/profileSettings/CompanyEditContainer.jsx

@@ -0,0 +1,80 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Row, Col, Form, FormGroup, Label, Input, Button} from 'reactstrap';
+import {saveCompanyInfo} from '../../actions/profileSettings/profileSettingsActions';
+import {profileTexts} from '../../constants/profileSettingsConstants';
+
+class CompanyEditContainer extends Component {
+    constructor(props){
+        super(props);
+
+        const profile = this.props.profileInfo;
+        this.state = {
+            idCompany: profile.idCompany,
+            vatCode: profile.vatCode,
+            companyName: profile.companyName
+        };
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        const field = event.target.name;
+        const profile = {};
+        profile[field] = event.target.value;
+        return this.setState(profile);
+    }
+
+    handleSubmit(event) {
+        this.props.dispatch(saveCompanyInfo(this.props.idUser, this.state));
+        event.preventDefault();
+    }
+
+    render() {
+        const {companyName, vatCode} = this.state;
+
+        return (
+            <div>
+                <div id="company-edit" className="edit-content">
+                    <Row>
+                        <Col>
+                            <h5>{profileTexts.labels.COMPANY_EDIT_TITLE}</h5>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <Form onSubmit={this.handleSubmit} className="company-edit-content">
+                                <FormGroup row>
+                                      <Label xl="2" for="company-name">{profileTexts.labels.COMPANY_NAME}</Label>
+                                      <Col xl="4">
+                                          <Input  value={companyName}
+                                              onChange={this.handleChange}
+                                              type="text"
+                                              name="companyName"
+                                              id="company-name"
+                                              placeholder={profileTexts.labels.COMPANY_NAME} />
+                                      </Col>
+
+                                </FormGroup>
+                                <FormGroup row>
+                                      <Label xl="2" for="company-vat">{profileTexts.labels.VAT_CODE}</Label>
+                                      <Col xl="4" lg="6" md="6">
+                                          <Input value={vatCode}
+                                              onChange={this.handleChange}
+                                              type="text"
+                                              name="vatCode"
+                                              id="company-vat"
+                                              placeholder={profileTexts.labels.VAT_CODE} />
+                                      </Col>
+                                </FormGroup>
+                                <Button color="secondary" className="save-company-btn wiaas-button">{profileTexts.buttons.SAVE}</Button>
+                            </Form>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connect()(CompanyEditContainer);

frontend/src/containers/profileSettings/ProfileAddressesContainer.jsx

@@ -0,0 +1,152 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Row, Col, Button} from 'reactstrap';
+import ProfileAddress from './components/ProfileAddress.jsx';
+import SelectDeliveryAddress from '../cart/components/SelectDeliveryAddress.jsx';
+import AddEditProfileAddress from './components/AddEditProfileAddress.jsx';
+import RemoveProfileAddress from './components/RemoveProfileAddress.jsx';
+import {profileTexts} from '../../constants/profileSettingsConstants';
+import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
+import {saveProfileAddress, removeProfileAddress} from '../../actions/profileSettings/addressActions';
+import './style/AddressesContainer.css';
+
+class ProfileAddressesContainer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.changedAddress = {};
+
+        this.openAddressDialog = this.openAddressDialog.bind(this);
+        this.onAddressChange = this.onAddressChange.bind(this);
+    }
+
+    saveProfileAddress(profileAddress){
+        this.props.dispatch(saveProfileAddress(this.props.idUser, profileAddress));
+    }
+
+    onAddressChange(address){
+        this.changedAddress = Object.assign({}, address);
+    }
+
+    removeProfileAddress(profileAddress){
+        this.props.dispatch(removeProfileAddress(this.props.idUser, profileAddress.id));
+    }
+
+    getDialogContent(action, profileAddress){
+        if(action === 'add'){
+            return {
+                buttons: [
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.SAVE ,
+                        id: 'save-profile-address-btn',
+                        action: () => {this.saveProfileAddress(this.changedAddress)},
+                        waitForAction: true
+                    },
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.CANCEL,
+                        id: 'cancel-profile-address-btn'
+                    }
+                ],
+                header: profileTexts.labels.ADD_PROFILE_ADDRESS,
+                TagName: AddEditProfileAddress,
+                class: 'address-dialog',
+                params: {profileAddress: {}, countries: this.props.countries, onAddressChange: this.onAddressChange}
+            };
+        }else if(action === 'edit'){
+            return {
+                buttons: [
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.SAVE ,
+                        id: 'save-profile-address-btn',
+                        action: () => {this.saveProfileAddress(this.changedAddress)},
+                        waitForAction: true
+                    },
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.CANCEL,
+                        id: 'cancel-profile-address-btn'
+                    }
+                ],
+                header: profileTexts.labels.EDIT_PROFILE_ADDRESS,
+                TagName: AddEditProfileAddress,
+                class: 'address-dialog',
+                params: {profileAddress, countries: this.props.countries, onAddressChange: this.onAddressChange}
+            };
+        }else if(action === 'remove'){
+            return{
+                buttons: [
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.YES ,
+                        id: 'remove-profile-address-btn',
+                        action: () => {this.removeProfileAddress(profileAddress)}
+                    },
+                    {
+                        color: 'secondary',
+                        name: profileTexts.buttons.NO,
+                        id: 'cancel-remove-profile-address-btn'
+                    }
+                ],
+                header: profileTexts.labels.REMOVE_PROFILE_ADDRESS,
+                TagName: RemoveProfileAddress,
+                params: {profileAddress}
+            };
+        }else{
+            return {};
+        }
+    }
+
+    openAddressDialog(action, profileAddress) {
+        const dialogContent = this.getDialogContent(action, profileAddress);
+
+        this.props.dispatch(setDialogOpenFlag(true));
+        this.props.dispatch(setDialogContent(dialogContent));
+    }
+
+    render() {
+        const {profileInfo} = this.props;
+        const { location, handleDeliveryChange, idSelectedDeliveryAddress} = this.props.params || '';
+        const TagName = location === 'cart' ? SelectDeliveryAddress :  ProfileAddress;
+
+        return (
+            <div>
+                <div id="profile-addresses" className="user-addresses edit-content">
+                    <Row>
+                        <Col>
+                            <h5>{profileTexts.labels.PROFILE_ADDRESSES}</h5>
+                            <Button color="secondary"
+                                    onClick={() => {this.openAddressDialog('add')}}
+                                    className="add-address-btn wiaas-button">
+                                    <i className="fa fa-plus" aria-hidden="true"></i> {' '} {profileTexts.buttons.ADD_ADDRESS}
+                            </Button>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <div>
+                                {
+                                    (profileInfo && profileInfo.profileAddresses && profileInfo.profileAddresses.length > 0 ) &&
+                                    profileInfo.profileAddresses.map(address =>
+                                        <TagName key={'address-'+ address.id}
+                                            idSelectedDeliveryAddress={idSelectedDeliveryAddress}
+                                            handleDeliveryChange={handleDeliveryChange}
+                                            openAddressDialog={this.openAddressDialog}
+                                            profileAddress={address}/>)
+                                }
+                            </div>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    profileInfo: state.profileSettingsReducer.profileInfo,
+    countries: state.profileSettingsReducer.countries
+});
+export default connect(mapStateToProps)(ProfileAddressesContainer);

frontend/src/containers/profileSettings/ProfileEditContainer.jsx

@@ -0,0 +1,81 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Row, Col, Form, FormGroup, Label, Input, Button} from 'reactstrap';
+import {saveProfileInfo} from '../../actions/profileSettings/profileSettingsActions';
+import {profileTexts} from '../../constants/profileSettingsConstants';
+
+class ProfileEditContainer extends Component {
+    constructor(props){
+        super(props);
+
+        const profile = this.props.profileInfo;
+        this.state = {
+            name: profile.name,
+            phone: profile.phone,
+            idUserType: profile.idUserType,
+            id: profile.id
+        };
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        const field = event.target.name;
+        const profile = {};
+        profile[field] = event.target.value;
+        return this.setState(profile);
+    }
+
+    handleSubmit(event) {
+        this.props.dispatch(saveProfileInfo(this.props.idUser, this.state));
+        event.preventDefault();
+    }
+
+    render() {
+        const {name, phone} = this.state;
+        return (
+            <div>
+                <div id="profile-edit" className="edit-content">
+                    <Row>
+                        <Col>
+                            <h5>{profileTexts.labels.PROFILE_EDIT_TITLE}</h5>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col>
+                            <Form onSubmit={this.handleSubmit} className="profile-edit-content">
+                                <FormGroup row>
+                                      <Label xl="2" for="profile-name">{profileTexts.labels.PROFILE_NAME}</Label>
+                                      <Col xl="4">
+                                          <Input value={name}
+                                              onChange={this.handleChange}
+                                              type="text"
+                                              name="name"
+                                              id="profile-name"
+                                              placeholder={profileTexts.labels.PROFILE_NAME} />
+                                      </Col>
+
+                                </FormGroup>
+                                <FormGroup row>
+                                      <Label xl="2" for="profile-phone">{profileTexts.labels.PROFILE_PHONE}</Label>
+                                      <Col xl="4">
+                                          <Input value={phone}
+                                              onChange={this.handleChange}
+                                              type="text"
+                                              name="phone"
+                                              id="profile-phone"
+                                              placeholder={profileTexts.labels.PROFILE_PHONE} />
+                                      </Col>
+
+                                </FormGroup>
+                                <Button color="secondary" className="save-profile-btn wiaas-button">{profileTexts.buttons.SAVE}</Button>
+                            </Form>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connect()(ProfileEditContainer);

frontend/src/containers/profileSettings/ProfileSettingsContainer.jsx

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Container, Row, Col} from 'reactstrap';
+import ProfileEditContainer from './ProfileEditContainer.jsx';
+import CompanyEditContainer from './CompanyEditContainer.jsx';
+import ProfileShowContainer from './ProfileShowContainer.jsx';
+import ProfileAddressesContainer from './ProfileAddressesContainer.jsx';
+import BillingAddressesContainer from './BillingAddressesContainer.jsx';
+import ChangePasswordContainer from './ChangePasswordContainer.jsx';
+import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
+import {fetchProfileInfo, fetchCountries} from '../../actions/profileSettings/profileSettingsActions';
+import './style/ProfieSettingsContainer.css';
+
+class ProfileSettingsContainer extends Component {
+    componentDidMount(){
+        this.props.dispatch(fetchProfileInfo(this.props.userInfo.wiaas_id_user));
+        this.props.dispatch(fetchCountries());
+    }
+
+    render() {
+        const  {profileInfo, isLoading} = this.props;
+        return (
+            <Container fluid={true} id="proffile-settings">
+                {
+                    isLoading &&
+                    <div className="loader">
+                        <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
+                    </div>
+                }
+                {
+                    (profileInfo && !isLoading) &&
+                    <Row>
+                        <Col xl="8" lg="8" md="6" xs="12">
+                            <WiaasBox>
+                                <ProfileEditContainer idUser={this.props.userInfo.wiaas_id_user} profileInfo={this.props.profileInfo}/>
+                                {
+                                    profileInfo.isCompanyAdmin === 1 &&
+                                    <CompanyEditContainer idUser={this.props.userInfo.wiaas_id_user} profileInfo={profileInfo}/>
+                                }
+                                <ProfileAddressesContainer idUser={this.props.userInfo.wiaas_id_user}/>
+                                <BillingAddressesContainer idCompany={profileInfo.idCompany} idUser={this.props.userInfo.wiaas_id_user}/>
+                            </WiaasBox>
+                        </Col>
+                        <Col xl="4" lg="4" md="6" xs="12">
+                            <ProfileShowContainer profileInfo={this.props.profileInfo}/>
+                            <ChangePasswordContainer profileInfo={this.props.profileInfo}/>
+                        </Col>
+                    </Row>
+                }
+            </Container>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    profileInfo: state.profileSettingsReducer.profileInfo,
+    isLoading: state.profileSettingsReducer.isLoading,
+    userInfo: state.auth.userInfo
+});
+export default connect(mapStateToProps)(ProfileSettingsContainer);

frontend/src/containers/profileSettings/ProfileShowContainer.jsx

@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import {Col, Card, CardImg, CardBody, CardTitle} from 'reactstrap';
+import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
+import profileSvg from '../../svg/profile.svg';
+import './style/ProfileShowContainer.css';
+
+class ProfileShowContainer extends Component {
+    render() {
+        const {profileInfo, isLoading} = this.props;
+
+        return (
+            <div>
+                <WiaasBox id="profile-show">
+                    {
+                        isLoading &&
+                        <Col xl="12" className="loader">
+                            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
+                        </Col>
+                    }
+                    {
+                        (profileInfo && !isLoading) &&
+                        <Card id='profile-info-card'>
+                            <CardImg top
+                                className="profile-image"
+                                src={profileSvg}
+                                alt="My Profile" />
+                            <CardBody className="text-center">
+                                  <CardTitle>{profileInfo.name}</CardTitle>
+                                  <div>
+                                      <div>
+                                          {profileInfo.companyName}
+                                      </div>
+                                      <div>
+                                          {profileInfo.vatCode}
+                                      </div>
+                                      <div>
+                                          <i className="fa fa-envelope" aria-hidden="true"></i>  {profileInfo.mail}
+                                      </div>
+                                      <div>
+                                         <i className="fa fa-phone" aria-hidden="true"></i> {profileInfo.phone}
+                                      </div>
+                                 </div>
+                            </CardBody>
+                          </Card>
+                    }
+                </WiaasBox>
+            </div>
+        );
+    }
+}
+
+export default ProfileShowContainer;

frontend/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;

frontend/src/containers/profileSettings/components/AddEditProfileAddress.jsx

@@ -0,0 +1,90 @@
+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;

frontend/src/containers/profileSettings/components/BillingAddress.jsx

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+
+class BillingAddress extends Component {
+
+    render() {
+        const {billingAddress, openAddressDialog} = this.props;
+
+        return (
+            <div className="address-row">
+                <div className="address-text">
+                    <div className="small-address-title">
+                        {billingAddress.firstName} {billingAddress.lastName}
+                        {
+                            billingAddress.invoiceMail &&
+                            <span>( {billingAddress.invoiceMail} )</span>
+                        }
+                    </div>
+                    <div>
+                        {billingAddress.countryName}, {billingAddress.city}, {billingAddress.detailedAddress}, {billingAddress.zipCode}
+                    </div>
+                </div>
+                <div className="address-icons">
+                    <i className="fa fa-pencil control-icon edit-address-btn"
+                        id="edit-address-btn"
+                        onClick={()=> {openAddressDialog('edit', billingAddress)}}
+                        aria-hidden="true"></i>
+                    <i className="fa fa-trash control-icon remove-address-btn"
+                        id="remove-address-btn"
+                        onClick={()=> {openAddressDialog('remove', billingAddress)}}
+                        aria-hidden="true"></i>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default BillingAddress;

frontend/src/containers/profileSettings/components/ProfileAddress.jsx

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+
+class ProfileAddress extends Component {
+
+    render() {
+        const {profileAddress, openAddressDialog} = this.props;
+
+        return (
+            <div className="address-row">
+                <div className="address-text">
+                    {profileAddress.countryName}, {profileAddress.city}, {profileAddress.detailedAddress}, {profileAddress.zipCode}
+                </div>
+                <div className="address-icons">
+                    <i className="fa fa-pencil control-icon edit-address-btn"
+                        onClick={()=> {openAddressDialog('edit', profileAddress)}}
+                        id="edit-address-btn"
+                        aria-hidden="true"></i>
+                    <i className="fa fa-trash control-icon remove-address-btn"
+                        onClick={()=> {openAddressDialog('remove', profileAddress)}}
+                        id="remove-address-btn"
+                        aria-hidden="true"></i>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ProfileAddress;

frontend/src/containers/profileSettings/components/RemoveBillingAddress.jsx

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {profileTexts} from '../../../constants/profileSettingsConstants';
+
+class RemoveBillingAddress extends Component {
+
+    render() {
+        const {address} = this.props.params;
+
+        return (
+            <div className="address-remove-content">
+                <div>{profileTexts.labels.REMOVE_CONFIRMATION}</div>
+                <div className="small-address-title">
+                    {address.firstName} {address.lastName}
+                </div>
+                <div>{address.countryName}, {address.city}, {address.detailedAddress}, {address.zipCode}</div>
+            </div>
+        );
+    }
+}
+
+export default RemoveBillingAddress;

frontend/src/containers/profileSettings/components/RemoveProfileAddress.jsx

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {profileTexts} from '../../../constants/profileSettingsConstants';
+
+class RemoveProfileAddress extends Component {
+
+    render() {
+        const {profileAddress} = this.props.params;
+
+        return (
+            <div className="address-remove-content">
+                <div>{profileTexts.labels.REMOVE_CONFIRMATION}</div>
+                <div>{profileAddress.countryName}, {profileAddress.city}, {profileAddress.detailedAddress}, {profileAddress.zipCode}</div>
+            </div>
+        );
+    }
+}
+
+export default RemoveProfileAddress;

frontend/src/containers/profileSettings/style/AddressesContainer.scss

@@ -0,0 +1,56 @@
+@import '../../../styleConstants.scss';
+
+.user-addresses {
+    .address-row {
+        border-bottom: 1px solid $divider-color;
+        padding: 0.5rem 0;
+    }
+
+    .address-text {
+        position: relative;
+        display: inline-block;
+        width: 85%;
+    }
+
+    .address-icons{
+        min-width: 6rem;
+        display: inline-block;
+        text-align: right;
+        width: 15%;
+    }
+
+    .control-icon {
+        margin-right: 2rem;
+        font-size: $font-size-big;
+        cursor: pointer;
+    }
+
+    .remove-address-btn:hover {
+        color: $danger;
+    }
+
+    .edit-address-btn:hover {
+        color: $info-color;
+    }
+
+    .add-address-btn{
+        margin-top: 1rem;
+    }
+
+    .small-address-title{
+        font-weight: $font-weight;
+    }
+}
+
+.address-edit-content{
+    .required-icon{
+        font-size: 110%;
+        position: absolute;
+        left: auto;
+        color: $danger;
+    }
+}
+
+.address-dialog{
+    min-width: 30%;
+}

frontend/src/containers/profileSettings/style/ProfieSettingsContainer.scss

@@ -0,0 +1,10 @@
+@import '../../../styleConstants.scss';
+
+#proffile-settings{
+
+    .edit-content{
+        padding: 1rem 2rem 1rem 2rem;
+        background: $whiteColor;
+        border-bottom: 1px solid $divider-color;
+    }
+}

frontend/src/containers/profileSettings/style/ProfileShowContainer.scss

@@ -0,0 +1,7 @@
+#profile-show{
+    .profile-image{
+        display: inline-block;
+        width: 30%;
+        margin-left: 35%;
+    }
+}