174 lines
5.4 KiB
JavaScript
174 lines
5.4 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 DownloadPdfButton from "../components/DownloadPdfButton";
|
||
|
||
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(() => {});
|
||
});
|
||
}
|
||
}
|
||
|
||
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>
|
||
<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 }` : '' }</h5>
|
||
</div>
|
||
<Company/>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<InnerMenu number={ number } { ...this.props }/>
|
||
<article>
|
||
{ loading ? (
|
||
<div className="table_row table_header" style={{ minHeight: 300, 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>
|
||
) : (
|
||
<div className="dosc_list">
|
||
{ agreement !== undefined && agreement !== null && agreement.map((document, index) => (
|
||
<React.Fragment key={ index }>
|
||
{ document.documents !== undefined && document.documents !== null && document.documents.map((file, file_index) => (
|
||
<div className="row" key={ file_index }>
|
||
<p className="doc_name i-pdf">
|
||
{ types[document.type] }
|
||
<span style={{ width: "100%"}}>{ file.number } от { file.date }</span>
|
||
{ file.type !== undefined && <span>{ file.type }</span> }
|
||
</p>
|
||
<DownloadPdfButton id={ file.url } filename={ `evoleasing_${ document.type }_${ file.number }_${ file.date }.pdf` }/>
|
||
</div>
|
||
)) }
|
||
</React.Fragment>
|
||
)) }
|
||
{ rules !== undefined && rules !== null && rules.map((document, index ) => (
|
||
<div className="row" key={ index }>
|
||
<p className="doc_name i-pdf">
|
||
{ document.name }
|
||
<span style={{ width: "100%"}}>Дата вступления в силу: { document.active_from }</span>
|
||
</p>
|
||
<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true }/>
|
||
</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)); |