329 lines
11 KiB
JavaScript
329 lines
11 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 Link from "next/link";
|
||
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 DateInput from "../components/DatePicker";
|
||
import SignatoriesList from "./change/components/SignatoriesList";
|
||
import CalculationsList from "./change/components/CalculationsList";
|
||
|
||
import {
|
||
getContractInfo,
|
||
getContractAgreement,
|
||
getContractRules,
|
||
getFile,
|
||
} from "../../actions";
|
||
|
||
class ChangeGraphicPage 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);
|
||
|
||
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 className="changes">
|
||
<div className="block alert">
|
||
<p>
|
||
Внимание! Существует активное неподписанное дополнительное
|
||
соглашение. Расчёт новых изменений невозможен
|
||
</p>
|
||
<Link href="#">
|
||
<a>Подробнее</a>
|
||
</Link>
|
||
</div>
|
||
<div className="block">
|
||
<p className="title">Предварительные расчеты</p>
|
||
<CalculationsList />
|
||
</div>
|
||
<div className="block">
|
||
<p className="title">
|
||
Подписанты
|
||
<Link href="">
|
||
<a>Добавить подписанта</a>
|
||
</Link>
|
||
</p>
|
||
<SignatoriesList />
|
||
</div>
|
||
<div className="block">
|
||
<p className="title">Варианты изменения графиков</p>
|
||
<form>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_1" name="options" />
|
||
<label htmlFor="option_1">Изменить дату платежа</label>
|
||
<div className="help_tooltip">
|
||
<div className="help_icon">
|
||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
|
||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||
</svg>
|
||
</div>
|
||
<div className="help_content ">
|
||
{" "}
|
||
{/* opened */}
|
||
<div>
|
||
<p>Какой-то описательный текст</p>
|
||
<p className="button">Закрыть</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_2" name="options" />
|
||
<label htmlFor="option_2">
|
||
Изменение параметров страхования
|
||
</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_3" name="options" />
|
||
<label htmlFor="option_3">
|
||
Изменение формулировки выкупной платеж
|
||
</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_4" name="options"/>
|
||
<label htmlFor="option_4">Лизинговые каникулы</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_5" name="options" />
|
||
<label htmlFor="option_5">
|
||
Изменение кол-ва платежей
|
||
</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_6" name="options" />
|
||
<label htmlFor="option_6">Изменение суммы платежей</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_7" name="options" />
|
||
<label htmlFor="option_7">Досрочный выкуп</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="option_8" name="options" />
|
||
<label htmlFor="option_8">Изменение Лизингополучателя</label>
|
||
</div>
|
||
<button className="button button-blue" disabled>
|
||
Далее
|
||
</button>
|
||
</form>
|
||
</div>
|
||
<div className="block">
|
||
<p className="title">Варианты изменения графиков</p>
|
||
<form className="calc">
|
||
<div className="form_field">
|
||
<label>Дата платежа</label>
|
||
<DateInput placeholder="" id={"date_to"} onChange={ (date) => this.setState({ date_to: date }) } />
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="checkbox" hidden id="fix_pay" name="fix_pay" />
|
||
<label htmlFor="fix_pay">
|
||
Фиксировать послединий платеж
|
||
</label>
|
||
<div className="help_tooltip">
|
||
<div className="help_icon">
|
||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
|
||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||
</svg>
|
||
</div>
|
||
<div className="help_content ">
|
||
{" "}
|
||
{/* opened */}
|
||
<div>
|
||
<p>Какой-то описательный текст</p>
|
||
<p className="button">Закрыть</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="form_field">
|
||
<label>Тип каникул</label>
|
||
<div className="form_field">
|
||
<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" />
|
||
<label htmlFor="weeekend_type_1">
|
||
Фиксировать послединий платеж
|
||
</label>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" />
|
||
<label htmlFor="weeekend_type_2">
|
||
Фиксировать послединий платеж
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div className="form_field">
|
||
<label>Увеличить график на</label>
|
||
<select>
|
||
<option>1 месяц (37 платеж)</option>
|
||
</select>
|
||
</div>
|
||
<div className="form_field">
|
||
<label>Увеличить график на</label>
|
||
<input type="number" placeholder="Укажите сумму" />
|
||
<div className="help_tooltip">
|
||
<div className="help_icon">
|
||
<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
|
||
<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
|
||
</svg>
|
||
</div>
|
||
<div className="help_content ">
|
||
{" "}
|
||
{/* opened */}
|
||
<div>
|
||
<p>Какой-то описательный текст</p>
|
||
<p className="button">Закрыть</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="btn_group">
|
||
<button className="button button-gray">Назад</button>
|
||
<button className="button button-blue">Рассчитать график</button>
|
||
</div>
|
||
</form>
|
||
</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,
|
||
number: null,
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ChangeGraphicPage)); |