senaduka/old-new-wiaas
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add support for package payment methods and basic checkout proccess

Browse Source
This commit is contained in:
Almira Krdzic
2018-08-29 07:56:37 +02:00
parent 5ac3bfff36
commit 438d92e16e
35 changed files with 1600 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/containers/coMarket/components/AgreementOptionItemContainer.jsx
View File

@@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
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';
@@ -35,49 +35,39 @@ class AgreementOptionItem extends Component {
}
render() {
const {price, selectedAgreement, country} = this.props;
const {price, selectedAgreement, currency} = 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>
<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"/>
<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>
<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}
@@ -90,7 +80,7 @@ class AgreementOptionItem extends Component {
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.recurentExtra).toLocaleString()} {currency} / {price.periodUnit}
{
price.packagePayPeriod > 0 &&
<span>
@@ -103,7 +93,7 @@ class AgreementOptionItem extends Component {
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.servicesExtra).toLocaleString()} {currency} / {price.periodUnit}
{
price.servicesContractPeriod > 0 &&
<span>
@@ -115,7 +105,7 @@ class AgreementOptionItem extends Component {
</div>
</PopoverBody>
</Popover>
</Col>
</Row>
);
}
}