@bigz-app/booking-widget 0.1.13 → 0.1.15
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 +385 -99
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/EventTypeDetailsDialog.d.ts +28 -0
- package/dist/components/EventTypeDetailsDialog.d.ts.map +1 -0
- package/dist/components/EventTypeSelection.d.ts +1 -0
- package/dist/components/EventTypeSelection.d.ts.map +1 -1
- package/dist/components/UniversalBookingWidget.d.ts +1 -0
- package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
- package/dist/index.cjs +385 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +385 -99
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -6441,6 +6441,279 @@ ZodPromise.create;
|
|
|
6441
6441
|
ZodOptional.create;
|
|
6442
6442
|
ZodNullable.create;
|
|
6443
6443
|
|
|
6444
|
+
// Simple markdown to HTML converter with better list handling
|
|
6445
|
+
function convertMarkdownToHtml(markdown) {
|
|
6446
|
+
if (!markdown)
|
|
6447
|
+
return "";
|
|
6448
|
+
let html = markdown;
|
|
6449
|
+
// Process line by line to handle lists properly
|
|
6450
|
+
const lines = html.split("\n");
|
|
6451
|
+
const processedLines = [];
|
|
6452
|
+
let inUlList = false;
|
|
6453
|
+
let inOlList = false;
|
|
6454
|
+
for (let i = 0; i < lines.length; i++) {
|
|
6455
|
+
const line = lines[i];
|
|
6456
|
+
const trimmedLine = line.trim();
|
|
6457
|
+
// Handle unordered lists
|
|
6458
|
+
if (trimmedLine.startsWith("* ")) {
|
|
6459
|
+
if (!inUlList) {
|
|
6460
|
+
processedLines.push("<ul>");
|
|
6461
|
+
inUlList = true;
|
|
6462
|
+
}
|
|
6463
|
+
processedLines.push(`<li>${trimmedLine.substring(2)}</li>`);
|
|
6464
|
+
}
|
|
6465
|
+
// Handle ordered lists
|
|
6466
|
+
else if (/^\d+\.\s/.test(trimmedLine)) {
|
|
6467
|
+
if (!inOlList) {
|
|
6468
|
+
processedLines.push("<ol>");
|
|
6469
|
+
inOlList = true;
|
|
6470
|
+
}
|
|
6471
|
+
processedLines.push(`<li>${trimmedLine.replace(/^\d+\.\s/, "")}</li>`);
|
|
6472
|
+
}
|
|
6473
|
+
// Not a list item
|
|
6474
|
+
else {
|
|
6475
|
+
// Close any open lists
|
|
6476
|
+
if (inUlList) {
|
|
6477
|
+
processedLines.push("</ul>");
|
|
6478
|
+
inUlList = false;
|
|
6479
|
+
}
|
|
6480
|
+
if (inOlList) {
|
|
6481
|
+
processedLines.push("</ol>");
|
|
6482
|
+
inOlList = false;
|
|
6483
|
+
}
|
|
6484
|
+
// Process other markdown
|
|
6485
|
+
if (trimmedLine) {
|
|
6486
|
+
processedLines.push(line);
|
|
6487
|
+
}
|
|
6488
|
+
else {
|
|
6489
|
+
processedLines.push("");
|
|
6490
|
+
}
|
|
6491
|
+
}
|
|
6492
|
+
}
|
|
6493
|
+
// Close any remaining open lists
|
|
6494
|
+
if (inUlList)
|
|
6495
|
+
processedLines.push("</ul>");
|
|
6496
|
+
if (inOlList)
|
|
6497
|
+
processedLines.push("</ol>");
|
|
6498
|
+
html = processedLines.join("\n");
|
|
6499
|
+
// Apply other markdown formatting
|
|
6500
|
+
return (html
|
|
6501
|
+
// Headers
|
|
6502
|
+
.replace(/^### (.*$)/gm, "<h3>$1</h3>")
|
|
6503
|
+
.replace(/^## (.*$)/gm, "<h2>$1</h2>")
|
|
6504
|
+
.replace(/^# (.*$)/gm, "<h1>$1</h1>")
|
|
6505
|
+
// Bold
|
|
6506
|
+
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
|
6507
|
+
// Italic
|
|
6508
|
+
.replace(/\*(.*?)\*/g, "<em>$1</em>")
|
|
6509
|
+
// Underline
|
|
6510
|
+
.replace(/__(.*?)__/g, "<u>$1</u>")
|
|
6511
|
+
// Links
|
|
6512
|
+
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
|
|
6513
|
+
// Blockquotes
|
|
6514
|
+
.replace(/^> (.*$)/gm, "<blockquote>$1</blockquote>")
|
|
6515
|
+
// Paragraphs (but not for lines that are already HTML tags)
|
|
6516
|
+
.replace(/^(?!<[^>]+>)(.+)$/gm, "<p>$1</p>")
|
|
6517
|
+
// Clean up empty paragraphs
|
|
6518
|
+
.replace(/<p>\s*<\/p>/g, "")
|
|
6519
|
+
// Line breaks within paragraphs
|
|
6520
|
+
.replace(/\n(?!<)/g, "<br>"));
|
|
6521
|
+
}
|
|
6522
|
+
const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
6523
|
+
const IconWave$1 = ({ size = 20, color = "#0ea5e9" }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsx("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsx("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6524
|
+
function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
|
|
6525
|
+
if (!isOpen || !eventType)
|
|
6526
|
+
return null;
|
|
6527
|
+
const isAvailable = eventType.hasAvailableInstances;
|
|
6528
|
+
// Memoize the complete HTML including styles to prevent DOM updates
|
|
6529
|
+
const descriptionHtml = React__default__default.useMemo(() => {
|
|
6530
|
+
if (!eventType.description)
|
|
6531
|
+
return "";
|
|
6532
|
+
const convertedMarkdown = convertMarkdownToHtml(eventType.description);
|
|
6533
|
+
// Return complete HTML with styles to prevent recreation on each render
|
|
6534
|
+
return `<style>
|
|
6535
|
+
.event-description p { margin: 0 0 12px 0; }
|
|
6536
|
+
.event-description p:last-child { margin-bottom: 0; }
|
|
6537
|
+
.event-description strong { font-weight: 600; color: var(--bw-text-color); }
|
|
6538
|
+
.event-description em { font-style: italic; }
|
|
6539
|
+
.event-description u { text-decoration: underline; }
|
|
6540
|
+
.event-description ul, .event-description ol {
|
|
6541
|
+
margin: 12px 0;
|
|
6542
|
+
padding-left: 20px;
|
|
6543
|
+
list-style-type: disc;
|
|
6544
|
+
}
|
|
6545
|
+
.event-description ol { list-style-type: decimal; }
|
|
6546
|
+
.event-description li { margin-bottom: 4px; display: list-item; }
|
|
6547
|
+
.event-description blockquote {
|
|
6548
|
+
margin: 12px 0;
|
|
6549
|
+
padding-left: 16px;
|
|
6550
|
+
border-left: 3px solid var(--bw-border-color);
|
|
6551
|
+
font-style: italic;
|
|
6552
|
+
}
|
|
6553
|
+
.event-description a {
|
|
6554
|
+
color: var(--bw-highlight-color);
|
|
6555
|
+
text-decoration: underline;
|
|
6556
|
+
}
|
|
6557
|
+
.event-description h1, .event-description h2, .event-description h3 {
|
|
6558
|
+
color: var(--bw-text-color);
|
|
6559
|
+
font-weight: 600;
|
|
6560
|
+
margin: 16px 0 8px 0;
|
|
6561
|
+
}
|
|
6562
|
+
.event-description h1 { font-size: 20px; }
|
|
6563
|
+
.event-description h2 { font-size: 18px; }
|
|
6564
|
+
.event-description h3 { font-size: 16px; }
|
|
6565
|
+
</style><div class="event-description">${convertedMarkdown}</div>`;
|
|
6566
|
+
}, [eventType.description]);
|
|
6567
|
+
const handleBookingClick = () => {
|
|
6568
|
+
onEventTypeSelect(eventType);
|
|
6569
|
+
onClose();
|
|
6570
|
+
};
|
|
6571
|
+
return (jsx("div", { style: {
|
|
6572
|
+
position: "fixed",
|
|
6573
|
+
top: 0,
|
|
6574
|
+
left: 0,
|
|
6575
|
+
right: 0,
|
|
6576
|
+
bottom: 0,
|
|
6577
|
+
zIndex: 10000,
|
|
6578
|
+
display: "flex",
|
|
6579
|
+
alignItems: "center",
|
|
6580
|
+
justifyContent: "center",
|
|
6581
|
+
padding: "var(--bw-spacing)",
|
|
6582
|
+
}, onClick: onClose, children: jsxs("div", { style: {
|
|
6583
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6584
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6585
|
+
maxWidth: "700px",
|
|
6586
|
+
width: "100%",
|
|
6587
|
+
maxHeight: "90vh",
|
|
6588
|
+
overflow: "auto",
|
|
6589
|
+
position: "relative",
|
|
6590
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6591
|
+
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
6592
|
+
fontFamily: "var(--bw-font-family)",
|
|
6593
|
+
}, onClick: (e) => e.stopPropagation(), children: [jsx("button", { onClick: onClose, style: {
|
|
6594
|
+
position: "absolute",
|
|
6595
|
+
top: "var(--bw-spacing)",
|
|
6596
|
+
right: "var(--bw-spacing)",
|
|
6597
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6598
|
+
border: "1px solid var(--bw-border-color)",
|
|
6599
|
+
fontSize: "24px",
|
|
6600
|
+
cursor: "pointer",
|
|
6601
|
+
color: "var(--bw-text-muted)",
|
|
6602
|
+
width: "32px",
|
|
6603
|
+
height: "32px",
|
|
6604
|
+
display: "flex",
|
|
6605
|
+
alignItems: "center",
|
|
6606
|
+
justifyContent: "center",
|
|
6607
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6608
|
+
zIndex: 10,
|
|
6609
|
+
}, onMouseEnter: (e) => {
|
|
6610
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
6611
|
+
}, onMouseLeave: (e) => {
|
|
6612
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
6613
|
+
}, children: "\u00D7" }), jsxs("div", { style: { padding: "var(--bw-spacing-large)" }, children: [jsxs("div", { style: {
|
|
6614
|
+
marginBottom: "24px",
|
|
6615
|
+
padding: "16px",
|
|
6616
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6617
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6618
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6619
|
+
}, children: [jsxs("div", { children: [jsx("div", { style: {
|
|
6620
|
+
fontSize: "14px",
|
|
6621
|
+
fontWeight: "600",
|
|
6622
|
+
color: "var(--bw-highlight-color)",
|
|
6623
|
+
marginBottom: "8px",
|
|
6624
|
+
fontFamily: "var(--bw-font-family)",
|
|
6625
|
+
}, children: eventType.category.name }), jsx("h2", { style: {
|
|
6626
|
+
fontSize: "28px",
|
|
6627
|
+
fontWeight: "700",
|
|
6628
|
+
color: "var(--bw-text-color)",
|
|
6629
|
+
marginBottom: "16px",
|
|
6630
|
+
lineHeight: "1.3",
|
|
6631
|
+
fontFamily: "var(--bw-font-family)",
|
|
6632
|
+
margin: "0 0 16px 0",
|
|
6633
|
+
}, children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: jsx("div", { style: { marginBottom: "24px" }, children: jsx("ul", { style: {
|
|
6634
|
+
listStyle: "none",
|
|
6635
|
+
padding: "0",
|
|
6636
|
+
margin: "0",
|
|
6637
|
+
display: "flex",
|
|
6638
|
+
flexDirection: "column",
|
|
6639
|
+
gap: "3px",
|
|
6640
|
+
}, children: eventType.highlights
|
|
6641
|
+
.filter((highlight) => highlight.trim())
|
|
6642
|
+
.map((highlight, index) => (jsxs("li", { style: {
|
|
6643
|
+
display: "flex",
|
|
6644
|
+
alignItems: "flex-start",
|
|
6645
|
+
gap: "10px",
|
|
6646
|
+
fontFamily: "var(--bw-font-family)",
|
|
6647
|
+
fontSize: "16px",
|
|
6648
|
+
lineHeight: "1.6",
|
|
6649
|
+
color: "var(--bw-text-color)",
|
|
6650
|
+
}, children: [jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsx(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), jsx("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (jsx("div", { style: {
|
|
6651
|
+
marginBottom: "24px",
|
|
6652
|
+
color: "var(--bw-text-muted)",
|
|
6653
|
+
fontSize: "16px",
|
|
6654
|
+
lineHeight: "1.6",
|
|
6655
|
+
fontFamily: "var(--bw-font-family)",
|
|
6656
|
+
padding: "0px 20px",
|
|
6657
|
+
}, dangerouslySetInnerHTML: { __html: descriptionHtml } })), jsxs("div", { style: {
|
|
6658
|
+
display: "flex",
|
|
6659
|
+
justifyContent: "space-between",
|
|
6660
|
+
alignItems: "center",
|
|
6661
|
+
marginTop: "32px",
|
|
6662
|
+
padding: "20px",
|
|
6663
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6664
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6665
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6666
|
+
}, children: [jsxs("div", { children: [jsx("div", { style: {
|
|
6667
|
+
fontSize: "14px",
|
|
6668
|
+
color: "var(--bw-text-muted)",
|
|
6669
|
+
fontFamily: "var(--bw-font-family)",
|
|
6670
|
+
marginBottom: "4px",
|
|
6671
|
+
}, children: "Preis ab" }), jsx("div", { style: {
|
|
6672
|
+
fontSize: "32px",
|
|
6673
|
+
fontWeight: "700",
|
|
6674
|
+
color: "var(--bw-text-color)",
|
|
6675
|
+
fontFamily: "var(--bw-font-family)",
|
|
6676
|
+
}, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (jsxs("button", { onClick: handleBookingClick, style: {
|
|
6677
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6678
|
+
color: "white",
|
|
6679
|
+
padding: "14px 28px",
|
|
6680
|
+
border: "none",
|
|
6681
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6682
|
+
fontSize: "16px",
|
|
6683
|
+
fontWeight: "600",
|
|
6684
|
+
fontFamily: "var(--bw-font-family)",
|
|
6685
|
+
display: "flex",
|
|
6686
|
+
alignItems: "center",
|
|
6687
|
+
gap: "8px",
|
|
6688
|
+
cursor: "pointer",
|
|
6689
|
+
transition: "all 0.2s ease",
|
|
6690
|
+
}, onMouseEnter: (e) => {
|
|
6691
|
+
e.currentTarget.style.opacity = "0.9";
|
|
6692
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
6693
|
+
}, onMouseLeave: (e) => {
|
|
6694
|
+
e.currentTarget.style.opacity = "1";
|
|
6695
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
6696
|
+
}, children: [jsx(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (jsx("div", { style: {
|
|
6697
|
+
position: "absolute",
|
|
6698
|
+
inset: 0,
|
|
6699
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
6700
|
+
backdropFilter: "blur(2px)",
|
|
6701
|
+
display: "flex",
|
|
6702
|
+
alignItems: "center",
|
|
6703
|
+
justifyContent: "center",
|
|
6704
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6705
|
+
}, children: jsx("div", { style: {
|
|
6706
|
+
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
6707
|
+
padding: "16px 32px",
|
|
6708
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6709
|
+
color: "var(--bw-text-color)",
|
|
6710
|
+
fontWeight: "600",
|
|
6711
|
+
fontSize: "18px",
|
|
6712
|
+
fontFamily: "var(--bw-font-family)",
|
|
6713
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6714
|
+
}, children: "Ausgebucht" }) }))] }) }));
|
|
6715
|
+
}
|
|
6716
|
+
|
|
6444
6717
|
// Carousel navigation icons
|
|
6445
6718
|
const IconChevronLeft = ({ size = 20, color = "white" }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "15 18 9 12 15 6" }) }));
|
|
6446
6719
|
const IconChevronRight = ({ size = 20, color = "white" }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "9 18 15 12 9 6" }) }));
|
|
@@ -6619,6 +6892,7 @@ const ImageCarousel = ({ images, eventName }) => {
|
|
|
6619
6892
|
// Custom minimal SVG icons (Lucide-style)
|
|
6620
6893
|
const IconClock = ({ size = 16, color = "#10b981" }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12 6 12 12 16 14" })] }));
|
|
6621
6894
|
const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
|
|
6895
|
+
const IconCheck = ({ size = 16, color = "#10b981" }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
6622
6896
|
// Wave icon for booking action
|
|
6623
6897
|
const IconWave = ({ size = 20, color = "#0ea5e9" }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsx("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsx("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6624
6898
|
// Loading skeleton component that matches the actual design
|
|
@@ -6740,13 +7014,23 @@ const EventTypeSelectionSkeleton = ({ count = 4 }) => (jsxs(Fragment, { children
|
|
|
6740
7014
|
height: "14px",
|
|
6741
7015
|
backgroundColor: "var(--bw-border-color)",
|
|
6742
7016
|
borderRadius: "4px",
|
|
6743
|
-
} })] })] }), jsx("div", { className: "bw-skeleton-desc bw-event-type-
|
|
6744
|
-
|
|
6745
|
-
|
|
6746
|
-
|
|
6747
|
-
borderRadius: "4px",
|
|
7017
|
+
} })] })] }), jsx("div", { className: "bw-skeleton-desc bw-event-type-highlights", style: { marginBottom: "20px", minHeight: "128px" }, children: Array.from({ length: 4 }).map((_, lineIdx) => (jsxs("div", { style: {
|
|
7018
|
+
display: "flex",
|
|
7019
|
+
alignItems: "center",
|
|
7020
|
+
gap: "8px",
|
|
6748
7021
|
marginBottom: "8px",
|
|
6749
|
-
}
|
|
7022
|
+
}, children: [jsx("div", { style: {
|
|
7023
|
+
width: "14px",
|
|
7024
|
+
height: "14px",
|
|
7025
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7026
|
+
borderRadius: "50%",
|
|
7027
|
+
flexShrink: 0,
|
|
7028
|
+
} }), jsx("div", { style: {
|
|
7029
|
+
width: lineIdx === 3 ? "60%" : "85%",
|
|
7030
|
+
height: "16px",
|
|
7031
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7032
|
+
borderRadius: "4px",
|
|
7033
|
+
} })] }, lineIdx))) }), jsxs("div", { style: {
|
|
6750
7034
|
display: "flex",
|
|
6751
7035
|
justifyContent: "space-between",
|
|
6752
7036
|
alignItems: "center",
|
|
@@ -6767,59 +7051,18 @@ const EventTypeSelectionSkeleton = ({ count = 4 }) => (jsxs(Fragment, { children
|
|
|
6767
7051
|
justifyContent: "center",
|
|
6768
7052
|
} })] })] })] }, idx))) }) })] }));
|
|
6769
7053
|
function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false, skeletonCount = 4, }) {
|
|
6770
|
-
// State
|
|
6771
|
-
const [
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
|
|
6775
|
-
|
|
6776
|
-
|
|
6777
|
-
setExpandedDescriptions((prev) => {
|
|
6778
|
-
const newSet = new Set(prev);
|
|
6779
|
-
if (newSet.has(eventTypeId)) {
|
|
6780
|
-
newSet.delete(eventTypeId);
|
|
6781
|
-
}
|
|
6782
|
-
else {
|
|
6783
|
-
newSet.add(eventTypeId);
|
|
6784
|
-
}
|
|
6785
|
-
return newSet;
|
|
6786
|
-
});
|
|
6787
|
-
};
|
|
6788
|
-
// Check if text is truncated by comparing scroll height with client height
|
|
6789
|
-
const checkTruncation = () => {
|
|
6790
|
-
const newTruncated = new Set();
|
|
6791
|
-
descriptionRefs.current.forEach((element, eventTypeId) => {
|
|
6792
|
-
if (element && !expandedDescriptions.has(eventTypeId)) {
|
|
6793
|
-
// Add a small tolerance for rounding differences
|
|
6794
|
-
if (element.scrollHeight > element.clientHeight + 2) {
|
|
6795
|
-
newTruncated.add(eventTypeId);
|
|
6796
|
-
}
|
|
6797
|
-
}
|
|
6798
|
-
});
|
|
6799
|
-
setTruncatedDescriptions(newTruncated);
|
|
7054
|
+
// State for details dialog
|
|
7055
|
+
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
|
7056
|
+
const [selectedEventTypeForDetails, setSelectedEventTypeForDetails] = useState(null);
|
|
7057
|
+
// Handle opening details dialog
|
|
7058
|
+
const handleShowDetails = (eventType) => {
|
|
7059
|
+
setSelectedEventTypeForDetails(eventType);
|
|
7060
|
+
setDetailsDialogOpen(true);
|
|
6800
7061
|
};
|
|
6801
|
-
//
|
|
6802
|
-
|
|
6803
|
-
|
|
6804
|
-
|
|
6805
|
-
setTimeout(checkTruncation, 100);
|
|
6806
|
-
};
|
|
6807
|
-
window.addEventListener("resize", handleResize);
|
|
6808
|
-
return () => {
|
|
6809
|
-
clearTimeout(timeoutId);
|
|
6810
|
-
window.removeEventListener("resize", handleResize);
|
|
6811
|
-
};
|
|
6812
|
-
}, [eventTypes, expandedDescriptions]);
|
|
6813
|
-
// Set ref for description element
|
|
6814
|
-
const setDescriptionRef = (eventTypeId) => (element) => {
|
|
6815
|
-
if (element) {
|
|
6816
|
-
descriptionRefs.current.set(eventTypeId, element);
|
|
6817
|
-
// Check truncation when ref is set
|
|
6818
|
-
setTimeout(checkTruncation, 50);
|
|
6819
|
-
}
|
|
6820
|
-
else {
|
|
6821
|
-
descriptionRefs.current.delete(eventTypeId);
|
|
6822
|
-
}
|
|
7062
|
+
// Handle closing details dialog
|
|
7063
|
+
const handleCloseDetails = () => {
|
|
7064
|
+
setDetailsDialogOpen(false);
|
|
7065
|
+
setSelectedEventTypeForDetails(null);
|
|
6823
7066
|
};
|
|
6824
7067
|
// Show loading skeleton
|
|
6825
7068
|
if (isLoading) {
|
|
@@ -6969,56 +7212,92 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
|
|
|
6969
7212
|
lineHeight: "1.3",
|
|
6970
7213
|
fontFamily: "var(--bw-font-family)",
|
|
6971
7214
|
margin: "0 0 12px 0",
|
|
6972
|
-
}, children: eventType.name }), jsxs("div", { style: {
|
|
6973
|
-
|
|
6974
|
-
|
|
6975
|
-
|
|
6976
|
-
|
|
7215
|
+
}, children: eventType.name }), jsxs("div", { style: {
|
|
7216
|
+
display: "flex",
|
|
7217
|
+
alignItems: "center",
|
|
7218
|
+
gap: "6px",
|
|
7219
|
+
marginLeft: "10px",
|
|
7220
|
+
}, children: [jsx(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), jsx("span", { style: {
|
|
6977
7221
|
fontFamily: "var(--bw-font-family)",
|
|
6978
7222
|
fontSize: "14px",
|
|
6979
7223
|
color: "var(--bw-text-muted)",
|
|
6980
7224
|
}, children: eventType.nextAvailableDate
|
|
6981
7225
|
? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
|
|
6982
|
-
: "Keine Termine frei" })] }),
|
|
7226
|
+
: "Keine Termine frei" })] }), jsx("div", { style: { marginLeft: "10px", cursor: "pointer" }, onClick: (e) => {
|
|
7227
|
+
e.stopPropagation();
|
|
7228
|
+
handleShowDetails(eventType);
|
|
7229
|
+
}, children: eventType.highlights && eventType.highlights.length > 0 ? (
|
|
7230
|
+
// Show highlights as list
|
|
7231
|
+
jsx("div", { className: "bw-event-type-highlights", style: {
|
|
7232
|
+
margin: "10px 0px 10px 0px",
|
|
7233
|
+
minHeight: "128px",
|
|
7234
|
+
display: "-webkit-box",
|
|
7235
|
+
WebkitLineClamp: 5,
|
|
7236
|
+
WebkitBoxOrient: "vertical",
|
|
7237
|
+
overflow: "hidden",
|
|
7238
|
+
textOverflow: "ellipsis",
|
|
7239
|
+
}, children: jsx("ul", { style: {
|
|
7240
|
+
listStyle: "none",
|
|
7241
|
+
padding: "0",
|
|
7242
|
+
margin: "0",
|
|
7243
|
+
display: "flex",
|
|
7244
|
+
flexDirection: "column",
|
|
7245
|
+
gap: "3px",
|
|
7246
|
+
}, children: eventType.highlights
|
|
7247
|
+
.filter((highlight) => highlight.trim())
|
|
7248
|
+
.map((highlight, index) => (jsxs("li", { style: {
|
|
7249
|
+
display: "flex",
|
|
7250
|
+
alignItems: "flex-start",
|
|
7251
|
+
gap: "8px",
|
|
7252
|
+
fontFamily: "var(--bw-font-family)",
|
|
7253
|
+
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7254
|
+
lineHeight: "1.6",
|
|
7255
|
+
color: "var(--bw-text-muted)",
|
|
7256
|
+
}, children: [jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsx(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), jsx("span", { children: highlight.trim() })] }, index))) }) })) : (
|
|
7257
|
+
// Fallback to description
|
|
7258
|
+
jsx(Fragment, { children: jsx("p", { className: "bw-event-type-desc", style: {
|
|
6983
7259
|
color: "var(--bw-text-muted)",
|
|
6984
7260
|
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
6985
7261
|
lineHeight: "1.6",
|
|
6986
7262
|
fontFamily: "var(--bw-font-family)",
|
|
6987
7263
|
margin: "10px 0 10px 0",
|
|
6988
|
-
|
|
6989
|
-
|
|
6990
|
-
|
|
6991
|
-
|
|
6992
|
-
|
|
6993
|
-
|
|
6994
|
-
|
|
6995
|
-
|
|
6996
|
-
|
|
6997
|
-
|
|
6998
|
-
|
|
6999
|
-
|
|
7000
|
-
|
|
7001
|
-
|
|
7002
|
-
|
|
7003
|
-
|
|
7004
|
-
|
|
7005
|
-
|
|
7006
|
-
|
|
7007
|
-
|
|
7008
|
-
|
|
7009
|
-
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
|
|
7016
|
-
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
|
|
7021
|
-
|
|
7264
|
+
display: "-webkit-box",
|
|
7265
|
+
WebkitLineClamp: 5,
|
|
7266
|
+
WebkitBoxOrient: "vertical",
|
|
7267
|
+
overflow: "hidden",
|
|
7268
|
+
textOverflow: "ellipsis",
|
|
7269
|
+
minHeight: "128px",
|
|
7270
|
+
maxHeight: "128px",
|
|
7271
|
+
}, children: eventType.description || " " }) })) }), (eventType.description || eventType.highlights?.length) && (jsx("button", { onClick: (e) => {
|
|
7272
|
+
e.stopPropagation();
|
|
7273
|
+
handleShowDetails(eventType);
|
|
7274
|
+
}, style: {
|
|
7275
|
+
color: "var(--bw-highlight-color)",
|
|
7276
|
+
background: "var(--bw-surface-color)",
|
|
7277
|
+
padding: "12px 24px",
|
|
7278
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7279
|
+
fontSize: "14px",
|
|
7280
|
+
fontWeight: "600",
|
|
7281
|
+
fontFamily: "var(--bw-font-family)",
|
|
7282
|
+
display: "flex",
|
|
7283
|
+
alignItems: "center",
|
|
7284
|
+
gap: "8px",
|
|
7285
|
+
border: "2px solid var(--bw-highlight-color)",
|
|
7286
|
+
cursor: "pointer",
|
|
7287
|
+
boxShadow: " -30px -15px 10px 0px var(--bw-surface-color)",
|
|
7288
|
+
marginLeft: "auto",
|
|
7289
|
+
position: "absolute",
|
|
7290
|
+
right: "24px",
|
|
7291
|
+
bottom: "79px",
|
|
7292
|
+
opacity: "0.8",
|
|
7293
|
+
transition: "all 0.2s ease",
|
|
7294
|
+
}, onMouseEnter: (e) => {
|
|
7295
|
+
e.currentTarget.style.opacity = "1";
|
|
7296
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7297
|
+
}, onMouseLeave: (e) => {
|
|
7298
|
+
e.currentTarget.style.opacity = "0.8";
|
|
7299
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7300
|
+
}, children: "Mehr anzeigen" })), jsxs("div", { style: {
|
|
7022
7301
|
display: "flex",
|
|
7023
7302
|
justifyContent: "space-between",
|
|
7024
7303
|
alignItems: "center",
|
|
@@ -7041,6 +7320,13 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
|
|
|
7041
7320
|
gap: "8px",
|
|
7042
7321
|
border: "none",
|
|
7043
7322
|
cursor: "pointer",
|
|
7323
|
+
transition: "all 0.2s ease",
|
|
7324
|
+
}, onMouseEnter: (e) => {
|
|
7325
|
+
e.currentTarget.style.opacity = "0.9";
|
|
7326
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7327
|
+
}, onMouseLeave: (e) => {
|
|
7328
|
+
e.currentTarget.style.opacity = "1";
|
|
7329
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7044
7330
|
}, children: [jsx(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (jsx("div", { style: {
|
|
7045
7331
|
position: "absolute",
|
|
7046
7332
|
inset: 0,
|
|
@@ -7059,7 +7345,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
|
|
|
7059
7345
|
fontFamily: "var(--bw-font-family)",
|
|
7060
7346
|
boxShadow: "var(--bw-shadow-md)",
|
|
7061
7347
|
}, children: "Ausgebucht" }) }))] }, eventType.id));
|
|
7062
|
-
}) }) }))] }));
|
|
7348
|
+
}) }) })), jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
|
|
7063
7349
|
}
|
|
7064
7350
|
|
|
7065
7351
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|