From c144793ae54a40859e510e4ec4e764222b6301f1 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Sun, 12 Apr 2026 01:34:15 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20widget=20embed=20mode=20=E2=80=94=20remo?=
 =?UTF-8?q?ve=20shadow/border/rounded=20when=20embed=3Dtrue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WidgetPreview now accepts embed prop; when set, outer container loses
rounded-2xl shadow-2xl border-slate-200 so modal dialog styles apply cleanly.
All step screens (main, form, payment, success) patched.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/BookingWidgetPage.tsx           | 11 ++++++-----
 src/pages/BookingWidgetStandalonePage.tsx |  3 ++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/BookingWidgetPage.tsx b/src/pages/BookingWidgetPage.tsx
index bfa4fd6..72b4e71 100644
--- a/src/pages/BookingWidgetPage.tsx
+++ b/src/pages/BookingWidgetPage.tsx
@@ -190,13 +190,14 @@ export const DEFAULT_SERVICES: AdditionalService[] = [
 
 // ── Widget Preview Component ───────────────────────────────────────────────────
 
-export function WidgetPreview({ settings, slug, realRooms, realCategories, realRentalObjects, paymentEnabled }: {
+export function WidgetPreview({ settings, slug, realRooms, realCategories, realRentalObjects, paymentEnabled, embed }: {
   settings: WidgetSettings
   slug?: string
   realRooms?: WidgetRoom[]
   realCategories?: WidgetCategory[]
   realRentalObjects?: WidgetRentalObject[]
   paymentEnabled?: boolean
+  embed?: boolean
 }) {
   const [previewTab, setPreviewTab] = useState<'rooms' | 'rental'>('rooms')
   const localDate = (offsetDays = 0) => {
@@ -387,7 +388,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
   // ── Success screen ──
   if (step === 'success') {
     return (
-      <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200" style={{ fontFamily: 'Inter, sans-serif' }}>
+      <div className={cn('bg-white overflow-hidden', embed ? '' : 'rounded-2xl shadow-2xl border border-slate-200')} style={{ fontFamily: 'Inter, sans-serif' }}>
         <div className="px-6 py-4 text-white" style={{ background: settings.primaryColor }}>
           <p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
         </div>
@@ -434,7 +435,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
   // ── Payment screen (YooKassa redirect) ──
   if (step === 'payment') {
     return (
-      <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200" style={{ fontFamily: 'Inter, sans-serif' }}>
+      <div className={cn('bg-white overflow-hidden', embed ? '' : 'rounded-2xl shadow-2xl border border-slate-200')} style={{ fontFamily: 'Inter, sans-serif' }}>
         <div className="px-6 py-4 text-white flex items-center gap-3" style={{ background: settings.primaryColor }}>
           <button onClick={handleBack} className="opacity-80 hover:opacity-100">
             <ChevronLeft size={18} />
@@ -481,7 +482,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
   // ── Guest form screen ──
   if (step === 'form') {
     return (
-      <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200" style={{ fontFamily: 'Inter, sans-serif' }}>
+      <div className={cn('bg-white overflow-hidden', embed ? '' : 'rounded-2xl shadow-2xl border border-slate-200')} style={{ fontFamily: 'Inter, sans-serif' }}>
         <div className="px-6 py-4 text-white flex items-center gap-3" style={{ background: settings.primaryColor }}>
           <button onClick={handleBack} className="opacity-80 hover:opacity-100">
             <ChevronLeft size={18} />
@@ -714,7 +715,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
   }
 
   return (
-    <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200" style={{ fontFamily: 'Inter, sans-serif' }}>
+    <div className={cn('bg-white overflow-hidden', embed ? '' : 'rounded-2xl shadow-2xl border border-slate-200')} style={{ fontFamily: 'Inter, sans-serif' }}>
       {/* Widget header */}
       <div className="px-6 py-4 text-white" style={{ background: settings.primaryColor }}>
         <p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
diff --git a/src/pages/BookingWidgetStandalonePage.tsx b/src/pages/BookingWidgetStandalonePage.tsx
index e625ab7..2be5b99 100644
--- a/src/pages/BookingWidgetStandalonePage.tsx
+++ b/src/pages/BookingWidgetStandalonePage.tsx
@@ -79,7 +79,7 @@ export function BookingWidgetStandalonePage() {
 
   if (isEmbed) {
     return (
-      <div className="w-full bg-white">
+      <div className="w-full">
         <WidgetPreview
           settings={settings}
           slug={slug}
@@ -87,6 +87,7 @@ export function BookingWidgetStandalonePage() {
           realCategories={realCategories.length > 0 ? realCategories : undefined}
           realRentalObjects={realRentalObjects.length > 0 ? realRentalObjects : undefined}
           paymentEnabled={paymentEnabled}
+          embed
         />
       </div>
     )