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

import React, {Component} from 'react';
import {Col} from 'reactstrap';
import WiaasBox from '../../../mainComponents/box/WiaasBox.jsx';
import {WiaasTable, WiaasTableHeader, WiaasTableBody, WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
import {orderTexts} from '../../../constants/ordersConstants';
import '../style/Orders.css';

class OrderPackage extends Component {
    calculateRecuringPrice(packageDetails) {
        return packageDetails.units * (parseFloat(packageDetails.packageRecuringPrice) + parseFloat(packageDetails.packageServicePrice));
    }

    calculateQuantityPrice(quantity, price, recurringPrice = 0) {
        return quantity * parseFloat(price + recurringPrice);
    }

    getHeadersByType(type) {
        if(type === 'active') {
            return ['Package', 'Price', 'Services and support', 'Delivery active step'];
        }

        return ['Package', 'Price', 'Services and support', 'End of Life'];
    }

    render() {
        const {order, type} = this.props;

        return (
            <WiaasTableRow className={"order-border-" + order.status}>
                <Col lg="3" sm="12" xs="12">
                    <WiaasBox mainTitle="Order Details">
                        <div className="order-details-container">
                            <WiaasTableRow id={'delivery-address-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{orderTexts.labels.DELIVERY_ADDRESS}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.shipping.address_1}, {order.shipping.city}, {order.shipping.country}, {order.shipping.postcode}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'phone-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{orderTexts.labels.PHONE_NUMBER}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.customer.phone}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'mail-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{orderTexts.labels.MAIL}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.customer.email}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'commercial-lead-phone-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{order.commercial_lead ? order.commercial_lead.name : ''} {orderTexts.labels.PHONE_NUMBER}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.commercial_lead ? order.commercial_lead.phone : ''}</Col>
                            </WiaasTableRow>
                            <WiaasTableRow id={'mail-' + order.id}>
                                <Col lg="4" sm="4" xs="4">{order.commercial_lead ? order.commercial_lead.name : ''} {orderTexts.labels.MAIL}:</Col>
                                <Col lg="8" sm="8" xs="8">{order.commercial_lead ? order.commercial_lead.email : ''}</Col>
                            </WiaasTableRow>
                        </div>
                    </WiaasBox>
                </Col>
                <Col lg="9" sm="12" xs="12">
                    <WiaasBox mainTitle="Items">
                        <WiaasTable>
                            <WiaasTableHeader headers={this.getHeadersByType(type)}/>
                            <WiaasTableBody>
                                {order.line_items.map((orderPackage, index) =>
                                    <WiaasTableRow className="order-central-row"  key={orderPackage.id + '-' + orderPackage.product_id}>
                                       <WiaasTableCol header="Package" className="package-info-col">
                                           <div className="package-name">{orderPackage.quantity} x {orderPackage.name}</div>
                                        </WiaasTableCol>
                                        <WiaasTableCol header="Price">
                                            {this.calculateQuantityPrice(orderPackage.quantity, orderPackage.price).toLocaleString()} {orderPackage.packageCurrency && orderPackage.packageCurrency.currency} {' '}
                                            ({orderPackage.payment_type})
                                        </WiaasTableCol>
                                        <WiaasTableCol header="Services and support">
                                            {this.calculateQuantityPrice(orderPackage.quantity, orderPackage.service_price, orderPackage.recurring_price).toLocaleString() + ' / ' + orderPackage.period_unit + ' '}
                                            {orderTexts.labels.EXTEND} {orderPackage.period_unit} (Max {orderPackage.max_contract_period})
                                        </WiaasTableCol>
                                        <WiaasTableCol>
                                            {
                                                type === 'active'
                                                ? orderPackage.short_desc || '-'
                                                : orderPackage.date_completed ||  '-'
                                            }
                                        </WiaasTableCol>
                                   </WiaasTableRow>
                               )}
                            </WiaasTableBody>
                        </WiaasTable>
                   </WiaasBox>
               </Col>
           </WiaasTableRow>
        );
    }
}

export default OrderPackage;