222 lines
6.5 KiB
JavaScript
222 lines
6.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 DownloadPdfButton from "../components/DownloadPdfButton";
|
||
|
||
import {
|
||
getContractInfo,
|
||
getContractAgreement,
|
||
getContractRules,
|
||
getFile,
|
||
} from "../../actions";
|
||
import AccountLayout from "../components/Layout/Account";
|
||
import ContractHeader from "./components/ContractHeader";
|
||
|
||
class ContractPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state =
|
||
{
|
||
date: null,
|
||
car: null,
|
||
contract_date: null,
|
||
unsigned: null,
|
||
signed: null,
|
||
rules: null,
|
||
loading: false,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
date: nextProps.date,
|
||
car: nextProps.car,
|
||
contract_date: nextProps.contract_date,
|
||
unsigned: nextProps.unsigned,
|
||
signed: nextProps.signed,
|
||
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(() => {});
|
||
});
|
||
}
|
||
}
|
||
|
||
_renderDocuments = (documents, type) =>
|
||
{
|
||
const types = {
|
||
contracts: "Договор",
|
||
redemptions: "Выкупные документы",
|
||
agreements: "Дополнительное соглашение",
|
||
assignments: "Договор цессии",
|
||
};
|
||
|
||
return documents[ type ].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[ 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_${ types[ type ] }_${ file.type }_${ file.number }_${ file.date }.${ file.extension }`} />
|
||
{/*}
|
||
<a className="button button-blue">Подписать по ЭДО</a>
|
||
{*/}
|
||
</div>
|
||
);
|
||
});
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { number } = this.props;
|
||
const { loading, date, car, contract_date, unsigned, signed, rules } = this.state;
|
||
|
||
console.log("rules", rules);
|
||
console.log("unsigned", unsigned);
|
||
console.log("signed", signed);
|
||
|
||
const types = {
|
||
contracts: "Договор",
|
||
redemptions: "Выкупные документы",
|
||
agreements: "Дополнительное соглашение",
|
||
assignments: "Договор цессии",
|
||
};
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header { ...this.props } />
|
||
<AccountLayout>
|
||
<div className="title_wrapper">
|
||
<div className="left" style={{ flexDirection: "column" }}>
|
||
<ContractHeader number={ number } date={ date } car={ car }/>
|
||
</div>
|
||
<Company { ...this.props }/>
|
||
</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">
|
||
{ unsigned !== undefined && unsigned !== null && unsigned.documents !== undefined && unsigned.documents !== null && unsigned.count > 0 && (
|
||
<>
|
||
<p className="list_title">К подписанию</p>
|
||
{ this._renderDocuments(unsigned.documents, "contracts") }
|
||
{ this._renderDocuments(unsigned.documents, "agreements") }
|
||
{ this._renderDocuments(unsigned.documents, "assignments") }
|
||
{ this._renderDocuments(unsigned.documents, "redemptions") }
|
||
</>
|
||
) }
|
||
{ signed !== undefined && signed !== null && signed.documents !== undefined && signed.documents !== null && signed.count > 0 && (
|
||
<>
|
||
<p className="list_title">Действующие</p>
|
||
{ this._renderDocuments(signed.documents, "contracts") }
|
||
{ this._renderDocuments(signed.documents, "agreements") }
|
||
{ this._renderDocuments(signed.documents, "assignments") }
|
||
{ this._renderDocuments(signed.documents, "redemptions") }
|
||
</>
|
||
) }
|
||
{ 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>
|
||
</AccountLayout>
|
||
<Footer/>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
contract_date: state.contract.date,
|
||
date: state.contract.date,
|
||
car: state.contract.car,
|
||
unsigned: state.contract.agreement.unsigned,
|
||
signed: state.contract.agreement.signed,
|
||
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));
|