old-new-wiaas/frontend/src/containers/orders/components/process/OrderProcess.jsx

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 === 'pending' || step.status === 'complete') && 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.reverse().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;