1385 lines
36 KiB
JavaScript
1385 lines
36 KiB
JavaScript
import React from "react";
|
||
import numeral from "numeral";
|
||
import moment from "moment";
|
||
import { eachLimit, eachSeries } from "async";
|
||
import { SpinnerCircular } from "spinners-react";
|
||
|
||
import FileDropzoneDeals from "../FileDropzoneDeals";
|
||
import EDOSign from "../../components/EDOSign";
|
||
|
||
import { acceptDealOffers, attachDealDocument, docEDOCancel, docEDOStatus, downloadDealOffer, getFile, removeDealDocument, sendDealDocuments, signDownloadFile, signGetFileContractProject } from "../../actions";
|
||
|
||
class Step extends React.Component
|
||
{
|
||
componentDidMount()
|
||
{
|
||
if(this.status === this.props.statuscode_id)
|
||
{
|
||
this.setState({ open: true });
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if(this.props.statuscode_id !== prevProps.statuscode_id)
|
||
{
|
||
if(this.status === this.props.statuscode_id)
|
||
{
|
||
this.setState({ open: true });
|
||
}
|
||
else
|
||
{
|
||
this.setState({ open: false });
|
||
}
|
||
}
|
||
}
|
||
|
||
_handle_onSwitch = () =>
|
||
{
|
||
const { statuscode_id } = this.props;
|
||
this.setState({ open: !this.state.open ? true : false });
|
||
}
|
||
|
||
_renderHeader = (title) =>
|
||
{
|
||
const { statuscode_id } = this.props;
|
||
const { open } = this.state;
|
||
|
||
return (
|
||
<div className="status_header" style={statuscode_id >= this.status ? { position: "relative", } : { position: "relative", cursor: "inherit" }} onClick={ statuscode_id >= this.status ? this._handle_onSwitch : () => {} }>
|
||
{ this.status === statuscode_id && ( <div className="background"></div> )}
|
||
<i className={`status_${ this.status } ${ statuscode_id < this.status ? "inactive" : "" }`}></i>
|
||
<p>{ title }</p>
|
||
{ statuscode_id >= this.status && (
|
||
<div className="button_arrow">
|
||
<div className={`icon ${ open ? "up" : "down" }`}></div>
|
||
</div>
|
||
) }
|
||
{ this._renderHeaderButtons !== undefined && this._renderHeaderButtons() }
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class Offers extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
loading: false,
|
||
checked: [],
|
||
};
|
||
this.status = 100;
|
||
}
|
||
|
||
_handle_onCheckOffer = (quote_number) =>
|
||
{
|
||
const checked = [ ...this.state.checked ];
|
||
let is_new = true;
|
||
|
||
if(checked.indexOf(quote_number) > -1)
|
||
{
|
||
checked.splice(checked.indexOf(quote_number), 1);
|
||
is_new = false;
|
||
}
|
||
|
||
if(is_new)
|
||
{
|
||
checked.push(quote_number);
|
||
}
|
||
|
||
this.setState({ checked });
|
||
}
|
||
|
||
_handle_onOffer = (quote_number) =>
|
||
{
|
||
downloadDealOffer({ quote_number, filename: `ЛК Эволюция КП №${ quote_number }.pdf` })
|
||
.then(() => {})
|
||
.catch(() => {});
|
||
}
|
||
|
||
_handle_onSend = (event) =>
|
||
{
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
const { checked } = this.state;
|
||
const { dealSelected, onDealsUpdate } = this.props;
|
||
const offers = [];
|
||
|
||
for(let i in checked)
|
||
{
|
||
offers.push({
|
||
quote_number: checked[i],
|
||
agreed: true,
|
||
});
|
||
}
|
||
|
||
acceptDealOffers({ deal_id: dealSelected, offers })
|
||
.then(() =>
|
||
{
|
||
onDealsUpdate()
|
||
.then(() =>
|
||
{
|
||
this.setState({ loading: false });
|
||
})
|
||
.catch(() =>
|
||
{
|
||
this.setState({ loading: false });
|
||
});
|
||
})
|
||
});
|
||
}
|
||
|
||
_renderHeaderButtons = () =>
|
||
{
|
||
const { open, checked, loading } = this.state;
|
||
|
||
if(!loading && open && checked.length > 0)
|
||
{
|
||
return (
|
||
<div className="buttons">
|
||
<button className="button button button-blue" onClick={ this._handle_onSend }>Согласовать</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected, offers } = this.props;
|
||
const { checked, open, loading } = this.state;
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Выбор КП ") }
|
||
<div className="wrap" style={{ display: open ? "block" : "none" }}>
|
||
{ offers === undefined || loading ? (
|
||
<div style={{ minHeight: 100, display: "flex", justifyContent: "center", alignItems: "center", }}>
|
||
<SpinnerCircular size={ 50 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||
</div>
|
||
) : (
|
||
<>
|
||
{ offers.length > 0 ? (
|
||
<table className="deal_offers_table">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>№</th>
|
||
<th>Стоимость</th>
|
||
<th>Первый платеж, ₽</th>
|
||
<th>Первый платеж, %</th>
|
||
<th>Марка</th>
|
||
<th>Модель</th>
|
||
<th>Объектов лизинга</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{ offers.map((offer, offer_index) =>
|
||
{
|
||
console.log({ offer });
|
||
|
||
return (
|
||
<tr key={ offer_index }>
|
||
{ offer.quote_status ? (
|
||
<td>
|
||
<div className="form_field checkbox">
|
||
<input type="checkbox" name="row" id={`offer_${ offer.quote_number }`} checked={ checked.indexOf(offer.quote_number) > -1 } onChange={ () => { this._handle_onCheckOffer(offer.quote_number) } }/>
|
||
<label htmlFor={`offer_${ offer.quote_number }`}></label>
|
||
</div>
|
||
</td>
|
||
) : (
|
||
<td></td>
|
||
)}
|
||
<td>{ offer_index + 1 }</td>
|
||
<td>{ numeral(offer.price).format(' ., ') } ₽</td>
|
||
<td>{ numeral(offer.first_payment_rub).format(' ., ') } ₽</td>
|
||
<td>{ offer.first_payment_perc }%</td>
|
||
<td>{ offer.brand_name }</td>
|
||
<td>{ offer.model_name }</td>
|
||
<td>{ offer.object_count }</td>
|
||
<td>
|
||
<div className="docs_list" style={{ cursor: "pointer" }} onClick={ () => this._handle_onOffer(offer.quote_number) }>
|
||
<div className="row">
|
||
<div className="small-icon">
|
||
<p className="doc_name i-pdf">
|
||
КП
|
||
<span>№{ offer.quote_number }</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
)
|
||
} ) }
|
||
</tbody>
|
||
</table>
|
||
) : (
|
||
<p>Нет предложений</p>
|
||
) }
|
||
</>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class FinancialProgram extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
};
|
||
this.status = 101;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected } = this.props;
|
||
const { open } = this.state;
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Программа финансирования") }
|
||
<div className="wrap" style={{ display: open ? "block" : "none" }}>
|
||
<div className="single_text">
|
||
{ statuscode_id === this.status ? (
|
||
<p>Идёт подбор оптимальной программы финансирования</p>
|
||
) : (
|
||
<p>Программа финансирования выбрана</p>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class DocumentsForm extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
uploaded: {},
|
||
uploading: false,
|
||
completed: false,
|
||
loading: true,
|
||
};
|
||
this.status = 102;
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
if(this.status === this.props.statuscode_id)
|
||
{
|
||
this.setState({ open: true, });
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if(this.props.statuscode_id !== prevProps.statuscode_id)
|
||
{
|
||
if(this.status === this.props.statuscode_id)
|
||
{
|
||
this.setState({ open: true });
|
||
}
|
||
else
|
||
{
|
||
this.setState({ open: false });
|
||
}
|
||
}
|
||
|
||
if(prevProps.uploaded !== this.props.uploaded)
|
||
{
|
||
this.setState({ uploaded: this.props.uploaded, loading: false }, () =>
|
||
{
|
||
const completed = this._checkFilesCompleted();
|
||
this.setState({ completed });
|
||
});
|
||
}
|
||
}
|
||
|
||
_handle_onSendFiles = (event) =>
|
||
{
|
||
event.stopPropagation();
|
||
// event.preventDefault();
|
||
const { dealSelected, onDealsUpdate } = this.props;
|
||
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
sendDealDocuments({ deal_id: dealSelected })
|
||
.then(() =>
|
||
{
|
||
onDealsUpdate();
|
||
})
|
||
.catch(() =>
|
||
{
|
||
|
||
});
|
||
})
|
||
/*
|
||
const { files } = this.state;
|
||
const files_array = [];
|
||
|
||
for(let g in files)
|
||
{
|
||
for(let f in files[g])
|
||
{
|
||
files_array.push(files[g][f])
|
||
}
|
||
}
|
||
|
||
this.setState({ uploading: true }, () =>
|
||
{
|
||
eachLimit(files_array, 1, (file, callback) =>
|
||
{
|
||
const { opp_number } = this.props;
|
||
|
||
const payload = {
|
||
deal_id: opp_number,
|
||
document_id: file.group,
|
||
filename: file.name,
|
||
file,
|
||
};
|
||
|
||
attachDealDocument(payload)
|
||
.then(() =>
|
||
{
|
||
this._onSendFileStats(file.group, file.index);
|
||
|
||
callback();
|
||
}, 1000)
|
||
}, () =>
|
||
{
|
||
this.setState({ uploading: false }, () =>
|
||
{
|
||
this._checkFilesCompleted();
|
||
onDealsUpdate();
|
||
});
|
||
});
|
||
});
|
||
*/
|
||
}
|
||
|
||
_onSendFileStats = (group, index) =>
|
||
{
|
||
return new Promise((resolve) =>
|
||
{
|
||
const uploaded = { ...this.state.uploaded };
|
||
|
||
uploaded[group].files[index].sent = true;
|
||
|
||
this.setState({ uploaded }, () =>
|
||
{
|
||
resolve();
|
||
});
|
||
})
|
||
}
|
||
|
||
_handle_onAddFile = (document_id, files, update) =>
|
||
{
|
||
const existed_files = { ...this.state.uploaded };
|
||
console.log("_handle_onAddFile", { existed_files });
|
||
const document_files = existed_files[ document_id ] === undefined ? [] : existed_files[ document_id ].files;
|
||
|
||
if(existed_files[ document_id ] === undefined)
|
||
{
|
||
existed_files[ document_id ] = {
|
||
sent: false,
|
||
files: [],
|
||
};
|
||
}
|
||
|
||
for(let nf in files)
|
||
{
|
||
let e = false;
|
||
for(let ef in document_files)
|
||
{
|
||
if(document_files[ef].name === files[nf].name) { e = true; }
|
||
}
|
||
|
||
if(!e)
|
||
{
|
||
files[nf].index = nf;
|
||
files[nf].group = document_id;
|
||
files[nf].sent = false;
|
||
files[nf].update = update;
|
||
|
||
document_files.push(files[nf]);
|
||
}
|
||
|
||
existed_files[ document_id ].sent = false;
|
||
existed_files[ document_id ].files = document_files;
|
||
}
|
||
|
||
this.setState({ uploaded: existed_files, uploading: true }, () =>
|
||
{
|
||
const { opp_number } = this.props;
|
||
|
||
eachSeries(files, (file, callback) =>
|
||
{
|
||
const payload = {
|
||
deal_id: opp_number,
|
||
document_id: file.group,
|
||
filename: file.name,
|
||
index: file.index,
|
||
lastModified: file.lastModified,
|
||
type: file.type,
|
||
file,
|
||
update,
|
||
};
|
||
|
||
attachDealDocument(payload)
|
||
.then(async () =>
|
||
{
|
||
await this._onSendFileStats(document_id, file.index);
|
||
callback();
|
||
}, 1000)
|
||
}, () =>
|
||
{
|
||
const completed = this._checkFilesCompleted();
|
||
this.setState({ uploading: false, completed });
|
||
});
|
||
});
|
||
}
|
||
|
||
_handle_onDeleteFile = (document_id, file) =>
|
||
{
|
||
const uploaded = { ...this.state.uploaded };
|
||
const { opp_number } = this.props;
|
||
|
||
const list = [];
|
||
|
||
for(let i in uploaded[document_id].files)
|
||
{
|
||
if(uploaded[document_id].files[i].name !== file.name)
|
||
{
|
||
list.push(uploaded[document_id].files[i]);
|
||
}
|
||
}
|
||
|
||
if(list.length > 0)
|
||
{
|
||
uploaded[document_id].files = list;
|
||
}
|
||
else
|
||
{
|
||
delete uploaded[document_id];
|
||
}
|
||
|
||
this.setState({ uploaded }, () =>
|
||
{
|
||
const completed = this._checkFilesCompleted();
|
||
this.setState({ completed }, () =>
|
||
{
|
||
removeDealDocument({ deal_id: opp_number, document_id });
|
||
});
|
||
});
|
||
}
|
||
|
||
_handle_onQuestionnaire = (event) =>
|
||
{
|
||
const { onQuestionnaire } = this.props;
|
||
|
||
event.preventDefault();
|
||
onQuestionnaire();
|
||
}
|
||
|
||
_checkFilesCompleted = () =>
|
||
{
|
||
// const documents_length = this.props.documents.length;
|
||
// const files_length = Object.keys(this.state.files).length;
|
||
// const c = files_length >= documents_length ? true : false;
|
||
|
||
const { uploaded } = this.state;
|
||
const { documents } = this.props;
|
||
|
||
let c = true;
|
||
if(documents !== undefined)
|
||
{
|
||
for(let g in documents)
|
||
{
|
||
const group = documents[g].doc_id;
|
||
|
||
if(uploaded[group] === undefined || uploaded[group].files.length === 0)
|
||
{
|
||
c = false;
|
||
break;
|
||
}
|
||
else
|
||
{
|
||
for(let f in uploaded[group].files)
|
||
{
|
||
if(!uploaded[group].files[f].sent)
|
||
{
|
||
c = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
c = false;
|
||
}
|
||
|
||
return c;
|
||
}
|
||
|
||
_renderHeaderButtons = () =>
|
||
{
|
||
const { open, uploading, completed, loading, } = this.state;
|
||
const { statuscode_id } = this.props;
|
||
|
||
if(open && !uploading && !loading)
|
||
{
|
||
if(this.status === statuscode_id)
|
||
{
|
||
return (
|
||
<div className="buttons">
|
||
<button className="button button button-blue" onClick={ this._handle_onSendFiles } disabled={ completed ? false : true }>Отправить документы</button>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected, documents, questionnaire_status, } = this.props;
|
||
const { open, uploaded, uploading, loading } = this.state;
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Сборка пакета документов") }
|
||
<div className="wrap form" style={{ display: open ? "block" : "none" }}>
|
||
{ loading ? (
|
||
<div style={{ minHeight: 100, display: "flex", justifyContent: "center", alignItems: "center", }}>
|
||
<SpinnerCircular size={ 50 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="block">
|
||
<div className="left">
|
||
<p><b>Анкета клиента:</b></p>
|
||
</div>
|
||
<div className="right">
|
||
{ questionnaire_status === "need_to_fill" ? (
|
||
<div className="message alert">
|
||
<p>Требуется обновить данные в анкете</p>
|
||
<button className="button button-blue" onClick={ this._handle_onQuestionnaire }>Актуализировать данные</button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{ questionnaire_status !== "up_to_date" ? (
|
||
<div className="message wait">
|
||
<p>Проводится проверка анкеты Вашей организации</p>
|
||
</div>
|
||
) : (
|
||
<div className="message ok">
|
||
<p>Вам не требуется актуализация данных анкеты Клиента</p>
|
||
</div>
|
||
) }
|
||
</>
|
||
) }
|
||
</div>
|
||
</div>
|
||
{ documents === undefined ? (
|
||
<></>
|
||
) : (
|
||
<>
|
||
{ documents.map((document, index) =>
|
||
{
|
||
console.log({ document });
|
||
return (
|
||
<div className="block deal_documents_form_group" key={ index }>
|
||
<div className="left">
|
||
<p><b><span>{ document.name }</span>:</b></p>
|
||
</div>
|
||
<div className="right">
|
||
{ document.add ? (
|
||
<FileDropzoneDeals
|
||
uploading={ uploading }
|
||
uploaded={ uploaded[ document.doc_id ] !== undefined ? uploaded[ document.doc_id ] : { sent: false, files: [] } }
|
||
onAddFile={ (file, update) => { this._handle_onAddFile(document.doc_id, file, update) } }
|
||
onDeleteFile={ (file) => this._handle_onDeleteFile(document.doc_id, file) }
|
||
document={ document }
|
||
/>
|
||
) : (
|
||
<>
|
||
{ document.check === "Документ принят" ? (
|
||
<div className="message ok">
|
||
<p>{ document.check }</p>
|
||
</div>
|
||
) : (
|
||
<div className="message wait">
|
||
<p>{ document.check }</p>
|
||
</div>
|
||
) }
|
||
</>
|
||
) }
|
||
</div>
|
||
</div>
|
||
)
|
||
} ) }
|
||
</>
|
||
) }
|
||
{/*}
|
||
<div className="message documents">
|
||
<div className="doc_list">
|
||
</div>
|
||
<p>Документы, отправленные Вами принадлежат другой организации бла бла коммент от менеджера</p>
|
||
</div>
|
||
{*/}
|
||
</>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class StatusDocumentsCheck extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
};
|
||
this.status = 103;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected } = this.props;
|
||
const { open } = this.state;
|
||
|
||
return (
|
||
<div className={`${ statuscode_id === this.status ? "current" : statuscode_id > this.status ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Проверка документов") }
|
||
<div className="wrap" style={{ display: open ? "block" : "none" }}>
|
||
<div className="single_text">
|
||
{ statuscode_id === this.status ? (
|
||
<p>Идёт проверка предоставленных документов</p>
|
||
) : (
|
||
<p>Документы проверены</p>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class StatusDecisionMaking extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
};
|
||
this.status = 104;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected } = this.props;
|
||
const { open } = this.state;
|
||
|
||
if(statuscode_id === 105)
|
||
{
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : (statuscode_id > this.status) ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Принятие решения по сделке") }
|
||
<div className="wrap" style={{ display: open ? "block" : "none" }}>
|
||
<div className="single_text">
|
||
{ this.status === statuscode_id ? (
|
||
<p>Принятие решение о финансировании</p>
|
||
) : (
|
||
<p>Поздравляем! Принято положительное решение по сделке.</p>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class StatusDecisionRefuse extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
};
|
||
this.status = 105;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected } = this.props;
|
||
const { open } = this.state;
|
||
|
||
if(statuscode_id !== this.status)
|
||
{
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : (statuscode_id > this.status) ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Требуется изменение параметров") }
|
||
<div className="wrap" style={{ display: open ? "block" : "none" }}>
|
||
<div className="single_text">
|
||
<p>Продолжение оформления заблокировано</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class StatusPositiveDecision extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
};
|
||
this.status = 106;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected } = this.props;
|
||
const { open } = this.state;
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Принято положительное решение") }
|
||
<div className="wrap" style={{ display: open ? "block" : "none" }}>
|
||
<div className="single_text">
|
||
{ statuscode_id === this.status ? (
|
||
<p>Идёт подготовка необходимых документов для заключения сделки</p>
|
||
) : (
|
||
<p>Документы подготовлены</p>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class SignPlannedContract extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
loading: true,
|
||
loading_download_file: false,
|
||
loading_cancel_sign: false,
|
||
disabled: false,
|
||
status: undefined,
|
||
contract_entity_id: undefined,
|
||
};
|
||
}
|
||
|
||
async componentDidMount()
|
||
{
|
||
const { contract } = this.props;
|
||
console.log("SignPlannedContract", "CDM", { props: this.props });
|
||
|
||
if(contract.sign_type === "EDO")
|
||
{
|
||
const status_result = await docEDOStatus({ contract_number: contract.name });
|
||
console.log("SignPlannedContract", "CDM", { status_result });
|
||
this.setState({ contract_entity_id: status_result.edoid, status: status_result.status, loading: false });
|
||
}
|
||
else
|
||
{
|
||
this.setState({ loading: false });
|
||
}
|
||
}
|
||
|
||
_handle_downloadFile = (edo) =>
|
||
{
|
||
console.log("_handle_downloadFile");
|
||
|
||
const { contract } = this.props;
|
||
//const { contract_entity_id } = this.state;
|
||
|
||
this.setState({ disabled: true, loading_download_file: true }, async () =>
|
||
{
|
||
const link_result = await signGetFileContractProject({
|
||
contract_number: contract.name
|
||
});
|
||
|
||
console.log("_downloadFile", { link_result });
|
||
await getFile({ id: link_result.url, filename: `ЛК ЭВОЛЮЦИЯ ${ contract.name }.${ link_result.extension }` });
|
||
this.setState({ disabled: false, loading_download_file: false });
|
||
|
||
/*
|
||
const wmdoc_result = await signDownloadFile({
|
||
payload: { entity_name: "evo_contract", entity_id: contract_entity_id, sign_type: edo ? "EDO" : "Paper", evo_id: "144", },
|
||
filename: `ЛК ЭВОЛЮЦИЯ ${ contract.name }.pdf`,
|
||
});
|
||
console.log({ wmdoc_result });
|
||
*/
|
||
});
|
||
}
|
||
|
||
_handle_cancelEDOSign = () =>
|
||
{
|
||
console.log("_handle_cancelEDOSign");
|
||
const { contract, onDealContractsUpdate } = this.props;
|
||
|
||
this.setState({ disabled: true, loading_cancel_sign: true }, async () =>
|
||
{
|
||
await docEDOCancel({ contract_number: contract.name, doc_type_id: contract.sign_type === "EDO" ? "144" : "60" });
|
||
setTimeout(() => {
|
||
onDealContractsUpdate();
|
||
// this.setState({ disabled: false, loading_cancel_sign: false });
|
||
}, 1000);
|
||
});
|
||
}
|
||
|
||
_handle_sendToEDO = () =>
|
||
{
|
||
console.log("_handle_sendToEDO");
|
||
}
|
||
|
||
_handle_goToEDO = () =>
|
||
{
|
||
console.log("_handle_goToEDO");
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, contract, } = this.props;
|
||
const { status, loading, disabled, loading_download_file, loading_cancel_sign } = this.state;
|
||
|
||
return (
|
||
<div className="document deal_contract_sign_item">
|
||
<div className="icon">
|
||
<span className="extension">PDF</span>
|
||
</div>
|
||
<div className="title">
|
||
<p>{ contract.name }</p>
|
||
<div className="description">
|
||
<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
|
||
<span>{ contract.brand_name }</span>
|
||
<span>{ contract.model_name }</span>
|
||
</div>
|
||
</div>
|
||
{ loading ? (
|
||
<SpinnerCircular size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" />
|
||
) : (
|
||
<>
|
||
{ contract.sign_type === "PAPER" && (
|
||
<div className="actions" style={{ justifyContent: "flex-end" }}>
|
||
<button className="button blue" disabled={ disabled } style={{ minWidth: "230px" }} onClick={ () => this._handle_downloadFile(false) }>{ loading_download_file ? (
|
||
<SpinnerCircular size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" />
|
||
) : ("Скачать файл для подписания") }</button>
|
||
</div>
|
||
) }
|
||
{ contract.sign_type === "EDO" && (
|
||
<div className="actions">
|
||
{ status < 3 && (
|
||
<button className="button blue" disabled={ disabled } style={{ minWidth: "130px" }} onClick={ () => this._handle_downloadFile(true) }>{ loading_download_file ? (
|
||
<SpinnerCircular size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" />
|
||
) : ("Скачать проект") }</button>
|
||
) }
|
||
{ status < 3 && (
|
||
<button className="button blue" disabled={ disabled } style={{ minWidth: "175px" }} onClick={ () => this._handle_cancelEDOSign() }>{ loading_cancel_sign ? (
|
||
<SpinnerCircular size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" />
|
||
) : ("Отменить подписание") }</button>
|
||
)}
|
||
{ status < 3 && (
|
||
<button className="button blue" disabled={ disabled } style={{ minWidth: "145px" }} onClick={ () => this._handle_sendToEDO() }>Отправить в ЭДО</button>
|
||
) }
|
||
{ status === 3 && (
|
||
<button className="button blue" style={{ minWidth: "145px" }} onClick={ () => this._handle_goToEDO() }>Перейти в ЭДО</button>
|
||
) }
|
||
</div>
|
||
) }
|
||
</>
|
||
) }
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
class LeasingRegistration extends Step
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
open: false,
|
||
/*
|
||
checked: {
|
||
prepared_contracts: [],
|
||
signing_plan_contracts: [],
|
||
signing_fact_contracts: [],
|
||
issued_contracts: [],
|
||
annulled_contracts: [],
|
||
},
|
||
*/
|
||
checked: [],
|
||
edo: false,
|
||
};
|
||
this.status = 107;
|
||
this.types = [
|
||
{
|
||
title: "Подготовлено",
|
||
key: "prepared_contracts",
|
||
},
|
||
{
|
||
title: "К подписанию",
|
||
key: "signing_plan_contracts",
|
||
},
|
||
{
|
||
title: "Подписано",
|
||
key: "signing_fact_contracts",
|
||
},
|
||
{
|
||
title: "Выдано",
|
||
key: "issued_contracts",
|
||
},
|
||
{
|
||
title: "Анулировано",
|
||
key: "annulled_contracts",
|
||
},
|
||
];
|
||
this.container_ref = React.createRef();
|
||
}
|
||
|
||
_handle_onScrollToContainer = () =>
|
||
{
|
||
const element = this.container_ref.current;
|
||
const y = (element.getBoundingClientRect().top + window.scrollY - 160);
|
||
window.scrollTo({top: y, behavior: 'smooth'});
|
||
}
|
||
|
||
_handle_onPreparedContract = (contract) =>
|
||
{
|
||
const checked = [ ...this.state.checked ];
|
||
|
||
if(checked.indexOf(contract) > -1)
|
||
{
|
||
checked.splice(checked.indexOf(contract), 1);
|
||
}
|
||
else
|
||
{
|
||
checked.push(contract);
|
||
}
|
||
|
||
this.setState({ checked });
|
||
}
|
||
|
||
_handle_onSignEDO = () =>
|
||
{
|
||
this.setState({ edo: true }, () =>
|
||
{
|
||
this._handle_onScrollToContainer();
|
||
});
|
||
}
|
||
|
||
_onEDOCancel = (clean = false) =>
|
||
{
|
||
if(clean)
|
||
{
|
||
this.setState({ edo: false, checked: [] });
|
||
}
|
||
else
|
||
{
|
||
this.setState({ edo: false });
|
||
}
|
||
}
|
||
|
||
_onEDOCancel = () =>
|
||
{
|
||
const { onDealContractsUpdate } = this.props;
|
||
|
||
this.setState({ edo: false }, () =>
|
||
{
|
||
onDealContractsUpdate();
|
||
});
|
||
}
|
||
|
||
_getEDODocuments = () =>
|
||
{
|
||
const contracts = this.props.contracts['prepared_contracts'];
|
||
const { checked } = this.state;
|
||
const documents = [];
|
||
|
||
for(let i in contracts)
|
||
{
|
||
if(checked.indexOf(contracts[i].name) > -1)
|
||
{
|
||
documents.push({
|
||
id: contracts[i].name,
|
||
name: `Договор № ${ contracts[i].name }`,
|
||
date: contracts[i].date,
|
||
type: `${ contracts[i].brand_name } ${ contracts[i].model_name }`,
|
||
extension: 'pdf',
|
||
})
|
||
}
|
||
}
|
||
|
||
return documents;
|
||
}
|
||
|
||
_render_preparedContracts = () =>
|
||
{
|
||
const { edo, checked } = this.state;
|
||
//const checked = this.state.checked.prepared_contracts;
|
||
|
||
const contracts = this.props.contracts['prepared_contracts'];
|
||
console.log("_render_preparedContracts", { contracts });
|
||
|
||
if(edo)
|
||
{
|
||
return (
|
||
<EDOSign
|
||
documents={ this._getEDODocuments() }
|
||
onCancel={ this._onEDOCancel }
|
||
onFinish={ this._onEDOFinish }
|
||
/>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="block-column">
|
||
<div className="docs_list acts_list-checkbox medium-icon">
|
||
{ contracts.length > 0 ?
|
||
contracts.map((contract, index) => (
|
||
<div className="row" key={ index }>
|
||
<div className="doc_name i-doc i-medium blue deals_contracts" style={{ alignItems: "flex-start" }}>
|
||
<input type="checkbox" name="" id={ `contract_${ index }` } checked={ checked.indexOf(contract.name) > -1 ? true : false } onChange={ () => { this._handle_onPreparedContract(contract.name) } }/>
|
||
<label htmlFor={ `contract_${ index }` }>№{ contract.name }</label>
|
||
<div className="info">
|
||
<span>{ moment(contract.date).format('MM.DD.YYYY') }</span>
|
||
<span>{ contract.brand_name }</span>
|
||
<span>{ contract.model_name }</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<p className="empty">Нет договоров</p>
|
||
) }
|
||
</div>
|
||
{ contracts.length > 0 &&
|
||
(
|
||
<div className="block_footer_btn">
|
||
<button className="button button-blue" onClick={ this._handle_onSignEDO } disabled={ checked.length > 0 ? false : true }>Подписать в ЭДО</button>
|
||
<button className="button button-blue" disabled={ checked.length > 0 ? false : true }>Подписать в бумажном виде</button>
|
||
</div>
|
||
) }
|
||
</div>
|
||
)
|
||
}
|
||
|
||
_render_signingPlanContracts = () =>
|
||
{
|
||
const contracts = this.props.contracts['signing_plan_contracts'];
|
||
const { onDealContractsUpdate } = this.props;
|
||
console.log("_render_signingPlanContracts", { contracts });
|
||
|
||
return (
|
||
<div className="documents deal_contract_sign_list">
|
||
{ contracts.length > 0 ?
|
||
contracts.map((contract, index) => (
|
||
<SignPlannedContract
|
||
key={ `SignPlannedContract_${ contract.name }` }
|
||
index={ index }
|
||
contract={ contract }
|
||
onDealContractsUpdate={ onDealContractsUpdate }
|
||
/>
|
||
)
|
||
) : (
|
||
<p className="empty">Нет договоров</p>
|
||
) }
|
||
</div>
|
||
)
|
||
}
|
||
|
||
_render_signingFactContracts = () =>
|
||
{
|
||
const contracts = this.props.contracts['signing_fact_contracts'];
|
||
console.log("_render_signingFactContracts", { contracts });
|
||
|
||
return (
|
||
<div className="documents">
|
||
{ contracts.length > 0 ?
|
||
contracts.map((contract, index) => (
|
||
<div className="document" key={ index }>
|
||
<div className="icon">
|
||
<span className="extension">PDF</span>
|
||
</div>
|
||
<div className="title">
|
||
<p>{ contract.name }</p>
|
||
<div className="description">
|
||
<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
|
||
<span>{ contract.brand_name }</span>
|
||
<span>{ contract.model_name }</span>
|
||
</div>
|
||
</div>
|
||
<div className="actions wide">
|
||
<div className="status">
|
||
<div className="status_icon"></div>
|
||
<span>{ contract.statuscode_name }</span>
|
||
</div>
|
||
<button className="button blue">Скачать</button>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<p className="empty">Нет договоров</p>
|
||
) }
|
||
</div>
|
||
)
|
||
}
|
||
|
||
_render_issuedContracts = () =>
|
||
{
|
||
const contracts = this.props.contracts['issued_contracts'];
|
||
console.log("_render_issuedContracts", { contracts });
|
||
|
||
return (
|
||
<div className="documents">
|
||
{ contracts.length > 0 ?
|
||
contracts.map((contract, index) => (
|
||
<div className="document" key={ index }>
|
||
<div className="icon">
|
||
<span className="extension">PDF</span>
|
||
</div>
|
||
<div className="title">
|
||
<p>{ contract.name }</p>
|
||
<div className="description">
|
||
<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
|
||
<span>{ contract.brand_name }</span>
|
||
<span>{ contract.model_name }</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<p className="empty">Нет договоров</p>
|
||
) }
|
||
</div>
|
||
)
|
||
}
|
||
|
||
_render_annuledContracts = () =>
|
||
{
|
||
const contracts = this.props.contracts['annulled_contracts'];
|
||
console.log("_render_annuledContracts", { contracts });
|
||
|
||
return (
|
||
<div className="documents">
|
||
{ contracts.length > 0 ?
|
||
contracts.map((contract, index) => (
|
||
<div className="document" key={ index }>
|
||
<div className="icon">
|
||
<span className="extension">PDF</span>
|
||
</div>
|
||
<div className="title">
|
||
<p>{ contract.name }</p>
|
||
<div className="description">
|
||
<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
|
||
<span>{ contract.brand_name }</span>
|
||
<span>{ contract.model_name }</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<p className="empty">Нет договоров</p>
|
||
) }
|
||
</div>
|
||
)
|
||
}
|
||
|
||
_render_contracts = (type) =>
|
||
{
|
||
const { contracts } = this.props;
|
||
|
||
if(contracts !== undefined)
|
||
{
|
||
switch (type)
|
||
{
|
||
case "prepared_contracts":
|
||
{
|
||
return this._render_preparedContracts();
|
||
}
|
||
|
||
case "signing_plan_contracts":
|
||
{
|
||
return this._render_signingPlanContracts();
|
||
}
|
||
|
||
case "signing_fact_contracts":
|
||
{
|
||
return this._render_signingFactContracts();
|
||
}
|
||
|
||
case "issued_contracts":
|
||
{
|
||
return this._render_issuedContracts();
|
||
}
|
||
|
||
case "annulled_contracts":
|
||
{
|
||
return this._render_annuledContracts();
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
return null;
|
||
}
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, statuscode_id, dealSelected } = this.props;
|
||
const { open, edo } = this.state;
|
||
|
||
return (
|
||
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`} ref={ this.container_ref }>
|
||
<p>№ { dealSelected }</p>
|
||
<span></span>
|
||
<div className="status_body">
|
||
{ this._renderHeader("Оформление лизинга") }
|
||
<div className="wrap form contracts" style={{ display: open ? "block" : "none" }}>
|
||
{ this.props.contracts === undefined ? (
|
||
<div style={{ minHeight: 200, display: "flex", justifyContent: "center", alignItems: "center", }}>
|
||
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||
</div>
|
||
) : (
|
||
<>
|
||
{ this.types.map((type, index) => (
|
||
<div className="block deal_contracts_group_item" key={ index }>
|
||
{ edo ? (
|
||
<>
|
||
{ type.key !== "prepared_contracts" && (
|
||
<div className="left"><p><b>{ type.title }</b></p></div>
|
||
) }
|
||
</>
|
||
) : (
|
||
<div className="left"><p><b>{ type.title }</b></p></div>
|
||
) }
|
||
<div className="right" style={ edo && type.key === "prepared_contracts" ? { width: "100%" } : {} }>
|
||
{ this._render_contracts(type.key) }
|
||
</div>
|
||
</div>
|
||
)) }
|
||
</>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default class SingleDeal extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.leasing_registration_ref = React.createRef();
|
||
}
|
||
|
||
_onDealContractsUpdate = () =>
|
||
{
|
||
const { onDealContractsUpdate, dealSelected } = this.props;
|
||
onDealContractsUpdate(dealSelected);
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { index, status, deals, dealSelected, onCloseDeal, } = this.props;
|
||
|
||
const offers = deals.details[ dealSelected ] !== undefined ? deals.details[ dealSelected ].offers : undefined;
|
||
const documents = deals.details[ dealSelected ] !== undefined ? deals.details[ dealSelected ].documents : undefined;
|
||
const uploaded = deals.details[ dealSelected ] !== undefined ? deals.details[ dealSelected ].uploaded : undefined;
|
||
const contracts = deals.details[ dealSelected ] !== undefined ? deals.details[ dealSelected ].contracts : undefined;
|
||
|
||
return (
|
||
<div className="contractStatus_modal">
|
||
{/*}
|
||
<div className="modal_header">
|
||
<p className="modal_title">Статус сделки</p>
|
||
<button className="modal_close" onClick={close}></button>
|
||
</div>
|
||
{*/}
|
||
<div className="modal_body single_status">
|
||
<Offers { ...this.props } offers={ offers }/>
|
||
<FinancialProgram { ...this.props }/>
|
||
<DocumentsForm { ...this.props } documents={ documents } uploaded={ uploaded }/>
|
||
<StatusDocumentsCheck { ...this.props }/>
|
||
<StatusDecisionMaking { ...this.props }/>
|
||
<StatusDecisionRefuse { ...this.props }/>
|
||
<StatusPositiveDecision { ...this.props }/>
|
||
<LeasingRegistration { ...this.props } contracts={ contracts } onDealContractsUpdate={ this._onDealContractsUpdate }/>
|
||
</div>
|
||
<div className="bottom_button_close" onClick={ onCloseDeal } >
|
||
<span>Свернуть</span>
|
||
<div className="icon"></div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
} |