@bigz-app/booking-widget 0.1.8 → 0.1.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 +715 -390
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/BookingForm.d.ts.map +1 -1
- package/dist/components/EventTypeSelection.d.ts +3 -1
- package/dist/components/EventTypeSelection.d.ts.map +1 -1
- package/dist/components/NextEventsPreview.d.ts +2 -1
- package/dist/components/NextEventsPreview.d.ts.map +1 -1
- package/dist/components/Sidebar.d.ts.map +1 -1
- package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
- package/dist/index.cjs +717 -392
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +718 -393
- package/dist/index.esm.js.map +1 -1
- package/dist/styles/StyleProvider.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/booking-widget.js
CHANGED
|
@@ -367,87 +367,104 @@
|
|
|
367
367
|
},
|
|
368
368
|
};
|
|
369
369
|
const StyleProvider = ({ config, children, }) => {
|
|
370
|
-
|
|
371
|
-
const
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
value.includes("
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
const getBorderRadius = (value, fallback) => {
|
|
386
|
-
if (!value)
|
|
370
|
+
// PERFORMANCE OPTIMIZATION: Memoize style calculations
|
|
371
|
+
const themedStyles = T$1(() => {
|
|
372
|
+
const themeName = config.theme || "light-fresh";
|
|
373
|
+
const themeDefaults = themes[themeName] || themes["light-fresh"];
|
|
374
|
+
const getCSSValue = (value, fallback) => {
|
|
375
|
+
if (!value)
|
|
376
|
+
return fallback;
|
|
377
|
+
if (value.includes("#") ||
|
|
378
|
+
value.includes("px") ||
|
|
379
|
+
value.includes("%") ||
|
|
380
|
+
value.includes("rgb") ||
|
|
381
|
+
value.includes("hsl") ||
|
|
382
|
+
value.includes("oklch")) {
|
|
383
|
+
return value;
|
|
384
|
+
}
|
|
387
385
|
return fallback;
|
|
388
|
-
const radiusMap = {
|
|
389
|
-
none: "0px",
|
|
390
|
-
sm: "4px",
|
|
391
|
-
md: "8px",
|
|
392
|
-
lg: "12px",
|
|
393
|
-
xl: "16px",
|
|
394
|
-
full: "9999px",
|
|
395
386
|
};
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
387
|
+
const getBorderRadius = (value, fallback) => {
|
|
388
|
+
if (!value)
|
|
389
|
+
return fallback;
|
|
390
|
+
const radiusMap = {
|
|
391
|
+
none: "0px",
|
|
392
|
+
sm: "4px",
|
|
393
|
+
md: "8px",
|
|
394
|
+
lg: "12px",
|
|
395
|
+
xl: "16px",
|
|
396
|
+
full: "9999px",
|
|
397
|
+
};
|
|
398
|
+
return radiusMap[value] || value;
|
|
399
|
+
};
|
|
400
|
+
const addOpacity = (color, opacity) => {
|
|
401
|
+
if (color.startsWith("#")) {
|
|
402
|
+
const r = parseInt(color.slice(1, 3), 16);
|
|
403
|
+
const g = parseInt(color.slice(3, 5), 16);
|
|
404
|
+
const b = parseInt(color.slice(5, 7), 16);
|
|
405
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
406
|
+
}
|
|
407
|
+
if (color.startsWith("rgb")) {
|
|
408
|
+
return color.replace(")", `, ${opacity})`).replace("rgb", "rgba");
|
|
409
|
+
}
|
|
410
|
+
return color;
|
|
411
|
+
};
|
|
412
|
+
const hexToRgb = (hex) => {
|
|
413
|
+
let c = hex.substring(1).split("");
|
|
414
|
+
if (c.length === 3) {
|
|
415
|
+
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
|
416
|
+
}
|
|
417
|
+
c = `0x${c.join("")}`;
|
|
418
|
+
return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",");
|
|
419
|
+
};
|
|
420
|
+
const colors = config.colors || {};
|
|
421
|
+
const finalColors = {
|
|
422
|
+
highlight: getCSSValue(colors.highlight, themeDefaults.highlight),
|
|
423
|
+
background: getCSSValue(colors.background, themeDefaults.background),
|
|
424
|
+
surface: getCSSValue(colors.surface, themeDefaults.surface),
|
|
425
|
+
text: getCSSValue(colors.text, themeDefaults.text),
|
|
426
|
+
border: getCSSValue(colors.border, themeDefaults.border),
|
|
427
|
+
success: themeDefaults.success,
|
|
428
|
+
warning: themeDefaults.warning,
|
|
429
|
+
error: themeDefaults.error,
|
|
430
|
+
};
|
|
431
|
+
const borderRadius = getBorderRadius(config.borderRadius, themeDefaults.borderRadius);
|
|
432
|
+
return {
|
|
433
|
+
"--bw-highlight-color": finalColors.highlight,
|
|
434
|
+
"--bw-highlight-color-rgb": hexToRgb(finalColors.highlight),
|
|
435
|
+
"--bw-background-color": finalColors.background,
|
|
436
|
+
"--bw-surface-color": finalColors.surface,
|
|
437
|
+
"--bw-text-color": finalColors.text,
|
|
438
|
+
"--bw-text-muted": addOpacity(finalColors.text, 0.7),
|
|
439
|
+
"--bw-border-color": finalColors.border,
|
|
440
|
+
"--bw-success-color": finalColors.success,
|
|
441
|
+
"--bw-warning-color": finalColors.warning,
|
|
442
|
+
"--bw-error-color": finalColors.error,
|
|
443
|
+
"--bw-border-radius": borderRadius,
|
|
444
|
+
"--bw-border-radius-small": `calc(${borderRadius} * 0.8)`,
|
|
445
|
+
"--bw-spacing": "16px",
|
|
446
|
+
"--bw-spacing-large": "24px",
|
|
447
|
+
"--bw-font-family": config.fontFamily || themeDefaults.fontFamily,
|
|
448
|
+
"--bw-font-size": "14px",
|
|
449
|
+
"--bw-font-size-large": "18px",
|
|
450
|
+
"--bw-shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
451
|
+
"--bw-shadow-md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
452
|
+
// Additional optimized variables
|
|
453
|
+
"--bw-highlight-muted": addOpacity(finalColors.highlight, 0.1),
|
|
454
|
+
"--bw-highlight-subtle": addOpacity(finalColors.highlight, 0.05),
|
|
455
|
+
"--bw-text-subtle": addOpacity(finalColors.text, 0.4),
|
|
456
|
+
colorScheme: themeName.startsWith("dark-") || themeName === "midnight" ? "dark" : "light",
|
|
457
|
+
};
|
|
458
|
+
}, [
|
|
459
|
+
config.theme,
|
|
460
|
+
config.colors?.highlight,
|
|
461
|
+
config.colors?.background,
|
|
462
|
+
config.colors?.surface,
|
|
463
|
+
config.colors?.text,
|
|
464
|
+
config.colors?.border,
|
|
465
|
+
config.borderRadius,
|
|
466
|
+
config.fontFamily,
|
|
467
|
+
]);
|
|
451
468
|
return (u$1(StyleContext.Provider, { value: themedStyles, children: u$1("div", { style: themedStyles, className: "booking-widget-container", children: children }) }));
|
|
452
469
|
};
|
|
453
470
|
|
|
@@ -6423,7 +6440,6 @@
|
|
|
6423
6440
|
// Custom minimal SVG icons (Lucide-style)
|
|
6424
6441
|
const IconClock = ({ size = 16, color = "#10b981" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("circle", { cx: "12", cy: "12", r: "10" }), u$1("polyline", { points: "12 6 12 12 16 14" })] }));
|
|
6425
6442
|
const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), u$1("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), u$1("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), u$1("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
|
|
6426
|
-
const IconTarget = ({ size = 48 }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("circle", { cx: "12", cy: "12", r: "10" }), u$1("circle", { cx: "12", cy: "12", r: "6" }), u$1("circle", { cx: "12", cy: "12", r: "2" })] }));
|
|
6427
6443
|
// A placeholder SVG for events without an image.
|
|
6428
6444
|
const EventImagePlaceholder = () => (u$1("div", { style: {
|
|
6429
6445
|
width: "100%",
|
|
@@ -6434,14 +6450,159 @@
|
|
|
6434
6450
|
justifyContent: "center",
|
|
6435
6451
|
overflow: "hidden",
|
|
6436
6452
|
position: "relative",
|
|
6437
|
-
}, children:
|
|
6438
|
-
|
|
6439
|
-
|
|
6440
|
-
|
|
6441
|
-
|
|
6453
|
+
}, children: u$1("svg", { width: "60%", height: "60%", viewBox: "0 0 120 40", preserveAspectRatio: "xMidYMid meet", style: {
|
|
6454
|
+
position: "absolute",
|
|
6455
|
+
opacity: 0.18,
|
|
6456
|
+
filter: "blur(0.5px)",
|
|
6457
|
+
}, children: [u$1("path", { d: "M0 30 Q 15 10, 30 30 T 60 30 T 90 30 T 120 30", stroke: "white", strokeWidth: "4", fill: "none", strokeLinecap: "round" }), u$1("circle", { cx: "20", cy: "25", r: "3", fill: "white", opacity: "0.7" }), u$1("circle", { cx: "100", cy: "28", r: "2", fill: "white", opacity: "0.5" })] }) }));
|
|
6442
6458
|
// Wave icon for booking action
|
|
6443
6459
|
const IconWave = ({ size = 20, color = "#0ea5e9" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6444
|
-
|
|
6460
|
+
// Loading skeleton component that matches the actual design
|
|
6461
|
+
const EventTypeSelectionSkeleton = ({ count = 4 }) => (u$1(k$2, { children: [u$1("style", { children: `
|
|
6462
|
+
@keyframes shimmer {
|
|
6463
|
+
0% { transform: translateX(-100%); }
|
|
6464
|
+
100% { transform: translateX(100%); }
|
|
6465
|
+
}
|
|
6466
|
+
|
|
6467
|
+
.bw-skeleton-shimmer {
|
|
6468
|
+
position: relative;
|
|
6469
|
+
overflow: hidden;
|
|
6470
|
+
}
|
|
6471
|
+
|
|
6472
|
+
.bw-skeleton-shimmer::after {
|
|
6473
|
+
content: '';
|
|
6474
|
+
position: absolute;
|
|
6475
|
+
top: 0;
|
|
6476
|
+
left: 0;
|
|
6477
|
+
width: 100%;
|
|
6478
|
+
height: 100%;
|
|
6479
|
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
6480
|
+
animation: shimmer 2s infinite;
|
|
6481
|
+
}
|
|
6482
|
+
|
|
6483
|
+
@media (max-width: 600px) {
|
|
6484
|
+
.bw-skeleton-list {
|
|
6485
|
+
padding: 8px !important;
|
|
6486
|
+
gap: 12px !important;
|
|
6487
|
+
}
|
|
6488
|
+
.bw-skeleton-card {
|
|
6489
|
+
max-width: 100% !important;
|
|
6490
|
+
flex: 1 1 100% !important;
|
|
6491
|
+
}
|
|
6492
|
+
.bw-skeleton-img {
|
|
6493
|
+
height: 160px !important;
|
|
6494
|
+
}
|
|
6495
|
+
.bw-skeleton-content {
|
|
6496
|
+
padding: 12px !important;
|
|
6497
|
+
}
|
|
6498
|
+
.bw-skeleton-title {
|
|
6499
|
+
font-size: 1.1rem !important;
|
|
6500
|
+
height: 20px !important;
|
|
6501
|
+
}
|
|
6502
|
+
.bw-skeleton-desc {
|
|
6503
|
+
min-height: 100px !important;
|
|
6504
|
+
max-height: 100px !important;
|
|
6505
|
+
}
|
|
6506
|
+
.bw-skeleton-price {
|
|
6507
|
+
font-size: 1.3rem !important;
|
|
6508
|
+
height: 28px !important;
|
|
6509
|
+
}
|
|
6510
|
+
}
|
|
6511
|
+
` }), u$1("div", { className: "bw-skeleton-list bw-event-type-list", style: { padding: "24px" }, children: u$1("div", { style: {
|
|
6512
|
+
display: "flex",
|
|
6513
|
+
flexWrap: "wrap",
|
|
6514
|
+
justifyContent: "center",
|
|
6515
|
+
gap: "32px",
|
|
6516
|
+
}, children: Array.from({ length: count }).map((_, idx) => (u$1("div", { className: "bw-skeleton-card bw-skeleton-shimmer bw-event-type-card", style: {
|
|
6517
|
+
position: "relative",
|
|
6518
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6519
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6520
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6521
|
+
overflow: "hidden",
|
|
6522
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6523
|
+
fontFamily: "var(--bw-font-family)",
|
|
6524
|
+
maxWidth: "500px",
|
|
6525
|
+
flex: "1 1 350px",
|
|
6526
|
+
display: "flex",
|
|
6527
|
+
flexDirection: "column",
|
|
6528
|
+
}, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
|
|
6529
|
+
width: "80px",
|
|
6530
|
+
height: "24px",
|
|
6531
|
+
backgroundColor: "rgba(255, 255, 255, 0.2)",
|
|
6532
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
6533
|
+
} }) }), u$1("div", { className: "bw-skeleton-img bw-event-type-img", style: {
|
|
6534
|
+
position: "relative",
|
|
6535
|
+
width: "100%",
|
|
6536
|
+
height: "300px",
|
|
6537
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6538
|
+
} }), u$1("div", { className: "bw-skeleton-content bw-event-type-content", style: { padding: "24px", flex: 1 }, children: [u$1("div", { style: {
|
|
6539
|
+
width: "60%",
|
|
6540
|
+
height: "14px",
|
|
6541
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6542
|
+
borderRadius: "4px",
|
|
6543
|
+
marginBottom: "8px",
|
|
6544
|
+
} }), u$1("div", { className: "bw-skeleton-title bw-event-type-title", style: {
|
|
6545
|
+
width: "85%",
|
|
6546
|
+
height: "24px",
|
|
6547
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6548
|
+
borderRadius: "4px",
|
|
6549
|
+
marginBottom: "12px",
|
|
6550
|
+
} }), u$1("div", { style: { marginBottom: "10px" }, children: [u$1("div", { style: {
|
|
6551
|
+
display: "flex",
|
|
6552
|
+
alignItems: "center",
|
|
6553
|
+
gap: "6px",
|
|
6554
|
+
marginBottom: "6px",
|
|
6555
|
+
}, children: [u$1("div", { style: {
|
|
6556
|
+
width: "16px",
|
|
6557
|
+
height: "16px",
|
|
6558
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6559
|
+
borderRadius: "50%",
|
|
6560
|
+
} }), u$1("div", { style: {
|
|
6561
|
+
width: "60px",
|
|
6562
|
+
height: "14px",
|
|
6563
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6564
|
+
borderRadius: "4px",
|
|
6565
|
+
} })] }), u$1("div", { style: {
|
|
6566
|
+
display: "flex",
|
|
6567
|
+
alignItems: "center",
|
|
6568
|
+
gap: "6px",
|
|
6569
|
+
}, children: [u$1("div", { style: {
|
|
6570
|
+
width: "16px",
|
|
6571
|
+
height: "16px",
|
|
6572
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6573
|
+
borderRadius: "4px",
|
|
6574
|
+
} }), u$1("div", { style: {
|
|
6575
|
+
width: "120px",
|
|
6576
|
+
height: "14px",
|
|
6577
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6578
|
+
borderRadius: "4px",
|
|
6579
|
+
} })] })] }), u$1("div", { className: "bw-skeleton-desc bw-event-type-desc", style: { marginBottom: "20px" }, children: Array.from({ length: 5 }).map((_, lineIdx) => (u$1("div", { style: {
|
|
6580
|
+
width: lineIdx === 4 ? "70%" : "100%",
|
|
6581
|
+
height: "16px",
|
|
6582
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6583
|
+
borderRadius: "4px",
|
|
6584
|
+
marginBottom: "8px",
|
|
6585
|
+
} }, lineIdx))) }), u$1("div", { style: {
|
|
6586
|
+
display: "flex",
|
|
6587
|
+
justifyContent: "space-between",
|
|
6588
|
+
alignItems: "center",
|
|
6589
|
+
marginTop: "20px",
|
|
6590
|
+
}, children: [u$1("div", { children: u$1("div", { className: "bw-skeleton-price bw-event-type-price", style: {
|
|
6591
|
+
width: "80px",
|
|
6592
|
+
height: "32px",
|
|
6593
|
+
backgroundColor: "var(--bw-border-color)",
|
|
6594
|
+
borderRadius: "4px",
|
|
6595
|
+
} }) }), u$1("div", { style: {
|
|
6596
|
+
width: "120px",
|
|
6597
|
+
height: "48px",
|
|
6598
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6599
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6600
|
+
opacity: 0.3,
|
|
6601
|
+
display: "flex",
|
|
6602
|
+
alignItems: "center",
|
|
6603
|
+
justifyContent: "center",
|
|
6604
|
+
} })] })] })] }, idx))) }) })] }));
|
|
6605
|
+
function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false, skeletonCount = 4, }) {
|
|
6445
6606
|
// State to track which event descriptions are expanded
|
|
6446
6607
|
const [expandedDescriptions, setExpandedDescriptions] = d(new Set());
|
|
6447
6608
|
// State to track which descriptions are actually truncated
|
|
@@ -6496,8 +6657,10 @@
|
|
|
6496
6657
|
descriptionRefs.current.delete(eventTypeId);
|
|
6497
6658
|
}
|
|
6498
6659
|
};
|
|
6499
|
-
//
|
|
6500
|
-
|
|
6660
|
+
// Show loading skeleton
|
|
6661
|
+
if (isLoading) {
|
|
6662
|
+
return u$1(EventTypeSelectionSkeleton, { count: skeletonCount });
|
|
6663
|
+
}
|
|
6501
6664
|
return (u$1(k$2, { children: [u$1("style", { children: `
|
|
6502
6665
|
@media (max-width: 600px) {
|
|
6503
6666
|
.bw-event-type-list {
|
|
@@ -6527,30 +6690,66 @@
|
|
|
6527
6690
|
padding: 12px !important;
|
|
6528
6691
|
}
|
|
6529
6692
|
}
|
|
6530
|
-
` }), eventTypes.length === 0 ? (u$1("div", { style: {
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
|
|
6535
|
-
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
|
|
6539
|
-
|
|
6540
|
-
|
|
6541
|
-
|
|
6542
|
-
|
|
6543
|
-
|
|
6544
|
-
|
|
6545
|
-
|
|
6693
|
+
` }), eventTypes.length === 0 ? (u$1("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: u$1("div", { style: {
|
|
6694
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6695
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6696
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6697
|
+
padding: "var(--bw-spacing-large)",
|
|
6698
|
+
textAlign: "center",
|
|
6699
|
+
fontFamily: "var(--bw-font-family)",
|
|
6700
|
+
minHeight: "400px",
|
|
6701
|
+
display: "flex",
|
|
6702
|
+
flexDirection: "column",
|
|
6703
|
+
alignItems: "center",
|
|
6704
|
+
justifyContent: "center",
|
|
6705
|
+
}, children: [u$1("div", { style: {
|
|
6706
|
+
width: "64px",
|
|
6707
|
+
height: "64px",
|
|
6708
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6709
|
+
borderRadius: "50%",
|
|
6710
|
+
margin: "0 auto var(--bw-spacing)",
|
|
6711
|
+
display: "flex",
|
|
6712
|
+
alignItems: "center",
|
|
6713
|
+
justifyContent: "center",
|
|
6714
|
+
fontSize: "32px",
|
|
6715
|
+
color: "white",
|
|
6716
|
+
opacity: 0.8,
|
|
6717
|
+
}, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
|
|
6718
|
+
fontSize: "var(--bw-font-size-xl)",
|
|
6546
6719
|
fontWeight: "600",
|
|
6547
|
-
|
|
6548
|
-
|
|
6720
|
+
color: "var(--bw-text-color)",
|
|
6721
|
+
margin: "0 0 var(--bw-spacing-small) 0",
|
|
6549
6722
|
fontFamily: "var(--bw-font-family)",
|
|
6550
6723
|
}, children: "Keine Veranstaltungen verf\u00FCgbar" }), u$1("p", { style: {
|
|
6551
6724
|
color: "var(--bw-text-muted)",
|
|
6725
|
+
fontSize: "var(--bw-font-size)",
|
|
6726
|
+
lineHeight: "1.6",
|
|
6727
|
+
margin: "0 0 var(--bw-spacing-large) 0",
|
|
6728
|
+
fontFamily: "var(--bw-font-family)",
|
|
6729
|
+
maxWidth: "400px",
|
|
6730
|
+
}, children: "Derzeit sind keine Veranstaltungen in dieser Kategorie verf\u00FCgbar. Bitte schaue sp\u00E4ter noch einmal vorbei oder kontaktiere uns direkt." }), u$1("button", { onClick: () => window.location.reload(), style: {
|
|
6731
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6732
|
+
color: "var(--bw-highlight-color)",
|
|
6733
|
+
padding: "12px 24px",
|
|
6734
|
+
border: `1px solid var(--bw-highlight-color)`,
|
|
6735
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6736
|
+
fontSize: "var(--bw-font-size)",
|
|
6737
|
+
fontWeight: "600",
|
|
6738
|
+
cursor: "pointer",
|
|
6552
6739
|
fontFamily: "var(--bw-font-family)",
|
|
6553
|
-
|
|
6740
|
+
transition: "all 0.2s ease",
|
|
6741
|
+
display: "flex",
|
|
6742
|
+
alignItems: "center",
|
|
6743
|
+
gap: "8px",
|
|
6744
|
+
}, onMouseEnter: (e) => {
|
|
6745
|
+
e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
|
|
6746
|
+
e.currentTarget.style.color = "white";
|
|
6747
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
6748
|
+
}, onMouseLeave: (e) => {
|
|
6749
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
6750
|
+
e.currentTarget.style.color = "var(--bw-highlight-color)";
|
|
6751
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
6752
|
+
}, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "24px" }, children: u$1("div", { style: {
|
|
6554
6753
|
display: "flex",
|
|
6555
6754
|
flexWrap: "wrap",
|
|
6556
6755
|
justifyContent: "center",
|
|
@@ -8290,143 +8489,156 @@
|
|
|
8290
8489
|
const [isVisible, setIsVisible] = d(false);
|
|
8291
8490
|
const [isAnimating, setIsAnimating] = d(false);
|
|
8292
8491
|
const themedStyles = useStyles();
|
|
8293
|
-
|
|
8492
|
+
const portalRootRef = A$1(null);
|
|
8493
|
+
// PERFORMANCE OPTIMIZATION: Reuse portal root and reduce DOM operations
|
|
8294
8494
|
y(() => {
|
|
8295
|
-
|
|
8296
|
-
|
|
8297
|
-
|
|
8298
|
-
|
|
8299
|
-
|
|
8495
|
+
if (!portalRootRef.current) {
|
|
8496
|
+
let portalRoot = document.getElementById("booking-widget-portal-root");
|
|
8497
|
+
if (!portalRoot) {
|
|
8498
|
+
portalRoot = document.createElement("div");
|
|
8499
|
+
portalRoot.id = "booking-widget-portal-root";
|
|
8500
|
+
document.body.appendChild(portalRoot);
|
|
8501
|
+
}
|
|
8502
|
+
portalRootRef.current = portalRoot;
|
|
8300
8503
|
}
|
|
8301
8504
|
}, []);
|
|
8505
|
+
// PERFORMANCE OPTIMIZATION: Optimize animation timing
|
|
8302
8506
|
y(() => {
|
|
8303
8507
|
if (isOpen) {
|
|
8304
8508
|
setIsVisible(true);
|
|
8305
|
-
|
|
8509
|
+
// Use requestAnimationFrame for smoother animations
|
|
8510
|
+
requestAnimationFrame(() => {
|
|
8511
|
+
requestAnimationFrame(() => {
|
|
8512
|
+
setIsAnimating(true);
|
|
8513
|
+
});
|
|
8514
|
+
});
|
|
8306
8515
|
}
|
|
8307
8516
|
else {
|
|
8308
8517
|
setIsAnimating(false);
|
|
8309
|
-
|
|
8518
|
+
// Shorter timeout for better perceived performance
|
|
8519
|
+
const timeout = setTimeout(() => setIsVisible(false), 250);
|
|
8520
|
+
return () => clearTimeout(timeout);
|
|
8310
8521
|
}
|
|
8311
8522
|
}, [isOpen]);
|
|
8312
|
-
//
|
|
8523
|
+
// PERFORMANCE OPTIMIZATION: Optimize body scroll management
|
|
8313
8524
|
y(() => {
|
|
8314
8525
|
const SidebarWithCount = Sidebar;
|
|
8315
8526
|
if (isOpen) {
|
|
8316
8527
|
SidebarWithCount.openCount = (SidebarWithCount.openCount || 0) + 1;
|
|
8528
|
+
if (SidebarWithCount.openCount === 1) {
|
|
8529
|
+
document.body.style.overflow = "hidden";
|
|
8530
|
+
}
|
|
8317
8531
|
}
|
|
8318
8532
|
else if (SidebarWithCount.openCount) {
|
|
8319
8533
|
SidebarWithCount.openCount = SidebarWithCount.openCount - 1;
|
|
8320
|
-
|
|
8321
|
-
|
|
8322
|
-
|
|
8323
|
-
}
|
|
8324
|
-
else {
|
|
8325
|
-
document.body.style.overflow = "";
|
|
8534
|
+
if (SidebarWithCount.openCount === 0) {
|
|
8535
|
+
document.body.style.overflow = "";
|
|
8536
|
+
}
|
|
8326
8537
|
}
|
|
8327
8538
|
return () => {
|
|
8328
8539
|
if (isOpen && SidebarWithCount.openCount) {
|
|
8329
8540
|
SidebarWithCount.openCount = SidebarWithCount.openCount - 1;
|
|
8330
|
-
|
|
8331
|
-
|
|
8332
|
-
|
|
8541
|
+
if (SidebarWithCount.openCount === 0) {
|
|
8542
|
+
document.body.style.overflow = "";
|
|
8543
|
+
}
|
|
8333
8544
|
}
|
|
8334
8545
|
};
|
|
8335
8546
|
}, [isOpen]);
|
|
8547
|
+
// PERFORMANCE OPTIMIZATION: Optimize escape key handling
|
|
8336
8548
|
y(() => {
|
|
8549
|
+
if (!isOpen)
|
|
8550
|
+
return;
|
|
8337
8551
|
const handleEscape = (e) => {
|
|
8338
8552
|
if (e.key === "Escape") {
|
|
8339
8553
|
onClose();
|
|
8340
8554
|
}
|
|
8341
8555
|
};
|
|
8342
|
-
|
|
8343
|
-
|
|
8344
|
-
}
|
|
8345
|
-
return () => {
|
|
8346
|
-
document.removeEventListener("keydown", handleEscape);
|
|
8347
|
-
};
|
|
8556
|
+
document.addEventListener("keydown", handleEscape);
|
|
8557
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
8348
8558
|
}, [isOpen, onClose]);
|
|
8349
8559
|
if (!isVisible)
|
|
8350
8560
|
return null;
|
|
8351
|
-
const sidebarContent = (u$1(
|
|
8352
|
-
|
|
8353
|
-
|
|
8354
|
-
|
|
8355
|
-
|
|
8356
|
-
|
|
8357
|
-
|
|
8358
|
-
|
|
8359
|
-
|
|
8360
|
-
|
|
8561
|
+
const sidebarContent = (u$1("div", { style: {
|
|
8562
|
+
position: "fixed",
|
|
8563
|
+
top: 0,
|
|
8564
|
+
left: 0,
|
|
8565
|
+
right: 0,
|
|
8566
|
+
bottom: 0,
|
|
8567
|
+
zIndex: 1000,
|
|
8568
|
+
fontFamily: "var(--bw-font-family)",
|
|
8569
|
+
...themedStyles,
|
|
8570
|
+
}, children: [u$1("div", { style: {
|
|
8571
|
+
position: "absolute",
|
|
8572
|
+
inset: 0,
|
|
8573
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
8574
|
+
opacity: isAnimating ? 1 : 0,
|
|
8575
|
+
transition: "opacity 0.25s ease-out",
|
|
8576
|
+
}, onClick: onClose }), u$1("div", { style: {
|
|
8577
|
+
position: "absolute",
|
|
8361
8578
|
top: 0,
|
|
8362
|
-
left: 0,
|
|
8363
8579
|
right: 0,
|
|
8364
8580
|
bottom: 0,
|
|
8365
|
-
|
|
8366
|
-
|
|
8367
|
-
|
|
8581
|
+
width,
|
|
8582
|
+
maxWidth: "90vw",
|
|
8583
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
8584
|
+
borderLeft: `1px solid var(--bw-border-color)`,
|
|
8585
|
+
boxShadow: "var(--bw-shadow-lg)",
|
|
8586
|
+
transform: isAnimating ? "translateX(0)" : "translateX(100%)",
|
|
8587
|
+
transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
8588
|
+
display: "flex",
|
|
8589
|
+
flexDirection: "column",
|
|
8590
|
+
overflow: "hidden",
|
|
8591
|
+
willChange: "transform", // Enable hardware acceleration
|
|
8368
8592
|
}, children: [u$1("div", { style: {
|
|
8369
|
-
|
|
8370
|
-
|
|
8371
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
8372
|
-
opacity: isAnimating ? 1 : 0,
|
|
8373
|
-
transition: "opacity 0.3s ease-in-out",
|
|
8374
|
-
}, onClick: onClose }), u$1("div", { className: "bw-sidebar-mobile", style: {
|
|
8375
|
-
position: "absolute",
|
|
8376
|
-
top: 0,
|
|
8377
|
-
right: 0,
|
|
8378
|
-
bottom: 0,
|
|
8379
|
-
width,
|
|
8380
|
-
maxWidth: "90vw",
|
|
8381
|
-
backgroundColor: "var(--bw-surface-color)",
|
|
8382
|
-
borderLeft: `1px solid var(--bw-border-color)`,
|
|
8383
|
-
boxShadow: "var(--bw-shadow-lg)",
|
|
8384
|
-
transform: isAnimating ? "translateX(0)" : "translateX(100%)",
|
|
8385
|
-
transition: "transform 0.3s ease-in-out",
|
|
8593
|
+
padding: "var(--bw-spacing)",
|
|
8594
|
+
borderBottom: `1px solid var(--bw-border-color)`,
|
|
8386
8595
|
display: "flex",
|
|
8387
|
-
|
|
8388
|
-
|
|
8389
|
-
|
|
8390
|
-
|
|
8391
|
-
|
|
8596
|
+
alignItems: "center",
|
|
8597
|
+
justifyContent: "space-between",
|
|
8598
|
+
backgroundColor: "var(--bw-background-color)",
|
|
8599
|
+
flexShrink: 0,
|
|
8600
|
+
}, children: [u$1("h2", { style: {
|
|
8601
|
+
fontSize: "var(--bw-font-size-large)",
|
|
8602
|
+
fontWeight: "600",
|
|
8603
|
+
color: "var(--bw-text-color)",
|
|
8604
|
+
margin: 0,
|
|
8605
|
+
fontFamily: "var(--bw-font-family)",
|
|
8606
|
+
}, children: title }), u$1("button", { onClick: onClose, style: {
|
|
8607
|
+
padding: "8px 16px",
|
|
8608
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
8609
|
+
backgroundColor: "transparent",
|
|
8610
|
+
border: `1px solid var(--bw-border-color)`,
|
|
8611
|
+
color: "var(--bw-text-muted)",
|
|
8612
|
+
cursor: "pointer",
|
|
8392
8613
|
display: "flex",
|
|
8393
8614
|
alignItems: "center",
|
|
8394
|
-
justifyContent: "
|
|
8395
|
-
|
|
8396
|
-
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
|
|
8400
|
-
|
|
8401
|
-
|
|
8402
|
-
|
|
8403
|
-
|
|
8404
|
-
|
|
8405
|
-
|
|
8406
|
-
|
|
8407
|
-
|
|
8408
|
-
|
|
8409
|
-
|
|
8410
|
-
|
|
8411
|
-
|
|
8412
|
-
|
|
8413
|
-
|
|
8414
|
-
|
|
8415
|
-
|
|
8416
|
-
|
|
8417
|
-
|
|
8418
|
-
|
|
8419
|
-
|
|
8420
|
-
|
|
8421
|
-
e.currentTarget.style.backgroundColor = "transparent";
|
|
8422
|
-
e.currentTarget.style.color = "var(--bw-text-muted)";
|
|
8423
|
-
}, children: "\u2190 Zur\u00FCck" })] }), u$1("div", { style: {
|
|
8424
|
-
flex: 1,
|
|
8425
|
-
overflow: "auto",
|
|
8426
|
-
backgroundColor: "var(--bw-background-color)",
|
|
8427
|
-
}, children: children })] })] })] }));
|
|
8428
|
-
const portalRoot = typeof window !== "undefined" ? document.getElementById("booking-widget-portal-root") : null;
|
|
8429
|
-
return portalRoot ? Rn.createPortal(sidebarContent, portalRoot) : null;
|
|
8615
|
+
justifyContent: "center",
|
|
8616
|
+
fontSize: "var(--bw-font-size)",
|
|
8617
|
+
transition: "all 0.2s ease",
|
|
8618
|
+
fontFamily: "var(--bw-font-family)",
|
|
8619
|
+
fontWeight: "500",
|
|
8620
|
+
whiteSpace: "nowrap",
|
|
8621
|
+
}, onMouseEnter: (e) => {
|
|
8622
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
8623
|
+
e.currentTarget.style.color = "var(--bw-text-color)";
|
|
8624
|
+
}, onMouseLeave: (e) => {
|
|
8625
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
8626
|
+
e.currentTarget.style.color = "var(--bw-text-muted)";
|
|
8627
|
+
}, children: "\u2190 Zur\u00FCck" })] }), u$1("div", { style: {
|
|
8628
|
+
flex: 1,
|
|
8629
|
+
overflow: "auto",
|
|
8630
|
+
backgroundColor: "var(--bw-background-color)",
|
|
8631
|
+
}, children: children })] }), u$1("style", { children: `
|
|
8632
|
+
@media (max-width: 600px) {
|
|
8633
|
+
.bw-sidebar-mobile {
|
|
8634
|
+
width: 100vw !important;
|
|
8635
|
+
max-width: 100vw !important;
|
|
8636
|
+
}
|
|
8637
|
+
}
|
|
8638
|
+
` })] }));
|
|
8639
|
+
return portalRootRef.current
|
|
8640
|
+
? Rn.createPortal(sidebarContent, portalRootRef.current)
|
|
8641
|
+
: null;
|
|
8430
8642
|
}
|
|
8431
8643
|
function Accordion({ title, priceInfo, children, isOpen, onToggle }) {
|
|
8432
8644
|
return (u$1("div", { style: {
|
|
@@ -8700,34 +8912,7 @@
|
|
|
8700
8912
|
color: "var(--bw-text-color)",
|
|
8701
8913
|
fontWeight: "500",
|
|
8702
8914
|
fontFamily: "var(--bw-font-family)",
|
|
8703
|
-
}, children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] })] })] }),
|
|
8704
|
-
backgroundColor: "var(--bw-surface-color)",
|
|
8705
|
-
border: `1px solid var(--bw-highlight-color)`,
|
|
8706
|
-
borderRadius: "var(--bw-border-radius)",
|
|
8707
|
-
padding: "var(--bw-spacing)",
|
|
8708
|
-
marginBottom: "var(--bw-spacing-large)",
|
|
8709
|
-
}, children: [u$1("div", { style: {
|
|
8710
|
-
display: "flex",
|
|
8711
|
-
alignItems: "center",
|
|
8712
|
-
gap: "12px",
|
|
8713
|
-
marginBottom: "8px",
|
|
8714
|
-
}, children: [u$1("div", { style: {
|
|
8715
|
-
color: "var(--bw-highlight-color)",
|
|
8716
|
-
fontSize: "24px",
|
|
8717
|
-
}, children: "\uD83D\uDCB0" }), u$1("h3", { style: {
|
|
8718
|
-
fontSize: "var(--bw-font-size-large)",
|
|
8719
|
-
fontWeight: "600",
|
|
8720
|
-
color: "var(--bw-highlight-color)",
|
|
8721
|
-
margin: 0,
|
|
8722
|
-
fontFamily: "var(--bw-font-family)",
|
|
8723
|
-
}, children: "Anzahlung erforderlich" })] }), u$1("p", { style: {
|
|
8724
|
-
color: "var(--bw-text-muted)",
|
|
8725
|
-
fontSize: "var(--bw-font-size)",
|
|
8726
|
-
fontFamily: "var(--bw-font-family)",
|
|
8727
|
-
margin: 0,
|
|
8728
|
-
lineHeight: "1.5",
|
|
8729
|
-
}, children: ["F\u00FCr diese Buchung ist nur eine Anzahlung von", " ", u$1("strong", { style: { color: "var(--bw-text-color)" }, children: [formatCurrency(eventDetails.deposit || 0), " pro Person"] }), " ", "erforderlich. Der Restbetrag von", " ", u$1("strong", { style: { color: "var(--bw-text-color)" }, children: formatCurrency((eventDetails.price - (eventDetails.deposit || 0)) *
|
|
8730
|
-
watchedParticipants.filter((p) => p.name.trim()).length) }), " ", "wird vor dem Event f\u00E4llig."] })] })), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
|
|
8915
|
+
}, children: [eventDetails.durationDays, " Tag", eventDetails.durationDays > 1 ? "e" : ""] })] })] })] }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
|
|
8731
8916
|
backgroundColor: "var(--bw-surface-color)",
|
|
8732
8917
|
border: `1px solid var(--bw-border-color)`,
|
|
8733
8918
|
backdropFilter: "blur(4px)",
|
|
@@ -9376,19 +9561,195 @@
|
|
|
9376
9561
|
}) }) }, month))) }) }) })] }));
|
|
9377
9562
|
}
|
|
9378
9563
|
|
|
9379
|
-
|
|
9564
|
+
// Loading skeleton component for NextEventsPreview
|
|
9565
|
+
const NextEventsPreviewSkeleton = ({ count = 3 }) => (u$1(k$2, { children: [u$1("style", { children: `
|
|
9566
|
+
@keyframes shimmer {
|
|
9567
|
+
0% { transform: translateX(-100%); }
|
|
9568
|
+
100% { transform: translateX(100%); }
|
|
9569
|
+
}
|
|
9570
|
+
|
|
9571
|
+
.bw-next-events-skeleton {
|
|
9572
|
+
position: relative;
|
|
9573
|
+
overflow: hidden;
|
|
9574
|
+
}
|
|
9575
|
+
|
|
9576
|
+
.bw-next-events-skeleton::after {
|
|
9577
|
+
content: '';
|
|
9578
|
+
position: absolute;
|
|
9579
|
+
top: 0;
|
|
9580
|
+
left: 0;
|
|
9581
|
+
width: 100%;
|
|
9582
|
+
height: 100%;
|
|
9583
|
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
9584
|
+
animation: shimmer 2s infinite;
|
|
9585
|
+
}
|
|
9586
|
+
` }), u$1("div", { style: {
|
|
9587
|
+
maxWidth: "500px",
|
|
9588
|
+
margin: "0 auto",
|
|
9589
|
+
padding: "var(--bw-spacing)",
|
|
9590
|
+
fontFamily: "var(--bw-font-family)",
|
|
9591
|
+
}, children: [u$1("div", { style: {
|
|
9592
|
+
marginBottom: "var(--bw-spacing-lg)",
|
|
9593
|
+
textAlign: "center",
|
|
9594
|
+
}, children: [u$1("div", { style: {
|
|
9595
|
+
width: "280px",
|
|
9596
|
+
height: "24px",
|
|
9597
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9598
|
+
borderRadius: "4px",
|
|
9599
|
+
margin: "0 auto 8px",
|
|
9600
|
+
} }), u$1("div", { style: {
|
|
9601
|
+
width: "320px",
|
|
9602
|
+
height: "16px",
|
|
9603
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9604
|
+
borderRadius: "4px",
|
|
9605
|
+
margin: "0 auto",
|
|
9606
|
+
} })] }), u$1("div", { style: {
|
|
9607
|
+
display: "flex",
|
|
9608
|
+
flexDirection: "column",
|
|
9609
|
+
gap: "12px",
|
|
9610
|
+
marginBottom: "var(--bw-spacing-lg)",
|
|
9611
|
+
}, children: Array.from({ length: count }).map((_, idx) => (u$1("div", { className: "bw-next-events-skeleton", style: {
|
|
9612
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
9613
|
+
border: "1px solid var(--bw-border-color)",
|
|
9614
|
+
borderRadius: "var(--bw-border-radius)",
|
|
9615
|
+
padding: "8px 10px",
|
|
9616
|
+
fontFamily: "var(--bw-font-family)",
|
|
9617
|
+
}, children: [u$1("div", { style: {
|
|
9618
|
+
display: "flex",
|
|
9619
|
+
justifyContent: "space-between",
|
|
9620
|
+
width: "100%",
|
|
9621
|
+
alignItems: "start",
|
|
9622
|
+
gap: "12px",
|
|
9623
|
+
marginBottom: "4px",
|
|
9624
|
+
}, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { style: {
|
|
9625
|
+
width: "40px",
|
|
9626
|
+
height: "40px",
|
|
9627
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9628
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
9629
|
+
} }), u$1("div", { style: {
|
|
9630
|
+
display: "flex",
|
|
9631
|
+
flexDirection: "column",
|
|
9632
|
+
gap: "4px",
|
|
9633
|
+
}, children: [u$1("div", { style: {
|
|
9634
|
+
width: "80px",
|
|
9635
|
+
height: "16px",
|
|
9636
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9637
|
+
borderRadius: "4px",
|
|
9638
|
+
} }), u$1("div", { style: {
|
|
9639
|
+
width: "60px",
|
|
9640
|
+
height: "14px",
|
|
9641
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9642
|
+
borderRadius: "4px",
|
|
9643
|
+
} })] })] }), u$1("div", { style: {
|
|
9644
|
+
display: "flex",
|
|
9645
|
+
flexDirection: "column",
|
|
9646
|
+
alignItems: "end",
|
|
9647
|
+
gap: "4px",
|
|
9648
|
+
}, children: [u$1("div", { style: {
|
|
9649
|
+
width: "70px",
|
|
9650
|
+
height: "20px",
|
|
9651
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
9652
|
+
borderRadius: "4px",
|
|
9653
|
+
opacity: 0.3,
|
|
9654
|
+
} }), u$1("div", { style: {
|
|
9655
|
+
width: "50px",
|
|
9656
|
+
height: "12px",
|
|
9657
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9658
|
+
borderRadius: "4px",
|
|
9659
|
+
} })] })] }), u$1("div", { style: {
|
|
9660
|
+
display: "flex",
|
|
9661
|
+
alignItems: "center",
|
|
9662
|
+
gap: "8px",
|
|
9663
|
+
marginBottom: "4px",
|
|
9664
|
+
}, children: [u$1("div", { style: {
|
|
9665
|
+
width: "140px",
|
|
9666
|
+
height: "16px",
|
|
9667
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9668
|
+
borderRadius: "4px",
|
|
9669
|
+
} }), u$1("div", { style: {
|
|
9670
|
+
width: "50px",
|
|
9671
|
+
height: "20px",
|
|
9672
|
+
backgroundColor: "var(--bw-border-color)",
|
|
9673
|
+
borderRadius: "8px",
|
|
9674
|
+
} })] })] }, idx))) }), u$1("div", { style: { textAlign: "center" }, children: u$1("div", { style: {
|
|
9675
|
+
width: "160px",
|
|
9676
|
+
height: "48px",
|
|
9677
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
9678
|
+
border: "1px solid var(--bw-border-color)",
|
|
9679
|
+
borderRadius: "var(--bw-border-radius)",
|
|
9680
|
+
margin: "0 auto",
|
|
9681
|
+
} }) })] })] }));
|
|
9682
|
+
function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, isLoadingEventDetails = false, isLoadingShowAll = false, isLoading = false, }) {
|
|
9380
9683
|
const [selectedEventInstanceId, setSelectedEventInstanceId] = d(null);
|
|
9381
9684
|
const handleEventSelect = (eventInstanceId) => {
|
|
9382
9685
|
setSelectedEventInstanceId(eventInstanceId);
|
|
9383
9686
|
onEventSelect(eventInstanceId);
|
|
9384
9687
|
};
|
|
9688
|
+
// Show loading skeleton
|
|
9689
|
+
if (isLoading) {
|
|
9690
|
+
return u$1(NextEventsPreviewSkeleton, { count: 3 });
|
|
9691
|
+
}
|
|
9385
9692
|
if (events.length === 0) {
|
|
9386
|
-
return (u$1("div", { style: {
|
|
9387
|
-
|
|
9388
|
-
|
|
9389
|
-
|
|
9390
|
-
|
|
9391
|
-
|
|
9693
|
+
return (u$1("div", { style: { maxWidth: "500px", margin: "0 auto", padding: "var(--bw-spacing)" }, children: u$1("div", { style: {
|
|
9694
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
9695
|
+
border: `1px solid var(--bw-border-color)`,
|
|
9696
|
+
borderRadius: "var(--bw-border-radius)",
|
|
9697
|
+
padding: "var(--bw-spacing-large)",
|
|
9698
|
+
textAlign: "center",
|
|
9699
|
+
fontFamily: "var(--bw-font-family)",
|
|
9700
|
+
minHeight: "300px",
|
|
9701
|
+
display: "flex",
|
|
9702
|
+
flexDirection: "column",
|
|
9703
|
+
alignItems: "center",
|
|
9704
|
+
justifyContent: "center",
|
|
9705
|
+
}, children: [u$1("div", { style: {
|
|
9706
|
+
width: "64px",
|
|
9707
|
+
height: "64px",
|
|
9708
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
9709
|
+
borderRadius: "50%",
|
|
9710
|
+
margin: "0 auto var(--bw-spacing)",
|
|
9711
|
+
display: "flex",
|
|
9712
|
+
alignItems: "center",
|
|
9713
|
+
justifyContent: "center",
|
|
9714
|
+
fontSize: "32px",
|
|
9715
|
+
color: "white",
|
|
9716
|
+
opacity: 0.8,
|
|
9717
|
+
}, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
|
|
9718
|
+
fontSize: "var(--bw-font-size-xl)",
|
|
9719
|
+
fontWeight: "600",
|
|
9720
|
+
color: "var(--bw-text-color)",
|
|
9721
|
+
margin: "0 0 var(--bw-spacing-small) 0",
|
|
9722
|
+
fontFamily: "var(--bw-font-family)",
|
|
9723
|
+
}, children: "Keine bevorstehenden Termine" }), u$1("p", { style: {
|
|
9724
|
+
color: "var(--bw-text-muted)",
|
|
9725
|
+
fontSize: "var(--bw-font-size)",
|
|
9726
|
+
lineHeight: "1.6",
|
|
9727
|
+
margin: "0 0 var(--bw-spacing-large) 0",
|
|
9728
|
+
fontFamily: "var(--bw-font-family)",
|
|
9729
|
+
maxWidth: "400px",
|
|
9730
|
+
}, children: "Aktuell sind keine Termine verf\u00FCgbar. Bitte schaue sp\u00E4ter noch einmal vorbei oder kontaktiere uns direkt." }), u$1("button", { onClick: () => window.location.reload(), style: {
|
|
9731
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
9732
|
+
color: "var(--bw-highlight-color)",
|
|
9733
|
+
padding: "12px 24px",
|
|
9734
|
+
border: `1px solid var(--bw-highlight-color)`,
|
|
9735
|
+
borderRadius: "var(--bw-border-radius)",
|
|
9736
|
+
fontSize: "var(--bw-font-size)",
|
|
9737
|
+
fontWeight: "600",
|
|
9738
|
+
cursor: "pointer",
|
|
9739
|
+
fontFamily: "var(--bw-font-family)",
|
|
9740
|
+
transition: "all 0.2s ease",
|
|
9741
|
+
display: "flex",
|
|
9742
|
+
alignItems: "center",
|
|
9743
|
+
gap: "8px",
|
|
9744
|
+
}, onMouseEnter: (e) => {
|
|
9745
|
+
e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
|
|
9746
|
+
e.currentTarget.style.color = "white";
|
|
9747
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
9748
|
+
}, onMouseLeave: (e) => {
|
|
9749
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
9750
|
+
e.currentTarget.style.color = "var(--bw-highlight-color)";
|
|
9751
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
9752
|
+
}, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) }));
|
|
9392
9753
|
}
|
|
9393
9754
|
return (u$1("div", { style: {
|
|
9394
9755
|
maxWidth: "500px",
|
|
@@ -9824,6 +10185,9 @@
|
|
|
9824
10185
|
const [isSuccess, setIsSuccess] = d(false);
|
|
9825
10186
|
const [successData, setSuccessData] = d(null);
|
|
9826
10187
|
const [systemConfig, setSystemConfig] = d(null);
|
|
10188
|
+
// PERFORMANCE OPTIMIZATION: Lazy component loading
|
|
10189
|
+
const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d(false);
|
|
10190
|
+
const [shouldRenderBookingForm, setShouldRenderBookingForm] = d(false);
|
|
9827
10191
|
// Determine initial step and load data
|
|
9828
10192
|
y(() => {
|
|
9829
10193
|
const initializeWidget = async () => {
|
|
@@ -9832,6 +10196,7 @@
|
|
|
9832
10196
|
// Direct instance selection (old behavior)
|
|
9833
10197
|
if (isDirectInstanceMode) {
|
|
9834
10198
|
setCurrentStep("booking");
|
|
10199
|
+
setShouldRenderBookingForm(true);
|
|
9835
10200
|
await loadEventDetails(config.eventInstanceId);
|
|
9836
10201
|
return;
|
|
9837
10202
|
}
|
|
@@ -9865,6 +10230,15 @@
|
|
|
9865
10230
|
initializeWidget();
|
|
9866
10231
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
9867
10232
|
}, [config]);
|
|
10233
|
+
// PERFORMANCE OPTIMIZATION: Lazy load components when needed
|
|
10234
|
+
y(() => {
|
|
10235
|
+
if (currentStep === "eventInstances" && !shouldRenderInstanceSelection) {
|
|
10236
|
+
setShouldRenderInstanceSelection(true);
|
|
10237
|
+
}
|
|
10238
|
+
if (currentStep === "booking" && !shouldRenderBookingForm) {
|
|
10239
|
+
setShouldRenderBookingForm(true);
|
|
10240
|
+
}
|
|
10241
|
+
}, [currentStep, shouldRenderInstanceSelection, shouldRenderBookingForm]);
|
|
9868
10242
|
const loadEventTypes = async () => {
|
|
9869
10243
|
const requestBody = {
|
|
9870
10244
|
organizationId: config.organizationId,
|
|
@@ -10025,6 +10399,7 @@
|
|
|
10025
10399
|
const handleEventTypeSelect = async (eventType) => {
|
|
10026
10400
|
setSelectedEventType(eventType);
|
|
10027
10401
|
setCurrentStep("eventInstances");
|
|
10402
|
+
setShouldRenderInstanceSelection(true);
|
|
10028
10403
|
setIsLoadingEventInstances(true);
|
|
10029
10404
|
try {
|
|
10030
10405
|
await loadEventInstances(eventType.id);
|
|
@@ -10037,6 +10412,7 @@
|
|
|
10037
10412
|
const handleEventInstanceSelect = async (eventInstance) => {
|
|
10038
10413
|
setSelectedEventInstance(eventInstance);
|
|
10039
10414
|
setCurrentStep("booking");
|
|
10415
|
+
setShouldRenderBookingForm(true);
|
|
10040
10416
|
setIsLoadingEventDetails(true);
|
|
10041
10417
|
try {
|
|
10042
10418
|
await loadEventDetails(eventInstance.id);
|
|
@@ -10050,6 +10426,7 @@
|
|
|
10050
10426
|
setCurrentStep("eventTypes");
|
|
10051
10427
|
setSelectedEventType(null);
|
|
10052
10428
|
setEventInstances([]);
|
|
10429
|
+
// Don't unmount components immediately to avoid jarring transitions
|
|
10053
10430
|
};
|
|
10054
10431
|
const handleBackToEventInstances = () => {
|
|
10055
10432
|
setCurrentStep("eventInstances");
|
|
@@ -10088,6 +10465,7 @@
|
|
|
10088
10465
|
setSelectedEventInstance(eventInstance);
|
|
10089
10466
|
}
|
|
10090
10467
|
setCurrentStep("booking");
|
|
10468
|
+
setShouldRenderBookingForm(true);
|
|
10091
10469
|
setIsLoadingEventDetails(true);
|
|
10092
10470
|
setError(null);
|
|
10093
10471
|
try {
|
|
@@ -10107,6 +10485,7 @@
|
|
|
10107
10485
|
try {
|
|
10108
10486
|
// In next-events mode, we should show the event instance selection for the single event type
|
|
10109
10487
|
if (isSingleEventTypeMode && selectedEventType) {
|
|
10488
|
+
setShouldRenderInstanceSelection(true);
|
|
10110
10489
|
setIsLoadingEventInstances(true);
|
|
10111
10490
|
await loadEventInstances(selectedEventType.id);
|
|
10112
10491
|
setCurrentStep("eventInstances");
|
|
@@ -10124,12 +10503,8 @@
|
|
|
10124
10503
|
setIsLoadingShowAll(false);
|
|
10125
10504
|
}
|
|
10126
10505
|
};
|
|
10127
|
-
//
|
|
10128
|
-
// Helper: determine skeleton count based on config
|
|
10506
|
+
// Helper: determine skeleton count based on config for EventTypeSelection
|
|
10129
10507
|
const getSkeletonCount = () => {
|
|
10130
|
-
if (config.viewMode === "next-events") {
|
|
10131
|
-
return nextEventsSettings.count || 3;
|
|
10132
|
-
}
|
|
10133
10508
|
if (config.eventTypeIds && Array.isArray(config.eventTypeIds)) {
|
|
10134
10509
|
return config.eventTypeIds.length;
|
|
10135
10510
|
}
|
|
@@ -10139,164 +10514,105 @@
|
|
|
10139
10514
|
// For categoryId or unknown, fallback to 4
|
|
10140
10515
|
return 4;
|
|
10141
10516
|
};
|
|
10142
|
-
if (isLoading) {
|
|
10143
|
-
// Create CSS styles for responsive skeleton
|
|
10144
|
-
const skeletonStyles = `
|
|
10145
|
-
@media (max-width: 600px) {
|
|
10146
|
-
.booking-skeleton-container {
|
|
10147
|
-
padding: 16px !important;
|
|
10148
|
-
}
|
|
10149
|
-
|
|
10150
|
-
.booking-skeleton-grid {
|
|
10151
|
-
gap: 16px !important;
|
|
10152
|
-
}
|
|
10153
|
-
|
|
10154
|
-
.booking-skeleton-card {
|
|
10155
|
-
min-width: 280px !important;
|
|
10156
|
-
max-width: 100% !important;
|
|
10157
|
-
flex: 1 1 280px !important;
|
|
10158
|
-
min-height: 490px !important;
|
|
10159
|
-
}
|
|
10160
|
-
|
|
10161
|
-
.booking-skeleton-image {
|
|
10162
|
-
height: 160px !important;
|
|
10163
|
-
}
|
|
10164
|
-
|
|
10165
|
-
.booking-skeleton-content {
|
|
10166
|
-
padding: 16px !important;
|
|
10167
|
-
}
|
|
10168
|
-
|
|
10169
|
-
.booking-skeleton-description {
|
|
10170
|
-
height: 80px !important;
|
|
10171
|
-
margin: 16px 0 !important;
|
|
10172
|
-
}
|
|
10173
|
-
|
|
10174
|
-
.booking-skeleton-price-section {
|
|
10175
|
-
margin-top: 16px !important;
|
|
10176
|
-
}
|
|
10177
|
-
}
|
|
10178
|
-
`;
|
|
10179
|
-
return (u$1(StyleProvider, { config: config, children: [u$1("style", { children: skeletonStyles }), u$1("div", { style: {
|
|
10180
|
-
width: "100%",
|
|
10181
|
-
maxWidth: 1600,
|
|
10182
|
-
margin: "0 auto",
|
|
10183
|
-
boxSizing: "border-box",
|
|
10184
|
-
padding: 24,
|
|
10185
|
-
}, className: "booking-skeleton-container", children: u$1("div", { style: {
|
|
10186
|
-
display: "flex",
|
|
10187
|
-
flexWrap: "wrap",
|
|
10188
|
-
justifyContent: "center",
|
|
10189
|
-
gap: "32px",
|
|
10190
|
-
width: "100%",
|
|
10191
|
-
boxSizing: "border-box",
|
|
10192
|
-
}, className: "booking-skeleton-grid", children: Array.from({ length: getSkeletonCount() }).map((_, idx) => (u$1("div", { style: {
|
|
10193
|
-
position: "relative",
|
|
10194
|
-
backgroundColor: "var(--bw-surface-color)",
|
|
10195
|
-
border: `1px solid var(--bw-border-color)`,
|
|
10196
|
-
borderRadius: "var(--bw-border-radius)",
|
|
10197
|
-
overflow: "hidden",
|
|
10198
|
-
boxShadow: "var(--bw-shadow-md)",
|
|
10199
|
-
fontFamily: "var(--bw-font-family)",
|
|
10200
|
-
minWidth: 350,
|
|
10201
|
-
maxWidth: 500,
|
|
10202
|
-
flex: "1 1 350px",
|
|
10203
|
-
display: "flex",
|
|
10204
|
-
flexDirection: "column",
|
|
10205
|
-
minHeight: 670,
|
|
10206
|
-
boxSizing: "border-box",
|
|
10207
|
-
}, className: "booking-skeleton-card", children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
|
|
10208
|
-
width: 80,
|
|
10209
|
-
height: 20,
|
|
10210
|
-
borderRadius: "var(--bw-border-radius-small)",
|
|
10211
|
-
background: "var(--bw-highlight-muted)",
|
|
10212
|
-
} }) }), u$1("div", { style: {
|
|
10213
|
-
position: "relative",
|
|
10214
|
-
width: "100%",
|
|
10215
|
-
height: "300px",
|
|
10216
|
-
background: "var(--bw-highlight-subtle)",
|
|
10217
|
-
}, className: "booking-skeleton-image" }), u$1("div", { style: { padding: "24px" }, className: "booking-skeleton-content", children: [u$1("div", { style: {
|
|
10218
|
-
width: 120,
|
|
10219
|
-
height: 16,
|
|
10220
|
-
borderRadius: 8,
|
|
10221
|
-
background: "var(--bw-highlight-muted)",
|
|
10222
|
-
marginBottom: 8,
|
|
10223
|
-
} }), u$1("div", { style: {
|
|
10224
|
-
width: "70%",
|
|
10225
|
-
height: 28,
|
|
10226
|
-
borderRadius: 8,
|
|
10227
|
-
background: "var(--bw-text-subtle)",
|
|
10228
|
-
marginBottom: 12,
|
|
10229
|
-
} }), u$1("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [u$1("div", { style: {
|
|
10230
|
-
width: 16,
|
|
10231
|
-
height: 16,
|
|
10232
|
-
borderRadius: 8,
|
|
10233
|
-
background: "var(--bw-text-subtle)",
|
|
10234
|
-
} }), u$1("div", { style: {
|
|
10235
|
-
width: 60,
|
|
10236
|
-
height: 14,
|
|
10237
|
-
borderRadius: 6,
|
|
10238
|
-
background: "var(--bw-text-subtle)",
|
|
10239
|
-
} })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [u$1("div", { style: {
|
|
10240
|
-
width: 16,
|
|
10241
|
-
height: 16,
|
|
10242
|
-
borderRadius: 8,
|
|
10243
|
-
background: "var(--bw-text-subtle)",
|
|
10244
|
-
} }), u$1("div", { style: {
|
|
10245
|
-
width: 120,
|
|
10246
|
-
height: 14,
|
|
10247
|
-
borderRadius: 6,
|
|
10248
|
-
background: "var(--bw-text-subtle)",
|
|
10249
|
-
} })] }), u$1("div", { style: {
|
|
10250
|
-
width: "100%",
|
|
10251
|
-
height: "128px",
|
|
10252
|
-
borderRadius: 8,
|
|
10253
|
-
background: "var(--bw-text-muted)",
|
|
10254
|
-
margin: "20px 0",
|
|
10255
|
-
}, className: "booking-skeleton-description" }), u$1("div", { style: {
|
|
10256
|
-
display: "flex",
|
|
10257
|
-
justifyContent: "space-between",
|
|
10258
|
-
alignItems: "center",
|
|
10259
|
-
marginTop: 20,
|
|
10260
|
-
}, className: "booking-skeleton-price-section", children: [u$1("div", { style: {
|
|
10261
|
-
width: 80,
|
|
10262
|
-
height: "35px",
|
|
10263
|
-
borderRadius: 8,
|
|
10264
|
-
background: "var(--bw-text-subtle)",
|
|
10265
|
-
} }), u$1("div", { style: {
|
|
10266
|
-
width: 120,
|
|
10267
|
-
height: 40,
|
|
10268
|
-
borderRadius: "var(--bw-border-radius)",
|
|
10269
|
-
background: "var(--bw-highlight-muted)",
|
|
10270
|
-
} })] })] })] }, idx))) }) })] }));
|
|
10271
|
-
}
|
|
10272
10517
|
// Error state
|
|
10273
10518
|
if (error) {
|
|
10274
|
-
return (u$1(StyleProvider, { config: config, children: u$1("div", {
|
|
10275
|
-
backgroundColor: "var(--bw-
|
|
10276
|
-
|
|
10519
|
+
return (u$1(StyleProvider, { config: config, children: u$1("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: u$1("div", { style: {
|
|
10520
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
10521
|
+
border: `1px solid var(--bw-error-color)`,
|
|
10277
10522
|
borderRadius: "var(--bw-border-radius)",
|
|
10278
|
-
|
|
10279
|
-
|
|
10280
|
-
|
|
10281
|
-
|
|
10523
|
+
padding: "var(--bw-spacing-large)",
|
|
10524
|
+
textAlign: "center",
|
|
10525
|
+
fontFamily: "var(--bw-font-family)",
|
|
10526
|
+
}, children: [u$1("div", { style: {
|
|
10527
|
+
width: "64px",
|
|
10528
|
+
height: "64px",
|
|
10529
|
+
backgroundColor: "var(--bw-error-color)",
|
|
10530
|
+
borderRadius: "50%",
|
|
10531
|
+
margin: "0 auto var(--bw-spacing)",
|
|
10532
|
+
display: "flex",
|
|
10533
|
+
alignItems: "center",
|
|
10534
|
+
justifyContent: "center",
|
|
10535
|
+
fontSize: "32px",
|
|
10536
|
+
color: "white",
|
|
10537
|
+
}, children: "\u26A0\uFE0F" }), u$1("h2", { style: {
|
|
10538
|
+
fontSize: "var(--bw-font-size-xl)",
|
|
10282
10539
|
fontWeight: "600",
|
|
10283
|
-
fontFamily: "var(--bw-font-family)",
|
|
10284
|
-
}, children: "Fehler" }), u$1("p", { style: {
|
|
10285
10540
|
color: "var(--bw-text-color)",
|
|
10541
|
+
margin: "0 0 var(--bw-spacing-small) 0",
|
|
10286
10542
|
fontFamily: "var(--bw-font-family)",
|
|
10287
|
-
}, children:
|
|
10543
|
+
}, children: "Buchungen vor\u00FCbergehend nicht verf\u00FCgbar" }), u$1("p", { style: {
|
|
10544
|
+
color: "var(--bw-text-muted)",
|
|
10545
|
+
fontSize: "var(--bw-font-size)",
|
|
10546
|
+
lineHeight: "1.6",
|
|
10547
|
+
margin: "0 0 var(--bw-spacing-large) 0",
|
|
10548
|
+
fontFamily: "var(--bw-font-family)",
|
|
10549
|
+
}, children: "Es gab ein Problem beim Laden der verf\u00FCgbaren Termine. Bitte versuche es in einem Moment erneut." }), u$1("details", { style: {
|
|
10550
|
+
marginBottom: "var(--bw-spacing-large)",
|
|
10551
|
+
textAlign: "left",
|
|
10552
|
+
backgroundColor: "var(--bw-background-color)",
|
|
10553
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
10554
|
+
padding: "5px",
|
|
10555
|
+
border: `1px solid var(--bw-border-color)`,
|
|
10556
|
+
}, children: [u$1("summary", { style: {
|
|
10557
|
+
cursor: "pointer",
|
|
10558
|
+
fontWeight: "500",
|
|
10559
|
+
color: "var(--bw-text-muted)",
|
|
10560
|
+
fontSize: "var(--bw-font-size-small)",
|
|
10561
|
+
fontFamily: "var(--bw-font-family)",
|
|
10562
|
+
marginBottom: "var(--bw-spacing-small)",
|
|
10563
|
+
}, children: "Technische Details anzeigen" }), u$1("code", { style: {
|
|
10564
|
+
display: "block",
|
|
10565
|
+
fontSize: "var(--bw-font-size-small)",
|
|
10566
|
+
color: "var(--bw-text-muted)",
|
|
10567
|
+
fontFamily: "monospace",
|
|
10568
|
+
wordBreak: "break-word",
|
|
10569
|
+
whiteSpace: "pre-wrap",
|
|
10570
|
+
}, children: error })] }), u$1("div", { style: {
|
|
10571
|
+
display: "flex",
|
|
10572
|
+
gap: "var(--bw-spacing)",
|
|
10573
|
+
justifyContent: "center",
|
|
10574
|
+
flexWrap: "wrap",
|
|
10575
|
+
}, children: u$1("button", { onClick: () => window.location.reload(), style: {
|
|
10576
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
10577
|
+
color: "white",
|
|
10578
|
+
padding: "12px 24px",
|
|
10579
|
+
border: "none",
|
|
10580
|
+
borderRadius: "var(--bw-border-radius)",
|
|
10581
|
+
fontSize: "var(--bw-font-size)",
|
|
10582
|
+
fontWeight: "600",
|
|
10583
|
+
cursor: "pointer",
|
|
10584
|
+
fontFamily: "var(--bw-font-family)",
|
|
10585
|
+
transition: "all 0.2s ease",
|
|
10586
|
+
display: "flex",
|
|
10587
|
+
alignItems: "center",
|
|
10588
|
+
gap: "8px",
|
|
10589
|
+
}, onMouseEnter: (e) => {
|
|
10590
|
+
e.currentTarget.style.opacity = "0.9";
|
|
10591
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
10592
|
+
}, onMouseLeave: (e) => {
|
|
10593
|
+
e.currentTarget.style.opacity = "1";
|
|
10594
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
10595
|
+
}, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] }) }), u$1("p", { style: {
|
|
10596
|
+
color: "var(--bw-text-muted)",
|
|
10597
|
+
fontSize: "var(--bw-font-size-small)",
|
|
10598
|
+
margin: "var(--bw-spacing-large) 0 0 0",
|
|
10599
|
+
fontFamily: "var(--bw-font-family)",
|
|
10600
|
+
}, children: "Falls das Problem weiterhin besteht, kontaktiere bitte den Support." })] }) }) }));
|
|
10288
10601
|
}
|
|
10289
10602
|
// Success state
|
|
10290
10603
|
if (isSuccess) {
|
|
10291
10604
|
return (u$1(StyleProvider, { config: config, children: u$1(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
|
|
10292
10605
|
setIsSuccess(false);
|
|
10293
10606
|
setCurrentStep("eventTypes");
|
|
10607
|
+
// Reset lazy loading flags
|
|
10608
|
+
setShouldRenderInstanceSelection(false);
|
|
10609
|
+
setShouldRenderBookingForm(false);
|
|
10294
10610
|
}, bookingData: successData, eventDetails: eventDetails, formData: successData.formData, config: config }) }));
|
|
10295
10611
|
}
|
|
10296
10612
|
// Main view based on view mode
|
|
10297
10613
|
if (viewMode === "next-events" && showingPreview) {
|
|
10298
10614
|
// Next events preview mode
|
|
10299
|
-
return (u$1(StyleProvider, { config: config, children: [u$1(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll }), eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
|
|
10615
|
+
return (u$1(StyleProvider, { config: config, children: [u$1(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (u$1(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
|
|
10300
10616
|
setCurrentStep("eventTypes");
|
|
10301
10617
|
setShowingPreview(true);
|
|
10302
10618
|
setEventDetails(null);
|
|
@@ -10312,13 +10628,13 @@
|
|
|
10312
10628
|
}
|
|
10313
10629
|
if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
|
|
10314
10630
|
// Show all events for the single event type
|
|
10315
|
-
return (u$1(StyleProvider, { config: config, children: u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
|
|
10631
|
+
return (u$1(StyleProvider, { config: config, children: shouldRenderInstanceSelection && (u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
|
|
10316
10632
|
setShowingPreview(true);
|
|
10317
10633
|
setCurrentStep("eventTypes");
|
|
10318
10634
|
}, isOpen: currentStep === "eventInstances", onClose: () => {
|
|
10319
10635
|
setShowingPreview(true);
|
|
10320
10636
|
setCurrentStep("eventTypes");
|
|
10321
|
-
}, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails }) }));
|
|
10637
|
+
}, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })) }));
|
|
10322
10638
|
}
|
|
10323
10639
|
if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
|
|
10324
10640
|
// Button mode - show button that opens sidebar/booking directly
|
|
@@ -10338,11 +10654,20 @@
|
|
|
10338
10654
|
fontFamily: "var(--bw-font-family)",
|
|
10339
10655
|
boxShadow: "var(--bw-shadow-md)",
|
|
10340
10656
|
cursor: "pointer",
|
|
10341
|
-
}, onClick: () =>
|
|
10342
|
-
(isDirectInstanceMode
|
|
10657
|
+
}, onClick: () => {
|
|
10658
|
+
if (isDirectInstanceMode) {
|
|
10659
|
+
setCurrentStep("booking");
|
|
10660
|
+
setShouldRenderBookingForm(true);
|
|
10661
|
+
}
|
|
10662
|
+
else {
|
|
10663
|
+
setSidebarOpen(true);
|
|
10664
|
+
setShouldRenderInstanceSelection(true);
|
|
10665
|
+
}
|
|
10666
|
+
}, children: config.buttonText ||
|
|
10667
|
+
(isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), shouldRenderInstanceSelection && (u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$1(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 }))] }) }));
|
|
10343
10668
|
}
|
|
10344
10669
|
// Cards mode (default) - show event type selection
|
|
10345
|
-
const cardsView = (u$1(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect }));
|
|
10670
|
+
const cardsView = (u$1(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
|
|
10346
10671
|
// Determine the correct back handlers based on view mode
|
|
10347
10672
|
const getBackHandlers = () => {
|
|
10348
10673
|
if (viewMode === "next-events") {
|
|
@@ -10372,7 +10697,7 @@
|
|
|
10372
10697
|
};
|
|
10373
10698
|
};
|
|
10374
10699
|
const backHandlers = getBackHandlers();
|
|
10375
|
-
return (u$1(StyleProvider, { config: config, children: [cardsView, u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails }), eventDetails && (u$1(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 }))] }));
|
|
10700
|
+
return (u$1(StyleProvider, { config: config, children: [cardsView, shouldRenderInstanceSelection && (u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$1(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 }))] }));
|
|
10376
10701
|
}
|
|
10377
10702
|
|
|
10378
10703
|
// Export init function for vanilla JS usage with Preact
|