@bigz-app/booking-widget 0.3.8 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/booking-widget.js +407 -107
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/PromoDialog.d.ts +7 -0
- package/dist/components/PromoDialog.d.ts.map +1 -0
- package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
- package/dist/index.cjs +407 -107
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +407 -107
- package/dist/index.esm.js.map +1 -1
- package/package.json +8 -6
package/dist/booking-widget.js
CHANGED
|
@@ -12310,6 +12310,263 @@
|
|
|
12310
12310
|
` })] }));
|
|
12311
12311
|
}
|
|
12312
12312
|
|
|
12313
|
+
function PromoDialog({ onClose, onCtaClick }) {
|
|
12314
|
+
const [copied, setCopied] = d$1(false);
|
|
12315
|
+
const [isVisible, setIsVisible] = d$1(false);
|
|
12316
|
+
// Hardcoded Xmas surf school content
|
|
12317
|
+
const discountCode = "X-MAS";
|
|
12318
|
+
// Animate in on mount
|
|
12319
|
+
y$1(() => {
|
|
12320
|
+
const timer = setTimeout(() => setIsVisible(true), 50);
|
|
12321
|
+
return () => clearTimeout(timer);
|
|
12322
|
+
}, []);
|
|
12323
|
+
const handleCopyCode = async () => {
|
|
12324
|
+
try {
|
|
12325
|
+
await navigator.clipboard.writeText(discountCode);
|
|
12326
|
+
setCopied(true);
|
|
12327
|
+
setTimeout(() => setCopied(false), 2000);
|
|
12328
|
+
}
|
|
12329
|
+
catch (err) {
|
|
12330
|
+
// Fallback for older browsers
|
|
12331
|
+
const textArea = document.createElement("textarea");
|
|
12332
|
+
textArea.value = discountCode;
|
|
12333
|
+
document.body.appendChild(textArea);
|
|
12334
|
+
textArea.select();
|
|
12335
|
+
document.execCommand("copy");
|
|
12336
|
+
document.body.removeChild(textArea);
|
|
12337
|
+
setCopied(true);
|
|
12338
|
+
setTimeout(() => setCopied(false), 2000);
|
|
12339
|
+
}
|
|
12340
|
+
};
|
|
12341
|
+
const handleClose = () => {
|
|
12342
|
+
setIsVisible(false);
|
|
12343
|
+
setTimeout(onClose, 200);
|
|
12344
|
+
};
|
|
12345
|
+
const handleCtaClick = () => {
|
|
12346
|
+
setIsVisible(false);
|
|
12347
|
+
setTimeout(onCtaClick, 200);
|
|
12348
|
+
};
|
|
12349
|
+
return (u$2(k$3, { children: [u$2("style", { children: `
|
|
12350
|
+
@keyframes promo-wave {
|
|
12351
|
+
0%, 100% { transform: translateX(0) translateY(0); }
|
|
12352
|
+
25% { transform: translateX(5px) translateY(-3px); }
|
|
12353
|
+
50% { transform: translateX(0) translateY(-5px); }
|
|
12354
|
+
75% { transform: translateX(-5px) translateY(-3px); }
|
|
12355
|
+
}
|
|
12356
|
+
@keyframes promo-float {
|
|
12357
|
+
0%, 100% { transform: translateY(0); }
|
|
12358
|
+
50% { transform: translateY(-8px); }
|
|
12359
|
+
}
|
|
12360
|
+
@keyframes promo-shimmer {
|
|
12361
|
+
0% { background-position: -200% center; }
|
|
12362
|
+
100% { background-position: 200% center; }
|
|
12363
|
+
}
|
|
12364
|
+
@keyframes promo-sparkle {
|
|
12365
|
+
0%, 100% { opacity: 0.3; transform: scale(1); }
|
|
12366
|
+
50% { opacity: 1; transform: scale(1.2); }
|
|
12367
|
+
}
|
|
12368
|
+
@keyframes promo-snow {
|
|
12369
|
+
0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
|
|
12370
|
+
10% { opacity: 1; }
|
|
12371
|
+
90% { opacity: 1; }
|
|
12372
|
+
100% { transform: translateY(350px) rotate(360deg); opacity: 0; }
|
|
12373
|
+
}
|
|
12374
|
+
` }), u$2("div", { onClick: handleClose, style: {
|
|
12375
|
+
position: "fixed",
|
|
12376
|
+
inset: 0,
|
|
12377
|
+
backgroundColor: "rgba(0, 20, 40, 0.85)",
|
|
12378
|
+
backdropFilter: "blur(8px)",
|
|
12379
|
+
zIndex: 9998,
|
|
12380
|
+
opacity: isVisible ? 1 : 0,
|
|
12381
|
+
transition: "opacity 300ms ease-out",
|
|
12382
|
+
} }), u$2("div", { style: {
|
|
12383
|
+
position: "fixed",
|
|
12384
|
+
top: "50%",
|
|
12385
|
+
left: "50%",
|
|
12386
|
+
transform: `translate(-50%, -50%) scale(${isVisible ? 1 : 0.9})`,
|
|
12387
|
+
zIndex: 9999,
|
|
12388
|
+
width: "92%",
|
|
12389
|
+
maxWidth: "440px",
|
|
12390
|
+
opacity: isVisible ? 1 : 0,
|
|
12391
|
+
transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
12392
|
+
}, children: u$2("div", { style: {
|
|
12393
|
+
position: "relative",
|
|
12394
|
+
background: "linear-gradient(165deg, #0c4a6e 0%, #0e7490 40%, #0891b2 100%)",
|
|
12395
|
+
borderRadius: "28px",
|
|
12396
|
+
overflow: "hidden",
|
|
12397
|
+
boxShadow: "0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)",
|
|
12398
|
+
}, children: [Array.from({ length: 15 }).map((_, i) => (u$2("div", { style: {
|
|
12399
|
+
position: "absolute",
|
|
12400
|
+
left: `${5 + Math.random() * 90}%`,
|
|
12401
|
+
top: "-10px",
|
|
12402
|
+
fontSize: `${10 + Math.random() * 14}px`,
|
|
12403
|
+
color: "white",
|
|
12404
|
+
opacity: 0,
|
|
12405
|
+
animation: `promo-snow ${4 + Math.random() * 3}s linear infinite`,
|
|
12406
|
+
animationDelay: `${Math.random() * 4}s`,
|
|
12407
|
+
pointerEvents: "none",
|
|
12408
|
+
zIndex: 1,
|
|
12409
|
+
}, children: "\u2744" }, i))), u$2("div", { style: {
|
|
12410
|
+
position: "relative",
|
|
12411
|
+
height: "180px",
|
|
12412
|
+
background: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(12,74,110,0.8) 100%)",
|
|
12413
|
+
display: "flex",
|
|
12414
|
+
alignItems: "center",
|
|
12415
|
+
justifyContent: "center",
|
|
12416
|
+
overflow: "hidden",
|
|
12417
|
+
}, children: [u$2("img", { src: "https://images.unsplash.com/photo-1502680390469-be75c86b636f?w=600&q=80", alt: "Surfer at sunset", style: {
|
|
12418
|
+
position: "absolute",
|
|
12419
|
+
inset: 0,
|
|
12420
|
+
width: "100%",
|
|
12421
|
+
height: "100%",
|
|
12422
|
+
objectFit: "cover",
|
|
12423
|
+
opacity: 0.6,
|
|
12424
|
+
} }), u$2("div", { style: {
|
|
12425
|
+
position: "absolute",
|
|
12426
|
+
inset: 0,
|
|
12427
|
+
background: "linear-gradient(180deg, rgba(12,74,110,0.3) 0%, rgba(12,74,110,0.95) 100%)",
|
|
12428
|
+
} }), u$2("div", { style: {
|
|
12429
|
+
position: "relative",
|
|
12430
|
+
zIndex: 2,
|
|
12431
|
+
fontSize: "64px",
|
|
12432
|
+
animation: "promo-float 3s ease-in-out infinite",
|
|
12433
|
+
filter: "drop-shadow(0 8px 16px rgba(0,0,0,0.4))",
|
|
12434
|
+
}, children: "\uD83C\uDFC4\u200D\u2642\uFE0F" }), u$2("div", { style: {
|
|
12435
|
+
position: "absolute",
|
|
12436
|
+
top: "16px",
|
|
12437
|
+
left: "20px",
|
|
12438
|
+
fontSize: "28px",
|
|
12439
|
+
animation: "promo-sparkle 2s ease-in-out infinite",
|
|
12440
|
+
}, children: "\uD83C\uDF84" }), u$2("div", { style: {
|
|
12441
|
+
position: "absolute",
|
|
12442
|
+
top: "20px",
|
|
12443
|
+
right: "20px",
|
|
12444
|
+
fontSize: "24px",
|
|
12445
|
+
animation: "promo-sparkle 2s ease-in-out infinite 0.5s",
|
|
12446
|
+
}, children: "\u2B50" })] }), u$2("button", { onClick: handleClose, style: {
|
|
12447
|
+
position: "absolute",
|
|
12448
|
+
top: "16px",
|
|
12449
|
+
right: "16px",
|
|
12450
|
+
width: "36px",
|
|
12451
|
+
height: "36px",
|
|
12452
|
+
borderRadius: "50%",
|
|
12453
|
+
border: "none",
|
|
12454
|
+
background: "rgba(0, 0, 0, 0.3)",
|
|
12455
|
+
backdropFilter: "blur(4px)",
|
|
12456
|
+
color: "white",
|
|
12457
|
+
fontSize: "22px",
|
|
12458
|
+
cursor: "pointer",
|
|
12459
|
+
display: "flex",
|
|
12460
|
+
alignItems: "center",
|
|
12461
|
+
justifyContent: "center",
|
|
12462
|
+
transition: "all 150ms ease",
|
|
12463
|
+
zIndex: 10,
|
|
12464
|
+
lineHeight: 1,
|
|
12465
|
+
}, onMouseEnter: (e) => {
|
|
12466
|
+
e.currentTarget.style.background = "rgba(0, 0, 0, 0.5)";
|
|
12467
|
+
e.currentTarget.style.transform = "scale(1.1)";
|
|
12468
|
+
}, onMouseLeave: (e) => {
|
|
12469
|
+
e.currentTarget.style.background = "rgba(0, 0, 0, 0.3)";
|
|
12470
|
+
e.currentTarget.style.transform = "scale(1)";
|
|
12471
|
+
}, children: "\u00D7" }), u$2("div", { style: { padding: "28px 28px 32px", textAlign: "center", position: "relative", zIndex: 2 }, children: [u$2("h2", { style: {
|
|
12472
|
+
fontSize: "26px",
|
|
12473
|
+
fontWeight: "800",
|
|
12474
|
+
color: "white",
|
|
12475
|
+
marginBottom: "6px",
|
|
12476
|
+
textShadow: "0 2px 8px rgba(0,0,0,0.3)",
|
|
12477
|
+
letterSpacing: "-0.5px",
|
|
12478
|
+
}, children: "Frohe Weihnachten! \uD83C\uDF85" }), u$2("p", { style: {
|
|
12479
|
+
fontSize: "17px",
|
|
12480
|
+
color: "rgba(255, 255, 255, 0.9)",
|
|
12481
|
+
marginBottom: "20px",
|
|
12482
|
+
lineHeight: 1.5,
|
|
12483
|
+
}, children: ["Schenk dir oder deinen Liebsten", u$2("br", {}), u$2("strong", { style: { color: "#fbbf24" }, children: "10% Rabatt" }), " auf alle Kurse!"] }), u$2("div", { style: {
|
|
12484
|
+
background: "white",
|
|
12485
|
+
borderRadius: "16px",
|
|
12486
|
+
padding: "18px 20px",
|
|
12487
|
+
marginBottom: "20px",
|
|
12488
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.15), inset 0 -2px 0 rgba(0,0,0,0.05)",
|
|
12489
|
+
}, children: [u$2("p", { style: {
|
|
12490
|
+
fontSize: "11px",
|
|
12491
|
+
textTransform: "uppercase",
|
|
12492
|
+
letterSpacing: "1.5px",
|
|
12493
|
+
color: "#64748b",
|
|
12494
|
+
marginBottom: "10px",
|
|
12495
|
+
fontWeight: "600",
|
|
12496
|
+
}, children: "Dein Geschenk-Code" }), u$2("div", { style: {
|
|
12497
|
+
display: "flex",
|
|
12498
|
+
alignItems: "center",
|
|
12499
|
+
justifyContent: "center",
|
|
12500
|
+
gap: "14px",
|
|
12501
|
+
}, children: [u$2("div", { style: {
|
|
12502
|
+
background: "linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)",
|
|
12503
|
+
padding: "10px 20px",
|
|
12504
|
+
borderRadius: "10px",
|
|
12505
|
+
boxShadow: "0 4px 12px rgba(220, 38, 38, 0.3)",
|
|
12506
|
+
}, children: u$2("span", { style: {
|
|
12507
|
+
fontSize: "28px",
|
|
12508
|
+
fontWeight: "900",
|
|
12509
|
+
color: "white",
|
|
12510
|
+
letterSpacing: "6px",
|
|
12511
|
+
textShadow: "0 2px 4px rgba(0,0,0,0.2)",
|
|
12512
|
+
}, children: discountCode }) }), u$2("button", { onClick: handleCopyCode, style: {
|
|
12513
|
+
padding: "12px 16px",
|
|
12514
|
+
borderRadius: "10px",
|
|
12515
|
+
border: "2px solid",
|
|
12516
|
+
borderColor: copied ? "#22c55e" : "#e2e8f0",
|
|
12517
|
+
background: copied ? "#dcfce7" : "#f8fafc",
|
|
12518
|
+
color: copied ? "#15803d" : "#475569",
|
|
12519
|
+
fontSize: "13px",
|
|
12520
|
+
fontWeight: "600",
|
|
12521
|
+
cursor: "pointer",
|
|
12522
|
+
transition: "all 150ms ease",
|
|
12523
|
+
display: "flex",
|
|
12524
|
+
alignItems: "center",
|
|
12525
|
+
gap: "6px",
|
|
12526
|
+
whiteSpace: "nowrap",
|
|
12527
|
+
}, children: copied ? (u$2(k$3, { children: "\u2713 Kopiert!" })) : (u$2(k$3, { children: [u$2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [u$2("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), u$2("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "Kopieren"] })) })] })] }), u$2("div", { style: {
|
|
12528
|
+
display: "flex",
|
|
12529
|
+
justifyContent: "center",
|
|
12530
|
+
gap: "8px",
|
|
12531
|
+
marginBottom: "20px",
|
|
12532
|
+
flexWrap: "wrap",
|
|
12533
|
+
}, children: ["🏄 Surfen", "🪁 Wingen", "🏄♀️ SUP", "💨 Windsurfen"].map((activity) => (u$2("span", { style: {
|
|
12534
|
+
background: "rgba(255,255,255,0.15)",
|
|
12535
|
+
backdropFilter: "blur(4px)",
|
|
12536
|
+
padding: "6px 12px",
|
|
12537
|
+
borderRadius: "20px",
|
|
12538
|
+
fontSize: "13px",
|
|
12539
|
+
color: "white",
|
|
12540
|
+
fontWeight: "500",
|
|
12541
|
+
}, children: activity }, activity))) }), u$2("button", { onClick: handleCtaClick, style: {
|
|
12542
|
+
width: "100%",
|
|
12543
|
+
padding: "18px 24px",
|
|
12544
|
+
borderRadius: "14px",
|
|
12545
|
+
border: "none",
|
|
12546
|
+
background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
|
|
12547
|
+
color: "white",
|
|
12548
|
+
fontSize: "18px",
|
|
12549
|
+
fontWeight: "700",
|
|
12550
|
+
cursor: "pointer",
|
|
12551
|
+
transition: "all 150ms ease",
|
|
12552
|
+
boxShadow: "0 8px 24px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)",
|
|
12553
|
+
display: "flex",
|
|
12554
|
+
alignItems: "center",
|
|
12555
|
+
justifyContent: "center",
|
|
12556
|
+
gap: "10px",
|
|
12557
|
+
}, onMouseEnter: (e) => {
|
|
12558
|
+
e.currentTarget.style.transform = "translateY(-2px)";
|
|
12559
|
+
e.currentTarget.style.boxShadow = "0 12px 28px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255,255,255,0.2)";
|
|
12560
|
+
}, onMouseLeave: (e) => {
|
|
12561
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
12562
|
+
e.currentTarget.style.boxShadow = "0 8px 24px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)";
|
|
12563
|
+
}, children: [u$2("span", { style: { animation: "promo-wave 2s ease-in-out infinite" }, children: "\uD83C\uDF81" }), "Jetzt Kurs buchen", u$2("span", { children: "\u2192" })] }), u$2("p", { style: {
|
|
12564
|
+
marginTop: "16px",
|
|
12565
|
+
fontSize: "12px",
|
|
12566
|
+
color: "rgba(255,255,255,0.6)",
|
|
12567
|
+
}, children: "G\u00FCltig f\u00FCr alle Buchungen bis 31. Dezember 2025" })] })] }) })] }));
|
|
12568
|
+
}
|
|
12569
|
+
|
|
12313
12570
|
// Predefined themes & Style Provider have been moved to ../styles/StyleProvider.tsx
|
|
12314
12571
|
// Main widget component
|
|
12315
12572
|
function UniversalBookingWidget({ config: baseConfig }) {
|
|
@@ -12352,6 +12609,9 @@
|
|
|
12352
12609
|
// PERFORMANCE OPTIMIZATION: Lazy component loading
|
|
12353
12610
|
const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
|
|
12354
12611
|
const [shouldRenderBookingForm, setShouldRenderBookingForm] = d$1(false);
|
|
12612
|
+
// Promo dialog state
|
|
12613
|
+
const [showPromoDialog, setShowPromoDialog] = d$1(false);
|
|
12614
|
+
const [widgetContainerRef, setWidgetContainerRef] = d$1(null);
|
|
12355
12615
|
// Determine initial step and load data
|
|
12356
12616
|
y$1(() => {
|
|
12357
12617
|
const initializeWidget = async () => {
|
|
@@ -12426,6 +12686,46 @@
|
|
|
12426
12686
|
setShouldRenderBookingForm(true);
|
|
12427
12687
|
}
|
|
12428
12688
|
}, [currentStep, shouldRenderInstanceSelection, shouldRenderBookingForm]);
|
|
12689
|
+
// Promo dialog: show Xmas promo once per user during holiday season, prevent double-opening across multiple widgets
|
|
12690
|
+
y$1(() => {
|
|
12691
|
+
// Only show during holiday season (December and January)
|
|
12692
|
+
const now = new Date();
|
|
12693
|
+
const month = now.getMonth(); // 0 = January, 11 = December
|
|
12694
|
+
const isHolidaySeason = month === 11 || month === 0; // December (11) or January (0)
|
|
12695
|
+
if (!isHolidaySeason) {
|
|
12696
|
+
return;
|
|
12697
|
+
}
|
|
12698
|
+
const promoId = "xmas-2024";
|
|
12699
|
+
const storageKey = `bigz-promo-${promoId}-shown`;
|
|
12700
|
+
const globalFlagKey = `__bigzPromoShown_${promoId}`;
|
|
12701
|
+
// Check if already shown in this session (localStorage) or claimed by another widget (global flag)
|
|
12702
|
+
const alreadyShown = localStorage.getItem(storageKey) === "true";
|
|
12703
|
+
const claimedByOtherWidget = window[globalFlagKey] === true;
|
|
12704
|
+
if (alreadyShown || claimedByOtherWidget) {
|
|
12705
|
+
return;
|
|
12706
|
+
}
|
|
12707
|
+
// Claim this promo for this widget instance (prevents other widgets from showing it)
|
|
12708
|
+
window[globalFlagKey] = true;
|
|
12709
|
+
// Show the dialog after a short delay for better UX
|
|
12710
|
+
const timer = setTimeout(() => {
|
|
12711
|
+
setShowPromoDialog(true);
|
|
12712
|
+
}, 1000);
|
|
12713
|
+
return () => clearTimeout(timer);
|
|
12714
|
+
}, []);
|
|
12715
|
+
// Handle promo dialog close
|
|
12716
|
+
const handlePromoDialogClose = () => {
|
|
12717
|
+
setShowPromoDialog(false);
|
|
12718
|
+
localStorage.setItem("bigz-promo-xmas-2024-shown", "true");
|
|
12719
|
+
};
|
|
12720
|
+
// Handle promo dialog CTA click - scroll to widget
|
|
12721
|
+
const handlePromoCtaClick = () => {
|
|
12722
|
+
setShowPromoDialog(false);
|
|
12723
|
+
localStorage.setItem("bigz-promo-xmas-2024-shown", "true");
|
|
12724
|
+
// Scroll to the widget container
|
|
12725
|
+
if (widgetContainerRef) {
|
|
12726
|
+
widgetContainerRef.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
12727
|
+
}
|
|
12728
|
+
};
|
|
12429
12729
|
const loadEventTypes = async () => {
|
|
12430
12730
|
const requestBody = {
|
|
12431
12731
|
organizationId: config.organizationId,
|
|
@@ -12825,104 +13125,104 @@
|
|
|
12825
13125
|
// Main view based on view mode
|
|
12826
13126
|
if (viewMode === "next-events" && showingPreview) {
|
|
12827
13127
|
// Next events preview mode
|
|
12828
|
-
return (u$2(StyleProvider, { config: config, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
|
|
12829
|
-
|
|
12830
|
-
|
|
12831
|
-
|
|
12832
|
-
|
|
12833
|
-
|
|
12834
|
-
|
|
12835
|
-
|
|
12836
|
-
|
|
12837
|
-
|
|
12838
|
-
|
|
12839
|
-
|
|
12840
|
-
|
|
12841
|
-
|
|
12842
|
-
|
|
12843
|
-
|
|
12844
|
-
|
|
12845
|
-
|
|
12846
|
-
|
|
12847
|
-
|
|
12848
|
-
|
|
12849
|
-
|
|
12850
|
-
|
|
12851
|
-
|
|
12852
|
-
|
|
12853
|
-
|
|
12854
|
-
|
|
12855
|
-
|
|
13128
|
+
return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
|
|
13129
|
+
setCurrentStep("eventTypes");
|
|
13130
|
+
setShowingPreview(true);
|
|
13131
|
+
setEventDetails(null);
|
|
13132
|
+
}, onBackToEventTypes: () => {
|
|
13133
|
+
setCurrentStep("eventTypes");
|
|
13134
|
+
setShowingPreview(true);
|
|
13135
|
+
setEventDetails(null);
|
|
13136
|
+
}, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
|
|
13137
|
+
setCurrentStep("eventTypes");
|
|
13138
|
+
setShowingPreview(true);
|
|
13139
|
+
setEventDetails(null);
|
|
13140
|
+
}, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
|
|
13141
|
+
setIsSuccess(false);
|
|
13142
|
+
setCurrentStep("eventTypes");
|
|
13143
|
+
setShowingPreview(true);
|
|
13144
|
+
// Reset state
|
|
13145
|
+
setSuccessPaymentIntentId(null);
|
|
13146
|
+
// Reset lazy loading flags
|
|
13147
|
+
setShouldRenderInstanceSelection(false);
|
|
13148
|
+
setShouldRenderBookingForm(false);
|
|
13149
|
+
// Clean up URL to remove Stripe parameters
|
|
13150
|
+
const url = new URL(window.location.href);
|
|
13151
|
+
url.searchParams.delete("payment_intent");
|
|
13152
|
+
url.searchParams.delete("payment_intent_client_secret");
|
|
13153
|
+
url.searchParams.delete("redirect_status");
|
|
13154
|
+
window.history.replaceState({}, "", url.toString());
|
|
13155
|
+
}, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (u$2(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
|
|
12856
13156
|
}
|
|
12857
13157
|
if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
|
|
12858
13158
|
// Show all events for the single event type
|
|
12859
|
-
return (u$2(StyleProvider, { config: config, children: [shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
|
|
12860
|
-
|
|
12861
|
-
|
|
12862
|
-
|
|
12863
|
-
|
|
12864
|
-
|
|
12865
|
-
|
|
12866
|
-
|
|
12867
|
-
|
|
12868
|
-
|
|
12869
|
-
|
|
12870
|
-
|
|
12871
|
-
|
|
12872
|
-
|
|
12873
|
-
|
|
12874
|
-
|
|
12875
|
-
|
|
12876
|
-
|
|
12877
|
-
|
|
12878
|
-
|
|
12879
|
-
|
|
12880
|
-
|
|
13159
|
+
return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
|
|
13160
|
+
setShowingPreview(true);
|
|
13161
|
+
setCurrentStep("eventTypes");
|
|
13162
|
+
}, isOpen: currentStep === "eventInstances", onClose: () => {
|
|
13163
|
+
setShowingPreview(true);
|
|
13164
|
+
setCurrentStep("eventTypes");
|
|
13165
|
+
}, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
|
|
13166
|
+
setIsSuccess(false);
|
|
13167
|
+
setCurrentStep("eventTypes");
|
|
13168
|
+
setShowingPreview(true);
|
|
13169
|
+
// Reset state
|
|
13170
|
+
setSuccessPaymentIntentId(null);
|
|
13171
|
+
// Reset lazy loading flags
|
|
13172
|
+
setShouldRenderInstanceSelection(false);
|
|
13173
|
+
setShouldRenderBookingForm(false);
|
|
13174
|
+
// Clean up URL to remove Stripe parameters
|
|
13175
|
+
const url = new URL(window.location.href);
|
|
13176
|
+
url.searchParams.delete("payment_intent");
|
|
13177
|
+
url.searchParams.delete("payment_intent_client_secret");
|
|
13178
|
+
url.searchParams.delete("redirect_status");
|
|
13179
|
+
window.history.replaceState({}, "", url.toString());
|
|
13180
|
+
}, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (u$2(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
|
|
12881
13181
|
}
|
|
12882
13182
|
if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
|
|
12883
13183
|
// Button mode - show button that opens sidebar/booking directly
|
|
12884
|
-
return (u$2(StyleProvider, { config: config, children: u$2("div", { style: {
|
|
12885
|
-
|
|
12886
|
-
|
|
12887
|
-
|
|
12888
|
-
|
|
12889
|
-
|
|
12890
|
-
|
|
12891
|
-
|
|
12892
|
-
|
|
12893
|
-
|
|
12894
|
-
|
|
12895
|
-
|
|
12896
|
-
|
|
12897
|
-
|
|
12898
|
-
|
|
12899
|
-
|
|
12900
|
-
|
|
12901
|
-
|
|
12902
|
-
|
|
12903
|
-
|
|
12904
|
-
|
|
12905
|
-
|
|
12906
|
-
|
|
12907
|
-
|
|
12908
|
-
|
|
12909
|
-
|
|
12910
|
-
|
|
12911
|
-
|
|
12912
|
-
|
|
12913
|
-
|
|
12914
|
-
|
|
12915
|
-
|
|
12916
|
-
|
|
12917
|
-
|
|
12918
|
-
|
|
12919
|
-
|
|
12920
|
-
|
|
12921
|
-
|
|
12922
|
-
|
|
12923
|
-
|
|
12924
|
-
|
|
12925
|
-
|
|
13184
|
+
return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, style: {
|
|
13185
|
+
display: "flex",
|
|
13186
|
+
justifyContent: "center",
|
|
13187
|
+
alignItems: "center",
|
|
13188
|
+
minHeight: "120px",
|
|
13189
|
+
}, children: [u$2("button", { type: "button", style: {
|
|
13190
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
13191
|
+
color: "white",
|
|
13192
|
+
padding: "16px 32px",
|
|
13193
|
+
border: "none",
|
|
13194
|
+
borderRadius: "var(--bw-border-radius)",
|
|
13195
|
+
fontSize: "18px",
|
|
13196
|
+
fontWeight: 600,
|
|
13197
|
+
fontFamily: "var(--bw-font-family)",
|
|
13198
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
13199
|
+
cursor: "pointer",
|
|
13200
|
+
}, onClick: () => {
|
|
13201
|
+
if (isDirectInstanceMode) {
|
|
13202
|
+
setCurrentStep("booking");
|
|
13203
|
+
setShouldRenderBookingForm(true);
|
|
13204
|
+
}
|
|
13205
|
+
else {
|
|
13206
|
+
setSidebarOpen(true);
|
|
13207
|
+
setShouldRenderInstanceSelection(true);
|
|
13208
|
+
}
|
|
13209
|
+
}, children: config.buttonText ||
|
|
13210
|
+
(isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
|
|
13211
|
+
setIsSuccess(false);
|
|
13212
|
+
setCurrentStep("eventTypes");
|
|
13213
|
+
setSidebarOpen(false);
|
|
13214
|
+
// Reset state
|
|
13215
|
+
setSuccessPaymentIntentId(null);
|
|
13216
|
+
// Reset lazy loading flags
|
|
13217
|
+
setShouldRenderInstanceSelection(false);
|
|
13218
|
+
setShouldRenderBookingForm(false);
|
|
13219
|
+
// Clean up URL to remove Stripe parameters
|
|
13220
|
+
const url = new URL(window.location.href);
|
|
13221
|
+
url.searchParams.delete("payment_intent");
|
|
13222
|
+
url.searchParams.delete("payment_intent_client_secret");
|
|
13223
|
+
url.searchParams.delete("redirect_status");
|
|
13224
|
+
window.history.replaceState({}, "", url.toString());
|
|
13225
|
+
}, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (u$2(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
|
|
12926
13226
|
}
|
|
12927
13227
|
// Cards mode (default) - show event type selection
|
|
12928
13228
|
const cardsView = (u$2(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
|
|
@@ -12955,21 +13255,21 @@
|
|
|
12955
13255
|
};
|
|
12956
13256
|
};
|
|
12957
13257
|
const backHandlers = getBackHandlers();
|
|
12958
|
-
return (u$2(StyleProvider, { config: config, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
|
|
12959
|
-
|
|
12960
|
-
|
|
12961
|
-
|
|
12962
|
-
|
|
12963
|
-
|
|
12964
|
-
|
|
12965
|
-
|
|
12966
|
-
|
|
12967
|
-
|
|
12968
|
-
|
|
12969
|
-
|
|
12970
|
-
|
|
12971
|
-
|
|
12972
|
-
|
|
13258
|
+
return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
|
|
13259
|
+
setIsSuccess(false);
|
|
13260
|
+
setCurrentStep("eventTypes");
|
|
13261
|
+
// Reset state
|
|
13262
|
+
setSuccessPaymentIntentId(null);
|
|
13263
|
+
// Reset lazy loading flags
|
|
13264
|
+
setShouldRenderInstanceSelection(false);
|
|
13265
|
+
setShouldRenderBookingForm(false);
|
|
13266
|
+
// Clean up URL to remove Stripe parameters
|
|
13267
|
+
const url = new URL(window.location.href);
|
|
13268
|
+
url.searchParams.delete("payment_intent");
|
|
13269
|
+
url.searchParams.delete("payment_intent_client_secret");
|
|
13270
|
+
url.searchParams.delete("redirect_status");
|
|
13271
|
+
window.history.replaceState({}, "", url.toString());
|
|
13272
|
+
}, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }), showPromoDialog && (u$2(PromoDialog, { onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
|
|
12973
13273
|
}
|
|
12974
13274
|
|
|
12975
13275
|
// Export init function for vanilla JS usage with Preact
|