55 lines
2.1 KiB
React
55 lines
2.1 KiB
React
|
import React, {Component} from 'react';
|
||
|
|
import {Row, Col} from 'reactstrap';
|
||
|
|
import ProcessStep from './ProcessStep.jsx';
|
||
|
|
import {orderTexts} from '../../../../constants/ordersConstants';
|
||
|
|
|
||
|
|
const completedOrdersStatuses = ['production', 'end-of-life'];
|
||
|
|
|
||
|
|
class OrderProcess extends Component {
|
||
|
|
isStepVisible(step) {
|
||
|
|
return (step.status === 'in-progress' || step.status === 'done') && step.isVisibleForCustomer === 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {orderProcess, orderStatus} = this.props;
|
||
|
|
const visibleSteps = (orderProcess && orderProcess.steps) ? orderProcess.steps.filter(this.isStepVisible) : [];
|
||
|
|
|
||
|
|
if(orderProcess && completedOrdersStatuses.find((status) => {return status === orderStatus;})) {
|
||
|
|
const processCompleted = {
|
||
|
|
shortDesc: orderTexts.labels.COMPLETED,
|
||
|
|
status: 'done',
|
||
|
|
isVisibleForCustomer: 1,
|
||
|
|
actualDate: visibleSteps[0].actualDate
|
||
|
|
};
|
||
|
|
if(visibleSteps) {
|
||
|
|
visibleSteps.unshift(processCompleted);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="order-process">
|
||
|
|
{
|
||
|
|
(!orderProcess || !orderProcess.steps) &&
|
||
|
|
<Row>
|
||
|
|
<Col xl="12" lg="12" md="12" xs="12">
|
||
|
|
<div className="no-process-info">{orderTexts.labels.WILL_BE_PROCESS}</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
}
|
||
|
|
{
|
||
|
|
(orderProcess && orderProcess.steps) &&
|
||
|
|
<Row>
|
||
|
|
<Col xl="12" lg="12" md="12" xs="12" className="order-package-process">
|
||
|
|
{
|
||
|
|
visibleSteps.map((step, index) => <ProcessStep isStepVisible={this.isStepVisible} stepNumber={visibleSteps.length - index} step={step} key={'step-' + step.idProcess + '-' + step.idProcessStep}/>)
|
||
|
|
}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default OrderProcess;
|