product details
This commit is contained in:
Almira Krdzic
@@ -55,7 +55,7 @@ export const fetchPackageDetails = (params) => {
|
||||
|
||||
if(packageData.groups){
|
||||
Object.keys(packageData.groups).forEach((idGroup) => {
|
||||
const defaultOption = packageData.groups[idGroup].options.find((option) => {return parseInt(option.isDefault, 10) === 1});
|
||||
const defaultOption = packageData.groups[idGroup].options.find((option) => option.isDefault);
|
||||
if(defaultOption){
|
||||
dispatch(selectOption(idGroup, defaultOption));
|
||||
}
|
||||
|
||||
@@ -143,7 +143,7 @@ export const cartTexts = {
|
||||
REMOVE_ITEM_HEADER: 'Remove item confirmation',
|
||||
REMOVE_ITEM_TEXT: 'Are you sure you want to remove ',
|
||||
REMOVE_FROM_CART: 'Remove from cart',
|
||||
ADDITIOONAL_PACKAGE: 'Additional package',
|
||||
ADDITIOONAL_PACKAGE: 'Addons',
|
||||
DOC_NOT_REQUIRED: 'Document not required',
|
||||
FILE_UPLOADED_TEXT: 'File uploaded! Select or drop to replace ',
|
||||
FILE: 'file',
|
||||
|
||||
@@ -84,7 +84,7 @@ export const coMarketTexts = {
|
||||
ON_DELIVERY: 'On delivery',
|
||||
MONTHLY: 'Monthly',
|
||||
NOT_AVAILABLE: 'Not available',
|
||||
SELECTION_NOT_AVAILABLE: 'This selection is not available for the selected price type!',
|
||||
SELECTION_NOT_AVAILABLE: 'Not available for price type',
|
||||
RECURRENT_PRICE: 'Package recurent price',
|
||||
SERVICE_PRICE: 'Services and support',
|
||||
EXTEND: 'with possibility to extend each',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ export const fromWCOrder = (WCOrder) => {
|
||||
reference: WCOrder['reference'],
|
||||
assignedTo: 'assigned to',
|
||||
fixedPrice: WCOrder.total,
|
||||
recurringPrice: 0,
|
||||
recurringPrice: WCOrder['recurring_price'],
|
||||
status: WCOrder.status,
|
||||
currency: WCOrder.currency,
|
||||
billing:{
|
||||
@@ -49,14 +49,15 @@ export const fromWCOrder = (WCOrder) => {
|
||||
payPeriod: packageLine['pay_period'],
|
||||
shortDesc: packageLine['short_desc'],
|
||||
dateCompleted: formatDate(packageLine['date_completed']),
|
||||
additionalPackages: packageLine['additional_packages'].map(additionalPackage => ({
|
||||
additionalPackages: packageLine['additional_packages'] ? packageLine['additional_packages'].map(additionalPackage => ({
|
||||
idPackage: additionalPackage.id,
|
||||
packageName: additionalPackage.name,
|
||||
})),
|
||||
options: packageLine['options'].map(packageOption => ({
|
||||
})) : [],
|
||||
options: packageLine['options'] ? packageLine['options'].map(packageOption => ({
|
||||
idPackage: packageOption.id,
|
||||
packageName: packageOption.name,
|
||||
})),
|
||||
groupName: packageOption['group_name'] || '',
|
||||
})) : [],
|
||||
};
|
||||
}),
|
||||
process: processInfo,
|
||||
|
||||
@@ -12,9 +12,9 @@ function extractPrices(wcPackageId, prices) {
|
||||
maxContractPeriod: price['max_contract_period'],
|
||||
packagePayPeriod: price['package_pay_period'],
|
||||
servicesContractPeriod: price['services_contract_period'],
|
||||
fixedExtra: price['minimal_fixed_price'],
|
||||
servicesExtra: price['minimal_services_price'],
|
||||
recurentExtra: price['recurrent_price']
|
||||
fixedExtra: price['fixed_extra'],
|
||||
servicesExtra: price['services_extra'],
|
||||
recurrentExtra: price['recurrent_extra']
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -46,29 +46,23 @@ export const fromWCPackage = wcPackage => {
|
||||
image: wcPackage.images[0].src || DEFAULT_PACKAGE_IMG,
|
||||
hasImage: !!wcPackage.images.length,
|
||||
name: wcPackage.name,
|
||||
country: 'Sweden',
|
||||
countryCode: 'se',
|
||||
currency: 'SEK',
|
||||
documents: [
|
||||
{
|
||||
idDocument: 1,
|
||||
documentName: 'test1',
|
||||
extension: '.php'
|
||||
},
|
||||
{
|
||||
idDocument: 2,
|
||||
documentName: 'test2',
|
||||
extension: '.php'
|
||||
}
|
||||
],
|
||||
country: wcPackage.country,
|
||||
countryCode: wcPackage['country_code'],
|
||||
currency: wcPackage.currency,
|
||||
documents: wcPackage.documents ? wcPackage.documents.map(document => ({
|
||||
idDocument: document.id,
|
||||
documentName: document.name,
|
||||
extension: document.extension,
|
||||
idPackage: wcPackage.id,
|
||||
})) : [],
|
||||
shortDescription: wcPackage.description,
|
||||
prices: extractPrices(wcPackage.id, wcPackage.prices) || [],
|
||||
groups: extractGroups(wcPackage.groups),
|
||||
additionalPackages: wcPackage['additional_packages'].map(additionalPackage =>({
|
||||
prices: extractPrices(wcPackage.id, wcPackage.prices || []),
|
||||
groups: extractGroups(wcPackage.groups || {}),
|
||||
additionalPackages: wcPackage['additional_packages'] ? wcPackage['additional_packages'].map(additionalPackage =>({
|
||||
idAdditionalPackage: additionalPackage.id,
|
||||
packageName: additionalPackage.name,
|
||||
shortDescription: additionalPackage.description,
|
||||
prices: extractPrices(additionalPackage.id, additionalPackage.prices)
|
||||
})),
|
||||
})) : [],
|
||||
}
|
||||
};
|
||||
@@ -19,7 +19,11 @@ class PriceHellper {
|
||||
}
|
||||
|
||||
hasRecurrentPrice(selectedPrice){
|
||||
return selectedPrice && (selectedPrice.recurentExtra > 0 || selectedPrice.servicesExtra > 0);
|
||||
return selectedPrice && (selectedPrice.recurrentExtra > 0 || selectedPrice.servicesExtra > 0);
|
||||
}
|
||||
|
||||
calculateCartItemTotal(cartItem) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -95,10 +95,13 @@
|
||||
.generic-dialog-box {
|
||||
min-width: 30%;
|
||||
|
||||
.btn-success {
|
||||
background-color: $greenColor;
|
||||
border-color: $borderColor;
|
||||
.btn-success, .btn-success:active, .btn-success:hover, .btn-success:focus {
|
||||
background-color: $accentColor !important;
|
||||
border: none !important;
|
||||
cursor: pointer;
|
||||
&:focus, &:hover {
|
||||
box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
|
||||
@@ -15,7 +15,7 @@ $blueColor: #2b6279;
|
||||
$hoverColor: #ebebeb;
|
||||
$lightHoverColor: #f2f2f2;
|
||||
|
||||
$accentColor: #f16078;
|
||||
$accentColor: #e25c56;
|
||||
|
||||
$boxShadow: rgba(0, 0, 0, 0.1);
|
||||
|
||||
@@ -40,7 +40,7 @@ $font-size-big: 1.125rem; //18px
|
||||
$font-size-xbig: 1.5rem;
|
||||
|
||||
$font-light-color: rgba(33, 33, 33, 0.54);
|
||||
$font-strong-color: rgba(33, 33, 33, 0.87);
|
||||
$font-dark-color: rgba(33, 33, 33, 0.87);
|
||||
|
||||
$open-status-color: #045FB4;
|
||||
$in-progress-status-color: #FD8049;
|
||||
|
||||
Reference in New Issue
Block a user