653 lines
18 KiB
JavaScript
653 lines
18 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 'moment/locale/ru';
|
||
|
||
import numeral from "numeral";
|
||
import { SpinnerCircular } from "spinners-react";
|
||
import pluralize from "pluralize-ru";
|
||
|
||
import { reduxWrapper } from "../../store";
|
||
|
||
import Header from "../components/Header";
|
||
import Footer from "../components/Footer";
|
||
import InnerMenu from "./components/InnerMenu";
|
||
import Company from "../components/Company";
|
||
import DateInput from "../components/DatePicker";
|
||
import DownloadPrintFormPdfButton from "../components/DownloadPrintFormPdfButton";
|
||
import DownloadFinesPdfButton from "../components/DownloadFinesPdfButton";
|
||
|
||
import PenaltiesCalculatorForm from "./components/PenaltiesCalculatorForm";
|
||
|
||
import {
|
||
getContractInfo,
|
||
getContractDocuments,
|
||
getReconciliationFile,
|
||
getContractPenalties,
|
||
} from "../../actions";
|
||
|
||
const TYPES = {
|
||
upd: "УПД по очередным платежам",
|
||
upd_avans: "УПД по авансовым платежам",
|
||
billfines: "Счета-уведомления на пени",
|
||
billgibdd: "BillGIBDD",
|
||
fines: "Штрафы ГИБДД",
|
||
};
|
||
|
||
class ContractDocumentsPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
opened: [],
|
||
date: null,
|
||
car: null,
|
||
contract_date: null,
|
||
documents: null,
|
||
loading: false,
|
||
valid_date_start: null,
|
||
valid_date_end: null,
|
||
period_date_start: null,
|
||
period_date_end: null,
|
||
reconciliation_requested: false,
|
||
reconciliation_disabled: false,
|
||
penalties: false,
|
||
penalties_date: moment().format("YYYY.MM.DD"),
|
||
penalties_result: undefined,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
date: nextProps.date,
|
||
car: nextProps.car,
|
||
contract_date: nextProps.contract_date,
|
||
documents: nextProps.documents,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
if (!this.state.loading && this.props.number !== undefined)
|
||
{
|
||
const de = moment().toDate();
|
||
this.setState(
|
||
{ loading: true, period_date_end: de, valid_date_end: de },
|
||
() => {
|
||
getContractInfo({
|
||
dispatch: this.props.dispatch,
|
||
number: this.props.number,
|
||
});
|
||
|
||
getContractDocuments({
|
||
dispatch: this.props.dispatch,
|
||
number: this.props.number,
|
||
})
|
||
.then(() => {
|
||
this.setState({ loading: false });
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
);
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if (this.state.period_date_start === null)
|
||
{
|
||
if (
|
||
prevState.contract_date === null &&
|
||
this.state.contract_date !== null
|
||
) {
|
||
const ds = moment(this.state.contract_date).toDate();
|
||
this.setState({ period_date_start: ds, valid_date_start: ds });
|
||
}
|
||
}
|
||
}
|
||
|
||
_handle_onReconciliationFileRequest = () =>
|
||
{
|
||
const { number } = this.props;
|
||
const { reconciliation_requested, period_date_start, period_date_end } = this.state;
|
||
|
||
if (!reconciliation_requested)
|
||
{
|
||
this.setState({ reconciliation_requested: true }, () =>
|
||
{
|
||
const date_from = moment(period_date_start).format("YYYY-MM-DD");
|
||
const date_to = moment(period_date_end).format("YYYY-MM-DD");
|
||
|
||
getReconciliationFile({
|
||
contract: number,
|
||
date_from: date_from,
|
||
date_to: date_to,
|
||
filename: `${number}_reconciliation_${date_from}_${date_to}.pdf`,
|
||
})
|
||
.then(() => {
|
||
this.setState({ reconciliation_requested: false });
|
||
})
|
||
.catch(() => {
|
||
this.setState({ reconciliation_requested: false });
|
||
});
|
||
});
|
||
}
|
||
};
|
||
|
||
_handle_onPeriodDate_start = (date) =>
|
||
{
|
||
const {
|
||
valid_date_start,
|
||
valid_date_end,
|
||
period_date_start,
|
||
period_date_end,
|
||
} = this.state;
|
||
const md = moment(date, "DD.MM.YYYY");
|
||
|
||
if (md.isValid())
|
||
{
|
||
if (date >= valid_date_start && date <= valid_date_end)
|
||
{
|
||
if (date < period_date_end)
|
||
{
|
||
this.setState({
|
||
period_date_start: date,
|
||
reconciliation_disabled: false,
|
||
});
|
||
}
|
||
else
|
||
{
|
||
this.setState({
|
||
period_date_start: date,
|
||
reconciliation_disabled: true,
|
||
});
|
||
}
|
||
}
|
||
else
|
||
{
|
||
this.setState({
|
||
period_date_start: date,
|
||
reconciliation_disabled: true,
|
||
});
|
||
}
|
||
}
|
||
else
|
||
{
|
||
this.setState({ reconciliation_disabled: true });
|
||
}
|
||
};
|
||
|
||
_handle_onPeriodDate_end = (date) =>
|
||
{
|
||
console.log("_handle_onPeriodDate_end", "date", date);
|
||
|
||
const {
|
||
valid_date_start,
|
||
valid_date_end,
|
||
period_date_start,
|
||
period_date_end,
|
||
} = this.state;
|
||
|
||
if (moment(date).isValid())
|
||
{
|
||
if (date >= valid_date_start && date <= valid_date_end)
|
||
{
|
||
if (date > period_date_start)
|
||
{
|
||
this.setState({
|
||
period_date_end: date,
|
||
reconciliation_disabled: false,
|
||
});
|
||
}
|
||
else
|
||
{
|
||
this.setState({
|
||
period_date_end: date,
|
||
reconciliation_disabled: true,
|
||
});
|
||
}
|
||
}
|
||
else
|
||
{
|
||
this.setState({ period_date_end: date, reconciliation_disabled: true });
|
||
}
|
||
}
|
||
else
|
||
{
|
||
this.setState({ reconciliation_disabled: true });
|
||
}
|
||
};
|
||
|
||
_handle_onGroup = (group) =>
|
||
{
|
||
console.log("group", group);
|
||
const opened = [...this.state.opened];
|
||
|
||
if (opened.indexOf(group) < 0)
|
||
{
|
||
opened.push(group);
|
||
}
|
||
else
|
||
{
|
||
opened.splice(opened.indexOf(group), 1);
|
||
}
|
||
|
||
this.setState({ opened: opened });
|
||
};
|
||
|
||
_renderDocuments = (documents, type) =>
|
||
{
|
||
const { number } = this.props;
|
||
const { opened } = this.state;
|
||
|
||
if (documents !== undefined && documents !== null)
|
||
{
|
||
if (documents.length > 0)
|
||
{
|
||
return (
|
||
<>
|
||
<div className="block-column">
|
||
<div
|
||
className={`dropdown_block ${ opened.indexOf(type) > -1 ? "open" : "" }`}
|
||
>
|
||
<div className="block_header default">
|
||
<p>{TYPES[type]}</p>
|
||
</div>
|
||
</div>
|
||
<div className="dosc_list medium-icon">
|
||
{ documents
|
||
.slice(0, opened.indexOf(type) > -1 ? documents.length : 3)
|
||
.map((doc, index) =>
|
||
{
|
||
console.log("doc", doc);
|
||
|
||
return (
|
||
<div className="row" key={index}>
|
||
<p
|
||
className="doc_name i-pdf i-medium"
|
||
data-format={doc.extension}
|
||
>
|
||
{doc.num} от {moment(doc.date).format("DD.MM.YYYY")}
|
||
</p>
|
||
<DownloadPrintFormPdfButton
|
||
className="download-icon"
|
||
filename={`${number}_${doc.type}_${doc.num}.${doc.extension}`}
|
||
contract={number}
|
||
num={doc.num}
|
||
date={doc.date}
|
||
type={doc.type}
|
||
/>
|
||
</div>
|
||
);
|
||
}) }
|
||
{ opened.indexOf(type) < 0 && documents.length > 3 && (
|
||
<div
|
||
className="row click-more"
|
||
onClick={ () => this._handle_onGroup(type) }
|
||
>
|
||
<p>
|
||
Еще {documents.length - 3}{" "}
|
||
{ pluralize(
|
||
documents.length - 3,
|
||
"документов",
|
||
"документ",
|
||
"документа",
|
||
"документов"
|
||
) }
|
||
</p>
|
||
</div>
|
||
) }
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (type !== "upd_avans" && type !== "billfines")
|
||
{
|
||
return (
|
||
<>
|
||
<div className="block-column">
|
||
<div
|
||
className={`dropdown_block ${ opened.indexOf(type) > -1 ? "open" : "" }`}
|
||
>
|
||
<div className="block_header">
|
||
<p>{ TYPES[ type ] }</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p>Документов пока еще нет.</p>
|
||
<p> </p>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
_handle_onPenaltiesShow = (date) =>
|
||
{
|
||
console.log("_handle_onPenaltiesShow", "date", date);
|
||
const { number } = this.props;
|
||
|
||
window.scrollTo(0, 0);
|
||
this.setState({ penalties: true, penalties_date: date, penalties_result: undefined }, () =>
|
||
{
|
||
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";
|
||
|
||
getContractPenalties({ number, date })
|
||
.then((result) =>
|
||
{
|
||
console.log("result", result);
|
||
this.setState({ penalties_result: result });
|
||
})
|
||
.catch(() =>
|
||
{
|
||
|
||
});
|
||
});
|
||
}
|
||
|
||
_handle_onPenaltiesHide = () =>
|
||
{
|
||
this.setState({ penalties: false, penalties_result: undefined }, () =>
|
||
{
|
||
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";
|
||
});
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { number } = this.props;
|
||
const {
|
||
loading,
|
||
date,
|
||
car,
|
||
contract_date,
|
||
documents,
|
||
period_date_start,
|
||
period_date_end,
|
||
valid_date_start,
|
||
valid_date_end,
|
||
reconciliation_requested,
|
||
reconciliation_disabled,
|
||
opened,
|
||
penalties,
|
||
penalties_date,
|
||
penalties_result,
|
||
} = this.state;
|
||
|
||
console.log("documentsdocumentsdocumentsdocumentsdocuments");
|
||
console.log(documents);
|
||
|
||
console.log("opened");
|
||
console.log(opened);
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header { ...this.props }/>
|
||
{ penalties ? (
|
||
<main style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left" style={{ alignItems: "center", flexWrap: "wrap", alignItems: "flex-start" }}>
|
||
<button className="back" onClick={ this._handle_onPenaltiesHide }>Назад</button>
|
||
<div style={{ flexDirection: "column" }}>
|
||
<h1 className="section_title">Расчет планируемых пени</h1>
|
||
<h5 style={{ fontSize: "14px" }}>
|
||
Договор №{ number }
|
||
{ 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>
|
||
</div>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<article className="fine">
|
||
<div className="fine_block">
|
||
<div className="fine_col">
|
||
<p>
|
||
<span>Пени на дату</span>
|
||
{ moment(penalties_date, "YYYY.MM.DD").format("DD.MM.YYYY") }
|
||
</p>
|
||
</div>
|
||
{ penalties_result === undefined ? (
|
||
<div
|
||
style={{ minHeight: 200, 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>
|
||
) : (
|
||
<>
|
||
{ penalties_result.length > 0 ? (
|
||
<div className="fine_col">
|
||
{ penalties_result.map((bill, index) => (
|
||
<p key={ index }>
|
||
{ moment(bill.dateBillout, "YYYY-MM-DD").format("MMMM") }
|
||
<span>{ numeral(bill.sumBill).format(' ., ') } ₽</span>
|
||
</p>
|
||
)) }
|
||
</div>
|
||
) : (
|
||
<p>К сожалению на указанную дату расчет пени невозможен.</p>
|
||
) }
|
||
</>
|
||
)}
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
) : (
|
||
<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 { ...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="reconciliation_form">
|
||
<p>Акт сверки</p>
|
||
<div className="form_group">
|
||
<div className="form_field">
|
||
<DateInput
|
||
placeholder="Дата начала периода"
|
||
value={period_date_start}
|
||
min={valid_date_start}
|
||
max={valid_date_end}
|
||
onChange={this._handle_onPeriodDate_start}
|
||
/>
|
||
</div>
|
||
<div className="form_field">
|
||
<DateInput
|
||
placeholder="Дата окончания периода"
|
||
value={period_date_end}
|
||
min={valid_date_start}
|
||
max={valid_date_end}
|
||
onChange={this._handle_onPeriodDate_end}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="form_group">
|
||
<button
|
||
className="button button-blue"
|
||
disabled={reconciliation_disabled}
|
||
onClick={() => {
|
||
this._handle_onReconciliationFileRequest();
|
||
}}
|
||
>
|
||
<>
|
||
{reconciliation_requested ? (
|
||
<SpinnerCircular size={ 24 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)"/>
|
||
) : (
|
||
"Скачать"
|
||
)}
|
||
</>
|
||
</button>
|
||
{/*<button className="button button-blue">Отправить в ЭДО</button>*/}
|
||
</div>
|
||
</div>
|
||
<div className="dropdown_blocks_list">
|
||
{documents !== undefined && documents !== null ? (
|
||
<>
|
||
{this._renderDocuments(documents.upd, "upd")}
|
||
{this._renderDocuments(
|
||
documents.upd_avans,
|
||
"upd_avans"
|
||
)}
|
||
{this._renderDocuments(
|
||
documents.billfines,
|
||
"billfines"
|
||
)}
|
||
</>
|
||
) : null}
|
||
{ documents !== undefined && documents !== null && documents.billfines !== undefined && documents.billfines !== null && documents.billfines.length > 0 && (
|
||
<PenaltiesCalculatorForm onPenalties={ this._handle_onPenaltiesShow }/>
|
||
) }
|
||
</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,
|
||
documents: state.contract.documents,
|
||
};
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||
(store) =>
|
||
async ({ req, res, query }) => {
|
||
return {
|
||
props: {
|
||
number: query.number,
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ContractDocumentsPage));
|
||
|
||
{
|
||
/*}
|
||
<div className="block_body">
|
||
<div className="transaction_detail">
|
||
<p>№ постановления: <b>3432434242334</b></p>
|
||
<ul>
|
||
<li>Сумма: <b>3 000,00 р.</b></li>
|
||
<li>Дата: <b>01/01/2020</b></li>
|
||
<li>Статус: <b className="success">Оплачен</b></li>
|
||
<li>Штраф: п. 1.15 - Несоблюдение правил парковки </li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{*/
|
||
}
|