266 lines
7.8 KiB
JavaScript
266 lines
7.8 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";
|
||
import EDOSign from "../../components/EDOSign";
|
||
|
||
class ContractPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state =
|
||
{
|
||
loading: false,
|
||
contracts_info: {},
|
||
unsigned: null,
|
||
signed: null,
|
||
rules: null,
|
||
edo_mode: false,
|
||
edo_document: {},
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
contracts_info: nextProps.contracts_info,
|
||
unsigned: nextProps.unsigned,
|
||
signed: nextProps.signed,
|
||
rules: nextProps.rules,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
const { dispatch, number} = this.props;
|
||
|
||
if (!this.state.loading && number !== undefined)
|
||
{
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
if(this.state.contracts_info[ number ] === undefined)
|
||
{
|
||
getContractInfo({ dispatch, number })
|
||
.then((contract_info) =>
|
||
{
|
||
const { date } = contract_info;
|
||
this._loadData(date);
|
||
});
|
||
}
|
||
else
|
||
{
|
||
const { date } = this.state.contracts_info[ number ];
|
||
this._loadData(date);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
_loadData = (date) =>
|
||
{
|
||
const { dispatch, number} = this.props;
|
||
|
||
getContractRules({
|
||
dispatch,
|
||
date: moment(date, "YYYY-MM-DD").format("DD.MM.YYYY"),
|
||
})
|
||
.then(() => {})
|
||
.catch(() => {});
|
||
|
||
getContractAgreement({ dispatch, number, })
|
||
.then(() =>
|
||
{
|
||
this.setState({ loading: false });
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
|
||
_handle_onEDOClick = (file) =>
|
||
{
|
||
console.log({ file });
|
||
this.setState({ edo_document: file, edo_mode: true });
|
||
}
|
||
|
||
_renderDocuments = (documents, type) =>
|
||
{
|
||
const types = {
|
||
contracts: "Договор",
|
||
redemptions: "Выкупные документы",
|
||
agreements: "Дополнительное соглашение",
|
||
assignments: "Договор цессии",
|
||
act_pp: "Акт приема-передачи",
|
||
};
|
||
|
||
return documents[ type ].map((file, file_index) =>
|
||
{
|
||
//console.log("file", file);
|
||
console.log({ file });
|
||
|
||
return (
|
||
<div className="row" key={ file_index }>
|
||
<p className="doc_name i-pdf extension" data-format={ file.extension } style={{ flex: 1 }}>
|
||
{ types[ type ] }
|
||
<span style={{ width: "100%" }}>
|
||
{ file.number } от{" "}{ moment(file.date).format("DD.MM.YYYY") }
|
||
</span>
|
||
{ file.type !== undefined && (<span>{ file.type }</span>) }
|
||
</p>
|
||
{/**/}
|
||
<a className="button button-blue" onClick={ () => this._handle_onEDOClick({ ...file, ...{ name: types[ type ] } }) }>Подписать по ЭДО</a>
|
||
{/**/}
|
||
<DownloadPdfButton
|
||
id={ file.url }
|
||
filename={`evoleasing_${ types[ type ] }_${ file.type }_${ file.number }_${ file.date }.${ file.extension }`}
|
||
log={{
|
||
contract_number: this.props.number,
|
||
document_type: type,
|
||
document_name: file.number,
|
||
document_date: file.date,
|
||
description: file.type,
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
});
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { number } = this.props;
|
||
const { loading, contracts_info, unsigned, signed, rules, edo_mode, edo_document } = this.state;
|
||
|
||
let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
|
||
|
||
//console.log("rules", rules);
|
||
//console.log("unsigned", unsigned);
|
||
//console.log("signed", signed);
|
||
|
||
const types = {
|
||
contracts: "Договор",
|
||
redemptions: "Выкупные документы",
|
||
agreements: "Дополнительное соглашение",
|
||
assignments: "Договор цессии",
|
||
act_pp: "Акт приема-передачи",
|
||
};
|
||
|
||
console.log({ agreement_props: this.props });
|
||
|
||
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 } status={ status } { ...this.props } />
|
||
<article className="questionnaire edo_detail">
|
||
{ 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>
|
||
) : (
|
||
<>
|
||
{ edo_mode ? (
|
||
<EDOSign documents={ [ this.state.edo_document ] } onCancel={ () => this.setState({ edo_mode: false }) }/>
|
||
) : (
|
||
<div className="docs_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") }
|
||
{ this._renderDocuments(unsigned.documents, "act_pp") }
|
||
</>
|
||
) }
|
||
{ 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") }
|
||
{ this._renderDocuments(signed.documents, "act_pp") }
|
||
</>
|
||
) }
|
||
{ 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={ document.url }
|
||
filename={ document.filename }
|
||
bitrix={ true }
|
||
/>
|
||
</div>
|
||
)) }
|
||
</div>
|
||
) }
|
||
</>
|
||
) }
|
||
</article>
|
||
</div>
|
||
</AccountLayout>
|
||
<Footer/>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
contracts_info: state.contracts_info,
|
||
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));
|