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

fix: widget embed mode — remove shadow/border/rounded when embed=true

Browse Source 
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>
This commit is contained in:
HotelSync
2026-04-12 01:34:15 +03:00
parent 85ccd32574
commit c144793ae5
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/BookingWidgetPage.tsx
View File

@@ -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>

3
src/pages/BookingWidgetStandalonePage.tsx
View File

@@ -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>
)