170 lines
5.5 KiB
JavaScript
170 lines
5.5 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 { reduxWrapper } from "../../store";
|
||
|
||
import Header from "../components/Header";
|
||
import Footer from "../components/Footer";
|
||
import Company from "../components/Company";
|
||
import InnerMenu from "./components/InnerMenu";
|
||
|
||
import NotificationMessage from "../components/Events/NotificationMessage";
|
||
|
||
import { getContractInfo, getFilteredEvents } from "../../actions";
|
||
|
||
class ContractPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
date: null,
|
||
car: null,
|
||
contract_date: null,
|
||
events_loaded: false,
|
||
filtered: undefined,
|
||
loading: true,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
date: nextProps.date,
|
||
car: nextProps.car,
|
||
contract_date: nextProps.contract_date,
|
||
events_loaded: nextProps.events_loaded,
|
||
filtered: nextProps.filtered,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
getContractInfo({ dispatch: this.props.dispatch, number: this.props.number });
|
||
|
||
if(this.state.events_loaded)
|
||
{
|
||
getFilteredEvents({ dispatch: this.props.dispatch, contract: this.props.number });
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if(this.state.events_loaded && !prevState.events_loaded)
|
||
{
|
||
getFilteredEvents({ dispatch: this.props.dispatch, contract: this.props.number });
|
||
}
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { number } = this.props;
|
||
const { loading, date, car, contract_date, events_loaded, filtered, } = 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">
|
||
<InnerMenu number={ number } { ...this.props } />
|
||
<article>
|
||
{ filtered !== undefined ? (
|
||
<>
|
||
{ filtered.length > 0 ? (
|
||
<ul className="list events-list">
|
||
{ filtered.map((event, index) => (
|
||
<NotificationMessage event={ event } key={ index }/>
|
||
)) }
|
||
</ul>
|
||
) : (
|
||
<p>Нет событий по данному договору.</p>
|
||
) }
|
||
</>
|
||
) : (
|
||
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
|
||
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||
</div>
|
||
) }
|
||
{/*}
|
||
<li className="new">
|
||
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
|
||
<p className="type">Важное</p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<a href="">Посмотрите порядок возврата СТС</a> или
|
||
<a href="">Загрузите скан СТС</a>
|
||
</p>
|
||
</li>
|
||
<li className="new">
|
||
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<a href="">Посмотрите порядок возврата СТС</a> или
|
||
<a href="">Загрузите скан СТС</a>
|
||
</p>
|
||
</li>
|
||
<li className="new">
|
||
<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<a href="">Подробнее</a>
|
||
</p>
|
||
</li>
|
||
{*/}
|
||
</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,
|
||
events_loaded: state.events.loaded,
|
||
filtered: state.events.filtered,
|
||
};
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||
(store) =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
return {
|
||
props: {
|
||
number: query.number,
|
||
}
|
||
}
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ContractPage));
|