initial docker setup
This commit is contained in:
GotPPay
@@ -0,0 +1,131 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
|
||||
import {selectAdditional, removetAdditional} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
const priceHelper = new PriceHelper();
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
handleOptionChange() {
|
||||
if(!this.isChecked()){
|
||||
this.props.dispatch(selectAdditional(this.props.additionalPackage))
|
||||
}else{
|
||||
this.props.dispatch(removetAdditional(this.props.additionalPackage));
|
||||
}
|
||||
}
|
||||
|
||||
isChecked() {
|
||||
return this.props.selectedAdditionals
|
||||
&& this.props.selectedAdditionals.includes(this.props.additionalPackage);
|
||||
}
|
||||
|
||||
isAvailable() {
|
||||
return this.props.additionalPackage.prices.find(price => {
|
||||
return price.idPaymentType === this.props.selectedAgreement.idPaymentType;
|
||||
});
|
||||
}
|
||||
|
||||
getClass(isChecked) {
|
||||
return isChecked ?
|
||||
'selected-option' :
|
||||
'';
|
||||
}
|
||||
|
||||
formatName(name) {
|
||||
return name.length > 39 ? name.substring(0, 40) + '...' : name;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {additionalPackage, country} = this.props;
|
||||
const isAvailable = this.isAvailable();
|
||||
const selectedPrice = priceHelper.getSelectedPrice(additionalPackage, this.props.selectedAgreement);
|
||||
const isChecked = this.isChecked();
|
||||
|
||||
return (
|
||||
<Col xl="4" lg="4" md="6" xs="6" className="option-value">
|
||||
<div className={'option-selection ' + this.getClass(isChecked)}>
|
||||
<Label check>
|
||||
<Input type="checkbox"
|
||||
onChange={this.handleOptionChange}
|
||||
name={'package-option-'+ additionalPackage.idAdditionalPackage}
|
||||
className="package-option-input"/>
|
||||
<div className="option-name">{this.formatName(additionalPackage.packageName)}</div>
|
||||
<div className="option-description" dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}></div>
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) &&
|
||||
<div className="option-prices">
|
||||
<table className="price-table option-price-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{coMarketTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{coMarketTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{selectedPrice.fixedExtra > 0 ? selectedPrice.fixedExtra.toLocaleString() : 0} {country.currency}</td>
|
||||
<td>
|
||||
<div className="option-value-text monthly-price">
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(selectedPrice)
|
||||
? priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString() + ' '
|
||||
: 0
|
||||
} {country.currency}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
}
|
||||
</div>
|
||||
|
||||
<Popover placement="bottom"
|
||||
isOpen={this.state.popoverOpen}
|
||||
target={'info-additonal-' + additionalPackage.idAdditionalPackage}
|
||||
toggle={this.toggle}>
|
||||
<PopoverBody>
|
||||
{coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
|
||||
selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals
|
||||
});
|
||||
export default connect(mapStateToProps)(AdditionalPackageItem);
|
||||
@@ -0,0 +1,26 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row} from 'reactstrap';
|
||||
import AdditionalPackageItemContainer from './AdditionalPackageItemContainer.jsx';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class AdditionalPackages extends Component {
|
||||
render() {
|
||||
const {additionalPackages, country} = this.props;
|
||||
return (
|
||||
<div className="shop-package-options">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.ADDITIONAL_PACKAGES}:</h6>
|
||||
<Row>
|
||||
{
|
||||
additionalPackages.map(additionalPackage => {
|
||||
return <AdditionalPackageItemContainer key={'additonal-' + additionalPackage.idAdditionalPackage}
|
||||
country={country}
|
||||
additionalPackage={additionalPackage}/>
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AdditionalPackages;
|
||||
@@ -0,0 +1,127 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
|
||||
import {selectAgreement} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
const priceHelper = new PriceHelper();
|
||||
|
||||
class AgreementOptionItem 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
|
||||
});
|
||||
}
|
||||
|
||||
handleOptionChange() {
|
||||
this.props.dispatch(selectAgreement(this.props.price));
|
||||
}
|
||||
|
||||
getClass(selectedAgreement, price) {
|
||||
return selectedAgreement.idPaymentType === price.idPaymentType ?
|
||||
'selected-option' :
|
||||
'';
|
||||
}
|
||||
|
||||
render() {
|
||||
const {price, selectedAgreement, country} = this.props;
|
||||
|
||||
return (
|
||||
<Col xl="4" lg="4" md="6" xs="6" className="option-value">
|
||||
<div className={'option-selection ' + this.getClass(selectedAgreement, price)}>
|
||||
<Label check>
|
||||
<Input type="radio"
|
||||
name="price-type"
|
||||
onChange={this.handleOptionChange}
|
||||
checked={selectedAgreement.idPaymentType === price.idPaymentType}
|
||||
value={price.idPaymentType}
|
||||
className="price-type-option"/>
|
||||
<div className="option-name">{price.payType}</div>
|
||||
<div className="option-prices">
|
||||
<table className="price-table option-price-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{coMarketTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{coMarketTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{price.fixedExtra.toLocaleString()} {country.currency}</td>
|
||||
<td>
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(price)
|
||||
? <div className="option-value-text monthly-price">
|
||||
{priceHelper.sumPrices([price.recurentExtra, price.servicesExtra]).toLocaleString()} {country.currency}
|
||||
</div>
|
||||
: <div className="option-value-text monthly-price"> 0 </div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Label>
|
||||
<i className="price-info-btn fa fa-info-circle"
|
||||
aria-hidden="true"
|
||||
id={'info-additonal-' + price.idPaymentType}
|
||||
onClick={this.toggle}></i>
|
||||
</div>
|
||||
<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()} {country.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()} {country.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>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(AgreementOptionItem);
|
||||
@@ -0,0 +1,24 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row} from 'reactstrap';
|
||||
import AgreementOptionItemContainer from './AgreementOptionItemContainer.jsx';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class AgreementOptions extends Component {
|
||||
render() {
|
||||
const {prices, country} = this.props;
|
||||
return (
|
||||
<div className="shop-package-options">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.AGREEMENT_OPTIONS}:</h6>
|
||||
<Row>
|
||||
{
|
||||
prices && prices.map((price) => {
|
||||
return <AgreementOptionItemContainer key={'agreement-' + price.idPaymentType} country={country} price={price}/>
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AgreementOptions;
|
||||
20
frontend/src/containers/coMarket/components/CartIcon.jsx
Normal file
20
frontend/src/containers/coMarket/components/CartIcon.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class CartIcon extends Component {
|
||||
render() {
|
||||
const cartCount = parseInt(this.props.cartCount, 10);
|
||||
|
||||
return (
|
||||
<span className="items-cart-count">
|
||||
{ cartCount === 0
|
||||
? <span>Cart is empty</span>
|
||||
: cartCount === 1
|
||||
? <span>1 item in cart</span>
|
||||
: <span>{cartCount} items in cart</span>
|
||||
}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CartIcon;
|
||||
@@ -0,0 +1,83 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import Select from 'react-select';
|
||||
import {fetchShopPackages, fetchShopCommercialLeads, selectCommercialLead} from '../../../actions/coMarket/coMarketPackagesActions';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class CoMarketCatalogSelect extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleClChange = this.handleClChange.bind(this);
|
||||
this.handleSearchChange = this.handleSearchChange.bind(this);
|
||||
this.state = {
|
||||
searchValue : ''
|
||||
};
|
||||
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.dispatch(fetchShopCommercialLeads());
|
||||
|
||||
if(this.props.commercialLeads && this.props.cartItems && this.props.activeModule==='cart'){
|
||||
const cl = this.props.commercialLeads.find((cl) => {return cl.idCommercialLead===this.props.cartItems[0].idCommercialLead});
|
||||
this.props.dispatch(selectCommercialLead(cl));
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.activeModule==='cart' && nextProps.commercialLeads && nextProps.cartItems && nextProps.cartItems.length > 0){
|
||||
const cl = nextProps.commercialLeads.find((cl) => {return cl.idCommercialLead===nextProps.cartItems[0].idCommercialLead});
|
||||
nextProps.dispatch(selectCommercialLead(cl));
|
||||
}
|
||||
|
||||
if(nextProps.commercialLeads && nextProps.idCommercialLead && nextProps.activeModule === 'co-market'){
|
||||
const cl = nextProps.commercialLeads.find((cl) => {return cl.idCommercialLead===nextProps.idCommercialLead});
|
||||
nextProps.dispatch(selectCommercialLead(cl));
|
||||
}
|
||||
}
|
||||
|
||||
handleClChange(cl) {
|
||||
this.props.dispatch(selectCommercialLead(cl));
|
||||
this.props.dispatch(fetchShopPackages(cl));
|
||||
}
|
||||
|
||||
handleSearchChange(event) {
|
||||
this.setState({searchValue: event.target.value});
|
||||
this.props.dispatch(fetchShopPackages(this.props.selectedCommercialLead, event.target.value));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {commercialLeads, selectedCommercialLead, idPackage, activeSubmodule} = this.props;
|
||||
const isDisabled = (idPackage || this.props.activeModule === 'cart') ? true : false;
|
||||
|
||||
return (
|
||||
<div id="co-market-catalog">
|
||||
{
|
||||
commercialLeads && activeSubmodule !== 'orders' &&
|
||||
<div className="filters co-market-nav-div">
|
||||
<div className="filter-name">{coMarketTexts.labels.CATALOGUE}:</div>
|
||||
<Select value={selectedCommercialLead}
|
||||
name="commercialLead"
|
||||
className="filter-select"
|
||||
placeholder={coMarketTexts.labels.SELECT_CL}
|
||||
options={commercialLeads}
|
||||
disabled={isDisabled}
|
||||
clearable={false}
|
||||
onChange={(cl) => {this.handleClChange(cl)}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
commercialLeads: state.coMarketPackagesReducer.commercialLeads,
|
||||
selectedCommercialLead: state.coMarketPackagesReducer.selectedCommercialLead,
|
||||
idPackage: state.coMarketReducer.idPackage,
|
||||
cartItems: state.cartReducer.cartItems,
|
||||
activeSubmodule: state.pageReducer.activeSubmodule
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(CoMarketCatalogSelect);
|
||||
61
frontend/src/containers/coMarket/components/PackageInfo.jsx
Normal file
61
frontend/src/containers/coMarket/components/PackageInfo.jsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Col} from 'reactstrap';
|
||||
import {API_SERVER} from '../../../config';
|
||||
import FileDownloader from '../../../helpers/FileDownloader';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
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 fileName = document.documentName + '.' + document.extension;
|
||||
fileHandler.download(fileUrl, fileName);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {packageInfo, documents} = this.props;
|
||||
|
||||
return (
|
||||
<div id="shop-package-general-info" className="shop-package-general-info">
|
||||
{ packageInfo &&
|
||||
<span>
|
||||
<Col lg="12"
|
||||
className="shop-package-title"><h4>{packageInfo.name}</h4></Col>
|
||||
<Col lg="12"
|
||||
className="shop-package-reference"><h6>{packageInfo.reference}</h6></Col>
|
||||
<Col lg="12"
|
||||
dangerouslySetInnerHTML={{__html: packageInfo.shortDescription}}
|
||||
className="shop-package-full-description"></Col>
|
||||
<Col lg="12"
|
||||
className="shop-package-details-country">
|
||||
<div className="shop-package-label">{coMarketTexts.labels.AVAILABLE_IN}:</div>
|
||||
<div className="shop-package-text">
|
||||
{packageInfo.country} <span className={'flag-icon flag-icon-' + packageInfo.countryCode}></span>
|
||||
</div>
|
||||
</Col>
|
||||
</span>
|
||||
}
|
||||
{
|
||||
documents && documents.length > 0 &&
|
||||
<Col lg="12"
|
||||
className="shop-package-details-documents">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
</Col>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PackageInfo;
|
||||
@@ -0,0 +1,123 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
|
||||
import {selectOption} from '../../../actions/coMarket/coMarketPackageDetailsActions';
|
||||
import PriceHelper from '../../../helpers/coMarket/PriceHelper';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
const priceHelper = new PriceHelper();
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
handleOptionChange() {
|
||||
this.props.dispatch(selectOption(this.props.idGroup, this.props.option));
|
||||
}
|
||||
|
||||
isChecked() {
|
||||
return this.props.selectedOptions
|
||||
&& this.props.selectedOptions[this.props.idGroup]
|
||||
&& this.props.selectedOptions[this.props.idGroup].idOptionPackage === this.props.option.idOptionPackage;
|
||||
}
|
||||
|
||||
getClass(isChecked) {
|
||||
return isChecked ?
|
||||
'selected-option' :
|
||||
'';
|
||||
}
|
||||
|
||||
formatName(name) {
|
||||
return name.length > 39 ? name.substring(0, 40) + '...' : name;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {idGroup, option, country} = this.props;
|
||||
const selectedPrice = this.props.selectedAgreement ? priceHelper.getSelectedPrice(option, this.props.selectedAgreement) : null;
|
||||
const isChecked = this.isChecked();
|
||||
|
||||
return (
|
||||
<Col xl="4" lg="4" md="6" xs="6" className="option-value">
|
||||
<div className={'form-check-inline option-selection ' + this.getClass(isChecked)}>
|
||||
<Label check>
|
||||
<Input type="radio"
|
||||
name={'package-option-'+ idGroup}
|
||||
className="package-option-input"
|
||||
onChange={this.handleOptionChange}
|
||||
checked={isChecked}
|
||||
value={option.idOptionPackage}/>
|
||||
<div className="option-name">{this.formatName(option.optionName)}</div>
|
||||
<div className="option-description" dangerouslySetInnerHTML={{__html: option.shortDescription}}></div>
|
||||
{
|
||||
priceHelper.hasFixedPrice(selectedPrice) &&
|
||||
<div className="option-prices">
|
||||
<table className="price-table option-price-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{coMarketTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{coMarketTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + country.currency} </td>
|
||||
<td>
|
||||
{
|
||||
priceHelper.hasRecurrentPrice(selectedPrice) ?
|
||||
<div className="option-value-text monthly-price">
|
||||
{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {country.currency}
|
||||
</div>
|
||||
: <div className="option-value-text monthly-price"> 0 </div>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
}
|
||||
</div>
|
||||
<Popover placement="bottom"
|
||||
isOpen={this.state.popoverOpen}
|
||||
target={'info-option-' + idGroup + '-' + option.idOptionPackage}
|
||||
toggle={this.toggle}>
|
||||
<PopoverBody>
|
||||
{coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
|
||||
</PopoverBody>
|
||||
</Popover>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
|
||||
selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions
|
||||
});
|
||||
export default connect(mapStateToProps)(PackageOptionItem);
|
||||
@@ -0,0 +1,35 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row} from 'reactstrap';
|
||||
import PackageOptionItemContainer from './PackageOptionItemContainer.jsx';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class PackageOptions extends Component {
|
||||
render() {
|
||||
const {groups, country} = this.props;
|
||||
return (
|
||||
<div className="shop-package-options">
|
||||
<h6 className="shop-package-label options-header">{coMarketTexts.labels.PACKAGE_OPTIONS}</h6>
|
||||
{
|
||||
Object.keys(groups).map(groupKey => {
|
||||
const group = groups[groupKey];
|
||||
return <div key={'group-' + group.idGroup} className="package-option">
|
||||
<h6 className="shop-package-label"> {group.groupName}:</h6>
|
||||
<Row>
|
||||
{
|
||||
group.options.map(option => {
|
||||
return <PackageOptionItemContainer key={'option-' + group.idGroup + option.idOptionPackage}
|
||||
option={option}
|
||||
country={country}
|
||||
idGroup={group.idGroup}/>
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PackageOptions;
|
||||
80
frontend/src/containers/coMarket/components/PackagePrice.jsx
Normal file
80
frontend/src/containers/coMarket/components/PackagePrice.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class PackagePrice extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.getFinalPrice = this.getFinalPrice.bind(this);
|
||||
this.filterByAgreement = this.filterByAgreement.bind(this);
|
||||
}
|
||||
|
||||
filterByAgreement(price) {
|
||||
return price.idPaymentType === this.props.selectedAgreement.idPaymentType;
|
||||
}
|
||||
|
||||
getExtra(selected, priceType) {
|
||||
const extraPriceObj = selected.prices.find(this.filterByAgreement);
|
||||
const extraPrice = extraPriceObj ? extraPriceObj[priceType] : 0;
|
||||
|
||||
return extraPrice;
|
||||
}
|
||||
|
||||
getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, priceType) {
|
||||
let price = selectedAgreement ? selectedAgreement[priceType] : 0;
|
||||
|
||||
if(selectedAgreement && selectedOptions) {
|
||||
Object.keys(selectedOptions).forEach((idGroup) => {
|
||||
price += this.getExtra(selectedOptions[idGroup], priceType);
|
||||
});
|
||||
}
|
||||
if(selectedAgreement && selectedAdditionals) {
|
||||
selectedAdditionals.forEach((additional) => {
|
||||
price += this.getExtra(additional, priceType);
|
||||
});
|
||||
}
|
||||
|
||||
return price;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {country, selectedAgreement, selectedOptions, selectedAdditionals} = this.props;
|
||||
|
||||
return (
|
||||
<div className="selection-price">
|
||||
{
|
||||
selectedAgreement &&
|
||||
<table className="price-table main-price">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{coMarketTexts.labels.ON_DELIVERY}</th>
|
||||
<th>{coMarketTexts.labels.MONTHLY}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {country.currency}
|
||||
</td>
|
||||
<td>
|
||||
{(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
|
||||
+ this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
|
||||
{' '}{country.currency}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
|
||||
selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions,
|
||||
selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(PackagePrice);
|
||||
45
frontend/src/containers/coMarket/components/ShopItem.jsx
Normal file
45
frontend/src/containers/coMarket/components/ShopItem.jsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { Col, Card, CardBody, CardTitle, CardSubtitle, Button} from 'reactstrap';
|
||||
import {coMarketTexts} from '../../../constants/coMarketConstants';
|
||||
|
||||
class ShopItem extends Component {
|
||||
getShopItemPackageTitle(name) {
|
||||
return name.length > 40 ? name.substring(0, 40) + '...' : name;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {shopPackage, idCommercialLead} = this.props;
|
||||
|
||||
return (
|
||||
<Col xl="3" lg="4" md="6" sm="12" xs="12">
|
||||
<Card className="shop-package-item">
|
||||
<div className="shop-image-photo" style={{'background-image': 'url("'+(shopPackage.photo || 'static/img/no-photo-package.jpg') +'")'}}></div>
|
||||
<CardBody>
|
||||
<CardTitle className="shop-package-title">
|
||||
<Link to={`/co-market/${idCommercialLead}/${shopPackage.idPackage}`}>
|
||||
{this.getShopItemPackageTitle(shopPackage.name)}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<CardSubtitle className="shop-package-reference">
|
||||
{shopPackage.reference}
|
||||
</CardSubtitle>
|
||||
|
||||
<div className="shop-package-country">
|
||||
{coMarketTexts.labels.AVAILABLE_IN}: {shopPackage.country}
|
||||
<span className={'flag-icon flag-icon-' + shopPackage.countryCode}></span>
|
||||
</div>
|
||||
<div className="shop-package-details-btn-layer">
|
||||
<Link id={'shop-package-details-' + shopPackage.idPackage} to={`/co-market/${idCommercialLead}/${shopPackage.idPackage}`}>
|
||||
<Button className="shop-package-details-btn">{coMarketTexts.buttons.DETAILS}</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ShopItem;
|
||||
Reference in New Issue
Block a user