fix: widget embed mode — remove shadow/border/rounded when embed=true
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:
@@ -190,13 +190,14 @@ export const DEFAULT_SERVICES: AdditionalService[] = [
|
|||||||
|
|
||||||
// ── Widget Preview Component ───────────────────────────────────────────────────
|
// ── Widget Preview Component ───────────────────────────────────────────────────
|
||||||
|
|
||||||
export function WidgetPreview({ settings, slug, realRooms, realCategories, realRentalObjects, paymentEnabled }: {
|
export function WidgetPreview({ settings, slug, realRooms, realCategories, realRentalObjects, paymentEnabled, embed }: {
|
||||||
settings: WidgetSettings
|
settings: WidgetSettings
|
||||||
slug?: string
|
slug?: string
|
||||||
realRooms?: WidgetRoom[]
|
realRooms?: WidgetRoom[]
|
||||||
realCategories?: WidgetCategory[]
|
realCategories?: WidgetCategory[]
|
||||||
realRentalObjects?: WidgetRentalObject[]
|
realRentalObjects?: WidgetRentalObject[]
|
||||||
paymentEnabled?: boolean
|
paymentEnabled?: boolean
|
||||||
|
embed?: boolean
|
||||||
}) {
|
}) {
|
||||||
const [previewTab, setPreviewTab] = useState<'rooms' | 'rental'>('rooms')
|
const [previewTab, setPreviewTab] = useState<'rooms' | 'rental'>('rooms')
|
||||||
const localDate = (offsetDays = 0) => {
|
const localDate = (offsetDays = 0) => {
|
||||||
@@ -387,7 +388,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
|
|||||||
// ── Success screen ──
|
// ── Success screen ──
|
||||||
if (step === 'success') {
|
if (step === 'success') {
|
||||||
return (
|
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 }}>
|
<div className="px-6 py-4 text-white" style={{ background: settings.primaryColor }}>
|
||||||
<p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
|
<p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -434,7 +435,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
|
|||||||
// ── Payment screen (YooKassa redirect) ──
|
// ── Payment screen (YooKassa redirect) ──
|
||||||
if (step === 'payment') {
|
if (step === 'payment') {
|
||||||
return (
|
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 }}>
|
<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">
|
<button onClick={handleBack} className="opacity-80 hover:opacity-100">
|
||||||
<ChevronLeft size={18} />
|
<ChevronLeft size={18} />
|
||||||
@@ -481,7 +482,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
|
|||||||
// ── Guest form screen ──
|
// ── Guest form screen ──
|
||||||
if (step === 'form') {
|
if (step === 'form') {
|
||||||
return (
|
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 }}>
|
<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">
|
<button onClick={handleBack} className="opacity-80 hover:opacity-100">
|
||||||
<ChevronLeft size={18} />
|
<ChevronLeft size={18} />
|
||||||
@@ -714,7 +715,7 @@ export function WidgetPreview({ settings, slug, realRooms, realCategories, realR
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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 */}
|
{/* Widget header */}
|
||||||
<div className="px-6 py-4 text-white" style={{ background: settings.primaryColor }}>
|
<div className="px-6 py-4 text-white" style={{ background: settings.primaryColor }}>
|
||||||
<p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
|
<p className="font-bold text-lg">{settings.hotelName || 'Название отеля'}</p>
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ export function BookingWidgetStandalonePage() {
|
|||||||
|
|
||||||
if (isEmbed) {
|
if (isEmbed) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full bg-white">
|
<div className="w-full">
|
||||||
<WidgetPreview
|
<WidgetPreview
|
||||||
settings={settings}
|
settings={settings}
|
||||||
slug={slug}
|
slug={slug}
|
||||||
@@ -87,6 +87,7 @@ export function BookingWidgetStandalonePage() {
|
|||||||
realCategories={realCategories.length > 0 ? realCategories : undefined}
|
realCategories={realCategories.length > 0 ? realCategories : undefined}
|
||||||
realRentalObjects={realRentalObjects.length > 0 ? realRentalObjects : undefined}
|
realRentalObjects={realRentalObjects.length > 0 ? realRentalObjects : undefined}
|
||||||
paymentEnabled={paymentEnabled}
|
paymentEnabled={paymentEnabled}
|
||||||
|
embed
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user