initial docker setup
This commit is contained in:
GotPPay
@@ -0,0 +1,30 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Input} from 'reactstrap';
|
||||
import {orderTexts} from '../../../../constants/ordersConstants';
|
||||
|
||||
class AcceptanceDeclineReason extends Component {
|
||||
handleEditorChange = (e) => {
|
||||
const reason = e.target.value;
|
||||
this.props.params.onEditorChange(reason);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {actionType} = this.props.params;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
actionType === 'accept'
|
||||
? <div>{orderTexts.labels.ACCEPT_INSTALLATION_TEXT}</div>
|
||||
: <div>
|
||||
<div>{orderTexts.labels.DECLINE_REASON_TEXT}</div>
|
||||
<Input onChange={this.handleEditorChange} type="textarea" name="acceptance-decline-reason" id="installation-declined-reason" />
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AcceptanceDeclineReason;
|
||||
@@ -0,0 +1,193 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import {Row, Col, Button} from 'reactstrap';
|
||||
import {fetchCustomerAcceptance, uploadAcceptance, acceptDeclineInstallation, badFile} from '../../../../actions/orders/customerAcceptanceActions';
|
||||
import {setDialogContent, setDialogOpenFlag} from '../../../../actions/dialog/dialogActions';
|
||||
import AcceptanceDeclineReason from './AcceptanceDeclineReason.jsx';
|
||||
import {API_SERVER} from '../../../../config';
|
||||
import FileDownloader from '../../../../helpers/FileDownloader';
|
||||
import {orderTexts} from '../../../../constants/ordersConstants';
|
||||
import '../../style/CustomerAcceptance.css';
|
||||
|
||||
const fileHandler = new FileDownloader();
|
||||
|
||||
class CustomerAcceptance extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
reason : '',
|
||||
actionType : ''
|
||||
}
|
||||
|
||||
this.acceptDeclineInstallation = this.acceptDeclineInstallation.bind(this);
|
||||
this.onEditorChange = this.onEditorChange.bind(this);
|
||||
}
|
||||
|
||||
downloadDocument(document){
|
||||
const fileUrl = `${API_SERVER}/utils/api/downloadFile?idDocument=${document.idDocument}&fileName=${document.documentName}.${document.extension}`
|
||||
const fileName = document.documentName + '.' + document.extension;
|
||||
fileHandler.download(fileUrl, fileName);
|
||||
}
|
||||
|
||||
uploadFile(idOrder, acceptedFiles, rejectedFiles) {
|
||||
if(acceptedFiles && acceptedFiles.length){
|
||||
const file = acceptedFiles[0];
|
||||
this.props.dispatch(uploadAcceptance(idOrder, file));
|
||||
}
|
||||
|
||||
if(rejectedFiles && rejectedFiles.length) {
|
||||
this.props.dispatch(badFile());
|
||||
}
|
||||
}
|
||||
|
||||
getAcceptanceStatusClass(acceptance, daysDiff) {
|
||||
const statuses = {
|
||||
0 : 'waiting',
|
||||
1 : 'accepted',
|
||||
'-1' : 'declined'
|
||||
};
|
||||
|
||||
if(acceptance === 0 && daysDiff <= 0){
|
||||
return 'danger';
|
||||
} else if(acceptance === 0 && daysDiff <= 3) {
|
||||
return 'warning';
|
||||
}else{
|
||||
return statuses[acceptance];
|
||||
}
|
||||
}
|
||||
|
||||
acceptDeclineInstallation() {
|
||||
const {idOrder} = this.props.step;
|
||||
const {actionType, reason} = this.state;
|
||||
this.props.dispatch(acceptDeclineInstallation(idOrder, actionType, reason));
|
||||
this.setState({reason: ''});
|
||||
}
|
||||
|
||||
getAcceptanceMessage(customerAcceptance){
|
||||
const messages = {
|
||||
0 : orderTexts.labels.NOT_ACCEPTED + (customerAcceptance.acceptanceDueDate || orderTexts.labels.NOT_SET),
|
||||
1 : orderTexts.labels.ACCEPTED,
|
||||
'-1' : orderTexts.labels.DECLINED
|
||||
}
|
||||
|
||||
return messages[customerAcceptance.customerAccepted];
|
||||
}
|
||||
|
||||
onEditorChange(reason) {
|
||||
this.setState({reason});
|
||||
}
|
||||
|
||||
openDialog(actionType) {
|
||||
const dialogContent = this.getAcceptanceDialog(actionType);
|
||||
this.setState({actionType});
|
||||
this.props.dispatch(setDialogOpenFlag(true));
|
||||
this.props.dispatch(setDialogContent(dialogContent));
|
||||
}
|
||||
|
||||
getAcceptanceDialog(actionType) {
|
||||
return {
|
||||
buttons: [
|
||||
{
|
||||
color: 'success',
|
||||
action: this.acceptDeclineInstallation,
|
||||
name: orderTexts.buttons.SEND,
|
||||
id: 'confirm-acceptance'
|
||||
}, {
|
||||
color: 'secondary',
|
||||
name: orderTexts.buttons.CANCEL,
|
||||
id: 'cancel-acceptance'
|
||||
}
|
||||
],
|
||||
header: orderTexts.labels.ACCEPTANCE_HEADER,
|
||||
TagName: AcceptanceDeclineReason,
|
||||
params: {onEditorChange: this.onEditorChange, actionType}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
const {idOrder} = this.props.step;
|
||||
this.props.dispatch(fetchCustomerAcceptance(idOrder));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {step} = this.props;
|
||||
const customerAcceptance = this.props.customerAcceptance || null;
|
||||
|
||||
return (
|
||||
<div id="customer-acceptance" className="validate-questionnaire">
|
||||
{
|
||||
customerAcceptance &&
|
||||
<Row>
|
||||
<Col className="aceeptance-message">
|
||||
{this.getAcceptanceMessage(customerAcceptance)} <div className={'status-icon ' + this.getAcceptanceStatusClass(customerAcceptance.customerAccepted, customerAcceptance.daysDiff)}></div>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
{
|
||||
(customerAcceptance && customerAcceptance.customerAccepted === -1) &&
|
||||
<Row>
|
||||
<Col>{orderTexts.labels.REASON}: {customerAcceptance.customerDeclineReason}</Col>
|
||||
</Row>
|
||||
}
|
||||
<Row className="acceptance-docs">
|
||||
<Col xl="4" lg="5" md="4">
|
||||
<Dropzone className="upload-file-drop-zone"
|
||||
multiple={false}
|
||||
accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods,.jpg,.png,.jpeg"
|
||||
activeClassName="upload-file-accept"
|
||||
onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(step.idOrder, acceptedFiles, rejectedFiles)}}>
|
||||
<h5 className="drop-zone-text">{orderTexts.labels.UPLOAD_ACCEPTANCE_LABEL}</h5>
|
||||
</Dropzone>
|
||||
</Col>
|
||||
<Col xl="4" lg="7" md="8">
|
||||
{
|
||||
(customerAcceptance && customerAcceptance.acceptanceDocuments && customerAcceptance.acceptanceDocuments.length > 0) &&
|
||||
<div>
|
||||
{
|
||||
customerAcceptance.acceptanceDocuments.map(document => <div key={'acceptance-documnet-' + document.idDocument}>
|
||||
<span className="document-link"
|
||||
onClick={() => {this.downloadDocument(document)}}>
|
||||
<i className={'fa fa-file'}></i> {document.documentName} ({document.extension})
|
||||
</span>
|
||||
<span className="document-status">
|
||||
{document.validation} <div className={'status-icon ' + document.validation}></div>
|
||||
</span>
|
||||
</div>)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
(customerAcceptance && !customerAcceptance.acceptanceDocuments) &&
|
||||
<div>
|
||||
{orderTexts.labels.NO_DOCUMENTS_UPLOADED}
|
||||
</div>
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="acceptance-label" xl="12" lg="12" md="12" xs="12">
|
||||
{orderTexts.labels.ACCEPTANCE_LABEL}
|
||||
</Col>
|
||||
<Col lg="7">
|
||||
<Button onClick={()=>{this.openDialog('accept')}}
|
||||
id="acceptance-accept"
|
||||
color="secondary"
|
||||
className="acceptance-button acceptance-accept">{orderTexts.buttons.ACCEPT_INSTALLATION}</Button>
|
||||
<Button onClick={()=>{this.openDialog('decline')}}
|
||||
id="acceptance-decline"
|
||||
color="secondary"
|
||||
className="acceptance-button acceptance-decline">{orderTexts.buttons.DECLINE_INSTALLATION}</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
customerAcceptance: state.processReducer.customerAcceptance
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(CustomerAcceptance);
|
||||
@@ -0,0 +1,54 @@
|
||||
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;
|
||||
@@ -0,0 +1,76 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row, Col, Container} from 'reactstrap';
|
||||
import WiaasBox from '../../../../mainComponents/box/WiaasBox.jsx';
|
||||
import ValidateQuestionnaire from './ValidateQuestionnaire.jsx';
|
||||
import CustomerAcceptance from './CustomerAcceptance.jsx';
|
||||
|
||||
const stepActions = {
|
||||
'validate-questionnaire' : ValidateQuestionnaire,
|
||||
'customer-acceptance' : CustomerAcceptance
|
||||
}
|
||||
|
||||
class OrderStep extends Component {
|
||||
isActiveStep(status) {
|
||||
return status === 'in-progress' ;
|
||||
}
|
||||
|
||||
getStepTitle(step, stepNumber) {
|
||||
return stepNumber + '. ' + step.shortDesc;
|
||||
}
|
||||
|
||||
getDayFromActual(step) {
|
||||
const date = step.actualDate || step.now;
|
||||
const dateParts = date.split(' ');
|
||||
|
||||
return dateParts[0];
|
||||
}
|
||||
|
||||
getMonthFromActual(step) {
|
||||
const date = step.actualDate || step.now;
|
||||
const dateParts = date.split(' ');
|
||||
const dateParts2 = dateParts[1].split(',');
|
||||
|
||||
return dateParts2[0];
|
||||
}
|
||||
|
||||
render() {
|
||||
const {step, stepNumber, isStepVisible} = this.props;
|
||||
const TagName = step.actionCode !== 'manual' && stepActions[step.actionCode] ? stepActions[step.actionCode] : null;
|
||||
|
||||
return (
|
||||
<Container fluid={true} className="order-step">
|
||||
{
|
||||
isStepVisible(step) &&
|
||||
<Row className="step-layer">
|
||||
<Col xl="1" lg="1" md="2" xs="2" className="step-circle-layer">
|
||||
<div className="step-line"></div>
|
||||
<div className={'step-circle ' + step.status}>
|
||||
{!this.isActiveStep(step.status) &&
|
||||
<span>
|
||||
<div>{this.getDayFromActual(step)}</div>
|
||||
<div>{this.getMonthFromActual(step)}</div>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</Col>
|
||||
<Col xl="11" lg="11" md="10" xs="10" className="step-box-layer">
|
||||
<WiaasBox isContentVisible={this.isActiveStep(step.status)} className={'step-box'} mainTitle={this.getStepTitle(step, stepNumber)}>
|
||||
{
|
||||
(this.isActiveStep(step.status) && TagName) &&
|
||||
<Col>
|
||||
{
|
||||
(TagName && this.isActiveStep(step.status)) && <TagName step={step}/>
|
||||
}
|
||||
</Col>
|
||||
}
|
||||
</WiaasBox>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default OrderStep;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {fetchCustomerDocuments, fetchValidationComments} from '../../../../actions/orders/processActions';
|
||||
import ValidateQuestionnaireItem from './ValidateQuestionnaireItem.jsx';
|
||||
import '../../style/ValidateQuestionnaire.css';
|
||||
|
||||
class ValidateQuestionnaire extends Component {
|
||||
|
||||
componentDidMount(){
|
||||
const {idOrder, idProcessStep} = this.props.step;
|
||||
this.props.dispatch(fetchCustomerDocuments(idOrder, 'orderQuestionaire'));
|
||||
this.props.dispatch(fetchValidationComments(idOrder, idProcessStep, 'invalidQuestionnaireComment'));
|
||||
}
|
||||
|
||||
findById(orderPackage, idOrderPackagePair){
|
||||
const idPackage = idOrderPackagePair.split('-')[1];
|
||||
return orderPackage.idPackage === parseInt(idPackage, 10);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {customerDocuments, validationComments, orderPackages} = this.props;
|
||||
|
||||
return (
|
||||
<div id="validate-questionnaire" className="validate-questionnaire">
|
||||
{
|
||||
customerDocuments &&
|
||||
Object.keys(customerDocuments).map((idOrderPackagePair) =>
|
||||
<ValidateQuestionnaireItem
|
||||
customerDocuments={customerDocuments[idOrderPackagePair]}
|
||||
validationComments={validationComments && validationComments[idOrderPackagePair] ? validationComments[idOrderPackagePair] : []}
|
||||
orderPackage={orderPackages.find((orderPackage)=>{ return this.findById(orderPackage, idOrderPackagePair)})}
|
||||
key={'validate-questionnaire-' + idOrderPackagePair}/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
customerDocuments: state.processReducer.customerDocuments,
|
||||
validationComments: state.processReducer.validationComments,
|
||||
orderPackages: state.processReducer.orderInfo.packages
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(ValidateQuestionnaire);
|
||||
@@ -0,0 +1,99 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import {Row, Col} from 'reactstrap';
|
||||
import {reUploadOrderDocument, badFile} from '../../../../actions/orders/processActions';
|
||||
import {API_SERVER} from '../../../../config';
|
||||
import FileDownloader from '../../../../helpers/FileDownloader';
|
||||
import {orderTexts} from '../../../../constants/ordersConstants';
|
||||
|
||||
const fileHandler = new FileDownloader();
|
||||
|
||||
class ValidateQuestionnaireItem extends Component {
|
||||
downloadDocument(document){
|
||||
const fileUrl = `${API_SERVER}/utils/api/downloadFile?idDocument=${document.idDocument}&fileName=${document.documentName}.${document.extension}`
|
||||
const fileName = document.documentName + '.' + document.extension;
|
||||
fileHandler.download(fileUrl, fileName);
|
||||
}
|
||||
|
||||
uploadFile(idPackage, idOrder, idDocument,acceptedFiles, rejectedFiles) {
|
||||
if(acceptedFiles && acceptedFiles.length){
|
||||
const file = acceptedFiles[0];
|
||||
this.props.dispatch(reUploadOrderDocument(idPackage, idOrder, idDocument, file));
|
||||
}
|
||||
|
||||
if(rejectedFiles && rejectedFiles.length) {
|
||||
this.props.dispatch(badFile());
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {customerDocuments, validationComments, orderPackage} = this.props;
|
||||
|
||||
return (
|
||||
<div id="validate-questionnaire" className="validate-questionnaire">
|
||||
{
|
||||
customerDocuments &&
|
||||
<div>
|
||||
{orderPackage.packageName}
|
||||
{
|
||||
customerDocuments.map(document => <div key={'package-document-' + document.idDocument}>
|
||||
{
|
||||
document.validation === 'invalid'
|
||||
? <div className="package-document">
|
||||
<Row>
|
||||
<Col xl="7" lg="8">
|
||||
<div>
|
||||
<span className="document-link"
|
||||
onClick={() => {this.downloadDocument(document)}}>
|
||||
<i className={'fa fa-file'}></i> {document.documentName} ({document.extension}) {' '}
|
||||
</span>
|
||||
<span className="document-status">
|
||||
{document.validation.replace(/-/g,' ')} <div className={'status-icon ' + document.validation}></div>
|
||||
</span>
|
||||
</div>
|
||||
{
|
||||
(validationComments && validationComments.length > 0) &&
|
||||
<div>
|
||||
{validationComments.map((comment, key) => <div key={'step-comment-' + document.idDocument + '-' + key} className="step-comment">
|
||||
<div>{comment.user} - {comment.addDate}</div>
|
||||
<div>{comment.comment}</div>
|
||||
</div>)}
|
||||
</div>
|
||||
}
|
||||
</Col>
|
||||
<Col xl="5">
|
||||
<Dropzone className="upload-file-drop-zone"
|
||||
multiple={false}
|
||||
accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods"
|
||||
activeClassName="upload-file-accept"
|
||||
onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(document.idPackage, document.idOrder, document.idDocument, acceptedFiles, rejectedFiles)}}>
|
||||
<h5 className="drop-zone-text">{orderTexts.labels.SELECT_OR_DROP}</h5>
|
||||
</Dropzone>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
: <div className="package-document">
|
||||
<Row>
|
||||
<Col>
|
||||
<span className="document-link"
|
||||
onClick={() => {this.downloadDocument(document)}}>
|
||||
<i className={'fa fa-file'}></i> {document.documentName} ({document.extension}) {' '}
|
||||
</span>
|
||||
<span className="document-status">
|
||||
{document.validation.replace(/-/g,' ')} <div className={'status-icon ' + document.validation}></div>
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
}
|
||||
</div>)
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(ValidateQuestionnaireItem);
|
||||
Reference in New Issue
Block a user