old-new-wiaas/frontend/src/containers/coMarket/components/AgreementOptionItemContainer.jsx

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
import {selectAgreement} from '../../../actions/coMarket/coMarketPackageDetailsActions';
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
import {coMarketTexts} from '../../../constants/coMarketConstants';

const priceHelper = new PriceHelper();

class AgreementOptionItem extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.state = {
          popoverOpen: false
        };
    }

    toggle() {
        this.setState({
          popoverOpen: !this.state.popoverOpen
        });
    }

    handleOptionChange() {
        this.props.dispatch(selectAgreement(this.props.price));
    }

    getClass(selectedAgreement, price) {
        return selectedAgreement.idPaymentType === price.idPaymentType ?
            'selected-option' :
            '';
    }

    render() {
        const {price, selectedAgreement, country} = this.props;

        return (
            <Col xl="4" lg="4" md="6" xs="6" className="option-value">
                <div className={'option-selection ' + this.getClass(selectedAgreement, price)}>
                    <Label check>
                        <Input type="radio"
                               name="price-type"
                               onChange={this.handleOptionChange}
                               checked={selectedAgreement.idPaymentType === price.idPaymentType}
                               value={price.idPaymentType}
                               className="price-type-option"/>
                           <div className="option-name">{price.payType}</div>
                           <div className="option-prices">
                               <table className="price-table option-price-table">
                                   <thead>
                                       <tr>
                                           <th>{coMarketTexts.labels.ON_DELIVERY}</th>
                                           <th>{coMarketTexts.labels.MONTHLY}</th>
                                       </tr>
                                   </thead>
                                   <tbody>
                                       <tr>
                                           <td>{price.fixedExtra.toLocaleString()} {country.currency}</td>
                                           <td>
                                               {
                                                    priceHelper.hasRecurrentPrice(price)
                                                    ? <div className="option-value-text monthly-price">
                                                       {priceHelper.sumPrices([price.recurentExtra, price.servicesExtra]).toLocaleString()} {country.currency}
                                                   </div>
                                                   : <div className="option-value-text monthly-price"> 0 </div>
                                                }
                                            </td>
                                       </tr>
                                   </tbody>
                               </table>
                           </div>
                    </Label>
                    <i className="price-info-btn fa fa-info-circle"
                        aria-hidden="true"
                        id={'info-additonal-' + price.idPaymentType}
                        onClick={this.toggle}></i>
                </div>
                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-additonal-' + price.idPaymentType}
                            className="price-info-popover"
                            container="shop-package-buy-info"
                            toggle={this.toggle}>
                   <PopoverBody>
                       <div>
                           {
                               price.recurentExtra > 0 &&
                               <div className="package-price-recurrent">
                                   <span className="price-info-title">{coMarketTexts.labels.RECURRENT_PRICE}: </span>
                                   {(price.recurentExtra).toLocaleString()} {country.currency} / {price.periodUnit}
                                   {
                                       price.packagePayPeriod > 0 &&
                                       <span>
                                           {' '} for {price.packagePayPeriod} {price.periodUnit}
                                       </span>
                                   }
                               </div>
                           }
                           {
                               price.servicesExtra > 0 &&
                               <div className="services-price-recurrent">
                                   <span className="price-info-title">{coMarketTexts.labels.SERVICE_PRICE}: </span>
                                   {(price.servicesExtra).toLocaleString()} {country.currency} / {price.periodUnit}
                                   {
                                       price.servicesContractPeriod > 0 &&
                                       <span>
                                           {' '} for {price.servicesContractPeriod} {price.periodUnit} {coMarketTexts.labels.EXTEND} {price.periodUnit} (Max {price.maxContractPeriod} {price.periodUnit})
                                       </span>
                                   }
                               </div>
                           }
                       </div>
                   </PopoverBody>
                </Popover>
            </Col>
        );
    }
}

const mapStateToProps = (state) => ({
    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement
});

export default connect(mapStateToProps)(AgreementOptionItem);