76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {Col} from 'reactstrap';
|
|
import {connect} from 'react-redux';
|
|
import './style/CartStepsContainer.css';
|
|
import {fetchCartItems} from '../../actions/cart/cartActions';
|
|
import {cartTexts} from '../../constants/cartConstants';
|
|
|
|
class CartStepsContainer extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleStepChange = this.handleStepChange.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const isForSteps = true;
|
|
this.props.dispatch(fetchCartItems(isForSteps));
|
|
}
|
|
|
|
handleStepChange(stepDirection) {
|
|
if(stepDirection === 'next') {
|
|
if(this.props.nextStepAction) {
|
|
this.props.nextStepAction();
|
|
}
|
|
} else {
|
|
if(this.props.prevStepAction) {
|
|
this.props.prevStepAction();
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {cartSteps, currentStep, isLoading} = this.props;
|
|
const stepsLength = cartSteps && Object.keys(cartSteps).length - 1;
|
|
|
|
return (
|
|
<Col id="cart-steps-container" xl="12" lg="12" md="12" xs="12" sm="12">
|
|
{(cartSteps && cartSteps[currentStep] && cartSteps[currentStep].previous && !isLoading) &&
|
|
<span onClick={()=>{this.handleStepChange('previous')}} className="prev-btn">
|
|
<Col sm="12" xs="12">
|
|
{cartTexts.buttons.BACK}
|
|
</Col>
|
|
</span>
|
|
}
|
|
{cartSteps && Object.keys(cartSteps).map((stepKey, index) =>
|
|
<span key={'cart-step-' + stepKey}>
|
|
<Col xl="3" sm="12" xs="12" className={'step-name ' + cartSteps[stepKey].status}>
|
|
{(index + 1) + ' . ' + cartSteps[stepKey].name}
|
|
</Col>
|
|
{stepsLength !== index && <div className="steps-link"><div className="step-link"></div></div>}
|
|
</span>
|
|
)}
|
|
{(cartSteps && cartSteps[currentStep] && cartSteps[currentStep].next && !isLoading) &&
|
|
<span onClick={()=>{this.handleStepChange('next')}} className="next-btn">
|
|
<Col sm="12" xs="12" >
|
|
{cartTexts.buttons.NEXT}
|
|
</Col>
|
|
</span>
|
|
}
|
|
</Col>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
cartItems: state.cartReducer.cartItems,
|
|
cartSteps: state.cartReducer.cartSteps,
|
|
currentStep: state.cartReducer.currentStep,
|
|
cartDocuments: state.cartReducer.cartDocuments,
|
|
nextStepAction: state.cartReducer.nextStepAction,
|
|
prevStepAction: state.cartReducer.prevStepAction,
|
|
isLoading: state.cartReducer.isLoading
|
|
});
|
|
|
|
export default connect(mapStateToProps)(CartStepsContainer);
|