118 lines
5.1 KiB
JavaScript
118 lines
5.1 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Label, Popover, PopoverBody, Input, Col, Row} 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, currency} = this.props;
|
|
|
|
return (
|
|
<Row
|
|
className={`option-selection ${this.getClass(selectedAgreement, price)}`}
|
|
>
|
|
<Label check className="row flex-grow-1 no-wrap">
|
|
<Col className="d-flex align-items-center">
|
|
<Input type="radio"
|
|
name="price-type"
|
|
onChange={this.handleOptionChange}
|
|
checked={selectedAgreement.idPaymentType === price.idPaymentType}
|
|
value={price.idPaymentType}
|
|
className="price-type-option"/>
|
|
<span className="option-name">{price.payType}</span>
|
|
</Col>
|
|
<Col className="d-flex align-items-center">
|
|
<span>{price.fixedExtra.toLocaleString()} {currency}</span>
|
|
</Col>
|
|
<Col className="d-flex align-items-center">
|
|
<span className="option-value-text monthly-price">
|
|
{
|
|
priceHelper.hasRecurrentPrice(price)
|
|
? `${priceHelper.sumPrices([price.recurentExtra, price.servicesExtra]).toLocaleString()} ${currency}`
|
|
: '0'
|
|
}
|
|
</span>
|
|
</Col>
|
|
</Label>
|
|
<i className="price-info-btn fa fa-info-circle d-flex align-items-center"
|
|
aria-hidden="true"
|
|
id={'info-additonal-' + price.idPaymentType}
|
|
onClick={this.toggle}></i>
|
|
<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()} {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()} {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>
|
|
</Row>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement
|
|
});
|
|
|
|
export default connect(mapStateToProps)(AgreementOptionItem);
|