old-new-wiaas/frontend/src/containers/profileSettings/BillingAddressesContainer.jsx

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