382 lines
16 KiB
JavaScript
382 lines
16 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 numeral from "numeral";
|
||
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 { getContractInfo, getContractHelpCard, getContractInsurance, getContractRegistration, getContractTelematic } from './../../actions';
|
||
|
||
class ContractServicesPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
opened: [],
|
||
date: null,
|
||
car: null,
|
||
contract_date: null,
|
||
loading: false,
|
||
helpcard: null,
|
||
insurance: null,
|
||
registration: null,
|
||
telematic: null,
|
||
insurance_location_checked: false,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
date: nextProps.date,
|
||
car: nextProps.car,
|
||
contract_date: nextProps.contract_date,
|
||
helpcard: nextProps.helpcard,
|
||
insurance: nextProps.insurance,
|
||
registration: nextProps.registration,
|
||
telematic: nextProps.telematic,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
console.log("document.location.hash", document.location.hash);
|
||
|
||
if(!this.state.loading && this.props.number !== undefined)
|
||
{
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
getContractInfo({ dispatch: this.props.dispatch, number: this.props.number });
|
||
Promise.all([
|
||
new Promise((resolve) => { getContractHelpCard({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}),
|
||
new Promise((resolve) => { getContractInsurance({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}),
|
||
new Promise((resolve) => { getContractRegistration({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}),
|
||
new Promise((resolve) => { getContractTelematic({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}),
|
||
])
|
||
.then(() => {
|
||
this.setState({ loading: false });
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if(prevState.insurance === null && this.state.insurance !== null)
|
||
{
|
||
if(!this.state.insurance_location_checked)
|
||
{
|
||
this.setState({ insurance_location_checked: true }, () =>
|
||
{
|
||
if(document.location.hash.indexOf("insurance") > -1)
|
||
{
|
||
const o = [ ...this.state.opened ];
|
||
o.push("insurance");
|
||
this.setState({ opened: o });
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
_handle_onCard = (card) =>
|
||
{
|
||
const opened = [ ...this.state.opened ];
|
||
if(opened.indexOf(card) === -1)
|
||
{
|
||
opened.push(card);
|
||
}
|
||
else
|
||
{
|
||
opened.splice(opened.indexOf(card), 1);
|
||
}
|
||
|
||
this.setState({ opened: opened });
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { opened, loading, date, car, contract_date, helpcard, insurance, registration, telematic, } = this.state;
|
||
const { number } = this.props;
|
||
|
||
console.log("helpcard");
|
||
console.log(helpcard);
|
||
|
||
console.log("insurance");
|
||
console.log(insurance);
|
||
|
||
console.log("registration");
|
||
console.log(registration);
|
||
|
||
console.log("telematic");
|
||
console.log(telematic);
|
||
|
||
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>
|
||
{ 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="dropdown_blocks_list zero-margin">
|
||
|
||
<div className={`dropdown_block ${ opened.indexOf("ratcard") > -1 ? 'open' : '' }`}>
|
||
<div className="block_header" onClick={ () => this._handle_onCard('ratcard') }>
|
||
<p className="with-icon">
|
||
<img src="/assets/images/lk/additional-1.svg" alt="Карта РАТ" width="32px" height="32px" />
|
||
Карта РАТ
|
||
</p>
|
||
<button className="block_toggle"></button>
|
||
</div>
|
||
{ helpcard !== undefined && helpcard !== null && helpcard.length > 0 ? (
|
||
helpcard.map((entry, index) => (
|
||
<React.Fragment key={ index }>
|
||
{ entry.card_number !== null ? (
|
||
<div className="block_body">
|
||
<div className="company">
|
||
<p className="title">РАТ</p>
|
||
<ul>
|
||
<li>Номер карты: <b>{ entry.card_number }</b></li>
|
||
<li>Тип карты: <b>{ entry.card_type }</b></li>
|
||
<li>Действует до: <b>{ moment(entry.date).format("DD.MM.YYYY") }</b></li>
|
||
</ul>
|
||
</div>
|
||
<>
|
||
{ entry && entry.description && (
|
||
<p dangerouslySetInnerHTML={{ __html: entry.description.replace(/;/g, ";<br/>") }}/>
|
||
) }
|
||
</>
|
||
</div>
|
||
) : (
|
||
<div className="block_body"><p>Нет данных</p></div>
|
||
) }
|
||
</React.Fragment>
|
||
))
|
||
) : (
|
||
<div className="block_body"><p>Нет данных</p></div>
|
||
) }
|
||
</div>
|
||
|
||
<div className={`dropdown_block ${ opened.indexOf("insurance") > -1 ? 'open' : '' }`}>
|
||
<div className="block_header" onClick={ () => this._handle_onCard('insurance') }>
|
||
<p className="with-icon">
|
||
<img src="/assets/images/lk/additional-2.svg" alt="Страхование" width="32px" height="32px" />
|
||
Страхование
|
||
</p>
|
||
<button className="block_toggle"></button>
|
||
</div>
|
||
<div className="block_body full">
|
||
<div className="company filled">
|
||
<p className="title">КАСКО</p>
|
||
<ul>
|
||
<li>Страховая компания: <b>Согласие</b></li>
|
||
<li>Сайт: <b>www.sogl.ru</b></li>
|
||
<li>Телефон: <b>34234324324324</b></li>
|
||
<li>Номер полиса: <b style={{color: "#1C01A9"}}>34234324324324</b></li>
|
||
<li>Период действия: <b>01/01/2020 - 01/01/2025</b></li>
|
||
<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>3 400 000,00 ₽ ₽</b></li>
|
||
<li className="alert">Обращаем Ваше внимание, что пролонгация полиса ОСАГО на второй и последующие периоды осуществляется Лизингополучателем самостоятельно</li>
|
||
</ul>
|
||
<div className="action">
|
||
<button className="button button-blue">Скачать счет на оплату</button>
|
||
</div>
|
||
</div>
|
||
|
||
{ insurance !== undefined && insurance !== null ? (
|
||
<>
|
||
{ insurance.kasko !== undefined && insurance.kasko !== null && insurance.kasko !== "" && insurance.kasko.map !== undefined && insurance.kasko.map((entry, index) => (
|
||
<React.Fragment key={ index }>
|
||
<div className= { `company ${ entry.period_type === "prolong" && "filled" }` }>
|
||
<p className="title">КАСКО</p>
|
||
<ul>
|
||
{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
|
||
{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
|
||
{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
|
||
{ entry.number && (<li>Номер полиса: <b>{ entry.number }</b></li>) }
|
||
{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
|
||
{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>) }
|
||
{ entry.period_type === "prolong" && (
|
||
<li className="alert">Обращаем Ваше внимание, что пролонгация полиса КАСКО на второй и последующие периоды осуществляется Лизингополучателем самостоятельно</li>
|
||
) }
|
||
</ul>
|
||
</div>
|
||
{ entry.description && (<p>{ entry.description }</p>) }
|
||
</React.Fragment>
|
||
)) }
|
||
{ insurance.osago !== undefined && insurance.osago !== null && insurance.osago !== "" && insurance.osago.map !== undefined && insurance.osago.map((entry, index) => (
|
||
<React.Fragment key={ index }>
|
||
<div className="company">
|
||
<p className="title">ОСАГО</p>
|
||
<ul>
|
||
{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
|
||
{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
|
||
{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
|
||
{ entry.number && (<li>Номер полиса: <b>{ entry.number }</b></li>) }
|
||
{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
|
||
{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>) }
|
||
</ul>
|
||
</div>
|
||
{ entry.description && (<p>{ entry.description }</p>) }
|
||
</React.Fragment>
|
||
)) }
|
||
{ insurance.nsib !== undefined && insurance.nsib !== null && insurance.nsib !== "" && insurance.nsib.map !== undefined && insurance.nsib.map((entry, index) => (
|
||
<React.Fragment key={ index }>
|
||
<div className="company">
|
||
<p className="title">НСИБ</p>
|
||
<ul>
|
||
{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
|
||
{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
|
||
{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
|
||
{ entry.number && (<li>Номер полиса: <b>{ entry.number }</b></li>) }
|
||
{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
|
||
{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>) }
|
||
</ul>
|
||
</div>
|
||
{ entry.description && (<p>{ entry.description }</p>) }
|
||
</React.Fragment>
|
||
)) }
|
||
</>
|
||
) : (
|
||
<div className="block_body"><p>Нет данных</p></div>
|
||
) }
|
||
</div>
|
||
</div>
|
||
<div className={`dropdown_block ${ opened.indexOf("registration") > -1 ? 'open' : '' }`}>
|
||
<div className="block_header" onClick={ () => this._handle_onCard('registration') }>
|
||
<p className="with-icon">
|
||
<img src="/assets/images/lk/additional-3.svg" alt="Регистрация" width="32px" height="32px" />
|
||
Регистрация
|
||
</p>
|
||
<button className="block_toggle"></button>
|
||
</div>
|
||
{ registration !== undefined && registration !== null && registration.length > 0 ? registration.map((entry, index) =>
|
||
(
|
||
<div className="block_body" key={ index }>
|
||
<div className="company">
|
||
<p className="title">ГИБДД</p>
|
||
<ul>
|
||
{ entry.package && (
|
||
<li>Пакет услуг: <b>{ entry.package }</b></li>
|
||
) }
|
||
{ entry.amount && (
|
||
<li>Стоимость: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>
|
||
) }
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<div className="block_body"><p>Нет данных</p></div>
|
||
) }
|
||
</div>
|
||
<div className={`dropdown_block ${ opened.indexOf("telematic") > -1 ? 'open' : '' }`}>
|
||
<div className="block_header" onClick={ () => this._handle_onCard('telematic') }>
|
||
<p className="with-icon">
|
||
<img src="/assets/images/lk/additional-4.svg" alt="Телематика" width="32px" height="32px" />
|
||
Телематика
|
||
</p>
|
||
<button className="block_toggle"></button>
|
||
</div>
|
||
{ telematic !== undefined && telematic !== null && telematic.length > 0 ? telematic.map((entry, index) =>
|
||
(
|
||
<div className="block_body" key={ index }>
|
||
<div className="company">
|
||
<ul style={{ marginLeft: "0px" }}>
|
||
{ entry.provider && (
|
||
<li>Поставщик: <b>{ entry.provider }</b></li>
|
||
) }
|
||
{ entry.equipment && (
|
||
<li>Оборудование: <b>{ entry.equipment }</b></li>
|
||
) }
|
||
{ entry.amount && (
|
||
<li>Стоимость: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>
|
||
) }
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<div className="block_body"><p>Нет данных</p></div>
|
||
)}
|
||
{/*}
|
||
<div className="block_body">
|
||
<div className="company">
|
||
<ul>
|
||
<li>Сайт: <b>www.telematic.ru</b></li>
|
||
<li>Логин: <b>test</b></li>
|
||
<li>Пароль: <b>test</b></li>
|
||
</ul>
|
||
</div>
|
||
<p>Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент</p>
|
||
</div>
|
||
{*/}
|
||
</div>
|
||
|
||
</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,
|
||
helpcard: state.contract.helpcard,
|
||
insurance: state.contract.insurance,
|
||
registration: state.contract.registration,
|
||
telematic: state.contract.telematic,
|
||
}
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
return {
|
||
props: {
|
||
number: query.number,
|
||
}
|
||
}
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ContractServicesPage)); |