Add package addons and options
This commit is contained in:
Almira Krdzic
@@ -2,7 +2,7 @@
|
||||
|
||||
#cart-count {
|
||||
vertical-align: middle;
|
||||
color: $cart-count-color;
|
||||
color: $accentColor;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
font-family: arial,sans-serif;
|
||||
|
||||
@@ -5,7 +5,7 @@ import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
|
||||
import {fetchPackageDetails, addToCart} from '../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PackageInfo from './components/PackageInfo.jsx';
|
||||
import PackagePrice from './components/PackagePrice.jsx';
|
||||
import PackageOptions from './components/PackageOptions.jsx';
|
||||
import PackageOptionGroup from './components/PackageOptionGroup';
|
||||
import AdditionalPackages from './components/AdditionalPackages.jsx';
|
||||
import AgreementOptions from './components/AgreementOptions.jsx';
|
||||
import {coMarketTexts} from '../../constants/coMarketConstants';
|
||||
@@ -64,21 +64,30 @@ class CoMarketPackageDetailsContainer extends Component {
|
||||
|
||||
<Col xl="6" lg="7" md="12" xs="12">
|
||||
<div id="shop-package-buy-info">
|
||||
{
|
||||
selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
|
||||
<PackageOptions
|
||||
groups={selectedPackage.groups}
|
||||
country={selectedPackage.country}/>
|
||||
}
|
||||
<PackagePrice currency={selectedPackage.currency} />
|
||||
<AgreementOptions
|
||||
prices={selectedPackage.prices}
|
||||
currency={selectedPackage.currency}/>
|
||||
{
|
||||
selectedPackage.additionalPackages && selectedPackage.additionalPackages.length > 0 && selectedAgreement &&
|
||||
<AdditionalPackages
|
||||
additionalPackages={selectedPackage.additionalPackages}
|
||||
country={selectedPackage.country}/>
|
||||
currency={selectedPackage.currency}/>
|
||||
}
|
||||
{
|
||||
selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
|
||||
(<div className="shop-package-options">
|
||||
{
|
||||
Object.keys(selectedPackage.groups).map(groupKey => {
|
||||
const group = selectedPackage.groups[groupKey];
|
||||
return (<PackageOptionGroup
|
||||
key={groupKey}
|
||||
group={group}
|
||||
currency={selectedPackage.currency}/>);
|
||||
})
|
||||
}
|
||||
</div>)
|
||||
}
|
||||
<AgreementOptions
|
||||
prices={selectedPackage.prices}
|
||||
currency={selectedPackage.currency}/>
|
||||
<Row className="justify-content-end" style={{ marginTop: 30 }}>
|
||||
<Button id="add-to-cart-btn"
|
||||
className="add-to-cart-btn"
|
||||
|
||||
@@ -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 {selectAdditional, removetAdditional} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
@@ -34,7 +34,7 @@ class AdditionalPackageItem extends Component {
|
||||
}
|
||||
|
||||
isChecked() {
|
||||
return this.props.selectedAdditionals
|
||||
return !!this.props.selectedAdditionals
|
||||
&& this.props.selectedAdditionals.includes(this.props.additionalPackage);
|
||||
}
|
||||
|
||||
@@ -44,9 +44,9 @@ class AdditionalPackageItem extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
getClass(isChecked) {
|
||||
return isChecked ?
|
||||
'selected-option' :
|
||||
getClass() {
|
||||
return this.isChecked() ?
|
||||
'shop-package-option-selected' :
|
||||
'';
|
||||
}
|
||||
|
||||
@@ -55,62 +55,59 @@ class AdditionalPackageItem extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {additionalPackage, country} = this.props;
|
||||
const {additionalPackage, currency} = this.props;
|
||||
const isAvailable = this.isAvailable();
|
||||
const selectedPrice = priceHelper.getSelectedPrice(additionalPackage, this.props.selectedAgreement);
|
||||
const isChecked = this.isChecked();
|
||||
|
||||
return (
|
||||
<Col xl="4" lg="4" md="6" xs="6" className="option-value">
|
||||
<div className={'option-selection ' + this.getClass(isChecked)}>
|
||||
<Label check>
|
||||
<Input type="checkbox"
|
||||
onChange={this.handleOptionChange}
|
||||
name={'package-option-'+ additionalPackage.idAdditionalPackage}
|
||||
className="package-option-input"/>
|
||||
<div className="option-name">{this.formatName(additionalPackage.packageName)}</div>
|
||||
<div className="option-description" dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}></div>
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) &&
|
||||
<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>{selectedPrice.fixedExtra > 0 ? selectedPrice.fixedExtra.toLocaleString() : 0} {country.currency}</td>
|
||||
<td>
|
||||
<div className="option-value-text monthly-price">
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(selectedPrice)
|
||||
? priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString() + ' '
|
||||
: 0
|
||||
} {country.currency}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
</Label>
|
||||
{
|
||||
!isAvailable &&
|
||||
<span className="not-available">
|
||||
({coMarketTexts.labels.NOT_AVAILABLE})
|
||||
<i className="price-info-btn fa fa-info-circle"
|
||||
aria-hidden="true"
|
||||
id={'info-additonal-' + additionalPackage.idAdditionalPackage}
|
||||
onClick={this.toggle}></i>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div
|
||||
id={'info-additonal-' + additionalPackage.idAdditionalPackage}
|
||||
className={`shop-package-option d-flex ${this.getClass()}`}
|
||||
>
|
||||
<Label check className="d-flex flex-grow-1 flex-column">
|
||||
<div className="d-flex">
|
||||
<Col className="col-6 d-flex align-items-center">
|
||||
<Input type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={this.handleOptionChange}
|
||||
name={'package-option-'+ additionalPackage.idAdditionalPackage}
|
||||
className="package-option-input"
|
||||
/>
|
||||
<span className="option-name">
|
||||
{this.formatName(additionalPackage.packageName)}
|
||||
</span>
|
||||
</Col>
|
||||
<Col className="col-3 d-flex align-items-center">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && (<span>
|
||||
{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
|
||||
</span>)
|
||||
}
|
||||
</Col>
|
||||
<Col className="col-3 d-flex align-items-center">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
(<span>{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {currency}</span>) :
|
||||
<span>0</span>
|
||||
}
|
||||
</Col>
|
||||
</div>
|
||||
<div
|
||||
className="shop-package-option-description"
|
||||
dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}
|
||||
></div>
|
||||
</Label>
|
||||
{
|
||||
!isAvailable &&
|
||||
<span className="not-available">
|
||||
({coMarketTexts.labels.NOT_AVAILABLE})
|
||||
<i className="price-info-btn fa fa-info-circle"
|
||||
aria-hidden="true"
|
||||
id={'info-additonal-' + additionalPackage.idAdditionalPackage}
|
||||
onClick={this.toggle}></i>
|
||||
</span>
|
||||
}
|
||||
<Popover placement="bottom"
|
||||
isOpen={this.state.popoverOpen}
|
||||
target={'info-additonal-' + additionalPackage.idAdditionalPackage}
|
||||
@@ -119,7 +116,7 @@ class AdditionalPackageItem extends Component {
|
||||
{coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,19 +5,19 @@ import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class AdditionalPackages extends Component {
|
||||
render() {
|
||||
const {additionalPackages, country} = this.props;
|
||||
const {additionalPackages, currency} = this.props;
|
||||
return (
|
||||
<div className="shop-package-options">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.ADDITIONAL_PACKAGES}:</h6>
|
||||
<Row>
|
||||
{
|
||||
additionalPackages.map(additionalPackage => {
|
||||
return <AdditionalPackageItemContainer key={'additonal-' + additionalPackage.idAdditionalPackage}
|
||||
country={country}
|
||||
additionalPackage={additionalPackage}/>
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
<h6 className="shop-package-option-header">
|
||||
{coMarketTexts.labels.ADDITIONAL_PACKAGES}:
|
||||
</h6>
|
||||
{
|
||||
additionalPackages.map(additionalPackage => {
|
||||
return <AdditionalPackageItemContainer key={'additonal-' + additionalPackage.idAdditionalPackage}
|
||||
currency={currency}
|
||||
additionalPackage={additionalPackage}/>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Col, Row} from 'reactstrap';
|
||||
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';
|
||||
@@ -30,7 +30,7 @@ class AgreementOptionItem extends Component {
|
||||
|
||||
getClass(selectedAgreement, price) {
|
||||
return selectedAgreement.idPaymentType === price.idPaymentType ?
|
||||
'selected-option' :
|
||||
'shop-package-option-selected' :
|
||||
'';
|
||||
}
|
||||
|
||||
@@ -38,11 +38,9 @@ class AgreementOptionItem extends Component {
|
||||
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">
|
||||
<div className={`shop-package-option d-flex ${this.getClass(selectedAgreement, price)}`}>
|
||||
<Label check className="d-flex flex-grow-1 no-wrap">
|
||||
<Col className="d-flex align-items-center col-6">
|
||||
<Input type="radio"
|
||||
name="price-type"
|
||||
onChange={this.handleOptionChange}
|
||||
@@ -51,10 +49,10 @@ class AgreementOptionItem extends Component {
|
||||
className="price-type-option"/>
|
||||
<span className="option-name">{price.payType}</span>
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center">
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
<span>{price.fixedExtra.toLocaleString()} {currency}</span>
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center">
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
<span className="option-value-text monthly-price">
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(price)
|
||||
@@ -64,10 +62,12 @@ class AgreementOptionItem extends Component {
|
||||
</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>
|
||||
<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}
|
||||
@@ -105,7 +105,7 @@ class AgreementOptionItem extends Component {
|
||||
</div>
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +1,19 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row, Col} from 'reactstrap';
|
||||
import AgreementOptionItemContainer from './AgreementOptionItemContainer.jsx';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
import {connect} from "react-redux";
|
||||
|
||||
class AgreementOptions extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.getFinalPrice = this.getFinalPrice.bind(this);
|
||||
this.filterByAgreement = this.filterByAgreement.bind(this);
|
||||
}
|
||||
|
||||
filterByAgreement(price) {
|
||||
return price.idPaymentType === this.props.selectedAgreement.idPaymentType;
|
||||
}
|
||||
|
||||
getExtra(selected, priceType) {
|
||||
const extraPriceObj = selected.prices.find(this.filterByAgreement);
|
||||
const extraPrice = extraPriceObj ? extraPriceObj[priceType] : 0;
|
||||
|
||||
return extraPrice;
|
||||
}
|
||||
|
||||
getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, priceType) {
|
||||
let price = selectedAgreement ? selectedAgreement[priceType] : 0;
|
||||
|
||||
if(selectedAgreement && selectedOptions) {
|
||||
Object.keys(selectedOptions).forEach((idGroup) => {
|
||||
price += this.getExtra(selectedOptions[idGroup], priceType);
|
||||
});
|
||||
}
|
||||
if(selectedAgreement && selectedAdditionals) {
|
||||
selectedAdditionals.forEach((additional) => {
|
||||
price += this.getExtra(additional, priceType);
|
||||
});
|
||||
}
|
||||
|
||||
return price;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {prices, currency, selectedAgreement, selectedOptions, selectedAdditionals} = this.props;
|
||||
const {prices, currency} = this.props;
|
||||
return (
|
||||
<div className="shop-package-pricing">
|
||||
<Row className="justify-content-end">
|
||||
<Col className="col-4">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.ON_DELIVERY}</h6>
|
||||
</Col>
|
||||
<Col className="col-4">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.MONTHLY}</h6>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="shop-package-options">
|
||||
{
|
||||
prices && prices.map((price) => {
|
||||
return (<AgreementOptionItemContainer key={'agreement-' + price.idPaymentType} currency={currency} price={price}/>)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<Row className="justify-content-end shop-package-calculated-price">
|
||||
<Col>
|
||||
<h6>Price:</h6>
|
||||
</Col>
|
||||
<Col className="col-4">
|
||||
{this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {currency}
|
||||
</Col>
|
||||
<Col className="col-4">
|
||||
{(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
|
||||
+ this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
|
||||
{' '}{currency}
|
||||
</Col>
|
||||
</Row>
|
||||
<div className="shop-package-options shop-package-options-pricing">
|
||||
{
|
||||
prices && prices.map((price) => {
|
||||
return (<AgreementOptionItemContainer key={'agreement-' + price.idPaymentType} currency={currency} price={price}/>)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
|
||||
selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions,
|
||||
selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps) (AgreementOptions);
|
||||
export default AgreementOptions;
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row, Col, Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
|
||||
import PackageOptionItemContainer from './PackageOptionItemContainer';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
class PackageOptionGroup extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.toggleDropdown = this.toggleDropdown.bind(this);
|
||||
this.state = {
|
||||
dropdownOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggleDropdown(groupKey) {
|
||||
this.setState({
|
||||
dropdownOpen: !this.state.dropdownOpen
|
||||
});
|
||||
}
|
||||
|
||||
getClass() {
|
||||
if (this.props.selectedOptions && this.props.selectedOptions[this.props.group.idGroup]) {
|
||||
return 'shop-package-option-selected';
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {group, currency, selectedOptions} = this.props;
|
||||
const selectedGroupOption = selectedOptions ? selectedOptions[group.idGroup] : undefined;
|
||||
|
||||
return (
|
||||
<div key={'group-' + group.idGroup} className={this.getClass()}>
|
||||
<Dropdown
|
||||
isOpen={this.state.dropdownOpen}
|
||||
toggle={this.toggleDropdown}
|
||||
className="w-100">
|
||||
<DropdownToggle
|
||||
caret
|
||||
className="w-100 d-flex justify-content-between align-items-center"
|
||||
tag="div"
|
||||
>
|
||||
<div className="d-flex flex-column flex-grow-1">
|
||||
<small className="shop-package-option-header"> {group.groupName}:</small>
|
||||
{
|
||||
selectedGroupOption ?
|
||||
(<PackageOptionItemContainer
|
||||
option={selectedGroupOption}
|
||||
currency={currency}
|
||||
idGroup={group.idGroup}
|
||||
simplified
|
||||
/>) :
|
||||
(<span>Select ...</span>)
|
||||
}
|
||||
</div>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu className="w-100">
|
||||
{
|
||||
group.options.map(option => {
|
||||
return (<PackageOptionItemContainer
|
||||
key={option.idOptionPackage}
|
||||
option={option}
|
||||
currency={currency}
|
||||
idGroup={group.idGroup}/>)
|
||||
})
|
||||
}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
|
||||
selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps) (PackageOptionGroup);
|
||||
@@ -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, Row, Col} from 'reactstrap';
|
||||
import {selectOption} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
@@ -30,14 +30,14 @@ class PackageOptionItem extends Component {
|
||||
}
|
||||
|
||||
isChecked() {
|
||||
return this.props.selectedOptions
|
||||
&& this.props.selectedOptions[this.props.idGroup]
|
||||
return !!this.props.selectedOptions
|
||||
&& !!this.props.selectedOptions[this.props.idGroup]
|
||||
&& this.props.selectedOptions[this.props.idGroup].idOptionPackage === this.props.option.idOptionPackage;
|
||||
}
|
||||
|
||||
getClass(isChecked) {
|
||||
return isChecked ?
|
||||
'selected-option' :
|
||||
getClass() {
|
||||
return this.isChecked() ?
|
||||
'shop-package-option-selected' :
|
||||
'';
|
||||
}
|
||||
|
||||
@@ -46,63 +46,83 @@ class PackageOptionItem extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {idGroup, option, country} = this.props;
|
||||
const {idGroup, option, currency, simplified} = this.props;
|
||||
const selectedPrice = this.props.selectedAgreement ? priceHelper.getSelectedPrice(option, this.props.selectedAgreement) : null;
|
||||
const isChecked = this.isChecked();
|
||||
|
||||
return (
|
||||
<Col xl="4" lg="4" md="6" xs="6" className="option-value">
|
||||
<div className={'form-check-inline option-selection ' + this.getClass(isChecked)}>
|
||||
<Label check>
|
||||
<Input type="radio"
|
||||
name={'package-option-'+ idGroup}
|
||||
className="package-option-input"
|
||||
onChange={this.handleOptionChange}
|
||||
checked={isChecked}
|
||||
value={option.idOptionPackage}/>
|
||||
<div className="option-name">{this.formatName(option.optionName)}</div>
|
||||
<div className="option-description" dangerouslySetInnerHTML={{__html: option.shortDescription}}></div>
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) &&
|
||||
<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>{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + country.currency} </td>
|
||||
<td>
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
<div className="option-value-text monthly-price">
|
||||
{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {country.currency}
|
||||
</div>
|
||||
: <div className="option-value-text monthly-price"> 0 </div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</Label>
|
||||
if (simplified) {
|
||||
return (<div className="d-flex">
|
||||
<Col className="d-flex align-items-center col-6">
|
||||
<span className="option-name">
|
||||
{this.formatName(option.optionName)}
|
||||
</span>
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
{
|
||||
!selectedPrice &&
|
||||
<Label>
|
||||
<div className="not-available">
|
||||
({coMarketTexts.labels.NOT_AVAILABLE})
|
||||
<i className="price-info-btn fa fa-info-circle"
|
||||
aria-hidden="true"
|
||||
id={'info-option-' + idGroup + '-' + option.idOptionPackage}
|
||||
onClick={this.toggle}></i>
|
||||
</div>
|
||||
</Label>
|
||||
priceHelper.hasFixedPrice(selectedPrice) && (<span>
|
||||
{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
|
||||
</span>)
|
||||
}
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
(<span>{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {currency}</span>) :
|
||||
<span>0</span>
|
||||
}
|
||||
</Col>
|
||||
</div>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id={'info-option-' + idGroup + '-' + option.idOptionPackage}
|
||||
className={`shop-package-option d-flex ${this.getClass()}`}
|
||||
>
|
||||
<Label check className="d-flex flex-grow-1 flex-column">
|
||||
<div className="d-flex">
|
||||
<Col className="col-6 d-flex align-items-center">
|
||||
<Input type="radio"
|
||||
name={'package-option-'+ idGroup}
|
||||
className="package-option-input"
|
||||
onChange={this.handleOptionChange}
|
||||
checked={isChecked}
|
||||
value={option.idOptionPackage}/>
|
||||
<div className="option-name">
|
||||
{this.formatName(option.optionName)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="col-3 d-flex align-items-center">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && (<span>
|
||||
{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
|
||||
</span>)
|
||||
}
|
||||
</Col>
|
||||
<Col className="col-3 d-flex align-items-center">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
(<span>{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {currency}</span>) :
|
||||
<span>0</span>
|
||||
}
|
||||
</Col>
|
||||
</div>
|
||||
<div
|
||||
className="shop-package-option-description"
|
||||
dangerouslySetInnerHTML={{__html: option.shortDescription}}></div>
|
||||
</Label>
|
||||
{
|
||||
!selectedPrice &&
|
||||
<Label>
|
||||
<div className="not-available">
|
||||
({coMarketTexts.labels.NOT_AVAILABLE})
|
||||
<i className="price-info-btn fa fa-info-circle"
|
||||
aria-hidden="true"
|
||||
id={'info-option-' + idGroup + '-' + option.idOptionPackage}
|
||||
onClick={this.toggle}></i>
|
||||
</div>
|
||||
</Label>
|
||||
}
|
||||
<Popover placement="bottom"
|
||||
isOpen={this.state.popoverOpen}
|
||||
target={'info-option-' + idGroup + '-' + option.idOptionPackage}
|
||||
@@ -111,7 +131,7 @@ class PackageOptionItem extends Component {
|
||||
{coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row} from 'reactstrap';
|
||||
import PackageOptionItemContainer from './PackageOptionItemContainer.jsx';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class PackageOptions extends Component {
|
||||
render() {
|
||||
const {groups, country} = this.props;
|
||||
return (
|
||||
<div className="shop-package-options">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.PACKAGE_OPTIONS}</h6>
|
||||
{
|
||||
Object.keys(groups).map(groupKey => {
|
||||
const group = groups[groupKey];
|
||||
return <div key={'group-' + group.idGroup} className="package-option">
|
||||
<h6 className="shop-package-label"> {group.groupName}:</h6>
|
||||
<Row>
|
||||
{
|
||||
group.options.map(option => {
|
||||
return <PackageOptionItemContainer key={'option-' + group.idGroup + option.idOptionPackage}
|
||||
option={option}
|
||||
country={country}
|
||||
idGroup={group.idGroup}/>
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PackageOptions;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,19 +55,50 @@
|
||||
#shop-package-buy-info{
|
||||
padding: 2rem;
|
||||
|
||||
.shop-package-pricing {
|
||||
> div.row {
|
||||
margin: 0 32px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-package-calculated-price {
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
.shop-package-options{
|
||||
margin: 1rem 0;
|
||||
border-bottom: 2px solid $title-color;
|
||||
input[type=radio], input[type=checkbox] {
|
||||
position: relative;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
border: 1px solid $hoverColor;
|
||||
border-radius: $box-radius;
|
||||
padding: 0.375rem 0.75rem;
|
||||
cursor: pointer;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.shop-package-option {
|
||||
&-selected {
|
||||
background: $lightHoverColor;
|
||||
}
|
||||
&-header {
|
||||
color: $font-light-color;
|
||||
}
|
||||
&-description {
|
||||
padding-top: 0.5rem;
|
||||
font-size: $font-size-msmall;
|
||||
margin-left: 38px;
|
||||
color: $font-light-color;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin-right: 0.855rem;
|
||||
}
|
||||
}
|
||||
&-pricing {
|
||||
border-bottom: 2px solid $title-color;
|
||||
margin: 3rem 0;
|
||||
label {
|
||||
margin-right: 0 !important;
|
||||
min-height: 3rem;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
.shop-package-option:hover, label:hover, .dropdown:hover {
|
||||
background: $hoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.not-available {
|
||||
@@ -79,59 +110,19 @@
|
||||
}
|
||||
|
||||
.price-info-btn {
|
||||
color: $info-color;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
width: 1.605rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.add-to-cart-btn {
|
||||
cursor: pointer;
|
||||
color: $darkGreyColor;
|
||||
background-color: $whiteColor;
|
||||
border-color:$warmGreyColor;
|
||||
color: #fff;
|
||||
background-color: $accentColor;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.selected-option {
|
||||
background: $hoverColor;
|
||||
}
|
||||
|
||||
.option-selection {
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
> label {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
input.price-type-option {
|
||||
position: relative;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
span.option-name {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
.option-selection:hover {
|
||||
background: $footer-background;
|
||||
color: $whiteColor;
|
||||
}
|
||||
|
||||
.option-selection:hover .price-info-btn {
|
||||
color: $whiteColor;
|
||||
}
|
||||
|
||||
.option-description {
|
||||
padding-top: 0.5rem;
|
||||
font-size: $font-size-msmall;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.price-info-popover {
|
||||
max-width: 50rem;
|
||||
}
|
||||
@@ -140,32 +131,11 @@
|
||||
font-size: $font-size-msmall;
|
||||
}
|
||||
|
||||
.selection-price{
|
||||
background: $hoverColor;
|
||||
display: inline-block;
|
||||
border-radius: $box-radius;
|
||||
font-size: $font-size-big;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.price-table {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.main-price {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.price-table th{
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.price-table td{
|
||||
border-top: 1px solid $darkGreyColor;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.option-price-table{
|
||||
font-size: $font-size-xsmal;
|
||||
.shop-package-price{
|
||||
margin: 1rem 0.855rem 1rem 0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
h6 {
|
||||
color: $font-light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user