110 lines
4.9 KiB
JavaScript
110 lines
4.9 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Col} from 'reactstrap';
|
|
import {uploadOrderDocument, badFile} from '../../../actions/cart/cartActions';
|
|
import Dropzone from 'react-dropzone';
|
|
import {API_SERVER} from '../../../config';
|
|
import FileDownloader from '../../../helpers/FileDownloader';
|
|
import {cartTexts} from '../../../constants/cartConstants';
|
|
import {getDocumentIcon} from '../../../helpers/DocumentHelper';
|
|
import classnames from 'classnames';
|
|
|
|
const fileHandler = new FileDownloader();
|
|
const documentTypes = {
|
|
'order_questionaire' : 'Customer Questionnaire',
|
|
'order_agreement' : 'Customer Agreement'
|
|
};
|
|
|
|
class CartUploadDocument extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.uploadFile = this.uploadFile.bind(this);
|
|
}
|
|
|
|
uploadFile(packageCartKey, idDocumentType,acceptedFiles, rejectedFiles, packages){
|
|
const self = this;
|
|
|
|
acceptedFiles.forEach(file => {
|
|
self.props.dispatch(uploadOrderDocument(packageCartKey, idDocumentType, file, packages));
|
|
});
|
|
|
|
if(rejectedFiles && rejectedFiles.length) {
|
|
this.props.dispatch(badFile());
|
|
}
|
|
}
|
|
|
|
downloadDocument(document){
|
|
fileHandler.download(
|
|
`${API_SERVER}/wp-json/wiaas/cart/items/${this.props.cartItem.key}/documents/${this.props.idDocumentType}?document_key=${document.key}`,
|
|
`${document.name}.${document.extension}`);
|
|
}
|
|
|
|
downloadTemplate(document) {
|
|
fileHandler.download(
|
|
`${API_SERVER}/wp-json/wiaas/documents?document_id=${document.id}`,
|
|
`${document.name}.${document.extension}`);
|
|
}
|
|
|
|
render() {
|
|
const {idDocumentType, cartItem, uploadedDocument, templateDocument, packages} = this.props;
|
|
|
|
return (<Col lg="6">
|
|
{
|
|
templateDocument &&
|
|
<div>
|
|
<div className="cart-template">
|
|
<p className="cart-subtitle">{documentTypes[idDocumentType]} {cartTexts.labels.TEMPLATE}:</p>
|
|
<p className="document-link" onClick={() => {this.downloadTemplate(templateDocument)}}>
|
|
<i className={`fa fa-${getDocumentIcon(templateDocument.extension)}`} aria-hidden="true"></i> {templateDocument.name}
|
|
</p>
|
|
</div>
|
|
|
|
<Dropzone className={classnames('upload-file-drop-zone', { 'pending-upload': !uploadedDocument })}
|
|
accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods, .zip"
|
|
onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(cartItem.key, idDocumentType, acceptedFiles, rejectedFiles, packages)}}>
|
|
{
|
|
uploadedDocument
|
|
? (
|
|
<div>
|
|
<h1 className="drop-zone-icon">
|
|
<i className="fa fa-upload"></i>
|
|
</h1>
|
|
<p className="drop-zone-text">
|
|
Drag and drop or click to replace <strong>{uploadedDocument.name}.{uploadedDocument.extension}</strong>
|
|
</p>
|
|
<p className="drop-zone-text">To upload multiple files, please pack the files to one zip-file and upload the zip-file</p>
|
|
</div>
|
|
)
|
|
: (
|
|
<div>
|
|
<h1 className="drop-zone-icon pending-upload">
|
|
<i className="fa fa-upload"></i>
|
|
</h1>
|
|
<p className="drop-zone-text">
|
|
Drag and drop or click to upload file
|
|
</p>
|
|
<p className="drop-zone-text">To upload multiple files, please pack the files to one zip-file and upload the zip-file</p>
|
|
</div>
|
|
)
|
|
}
|
|
</Dropzone>
|
|
{
|
|
uploadedDocument &&
|
|
<div>
|
|
<span className="document-link" onClick={() => {this.downloadDocument(uploadedDocument)}}>
|
|
<strong>
|
|
<i className={`fa fa-${getDocumentIcon(uploadedDocument.extension)}`} aria-hidden="true"></i> {uploadedDocument.name}
|
|
</strong>
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
</Col>);
|
|
}
|
|
}
|
|
|
|
export default connect()(CartUploadDocument);
|