124 lines
6.5 KiB
JavaScript
124 lines
6.5 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Row, Col, Button} from 'reactstrap';
|
|
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
|
|
import {fetchPackageDetails, addToCart} from '../../actions/coMarket/coMarketPackageDetailsActions';
|
|
import PackageInfo from './components/PackageInfo.jsx';
|
|
import PackagePrice from './components/PackagePrice.jsx';
|
|
import PackageOptionGroup from './components/PackageOptionGroup';
|
|
import AdditionalPackages from './components/AdditionalPackages.jsx';
|
|
import AgreementOptions from './components/AgreementOptions.jsx';
|
|
import {coMarketTexts} from '../../constants/coMarketConstants';
|
|
import './style/CoMarketPackageDetailsContainer.css';
|
|
|
|
class CoMarketPackageDetailsContainer extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleAddToCart = this.handleAddToCart.bind(this);
|
|
this.state = {
|
|
selectedOptions: {}
|
|
};
|
|
}
|
|
|
|
handleAddToCart() {
|
|
const addParams = {
|
|
selectedPackage: this.props.selectedPackage,
|
|
selectedAgreement: this.props.selectedAgreement,
|
|
selectedOptions: this.props.selectedOptions,
|
|
selectedAdditionals: this.props.selectedAdditionals,
|
|
shopId: this.props.shopId,
|
|
};
|
|
this.props.dispatch(addToCart(addParams));
|
|
}
|
|
|
|
componentDidMount() {
|
|
const {idPackage, shopId} = this.props;
|
|
this.props.dispatch(fetchPackageDetails({idPackage, shopId}));
|
|
}
|
|
|
|
render() {
|
|
const {selectedPackage, selectedAgreement, messages, isLoading} = this.props;
|
|
return(
|
|
<div id="co-market-package-details">
|
|
<Row>
|
|
<Col xl="12" lg="12">
|
|
<WiaasBox>
|
|
{
|
|
isLoading &&
|
|
<div className="loader">
|
|
<i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
|
|
</div>
|
|
}
|
|
{
|
|
(selectedPackage && !isLoading) &&
|
|
<Row>
|
|
<Col xl="6" lg="5" md="12" xs="12">
|
|
<PackageInfo
|
|
name={selectedPackage.name}
|
|
reference={selectedPackage.reference}
|
|
shortDescription={selectedPackage.shortDescription}
|
|
country={selectedPackage.country}
|
|
countryCode={selectedPackage.countryCode}
|
|
documents={selectedPackage.documents} />
|
|
</Col>
|
|
|
|
<Col xl="6" lg="7" md="12" xs="12">
|
|
<div id="shop-package-buy-info">
|
|
<PackagePrice currency={selectedPackage.currency} />
|
|
<AgreementOptions
|
|
prices={selectedPackage.prices}
|
|
currency={selectedPackage.currency}/>
|
|
{
|
|
selectedPackage.additionalPackages && selectedPackage.additionalPackages.length > 0 && selectedAgreement &&
|
|
<AdditionalPackages
|
|
additionalPackages={selectedPackage.additionalPackages}
|
|
currency={selectedPackage.currency}/>
|
|
}
|
|
{
|
|
selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
|
|
(<div className="shop-package-options">
|
|
{
|
|
Object.keys(selectedPackage.groups).map(groupKey => {
|
|
const group = selectedPackage.groups[groupKey];
|
|
return (<PackageOptionGroup
|
|
key={groupKey}
|
|
group={group}
|
|
currency={selectedPackage.currency}/>);
|
|
})
|
|
}
|
|
</div>)
|
|
}
|
|
<Row className="justify-content-end" style={{ marginTop: 30 }}>
|
|
<Button id="add-to-cart-btn"
|
|
className="add-to-cart-btn"
|
|
onClick={this.handleAddToCart}
|
|
color="secondary">
|
|
<i className="fa fa-shopping-cart" aria-hidden="true"></i>
|
|
{' '}{coMarketTexts.buttons.ADD_TO_CART}
|
|
</Button>
|
|
</Row>
|
|
{messages && <span>{messages[0].message}</span>}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
}
|
|
</WiaasBox>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
selectedPackage: state.coMarketPackageDetailsReducer.selectedPackage,
|
|
selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
|
|
selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions,
|
|
selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals,
|
|
messages: state.coMarketPackageDetailsReducer.messages,
|
|
isLoading: state.coMarketPackageDetailsReducer.isLoading
|
|
});
|
|
|
|
export default connect(mapStateToProps)(CoMarketPackageDetailsContainer);
|