evoleasing-account/pages/components/Events/NotificationMessage/index.js

import React from "react";
import Link from "next/link";

import moment from 'moment';
import pluralize from 'pluralize-ru';

export default class NotificationMessage extends React.Component 
{
	constructor(props) 
	{
		super(props);
		this.state = {
		};
	}

	_handle_onLink = (url) => 
	{
		window.location = url;
	}

	render() 
	{
		const { event } = this.props;

		switch(event.event_type)
		{
			case "kasko_prolong":
			{
				const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

				return (
					<li className="new">
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации КАСКО по договору №{ event.contract_number } (полис { event.add_info }).</b></p>
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
						</p>
					</li>
				)
			}

			case "osago_prolong":
			{
				const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

				return (
					<li className="new">
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации ОСАГО по договору №{ event.contract_number } (полис { event.add_info }). Не забудьте самостоятельно продлить полис ОСАГО!</b></p>
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
						</p>
					</li>
				)
			}

			case "fingap_prolong":
			{
				const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

				return (
					<li className="new">
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации Safe Finance по договору №{ event.contract_number }.</b></p>
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
						</p>
					</li>
				)
			}

			case "fine_gibdd":
			{
				return (
					<li className="new">
						<p className="name"><b>Внимание! Получен штраф ГИБДД по договору №{ event.contract_number } на сумму { event.add_info }.</b></p>
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<Link href={`/contract/${ event.contract_number }/fines`}>
								<a>Подробнее</a>
							</Link>
						</p>
					</li>
				)
			}

			case "end_contract":
			{
				const days_left = moment(event.event_date).diff(moment().startOf("day"), 'days');

				return (
					<li className="new">
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня дата" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до даты` } окончания договора №{ event.contract_number }.</b></p>
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<Link href={`/support/faq#68b86ac533992ce7db73d9b6f4e1bfc0`}>
								<a>Посмотрите порядок оформления выкупа</a>
							</Link>
						</p>
					</li>
				)
			}

			case "graph_change":
			{
				return (
					<li className="new">
						<p className="name"><b>Сформировано новое ДС №{ event.add_info} от { moment(event.event_date).format("DD.MM.YYYY") } по договору №{ event.contract_number }. Срок подписания (НЕТ ДАТЫ).</b></p>
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<Link href={`/contract/${ event.contract_number }/agreement`}>
								<a>Посмотреть дополнительное соглашение</a>
							</Link>
						</p>
					</li>
				)
			}

			case "return_pts":
			{
				return (
					<li className="new">
						{ event.important ? (
							<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору №{ event.contract_number }. Посмотрите порядок возврата СТС или загрузите скан СТС по ссылке.</b></p>
						) : (
							<p className="name"><b>Приближается дата возврата СТС по договору №{ event.contract_number }. Посмотрите порядок возврата СТС или загрузите скан СТС по ссылке.</b></p>
						) }
						{ event.important && (<p className="type">Важное</p>) }
						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
						<p className="action">
							<Link href="/support/faq#68249d3b3ef51d25ff5f9433e8a7d60a">
								<a>Посмотрите порядок возврата СТС</a>
							</Link>
							&nbsp; или &nbsp;
							<Link href="/support/request#68249d3b3ef51d25ff5f9433e8a7d60a">
								<a>Загрузите скан СТС</a>
							</Link>
						</p>
					</li>
				)
			}
		}

		return null;
		{/*}
			<li className="new">
				<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
				<p className="date">10.01.2022</p>
				<p className="action">
					<Link href="/">
						<a>Посмотрите порядок возврата СТС</a>
					</Link>
					&nbsp; или &nbsp;
					<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>
					&nbsp; или &nbsp;
					<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>
		{*/}
	}
}