fix: standalone /book page applies saved widget settings from backend

BookingWidgetStandalonePage now fetches widgetSettings from the public
config API and applies them (color, language, mode, etc.) instead of
always falling back to URL param defaults. URL params still work as
overrides if present.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-07 22:36:44 +03:00
parent 0eababe4e0
commit 08d6629ae8
2 changed files with 43 additions and 27 deletions

View File

@@ -1655,6 +1655,17 @@ export interface WidgetConfig {
currency: string currency: string
rooms: WidgetRoom[] rooms: WidgetRoom[]
categories: WidgetCategory[] categories: WidgetCategory[]
widgetSettings?: {
primaryColor: string
language: string
roomDisplayMode: string
minNights: number
showRental: boolean
showPromo: boolean
allowExtraBeds: boolean
allowChildren: boolean
hotelName: string
}
} }
export interface WidgetBookingPayload { export interface WidgetBookingPayload {

View File

@@ -8,19 +8,24 @@ export function BookingWidgetStandalonePage() {
const { slug } = useParams<{ slug: string }>() const { slug } = useParams<{ slug: string }>()
const [searchParams] = useSearchParams() const [searchParams] = useSearchParams()
const color = searchParams.get('color') ?? '#4F46E5'
const lang = (searchParams.get('lang') ?? 'ru') as 'ru' | 'en'
const mode = (searchParams.get('mode') ?? 'rooms') as 'rooms' | 'categories'
const minNights = parseInt(searchParams.get('min-nights') ?? '1') || 1
const showRental = searchParams.get('rental') === 'true'
const showPromo = searchParams.get('promo') !== 'false'
const extraBeds = searchParams.get('extra-beds') !== 'false'
const children = searchParams.get('children') !== 'false'
const [realRooms, setRealRooms] = useState<WidgetRoom[]>([]) const [realRooms, setRealRooms] = useState<WidgetRoom[]>([])
const [realCategories, setRealCategories] = useState<WidgetCategory[]>([]) const [realCategories, setRealCategories] = useState<WidgetCategory[]>([])
const [hotelName, setHotelName] = useState('')
const [paymentEnabled, setPaymentEnabled] = useState<boolean | undefined>(undefined) const [paymentEnabled, setPaymentEnabled] = useState<boolean | undefined>(undefined)
const [settings, setSettings] = useState<WidgetSettings>({
hotelName: '',
primaryColor: searchParams.get('color') ?? '#4F46E5',
language: (searchParams.get('lang') ?? 'ru') as 'ru' | 'en',
showRooms: true,
showRental: searchParams.get('rental') === 'true',
roomDisplayMode: (searchParams.get('mode') ?? 'rooms') as 'rooms' | 'categories',
minNights: parseInt(searchParams.get('min-nights') ?? '1') || 1,
paymentProvider: 'yukassa',
showPromo: searchParams.get('promo') !== 'false',
allowExtraBeds: searchParams.get('extra-beds') !== 'false',
allowChildren: searchParams.get('children') !== 'false',
formFields: DEFAULT_FORM_FIELDS,
additionalServices: DEFAULT_SERVICES,
})
useEffect(() => { useEffect(() => {
if (!slug) return if (!slug) return
@@ -28,28 +33,28 @@ export function BookingWidgetStandalonePage() {
.then(config => { .then(config => {
setRealRooms(config.rooms ?? []) setRealRooms(config.rooms ?? [])
setRealCategories(config.categories ?? []) setRealCategories(config.categories ?? [])
setHotelName(config.hotelName ?? '')
setPaymentEnabled(config.paymentEnabled) setPaymentEnabled(config.paymentEnabled)
if (config.widgetSettings) {
const ws = config.widgetSettings
setSettings(prev => ({
...prev,
hotelName: ws.hotelName ?? config.hotelName ?? prev.hotelName,
primaryColor: ws.primaryColor ?? prev.primaryColor,
language: (ws.language ?? prev.language) as 'ru' | 'en',
roomDisplayMode: (ws.roomDisplayMode ?? prev.roomDisplayMode) as 'rooms' | 'categories',
minNights: ws.minNights ?? prev.minNights,
showRental: ws.showRental ?? prev.showRental,
showPromo: ws.showPromo ?? prev.showPromo,
allowExtraBeds: ws.allowExtraBeds ?? prev.allowExtraBeds,
allowChildren: ws.allowChildren ?? prev.allowChildren,
}))
} else {
setSettings(prev => ({ ...prev, hotelName: config.hotelName ?? prev.hotelName }))
}
}) })
.catch(() => {}) .catch(() => {})
}, [slug]) }, [slug])
const settings: WidgetSettings = {
hotelName,
primaryColor: color,
language: lang,
showRooms: true,
showRental,
roomDisplayMode: mode,
minNights,
paymentProvider: 'yukassa',
showPromo,
allowExtraBeds: extraBeds,
allowChildren: children,
formFields: DEFAULT_FORM_FIELDS,
additionalServices: DEFAULT_SERVICES,
}
return ( return (
<div className="min-h-screen bg-slate-50 flex items-start justify-center py-6 px-3"> <div className="min-h-screen bg-slate-50 flex items-start justify-center py-6 px-3">
<div className="w-full max-w-lg"> <div className="w-full max-w-lg">