feat: widget iframe embed — standalone /:slug/book page

src/pages/BookingWidgetStandalonePage.tsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react'
+import { useParams, useSearchParams } from 'react-router-dom'
+import { api, type WidgetRoom, type WidgetCategory } from '../lib/api'
+import { WidgetPreview, DEFAULT_FORM_FIELDS, DEFAULT_SERVICES } from './BookingWidgetPage'
+import type { WidgetSettings } from './BookingWidgetPage'
+
+export function BookingWidgetStandalonePage() {
+  const { slug } = useParams<{ slug: string }>()
+  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 [realCategories, setRealCategories] = useState<WidgetCategory[]>([])
+  const [hotelName, setHotelName]           = useState('')
+  const [paymentEnabled, setPaymentEnabled] = useState<boolean | undefined>(undefined)
+
+  useEffect(() => {
+    if (!slug) return
+    api.widget.getConfig(slug)
+      .then(config => {
+        setRealRooms(config.rooms ?? [])
+        setRealCategories(config.categories ?? [])
+        setHotelName(config.hotelName ?? '')
+        setPaymentEnabled(config.paymentEnabled)
+      })
+      .catch(() => {})
+  }, [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 (
+    <div className="min-h-screen bg-slate-50 flex items-start justify-center py-6 px-3">
+      <div className="w-full max-w-lg">
+        <WidgetPreview
+          settings={settings}
+          slug={slug}
+          realRooms={realRooms.length > 0 ? realRooms : undefined}
+          realCategories={realCategories.length > 0 ? realCategories : undefined}
+          paymentEnabled={paymentEnabled}
+        />
+      </div>
+    </div>
+  )
+}