@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.cjs
CHANGED
|
@@ -6461,6 +6461,279 @@ ZodPromise.create;
|
|
|
6461
6461
|
ZodOptional.create;
|
|
6462
6462
|
ZodNullable.create;
|
|
6463
6463
|
|
|
6464
|
+
// Simple markdown to HTML converter with better list handling
|
|
6465
|
+
function convertMarkdownToHtml(markdown) {
|
|
6466
|
+
if (!markdown)
|
|
6467
|
+
return "";
|
|
6468
|
+
let html = markdown;
|
|
6469
|
+
// Process line by line to handle lists properly
|
|
6470
|
+
const lines = html.split("\n");
|
|
6471
|
+
const processedLines = [];
|
|
6472
|
+
let inUlList = false;
|
|
6473
|
+
let inOlList = false;
|
|
6474
|
+
for (let i = 0; i < lines.length; i++) {
|
|
6475
|
+
const line = lines[i];
|
|
6476
|
+
const trimmedLine = line.trim();
|
|
6477
|
+
// Handle unordered lists
|
|
6478
|
+
if (trimmedLine.startsWith("* ")) {
|
|
6479
|
+
if (!inUlList) {
|
|
6480
|
+
processedLines.push("<ul>");
|
|
6481
|
+
inUlList = true;
|
|
6482
|
+
}
|
|
6483
|
+
processedLines.push(`<li>${trimmedLine.substring(2)}</li>`);
|
|
6484
|
+
}
|
|
6485
|
+
// Handle ordered lists
|
|
6486
|
+
else if (/^\d+\.\s/.test(trimmedLine)) {
|
|
6487
|
+
if (!inOlList) {
|
|
6488
|
+
processedLines.push("<ol>");
|
|
6489
|
+
inOlList = true;
|
|
6490
|
+
}
|
|
6491
|
+
processedLines.push(`<li>${trimmedLine.replace(/^\d+\.\s/, "")}</li>`);
|
|
6492
|
+
}
|
|
6493
|
+
// Not a list item
|
|
6494
|
+
else {
|
|
6495
|
+
// Close any open lists
|
|
6496
|
+
if (inUlList) {
|
|
6497
|
+
processedLines.push("</ul>");
|
|
6498
|
+
inUlList = false;
|
|
6499
|
+
}
|
|
6500
|
+
if (inOlList) {
|
|
6501
|
+
processedLines.push("</ol>");
|
|
6502
|
+
inOlList = false;
|
|
6503
|
+
}
|
|
6504
|
+
// Process other markdown
|
|
6505
|
+
if (trimmedLine) {
|
|
6506
|
+
processedLines.push(line);
|
|
6507
|
+
}
|
|
6508
|
+
else {
|
|
6509
|
+
processedLines.push("");
|
|
6510
|
+
}
|
|
6511
|
+
}
|
|
6512
|
+
}
|
|
6513
|
+
// Close any remaining open lists
|
|
6514
|
+
if (inUlList)
|
|
6515
|
+
processedLines.push("</ul>");
|
|
6516
|
+
if (inOlList)
|
|
6517
|
+
processedLines.push("</ol>");
|
|
6518
|
+
html = processedLines.join("\n");
|
|
6519
|
+
// Apply other markdown formatting
|
|
6520
|
+
return (html
|
|
6521
|
+
// Headers
|
|
6522
|
+
.replace(/^### (.*$)/gm, "<h3>$1</h3>")
|
|
6523
|
+
.replace(/^## (.*$)/gm, "<h2>$1</h2>")
|
|
6524
|
+
.replace(/^# (.*$)/gm, "<h1>$1</h1>")
|
|
6525
|
+
// Bold
|
|
6526
|
+
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
|
6527
|
+
// Italic
|
|
6528
|
+
.replace(/\*(.*?)\*/g, "<em>$1</em>")
|
|
6529
|
+
// Underline
|
|
6530
|
+
.replace(/__(.*?)__/g, "<u>$1</u>")
|
|
6531
|
+
// Links
|
|
6532
|
+
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
|
|
6533
|
+
// Blockquotes
|
|
6534
|
+
.replace(/^> (.*$)/gm, "<blockquote>$1</blockquote>")
|
|
6535
|
+
// Paragraphs (but not for lines that are already HTML tags)
|
|
6536
|
+
.replace(/^(?!<[^>]+>)(.+)$/gm, "<p>$1</p>")
|
|
6537
|
+
// Clean up empty paragraphs
|
|
6538
|
+
.replace(/<p>\s*<\/p>/g, "")
|
|
6539
|
+
// Line breaks within paragraphs
|
|
6540
|
+
.replace(/\n(?!<)/g, "<br>"));
|
|
6541
|
+
}
|
|
6542
|
+
const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
6543
|
+
const IconWave$1 = ({ size = 20, color = "#0ea5e9" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6544
|
+
function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
|
|
6545
|
+
if (!isOpen || !eventType)
|
|
6546
|
+
return null;
|
|
6547
|
+
const isAvailable = eventType.hasAvailableInstances;
|
|
6548
|
+
// Memoize the complete HTML including styles to prevent DOM updates
|
|
6549
|
+
const descriptionHtml = React__default.useMemo(() => {
|
|
6550
|
+
if (!eventType.description)
|
|
6551
|
+
return "";
|
|
6552
|
+
const convertedMarkdown = convertMarkdownToHtml(eventType.description);
|
|
6553
|
+
// Return complete HTML with styles to prevent recreation on each render
|
|
6554
|
+
return `<style>
|
|
6555
|
+
.event-description p { margin: 0 0 12px 0; }
|
|
6556
|
+
.event-description p:last-child { margin-bottom: 0; }
|
|
6557
|
+
.event-description strong { font-weight: 600; color: var(--bw-text-color); }
|
|
6558
|
+
.event-description em { font-style: italic; }
|
|
6559
|
+
.event-description u { text-decoration: underline; }
|
|
6560
|
+
.event-description ul, .event-description ol {
|
|
6561
|
+
margin: 12px 0;
|
|
6562
|
+
padding-left: 20px;
|
|
6563
|
+
list-style-type: disc;
|
|
6564
|
+
}
|
|
6565
|
+
.event-description ol { list-style-type: decimal; }
|
|
6566
|
+
.event-description li { margin-bottom: 4px; display: list-item; }
|
|
6567
|
+
.event-description blockquote {
|
|
6568
|
+
margin: 12px 0;
|
|
6569
|
+
padding-left: 16px;
|
|
6570
|
+
border-left: 3px solid var(--bw-border-color);
|
|
6571
|
+
font-style: italic;
|
|
6572
|
+
}
|
|
6573
|
+
.event-description a {
|
|
6574
|
+
color: var(--bw-highlight-color);
|
|
6575
|
+
text-decoration: underline;
|
|
6576
|
+
}
|
|
6577
|
+
.event-description h1, .event-description h2, .event-description h3 {
|
|
6578
|
+
color: var(--bw-text-color);
|
|
6579
|
+
font-weight: 600;
|
|
6580
|
+
margin: 16px 0 8px 0;
|
|
6581
|
+
}
|
|
6582
|
+
.event-description h1 { font-size: 20px; }
|
|
6583
|
+
.event-description h2 { font-size: 18px; }
|
|
6584
|
+
.event-description h3 { font-size: 16px; }
|
|
6585
|
+
</style><div class="event-description">${convertedMarkdown}</div>`;
|
|
6586
|
+
}, [eventType.description]);
|
|
6587
|
+
const handleBookingClick = () => {
|
|
6588
|
+
onEventTypeSelect(eventType);
|
|
6589
|
+
onClose();
|
|
6590
|
+
};
|
|
6591
|
+
return (jsxRuntime.jsx("div", { style: {
|
|
6592
|
+
position: "fixed",
|
|
6593
|
+
top: 0,
|
|
6594
|
+
left: 0,
|
|
6595
|
+
right: 0,
|
|
6596
|
+
bottom: 0,
|
|
6597
|
+
zIndex: 10000,
|
|
6598
|
+
display: "flex",
|
|
6599
|
+
alignItems: "center",
|
|
6600
|
+
justifyContent: "center",
|
|
6601
|
+
padding: "var(--bw-spacing)",
|
|
6602
|
+
}, onClick: onClose, children: jsxRuntime.jsxs("div", { style: {
|
|
6603
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6604
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6605
|
+
maxWidth: "700px",
|
|
6606
|
+
width: "100%",
|
|
6607
|
+
maxHeight: "90vh",
|
|
6608
|
+
overflow: "auto",
|
|
6609
|
+
position: "relative",
|
|
6610
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6611
|
+
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
6612
|
+
fontFamily: "var(--bw-font-family)",
|
|
6613
|
+
}, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("button", { onClick: onClose, style: {
|
|
6614
|
+
position: "absolute",
|
|
6615
|
+
top: "var(--bw-spacing)",
|
|
6616
|
+
right: "var(--bw-spacing)",
|
|
6617
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6618
|
+
border: "1px solid var(--bw-border-color)",
|
|
6619
|
+
fontSize: "24px",
|
|
6620
|
+
cursor: "pointer",
|
|
6621
|
+
color: "var(--bw-text-muted)",
|
|
6622
|
+
width: "32px",
|
|
6623
|
+
height: "32px",
|
|
6624
|
+
display: "flex",
|
|
6625
|
+
alignItems: "center",
|
|
6626
|
+
justifyContent: "center",
|
|
6627
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6628
|
+
zIndex: 10,
|
|
6629
|
+
}, onMouseEnter: (e) => {
|
|
6630
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
6631
|
+
}, onMouseLeave: (e) => {
|
|
6632
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
6633
|
+
}, children: "\u00D7" }), jsxRuntime.jsxs("div", { style: { padding: "var(--bw-spacing-large)" }, children: [jsxRuntime.jsxs("div", { style: {
|
|
6634
|
+
marginBottom: "24px",
|
|
6635
|
+
padding: "16px",
|
|
6636
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6637
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6638
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6639
|
+
}, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: {
|
|
6640
|
+
fontSize: "14px",
|
|
6641
|
+
fontWeight: "600",
|
|
6642
|
+
color: "var(--bw-highlight-color)",
|
|
6643
|
+
marginBottom: "8px",
|
|
6644
|
+
fontFamily: "var(--bw-font-family)",
|
|
6645
|
+
}, children: eventType.category.name }), jsxRuntime.jsx("h2", { style: {
|
|
6646
|
+
fontSize: "28px",
|
|
6647
|
+
fontWeight: "700",
|
|
6648
|
+
color: "var(--bw-text-color)",
|
|
6649
|
+
marginBottom: "16px",
|
|
6650
|
+
lineHeight: "1.3",
|
|
6651
|
+
fontFamily: "var(--bw-font-family)",
|
|
6652
|
+
margin: "0 0 16px 0",
|
|
6653
|
+
}, children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: jsxRuntime.jsx("div", { style: { marginBottom: "24px" }, children: jsxRuntime.jsx("ul", { style: {
|
|
6654
|
+
listStyle: "none",
|
|
6655
|
+
padding: "0",
|
|
6656
|
+
margin: "0",
|
|
6657
|
+
display: "flex",
|
|
6658
|
+
flexDirection: "column",
|
|
6659
|
+
gap: "3px",
|
|
6660
|
+
}, children: eventType.highlights
|
|
6661
|
+
.filter((highlight) => highlight.trim())
|
|
6662
|
+
.map((highlight, index) => (jsxRuntime.jsxs("li", { style: {
|
|
6663
|
+
display: "flex",
|
|
6664
|
+
alignItems: "flex-start",
|
|
6665
|
+
gap: "10px",
|
|
6666
|
+
fontFamily: "var(--bw-font-family)",
|
|
6667
|
+
fontSize: "16px",
|
|
6668
|
+
lineHeight: "1.6",
|
|
6669
|
+
color: "var(--bw-text-color)",
|
|
6670
|
+
}, children: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (jsxRuntime.jsx("div", { style: {
|
|
6671
|
+
marginBottom: "24px",
|
|
6672
|
+
color: "var(--bw-text-muted)",
|
|
6673
|
+
fontSize: "16px",
|
|
6674
|
+
lineHeight: "1.6",
|
|
6675
|
+
fontFamily: "var(--bw-font-family)",
|
|
6676
|
+
padding: "0px 20px",
|
|
6677
|
+
}, dangerouslySetInnerHTML: { __html: descriptionHtml } })), jsxRuntime.jsxs("div", { style: {
|
|
6678
|
+
display: "flex",
|
|
6679
|
+
justifyContent: "space-between",
|
|
6680
|
+
alignItems: "center",
|
|
6681
|
+
marginTop: "32px",
|
|
6682
|
+
padding: "20px",
|
|
6683
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6684
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6685
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6686
|
+
}, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: {
|
|
6687
|
+
fontSize: "14px",
|
|
6688
|
+
color: "var(--bw-text-muted)",
|
|
6689
|
+
fontFamily: "var(--bw-font-family)",
|
|
6690
|
+
marginBottom: "4px",
|
|
6691
|
+
}, children: "Preis ab" }), jsxRuntime.jsx("div", { style: {
|
|
6692
|
+
fontSize: "32px",
|
|
6693
|
+
fontWeight: "700",
|
|
6694
|
+
color: "var(--bw-text-color)",
|
|
6695
|
+
fontFamily: "var(--bw-font-family)",
|
|
6696
|
+
}, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (jsxRuntime.jsxs("button", { onClick: handleBookingClick, style: {
|
|
6697
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6698
|
+
color: "white",
|
|
6699
|
+
padding: "14px 28px",
|
|
6700
|
+
border: "none",
|
|
6701
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6702
|
+
fontSize: "16px",
|
|
6703
|
+
fontWeight: "600",
|
|
6704
|
+
fontFamily: "var(--bw-font-family)",
|
|
6705
|
+
display: "flex",
|
|
6706
|
+
alignItems: "center",
|
|
6707
|
+
gap: "8px",
|
|
6708
|
+
cursor: "pointer",
|
|
6709
|
+
transition: "all 0.2s ease",
|
|
6710
|
+
}, onMouseEnter: (e) => {
|
|
6711
|
+
e.currentTarget.style.opacity = "0.9";
|
|
6712
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
6713
|
+
}, onMouseLeave: (e) => {
|
|
6714
|
+
e.currentTarget.style.opacity = "1";
|
|
6715
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
6716
|
+
}, children: [jsxRuntime.jsx(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (jsxRuntime.jsx("div", { style: {
|
|
6717
|
+
position: "absolute",
|
|
6718
|
+
inset: 0,
|
|
6719
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
6720
|
+
backdropFilter: "blur(2px)",
|
|
6721
|
+
display: "flex",
|
|
6722
|
+
alignItems: "center",
|
|
6723
|
+
justifyContent: "center",
|
|
6724
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6725
|
+
}, children: jsxRuntime.jsx("div", { style: {
|
|
6726
|
+
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
6727
|
+
padding: "16px 32px",
|
|
6728
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6729
|
+
color: "var(--bw-text-color)",
|
|
6730
|
+
fontWeight: "600",
|
|
6731
|
+
fontSize: "18px",
|
|
6732
|
+
fontFamily: "var(--bw-font-family)",
|
|
6733
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6734
|
+
}, children: "Ausgebucht" }) }))] }) }));
|
|
6735
|
+
}
|
|
6736
|
+
|
|
6464
6737
|
// Carousel navigation icons
|
|
6465
6738
|
const IconChevronLeft = ({ size = 20, color = "white" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) }));
|
|
6466
6739
|
const IconChevronRight = ({ size = 20, color = "white" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) }));
|
|
@@ -6639,6 +6912,7 @@ const ImageCarousel = ({ images, eventName }) => {
|
|
|
6639
6912
|
// Custom minimal SVG icons (Lucide-style)
|
|
6640
6913
|
const IconClock = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })] }));
|
|
6641
6914
|
const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsxRuntime.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), jsxRuntime.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
|
|
6915
|
+
const IconCheck = ({ size = 16, color = "#10b981" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
6642
6916
|
// Wave icon for booking action
|
|
6643
6917
|
const IconWave = ({ size = 20, color = "#0ea5e9" }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), jsxRuntime.jsx("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6644
6918
|
// Loading skeleton component that matches the actual design
|
|
@@ -6760,13 +7034,23 @@ const EventTypeSelectionSkeleton = ({ count = 4 }) => (jsxRuntime.jsxs(jsxRuntim
|
|
|
6760
7034
|
height: "14px",
|
|
6761
7035
|
backgroundColor: "var(--bw-border-color)",
|
|
6762
7036
|
borderRadius: "4px",
|
|
6763
|
-
} })] })] }), jsxRuntime.jsx("div", { className: "bw-skeleton-desc bw-event-type-
|
|
6764
|
-
|
|
6765
|
-
|
|
6766
|
-
|
|
6767
|
-
borderRadius: "4px",
|
|
7037
|
+
} })] })] }), jsxRuntime.jsx("div", { className: "bw-skeleton-desc bw-event-type-highlights", style: { marginBottom: "20px", minHeight: "128px" }, children: Array.from({ length: 4 }).map((_, lineIdx) => (jsxRuntime.jsxs("div", { style: {
|
|
7038
|
+
display: "flex",
|
|
7039
|
+
alignItems: "center",
|
|
7040
|
+
gap: "8px",
|
|
6768
7041
|
marginBottom: "8px",
|
|
6769
|
-
}
|
|
7042
|
+
}, children: [jsxRuntime.jsx("div", { style: {
|
|
7043
|
+
width: "14px",
|
|
7044
|
+
height: "14px",
|
|
7045
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7046
|
+
borderRadius: "50%",
|
|
7047
|
+
flexShrink: 0,
|
|
7048
|
+
} }), jsxRuntime.jsx("div", { style: {
|
|
7049
|
+
width: lineIdx === 3 ? "60%" : "85%",
|
|
7050
|
+
height: "16px",
|
|
7051
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7052
|
+
borderRadius: "4px",
|
|
7053
|
+
} })] }, lineIdx))) }), jsxRuntime.jsxs("div", { style: {
|
|
6770
7054
|
display: "flex",
|
|
6771
7055
|
justifyContent: "space-between",
|
|
6772
7056
|
alignItems: "center",
|
|
@@ -6787,59 +7071,18 @@ const EventTypeSelectionSkeleton = ({ count = 4 }) => (jsxRuntime.jsxs(jsxRuntim
|
|
|
6787
7071
|
justifyContent: "center",
|
|
6788
7072
|
} })] })] })] }, idx))) }) })] }));
|
|
6789
7073
|
function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false, skeletonCount = 4, }) {
|
|
6790
|
-
// State
|
|
6791
|
-
const [
|
|
6792
|
-
|
|
6793
|
-
|
|
6794
|
-
|
|
6795
|
-
|
|
6796
|
-
|
|
6797
|
-
setExpandedDescriptions((prev) => {
|
|
6798
|
-
const newSet = new Set(prev);
|
|
6799
|
-
if (newSet.has(eventTypeId)) {
|
|
6800
|
-
newSet.delete(eventTypeId);
|
|
6801
|
-
}
|
|
6802
|
-
else {
|
|
6803
|
-
newSet.add(eventTypeId);
|
|
6804
|
-
}
|
|
6805
|
-
return newSet;
|
|
6806
|
-
});
|
|
6807
|
-
};
|
|
6808
|
-
// Check if text is truncated by comparing scroll height with client height
|
|
6809
|
-
const checkTruncation = () => {
|
|
6810
|
-
const newTruncated = new Set();
|
|
6811
|
-
descriptionRefs.current.forEach((element, eventTypeId) => {
|
|
6812
|
-
if (element && !expandedDescriptions.has(eventTypeId)) {
|
|
6813
|
-
// Add a small tolerance for rounding differences
|
|
6814
|
-
if (element.scrollHeight > element.clientHeight + 2) {
|
|
6815
|
-
newTruncated.add(eventTypeId);
|
|
6816
|
-
}
|
|
6817
|
-
}
|
|
6818
|
-
});
|
|
6819
|
-
setTruncatedDescriptions(newTruncated);
|
|
7074
|
+
// State for details dialog
|
|
7075
|
+
const [detailsDialogOpen, setDetailsDialogOpen] = React__default.useState(false);
|
|
7076
|
+
const [selectedEventTypeForDetails, setSelectedEventTypeForDetails] = React__default.useState(null);
|
|
7077
|
+
// Handle opening details dialog
|
|
7078
|
+
const handleShowDetails = (eventType) => {
|
|
7079
|
+
setSelectedEventTypeForDetails(eventType);
|
|
7080
|
+
setDetailsDialogOpen(true);
|
|
6820
7081
|
};
|
|
6821
|
-
//
|
|
6822
|
-
|
|
6823
|
-
|
|
6824
|
-
|
|
6825
|
-
setTimeout(checkTruncation, 100);
|
|
6826
|
-
};
|
|
6827
|
-
window.addEventListener("resize", handleResize);
|
|
6828
|
-
return () => {
|
|
6829
|
-
clearTimeout(timeoutId);
|
|
6830
|
-
window.removeEventListener("resize", handleResize);
|
|
6831
|
-
};
|
|
6832
|
-
}, [eventTypes, expandedDescriptions]);
|
|
6833
|
-
// Set ref for description element
|
|
6834
|
-
const setDescriptionRef = (eventTypeId) => (element) => {
|
|
6835
|
-
if (element) {
|
|
6836
|
-
descriptionRefs.current.set(eventTypeId, element);
|
|
6837
|
-
// Check truncation when ref is set
|
|
6838
|
-
setTimeout(checkTruncation, 50);
|
|
6839
|
-
}
|
|
6840
|
-
else {
|
|
6841
|
-
descriptionRefs.current.delete(eventTypeId);
|
|
6842
|
-
}
|
|
7082
|
+
// Handle closing details dialog
|
|
7083
|
+
const handleCloseDetails = () => {
|
|
7084
|
+
setDetailsDialogOpen(false);
|
|
7085
|
+
setSelectedEventTypeForDetails(null);
|
|
6843
7086
|
};
|
|
6844
7087
|
// Show loading skeleton
|
|
6845
7088
|
if (isLoading) {
|
|
@@ -6989,56 +7232,92 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
|
|
|
6989
7232
|
lineHeight: "1.3",
|
|
6990
7233
|
fontFamily: "var(--bw-font-family)",
|
|
6991
7234
|
margin: "0 0 12px 0",
|
|
6992
|
-
}, children: eventType.name }), jsxRuntime.jsxs("div", { style: {
|
|
6993
|
-
|
|
6994
|
-
|
|
6995
|
-
|
|
6996
|
-
|
|
7235
|
+
}, children: eventType.name }), jsxRuntime.jsxs("div", { style: {
|
|
7236
|
+
display: "flex",
|
|
7237
|
+
alignItems: "center",
|
|
7238
|
+
gap: "6px",
|
|
7239
|
+
marginLeft: "10px",
|
|
7240
|
+
}, children: [jsxRuntime.jsx(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), jsxRuntime.jsx("span", { style: {
|
|
6997
7241
|
fontFamily: "var(--bw-font-family)",
|
|
6998
7242
|
fontSize: "14px",
|
|
6999
7243
|
color: "var(--bw-text-muted)",
|
|
7000
7244
|
}, children: eventType.nextAvailableDate
|
|
7001
7245
|
? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
|
|
7002
|
-
: "Keine Termine frei" })] }), jsxRuntime.
|
|
7246
|
+
: "Keine Termine frei" })] }), jsxRuntime.jsx("div", { style: { marginLeft: "10px", cursor: "pointer" }, onClick: (e) => {
|
|
7247
|
+
e.stopPropagation();
|
|
7248
|
+
handleShowDetails(eventType);
|
|
7249
|
+
}, children: eventType.highlights && eventType.highlights.length > 0 ? (
|
|
7250
|
+
// Show highlights as list
|
|
7251
|
+
jsxRuntime.jsx("div", { className: "bw-event-type-highlights", style: {
|
|
7252
|
+
margin: "10px 0px 10px 0px",
|
|
7253
|
+
minHeight: "128px",
|
|
7254
|
+
display: "-webkit-box",
|
|
7255
|
+
WebkitLineClamp: 5,
|
|
7256
|
+
WebkitBoxOrient: "vertical",
|
|
7257
|
+
overflow: "hidden",
|
|
7258
|
+
textOverflow: "ellipsis",
|
|
7259
|
+
}, children: jsxRuntime.jsx("ul", { style: {
|
|
7260
|
+
listStyle: "none",
|
|
7261
|
+
padding: "0",
|
|
7262
|
+
margin: "0",
|
|
7263
|
+
display: "flex",
|
|
7264
|
+
flexDirection: "column",
|
|
7265
|
+
gap: "3px",
|
|
7266
|
+
}, children: eventType.highlights
|
|
7267
|
+
.filter((highlight) => highlight.trim())
|
|
7268
|
+
.map((highlight, index) => (jsxRuntime.jsxs("li", { style: {
|
|
7269
|
+
display: "flex",
|
|
7270
|
+
alignItems: "flex-start",
|
|
7271
|
+
gap: "8px",
|
|
7272
|
+
fontFamily: "var(--bw-font-family)",
|
|
7273
|
+
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7274
|
+
lineHeight: "1.6",
|
|
7275
|
+
color: "var(--bw-text-muted)",
|
|
7276
|
+
}, children: [jsxRuntime.jsx("div", { style: { marginTop: "4px", flexShrink: 0 }, children: jsxRuntime.jsx(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), jsxRuntime.jsx("span", { children: highlight.trim() })] }, index))) }) })) : (
|
|
7277
|
+
// Fallback to description
|
|
7278
|
+
jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("p", { className: "bw-event-type-desc", style: {
|
|
7003
7279
|
color: "var(--bw-text-muted)",
|
|
7004
7280
|
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7005
7281
|
lineHeight: "1.6",
|
|
7006
7282
|
fontFamily: "var(--bw-font-family)",
|
|
7007
7283
|
margin: "10px 0 10px 0",
|
|
7008
|
-
|
|
7009
|
-
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
|
|
7016
|
-
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
|
|
7021
|
-
|
|
7022
|
-
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
|
|
7029
|
-
|
|
7030
|
-
|
|
7031
|
-
|
|
7032
|
-
|
|
7033
|
-
|
|
7034
|
-
|
|
7035
|
-
|
|
7036
|
-
|
|
7037
|
-
|
|
7038
|
-
|
|
7039
|
-
|
|
7040
|
-
|
|
7041
|
-
|
|
7284
|
+
display: "-webkit-box",
|
|
7285
|
+
WebkitLineClamp: 5,
|
|
7286
|
+
WebkitBoxOrient: "vertical",
|
|
7287
|
+
overflow: "hidden",
|
|
7288
|
+
textOverflow: "ellipsis",
|
|
7289
|
+
minHeight: "128px",
|
|
7290
|
+
maxHeight: "128px",
|
|
7291
|
+
}, children: eventType.description || " " }) })) }), (eventType.description || eventType.highlights?.length) && (jsxRuntime.jsx("button", { onClick: (e) => {
|
|
7292
|
+
e.stopPropagation();
|
|
7293
|
+
handleShowDetails(eventType);
|
|
7294
|
+
}, style: {
|
|
7295
|
+
color: "var(--bw-highlight-color)",
|
|
7296
|
+
background: "var(--bw-surface-color)",
|
|
7297
|
+
padding: "12px 24px",
|
|
7298
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7299
|
+
fontSize: "14px",
|
|
7300
|
+
fontWeight: "600",
|
|
7301
|
+
fontFamily: "var(--bw-font-family)",
|
|
7302
|
+
display: "flex",
|
|
7303
|
+
alignItems: "center",
|
|
7304
|
+
gap: "8px",
|
|
7305
|
+
border: "2px solid var(--bw-highlight-color)",
|
|
7306
|
+
cursor: "pointer",
|
|
7307
|
+
boxShadow: " -30px -15px 10px 0px var(--bw-surface-color)",
|
|
7308
|
+
marginLeft: "auto",
|
|
7309
|
+
position: "absolute",
|
|
7310
|
+
right: "24px",
|
|
7311
|
+
bottom: "79px",
|
|
7312
|
+
opacity: "0.8",
|
|
7313
|
+
transition: "all 0.2s ease",
|
|
7314
|
+
}, onMouseEnter: (e) => {
|
|
7315
|
+
e.currentTarget.style.opacity = "1";
|
|
7316
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7317
|
+
}, onMouseLeave: (e) => {
|
|
7318
|
+
e.currentTarget.style.opacity = "0.8";
|
|
7319
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7320
|
+
}, children: "Mehr anzeigen" })), jsxRuntime.jsxs("div", { style: {
|
|
7042
7321
|
display: "flex",
|
|
7043
7322
|
justifyContent: "space-between",
|
|
7044
7323
|
alignItems: "center",
|
|
@@ -7061,6 +7340,13 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
|
|
|
7061
7340
|
gap: "8px",
|
|
7062
7341
|
border: "none",
|
|
7063
7342
|
cursor: "pointer",
|
|
7343
|
+
transition: "all 0.2s ease",
|
|
7344
|
+
}, onMouseEnter: (e) => {
|
|
7345
|
+
e.currentTarget.style.opacity = "0.9";
|
|
7346
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7347
|
+
}, onMouseLeave: (e) => {
|
|
7348
|
+
e.currentTarget.style.opacity = "1";
|
|
7349
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7064
7350
|
}, children: [jsxRuntime.jsx(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (jsxRuntime.jsx("div", { style: {
|
|
7065
7351
|
position: "absolute",
|
|
7066
7352
|
inset: 0,
|
|
@@ -7079,7 +7365,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false,
|
|
|
7079
7365
|
fontFamily: "var(--bw-font-family)",
|
|
7080
7366
|
boxShadow: "var(--bw-shadow-md)",
|
|
7081
7367
|
}, children: "Ausgebucht" }) }))] }, eventType.id));
|
|
7082
|
-
}) }) }))] }));
|
|
7368
|
+
}) }) })), jsxRuntime.jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
|
|
7083
7369
|
}
|
|
7084
7370
|
|
|
7085
7371
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|