Add guest review page + switch to 5-star rating system
- 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:
204
src/pages/GuestReviewPage.tsx
Normal file
204
src/pages/GuestReviewPage.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import { useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Star, ExternalLink, CheckCircle2, Heart } from 'lucide-react'
|
||||
import { cn } from '../lib/utils'
|
||||
|
||||
// ── Mock hotel config (in real app — fetched by slug from API) ────────────────
|
||||
|
||||
interface HotelConfig {
|
||||
name: string
|
||||
color: string
|
||||
logoLetter: string
|
||||
redirectThreshold: number // min rating (1–5) to show redirect buttons
|
||||
platforms: { name: string; url: string }[]
|
||||
welcomeText: string
|
||||
showTextField: boolean
|
||||
}
|
||||
|
||||
const MOCK_HOTELS: Record<string, HotelConfig> = {
|
||||
'grand-palace': {
|
||||
name: 'Гранд Палас',
|
||||
color: '#2563eb',
|
||||
logoLetter: 'Г',
|
||||
redirectThreshold: 4,
|
||||
welcomeText: 'Как вам у нас?',
|
||||
showTextField: true,
|
||||
platforms: [
|
||||
{ name: 'Booking.com', url: 'https://www.booking.com/hotel/ru/' },
|
||||
{ name: 'Яндекс Путешествия', url: 'https://travel.yandex.ru/hotels/' },
|
||||
{ name: 'Google', url: 'https://g.page/r/' },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const DEFAULT_CONFIG: HotelConfig = {
|
||||
name: 'Отель',
|
||||
color: '#2563eb',
|
||||
logoLetter: 'О',
|
||||
redirectThreshold: 4,
|
||||
welcomeText: 'Как вам у нас?',
|
||||
showTextField: true,
|
||||
platforms: [
|
||||
{ name: 'Booking.com', url: 'https://www.booking.com' },
|
||||
{ name: 'Google', url: 'https://google.com' },
|
||||
],
|
||||
}
|
||||
|
||||
// ── Component ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function GuestReviewPage() {
|
||||
const { slug } = useParams<{ slug: string }>()
|
||||
const hotel = (slug && MOCK_HOTELS[slug]) ?? DEFAULT_CONFIG
|
||||
|
||||
const [rating, setRating] = useState(0)
|
||||
const [hover, setHover] = useState(0)
|
||||
const [text, setText] = useState('')
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const isPositive = rating >= hotel.redirectThreshold
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (rating === 0) return
|
||||
setSubmitted(true)
|
||||
// In real app: POST /api/reviews { slug, rating, text }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-sm">
|
||||
|
||||
{/* Card */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
|
||||
|
||||
{/* Top color bar */}
|
||||
<div className="h-2" style={{ backgroundColor: hotel.color }} />
|
||||
|
||||
<div className="px-8 py-8 text-center space-y-6">
|
||||
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="w-20 h-20 rounded-2xl mx-auto flex items-center justify-center text-3xl font-bold text-white shadow-lg"
|
||||
style={{ backgroundColor: hotel.color }}
|
||||
>
|
||||
{hotel.logoLetter}
|
||||
</div>
|
||||
|
||||
{/* Hotel name */}
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900">{hotel.name}</h1>
|
||||
{!submitted && (
|
||||
<p className="text-slate-500 mt-1 text-base">{hotel.welcomeText}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── NOT YET SUBMITTED ── */}
|
||||
{!submitted && (
|
||||
<>
|
||||
{/* Stars */}
|
||||
<div className="flex justify-center gap-2">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onMouseEnter={() => setHover(i + 1)}
|
||||
onMouseLeave={() => setHover(0)}
|
||||
onClick={() => setRating(i + 1)}
|
||||
className="transition-transform hover:scale-110 active:scale-95"
|
||||
>
|
||||
<Star
|
||||
size={40}
|
||||
className={cn(
|
||||
'transition-colors drop-shadow-sm',
|
||||
(hover || rating) > i
|
||||
? 'text-amber-400 fill-amber-400'
|
||||
: 'text-slate-200 fill-slate-200',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Star label */}
|
||||
{(hover || rating) > 0 && (
|
||||
<p className="text-sm font-medium text-slate-600 -mt-2">
|
||||
{['', 'Очень плохо', 'Плохо', 'Нормально', 'Хорошо', 'Отлично!'][hover || rating]}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Text field */}
|
||||
{rating > 0 && hotel.showTextField && (
|
||||
<textarea
|
||||
className="w-full border border-slate-200 rounded-2xl p-3.5 text-sm text-slate-700 bg-slate-50 resize-none focus:outline-none focus:border-blue-400 transition-colors placeholder:text-slate-400"
|
||||
rows={3}
|
||||
placeholder="Расскажите подробнее... (необязательно)"
|
||||
value={text}
|
||||
onChange={e => setText(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={rating === 0}
|
||||
className="w-full py-3.5 rounded-2xl text-white font-semibold text-base transition-all hover:opacity-90 active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed shadow-lg"
|
||||
style={{ backgroundColor: hotel.color }}
|
||||
>
|
||||
Отправить отзыв
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── SUBMITTED: NEGATIVE ── */}
|
||||
{submitted && !isPositive && (
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mx-auto">
|
||||
<Heart size={28} className="text-slate-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-slate-900 text-lg">Спасибо за честность</p>
|
||||
<p className="text-slate-500 text-sm mt-1.5 leading-relaxed">
|
||||
Мы сожалеем, что что-то пошло не так. Ваш отзыв поможет нам стать лучше.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── SUBMITTED: POSITIVE ── */}
|
||||
{submitted && isPositive && (
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="w-16 h-16 rounded-full bg-emerald-50 flex items-center justify-center mx-auto">
|
||||
<CheckCircle2 size={32} className="text-emerald-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-slate-900 text-lg">Спасибо за отзыв!</p>
|
||||
<p className="text-slate-500 text-sm mt-1.5 leading-relaxed">
|
||||
Если вам не сложно — поделитесь впечатлениями на одной из площадок:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2.5">
|
||||
{hotel.platforms.map(p => (
|
||||
<a
|
||||
key={p.name}
|
||||
href={p.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-between w-full px-4 py-3 rounded-2xl border-2 border-slate-100 hover:border-blue-200 bg-slate-50 hover:bg-blue-50 text-slate-700 font-medium text-sm transition-all group"
|
||||
>
|
||||
<span>{p.name}</span>
|
||||
<ExternalLink size={14} className="text-slate-400 group-hover:text-blue-500 transition-colors" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-8 pb-6 text-center">
|
||||
<p className="text-xs text-slate-300">HotelSync · система сбора отзывов</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user