Add package addons and options

This commit is contained in:
Almira Krdzic
2018-09-06 23:29:29 +02:00
parent 5bef0b9e5e
commit cd5f09487d
25 changed files with 1302 additions and 482 deletions

View File

@@ -1,5 +1,6 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import { Col } from 'reactstrap';
import {coMarketTexts} from '../../../constants/coMarketConstants';
class PackagePrice extends Component {
@@ -38,34 +39,55 @@ class PackagePrice extends Component {
return price;
}
getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals) {
if (!selectedAgreement) {
return '-';
}
const finalPrice = this.getFinalPrice(
selectedAgreement,
selectedOptions,
selectedAdditionals,
'fixedExtra');
return `${finalPrice.toLocaleString()} ${this.props.currency}`
}
getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals) {
if (!selectedAgreement) {
return '-';
}
const recurrentExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra');
const servicesExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra');
return `${(recurrentExtra + servicesExtra).toLocaleString()} ${this.props.currency}`
}
render() {
const {currency, selectedAgreement, selectedOptions, selectedAdditionals} = this.props;
const {selectedAgreement, selectedOptions, selectedAdditionals} = this.props;
return (
<div className="selection-price">
{
selectedAgreement &&
<table className="price-table main-price">
<thead>
<tr>
<th>{coMarketTexts.labels.ON_DELIVERY}</th>
<th>{coMarketTexts.labels.MONTHLY}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {currency}
</td>
<td>
{(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
+ this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
{' '}{currency}
</td>
</tr>
</tbody>
</table>
}
<div className="shop-package-price d-flex flex-column">
<div className="d-flex flex-grow-1 no-wrap">
<Col className="col-3 offset-6">
<h6>{coMarketTexts.labels.ON_DELIVERY}:</h6>
</Col>
<Col className="col-3">
<h6>{coMarketTexts.labels.MONTHLY}:</h6>
</Col>
</div>
<div className="d-flex flex-grow-1 no-wrap">
<Col className="col-3 offset-6">
<h4>
{this.getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
</h4>
</Col>
<Col className="col-3">
<h4>
{this.getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
</h4>
</Col>
</div>
</div>
);
}