senaduka/old-new-wiaas
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

product details

Browse Source
This commit is contained in:
Almira Krdzic
2018-09-12 16:42:21 +02:00
parent 35484c6d4f
commit e53b243d96
65 changed files with 3327 additions and 1520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/containers/coMarket/components/AdditionalPackageItemContainer.jsx
View File

@@ -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>
);
}

115
frontend/src/containers/coMarket/components/AgreementOptionItemContainer.jsx
View File

@@ -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>
);
}

14
frontend/src/containers/coMarket/components/PackageInfo.jsx
View File

@@ -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>

102
frontend/src/containers/coMarket/components/PackageOptionItemContainer.jsx
View File

@@ -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>
);
}

2
frontend/src/containers/coMarket/components/PackagePrice.jsx
View File

@@ -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}`

107
frontend/src/containers/coMarket/style/CoMarket.scss
View File

@@ -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 {

38
frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss
View File

@@ -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;
}