product details
This commit is contained in:
Almira Krdzic
@@ -32,36 +32,39 @@ class CartItemsContainer extends Component {
|
||||
isFormDisabled={isCartItemsDisabled}/>)}
|
||||
|
||||
<div id="total-price-in-cart-container" className="cart-show-items">
|
||||
<Row className="cart-total-price">
|
||||
<Col lg="5" xs="5" className="item-name">
|
||||
{cartTexts.labels.TOTAL_PRICE}:
|
||||
<Row id={"cart-total-price"} className="cart-total-price">
|
||||
<Col lg="3" xs="3" className="item-name d-flex align-items-center">
|
||||
<span>
|
||||
{cartTexts.labels.TOTAL_PRICE}:
|
||||
</span>
|
||||
</Col>
|
||||
{
|
||||
orderTotalPrice &&
|
||||
<Col id={"cart-total-price"}
|
||||
lg="7" xs="7"
|
||||
className="item-name">
|
||||
<table className="price-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{cartTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{cartTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<Col className="d-flex">
|
||||
<div className="d-flex flex-column flex-grow-1">
|
||||
<div className="d-flex flex-grow-1 no-wrap cart-total-price-header">
|
||||
<Col>
|
||||
<span>{cartTexts.labels.ON_DELIVERY}:</span>
|
||||
</Col>
|
||||
<Col>
|
||||
<span>{cartTexts.labels.MONTHLY}:</span>
|
||||
</Col>
|
||||
</div>
|
||||
<div className="d-flex flex-grow-1 no-wrap item-price-value">
|
||||
<Col>
|
||||
<h5>
|
||||
{orderTotalPrice.fixedPrice.toLocaleString()} {orderTotalPrice.currency} {' '}
|
||||
</td>
|
||||
<td>
|
||||
</h5>
|
||||
</Col>
|
||||
<Col>
|
||||
<h5>
|
||||
{
|
||||
orderTotalPrice.recurrentPrice && orderTotalPrice.recurrentPrice.toLocaleString() + ' ' + orderTotalPrice.currency
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</h5>
|
||||
</Col>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
}
|
||||
</Row>
|
||||
|
||||
@@ -93,7 +93,7 @@ class CartReviewOrderContainer extends Component {
|
||||
<Col md="4" id="review-tender">{customerDetails.details.idProject ? this.getProjectName(customerDetails.details.idProject) : '-'}</Col>
|
||||
</Row>
|
||||
<div>
|
||||
<h4>{cartTexts.labels.DELIVERY_ADDRESS}</h4>
|
||||
<h6>{cartTexts.labels.DELIVERY_ADDRESS}</h6>
|
||||
<Row className="cart-customer-main-info-row">
|
||||
<Col md="4">{cartTexts.labels.ADDRESS}</Col>
|
||||
<Col md="4"id="review-delivery-address">{customerDetails.delivery.detailedAddress}</Col>
|
||||
@@ -113,7 +113,7 @@ class CartReviewOrderContainer extends Component {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>{cartTexts.labels.BILLING_ADDRESS}</h4>
|
||||
<h6>{cartTexts.labels.BILLING_ADDRESS}</h6>
|
||||
<Row className="cart-customer-main-info-row">
|
||||
<Col md="4">{cartTexts.labels.COMPANY}</Col>
|
||||
<Col md="4" id="review-billing-company">{customerDetails.companyName}</Col>
|
||||
|
||||
@@ -7,6 +7,7 @@ import {updateQuantity, removeCartItem} from '../../../actions/cart/cartActions'
|
||||
import {setDialogContent, setDialogOpenFlag} from '../../../actions/dialog/dialogActions';
|
||||
import {cartMessages, cartTexts} from '../../../constants/cartConstants';
|
||||
import PackageBids from './PackageBids.jsx';
|
||||
import {coMarketTexts} from "../../../constants/coMarketConstants";
|
||||
|
||||
class CartItem extends Component {
|
||||
constructor(props) {
|
||||
@@ -88,17 +89,17 @@ class CartItem extends Component {
|
||||
totalRecurrent += selectedBid.servicesPrice + selectedBid.recurrentPrice;
|
||||
|
||||
oldTotal = cartItem.fixedPrice;
|
||||
oldTotalRecurrent = cartItem.servicesPrice + cartItem.recurentPrice;
|
||||
oldTotalRecurrent = cartItem.servicesPrice + cartItem.recurrentPrice;
|
||||
}else{
|
||||
total += cartItem.fixedPrice;
|
||||
totalRecurrent += cartItem.servicesPrice + cartItem.recurentPrice;
|
||||
totalRecurrent += cartItem.servicesPrice + cartItem.recurrentPrice;
|
||||
}
|
||||
|
||||
if(cartItem.options.length) {
|
||||
cartItem.options.forEach((packageOption) => {
|
||||
if(Object.keys(packageOption.prices).length) {
|
||||
total += parseFloat(packageOption.prices.fixedExtra);
|
||||
totalRecurrent += parseFloat(packageOption.prices.recurentExtra) + parseFloat(packageOption.prices.servicesExtra);
|
||||
totalRecurrent += parseFloat(packageOption.prices.recurrentExtra) + parseFloat(packageOption.prices.servicesExtra);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -106,7 +107,7 @@ class CartItem extends Component {
|
||||
cartItem.additionalPackages.forEach((additionalPackage) => {
|
||||
if(Object.keys(additionalPackage).length) {
|
||||
total += parseFloat(additionalPackage.prices.fixedExtra);
|
||||
totalRecurrent += parseFloat(additionalPackage.prices.recurentExtra) + parseFloat(additionalPackage.prices.servicesExtra);
|
||||
totalRecurrent += parseFloat(additionalPackage.prices.recurrentExtra) + parseFloat(additionalPackage.prices.servicesExtra);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -201,43 +202,52 @@ class CartItem extends Component {
|
||||
}
|
||||
{cartItem.options.length > 0 &&
|
||||
cartItem.options.map((packageOption) =>
|
||||
<Row className="cart-item-small-details" key={"package-option-" + cartItem.key + "-" + packageOption.idOptionPackage}>
|
||||
<Col lg={{offset: 1, size: 4}} xs={{offset: 1, size: 4}}>
|
||||
<Row
|
||||
className="cart-item-small-details flex-column"
|
||||
key={"package-option-" + cartItem.key + "-" + packageOption.idOptionPackage}
|
||||
>
|
||||
<span className="cart-item-additional-title">
|
||||
{packageOption.groupName}:
|
||||
</Col>
|
||||
<Col lg="7" xs="7" id={"item-option-" + cartItem.key + "-" + packageOption.idOptionPackage}>
|
||||
</span>
|
||||
<span id={"item-option-" + cartItem.key + "-" + packageOption.idOptionPackage}>
|
||||
{packageOption.packageName}
|
||||
</Col>
|
||||
</span>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
{cartItem.additionalPackages.length > 0 &&
|
||||
cartItem.additionalPackages.map((additionalPackage) =>
|
||||
<Row className="cart-item-small-details" key={"additional-package-" + cartItem.key + "-" + additionalPackage.idAdditionalPackage}>
|
||||
<Col lg={{offset: 1, size: 4}} xs={{offset:1, size: 4}}>
|
||||
{
|
||||
cartItem.additionalPackages.length > 0 && <Row className="cart-item-small-details flex-column">
|
||||
<span className="cart-item-additional-title">
|
||||
{cartTexts.labels.ADDITIOONAL_PACKAGE}:
|
||||
</Col>
|
||||
<Col lg="7" xs="7" id={"item-additional-" + cartItem.key + "-" + additionalPackage.idAdditionalPackage}>
|
||||
{additionalPackage.packageName}
|
||||
</Col>
|
||||
</span>
|
||||
{
|
||||
cartItem.additionalPackages.map((additionalPackage) =>
|
||||
<span
|
||||
key={"item-additional-" + cartItem.key + "-" + additionalPackage.idAdditionalPackage}
|
||||
id={"item-additional-" + cartItem.key + "-" + additionalPackage.idAdditionalPackage}
|
||||
>
|
||||
{additionalPackage.packageName}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
<Row className="cart-item-small-details justify-content-between item-price">
|
||||
<Col className="d-flex align-items-center">
|
||||
<span className="item-payment-type">{cartItem.payType}:</span>
|
||||
<Row className="cart-item-small-details item-price">
|
||||
<Col className="d-flex align-items-center col-3 item-price-type">
|
||||
<span className="item-price-type">{cartItem.payType}:</span>
|
||||
</Col>
|
||||
<Col className="d-flex col-auto">
|
||||
<table className="price-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{cartTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{cartTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<Col className="d-flex">
|
||||
<div className="d-flex flex-column flex-grow-1">
|
||||
<div className="d-flex flex-grow-1 no-wrap item-price-header">
|
||||
<Col>
|
||||
<span>{cartTexts.labels.ON_DELIVERY}:</span>
|
||||
</Col>
|
||||
<Col>
|
||||
<span>{cartTexts.labels.MONTHLY}:</span>
|
||||
</Col>
|
||||
</div>
|
||||
<div className="d-flex flex-grow-1 no-wrap item-price-value">
|
||||
<Col>
|
||||
{
|
||||
this.state.fixedPrice &&
|
||||
<div>
|
||||
@@ -251,8 +261,8 @@ class CartItem extends Component {
|
||||
</div>
|
||||
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
</Col>
|
||||
<Col>
|
||||
{
|
||||
this.state.recurrentPrice &&
|
||||
<div>
|
||||
@@ -265,10 +275,9 @@ class CartItem extends Component {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Col>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
@@ -46,6 +46,11 @@
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
.cart-item-additional-title {
|
||||
font-weight: 600;
|
||||
color: $font-light-color;
|
||||
}
|
||||
|
||||
.cart-item-details {
|
||||
.item-name {
|
||||
}
|
||||
@@ -65,14 +70,34 @@
|
||||
}
|
||||
|
||||
.item-price {
|
||||
background-color: $hoverColor;
|
||||
background-color: #fbfbfb;
|
||||
margin-top: 1rem;
|
||||
border-radius: $box-radius;
|
||||
|
||||
.item-price-type {
|
||||
padding: 0.4rem;
|
||||
color: $font-light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-price-header {
|
||||
font-weight: 600;
|
||||
color: $font-light-color;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.item-price-value {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-total-price {
|
||||
padding: 1rem 0;
|
||||
font-size: $font-size-big;
|
||||
|
||||
.cart-total-price-header {
|
||||
color: $font-light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.price-table th{
|
||||
@@ -105,17 +130,27 @@
|
||||
#cart-review-order-container {
|
||||
border-radius: $box-radius;
|
||||
|
||||
|
||||
|
||||
.cart-customer-main-info-row {
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
> div:first-child {
|
||||
color: $font-light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.place-order-btn {
|
||||
cursor: pointer;
|
||||
background-color: $done-status-color;
|
||||
background-color: $accentColor;
|
||||
border: none;
|
||||
width: 100%;
|
||||
float: right;
|
||||
font-weight: $font-weight;
|
||||
&:focus, &:hover {
|
||||
box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button-cart {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Col, Row} from 'reactstrap';
|
||||
import classnames from 'classnames';
|
||||
import {Label, Input, Col} from 'reactstrap';
|
||||
import {selectAdditional, removetAdditional} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
@@ -11,18 +12,9 @@ class AdditionalPackageItem extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.handleOptionChange = this.handleOptionChange.bind(this);
|
||||
this.isChecked = this.isChecked.bind(this);
|
||||
this.state = {
|
||||
popoverOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({
|
||||
popoverOpen: !this.state.popoverOpen
|
||||
});
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
handleOptionChange() {
|
||||
@@ -60,10 +52,16 @@ class AdditionalPackageItem extends Component {
|
||||
const selectedPrice = priceHelper.getSelectedPrice(additionalPackage, this.props.selectedAgreement);
|
||||
const isChecked = this.isChecked();
|
||||
|
||||
const classes = classnames('shop-package-option d-flex',
|
||||
{
|
||||
'shop-package-option-selected': isChecked,
|
||||
'shop-package-option-disabled': !isAvailable,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
id={'info-additonal-' + additionalPackage.idAdditionalPackage}
|
||||
className={`shop-package-option d-flex ${this.getClass()}`}
|
||||
className={classes}
|
||||
>
|
||||
<Label check className="d-flex flex-grow-1 flex-column">
|
||||
<div className="d-flex">
|
||||
@@ -73,24 +71,39 @@ class AdditionalPackageItem extends Component {
|
||||
onChange={this.handleOptionChange}
|
||||
name={'package-option-'+ additionalPackage.idAdditionalPackage}
|
||||
className="package-option-input"
|
||||
disabled={!isAvailable}
|
||||
/>
|
||||
<span className="option-name">
|
||||
{this.formatName(additionalPackage.packageName)}
|
||||
</span>
|
||||
{
|
||||
!isAvailable &&
|
||||
<span className="not-available">
|
||||
({coMarketTexts.labels.SELECTION_NOT_AVAILABLE})
|
||||
</span>
|
||||
}
|
||||
</Col>
|
||||
<Col className="col-3 d-flex align-items-center">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && (<span>
|
||||
{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
|
||||
</span>)
|
||||
}
|
||||
<span>
|
||||
{
|
||||
isAvailable ?
|
||||
(selectedPrice.fixedExtra ?
|
||||
`${selectedPrice.fixedExtra} ${currency}` :
|
||||
'0') :
|
||||
'-'
|
||||
}
|
||||
</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>
|
||||
}
|
||||
<span>
|
||||
{
|
||||
isAvailable ?
|
||||
(priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
`${priceHelper.sumPrices([selectedPrice.recurrentExtra, selectedPrice.servicesExtra])} ${currency}` :
|
||||
'0') :
|
||||
'-'
|
||||
}
|
||||
</span>
|
||||
</Col>
|
||||
</div>
|
||||
<div
|
||||
@@ -98,24 +111,6 @@ class AdditionalPackageItem extends Component {
|
||||
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}
|
||||
toggle={this.toggle}>
|
||||
<PopoverBody>
|
||||
{coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
|
||||
import {Label, Input, Col} from 'reactstrap';
|
||||
import {selectAgreement} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
@@ -39,72 +39,59 @@ class AgreementOptionItem extends Component {
|
||||
|
||||
return (
|
||||
<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}
|
||||
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 col-3">
|
||||
<span>{price.fixedExtra.toLocaleString()} {currency}</span>
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
<span className="option-value-text monthly-price">
|
||||
<Label check className="d-flex flex-grow-1 flex-column">
|
||||
<div className="d-flex">
|
||||
<Col className="d-flex align-items-center col-6">
|
||||
<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 col-3">
|
||||
<span>{price.fixedExtra.toLocaleString()} {currency}</span>
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
<span className="option-value-text monthly-price">
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(price)
|
||||
? `${priceHelper.sumPrices([price.recurrentExtra, price.servicesExtra]).toLocaleString()} ${currency}`
|
||||
: '0'
|
||||
}
|
||||
</span>
|
||||
</Col>
|
||||
</div>
|
||||
<div className="shop-package-option-description">
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(price)
|
||||
? `${priceHelper.sumPrices([price.recurentExtra, price.servicesExtra]).toLocaleString()} ${currency}`
|
||||
: '0'
|
||||
price.recurrentExtra > 0 &&
|
||||
<span>
|
||||
{
|
||||
`${coMarketTexts.labels.RECURRENT_PRICE}: ${price.recurrentExtra} ${currency} / ${price.periodUnit}} ${price.packagePayPeriod > 0 ? ` for ${price.packagePayPeriod} ${price.periodUnit}` : ''}`
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
</Col>
|
||||
{
|
||||
price.servicesExtra > 0 &&
|
||||
<div className="d-flex flex-column">
|
||||
<span>
|
||||
{
|
||||
`${coMarketTexts.labels.SERVICE_PRICE}: ${(price.servicesExtra)} ${currency} / ${price.periodUnit} ${price.servicesContractPeriod > 0 ? `for ${price.servicesContractPeriod} ${price.periodUnit}` : ''}`
|
||||
}
|
||||
</span>
|
||||
{
|
||||
price.servicesContractPeriod > 0 &&
|
||||
<span>
|
||||
{
|
||||
`${coMarketTexts.labels.EXTEND} ${price.periodUnit} (Max ${price.maxContractPeriod} ${price.periodUnit})`
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ const fileHandler = new FileDownloader();
|
||||
|
||||
class PackageInfo extends Component {
|
||||
downloadDocument(document){
|
||||
const fileUrl = `${API_SERVER}/utils/api/downloadFile?idDocument=${document.idDocument}&fileName=${document.documentName}.${document.extension}`
|
||||
const fileUrl = `${API_SERVER}/wp-json/wiaas/download-package-file?document_id=${document.idDocument}&package_id=${document.idPackage}`
|
||||
const fileName = document.documentName + '.' + document.extension;
|
||||
fileHandler.download(fileUrl, fileName);
|
||||
}
|
||||
@@ -37,16 +37,14 @@ class PackageInfo extends Component {
|
||||
{
|
||||
documents && documents.length > 0 &&
|
||||
<Col lg="12"
|
||||
className="shop-package-details-documents">
|
||||
className="shop-package-details-documents d-flex flex-column">
|
||||
<div className="shop-package-label">{coMarketTexts.labels.DOCUMENTS}:</div>
|
||||
{
|
||||
documents.map((document) =>
|
||||
<div key={document.idDocument}>
|
||||
<span className="document-link"
|
||||
onClick={() => {this.downloadDocument(document)}}>
|
||||
<i className="fa fa-file" aria-hidden="true"></i> {document.documentName} ({document.extension})
|
||||
</span>
|
||||
</div>
|
||||
<span key={document.idDocument} className="document-link"
|
||||
onClick={() => {this.downloadDocument(document)}}>
|
||||
<i className="fa fa-file" aria-hidden="true"></i> {document.documentName} ({document.extension})
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</Col>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Row, Col} from 'reactstrap';
|
||||
import {Label, Input, Col} from 'reactstrap';
|
||||
import {selectOption} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
@@ -11,18 +11,9 @@ class PackageOptionItem 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
|
||||
});
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
handleOptionChange() {
|
||||
@@ -48,6 +39,7 @@ class PackageOptionItem extends Component {
|
||||
render() {
|
||||
const {idGroup, option, currency, simplified} = this.props;
|
||||
const selectedPrice = this.props.selectedAgreement ? priceHelper.getSelectedPrice(option, this.props.selectedAgreement) : null;
|
||||
const isAvailable = selectedPrice !== undefined;
|
||||
const isChecked = this.isChecked();
|
||||
|
||||
if (simplified) {
|
||||
@@ -56,20 +48,34 @@ class PackageOptionItem extends Component {
|
||||
<span className="option-name">
|
||||
{this.formatName(option.optionName)}
|
||||
</span>
|
||||
{
|
||||
!isAvailable &&
|
||||
<span className="not-available">
|
||||
({coMarketTexts.labels.SELECTION_NOT_AVAILABLE})
|
||||
</span>
|
||||
}
|
||||
</Col>
|
||||
<Col className="d-flex align-items-center col-3">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && (<span>
|
||||
{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
|
||||
</span>)
|
||||
}
|
||||
<span>
|
||||
{
|
||||
isAvailable ?
|
||||
(selectedPrice.fixedExtra ?
|
||||
`${selectedPrice.fixedExtra} ${currency}` :
|
||||
'0') :
|
||||
'-'
|
||||
}
|
||||
</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>
|
||||
}
|
||||
<span>
|
||||
{
|
||||
isAvailable ?
|
||||
(priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
`${priceHelper.sumPrices([selectedPrice.recurrentExtra, selectedPrice.servicesExtra])} ${currency}` :
|
||||
'0') :
|
||||
'-'
|
||||
}
|
||||
</span>
|
||||
</Col>
|
||||
</div>)
|
||||
}
|
||||
@@ -91,46 +97,40 @@ class PackageOptionItem extends Component {
|
||||
<div className="option-name">
|
||||
{this.formatName(option.optionName)}
|
||||
</div>
|
||||
{
|
||||
!isAvailable &&
|
||||
<span className="not-available">
|
||||
({coMarketTexts.labels.SELECTION_NOT_AVAILABLE})
|
||||
</span>
|
||||
}
|
||||
</Col>
|
||||
<Col className="col-3 d-flex align-items-center">
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) && (<span>
|
||||
{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
|
||||
</span>)
|
||||
}
|
||||
<span>
|
||||
{
|
||||
isAvailable ?
|
||||
(selectedPrice.fixedExtra ?
|
||||
`${selectedPrice.fixedExtra} ${currency}` :
|
||||
'0') :
|
||||
'-'
|
||||
}
|
||||
</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>
|
||||
}
|
||||
<span>
|
||||
{
|
||||
isAvailable ?
|
||||
(priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
`${priceHelper.sumPrices([selectedPrice.recurrentExtra, selectedPrice.servicesExtra])} ${currency}` :
|
||||
'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}
|
||||
toggle={this.toggle}>
|
||||
<PopoverBody>
|
||||
{coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@ class PackagePrice extends Component {
|
||||
return '-';
|
||||
}
|
||||
|
||||
const recurrentExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra');
|
||||
const recurrentExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurrentExtra');
|
||||
const servicesExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra');
|
||||
|
||||
return `${(recurrentExtra + servicesExtra).toLocaleString()} ${this.props.currency}`
|
||||
|
||||
@@ -1,59 +1,68 @@
|
||||
@import '../../../styleConstants.scss';
|
||||
|
||||
#co-market-shop {
|
||||
.shop-package-title {
|
||||
font-size: 1rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.shop-package-title a {
|
||||
font-size: $font-size-msmall;
|
||||
font-weight: $font-weight;
|
||||
text-align: left;
|
||||
color: $header-background;
|
||||
}
|
||||
|
||||
.shop-package-reference {
|
||||
font-size: $font-size-xsmal;
|
||||
font-weight: $font-weight;
|
||||
text-align: left;
|
||||
color: $warmGreyColor;
|
||||
}
|
||||
|
||||
.shop-package-country {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
font-size: $font-size-xsmal;
|
||||
text-align: left;
|
||||
color: $warmGreyColor;
|
||||
}
|
||||
|
||||
.shop-package-details-btn-layer{
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.shop-package-details-btn{
|
||||
border-radius: 50px;
|
||||
background-color: $whiteColor;
|
||||
border: solid 0.7px $borderColor;
|
||||
color: $darkBlue;
|
||||
font-weight: $font-weight;
|
||||
font-size: $font-size-xsmal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.shop-package-item{
|
||||
margin-top: 1rem;
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
background-color: $whiteColor;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
// box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.card-body {
|
||||
background: rgb(251, 251, 251);
|
||||
}
|
||||
|
||||
.shop-package-details-btn{
|
||||
border-radius: 50px;
|
||||
background-color: $accentColor;
|
||||
border: none;
|
||||
color: $whiteColor;
|
||||
font-weight: $font-weight;
|
||||
font-size: $font-size-xsmal;
|
||||
cursor: pointer;
|
||||
&:focus, &:hover {
|
||||
box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-package-title {
|
||||
font-size: 1rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.shop-package-title a {
|
||||
font-size: $font-size-msmall;
|
||||
font-weight: $font-weight;
|
||||
text-align: left;
|
||||
color: $header-background;
|
||||
}
|
||||
|
||||
.shop-package-reference {
|
||||
font-size: $font-size-xsmal;
|
||||
font-weight: $font-weight;
|
||||
text-align: left;
|
||||
color: $warmGreyColor;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.shop-package-country {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
font-size: $font-size-xsmal;
|
||||
text-align: left;
|
||||
color: $warmGreyColor;
|
||||
}
|
||||
|
||||
.shop-package-details-btn-layer{
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flag-icon{
|
||||
border-radius: 2px;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.flag-icon{
|
||||
border-radius: 2px;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.wiaas-box-header {
|
||||
|
||||
@@ -31,6 +31,8 @@
|
||||
|
||||
.shop-package-label{
|
||||
display: inline-block;
|
||||
color: $font-light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.shop-package-text {
|
||||
@@ -48,6 +50,7 @@
|
||||
|
||||
.document-link{
|
||||
color: #33425b;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -61,6 +64,9 @@
|
||||
position: relative;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
.option-name {
|
||||
color: $font-dark-color;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
border: 1px solid $hoverColor;
|
||||
border-radius: $box-radius;
|
||||
@@ -68,12 +74,28 @@
|
||||
cursor: pointer;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.shop-package-option {
|
||||
.shop-package-option {
|
||||
&-selected {
|
||||
background: $lightHoverColor;
|
||||
}
|
||||
}
|
||||
&-disabled {
|
||||
.option-name {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.shop-package-option-disabled) {
|
||||
&:hover {
|
||||
background: $hoverColor;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
color: $font-light-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
&-description {
|
||||
padding-top: 0.5rem;
|
||||
@@ -82,7 +104,6 @@
|
||||
color: $font-light-color;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin-right: 0.855rem;
|
||||
}
|
||||
@@ -96,13 +117,9 @@
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
.shop-package-option:hover, label:hover, .dropdown:hover {
|
||||
background: $hoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.not-available {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0.2rem;
|
||||
color: $not-available-status-color;
|
||||
font-weight: $font-weight;
|
||||
@@ -120,13 +137,12 @@
|
||||
color: #fff;
|
||||
background-color: $accentColor;
|
||||
border: none;
|
||||
&:focus, &:hover {
|
||||
box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.price-info-popover {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.recurent-total-price{
|
||||
font-size: $font-size-msmall;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user