329 lines
14 KiB
JavaScript
329 lines
14 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,
|
||
};
|
||
}
|
||
|
||
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()
|
||
{
|
||
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 });
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
_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;
|
||
|
||
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 }` : '' }</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 filled 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">
|
||
{ 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">
|
||
<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>{ numeral(entry.amount).format(' ., ') } ₽</b></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>{ 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>{ 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>{ 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>{ 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)); |