253 lines
8.7 KiB
JavaScript
253 lines
8.7 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 !== null
|
||
? car.vin_number
|
||
: "без VIN номера"
|
||
}`
|
||
: ""}
|
||
</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 medium-icon">
|
||
<p className="list_title">К подписанию</p>
|
||
<div className="row">
|
||
<p className="doc_name i-pdf extension">
|
||
Договор
|
||
<span style={{ width: "100%" }}>
|
||
2021_1655 от 20.04.2021
|
||
</span>
|
||
</p>
|
||
|
||
<div className="btn_group">
|
||
<a className="button button-blue">
|
||
Скачать
|
||
</a>
|
||
|
||
<a className="button button-blue">
|
||
Подписать по ЭДО
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="list_title">Действующие</p>
|
||
|
||
{agreement !== undefined &&
|
||
agreement !== null &&
|
||
agreement.map((document, index) => (
|
||
<React.Fragment key={index}>
|
||
{document.documents !== undefined &&
|
||
document.documents !== null &&
|
||
document.documents.map((file, file_index) => {
|
||
console.log("file", file);
|
||
return (
|
||
<div className="row" key={file_index}>
|
||
<p
|
||
className="doc_name i-pdf extension"
|
||
data-format={file.extension}
|
||
>
|
||
{types[document.type]}
|
||
<span style={{ width: "100%" }}>
|
||
{file.number} от{" "}
|
||
{moment(file.date).format("DD.MM.YYYY")}
|
||
</span>
|
||
{file.type !== undefined && (
|
||
<span>{file.type}</span>
|
||
)}
|
||
</p>
|
||
<DownloadPdfButton
|
||
id={file.url}
|
||
filename={`evoleasing_${document.type}_${file.number}_${file.date}.${file.extension}`}
|
||
/>
|
||
</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));
|