golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add guest review page + switch to 5-star rating system

Browse Source 
- New public page /review/:slug — guest-facing review form with 5-star selector, optional comment, positive flow (redirect buttons to platforms), negative flow (thank you message)
- Switch all rating scales from 10-point to 5-star in ReviewsPage: mock data, StarRating component, avgRating sub-label, NPS thresholds, threshold slider (1–4), settings cards
- Rating badge in review list now shows number + star icon
- Register route in App.tsx as public (no auth required)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-16 19:27:34 +03:00
parent 5e3fca5471
commit dc3e68dbe2
3 changed files with 237 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/ReviewsPage.tsx
View File

@@ -49,7 +49,7 @@ const DEFAULT_PLATFORMS: ReviewPlatform[] = [
const MOCK_REVIEWS: Review[] = [
{
id: 'rv1', guestName: 'Дмитрий Волков', roomNumber: '101',
rating: 9, source: 'email', bookingSource: 'booking',
rating: 5, source: 'email', bookingSource: 'booking',
createdAt: new Date(Date.now() - 3600000 * 5),
text: 'Замечательный отель! Персонал очень вежливый. Номер чистый, завтрак вкусный. Обязательно вернёмся.',
status: 'published',
@@ -57,14 +57,14 @@ const MOCK_REVIEWS: Review[] = [
},
{
id: 'rv2', guestName: 'Анна Козлова', roomNumber: '202',
rating: 2, source: 'qr', bookingSource: 'direct',
rating: 1, source: 'qr', bookingSource: 'direct',
createdAt: new Date(Date.now() - 3600000 * 12),
text: 'Шум из соседнего номера мешал спать. Кондиционер плохо работал. Разочарована.',
status: 'pending',
},
{
id: 'rv3', guestName: 'Наталья Александрова', roomNumber: '301',
rating: 10, source: 'sms', bookingSource: 'widget',
rating: 5, source: 'sms', bookingSource: 'widget',
createdAt: new Date(Date.now() - 3600000 * 36),
text: 'Лучший отель! Вид из окна потрясающий, кровать удобная, всё стильно.',
status: 'published',
@@ -72,7 +72,7 @@ const MOCK_REVIEWS: Review[] = [
},
{
id: 'rv4', guestName: 'Игорь Соколов', roomNumber: '201',
rating: 7, source: 'email', bookingSource: 'yandex',
rating: 4, source: 'email', bookingSource: 'yandex',
createdAt: new Date(Date.now() - 3600000 * 48),
text: 'В целом хорошо. Немного дорого для такого номера. Расположение отличное.',
status: 'published',
@@ -80,14 +80,14 @@ const MOCK_REVIEWS: Review[] = [
},
{
id: 'rv5', guestName: 'Виктор Громов', roomNumber: '402',
rating: 3, source: 'qr', bookingSource: 'direct',
rating: 2, source: 'qr', bookingSource: 'direct',
createdAt: new Date(Date.now() - 3600000 * 60),
text: 'Долго ждали заселения. Номер убран с опозданием. Разочарованы.',
status: 'pending',
},
{
id: 'rv6', guestName: 'Михаил Орлов', roomNumber: '401',
rating: 8, source: 'email', bookingSource: 'google',
rating: 4, source: 'email', bookingSource: 'google',
createdAt: new Date(Date.now() - 3600000 * 100),
text: 'Очень доволен. Персонал внимательный, номер чистый.',
status: 'published',
@@ -112,22 +112,21 @@ const PREVIEW_COLORS = ['#2563eb', '#16a34a', '#9333ea', '#dc2626']
// ── Helper components ─────────────────────────────────────────────────────────
function StarRating({ rating, max = 10, size = 14 }: { rating: number; max?: number; size?: number }) {
const stars = Math.round((rating / max) * 5)
function StarRating({ rating, size = 14 }: { rating: number; size?: number }) {
return (
<div className="flex items-center gap-0.5">
{Array.from({ length: 5 }, (_, i) => (
<Star key={i} size={size} className={i < stars ? 'text-amber-400 fill-amber-400' : 'text-slate-300 dark:text-slate-600'} />
<Star key={i} size={size} className={i < rating ? 'text-amber-400 fill-amber-400' : 'text-slate-300 dark:text-slate-600'} />
))}
<span className="ml-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300">{rating}/10</span>
<span className="ml-1.5 text-sm font-semibold text-slate-700 dark:text-slate-300">{rating}/5</span>
</div>
)
}
function ratingColor(r: number, threshold: number): string {
if (r >= 9) return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
if (r >= 7) return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
if (r >= threshold) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
if (r >= 5) return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
if (r >= 4) return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
if (r >= threshold) return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
}
@@ -143,7 +142,7 @@ export function ReviewsPage() {
const [copied, setCopied] = useState(false)
// Settings
const [threshold, setThreshold] = useState(6)
const [threshold, setThreshold] = useState(4)
const [platforms, setPlatforms] = useState<ReviewPlatform[]>(DEFAULT_PLATFORMS)
const [newPlatformName, setNewPlatformName] = useState('')
const [newPlatformUrl, setNewPlatformUrl] = useState('')
@@ -171,8 +170,8 @@ export function ReviewsPage() {
: '—'
const nps = published.length
? Math.round(
(published.filter(r => r.rating >= 9).length / published.length * 100) -
(published.filter(r => r.rating <= 6).length / published.length * 100),
(published.filter(r => r.rating >= 5).length / published.length * 100) -
(published.filter(r => r.rating <= 2).length / published.length * 100),
)
: 0
@@ -211,7 +210,6 @@ export function ReviewsPage() {
}
const enabledPlatforms = platforms.filter(p => p.enabled)
const thresholdStars = Math.round((threshold / 10) * 5)
// Determine redirect platform based on booking source
const getRedirectPlatform = (source?: BookingSource): string | null => {
@@ -237,14 +235,14 @@ export function ReviewsPage() {
<div>
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Отзывы гостей</h1>
<p className="text-sm text-slate-500 dark:text-slate-400">
Отрицательные (&lt; {thresholdStars} звёзд) → модерация. Положительные → автоматический редирект на площадки.
Отрицательные (&lt; {threshold} звёзд) → модерация. Положительные → автоматический редирект на площадки.
</p>
</div>
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{[
{ label: 'Средняя оценка', value: avgRating, sub: 'из 10', color: 'text-amber-600 dark:text-amber-400' },
{ label: 'Средняя оценка', value: avgRating, sub: 'из 5 звёзд', color: 'text-amber-600 dark:text-amber-400' },
{ label: 'NPS', value: nps >= 0 ? `+${nps}` : `${nps}`, sub: 'лояльность', color: 'text-emerald-600 dark:text-emerald-400' },
{ label: 'В архиве', value: published.length, sub: 'опубликованных', color: 'text-brand-600 dark:text-brand-400' },
{ label: 'Ждут ответа', value: pending.length, sub: 'негативных', color: pending.length > 0 ? 'text-red-600 dark:text-red-400' : 'text-slate-500' },
@@ -262,7 +260,7 @@ export function ReviewsPage() {
<div className="card p-3 border-red-200 dark:border-red-700/50 bg-red-50/50 dark:bg-red-900/10 flex items-start gap-3">
<ThumbsDown size={14} className="text-red-600 mt-0.5 shrink-0" />
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Отрицательные (&lt; {thresholdStars} звёзд)</p>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Отрицательные (&lt; {threshold} звёзд)</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Модерация — менеджер пишет личный ответ гостю. Публично не публикуется.
</p>
@@ -271,7 +269,7 @@ export function ReviewsPage() {
<div className="card p-3 border-blue-200 dark:border-blue-700/50 bg-blue-50/50 dark:bg-blue-900/10 flex items-start gap-3">
<ArrowUpRight size={14} className="text-blue-600 mt-0.5 shrink-0" />
<div>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Положительные (≥ {thresholdStars} звёзд)</p>
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">Положительные (≥ {threshold} звёзд)</p>
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Авторедирект на площадку источника бронирования или выбор из: {enabledPlatforms.map(p => p.name).join(', ') || '(настройте)'}
</p>
@@ -392,14 +390,14 @@ export function ReviewsPage() {
)}
{/* After submit: negative flow */}
{previewSubmitted && previewRating < thresholdStars + 1 && (
{previewSubmitted && previewRating < threshold && (
<div className="p-3 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-600 text-sm text-slate-600 dark:text-slate-400">
Спасибо за честный отзыв. Мы уже работаем над улучшениями.
</div>
)}
{/* After submit: positive flow — redirect buttons */}
{previewSubmitted && previewRating >= thresholdStars + 1 && (
{previewSubmitted && previewRating >= threshold && (
<div className="space-y-2">
<p className="text-xs text-slate-500 dark:text-slate-400">Поделитесь на площадках:</p>
{enabledPlatforms.map(p => (
@@ -499,9 +497,9 @@ export function ReviewsPage() {
{/* Threshold info */}
<div className="card p-4 bg-amber-50/50 dark:bg-amber-900/10 border-amber-200 dark:border-amber-700/50">
<p className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-1">Текущий порог: {thresholdStars} из 5 звёзд ({threshold}/10)</p>
<p className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-1">Текущий порог: {threshold} из 5 звёзд</p>
<p className="text-xs text-slate-500 dark:text-slate-400">
При оценке ≥ {thresholdStars} звёзд гость видит кнопки площадок. Ниже — страницу благодарности.
При оценке ≥ {threshold} звёзд гость видит кнопки площадок. Ниже — страницу благодарности.
</p>
</div>
</div>
@@ -586,9 +584,9 @@ export function ReviewsPage() {
</p>
<div className="flex items-center gap-4">
<div>
<p className="text-xs text-slate-500 mb-2">Порог (из 10 баллов)</p>
<p className="text-xs text-slate-500 mb-2">Порог (из 5 звёзд)</p>
<input
type="range" min={2} max={9} value={threshold}
type="range" min={1} max={4} value={threshold}
onChange={e => setThreshold(parseInt(e.target.value))}
className="w-48"
/>
@@ -597,19 +595,19 @@ export function ReviewsPage() {
<div className="text-3xl font-bold text-brand-600 dark:text-brand-400">{threshold}</div>
<div className="flex gap-0.5 mt-1">
{Array.from({ length: 5 }, (_, i) => (
<Star key={i} size={14} className={i < thresholdStars ? 'text-amber-400 fill-amber-400' : 'text-slate-300'} />
<Star key={i} size={14} className={i < threshold ? 'text-amber-400 fill-amber-400' : 'text-slate-300'} />
))}
</div>
<p className="text-xs text-slate-400 mt-0.5">{thresholdStars} из 5 звёзд</p>
<p className="text-xs text-slate-400 mt-0.5">{threshold} из 5 звёзд</p>
</div>
</div>
<div className="flex gap-3 text-xs">
<div className="flex-1 p-2.5 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700">
<p className="font-medium text-red-700 dark:text-red-300">Рейтинг &lt; {threshold}/10</p>
<p className="font-medium text-red-700 dark:text-red-300">Рейтинг &lt; {threshold} звёзд</p>
<p className="text-slate-500 mt-0.5">→ Модерация + личный ответ</p>
</div>
<div className="flex-1 p-2.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
<p className="font-medium text-blue-700 dark:text-blue-300">Рейтинг ≥ {threshold}/10</p>
<p className="font-medium text-blue-700 dark:text-blue-300">Рейтинг ≥ {threshold} звёзд</p>
<p className="text-slate-500 mt-0.5">→ Авторедирект на площадки</p>
</div>
</div>
@@ -738,8 +736,8 @@ export function ReviewsPage() {
)}
>
<div className="flex items-start gap-3 flex-wrap">
<div className={cn('w-10 h-10 rounded-full flex items-center justify-center text-base font-bold shrink-0', ratingColor(review.rating, threshold))}>
{review.rating}
<div className={cn('w-10 h-10 rounded-full flex items-center justify-center gap-0.5 text-sm font-bold shrink-0', ratingColor(review.rating, threshold))}>
{review.rating}<Star size={10} className="fill-current" />
</div>
<div className="flex-1 min-w-0">