475 lines
17 KiB
JavaScript
475 lines
17 KiB
JavaScript
import React from "react";
|
||
import Head from "next/head";
|
||
import Image from "next/image";
|
||
import { connect } from "react-redux";
|
||
import { withRouter } from "next/router";
|
||
import moment from "moment";
|
||
import { SpinnerCircular } from "spinners-react";
|
||
import Link from "next/link";
|
||
import { reduxWrapper } from "../../store";
|
||
|
||
import Header from "../components/Header";
|
||
import Footer from "../components/Footer";
|
||
import Company from "../components/Company";
|
||
|
||
import {
|
||
getContractInfo,
|
||
getContractAgreement,
|
||
getContractRules,
|
||
getFile,
|
||
} from "../../actions";
|
||
|
||
class ChangeGraphicComparePage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
date: null,
|
||
car: null,
|
||
contract_date: null,
|
||
agreement: null,
|
||
rules: null,
|
||
loading: false,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
date: nextProps.date,
|
||
car: nextProps.car,
|
||
contract_date: nextProps.contract_date,
|
||
agreement: nextProps.agreement,
|
||
rules: nextProps.rules,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
if (!this.state.loading && this.props.number !== undefined)
|
||
{
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
getContractInfo({
|
||
dispatch: this.props.dispatch,
|
||
number: this.props.number,
|
||
})
|
||
.then((info) =>
|
||
{
|
||
//console.log("info", info);
|
||
|
||
|
||
getContractRules({
|
||
dispatch: this.props.dispatch,
|
||
date: moment(info.date, "YYYY-MM-DD").format("DD.MM.YYYY"),
|
||
})
|
||
.then(() => {})
|
||
.catch(() => {});
|
||
})
|
||
.catch(() => {});
|
||
|
||
getContractAgreement({
|
||
dispatch: this.props.dispatch,
|
||
number: this.props.number,
|
||
})
|
||
.then(() =>
|
||
{
|
||
this.setState({ loading: false });
|
||
})
|
||
.catch(() => {});
|
||
});
|
||
}
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { number } = this.props;
|
||
const { loading, date, car, contract_date, agreement, rules } = this.state;
|
||
|
||
//console.log("rules", rules);
|
||
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header {...this.props} />
|
||
<main>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left" style={{ flexDirection: "column" }}>
|
||
<h1 className="section_title">Договор №{ number }</h1>
|
||
<h5 style={{ fontSize: "14px" }}>
|
||
{ date !== undefined && date !== null && date !== null && ( <> от {moment(date).format("DD.MM.YYYY")}</> ) }
|
||
{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
|
||
</h5>
|
||
</div>
|
||
<Company { ...this.props }/>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<article className="compare">
|
||
<div className="compare_top">
|
||
<p>
|
||
Выбранный(ые) варианты изменения графика
|
||
<Link href="#">
|
||
<a>Вернуться к параметрам изменения графика</a>
|
||
</Link>
|
||
</p>
|
||
<button className="button button-blue">Скачать PDF</button>
|
||
</div>
|
||
<div className="compare_data">
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="" name="" checked disabled />
|
||
<label htmlFor="">Изменить дату платежа</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="" name="" checked disabled />
|
||
<label htmlFor="">Изменение кол-ва платежей</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<p>
|
||
<span>Дата платежа:</span> 1 месяц (37 платежей)
|
||
</p>
|
||
</div>
|
||
<div className="form_field">
|
||
<p>
|
||
<span>Тип каникул:</span> С увеличением срока
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="compare_tables">
|
||
<div className="compare_table">
|
||
<p className="table_title">Текущий график</p>
|
||
<div className="table_body">
|
||
<div className="table_row table_header">
|
||
<div>№</div>
|
||
<div className="sortable">
|
||
Дата лизингового платежа
|
||
</div>
|
||
<div className="sortable">Лизинговый платеж с НДС ₽</div>
|
||
<div className="sortable">Сумма досрочного выкупа</div>
|
||
</div>
|
||
<div className="table_row row-button">
|
||
<button className="button button-gray">
|
||
Показать прошедшие платежи
|
||
</button>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>14</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>15</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>16</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>17</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>18</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>19</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>20</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="compare_table">
|
||
<p className="table_title">
|
||
Изменения с платежа №ХХ от ХХ.ХХ.ХХХХ
|
||
</p>
|
||
<div className="table_body">
|
||
<div className="table_row table_header">
|
||
<div>№</div>
|
||
<div className="sortable">
|
||
Дата лизингового платежа
|
||
</div>
|
||
<div className="sortable">
|
||
Лизинговый платеж с НДС ₽
|
||
</div>
|
||
<div className="sortable">
|
||
Сумма досрочного выкупа
|
||
</div>
|
||
</div>
|
||
<div className="table_row row-button">
|
||
<button className="button button-gray">
|
||
Показать прошедшие платежи
|
||
</button>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>14</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>15</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>16</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>17</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>18</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>19</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<div>20</div>
|
||
<div>21.02.2021</div>
|
||
<div>239 724,05</div>
|
||
<div>43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="compare_table touchable">
|
||
<div className="table_body">
|
||
<button className="button button-gray">
|
||
Показать прошедшие платежи
|
||
</button>
|
||
<div className="table_row opened">
|
||
<p className="row_title">Платеж №14</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<p className="row_title">Платеж №15</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<p className="row_title">Платеж №15</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<p className="row_title">Платеж №15</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<p className="row_title">Платеж №15</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table_row">
|
||
<p className="row_title">Платеж №15</p>
|
||
<div className="table_group">
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
<div className="table_cell">
|
||
<div><span>Текущий график</span> 21.02.2021</div>
|
||
<div><span>На сумму</span> 239 724,05</div>
|
||
<div><span>Сумма досрочного выкупа</span> 43 079,18</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="compare_suscr">
|
||
<p className="block_title">
|
||
Подписанты
|
||
<Link href="#">
|
||
<a>Все</a>
|
||
</Link>
|
||
</p>
|
||
<div className="feed static">
|
||
<div className="feed_item user">
|
||
<input type="radio" hidden id="user_1" name="user_1" />
|
||
<label htmlFor="user_1"></label>
|
||
<img src="/assets/images/icons/avatar.svg" alt="" />
|
||
<div>
|
||
<p className="item_title">Иванов Иван</p>
|
||
<p className="item_desc">Менеджер по продажам</p>
|
||
</div>
|
||
</div>
|
||
<div className="feed_item user">
|
||
<input type="radio" hidden id="user_1" name="user_1" />
|
||
<label htmlFor="user_1"></label>
|
||
<img src="/assets/images/icons/avatar.svg" alt="" />
|
||
<div>
|
||
<p className="item_title">Иванов Иван</p>
|
||
<p className="item_desc">Менеджер по продажам</p>
|
||
</div>
|
||
</div>
|
||
<div className="feed_item user">
|
||
<input type="radio" hidden id="user_1" name="user_1" />
|
||
<label htmlFor="user_1"></label>
|
||
<img src="/assets/images/icons/avatar.svg" alt="" />
|
||
<div>
|
||
<p className="item_title">Иванов Иван</p>
|
||
<p className="item_desc">Менеджер по продажам</p>
|
||
</div>
|
||
</div>
|
||
<div className="feed_item user">
|
||
<input type="radio" hidden id="user_2" name="user_2" />
|
||
<label htmlFor="user_2"></label>
|
||
<img src="/assets/images/icons/avatar.svg" alt="" />
|
||
<div>
|
||
<p className="item_title">Иванов Иван</p>
|
||
<p className="item_desc">Менеджер по продажам</p>
|
||
</div>
|
||
</div>
|
||
<div className="feed_item user">
|
||
<input type="radio" hidden id="user_3" name="user_3" />
|
||
<label htmlFor="user_3"></label>
|
||
<img src="/assets/images/icons/avatar.svg" alt="" />
|
||
<div>
|
||
<p className="item_title">Иванов Иван</p>
|
||
<p className="item_desc">Менеджер по продажам</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="btn_group">
|
||
<button className="button button-blue">
|
||
Согласовать и подписать в бумажном виде
|
||
</button>
|
||
<button className="button button-blue">
|
||
Согласовать и подписать по ЭДО
|
||
</button>
|
||
</div>
|
||
<div className="compare_message">
|
||
<p>
|
||
Дополнительное соглашение отправлено на согласование. После согласования документ появится на странице <br />
|
||
<Link href="#">«Документы по договору» </Link>
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer authenticated={ true }/>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
contract_date: state.contract.date,
|
||
date: state.contract.date,
|
||
car: state.contract.car,
|
||
agreement: state.contract.agreement,
|
||
rules: state.contract.rules,
|
||
};
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||
(store) =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
return {
|
||
props: {
|
||
//number: query.number,
|
||
number: null,
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ChangeGraphicComparePage));
|