122 lines
5.0 KiB
JavaScript
122 lines
5.0 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Row, Col, FormGroup, Label, Input} from 'reactstrap';
|
|
import {setSupportMessage} from '../../../actions/orders/processActions';
|
|
import {orderTexts} from '../../../constants/ordersConstants';
|
|
|
|
class SupportMail extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
supportText: ''
|
|
};
|
|
this.setSupportMessage = this.setSupportMessage.bind(this);
|
|
}
|
|
calculateFixedPrice(quantity, price) {
|
|
return quantity*price;
|
|
}
|
|
|
|
calculateRecurrentPrice(orderPackage) {
|
|
return orderPackage.units*(orderPackage.packageRecuringPrice + orderPackage.packageServicePrice);
|
|
}
|
|
|
|
handleInputChange(event) {
|
|
this.setState({supportText: event.target.value});
|
|
event.preventDefault();
|
|
}
|
|
|
|
setSupportMessage() {
|
|
this.props.dispatch(setSupportMessage(this.state.supportText));
|
|
}
|
|
|
|
render() {
|
|
const {orderInfo, orderPackages} = this.props.params;
|
|
|
|
return (
|
|
<span id="send-support-mail-container">
|
|
{orderInfo && orderPackages &&
|
|
<div>
|
|
<div id="order-details">
|
|
<Row>
|
|
<Col>
|
|
<h5>{orderTexts.labels.ORDER_DETAILS}</h5>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xl="4">
|
|
<span className="subtitle">{orderTexts.labels.ORDER_NUMBER}:</span>
|
|
</Col>
|
|
<Col xl="8">
|
|
<span>{orderInfo.number}</span>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xl="4">
|
|
<span className="subtitle">{orderTexts.labels.LOCATION_DETAILS}:</span>
|
|
</Col>
|
|
<Col xl="8">
|
|
<span>{orderInfo.reference || '-'}</span>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
<div id="order-items" className="support-details">
|
|
<Row>
|
|
<Col>
|
|
<h5>{orderTexts.labels.ORDER_ITEMS}</h5>
|
|
</Col>
|
|
</Row>
|
|
{ orderPackages.map((orderPackage, mapKey) =>
|
|
<div key={'order-package-'+mapKey} className="order-package-details">
|
|
<Row>
|
|
<Col>
|
|
<span className="fa fa-shopping-cart subtitle"></span>
|
|
<span className="package-name"> {orderPackage.quantity} x {orderPackage.name}</span>
|
|
</Col>
|
|
</Row>
|
|
|
|
{orderPackage.dateCompleted &&
|
|
<Row>
|
|
<Col>
|
|
<span className="subtitle">{orderTexts.labels.END_OF_LIFE}:</span>
|
|
</Col>
|
|
<Col xl="8">
|
|
<span>{orderPackage.dateCompleted}</span>
|
|
</Col>
|
|
</Row>
|
|
}
|
|
<Row>
|
|
<Col>
|
|
<span className="subtitle">{orderTexts.labels.STATUS}:</span>
|
|
</Col>
|
|
<Col xl="8">
|
|
<span>{orderPackage.status}</span>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div id="order-support-text" className="support-details">
|
|
<Row>
|
|
<Col>
|
|
<FormGroup>
|
|
<Label for="supportText">{orderTexts.labels.ENTER_TEXT}</Label>
|
|
<Input id="my-support-mail-text"
|
|
type="textarea"
|
|
name="supportText"
|
|
value={this.state.supportText}
|
|
onChange={(e) => this.handleInputChange(e)}
|
|
onBlur={this.setSupportMessage}/>
|
|
</FormGroup>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect()(SupportMail);
|