290 lines
14 KiB
JavaScript
290 lines
14 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Input, Tooltip, Row, Col} from 'reactstrap';
|
|
import '../style/Cart.css';
|
|
import {updateMessages} from '../../../actions/notification/notificationActions';
|
|
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) {
|
|
super(props);
|
|
this.state = {
|
|
tooltipOpen: false,
|
|
itemQuantity: 1,
|
|
key: 0
|
|
};
|
|
|
|
this.toggleTooltip = this.toggleTooltip.bind(this);
|
|
this.removeItemFromCart = this.removeItemFromCart.bind(this);
|
|
this.resetQuantity = this.resetQuantity.bind(this);
|
|
this.sumPrices = this.sumPrices.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.setState({itemQuantity: nextProps.cartItem.quantity});
|
|
this.sumPrices(nextProps.cartItem, nextProps.cartItem.quantity);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({itemQuantity: this.props.cartItem.quantity});
|
|
this.sumPrices(this.props.cartItem, this.props.cartItem.quantity);
|
|
}
|
|
|
|
isQuantityValid(quantity) {
|
|
return quantity > 0 && quantity <= 65000;
|
|
}
|
|
|
|
updateQuantity(cartItem, quantity) {
|
|
if(quantity) {
|
|
if(this.isQuantityValid(quantity)) {
|
|
this.setState({itemQuantity: quantity});
|
|
this.sumPrices(cartItem, quantity);
|
|
this.props.dispatch(updateQuantity(cartItem, quantity));
|
|
} else {
|
|
this.props.dispatch(updateMessages([{code: 'error', message: 'INVALID_QUANTITY'}], cartMessages));
|
|
}
|
|
} else {
|
|
this.setState({itemQuantity: ''});
|
|
}
|
|
}
|
|
|
|
resetQuantity(cartItem) {
|
|
if(!this.state.itemQuantity || !this.isQuantityValid(this.state.itemQuantity)) {
|
|
this.updateQuantity(cartItem, 1);
|
|
}
|
|
}
|
|
|
|
removeItemFromCart() {
|
|
this.props.dispatch(removeCartItem(this.state.key));
|
|
}
|
|
|
|
setDialogParams(cartItem, dialogContent) {
|
|
this.setState({key: cartItem.key});
|
|
this.props.dispatch(setDialogOpenFlag(true));
|
|
dialogContent.bodyVariable = cartItem.packageName;
|
|
this.props.dispatch(setDialogContent(dialogContent));
|
|
}
|
|
|
|
toggleTooltip() {
|
|
this.setState({
|
|
tooltipOpen: !this.state.tooltipOpen
|
|
});
|
|
}
|
|
|
|
sumPrices(cartItem, quantity) {
|
|
let total = 0;
|
|
let oldTotal = null;
|
|
let totalRecurrent = 0;
|
|
let oldTotalRecurrent = null;
|
|
const selectedBid = cartItem.bids.find((bid) => {
|
|
return cartItem.idSelectedBid === bid.idBid;
|
|
});
|
|
|
|
if(selectedBid){
|
|
total += selectedBid.fixedPrice;
|
|
totalRecurrent += selectedBid.servicesPrice + selectedBid.recurrentPrice;
|
|
|
|
oldTotal = cartItem.fixedPrice;
|
|
oldTotalRecurrent = cartItem.servicesPrice + cartItem.recurrentPrice;
|
|
}else{
|
|
total += cartItem.fixedPrice;
|
|
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.recurrentExtra) + parseFloat(packageOption.prices.servicesExtra);
|
|
}
|
|
});
|
|
}
|
|
if(cartItem.additionalPackages.length) {
|
|
cartItem.additionalPackages.forEach((additionalPackage) => {
|
|
if(Object.keys(additionalPackage).length) {
|
|
total += parseFloat(additionalPackage.prices.fixedExtra);
|
|
totalRecurrent += parseFloat(additionalPackage.prices.recurrentExtra) + parseFloat(additionalPackage.prices.servicesExtra);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.setState({
|
|
fixedPrice: total * quantity,
|
|
recurrentPrice: totalRecurrent * quantity,
|
|
fixedOldPrice: oldTotal !== null ? oldTotal * quantity : null,
|
|
recurrentOldPrice: oldTotalRecurrent !== null ? oldTotalRecurrent * quantity: null
|
|
});
|
|
}
|
|
|
|
getPriceClass(price){
|
|
return price !== null ? 'new-price' : 'price';
|
|
}
|
|
|
|
render() {
|
|
const dialogContent = {
|
|
buttons: [
|
|
{
|
|
color: 'success',
|
|
action: this.removeItemFromCart,
|
|
name: cartTexts.buttons.YES,
|
|
id: 'remove-item-confirmation'
|
|
}, {
|
|
color: 'secondary',
|
|
name: cartTexts.buttons.CANCEL,
|
|
id: 'cancel-remove-item'
|
|
}
|
|
],
|
|
header: cartTexts.labels.REMOVE_ITEM_HEADER,
|
|
body: cartTexts.labels.REMOVE_ITEM_TEXT
|
|
};
|
|
const {cartItem, isFormDisabled} = this.props;
|
|
const cartItemNo = this.props.cartItemNo ? this.props.cartItemNo + 1 : 1;
|
|
|
|
return (
|
|
<Row id={"item-row-in-cart-" + cartItem.key} className="cart-show-items">
|
|
<Col className="">
|
|
<Row className="cart-item-details justify-content-between">
|
|
<Col id={"item-package-name-" + cartItem.key}
|
|
xl="8" lg="8" md="7" sm="12"
|
|
className="item-name">
|
|
{cartItem.packageName}
|
|
<PackageBids idSelectedBid={cartItem.idSelectedBid} key={cartItem.key} bids={cartItem.bids}/>
|
|
</Col>
|
|
<Col xl="4" lg="4" md="5" sm="12">
|
|
<Row className="flex-nowrap justify-content-end">
|
|
<Col
|
|
id={"item-quantity-" + cartItem.key}
|
|
className="item-quantity col-auto"
|
|
>
|
|
{ isFormDisabled
|
|
? cartItem.quantity === 1
|
|
? cartItem.quantity + ' pc'
|
|
: cartItem.quantity + ' pcs'
|
|
: <Input className="quantity-field"
|
|
value={this.state.itemQuantity}
|
|
type="number"
|
|
step="1"
|
|
onChange={e => this.updateQuantity(cartItem, e.target.value)}
|
|
onBlur={e => this.resetQuantity(cartItem, e.target.value)}
|
|
/>
|
|
}
|
|
</Col>
|
|
{ !isFormDisabled && <div className="wiaas-divider"></div> }
|
|
{
|
|
!isFormDisabled && (<Col className="d-flex align-items-center col-auto">
|
|
<i id={'remove-item-' + cartItem.key + '-' + cartItem.idPackage}
|
|
className="fa fa-trash-o remove-item"
|
|
aria-hidden="true"
|
|
onClick={() => this.setDialogParams(cartItem, dialogContent) }></i>
|
|
<Tooltip target={'remove-item-' + cartItem.key + '-' + cartItem.idPackage}
|
|
placement="bottom"
|
|
isOpen={this.state.tooltipOpen}
|
|
toggle={this.toggleTooltip}>
|
|
{cartTexts.labels.REMOVE_FROM_CART}
|
|
</Tooltip>
|
|
</Col>)
|
|
}
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
{ (!cartItem.areAdditionalAvailable || !cartItem.areOptionsAvailable || cartItem.status === 'not-available') &&
|
|
<Row className="cart-item-small-details">
|
|
<Col id={"item-warning-sign-remove-package-name-" + cartItem.idPackage}
|
|
xl="12" lg="12" md="12" sm="12" xs="12"
|
|
className="not-available">
|
|
{cartTexts.labels.PACKAGE_UNAVAILABLE}
|
|
</Col>
|
|
</Row>
|
|
}
|
|
{cartItem.options.length > 0 &&
|
|
cartItem.options.map((packageOption) =>
|
|
<Row
|
|
className="cart-item-small-details flex-column"
|
|
key={"package-option-" + cartItem.key + "-" + packageOption.idOptionPackage}
|
|
>
|
|
<span className="cart-item-additional-title">
|
|
{packageOption.groupName}:
|
|
</span>
|
|
<span id={"item-option-" + cartItem.key + "-" + packageOption.idOptionPackage}>
|
|
{packageOption.packageName}
|
|
</span>
|
|
</Row>
|
|
)
|
|
}
|
|
{
|
|
cartItem.additionalPackages.length > 0 && <Row className="cart-item-small-details flex-column">
|
|
<span className="cart-item-additional-title">
|
|
{cartTexts.labels.ADDITIOONAL_PACKAGE}:
|
|
</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 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">
|
|
<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>
|
|
{
|
|
this.state.fixedOldPrice !== null &&
|
|
<div className="old-price">{this.state.fixedOldPrice}</div>
|
|
}
|
|
<div className={this.getPriceClass(this.state.fixedOldPrice)}>
|
|
{this.state.fixedPrice.toLocaleString() + ' ' + cartItem.country.currency}
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
</Col>
|
|
<Col>
|
|
{
|
|
this.state.recurrentPrice &&
|
|
<div>
|
|
{
|
|
this.state.recurrentOldPrice !== null &&
|
|
<div className="old-price">{this.state.recurrentOldPrice}</div>
|
|
}
|
|
<div className={this.getPriceClass(this.state.recurrentOldPrice)}>
|
|
{this.state.recurrentPrice.toLocaleString() + ' ' + cartItem.country.currency}
|
|
</div>
|
|
</div>
|
|
}
|
|
</Col>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect()(CartItem);
|