feat: reviews module — email request after checkout, API, job
- Migration 084: add review_token, review_email_sent_at, review_retry_sent_at to bookings - Backend route /api/hotels/:slug/reviews (GET list, PATCH reply/status) - Backend public routes /api/public/review/:token (GET config, POST submit) - email.ts: sendReviewRequestEmail template - jobs.ts: runReviewRequestJob — sends email N hours after checkout, retry after 24h - app.ts: register reviewsRoutes - api.ts: add ReviewApi, PublicReviewConfig types + reviews/publicReview methods - ReviewsPage: connect to real API, load/save settings, remove SMS option - GuestReviewPage: use :token param, fetch config from API, submit to API - App.tsx: route /review/:slug → /review/:token Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
8
backend/migrations/084_reviews.sql
Normal file
8
backend/migrations/084_reviews.sql
Normal file
@@ -0,0 +1,8 @@
|
||||
-- Migration 084 — review tokens on bookings
|
||||
|
||||
ALTER TABLE bookings
|
||||
ADD COLUMN IF NOT EXISTS review_token TEXT UNIQUE,
|
||||
ADD COLUMN IF NOT EXISTS review_email_sent_at TIMESTAMPTZ,
|
||||
ADD COLUMN IF NOT EXISTS review_retry_sent_at TIMESTAMPTZ;
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_bookings_review_token ON bookings(review_token);
|
||||
@@ -48,6 +48,7 @@ import paymentGatewaysRoutes from './routes/paymentGateways'
|
||||
import publicWidgetRoutes from './routes/publicWidget'
|
||||
import yookassaWebhookRoutes from './routes/yookassaWebhook'
|
||||
import rolePermissionsRoutes from './routes/role-permissions'
|
||||
import reviewsRoutes from './routes/reviews'
|
||||
import { setupAgentWsRoute } from './agent-ws'
|
||||
import { startJobs } from './jobs'
|
||||
import { initWebPush } from './push'
|
||||
@@ -149,6 +150,7 @@ export async function buildApp() {
|
||||
await fastify.register(publicWidgetRoutes)
|
||||
await fastify.register(yookassaWebhookRoutes)
|
||||
await fastify.register(rolePermissionsRoutes)
|
||||
await fastify.register(reviewsRoutes)
|
||||
await fastify.register(setupAgentWsRoute)
|
||||
|
||||
startJobs()
|
||||
|
||||
@@ -240,3 +240,47 @@ export async function sendBookingConfirmedEmail(params: {
|
||||
headers: { 'Content-Language': 'ru' },
|
||||
})
|
||||
}
|
||||
|
||||
export async function sendReviewRequestEmail(params: {
|
||||
to: string
|
||||
guestName: string
|
||||
hotelName: string
|
||||
reviewUrl: string
|
||||
}): Promise<void> {
|
||||
const { to, guestName, hotelName, reviewUrl } = params
|
||||
const firstName = guestName.split(' ')[0] ?? guestName
|
||||
|
||||
const html = baseHtml(
|
||||
'linear-gradient(135deg,#f59e0b,#d97706)',
|
||||
'⭐',
|
||||
'Оставьте отзыв',
|
||||
`<h2 style="color:#1e293b;font-size:20px;margin:0 0 12px;font-weight:600;">Как вам у нас?</h2>
|
||||
<p style="color:#334155;line-height:1.7;margin:0 0 8px;font-size:15px;">Привет, ${firstName}!</p>
|
||||
<p style="color:#334155;line-height:1.7;margin:0 0 28px;font-size:15px;">
|
||||
Спасибо, что остановились в <strong>${hotelName}</strong>. Нам очень важно ваше мнение —
|
||||
это займёт не больше минуты!
|
||||
</p>
|
||||
<div style="text-align:center;margin:0 0 28px;">
|
||||
<a href="${reviewUrl}" style="display:inline-block;background:#d97706;color:#ffffff;text-decoration:none;padding:14px 36px;border-radius:10px;font-weight:600;font-size:16px;letter-spacing:0.2px;">
|
||||
⭐ Оставить отзыв
|
||||
</a>
|
||||
</div>
|
||||
<p style="color:#475569;font-size:13px;margin:0;line-height:1.6;text-align:center;">
|
||||
Будем рады видеть вас снова в ${hotelName}!
|
||||
</p>`,
|
||||
)
|
||||
|
||||
const text = `Как вам у нас? — ${hotelName}\n\nПривет, ${firstName}!\n\nСпасибо, что остановились в ${hotelName}. Оставьте отзыв — это займёт не больше минуты:\n${reviewUrl}\n\n© 2026 HotelSync`
|
||||
|
||||
await transporter.sendMail({
|
||||
from: `"${hotelName}" <${fromAddr()}>`,
|
||||
to,
|
||||
subject: `Как вам у нас? Оставьте отзыв — ${hotelName}`,
|
||||
html,
|
||||
text,
|
||||
headers: {
|
||||
'List-Unsubscribe': unsubscribeHeader,
|
||||
'Content-Language': 'ru',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
@@ -2,6 +2,8 @@ import { db } from './db'
|
||||
import { broadcast } from './routes/ws'
|
||||
import { createNotification } from './routes/notifications'
|
||||
import { getHkSettings } from './routes/housekeeping-settings'
|
||||
import { sendReviewRequestEmail } from './email'
|
||||
import { randomUUID } from 'crypto'
|
||||
|
||||
const JOB_INTERVAL_MS = 60 * 60 * 1000 // every 1 hour
|
||||
const PAYMENT_EXPIRY_INTERVAL = 2 * 60 * 1000 // every 2 minutes
|
||||
@@ -10,6 +12,7 @@ async function runAutoJobs(): Promise<void> {
|
||||
try {
|
||||
await runAutoCancelNoShows()
|
||||
await runAutoCheckouts()
|
||||
await runReviewRequestJob()
|
||||
} catch (err) {
|
||||
console.error('[jobs] error running auto jobs:', err)
|
||||
}
|
||||
@@ -193,6 +196,95 @@ async function runAutoCheckouts(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
async function runReviewRequestJob(): Promise<void> {
|
||||
const appUrl = process.env.APP_URL ?? 'https://app.hotelsync.ru'
|
||||
|
||||
// ── First send ─────────────────────────────────────────────────────────────
|
||||
// Hotels with review_request_enabled = true
|
||||
const { rows: hotels } = await db.query<{ id: string; name: string; hours: number }>(
|
||||
`SELECT h.id, h.name,
|
||||
COALESCE(
|
||||
(SELECT (value::text)::int FROM hotel_settings
|
||||
WHERE hotel_id = h.id AND key = 'review_request_hours'),
|
||||
2
|
||||
) AS hours
|
||||
FROM hotels h
|
||||
WHERE EXISTS (
|
||||
SELECT 1 FROM hotel_settings
|
||||
WHERE hotel_id = h.id AND key = 'review_request_enabled' AND value = 'true'::jsonb
|
||||
)`,
|
||||
)
|
||||
|
||||
for (const hotel of hotels) {
|
||||
// Bookings that checked out >= hotel.hours ago, have guest email, no token yet
|
||||
const { rows: bookings } = await db.query<{
|
||||
id: string; guest_name: string | null; guest_email: string | null
|
||||
}>(
|
||||
`SELECT b.id, b.guest_name, b.guest_email
|
||||
FROM bookings b
|
||||
WHERE b.hotel_id = $1
|
||||
AND b.status = 'checked_out'
|
||||
AND b.guest_email IS NOT NULL AND b.guest_email <> ''
|
||||
AND b.review_email_sent_at IS NULL
|
||||
AND b.updated_at + ($2 || ' hours')::interval < NOW()`,
|
||||
[hotel.id, hotel.hours],
|
||||
)
|
||||
|
||||
for (const b of bookings) {
|
||||
const token = randomUUID()
|
||||
await db.query(
|
||||
`UPDATE bookings SET review_token = $1, review_email_sent_at = NOW() WHERE id = $2`,
|
||||
[token, b.id],
|
||||
)
|
||||
await sendReviewRequestEmail({
|
||||
to: b.guest_email!,
|
||||
guestName: b.guest_name ?? 'Гость',
|
||||
hotelName: hotel.name,
|
||||
reviewUrl: `${appUrl}/review/${token}`,
|
||||
}).catch(err => console.error('[jobs] review email error:', err))
|
||||
}
|
||||
|
||||
// ── Retry send ───────────────────────────────────────────────────────────
|
||||
// Check if retry is enabled for this hotel
|
||||
const { rows: retrySetting } = await db.query(
|
||||
`SELECT value FROM hotel_settings
|
||||
WHERE hotel_id = $1 AND key = 'review_request_retry' LIMIT 1`,
|
||||
[hotel.id],
|
||||
)
|
||||
if (retrySetting[0]?.value !== true) continue
|
||||
|
||||
// Sent 24h+ ago, retry not yet sent, no review submitted yet
|
||||
const { rows: retryBookings } = await db.query<{
|
||||
id: string; guest_name: string | null; guest_email: string | null; review_token: string
|
||||
}>(
|
||||
`SELECT b.id, b.guest_name, b.guest_email, b.review_token
|
||||
FROM bookings b
|
||||
WHERE b.hotel_id = $1
|
||||
AND b.status = 'checked_out'
|
||||
AND b.review_email_sent_at IS NOT NULL
|
||||
AND b.review_retry_sent_at IS NULL
|
||||
AND b.review_email_sent_at + interval '24 hours' < NOW()
|
||||
AND NOT EXISTS (
|
||||
SELECT 1 FROM reviews r WHERE r.booking_id = b.id
|
||||
)`,
|
||||
[hotel.id],
|
||||
)
|
||||
|
||||
for (const b of retryBookings) {
|
||||
await db.query(
|
||||
`UPDATE bookings SET review_retry_sent_at = NOW() WHERE id = $1`,
|
||||
[b.id],
|
||||
)
|
||||
await sendReviewRequestEmail({
|
||||
to: b.guest_email!,
|
||||
guestName: b.guest_name ?? 'Гость',
|
||||
hotelName: hotel.name,
|
||||
reviewUrl: `${appUrl}/review/${b.review_token}`,
|
||||
}).catch(err => console.error('[jobs] review retry email error:', err))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function startJobs(): void {
|
||||
// Small delay to let DB migrations finish on startup
|
||||
setTimeout(() => {
|
||||
|
||||
200
backend/src/routes/reviews.ts
Normal file
200
backend/src/routes/reviews.ts
Normal file
@@ -0,0 +1,200 @@
|
||||
import { FastifyPluginAsync } from 'fastify'
|
||||
import { db } from '../db'
|
||||
|
||||
type SlugParam = { Params: { slug: string } }
|
||||
type SlugIdParam = { Params: { slug: string; id: string } }
|
||||
type TokenParam = { Params: { token: string } }
|
||||
|
||||
const canAccess = (userSlug: string | null, role: string, slug: string) =>
|
||||
role === 'super_admin' || userSlug === slug
|
||||
|
||||
const getHotelId = async (slug: string): Promise<string | null> => {
|
||||
const { rows } = await db.query('SELECT id FROM hotels WHERE slug = $1', [slug])
|
||||
return rows[0]?.id ?? null
|
||||
}
|
||||
|
||||
const reviewsRoutes: FastifyPluginAsync = async (fastify) => {
|
||||
|
||||
// ── GET /api/hotels/:slug/reviews ─────────────────────────────────────────
|
||||
fastify.get<SlugParam>(
|
||||
'/api/hotels/:slug/reviews',
|
||||
{ onRequest: [fastify.authenticate] },
|
||||
async (request, reply) => {
|
||||
const { slug } = request.params
|
||||
if (!canAccess(request.user.hotelSlug, request.user.role, slug)) {
|
||||
return reply.code(403).send({ error: 'Forbidden' })
|
||||
}
|
||||
const hotelId = await getHotelId(slug)
|
||||
if (!hotelId) return reply.code(404).send({ error: 'Hotel not found' })
|
||||
|
||||
const { rows } = await db.query(
|
||||
`SELECT r.id, r.booking_id, r.guest_id, r.guest_name, r.source,
|
||||
r.rating, r.text, r.reply, r.replied_at, r.is_public,
|
||||
r.created_at, r.updated_at,
|
||||
b.room_id,
|
||||
rm.number AS room_number,
|
||||
b.source AS booking_source
|
||||
FROM reviews r
|
||||
LEFT JOIN bookings b ON b.id = r.booking_id
|
||||
LEFT JOIN rooms rm ON rm.id = b.room_id
|
||||
WHERE r.hotel_id = $1
|
||||
ORDER BY r.created_at DESC`,
|
||||
[hotelId],
|
||||
)
|
||||
return rows
|
||||
},
|
||||
)
|
||||
|
||||
// ── PATCH /api/hotels/:slug/reviews/:id ───────────────────────────────────
|
||||
fastify.patch<SlugIdParam & { Body: { reply?: string; isPublic?: boolean } }>(
|
||||
'/api/hotels/:slug/reviews/:id',
|
||||
{ onRequest: [fastify.authenticate] },
|
||||
async (request, reply) => {
|
||||
const { slug, id } = request.params
|
||||
if (!canAccess(request.user.hotelSlug, request.user.role, slug)) {
|
||||
return reply.code(403).send({ error: 'Forbidden' })
|
||||
}
|
||||
const hotelId = await getHotelId(slug)
|
||||
if (!hotelId) return reply.code(404).send({ error: 'Hotel not found' })
|
||||
|
||||
const { reply: replyText, isPublic } = request.body
|
||||
const updates: string[] = []
|
||||
const vals: unknown[] = [id, hotelId]
|
||||
|
||||
if (replyText !== undefined) {
|
||||
vals.push(replyText)
|
||||
updates.push(`reply = $${vals.length}, replied_at = NOW()`)
|
||||
}
|
||||
if (isPublic !== undefined) {
|
||||
vals.push(isPublic)
|
||||
updates.push(`is_public = $${vals.length}`)
|
||||
}
|
||||
if (updates.length === 0) return reply.code(400).send({ error: 'Nothing to update' })
|
||||
|
||||
const { rows } = await db.query(
|
||||
`UPDATE reviews SET ${updates.join(', ')}, updated_at = NOW()
|
||||
WHERE id = $1 AND hotel_id = $2
|
||||
RETURNING *`,
|
||||
vals,
|
||||
)
|
||||
if (!rows[0]) return reply.code(404).send({ error: 'Review not found' })
|
||||
return rows[0]
|
||||
},
|
||||
)
|
||||
|
||||
// ── GET /api/public/review/:token ─────────────────────────────────────────
|
||||
// Returns hotel config + guest name for the public review form
|
||||
fastify.get<TokenParam>(
|
||||
'/api/public/review/:token',
|
||||
async (request, reply) => {
|
||||
const { token } = request.params
|
||||
|
||||
const { rows } = await db.query<{
|
||||
hotel_id: string; slug: string; hotel_name: string
|
||||
guest_name: string | null; guest_email: string | null
|
||||
booking_id: string; booking_source: string | null
|
||||
}>(
|
||||
`SELECT b.id AS booking_id, b.guest_name, b.guest_email,
|
||||
b.source AS booking_source,
|
||||
h.id AS hotel_id, h.slug, h.name AS hotel_name
|
||||
FROM bookings b
|
||||
JOIN hotels h ON h.id = b.hotel_id
|
||||
WHERE b.review_token = $1`,
|
||||
[token],
|
||||
)
|
||||
const row = rows[0]
|
||||
if (!row) return reply.code(404).send({ error: 'Invalid or expired link' })
|
||||
|
||||
// Check if review already submitted
|
||||
const { rows: existing } = await db.query(
|
||||
`SELECT id FROM reviews WHERE booking_id = $1 LIMIT 1`,
|
||||
[row.booking_id],
|
||||
)
|
||||
if (existing[0]) return reply.code(410).send({ error: 'Review already submitted' })
|
||||
|
||||
// Load review settings for this hotel
|
||||
const { rows: settings } = await db.query(
|
||||
`SELECT key, value FROM hotel_settings
|
||||
WHERE hotel_id = $1
|
||||
AND key IN (
|
||||
'review_redirect_threshold','review_platforms',
|
||||
'review_show_text_field','review_welcome_text',
|
||||
'review_brand_color'
|
||||
)`,
|
||||
[row.hotel_id],
|
||||
)
|
||||
const s: Record<string, unknown> = {}
|
||||
for (const r of settings) s[r.key] = r.value
|
||||
|
||||
return {
|
||||
hotelName: row.hotel_name,
|
||||
logoLetter: (row.hotel_name as string)[0] ?? 'О',
|
||||
welcomeText: (s.review_welcome_text as string | undefined) ?? 'Как вам у нас?',
|
||||
color: (s.review_brand_color as string | undefined) ?? '#2563eb',
|
||||
redirectThreshold: Number(s.review_redirect_threshold ?? 4),
|
||||
showTextField: s.review_show_text_field !== false,
|
||||
platforms: Array.isArray(s.review_platforms)
|
||||
? (s.review_platforms as { name: string; url: string; enabled: boolean }[])
|
||||
.filter(p => p.enabled)
|
||||
.map(p => ({ name: p.name, url: p.url }))
|
||||
: [],
|
||||
guestName: row.guest_name ?? '',
|
||||
bookingSource: row.booking_source ?? 'direct',
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// ── POST /api/public/review/:token ────────────────────────────────────────
|
||||
fastify.post<TokenParam & { Body: { rating: number; text?: string } }>(
|
||||
'/api/public/review/:token',
|
||||
async (request, reply) => {
|
||||
const { token } = request.params
|
||||
const { rating, text } = request.body
|
||||
|
||||
if (!rating || rating < 1 || rating > 5) {
|
||||
return reply.code(400).send({ error: 'Rating must be 1–5' })
|
||||
}
|
||||
|
||||
const { rows } = await db.query<{
|
||||
id: string; hotel_id: string; guest_name: string | null; guest_id: string | null
|
||||
}>(
|
||||
`SELECT b.id, b.hotel_id, b.guest_name, bg.guest_id
|
||||
FROM bookings b
|
||||
LEFT JOIN (
|
||||
SELECT DISTINCT ON (booking_id) booking_id, guest_id
|
||||
FROM booking_guests ORDER BY booking_id, created_at
|
||||
) bg ON bg.booking_id = b.id
|
||||
WHERE b.review_token = $1`,
|
||||
[token],
|
||||
)
|
||||
const booking = rows[0]
|
||||
if (!booking) return reply.code(404).send({ error: 'Invalid link' })
|
||||
|
||||
// Prevent duplicate
|
||||
const { rows: dup } = await db.query(
|
||||
`SELECT id FROM reviews WHERE booking_id = $1 LIMIT 1`,
|
||||
[booking.id],
|
||||
)
|
||||
if (dup[0]) return reply.code(409).send({ error: 'Already submitted' })
|
||||
|
||||
await db.query(
|
||||
`INSERT INTO reviews
|
||||
(hotel_id, booking_id, guest_id, guest_name, source, rating, text, is_public)
|
||||
VALUES ($1, $2, $3, $4, 'direct', $5, $6, $7)`,
|
||||
[
|
||||
booking.hotel_id,
|
||||
booking.id,
|
||||
booking.guest_id ?? null,
|
||||
booking.guest_name ?? 'Гость',
|
||||
rating,
|
||||
text ?? null,
|
||||
rating >= 4, // auto-publish positive reviews
|
||||
],
|
||||
)
|
||||
|
||||
return { ok: true }
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
export default reviewsRoutes
|
||||
@@ -88,7 +88,7 @@ export default function App() {
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/reset-password" element={<ResetPasswordPage />} />
|
||||
<Route path="/invite/:token" element={<AcceptInvitePage />} />
|
||||
<Route path="/review/:slug" element={<GuestReviewPage />} />
|
||||
<Route path="/review/:token" element={<GuestReviewPage />} />
|
||||
<Route path="/room-service/:slug" element={<GuestRoomServicePage />} />
|
||||
<Route path="/:slug/pay" element={<PayDepositPage />} />
|
||||
<Route path="/:slug/book" element={<BookingWidgetStandalonePage />} />
|
||||
|
||||
@@ -477,6 +477,24 @@ export const api = {
|
||||
req<{ ok: boolean }>('PATCH', `/api/hotels/${slug}/hotel-settings`, data),
|
||||
},
|
||||
|
||||
// ── Reviews ───────────────────────────────────────────────────────────────
|
||||
reviews: {
|
||||
list: (slug: string) =>
|
||||
req<ReviewApi[]>('GET', `/api/hotels/${slug}/reviews`),
|
||||
|
||||
update: (slug: string, id: string, data: { reply?: string; isPublic?: boolean }) =>
|
||||
req<ReviewApi>('PATCH', `/api/hotels/${slug}/reviews/${id}`, data),
|
||||
},
|
||||
|
||||
// ── Public review (no auth) ───────────────────────────────────────────────
|
||||
publicReview: {
|
||||
getConfig: (token: string) =>
|
||||
req<PublicReviewConfig>('GET', `/api/public/review/${token}`),
|
||||
|
||||
submit: (token: string, data: { rating: number; text?: string }) =>
|
||||
req<{ ok: boolean }>('POST', `/api/public/review/${token}`, data),
|
||||
},
|
||||
|
||||
// ── Guests ────────────────────────────────────────────────────────────────
|
||||
guests: {
|
||||
list: (slug: string, q?: string, passport?: string) => {
|
||||
@@ -1843,3 +1861,33 @@ function toHotelPayload(h: HotelPayload): Record<string, unknown> {
|
||||
if (h.checkOutTime !== undefined) out.check_out_time = h.checkOutTime
|
||||
return out
|
||||
}
|
||||
|
||||
|
||||
export interface ReviewApi {
|
||||
id: string
|
||||
bookingId: string | null
|
||||
guestId: string | null
|
||||
guestName: string
|
||||
source: string
|
||||
rating: number
|
||||
text: string | null
|
||||
reply: string | null
|
||||
repliedAt: string | null
|
||||
isPublic: boolean
|
||||
roomNumber: string | null
|
||||
bookingSource: string | null
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface PublicReviewConfig {
|
||||
hotelName: string
|
||||
logoLetter: string
|
||||
welcomeText: string
|
||||
color: string
|
||||
redirectThreshold: number
|
||||
showTextField: boolean
|
||||
platforms: { name: string; url: string }[]
|
||||
guestName: string
|
||||
bookingSource: string
|
||||
}
|
||||
|
||||
@@ -1,100 +1,117 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Star, ExternalLink, CheckCircle2, Heart } from 'lucide-react'
|
||||
import { Star, ExternalLink, CheckCircle2, Heart, Loader2 } from 'lucide-react'
|
||||
import { cn } from '../lib/utils'
|
||||
import { api } from '../lib/api'
|
||||
import type { PublicReviewConfig } from '../lib/api'
|
||||
|
||||
// ── 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 ─────────────────────────────────────────────────────────────────
|
||||
const BASE = (import.meta.env.VITE_API_URL as string | undefined) ?? 'https://api.hotelsync.ru'
|
||||
|
||||
export function GuestReviewPage() {
|
||||
const { slug } = useParams<{ slug: string }>()
|
||||
const hotel: HotelConfig = (slug ? MOCK_HOTELS[slug] : null) ?? DEFAULT_CONFIG
|
||||
const { token } = useParams<{ token: string }>()
|
||||
|
||||
const [config, setConfig] = useState<PublicReviewConfig | null>(null)
|
||||
const [status, setStatus] = useState<'loading' | 'ready' | 'already' | 'invalid'>('loading')
|
||||
const [rating, setRating] = useState(0)
|
||||
const [hover, setHover] = useState(0)
|
||||
const [text, setText] = useState('')
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const isPositive = rating >= hotel.redirectThreshold
|
||||
useEffect(() => {
|
||||
if (!token) { setStatus('invalid'); return }
|
||||
fetch(`${BASE}/api/public/review/${token}`)
|
||||
.then(async res => {
|
||||
if (res.status === 410) { setStatus('already'); return }
|
||||
if (!res.ok) { setStatus('invalid'); return }
|
||||
const data = await res.json() as PublicReviewConfig
|
||||
setConfig(data)
|
||||
setStatus('ready')
|
||||
})
|
||||
.catch(() => setStatus('invalid'))
|
||||
}, [token])
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (rating === 0) return
|
||||
setSubmitted(true)
|
||||
// In real app: POST /api/reviews { slug, rating, text }
|
||||
const handleSubmit = async () => {
|
||||
if (rating === 0 || !token) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await api.publicReview.submit(token, { rating, text: text.trim() || undefined })
|
||||
setSubmitted(true)
|
||||
} catch {
|
||||
// ignore — show submitted anyway to avoid confusion
|
||||
setSubmitted(true)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const color = config?.color ?? '#2563eb'
|
||||
const threshold = config?.redirectThreshold ?? 4
|
||||
const isPositive = rating >= threshold
|
||||
|
||||
// ── Loading ─────────────────────────────────────────────────────────────────
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
|
||||
<Loader2 size={32} className="text-slate-400 animate-spin" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Invalid / expired ───────────────────────────────────────────────────────
|
||||
if (status === 'invalid') {
|
||||
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="bg-white rounded-3xl shadow-2xl p-10 text-center max-w-sm w-full">
|
||||
<div className="text-5xl mb-4">🔗</div>
|
||||
<p className="font-bold text-slate-900 text-lg">Ссылка недействительна</p>
|
||||
<p className="text-slate-500 text-sm mt-2">Ссылка устарела или была использована.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Already submitted ───────────────────────────────────────────────────────
|
||||
if (status === 'already') {
|
||||
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="bg-white rounded-3xl shadow-2xl p-10 text-center max-w-sm w-full">
|
||||
<CheckCircle2 size={48} className="text-emerald-500 mx-auto mb-4" />
|
||||
<p className="font-bold text-slate-900 text-lg">Отзыв уже получен</p>
|
||||
<p className="text-slate-500 text-sm mt-2">Вы уже оставляли отзыв. Спасибо!</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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="h-2" style={{ backgroundColor: 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 }}
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{hotel.logoLetter}
|
||||
{config?.logoLetter ?? 'О'}
|
||||
</div>
|
||||
|
||||
{/* Hotel name */}
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900">{hotel.name}</h1>
|
||||
<h1 className="text-xl font-bold text-slate-900">{config?.hotelName}</h1>
|
||||
{!submitted && config?.guestName && (
|
||||
<p className="text-slate-400 text-sm mt-0.5">Привет, {config.guestName.split(' ')[0]}!</p>
|
||||
)}
|
||||
{!submitted && (
|
||||
<p className="text-slate-500 mt-1 text-base">{hotel.welcomeText}</p>
|
||||
<p className="text-slate-500 mt-1 text-base">{config?.welcomeText ?? 'Как вам у нас?'}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── NOT YET SUBMITTED ── */}
|
||||
{!submitted && (
|
||||
<>
|
||||
{/* Stars */}
|
||||
<div className="flex justify-center gap-2">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<button
|
||||
@@ -117,15 +134,13 @@ export function GuestReviewPage() {
|
||||
))}
|
||||
</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 && (
|
||||
{rating > 0 && config?.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}
|
||||
@@ -135,13 +150,13 @@ export function GuestReviewPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 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 }}
|
||||
disabled={rating === 0 || submitting}
|
||||
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 flex items-center justify-center gap-2"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{submitting && <Loader2 size={16} className="animate-spin" />}
|
||||
Отправить отзыв
|
||||
</button>
|
||||
</>
|
||||
@@ -174,9 +189,8 @@ export function GuestReviewPage() {
|
||||
Если вам не сложно — поделитесь впечатлениями на одной из площадок:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2.5">
|
||||
{hotel.platforms.map(p => (
|
||||
{(config?.platforms ?? []).map(p => (
|
||||
<a
|
||||
key={p.name}
|
||||
href={p.url}
|
||||
@@ -193,7 +207,6 @@ export function GuestReviewPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-8 pb-6 text-center">
|
||||
<p className="text-xs text-slate-300">HotelSync · система сбора отзывов</p>
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,19 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import {
|
||||
Star, ThumbsDown, Copy, CheckCheck, MessageSquare, QrCode,
|
||||
ArrowUpRight, Plus, Trash2, ExternalLink, Settings2,
|
||||
Send, Mail, Smartphone, Clock, Eye, Palette, Globe,
|
||||
Mail, Clock, Eye, Palette, Globe, Save, Loader2,
|
||||
} from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
import { cn } from '../lib/utils'
|
||||
import { Badge } from '../components/ui/Badge'
|
||||
import { api } from '../lib/api'
|
||||
import type { ReviewApi } from '../lib/api'
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
type ReviewStatus = 'pending' | 'published' | 'rejected'
|
||||
type BookingSource = 'booking' | 'yandex' | 'google' | 'direct' | 'widget'
|
||||
|
||||
interface Review {
|
||||
id: string
|
||||
guestName: string
|
||||
roomNumber: string
|
||||
rating: number
|
||||
text: string
|
||||
status: ReviewStatus
|
||||
source: 'qr' | 'email' | 'sms'
|
||||
bookingSource?: BookingSource
|
||||
createdAt: Date
|
||||
reply?: string
|
||||
autoRedirectedTo?: string[]
|
||||
}
|
||||
|
||||
interface ReviewPlatform {
|
||||
id: string
|
||||
name: string
|
||||
@@ -35,7 +21,7 @@ interface ReviewPlatform {
|
||||
enabled: boolean
|
||||
}
|
||||
|
||||
// ── Default settings ──────────────────────────────────────────────────────────
|
||||
// ── Default platforms ──────────────────────────────────────────────────────
|
||||
|
||||
const DEFAULT_PLATFORMS: ReviewPlatform[] = [
|
||||
{ id: 'p1', name: 'Booking.com', url: 'https://www.booking.com/hotel/ru/', enabled: true },
|
||||
@@ -44,63 +30,7 @@ const DEFAULT_PLATFORMS: ReviewPlatform[] = [
|
||||
{ id: 'p4', name: '2ГИС', url: 'https://2gis.ru/moscow/firm/', enabled: false },
|
||||
]
|
||||
|
||||
// ── Mock data ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const MOCK_REVIEWS: Review[] = [
|
||||
{
|
||||
id: 'rv1', guestName: 'Дмитрий Волков', roomNumber: '101',
|
||||
rating: 5, source: 'email', bookingSource: 'booking',
|
||||
createdAt: new Date(Date.now() - 3600000 * 5),
|
||||
text: 'Замечательный отель! Персонал очень вежливый. Номер чистый, завтрак вкусный. Обязательно вернёмся.',
|
||||
status: 'published',
|
||||
autoRedirectedTo: ['Booking.com'],
|
||||
},
|
||||
{
|
||||
id: 'rv2', guestName: 'Анна Козлова', roomNumber: '202',
|
||||
rating: 1, source: 'qr', bookingSource: 'direct',
|
||||
createdAt: new Date(Date.now() - 3600000 * 12),
|
||||
text: 'Шум из соседнего номера мешал спать. Кондиционер плохо работал. Разочарована.',
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: 'rv3', guestName: 'Наталья Александрова', roomNumber: '301',
|
||||
rating: 5, source: 'sms', bookingSource: 'widget',
|
||||
createdAt: new Date(Date.now() - 3600000 * 36),
|
||||
text: 'Лучший отель! Вид из окна потрясающий, кровать удобная, всё стильно.',
|
||||
status: 'published',
|
||||
autoRedirectedTo: ['Booking.com', 'Яндекс Путешествия', 'Google'],
|
||||
},
|
||||
{
|
||||
id: 'rv4', guestName: 'Игорь Соколов', roomNumber: '201',
|
||||
rating: 4, source: 'email', bookingSource: 'yandex',
|
||||
createdAt: new Date(Date.now() - 3600000 * 48),
|
||||
text: 'В целом хорошо. Немного дорого для такого номера. Расположение отличное.',
|
||||
status: 'published',
|
||||
autoRedirectedTo: ['Яндекс Путешествия'],
|
||||
},
|
||||
{
|
||||
id: 'rv5', guestName: 'Виктор Громов', roomNumber: '402',
|
||||
rating: 2, source: 'qr', bookingSource: 'direct',
|
||||
createdAt: new Date(Date.now() - 3600000 * 60),
|
||||
text: 'Долго ждали заселения. Номер убран с опозданием. Разочарованы.',
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: 'rv6', guestName: 'Михаил Орлов', roomNumber: '401',
|
||||
rating: 4, source: 'email', bookingSource: 'google',
|
||||
createdAt: new Date(Date.now() - 3600000 * 100),
|
||||
text: 'Очень доволен. Персонал внимательный, номер чистый.',
|
||||
status: 'published',
|
||||
reply: 'Михаил, спасибо за тёплые слова! Ждём вас снова.',
|
||||
autoRedirectedTo: ['Google'],
|
||||
},
|
||||
]
|
||||
|
||||
const REVIEW_LINK = 'https://guest.hotelsync.ru/review/grand-palace'
|
||||
|
||||
const SOURCE_LABEL: Record<Review['source'], string> = { qr: 'QR-код', email: 'Email', sms: 'SMS' }
|
||||
|
||||
const BOOKING_SOURCE_LABEL: Record<BookingSource, string> = {
|
||||
const BOOKING_SOURCE_LABEL: Record<string, string> = {
|
||||
booking: 'Booking.com',
|
||||
yandex: 'Яндекс Путешествия',
|
||||
google: 'Google',
|
||||
@@ -135,61 +65,119 @@ type Tab = 'pending' | 'published' | 'all' | 'preview' | 'settings'
|
||||
// ── Component ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function ReviewsPage() {
|
||||
const [reviews, setReviews] = useState<Review[]>(MOCK_REVIEWS)
|
||||
const { slug } = useParams<{ slug: string }>()
|
||||
|
||||
const [reviews, setReviews] = useState<ReviewApi[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [tab, setTab] = useState<Tab>('pending')
|
||||
const [replyId, setReplyId] = useState<string | null>(null)
|
||||
const [replyText, setReplyText] = useState('')
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
// Settings
|
||||
const [threshold, setThreshold] = useState(4)
|
||||
const [platforms, setPlatforms] = useState<ReviewPlatform[]>(DEFAULT_PLATFORMS)
|
||||
const [newPlatformName, setNewPlatformName] = useState('')
|
||||
const [newPlatformUrl, setNewPlatformUrl] = useState('')
|
||||
|
||||
// Settings — sending
|
||||
const [sendHours, setSendHours] = useState(2)
|
||||
const [sendChannel, setSendChannel] = useState<'email' | 'sms' | 'both'>('email')
|
||||
const [sendRetry, setSendRetry] = useState(true)
|
||||
const [settingsLoaded, setSettingsLoaded] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [threshold, setThreshold] = useState(4)
|
||||
const [platforms, setPlatforms] = useState<ReviewPlatform[]>(DEFAULT_PLATFORMS)
|
||||
const [newPlatformName, setNewPlatformName] = useState('')
|
||||
const [newPlatformUrl, setNewPlatformUrl] = useState('')
|
||||
const [sendHours, setSendHours] = useState(2)
|
||||
const [sendRetry, setSendRetry] = useState(true)
|
||||
const [requestEnabled, setRequestEnabled] = useState(true)
|
||||
const [useSourceRedirect, setUseSourceRedirect] = useState(true)
|
||||
|
||||
// Preview state
|
||||
const [previewRating, setPreviewRating] = useState(0)
|
||||
const [previewHover, setPreviewHover] = useState(0)
|
||||
const [previewRating, setPreviewRating] = useState(0)
|
||||
const [previewHover, setPreviewHover] = useState(0)
|
||||
const [previewSubmitted, setPreviewSubmitted] = useState(false)
|
||||
const [previewHotelName, setPreviewHotelName] = useState('Гранд Палас')
|
||||
const [previewColor, setPreviewColor] = useState(PREVIEW_COLORS[0])
|
||||
const [previewWelcome, setPreviewWelcome] = useState('Как вам у нас?')
|
||||
const [previewColor, setPreviewColor] = useState(PREVIEW_COLORS[0])
|
||||
const [previewWelcome, setPreviewWelcome] = useState('Как вам у нас?')
|
||||
const [previewShowText, setPreviewShowText] = useState(true)
|
||||
|
||||
const pending = reviews.filter(r => r.status === 'pending')
|
||||
const published = reviews.filter(r => r.status === 'published')
|
||||
// ── Load data ───────────────────────────────────────────────────────────────
|
||||
|
||||
const avgRating = published.length
|
||||
? (published.reduce((s, r) => s + r.rating, 0) / published.length).toFixed(1)
|
||||
: '—'
|
||||
const nps = published.length
|
||||
? Math.round(
|
||||
(published.filter(r => r.rating >= 5).length / published.length * 100) -
|
||||
(published.filter(r => r.rating <= 2).length / published.length * 100),
|
||||
)
|
||||
: 0
|
||||
const loadReviews = useCallback(async () => {
|
||||
if (!slug) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await api.reviews.list(slug)
|
||||
setReviews(data)
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [slug])
|
||||
|
||||
const filtered = tab === 'all' ? reviews
|
||||
: tab === 'settings' || tab === 'preview' ? []
|
||||
: reviews.filter(r => r.status === tab)
|
||||
const loadSettings = useCallback(async () => {
|
||||
if (!slug) return
|
||||
try {
|
||||
const s = await api.hotelSettings.get(slug)
|
||||
if (s.review_redirect_threshold !== undefined) setThreshold(Number(s.review_redirect_threshold))
|
||||
if (s.review_request_hours !== undefined) setSendHours(Number(s.review_request_hours))
|
||||
if (s.review_request_retry !== undefined) setSendRetry(Boolean(s.review_request_retry))
|
||||
if (s.review_request_enabled !== undefined) setRequestEnabled(Boolean(s.review_request_enabled))
|
||||
if (s.review_redirect_source !== undefined) setUseSourceRedirect(Boolean(s.review_redirect_source))
|
||||
if (s.review_welcome_text !== undefined) setPreviewWelcome(String(s.review_welcome_text))
|
||||
if (s.review_brand_color !== undefined) setPreviewColor(String(s.review_brand_color))
|
||||
if (s.review_show_text_field !== undefined) setPreviewShowText(Boolean(s.review_show_text_field))
|
||||
if (Array.isArray(s.review_platforms)) setPlatforms(s.review_platforms as ReviewPlatform[])
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setSettingsLoaded(true)
|
||||
}
|
||||
}, [slug])
|
||||
|
||||
const sendReply = (id: string) => {
|
||||
if (!replyText.trim()) return
|
||||
setReviews(prev => prev.map(r =>
|
||||
r.id === id ? { ...r, reply: replyText.trim(), status: 'published' } : r,
|
||||
))
|
||||
useEffect(() => {
|
||||
loadReviews()
|
||||
loadSettings()
|
||||
}, [loadReviews, loadSettings])
|
||||
|
||||
// ── Save settings ───────────────────────────────────────────────────────────
|
||||
|
||||
const saveSettings = async () => {
|
||||
if (!slug) return
|
||||
setSaving(true)
|
||||
try {
|
||||
await api.hotelSettings.update(slug, {
|
||||
review_redirect_threshold: threshold,
|
||||
review_request_hours: sendHours,
|
||||
review_request_retry: sendRetry,
|
||||
review_request_enabled: requestEnabled,
|
||||
review_redirect_source: useSourceRedirect,
|
||||
review_welcome_text: previewWelcome,
|
||||
review_brand_color: previewColor,
|
||||
review_show_text_field: previewShowText,
|
||||
review_platforms: platforms,
|
||||
})
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Review actions ──────────────────────────────────────────────────────────
|
||||
|
||||
const sendReply = async (id: string) => {
|
||||
if (!replyText.trim() || !slug) return
|
||||
const updated = await api.reviews.update(slug, id, { reply: replyText.trim(), isPublic: true })
|
||||
setReviews(prev => prev.map(r => r.id === id ? updated : r))
|
||||
setReplyId(null)
|
||||
setReplyText('')
|
||||
}
|
||||
|
||||
const reject = (id: string) =>
|
||||
setReviews(prev => prev.map(r => r.id === id ? { ...r, status: 'rejected' } : r))
|
||||
const reject = async (id: string) => {
|
||||
if (!slug) return
|
||||
const updated = await api.reviews.update(slug, id, { isPublic: false })
|
||||
setReviews(prev => prev.map(r => r.id === id ? updated : r))
|
||||
}
|
||||
|
||||
const restore = async (id: string, r: ReviewApi) => {
|
||||
if (!slug) return
|
||||
const updated = await api.reviews.update(slug, id, { isPublic: r.rating >= threshold })
|
||||
setReviews(prev => prev.map(x => x.id === id ? updated : x))
|
||||
}
|
||||
|
||||
const addPlatform = () => {
|
||||
if (!newPlatformName.trim()) return
|
||||
@@ -204,21 +192,32 @@ export function ReviewsPage() {
|
||||
}
|
||||
|
||||
const copyLink = () => {
|
||||
navigator.clipboard.writeText(REVIEW_LINK).catch(() => {})
|
||||
const link = `https://app.hotelsync.ru/review/` // token-based, shown as example
|
||||
navigator.clipboard.writeText(link).catch(() => {})
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
// ── Derived state ───────────────────────────────────────────────────────────
|
||||
|
||||
const pending = reviews.filter(r => !r.isPublic && !r.reply)
|
||||
const published = reviews.filter(r => r.isPublic)
|
||||
const enabledPlatforms = platforms.filter(p => p.enabled)
|
||||
|
||||
// Determine redirect platform based on booking source
|
||||
const getRedirectPlatform = (source?: BookingSource): string | null => {
|
||||
if (!useSourceRedirect) return null
|
||||
if (source === 'booking') return 'Booking.com'
|
||||
if (source === 'yandex') return 'Яндекс Путешествия'
|
||||
if (source === 'google') return 'Google'
|
||||
return null
|
||||
}
|
||||
const avgRating = published.length
|
||||
? (published.reduce((s, r) => s + r.rating, 0) / published.length).toFixed(1)
|
||||
: '—'
|
||||
const nps = published.length
|
||||
? Math.round(
|
||||
(published.filter(r => r.rating >= 5).length / published.length * 100) -
|
||||
(published.filter(r => r.rating <= 2).length / published.length * 100),
|
||||
)
|
||||
: 0
|
||||
|
||||
const filtered = tab === 'all' ? reviews
|
||||
: tab === 'settings' || tab === 'preview' ? []
|
||||
: tab === 'pending' ? pending
|
||||
: published
|
||||
|
||||
const TABS: { key: Tab; label: string; count?: number; colorCls?: string; Icon?: React.ElementType }[] = [
|
||||
{ key: 'pending', label: 'Требуют ответа', count: pending.length, colorCls: 'bg-red-500 text-white' },
|
||||
@@ -282,15 +281,15 @@ export function ReviewsPage() {
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<QrCode size={24} className="text-slate-500 shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm mb-1">Ссылка для сбора отзывов</p>
|
||||
<div className="flex items-center gap-2 p-2 rounded-xl bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600">
|
||||
<span className="text-xs font-mono text-slate-700 dark:text-slate-300 flex-1 truncate">{REVIEW_LINK}</span>
|
||||
<button onClick={copyLink} className="shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-xs font-medium hover:border-brand-400">
|
||||
{copied ? <CheckCheck size={11} className="text-emerald-600" /> : <Copy size={11} />}
|
||||
{copied ? 'Скопировано' : 'Копировать'}
|
||||
</button>
|
||||
</div>
|
||||
<p className="font-semibold text-slate-900 dark:text-slate-100 text-sm mb-1">Ссылки для сбора отзывов</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Уникальная ссылка генерируется для каждого гостя при выезде и отправляется автоматически по email.
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={copyLink} className="shrink-0 flex items-center gap-1 px-2 py-1.5 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-xs font-medium hover:border-brand-400">
|
||||
{copied ? <CheckCheck size={11} className="text-emerald-600" /> : <Copy size={11} />}
|
||||
{copied ? 'Скопировано' : 'Пример ссылки'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -324,14 +323,10 @@ export function ReviewsPage() {
|
||||
{/* Phone frame */}
|
||||
<div className="flex justify-center lg:justify-start">
|
||||
<div className="w-72 border-4 border-slate-800 dark:border-slate-600 rounded-3xl shadow-2xl overflow-hidden bg-white dark:bg-slate-900">
|
||||
{/* Phone notch */}
|
||||
<div className="bg-slate-800 dark:bg-slate-950 h-5 flex items-center justify-center">
|
||||
<div className="w-16 h-1.5 rounded-full bg-slate-600" />
|
||||
</div>
|
||||
|
||||
{/* Preview content */}
|
||||
<div className="p-5 text-center space-y-4">
|
||||
{/* Hotel logo */}
|
||||
<div
|
||||
className="w-16 h-16 rounded-full mx-auto flex items-center justify-center text-2xl font-bold text-white shadow-lg"
|
||||
style={{ backgroundColor: previewColor }}
|
||||
@@ -342,8 +337,6 @@ export function ReviewsPage() {
|
||||
<p className="font-bold text-slate-900 dark:text-slate-100 text-base">{previewHotelName}</p>
|
||||
<p className="text-lg font-semibold text-slate-700 dark:text-slate-300 mt-1">{previewWelcome}</p>
|
||||
</div>
|
||||
|
||||
{/* Star selector */}
|
||||
{!previewSubmitted && (
|
||||
<div className="flex justify-center gap-1">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
@@ -367,8 +360,6 @@ export function ReviewsPage() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Text area (if rating selected and positive) */}
|
||||
{previewRating > 0 && !previewSubmitted && previewShowText && (
|
||||
<textarea
|
||||
className="w-full border border-slate-200 dark:border-slate-600 rounded-xl p-2.5 text-xs text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800 resize-none"
|
||||
@@ -377,8 +368,6 @@ export function ReviewsPage() {
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Submit button */}
|
||||
{previewRating > 0 && !previewSubmitted && (
|
||||
<button
|
||||
onClick={() => setPreviewSubmitted(true)}
|
||||
@@ -388,15 +377,11 @@ export function ReviewsPage() {
|
||||
Отправить отзыв
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* After submit: negative flow */}
|
||||
{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 >= threshold && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Поделитесь на площадках:</p>
|
||||
@@ -411,8 +396,6 @@ export function ReviewsPage() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reset */}
|
||||
{previewSubmitted && (
|
||||
<button
|
||||
onClick={() => { setPreviewSubmitted(false); setPreviewRating(0); setPreviewHover(0) }}
|
||||
@@ -422,7 +405,6 @@ export function ReviewsPage() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800 dark:bg-slate-950 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -434,29 +416,14 @@ export function ReviewsPage() {
|
||||
<Palette size={16} className="text-brand-600" />
|
||||
Настроить внешний вид
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Название отеля</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={previewHotelName}
|
||||
onChange={e => setPreviewHotelName(e.target.value)}
|
||||
placeholder="Название отеля"
|
||||
/>
|
||||
<input type="text" className="input" value={previewHotelName} onChange={e => setPreviewHotelName(e.target.value)} placeholder="Название отеля" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Приветственный текст</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={previewWelcome}
|
||||
onChange={e => setPreviewWelcome(e.target.value)}
|
||||
placeholder="Как вам у нас?"
|
||||
/>
|
||||
<input type="text" className="input" value={previewWelcome} onChange={e => setPreviewWelcome(e.target.value)} placeholder="Как вам у нас?" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Основной цвет</p>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
@@ -464,23 +431,13 @@ export function ReviewsPage() {
|
||||
<button
|
||||
key={c}
|
||||
onClick={() => setPreviewColor(c)}
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-full border-2 transition-transform hover:scale-110',
|
||||
previewColor === c ? 'border-slate-800 dark:border-white scale-110' : 'border-transparent',
|
||||
)}
|
||||
className={cn('w-8 h-8 rounded-full border-2 transition-transform hover:scale-110', previewColor === c ? 'border-slate-800 dark:border-white scale-110' : 'border-transparent')}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
<input
|
||||
type="color"
|
||||
className="w-8 h-8 rounded-full cursor-pointer border-0 bg-transparent"
|
||||
value={previewColor}
|
||||
onChange={e => setPreviewColor(e.target.value)}
|
||||
title="Свой цвет"
|
||||
/>
|
||||
<input type="color" className="w-8 h-8 rounded-full cursor-pointer border-0 bg-transparent" value={previewColor} onChange={e => setPreviewColor(e.target.value)} title="Свой цвет" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-800 dark:text-slate-200">Показывать поле для текста</p>
|
||||
@@ -494,14 +451,16 @@ export function ReviewsPage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">Текущий порог: {threshold} из 5 звёзд</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
При оценке ≥ {threshold} звёзд гость видит кнопки площадок. Ниже — страницу благодарности.
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={saveSettings} disabled={saving} className="btn-primary gap-2">
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
Сохранить внешний вид
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -510,62 +469,53 @@ export function ReviewsPage() {
|
||||
{tab === 'settings' && (
|
||||
<div className="max-w-2xl space-y-5">
|
||||
|
||||
{/* Enable toggle */}
|
||||
<div className="card p-5">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
|
||||
<Mail size={15} className="text-brand-600" />
|
||||
Автоматическая отправка запросов
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
|
||||
После выезда гостя автоматически отправлять email с просьбой оставить отзыв
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setRequestEnabled(v => !v)}
|
||||
className={cn('relative w-11 h-6 rounded-full transition-colors shrink-0', requestEnabled ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600')}
|
||||
>
|
||||
<div className={cn('absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform', requestEnabled ? 'left-[22px]' : 'left-1')} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sending timing */}
|
||||
<div className="card p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
|
||||
<Send size={15} className="text-brand-600" />
|
||||
<Clock size={15} className="text-brand-600" />
|
||||
Отправка ссылки
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
|
||||
Через сколько часов после выезда отправлять ссылку?
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={72}
|
||||
className="input w-24"
|
||||
type="number" min={1} max={72} className="input w-24"
|
||||
value={sendHours}
|
||||
onChange={e => setSendHours(Math.min(72, Math.max(1, parseInt(e.target.value) || 1)))}
|
||||
/>
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">часов (1–72)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Канал отправки</p>
|
||||
<div className="flex gap-2">
|
||||
{([
|
||||
{ key: 'email', label: 'Email', Icon: Mail },
|
||||
{ key: 'sms', label: 'SMS', Icon: Smartphone },
|
||||
{ key: 'both', label: 'Email + SMS', Icon: Send },
|
||||
] as const).map(ch => (
|
||||
<button
|
||||
key={ch.key}
|
||||
onClick={() => setSendChannel(ch.key)}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors',
|
||||
sendChannel === ch.key
|
||||
? 'bg-brand-600 border-brand-600 text-white'
|
||||
: 'border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:border-brand-400',
|
||||
)}
|
||||
>
|
||||
<ch.Icon size={13} />
|
||||
{ch.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
|
||||
<Clock size={13} className="text-slate-500" />
|
||||
Повторная отправка
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Если гость не открыл ссылку через 24ч</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Если гость не оставил отзыв через 24ч</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSendRetry(v => !v)}
|
||||
@@ -579,17 +529,11 @@ export function ReviewsPage() {
|
||||
{/* Threshold */}
|
||||
<div className="card p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100">Порог перенаправления</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Ниже порога — модерация. Выше — гость получает ссылку на внешние площадки.
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Ниже порога — модерация. Выше — гость получает ссылку на внешние площадки.</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-2">Порог (из 5 звёзд)</p>
|
||||
<input
|
||||
type="range" min={1} max={4} value={threshold}
|
||||
onChange={e => setThreshold(parseInt(e.target.value))}
|
||||
className="w-48"
|
||||
/>
|
||||
<input type="range" min={1} max={4} value={threshold} onChange={e => setThreshold(parseInt(e.target.value))} className="w-48" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-brand-600 dark:text-brand-400">{threshold}</div>
|
||||
@@ -632,13 +576,12 @@ export function ReviewsPage() {
|
||||
<div className={cn('absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform', useSourceRedirect ? 'left-[22px]' : 'left-1')} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ source: 'Booking.com бронирование', redirect: 'Booking.com', smart: true },
|
||||
{ source: 'Яндекс Путешествия', redirect: 'Яндекс Путешествия', smart: true },
|
||||
{ source: 'Google', redirect: 'Google', smart: true },
|
||||
{ source: 'Прямое бронирование / виджет', redirect: 'Гость выбирает сам', smart: false },
|
||||
{ source: 'Booking.com бронирование', redirect: 'Booking.com', smart: true },
|
||||
{ source: 'Яндекс Путешествия', redirect: 'Яндекс Путешествия', smart: true },
|
||||
{ source: 'Google', redirect: 'Google', smart: true },
|
||||
{ source: 'Прямое бронирование / виджет', redirect: 'Гость выбирает сам', smart: false },
|
||||
].map(row => (
|
||||
<div key={row.source} className={cn(
|
||||
'flex items-center justify-between p-3 rounded-xl border text-sm',
|
||||
@@ -649,9 +592,7 @@ export function ReviewsPage() {
|
||||
<span className="text-slate-600 dark:text-slate-400">{row.source}</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<ArrowUpRight size={12} className="text-slate-400" />
|
||||
<span className={cn('font-medium', row.smart ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500')}>
|
||||
{row.redirect}
|
||||
</span>
|
||||
<span className={cn('font-medium', row.smart ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500')}>{row.redirect}</span>
|
||||
{row.smart && useSourceRedirect && (
|
||||
<span className="text-[9px] bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-1 py-0.5 rounded font-semibold">⚡ авто</span>
|
||||
)}
|
||||
@@ -664,9 +605,7 @@ export function ReviewsPage() {
|
||||
{/* Platforms */}
|
||||
<div className="card p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100">Площадки для перенаправления</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Гость с положительным отзывом получит ссылки на эти площадки.
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Гость с положительным отзывом получит ссылки на эти площадки.</p>
|
||||
<div className="space-y-2">
|
||||
{platforms.map(p => (
|
||||
<div key={p.id} className="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-600">
|
||||
@@ -694,107 +633,100 @@ export function ReviewsPage() {
|
||||
<div className="pt-2 border-t border-slate-200 dark:border-slate-600">
|
||||
<p className="text-xs font-medium text-slate-600 dark:text-slate-400 mb-2">Добавить площадку</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text" className="input flex-1"
|
||||
placeholder="Название (например: Tripadvisor)"
|
||||
value={newPlatformName}
|
||||
onChange={e => setNewPlatformName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="text" className="input flex-1"
|
||||
placeholder="Ссылка на страницу отеля"
|
||||
value={newPlatformUrl}
|
||||
onChange={e => setNewPlatformUrl(e.target.value)}
|
||||
/>
|
||||
<button onClick={addPlatform} className="btn-primary shrink-0">
|
||||
<Plus size={14} />Добавить
|
||||
</button>
|
||||
<input type="text" className="input flex-1" placeholder="Название (например: Tripadvisor)" value={newPlatformName} onChange={e => setNewPlatformName(e.target.value)} />
|
||||
<input type="text" className="input flex-1" placeholder="Ссылка на страницу отеля" value={newPlatformUrl} onChange={e => setNewPlatformUrl(e.target.value)} />
|
||||
<button onClick={addPlatform} className="btn-primary shrink-0"><Plus size={14} />Добавить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save button */}
|
||||
<button onClick={saveSettings} disabled={saving || !settingsLoaded} className="btn-primary gap-2">
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||||
Сохранить настройки
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ══════════════════════ Review list ══════════════════════ */}
|
||||
{tab !== 'settings' && tab !== 'preview' && (
|
||||
<div className="space-y-3">
|
||||
{filtered.length === 0 && (
|
||||
{loading && (
|
||||
<div className="card p-8 text-center text-slate-500 dark:text-slate-400">
|
||||
<Loader2 size={24} className="mx-auto mb-2 animate-spin opacity-50" />
|
||||
<p>Загрузка...</p>
|
||||
</div>
|
||||
)}
|
||||
{!loading && filtered.length === 0 && (
|
||||
<div className="card p-8 text-center text-slate-500 dark:text-slate-400">
|
||||
<MessageSquare size={32} className="mx-auto mb-2 opacity-30" />
|
||||
<p>Отзывов нет</p>
|
||||
</div>
|
||||
)}
|
||||
{filtered.map(review => {
|
||||
const isNegative = review.rating < threshold
|
||||
const redirectTarget = getRedirectPlatform(review.bookingSource)
|
||||
const isNegative = review.rating < threshold
|
||||
const bookingSrc = review.bookingSource ?? ''
|
||||
const redirectTarget = useSourceRedirect
|
||||
? bookingSrc === 'booking' ? 'Booking.com'
|
||||
: bookingSrc === 'yandex' ? 'Яндекс Путешествия'
|
||||
: bookingSrc === 'google' ? 'Google'
|
||||
: null
|
||||
: null
|
||||
return (
|
||||
<div
|
||||
key={review.id}
|
||||
className={cn(
|
||||
'card p-4',
|
||||
review.status === 'pending' && 'border-red-300 dark:border-red-700/60 bg-red-50/50 dark:bg-red-900/10',
|
||||
!review.isPublic && !review.reply && 'border-red-300 dark:border-red-700/60 bg-red-50/50 dark:bg-red-900/10',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<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">
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap mb-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-semibold text-slate-900 dark:text-slate-100">{review.guestName}</p>
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">№{review.roomNumber}</Badge>
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">{SOURCE_LABEL[review.source]}</Badge>
|
||||
{review.bookingSource && (
|
||||
{review.roomNumber && <Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">№{review.roomNumber}</Badge>}
|
||||
{review.bookingSource && BOOKING_SOURCE_LABEL[review.bookingSource] && (
|
||||
<Badge className="bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
|
||||
{BOOKING_SOURCE_LABEL[review.bookingSource]}
|
||||
</Badge>
|
||||
)}
|
||||
{isNegative && <Badge className="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">Негативный</Badge>}
|
||||
{/* Redirect badge for published positive */}
|
||||
{review.status === 'published' && !isNegative && review.autoRedirectedTo && review.autoRedirectedTo.length > 0 && (
|
||||
{review.isPublic && !isNegative && (
|
||||
<Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 flex items-center gap-1">
|
||||
<ArrowUpRight size={10} />
|
||||
{review.bookingSource && ['booking','yandex','google'].includes(review.bookingSource)
|
||||
? `→ ${review.autoRedirectedTo[0]}`
|
||||
: '→ Выбрал площадку'
|
||||
}
|
||||
{redirectTarget ? `→ ${redirectTarget}` : '→ Выбрал площадку'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-slate-400">{format(review.createdAt, 'd MMM, HH:mm', { locale: ru })}</span>
|
||||
<span className="text-xs text-slate-400">{format(new Date(review.createdAt), 'd MMM, HH:mm', { locale: ru })}</span>
|
||||
</div>
|
||||
|
||||
<StarRating rating={review.rating} />
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300 mt-2 leading-relaxed">{review.text}</p>
|
||||
|
||||
{/* Manager reply */}
|
||||
{review.text && <p className="text-sm text-slate-700 dark:text-slate-300 mt-2 leading-relaxed">{review.text}</p>}
|
||||
{review.reply && (
|
||||
<div className="mt-3 p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400">
|
||||
<p className="text-xs text-blue-600 dark:text-blue-400 font-semibold mb-1">Личный ответ менеджера:</p>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">{review.reply}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Redirect info for positive pending */}
|
||||
{review.status === 'pending' && !isNegative && (
|
||||
{!review.isPublic && !review.reply && !isNegative && (
|
||||
<div className="mt-2 p-2.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700">
|
||||
<p className="text-xs text-blue-700 dark:text-blue-300">
|
||||
{redirectTarget
|
||||
? `Авторедирект: гость получит ссылку на ${redirectTarget} (источник бронирования)`
|
||||
? `Авторедирект: гость получит ссылку на ${redirectTarget}`
|
||||
: `Гость получит ссылки для публикации на: ${enabledPlatforms.map(p => p.name).join(', ')}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{replyId === review.id && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<textarea
|
||||
className="input resize-none text-sm w-full"
|
||||
rows={2}
|
||||
placeholder="Личный ответ гостю (отправится по email/SMS)..."
|
||||
className="input resize-none text-sm w-full" rows={2}
|
||||
placeholder="Личный ответ гостю (отправится по email)..."
|
||||
value={replyText}
|
||||
onChange={e => setReplyText(e.target.value)}
|
||||
autoFocus
|
||||
@@ -806,10 +738,8 @@ export function ReviewsPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 flex-wrap mt-3">
|
||||
{review.status === 'pending' && !review.reply && replyId !== review.id && (
|
||||
{!review.isPublic && !review.reply && replyId !== review.id && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => { setReplyId(review.id); setReplyText('') }}
|
||||
@@ -825,12 +755,9 @@ export function ReviewsPage() {
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{review.status === 'rejected' && (
|
||||
{!review.isPublic && review.reply && (
|
||||
<button
|
||||
onClick={() => setReviews(prev => prev.map(r => r.id === review.id
|
||||
? { ...r, status: isNegative ? 'pending' : 'published' }
|
||||
: r,
|
||||
))}
|
||||
onClick={() => restore(review.id, review)}
|
||||
className="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-600 text-xs font-medium text-slate-600 dark:text-slate-400 hover:border-brand-400"
|
||||
>
|
||||
Восстановить
|
||||
|
||||
Reference in New Issue
Block a user