217 lines
5.5 KiB
JavaScript
217 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 Link from "next/link";
|
||
|
||
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 DateInput from "../components/DatePicker";
|
||
|
||
import {
|
||
getContractInfo,
|
||
getContractAgreement,
|
||
getContractRules,
|
||
getFile,
|
||
} from "../../actions";
|
||
|
||
class ContractPage 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(() => {});
|
||
});
|
||
}
|
||
|
||
document.documentElement.style.height = "100%";
|
||
document.documentElement.style.display = "flex";
|
||
document.documentElement.style.flexDirection = "column";
|
||
|
||
document.body.style.height = "100%";
|
||
document.body.style.display = "flex";
|
||
document.body.style.flexDirection = "column";
|
||
}
|
||
|
||
componentWillUnmount()
|
||
{
|
||
document.documentElement.style.height = "unset";
|
||
document.documentElement.style.display = "unset";
|
||
document.documentElement.style.flexDirection = "unset";
|
||
document.body.style.height = "unset";
|
||
document.body.style.display = "unset";
|
||
document.body.style.flexDirection = "unset";
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { loading, date, car, contract_date, agreement, rules } = this.state;
|
||
const { number } = this.props;
|
||
|
||
console.log("rules", rules);
|
||
|
||
const types = {
|
||
contracts: "Договор",
|
||
redemptions: "Выкупные документы",
|
||
agreements: "Дополнительное соглашение",
|
||
assignments: "Договор цессии",
|
||
};
|
||
|
||
return (
|
||
<React.Fragment style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "spaceBetween", alignItems: "stretch" }}>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга"/>
|
||
</Head>
|
||
<Header { ...this.props }/>
|
||
<main style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left" style={{ alignItems: "center", flexWrap: "wrap", alignItems: "flex-start" }}>
|
||
<button className="back">Назад</button>
|
||
<div style={{ flexDirection: "column" }}>
|
||
<h1 className="section_title">Расчет планируемых пени</h1>
|
||
<h5 style={{ fontSize: "14px" }}>
|
||
Договор №{ number }
|
||
{ 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>
|
||
</div>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<article className="fine">
|
||
<div className="fine_block">
|
||
<div className="fine_col">
|
||
<p>
|
||
<span>Пени на дату</span>
|
||
10.04.2022
|
||
</p>
|
||
</div>
|
||
<div className="fine_col">
|
||
<p>
|
||
Февраль
|
||
<span>28,11 ₽</span>
|
||
</p>
|
||
<p>
|
||
Февраль
|
||
<span>1520,20 ₽</span>
|
||
</p>
|
||
<p>
|
||
Февраль
|
||
<span>28,11 ₽</span>
|
||
</p>
|
||
<p>
|
||
<span>ИТОГО:</span>
|
||
<span>2322,46 ₽</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</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,
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ContractPage));
|