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

feat: widget — room display mode toggle (by room / by category)

Browse Source
This commit is contained in:
HotelSync
2026-04-07 20:46:30 +03:00
parent 57531f2022
commit ab37430243
3 changed files with 213 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/api.ts
View File

@@ -1634,6 +1634,17 @@ export interface WidgetRoom {
amenities: string[]
description: string
photos: string[]
categoryId: string | null
}
export interface WidgetCategory {
id: string
name: string
description: string
amenities: string[]
photos: string[]
minPrice: number
maxGuests: number
}
export interface WidgetConfig {
@@ -1643,10 +1654,12 @@ export interface WidgetConfig {
paymentEnabled: boolean
currency: string
rooms: WidgetRoom[]
categories: WidgetCategory[]
}
export interface WidgetBookingPayload {
roomId: string
roomId?: string
categoryId?: string
checkIn: string
checkOut: string
guestName: string

165
src/pages/BookingWidgetPage.tsx
View File

@@ -10,7 +10,7 @@ import {
import { cn } from '../lib/utils'
import { useModules } from '../contexts/ModulesContext'
import { useAuth } from '../contexts/AuthContext'
import { api, type WidgetRoom, type PaymentGateway } from '../lib/api'
import { api, type WidgetRoom, type WidgetCategory, type PaymentGateway } from '../lib/api'
// ── Widget settings type ───────────────────────────────────────────────────────
@@ -38,6 +38,7 @@ interface WidgetSettings {
language: 'ru' | 'en'
showRooms: boolean
showRental: boolean
roomDisplayMode: 'rooms' | 'categories'
minNights: number
paymentProvider: 'yukassa' | 'tinkoff' | 'cloudpayments' | 'none'
showPromo: boolean
@@ -131,6 +132,31 @@ const MOCK_ROOMS: MockRoom[] = [
},
]
interface MockCategory {
id: string
name: string
minPrice: number
maxGuests: number
amenities: string[]
description: string
availableCount: number
}
const MOCK_CATEGORIES: MockCategory[] = [
{ id: 'c1', name: 'Стандарт', minPrice: 4500, maxGuests: 2, availableCount: 3,
amenities: ['Wi-Fi', 'TV', 'Кондиционер', 'Фен'],
description: 'Уютные номера с современным ремонтом и всем необходимым для комфортного проживания.' },
{ id: 'c2', name: 'Комфорт', minPrice: 6500, maxGuests: 2, availableCount: 2,
amenities: ['Wi-Fi', 'TV', 'Кондиционер', 'Мини-бар', 'Кофемашина'],
description: 'Просторные номера с расширенными удобствами и зоной отдыха.' },
{ id: 'c3', name: 'Делюкс', minPrice: 8900, maxGuests: 3, availableCount: 1,
amenities: ['Wi-Fi', 'Smart TV', 'Кондиционер', 'Джакузи', 'Балкон'],
description: 'Роскошные номера с панорамными окнами и собственным джакузи.' },
{ id: 'c4', name: 'Пентхаус', minPrice: 15000, maxGuests: 4, availableCount: 1,
amenities: ['Wi-Fi 1Гбит', 'Smart TV 75"', 'Сауна', 'Терраса', 'Дворецкий'],
description: 'Эксклюзивный пентхаус на верхнем этаже с террасой и видом 360°.' },
]
const AMENITY_ICONS: Record<string, React.ElementType> = {
'Wi-Fi': Wifi, 'Wi-Fi 1Гбит': Wifi,
'TV': Tv2, 'Smart TV': Tv2, 'Smart TV 75"': Tv2,
@@ -161,10 +187,11 @@ const DEFAULT_SERVICES: AdditionalService[] = [
// ── Widget Preview Component ───────────────────────────────────────────────────
function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
function WidgetPreview({ settings, slug, realRooms, realCategories, paymentEnabled }: {
settings: WidgetSettings
slug?: string
realRooms?: WidgetRoom[]
realCategories?: WidgetCategory[]
paymentEnabled?: boolean
}) {
const [previewTab, setPreviewTab] = useState<'rooms' | 'rental'>('rooms')
@@ -205,8 +232,20 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
}))
: MOCK_ROOMS
const selectedRoom = displayRooms.find(r => r.id === selected)
const roomTotal = selectedRoom ? selectedRoom.price * Math.max(1, nights) : 0
// Categories mode
const displayCategories: Array<{ id: string; name: string; minPrice: number; maxGuests: number; amenities: string[]; description: string; availableCount: number }> =
realCategories && realCategories.length > 0
? realCategories.map(c => ({
...c,
availableCount: realRooms ? realRooms.filter(r => r.categoryId === c.id).length : 0,
}))
: MOCK_CATEGORIES
const isCategoryMode = settings.roomDisplayMode === 'categories'
const selectedRoom = !isCategoryMode ? displayRooms.find(r => r.id === selected) : undefined
const selectedCategory = isCategoryMode ? displayCategories.find(c => c.id === selected) : undefined
const selectedName = selectedRoom?.name ?? selectedCategory?.name
const roomTotal = (selectedRoom ? selectedRoom.price : (selectedCategory ? selectedCategory.minPrice : 0)) * Math.max(1, nights)
const extraTotal = extraBeds * EXTRA_BED_PRICE * Math.max(1, nights)
const servicesTotal = selectedServices.reduce((sum, sid) => {
const s = settings.additionalServices.find(s => s.id === sid)
@@ -236,7 +275,7 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
.map(s => ({ name: s!.name, price: s!.price }))
const result = await api.widget.createBooking(slug, {
roomId: selected,
...(isCategoryMode ? { categoryId: selected! } : { roomId: selected! }),
checkIn, checkOut,
guestName: formValues['name'] ?? formValues['full_name'] ?? 'Гость',
guestEmail: formValues['email'] ?? undefined,
@@ -308,7 +347,7 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
: 'Оплата на месте при заезде. Подтверждение придёт на email.'}
</p>
<div className="bg-slate-50 rounded-xl p-4 text-left space-y-1">
<p className="text-xs text-slate-500">Номер: <span className="font-medium text-slate-700">{selectedRoom?.name}</span></p>
<p className="text-xs text-slate-500">{isCategoryMode ? 'Категория' : 'Номер'}: <span className="font-medium text-slate-700">{selectedName}</span></p>
<p className="text-xs text-slate-500">Заезд: <span className="font-medium text-slate-700">{checkIn}</span></p>
<p className="text-xs text-slate-500">Выезд: <span className="font-medium text-slate-700">{checkOut}</span></p>
<p className="text-xs text-slate-500">Итого: <span className="font-bold text-slate-900">{grandTotal.toLocaleString('ru-RU')} ₽</span></p>
@@ -346,7 +385,7 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
<div className="p-5 space-y-4">
{/* Amount summary */}
<div className="bg-slate-50 rounded-xl p-3 flex items-center justify-between">
<span className="text-sm text-slate-600">{selectedRoom?.name} · {nights} ноч.</span>
<span className="text-sm text-slate-600">{selectedName} · {nights} ноч.</span>
<span className="text-base font-bold text-slate-900">{grandTotal.toLocaleString('ru-RU')} ₽</span>
</div>
@@ -431,7 +470,7 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
</button>
<div>
<p className="font-bold">{settings.language === 'ru' ? 'Данные гостя' : 'Guest details'}</p>
<p className="text-xs opacity-80">{selectedRoom?.name} · {nights} ноч.</p>
<p className="text-xs opacity-80">{selectedName} · {nights} ноч.</p>
</div>
{/* Step indicator */}
<div className="ml-auto flex items-center gap-1">
@@ -447,7 +486,7 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
{/* Summary */}
<div className="bg-slate-50 rounded-xl p-3 space-y-1">
<div className="flex justify-between text-xs">
<span className="text-slate-500">{selectedRoom?.name} × {nights} ноч.</span>
<span className="text-slate-500">{selectedName} × {nights} ноч.</span>
<span className="font-medium">{roomTotal.toLocaleString('ru-RU')} ₽</span>
</div>
{extraBeds > 0 && (
@@ -706,8 +745,78 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
</div>
)}
{/* Rooms list */}
{previewTab === 'rooms' && (
{/* Rooms list / Category list */}
{previewTab === 'rooms' && isCategoryMode && (
<div className="p-4 space-y-3 max-h-[480px] overflow-y-auto">
{nights > 0 && (
<p className="text-xs text-slate-500">
{nights} {nights === 1 ? 'ночь' : nights < 5 ? 'ночи' : 'ночей'} · {guests} {settings.language === 'ru' ? 'гостей' : 'guests'}
{children > 0 && ` · ${children} дет.`}
</p>
)}
{displayCategories.map(cat => {
const isSelected = selected === cat.id
return (
<div
key={cat.id}
className={cn('rounded-xl border-2 overflow-hidden transition-all cursor-pointer', isSelected ? 'border-2' : 'border-slate-200')}
style={isSelected ? { borderColor: settings.primaryColor } : {}}
onClick={() => setSelected(cat.id === selected ? null : cat.id)}
>
<div
className={cn('p-3 transition-colors', isSelected ? '' : 'hover:bg-slate-50')}
style={isSelected ? { background: settings.primaryColor + '08' } : {}}
>
<div className="flex items-start gap-3">
{/* Icon */}
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-2xl shrink-0">
🛏️
</div>
<div className="flex-1 min-w-0">
<p className="font-semibold text-slate-900 text-sm">{cat.name}</p>
<div className="flex items-center gap-2 mt-0.5 flex-wrap">
<span className="text-xs text-slate-500 flex items-center gap-0.5">
<Users size={10} /> до {cat.maxGuests}
</span>
{cat.availableCount > 0 && (
<span className="text-xs text-emerald-600">· {cat.availableCount} свободно</span>
)}
</div>
{cat.description && (
<p className="text-xs text-slate-500 mt-1 line-clamp-2">{cat.description}</p>
)}
</div>
<div className="text-right shrink-0">
<p className="font-bold text-slate-900 text-sm">
{nights > 0 ? (cat.minPrice * nights).toLocaleString('ru-RU') : cat.minPrice.toLocaleString('ru-RU')} ₽
</p>
<p className="text-[10px] text-slate-400">{nights > 0 ? `за ${nights} ноч.` : 'от/ночь'}</p>
</div>
</div>
{/* Amenities */}
{cat.amenities.length > 0 && (
<div className="flex flex-wrap gap-1 mt-2">
{cat.amenities.slice(0, 4).map(a => {
const Icon = AMENITY_ICONS[a]
return (
<span key={a} className="flex items-center gap-0.5 text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">
{Icon ? <Icon size={8} /> : null}{a}
</span>
)
})}
{cat.amenities.length > 4 && (
<span className="text-[10px] text-slate-400">+{cat.amenities.length - 4}</span>
)}
</div>
)}
</div>
</div>
)
})}
</div>
)}
{previewTab === 'rooms' && !isCategoryMode && (
<div className="p-4 space-y-3 max-h-[480px] overflow-y-auto">
{nights > 0 && (
<p className="text-xs text-slate-500">
@@ -952,8 +1061,7 @@ function WidgetPreview({ settings, slug, realRooms, paymentEnabled }: {
>
{settings.language === 'ru' ? 'Забронировать' : 'Book now'}
{selected && nights > 0 && previewTab === 'rooms' && (() => {
const r = displayRooms.find(r => r.id === selected)
const total = r ? r.price * nights + extraBeds * EXTRA_BED_PRICE * nights : 0
const total = grandTotal
return total ? ` · ${total.toLocaleString('ru-RU')} ₽` : ''
})()}
</button>
@@ -982,6 +1090,7 @@ export function BookingWidgetPage() {
// Real data for preview
const [realRooms, setRealRooms] = useState<WidgetRoom[]>([])
const [realCategories, setRealCategories] = useState<WidgetCategory[]>([])
const [gateway, setGateway] = useState<PaymentGateway | null>(null)
const [gatewayLoading, setGatewayLoading] = useState(false)
@@ -993,6 +1102,7 @@ export function BookingWidgetPage() {
api.paymentGateways.list(slug).catch(() => [] as PaymentGateway[]),
]).then(([config, gws]) => {
if (config?.rooms) setRealRooms(config.rooms)
if (config?.categories) setRealCategories(config.categories)
const widgetGw = gws.find(g => g.isActive && g.modules?.includes('booking-widget'))
setGateway(widgetGw ?? null)
}).finally(() => setGatewayLoading(false))
@@ -1002,9 +1112,10 @@ export function BookingWidgetPage() {
hotelName: 'Grand Palace Hotel',
primaryColor: '#4F46E5',
language: 'ru',
showRooms: true,
showRental: rentalActive,
minNights: 1,
showRooms: true,
showRental: rentalActive,
roomDisplayMode: 'rooms',
minNights: 1,
paymentProvider: 'yukassa',
showPromo: true,
allowExtraBeds: true,
@@ -1190,6 +1301,27 @@ export function BookingWidgetPage() {
</div>
<input type="checkbox" checked={settings.showRooms} onChange={e => set('showRooms', e.target.checked)} className="rounded" />
</label>
{settings.showRooms && (
<div className="ml-5 pl-3 border-l-2 border-slate-200 dark:border-slate-600">
<p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Показывать по:</p>
<div className="flex gap-2">
{([['rooms', 'Номерам'], ['categories', 'Категориям']] as const).map(([k, l]) => (
<button
key={k}
onClick={() => set('roomDisplayMode', k)}
className={cn(
'px-2.5 py-1 text-xs rounded-lg border transition-colors',
settings.roomDisplayMode === k
? 'bg-brand-600 text-white border-brand-600'
: 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
)}
>
{l}
</button>
))}
</div>
</div>
)}
{rentalActive && (
<label className="flex items-center justify-between">
<div className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
@@ -1380,6 +1512,7 @@ export function BookingWidgetPage() {
settings={settings}
slug={slug || undefined}
realRooms={realRooms.length > 0 ? realRooms : undefined}
realCategories={realCategories.length > 0 ? realCategories : undefined}
paymentEnabled={gateway ? gateway.isActive : undefined}
/>
</div>