evoleasing-account/pages/components/Header/NotificationsList/index.js

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

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

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

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

				return (
					<li className="new" key={ index }>
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации КАСКО по договору №{ event.contract_number } (полис { event.add_info }). Не забудьте самостоятельно продлить полис КАСКО!</b></p>
						<p className="date">{ event.event_date }</p>
						<p className="action">
							<Link href={`/contract/${ event.contract_number }/services#insurance`}>
								<a>Подробнее</a>
							</Link>
						</p>
					</li>
				)
			}

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

				return (
					<li className="new" key={ index }>
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации ОСАГО по договору №{ event.contract_number } (полис { event.add_info }). Не забудьте самостоятельно продлить полис ОСАГО!</b></p>
						<p className="date">{ event.event_date }</p>
						<p className="action">
							<Link href={`/contract/${ event.contract_number }/services#insurance`}>
								<a>Подробнее</a>
							</Link>
						</p>
					</li>
				)
			}

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

				return (
					<li className="new" key={ index }>
						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации FinGAP по договору №{ event.contract_number }. Не забудьте самостоятельно продлить полис FinGAP!</b></p>
						<p className="date">{ event.event_date }</p>
						<p className="action">
							<Link href={`/contract/${ event.contract_number }/services#insurance`}>
								<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>
				&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>
		{*/}
	}

	render() 
	{
		const { events } = this.props;
		console.log("events", events);

		return (
			<>
				<ul className="list">
					{ events.map((event, index) => this._renderEvent(event, index)) }
				</ul>
				<Link href="/events">
					<a className="all">Все события</a>
				</Link>
			</>
		);
	}
}