266 lines
7.9 KiB
JavaScript
266 lines
7.9 KiB
JavaScript
import React from "react";
|
||
import Link from "next/link";
|
||
import { connect } from "react-redux";
|
||
|
||
import { logout, getEvents, getAppeals } from "../../../actions";
|
||
import NotificationsList from "./NotificationsList";
|
||
|
||
class Header extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
observer: false,
|
||
menuOpened: false,
|
||
notificationsOpened: false,
|
||
messagesOpened: false,
|
||
events: [],
|
||
events_loaded: false,
|
||
appeals: 0,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
observer: nextProps.observer,
|
||
events: nextProps.events,
|
||
events_loaded: nextProps.events_loaded,
|
||
appeals: nextProps.appeals,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
console.log("Header", "CDM");
|
||
getEvents({ dispatch: this.props.dispatch });
|
||
console.log("Header", "CDM", "222222");
|
||
getAppeals({ dispatch: this.props.dispatch });
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState)
|
||
{
|
||
if(!prevState.events_loaded)
|
||
{
|
||
//this.setState({ events_loaded: true });
|
||
}
|
||
}
|
||
|
||
_getActiveLink = (route) =>
|
||
{
|
||
if (route === "/") return "Договоры";
|
||
if (route.indexOf("/documents/") > -1) return "Взаиморасчеты и закрывающие документы";
|
||
if (route.indexOf("/settings/") > -1) return "Настройки";
|
||
if (route.indexOf("/contract") === 0) return "Договоры";
|
||
if (route.indexOf("/support") === 0) return "Обращения";
|
||
if (route.indexOf("/events") === 0) return "События";
|
||
|
||
return null;
|
||
};
|
||
|
||
_handle_onToggleMenu = () =>
|
||
{
|
||
this.setState({
|
||
menuOpened: !this.state.menuOpened,
|
||
});
|
||
};
|
||
|
||
_handle_onLogout = () =>
|
||
{
|
||
logout({ dispatch: this.props.dispatch });
|
||
};
|
||
|
||
_handle_onToggleNotifications = () =>
|
||
{
|
||
const { notificationsOpened } = this.state;
|
||
this.setState({ notificationsOpened: notificationsOpened ? false : true });
|
||
}
|
||
|
||
_handle_onToggleMessages = () =>
|
||
{
|
||
const { messagesOpened } = this.state;
|
||
this.setState({ messagesOpened: messagesOpened ? false : true });
|
||
}
|
||
|
||
_renderEvent = (event, index) =>
|
||
{
|
||
switch(event.event_type)
|
||
{
|
||
case "kasko_prolong":
|
||
{
|
||
return (
|
||
<li className="new" key={ index }>
|
||
<p className="name"><b>Тут бы какое-то сообщение передавать а не просто параметры, непонятно СКОЛЬКО дней осталось ДО окончания КАСКО. Или параметр kasko_end. Договор: { event.contract_number }, полис: { event.add_info }</b></p>
|
||
<p className="date">{ event.event_date }</p>
|
||
<p className="action">
|
||
<Link href={`/${ event.contract_number }`}>
|
||
<a>Подробнее</a>
|
||
</Link>
|
||
</p>
|
||
</li>
|
||
)
|
||
}
|
||
}
|
||
|
||
return null;
|
||
{/*}
|
||
<li className="new" key={ index }>
|
||
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<Link href="/">
|
||
<a>Посмотрите порядок возврата СТС</a>
|
||
</Link>
|
||
или
|
||
<Link href="/">
|
||
<a>Загрузите скан СТС</a>
|
||
</Link>
|
||
</p>
|
||
</li>
|
||
<li className="new">
|
||
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<Link href="/">
|
||
<a>Посмотрите порядок возврата СТС</a>
|
||
</Link>
|
||
или
|
||
<Link href="/">
|
||
<a>Загрузите скан СТС</a>
|
||
</Link>
|
||
</p>
|
||
</li>
|
||
<li className="new">
|
||
<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
|
||
<p className="date">10.01.2022</p>
|
||
<p className="action">
|
||
<Link href="/">
|
||
<a>Подробнее</a>
|
||
</Link>
|
||
</p>
|
||
</li>
|
||
{*/}
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { observer, menuOpened, notificationsOpened, messagesOpened, events, events_loaded, appeals } = this.state;
|
||
console.log("Header", "events", events);
|
||
|
||
return (
|
||
<header>
|
||
{ observer && (
|
||
<div style={{ position: "fixed", backgroundColor: "#1C01A9", display: "flex", width: "100%", zIndex: 1, fontSize: "11px", lineHeight: "16px", alignItems: "center", justifyContent: "center", color: "#fff" }}>Сервисный режим</div>
|
||
) }
|
||
<div className="container">
|
||
<Link href={`/`} shallow>
|
||
<a className="logo">
|
||
<img
|
||
src="/assets/images/logo.svg"
|
||
alt=""
|
||
width="217px"
|
||
height="32px"
|
||
/>
|
||
</a>
|
||
</Link>
|
||
<div className="header_menu">
|
||
<nav>
|
||
<button
|
||
className="nav_toggle"
|
||
onClick={this._handle_onToggleMenu}
|
||
>
|
||
{this.props.router && this._getActiveLink(this.props.router.route)}
|
||
</button>
|
||
<ul id="menu_list" className={menuOpened ? "open" : ""}>
|
||
<li>
|
||
<Link href={`/`} shallow>
|
||
<a className={ this.props.router && (this.props.router.route === "/" || this.props.router.route.indexOf("/contract") === 0) ? "active" : "" }>
|
||
Договоры
|
||
</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={`/documents/calendar/`} shallow>
|
||
<a className={ this.props.router && this.props.router.route.indexOf("/documents") === 0 ? "active" : "" }>
|
||
Взаиморасчеты и закрывающие документы
|
||
</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/settings/phone/" shallow>
|
||
<a className={ this.props.router && this.props.router.route.indexOf("/settings") === 0 ? "active" : "" }>
|
||
Настройки
|
||
</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href="/support/faq/" shallow>
|
||
<a className={ this.props.router && this.props.router.route.indexOf("/support") === 0 ? "active" : "" }>Обращения</a>
|
||
</Link>
|
||
</li>
|
||
{/*
|
||
<li>
|
||
<Link href={ process.env.NEXT_PUBLIC_MAIN_SITE }>
|
||
<a>Основной сайт</a>
|
||
</Link>
|
||
</li>
|
||
*/}
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<ul className="system_nav">
|
||
<li>
|
||
<Link href="tel:88003337575"><a data-icon="phone" className="button">Телефон</a></Link>
|
||
</li>
|
||
<li>
|
||
<a data-icon="notify" data-notify={ events !== undefined && events !== null ? events.length : 0 } className="button" onClick={ this._handle_onToggleNotifications }>
|
||
Уведомления
|
||
</a>
|
||
<div className={`backdrop ${ notificationsOpened && "opened" }`}>
|
||
<div className="modal">
|
||
{ events_loaded && (
|
||
<>
|
||
{ events.length > 0 ? (
|
||
<NotificationsList events={ events } { ...this.props }/>
|
||
) : (
|
||
<p style={{ paddingBottom: "30px" }}>Нет действующих событий для показа</p>
|
||
) }
|
||
</>
|
||
)}
|
||
<button className="close" onClick={ this._handle_onToggleNotifications }>Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<Link href={ `/support/appeals` } shallow>
|
||
<a data-icon="message" data-notify={ appeals } className="button" onClick={ this._handle_onToggleMessages }>
|
||
Сообщения
|
||
</a>
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<button
|
||
className="lk"
|
||
title="Выход"
|
||
onClick={() => this._handle_onLogout()}
|
||
></button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
observer: state.auth.observer,
|
||
events: state.events.list,
|
||
events_loaded: state.events.loaded,
|
||
appeals: state.support.appeals.new,
|
||
}
|
||
}
|
||
|
||
export default connect(mapStateToProps)(Header); |