425 lines
14 KiB
JavaScript
425 lines
14 KiB
JavaScript
import React from "react";
|
||
import * as ReactDOM from 'react-dom';
|
||
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 DateInput from "../../components/DatePicker";
|
||
|
||
import InnerMenu from "./../components/InnerMenu";
|
||
|
||
import SignatoriesList from "./components/SignatoriesList";
|
||
import CalculationsList from "./components/CalculationsList";
|
||
|
||
import VariantsList from "./components/VariantsList";
|
||
import Final from "./components/Final";
|
||
|
||
import {
|
||
getContractInfo,
|
||
getContractGraphicChange,
|
||
getContractGraphicChangeVariants,
|
||
getContractGraphicChangeGetCurrent,
|
||
getContractGraphicChangeGetCalculated,
|
||
getContractGraphicChangeSignatories,
|
||
} from "../../../actions";
|
||
import Options from "./components/Options";
|
||
import Comparison from "./components/Comparison";
|
||
|
||
class ChangeGraphicPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
date: null,
|
||
car: null,
|
||
contract_date: null,
|
||
agreement: null,
|
||
rules: null,
|
||
loading: false,
|
||
mode_options: false,
|
||
mode_comparison: false,
|
||
mode_calculation: false,
|
||
mode_final: false,
|
||
calculation_id: undefined,
|
||
signer: undefined,
|
||
signatories: null,
|
||
calculations: null,
|
||
variants: null,
|
||
variants_selected: [],
|
||
variants_unavailable: [],
|
||
variants_loading: false,
|
||
variants_types: [
|
||
{ title: "Изменить дату платежа", type: "change_payment_date", help: "Это подсказка по Изменить дату платежа" },
|
||
{ title: "Изменение параметров страхования", type: "insurance_change", help: "Это подсказка по Изменение параметров страхования" },
|
||
{ title: "Изменение выкупного платежа", type: "last_payment_change", help: "Это подсказка по Изменение формулировки выкупной платеж" },
|
||
{ title: "Лизинговые каникулы", type: "date_offset_change", help: "Это подсказка по Лизинговые каникулы" },
|
||
{ title: "Изменение кол-ва платежей", type: "contract_term_change", help: "Это подсказка по Изменение кол-ва платежей" },
|
||
{ title: "Изменение суммы платежей", type: "sum_pay_change", help: "Это подсказка по Изменение суммы платежей" },
|
||
{ title: "Досрочный выкуп", type: "early_redemption_change", help: "Это подсказка по Досрочный выкуп" },
|
||
//{ title: "Изменение Лизингополучателя", type: "", help: "Это подсказка по Изменение Лизингополучателя" },
|
||
],
|
||
options: null,
|
||
current: null,
|
||
calculated: null,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
console.log("getDerivedStateFromProps", nextProps);
|
||
return {
|
||
date: nextProps.date,
|
||
car: nextProps.car,
|
||
contract_date: nextProps.contract_date,
|
||
agreement: nextProps.agreement,
|
||
rules: nextProps.rules,
|
||
signatories: nextProps.signatories,
|
||
calculations: nextProps.calculations,
|
||
variants: nextProps.variants,
|
||
options: nextProps.options,
|
||
current: nextProps.current,
|
||
calculated: nextProps.calculated,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
//
|
||
ReactDOM.findDOMNode(this).parentNode.style.height = "100%";
|
||
ReactDOM.findDOMNode(this).parentNode.style.display = "flex";
|
||
ReactDOM.findDOMNode(this).parentNode.style.flexDirection = "column";
|
||
ReactDOM.findDOMNode(this).parentNode.style.justifyContent = "spaceBetween";
|
||
ReactDOM.findDOMNode(this).parentNode.style.alignItems = "stretch";
|
||
|
||
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";
|
||
//
|
||
|
||
console.log("ChangePage", "MOUNT", "document.location.hash", document.location.hash);
|
||
if(document.location.hash !== undefined && document.location.hash !== null && document.location.hash !== "")
|
||
{
|
||
if (!this.state.loading && this.props.number !== undefined)
|
||
{
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
const { dispatch, number } = this.props;
|
||
|
||
Promise.all([
|
||
getContractGraphicChangeCalculationsList({ dispatch, number }),
|
||
getContractGraphicChangeSignatories({ dispatch, number }),
|
||
getContractGraphicChangeGetCurrent({ dispatch, number }),
|
||
getContractGraphicChangeGetCalculated({ dispatch, calculation: document.location.hash.replace("#", "") }),
|
||
])
|
||
.then(() =>
|
||
{
|
||
this.setState({ loading: false, mode_calculation: true });
|
||
});
|
||
});
|
||
}
|
||
}
|
||
else
|
||
{
|
||
if (!this.state.loading && this.props.number !== undefined)
|
||
{
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
getContractInfo({
|
||
dispatch: this.props.dispatch,
|
||
number: this.props.number,
|
||
})
|
||
.then((info) =>
|
||
{
|
||
getContractGraphicChange({
|
||
dispatch: this.props.dispatch,
|
||
number: this.props.number,
|
||
})
|
||
.then(() =>
|
||
{
|
||
this.setState({ loading: false });
|
||
})
|
||
.catch(() => {});
|
||
})
|
||
.catch(() => {});
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
componentWillUnmount()
|
||
{
|
||
ReactDOM.findDOMNode(this).parentNode.style.height = "unset";
|
||
ReactDOM.findDOMNode(this).parentNode.style.display = "unset";
|
||
ReactDOM.findDOMNode(this).parentNode.style.flexDirection = "unset";
|
||
ReactDOM.findDOMNode(this).parentNode.style.justifyContent = "unset";
|
||
ReactDOM.findDOMNode(this).parentNode.style.alignItems = "unset";
|
||
|
||
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";
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
//console.log("ChangePage", "CDM", "document.location.hash", document.location.hash);
|
||
if(document.location.hash)
|
||
{
|
||
}
|
||
}
|
||
|
||
_handle_onVariants = () =>
|
||
{
|
||
this.setState({ mode_options: false, mode_comparison: false });
|
||
}
|
||
|
||
_handle_onVariantSelect = (type) =>
|
||
{
|
||
const selected = [ ...this.state.variants_selected ];
|
||
|
||
if(selected.indexOf(type) > -1)
|
||
{
|
||
selected.splice(selected.indexOf(type), 1)
|
||
}
|
||
else
|
||
{
|
||
selected.push(type);
|
||
}
|
||
|
||
this.setState({ variants_selected: selected, variants_loading: true }, () =>
|
||
{
|
||
console.log(this.state.variants_selected);
|
||
|
||
const { variants_selected, variants_types } = this.state;
|
||
const variants = {};
|
||
|
||
for(let i in variants_types)
|
||
{
|
||
if(variants_selected.indexOf(variants_types[i].type) > -1)
|
||
{
|
||
variants[ variants_types[i].type ] = true;
|
||
}
|
||
else
|
||
{
|
||
variants[ variants_types[i].type ] = false;
|
||
}
|
||
}
|
||
|
||
console.log("variantsvariantsvariantsvariantsvariants???????????");
|
||
console.log(variants);
|
||
|
||
getContractGraphicChangeVariants({ dispatch: this.props.dispatch, number: this.props.number, variants })
|
||
.then(() =>
|
||
{
|
||
this.setState({ variants_loading: false });
|
||
});
|
||
});
|
||
}
|
||
|
||
_handle_onOptions = () =>
|
||
{
|
||
this.setState({ mode_options: true, mode_comparison: false });
|
||
}
|
||
|
||
_handle_onSigner = (signer_id) =>
|
||
{
|
||
this.setState({ signer: signer_id });
|
||
}
|
||
|
||
_handle_onCalculate = () =>
|
||
{
|
||
this.setState({ mode_options: false, mode_comparison: true });
|
||
}
|
||
|
||
_handle_onCalculation = (calculation_id) =>
|
||
{
|
||
this.setState({ loading: true, mode_options: false, calculation_id: calculation_id }, () =>
|
||
{
|
||
const { dispatch, number } = this.props;
|
||
|
||
Promise.all([
|
||
getContractGraphicChangeGetCurrent({ dispatch, number }),
|
||
getContractGraphicChangeGetCalculated({ dispatch, calculation: calculation_id }),
|
||
])
|
||
.then(() =>
|
||
{
|
||
this.setState({ loading: false, mode_comparison: true, });
|
||
});
|
||
});
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { loading, mode_options, mode_comparison, mode_calculation, mode_final, date, car, contract_date, agreement, rules, signer, signatories, calculations, calculation_id, variants, variants_loading, variants_selected, variants_types, variants_unavailable, options, current, calculated, } = this.state;
|
||
const { number } = this.props;
|
||
|
||
console.log("render", "signatories", signatories);
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header { ...this.props } />
|
||
<main style={{ display: "flex", flexDirection: "column", flex: 1 }}>
|
||
<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>
|
||
{ loading ? (
|
||
<div className="aside_container about">
|
||
<InnerMenu number={ number } { ...this.props } />
|
||
<article className="changes">
|
||
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
|
||
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||
</div>
|
||
</article>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{ mode_comparison || mode_calculation || mode_final ? (
|
||
<>
|
||
{ mode_final ? (
|
||
<div className="aside_container about">
|
||
<Final number={ number }/>
|
||
</div>
|
||
) : (
|
||
<div className="aside_container about">
|
||
<Comparison
|
||
signer={ signer }
|
||
signatories={ signatories }
|
||
calculations={ calculations }
|
||
calculation_id={ calculation_id }
|
||
current={ current }
|
||
calculated={ calculated }
|
||
onOptions={ this._handle_onOptions } onSigner={ this._handle_onSigner }
|
||
/>
|
||
</div>
|
||
) }
|
||
</>
|
||
) : (
|
||
<div className="aside_container about">
|
||
<InnerMenu number={ number } { ...this.props } />
|
||
<article className="changes">
|
||
{ mode_options ? (
|
||
<Options
|
||
dispatch={ this.props.dispatch }
|
||
number={ number }
|
||
variants={ variants }
|
||
options={ options }
|
||
onVariants={ this._handle_onVariants }
|
||
onCalculate={ this._handle_onCalculate }
|
||
/>
|
||
) : (
|
||
<>
|
||
{ variants !== null && (
|
||
<>
|
||
{ variants.enable_addcontract === false ? (
|
||
<div className="block alert">
|
||
<p>
|
||
Внимание! Существует активное неподписанное дополнительное
|
||
соглашение. Расчёт новых изменений невозможен
|
||
</p>
|
||
<Link href={`/contract/${ number }/agreement`}><a>Подробнее</a></Link>
|
||
</div>
|
||
) : (
|
||
<></>
|
||
) }
|
||
{ calculations !== undefined && calculations !== null && calculations.length > 0 && (
|
||
<div className="block">
|
||
<p className="title">Предварительные расчеты</p>
|
||
<CalculationsList number={ number } calculations={ calculations } onCalculation={ this._handle_onCalculation }/>
|
||
</div>
|
||
) }
|
||
<div className="block">
|
||
<p className="title">
|
||
Подписанты
|
||
<Link href=""><a>Добавить подписанта</a></Link>
|
||
</p>
|
||
<SignatoriesList signatories={ signatories }/>
|
||
</div>
|
||
<VariantsList
|
||
onOptions={ this._handle_onOptions }
|
||
onVariant={ this._handle_onVariantSelect }
|
||
variants={ variants }
|
||
variants_types={ variants_types }
|
||
selected={ variants_selected }
|
||
loading={ variants_loading }
|
||
blocked={ variants.enable_addcontract === false ? false : false }
|
||
/>
|
||
{/*}
|
||
{ variants.enable_addcontract !== false && (
|
||
) }
|
||
{*/}
|
||
</>
|
||
) }
|
||
</>
|
||
) }
|
||
</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,
|
||
signatories: state.contract.change.signatories,
|
||
calculations: state.contract.change.calculations,
|
||
variants: state.contract.change.variants,
|
||
options: state.contract.change.options,
|
||
current: state.contract.change.current,
|
||
calculated: state.contract.change.calculated,
|
||
};
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||
(store) =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
return {
|
||
props: {
|
||
number: query.number,
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ChangeGraphicPage)); |