594 lines
21 KiB
JavaScript
594 lines
21 KiB
JavaScript
import React from "react"
|
||
import { connect } from "react-redux"
|
||
|
||
const SingleContractModal = (props) => {
|
||
const { open, close } = props
|
||
|
||
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">
|
||
<div className="current">
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_1"></i>
|
||
<p>Выбор КП</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>№</th>
|
||
<th>Стоимость</th>
|
||
<th>Первый платеж, р.</th>
|
||
<th>Первый платеж, %</th>
|
||
<th>Марка</th>
|
||
<th>Модель</th>
|
||
<th>Объектов лизинга</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div className="form_field checkbox">
|
||
<input type="checkbox" name="row" id="row" checked="" />
|
||
<label htmlFor="row"></label>
|
||
</div>
|
||
</td>
|
||
<td>1</td>
|
||
<td>5 600 000 р.</td>
|
||
<td>560 000 р.</td>
|
||
<td>10 %</td>
|
||
<td>Audi</td>
|
||
<td>A8</td>
|
||
<td>1</td>
|
||
<td>
|
||
<div className="dosc_list">
|
||
<div className="row">
|
||
<div className="small-icon">
|
||
<p className="doc_name i-pdf">
|
||
КП
|
||
<span>№1</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div className="form_field checkbox">
|
||
<input type="checkbox" name="row" id="row" checked="" />
|
||
<label htmlFor="row"></label>
|
||
</div>
|
||
</td>
|
||
<td>1</td>
|
||
<td>5 600 000 р.</td>
|
||
<td>560 000 р.</td>
|
||
<td>10 %</td>
|
||
<td>Audi</td>
|
||
<td>A8</td>
|
||
<td>1</td>
|
||
<td>
|
||
<div className="dosc_list">
|
||
<div className="row">
|
||
<div className="small-icon">
|
||
<p className="doc_name i-pdf">
|
||
КП
|
||
<span>№1</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_2"></i>
|
||
<p className="header">Программа финансирования</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<div className="single_text">
|
||
<p>Статусный текст о том что выбирается программа финансированияи может быть по центру иконочка часиков или слева от статусного текста иконочка часиков</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_3"></i>
|
||
<p>Сборка пакета документов</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<div className="message ok">
|
||
<p>Вам не требуется актуализация данных анкеты Клиента</p>
|
||
</div>
|
||
|
||
<div className="message alert">
|
||
<p>Требуется обновить данные в анкете</p>
|
||
<button className="button button-blue">Актуализировать данные</button>
|
||
</div>
|
||
|
||
<div className="message wait">
|
||
<p>Проводится проверка анкеты Вашей организации</p>
|
||
</div>
|
||
|
||
<p><b>Устав организации</b></p>
|
||
<div className="attach_file">
|
||
<label>
|
||
<input type="file" hidden />
|
||
Прикрепить скан документов
|
||
</label>
|
||
</div>
|
||
|
||
<div class="message documents">
|
||
|
||
<div className="doc_list">
|
||
<div class="dosc_list medium-icon"><div class="row"><p class="doc_name i-pdf i-medium">№123/2023 от 01.01.2023</p></div></div>
|
||
<div class="dosc_list medium-icon"><div class="row"><p class="doc_name i-pdf i-medium">№123/2023 от 01.01.2023</p></div></div>
|
||
</div>
|
||
<p>Документы, отправленные Вами принадлежат другой организации бла бла коммент от менеджера</p>
|
||
</div>
|
||
|
||
<div className="attach_file">
|
||
<label>
|
||
<input type="file" hidden />
|
||
Прикрепить ещё
|
||
</label>
|
||
</div>
|
||
|
||
<p><b>Другое название документа</b></p>
|
||
<div className="attach_file">
|
||
<label>
|
||
<input type="file" hidden />
|
||
Прикрепить скан документов
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div className="">
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_4"></i>
|
||
<p>Проверка документов</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<div className="single_text">
|
||
<p>Статусный текст о том что выбирается программа финансированияи может быть по центру иконочка часиков или слева от статусного текста иконочка часиков</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_5"></i>
|
||
<p>Принятие решения по заявке</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<div className="single_text">
|
||
<p>Статусный текст о том что выбирается программа финансированияи может быть по центру иконочка часиков или слева от статусного текста иконочка часиков</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_6"></i>
|
||
<p>Оформление лизинга</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<div className="single_text">
|
||
<p>Статусный текст о том что выбирается программа финансированияи может быть по центру иконочка часиков или слева от статусного текста иконочка часиков</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
|
||
<div className="status_body">
|
||
<div className="status_header">
|
||
<i className="status_7"></i>
|
||
<p>Выбор типа подписания</p>
|
||
</div>
|
||
<div className="wrap">
|
||
<div className="block-column">
|
||
<div
|
||
className="dropdown_block open"
|
||
>
|
||
<div className="block_header default">
|
||
<p><b>Подготовлено 3 из 12</b></p>
|
||
</div>
|
||
</div>
|
||
<div className="dosc_list acts_list-checkbox medium-icon">
|
||
< div className="row">
|
||
<p
|
||
className="doc_name i-doc i-medium"
|
||
>
|
||
<input type="checkbox" name="" id="" checked="" />
|
||
<label for="">№2022_6875 от 28.06.2022</label>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="block_footer_btn">
|
||
|
||
<button className="button button-blue">Подписать в ЭДО</button>
|
||
<button className="button button-blue">Подписать в бумажном виде</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div className="block-column">
|
||
<div
|
||
className="dropdown_block open"
|
||
>
|
||
<div className="block_header default">
|
||
<p><b>К подписанию 3 из 12</b></p>
|
||
</div>
|
||
</div>
|
||
<div className="dosc_list medium-icon">
|
||
< div className="row flex-start">
|
||
<p
|
||
className="doc_name i-doc i-medium"
|
||
>
|
||
№123/2023 от 01.01.2023
|
||
</p>
|
||
<button className="button">Перейти в ЭДО</button>
|
||
</div>
|
||
< div className="row flex-start">
|
||
<p
|
||
className="doc_name i-doc i-medium"
|
||
>
|
||
№123/2023 от 01.01.2023
|
||
</p>
|
||
<button className="button">Скачать документ</button>
|
||
<button className="button">Загрузить подписанный экземпляр</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="block-column">
|
||
<div
|
||
className="dropdown_block open"
|
||
>
|
||
<div className="block_header default">
|
||
<p><b>Подписано 3 из 12</b></p>
|
||
</div>
|
||
</div>
|
||
<div className="dosc_list medium-icon">
|
||
< div className="row">
|
||
<p
|
||
className="doc_name i-doc i-medium"
|
||
>
|
||
<a href="#">Скачать №129/2023 от 01.01.2023 - Ожидание оплаты</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="block-column">
|
||
<div
|
||
className="dropdown_block open"
|
||
>
|
||
<div className="block_header default">
|
||
<p><b>Подготовлено 3 из 12</b></p>
|
||
</div>
|
||
</div>
|
||
<div className="dosc_list medium-icon">
|
||
< div className="row">
|
||
<p
|
||
className="doc_name i-doc i-medium"
|
||
>
|
||
№123/2023 от 01.01.2023
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
)
|
||
}
|
||
|
||
const AllContractsModal = (props) => {
|
||
const { open, close, activeContract, handleContractSelected } = props
|
||
|
||
return (
|
||
<div className={open ? "fade opened" : "fade"}>
|
||
<div className="contractStatus_modal all_contracts_modal">
|
||
<div className="modal_header">
|
||
<p className="modal_title">Статусы сделок</p>
|
||
<button className="modal_close" onClick={close}></button>
|
||
</div>
|
||
<div className="modal_body">
|
||
<div className="contractStatus_list">
|
||
<div className="single_status">
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_1"></i>
|
||
|
||
<p>Выбор КП</p>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_2"></i>
|
||
|
||
<p>Программа финансирования</p>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_3"></i>
|
||
|
||
<p>Сборка пакета документов</p>
|
||
</div>
|
||
<div className="current">
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_4"></i>
|
||
|
||
<p>Проверка документов</p>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_5"></i>
|
||
|
||
<p>Принятие решения по заявке</p>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_6"></i>
|
||
|
||
<p>Оформление лизинга</p>
|
||
</div>
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
<span></span>
|
||
<i className="status_7"></i>
|
||
|
||
<p>Выбор типа подписания</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
class ContractStatus extends React.Component {
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
currentContractModalOpened: false,
|
||
allContractModalOpened: false,
|
||
currentSelected: null
|
||
}
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState) {
|
||
return {}
|
||
}
|
||
|
||
componentDidMount() { }
|
||
|
||
componentDidUpdate(prevProps, prevState) { }
|
||
|
||
_handleModalToggle = (modal) => {
|
||
if (modal === "current") {
|
||
this.setState({
|
||
currentContractModalOpened: !this.state.currentContractModalOpened
|
||
})
|
||
} else {
|
||
this.setState({
|
||
allContractModalOpened: !this.state.allContractModalOpened
|
||
})
|
||
}
|
||
}
|
||
|
||
_handleContractSelected = (index) => {
|
||
this.setState({
|
||
currentSelected: index
|
||
})
|
||
}
|
||
|
||
render() {
|
||
const { currentContractModalOpened, allContractModalOpened, currentSelected } = this.state
|
||
|
||
return (
|
||
<>
|
||
<div className="contractStatus_list">
|
||
<div className="list_item">
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
2 этапа пройдено
|
||
<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
|
||
<path
|
||
stroke="#8E94A7"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M14.625 6.75 9 12.375 3.375 6.75"
|
||
/>
|
||
</svg>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<img src="/assets/images/status/1.svg" width="50" height="50" />
|
||
<p>Сбор пакета документов</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
еще 4 этапа
|
||
<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
|
||
<path
|
||
stroke="#8E94A7"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M14.625 6.75 9 12.375 3.375 6.75"
|
||
/>
|
||
</svg>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<button
|
||
className="button"
|
||
onClick={() => {
|
||
this._handleModalToggle("all")
|
||
}}
|
||
>
|
||
Все сделки
|
||
<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
|
||
<path
|
||
stroke="#1C01A9"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M14.625 6.75 9 12.375 3.375 6.75"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="list_item">
|
||
<div>
|
||
<p>Сделка 1</p>
|
||
</div>
|
||
<div>
|
||
<p
|
||
onClick={() => {
|
||
this._handleModalToggle("current")
|
||
}}
|
||
>
|
||
2 этапа пройдено
|
||
<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
|
||
<path
|
||
stroke="#8E94A7"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M14.625 6.75 9 12.375 3.375 6.75"
|
||
/>
|
||
</svg>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<img src="/assets/images/status/3.svg" width="50" height="50" />
|
||
<p>Сбор пакета документов</p>
|
||
</div>
|
||
<div>
|
||
<p
|
||
onClick={() => {
|
||
this._handleModalToggle("current")
|
||
}}
|
||
>
|
||
еще 4 этапа
|
||
<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
|
||
<path
|
||
stroke="#8E94A7"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M14.625 6.75 9 12.375 3.375 6.75"
|
||
/>
|
||
</svg>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<button
|
||
className="button"
|
||
onClick={() => {
|
||
this._handleModalToggle("all")
|
||
}}
|
||
>
|
||
Все сделки
|
||
<svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} fill="none">
|
||
<path
|
||
stroke="#1C01A9"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M14.625 6.75 9 12.375 3.375 6.75"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<SingleContractModal
|
||
open={currentContractModalOpened}
|
||
close={() => {
|
||
this._handleModalToggle("current")
|
||
}}
|
||
/>
|
||
<AllContractsModal
|
||
open={allContractModalOpened}
|
||
close={() => {
|
||
this._handleModalToggle("all")
|
||
}}
|
||
activeContract={currentSelected}
|
||
handleContractSelected={this._handleContractSelected}
|
||
/>
|
||
</>
|
||
)
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps) {
|
||
return {}
|
||
}
|
||
|
||
export default connect(mapStateToProps)(ContractStatus)
|