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 {
|
||||
|
||||
Reference in New Issue
Block a user