@bigz-app/booking-widget 0.2.3 → 0.3.0
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 +56 -71
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/BookingForm.d.ts.map +1 -1
- package/dist/components/EventInstanceSelection.d.ts +0 -1
- package/dist/components/EventInstanceSelection.d.ts.map +1 -1
- package/dist/index.cjs +56 -71
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +56 -71
- package/dist/index.esm.js.map +1 -1
- package/package.json +76 -71
package/dist/booking-widget.js
CHANGED
|
@@ -9197,7 +9197,7 @@
|
|
|
9197
9197
|
|
|
9198
9198
|
var reactStripe_umdExports = reactStripe_umd.exports;
|
|
9199
9199
|
|
|
9200
|
-
const spinner = (borderColor) => (u$2("div", { style: {
|
|
9200
|
+
const spinner$1 = (borderColor) => (u$2("div", { style: {
|
|
9201
9201
|
width: "auto",
|
|
9202
9202
|
height: "auto",
|
|
9203
9203
|
fontSize: "16px",
|
|
@@ -9333,7 +9333,7 @@
|
|
|
9333
9333
|
if (!isLoading) {
|
|
9334
9334
|
e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
|
|
9335
9335
|
}
|
|
9336
|
-
}, children: isLoading ? (u$2(k$3, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (u$2(k$3, { children: [" ", totalAmount <
|
|
9336
|
+
}, children: isLoading ? (u$2(k$3, { children: [spinner$1("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (u$2(k$3, { children: [" ", totalAmount <
|
|
9337
9337
|
eventDetails.price * formData.participants.filter((p) => p.name.trim()).length
|
|
9338
9338
|
? "Anzahlen & buchen"
|
|
9339
9339
|
: "Jetzt buchen"] })) }), u$2("style", { children: `
|
|
@@ -9453,7 +9453,7 @@
|
|
|
9453
9453
|
justifyContent: "center",
|
|
9454
9454
|
padding: "var(--bw-spacing)",
|
|
9455
9455
|
gap: "8px",
|
|
9456
|
-
}, children: [spinner(), u$2("span", { style: {
|
|
9456
|
+
}, children: [spinner$1(), u$2("span", { style: {
|
|
9457
9457
|
color: "var(--bw-text-muted)",
|
|
9458
9458
|
fontFamily: "var(--bw-font-family)",
|
|
9459
9459
|
fontSize: "var(--bw-font-size)",
|
|
@@ -9481,7 +9481,7 @@
|
|
|
9481
9481
|
}, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
|
|
9482
9482
|
}
|
|
9483
9483
|
|
|
9484
|
-
function Sidebar({ isOpen, onClose, title, children, width = "
|
|
9484
|
+
function Sidebar({ isOpen, onClose, title, children, width = "450px" }) {
|
|
9485
9485
|
const [isVisible, setIsVisible] = d$1(false);
|
|
9486
9486
|
const [isAnimating, setIsAnimating] = d$1(false);
|
|
9487
9487
|
const themedStyles = useStyles();
|
|
@@ -9880,7 +9880,7 @@
|
|
|
9880
9880
|
marginBottom: "8px",
|
|
9881
9881
|
fontFamily: "var(--bw-font-family)",
|
|
9882
9882
|
};
|
|
9883
|
-
return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`,
|
|
9883
|
+
return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, children: u$2("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$2("div", { style: {
|
|
9884
9884
|
backgroundColor: "var(--bw-surface-color)",
|
|
9885
9885
|
border: `1px solid var(--bw-border-color)`,
|
|
9886
9886
|
backdropFilter: "blur(4px)",
|
|
@@ -10098,7 +10098,7 @@
|
|
|
10098
10098
|
fontFamily: "var(--bw-font-family)",
|
|
10099
10099
|
display: "block",
|
|
10100
10100
|
marginBottom: "8px",
|
|
10101
|
-
}, children: "Kommentar (optional)" }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen
|
|
10101
|
+
}, children: "Kommentar (optional)" }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zur Buchung...", rows: 3, style: {
|
|
10102
10102
|
width: "100%",
|
|
10103
10103
|
padding: "12px",
|
|
10104
10104
|
border: `1px solid var(--bw-border-color)`,
|
|
@@ -10726,44 +10726,42 @@
|
|
|
10726
10726
|
// Allocation Badge Component
|
|
10727
10727
|
const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
|
|
10728
10728
|
const badgeInfo = getAllocationBadgeInfo(availableSpots, maxParticipants);
|
|
10729
|
-
if (!badgeInfo)
|
|
10730
|
-
return null;
|
|
10731
10729
|
return (u$2("div", { style: {
|
|
10732
|
-
|
|
10733
|
-
|
|
10734
|
-
right: "20px",
|
|
10735
|
-
backgroundColor: badgeInfo.backgroundColor,
|
|
10736
|
-
color: badgeInfo.textColor,
|
|
10730
|
+
backgroundColor: badgeInfo?.backgroundColor || "transparent",
|
|
10731
|
+
color: badgeInfo?.textColor || "transparent",
|
|
10737
10732
|
fontSize: "11px",
|
|
10738
10733
|
fontWeight: "bold",
|
|
10739
|
-
padding: "
|
|
10734
|
+
padding: "1px 8px",
|
|
10735
|
+
display: "flex",
|
|
10736
|
+
marginRight: "auto",
|
|
10737
|
+
marginTop: "-24px",
|
|
10738
|
+
marginBottom: "5px",
|
|
10740
10739
|
borderRadius: "var(--bw-border-radius-small)",
|
|
10741
10740
|
fontFamily: "var(--bw-font-family)",
|
|
10742
|
-
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
|
10743
10741
|
zIndex: 50,
|
|
10744
10742
|
whiteSpace: "nowrap",
|
|
10745
|
-
|
|
10743
|
+
width: "fit-content",
|
|
10744
|
+
}, children: badgeInfo?.text || " - " }));
|
|
10746
10745
|
};
|
|
10747
10746
|
// Price Badge Component (for special prices)
|
|
10748
10747
|
const SpecialPriceBadge = ({ price, yearPrices }) => {
|
|
10749
10748
|
const badgeInfo = getPriceBadgeInfo(price, yearPrices);
|
|
10750
|
-
if (!badgeInfo)
|
|
10751
|
-
return null;
|
|
10752
10749
|
return (u$2("div", { style: {
|
|
10753
|
-
|
|
10754
|
-
|
|
10755
|
-
right: "20px",
|
|
10756
|
-
backgroundColor: badgeInfo.backgroundColor,
|
|
10757
|
-
color: badgeInfo.textColor,
|
|
10750
|
+
backgroundColor: badgeInfo?.backgroundColor || "transparent",
|
|
10751
|
+
color: badgeInfo?.textColor || "transparent",
|
|
10758
10752
|
fontSize: "11px",
|
|
10759
10753
|
fontWeight: "bold",
|
|
10760
|
-
padding: "
|
|
10754
|
+
padding: "1px 8px",
|
|
10755
|
+
display: "flex",
|
|
10756
|
+
marginLeft: "auto",
|
|
10757
|
+
marginTop: "-20px",
|
|
10758
|
+
marginBottom: "5px",
|
|
10761
10759
|
borderRadius: "var(--bw-border-radius-small)",
|
|
10762
10760
|
fontFamily: "var(--bw-font-family)",
|
|
10763
|
-
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
|
10764
10761
|
zIndex: 50,
|
|
10765
10762
|
whiteSpace: "nowrap",
|
|
10766
|
-
|
|
10763
|
+
width: "fit-content",
|
|
10764
|
+
}, children: badgeInfo?.text || " - " }));
|
|
10767
10765
|
};
|
|
10768
10766
|
// Price Display Component (with special price styling)
|
|
10769
10767
|
const PriceDisplay = ({ price, yearPrices }) => {
|
|
@@ -10776,13 +10774,27 @@
|
|
|
10776
10774
|
fontSize: "var(--bw-font-size-medium)",
|
|
10777
10775
|
fontWeight: "600",
|
|
10778
10776
|
padding: "3px 8px",
|
|
10779
|
-
marginTop: "-3px",
|
|
10780
10777
|
borderRadius: "var(--bw-border-radius-small)",
|
|
10781
10778
|
fontFamily: "var(--bw-font-family)",
|
|
10782
10779
|
border: displayInfo ? "none" : "1px solid var(--bw-border-color)",
|
|
10783
10780
|
boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
|
|
10784
10781
|
}, children: formatCurrency(price) }));
|
|
10785
10782
|
};
|
|
10783
|
+
const spinner = (borderColor) => (u$2("div", { style: {
|
|
10784
|
+
width: "auto",
|
|
10785
|
+
height: "auto",
|
|
10786
|
+
fontSize: "16px",
|
|
10787
|
+
color: "var(--bw-text-color)",
|
|
10788
|
+
animation: "spin 1s linear infinite",
|
|
10789
|
+
display: "flex",
|
|
10790
|
+
justifyContent: "center",
|
|
10791
|
+
alignItems: "center",
|
|
10792
|
+
}, children: u$2("div", { style: {
|
|
10793
|
+
width: "16px",
|
|
10794
|
+
height: "16px",
|
|
10795
|
+
border: `3px dotted ${"var(--bw-highlight-color)"}`,
|
|
10796
|
+
borderRadius: "50%",
|
|
10797
|
+
} }) }));
|
|
10786
10798
|
function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
|
|
10787
10799
|
const [selectedEventInstanceId, setSelectedEventInstanceId] = d$1(null);
|
|
10788
10800
|
const [openMonths, setOpenMonths] = d$1(new Set());
|
|
@@ -10859,7 +10871,6 @@
|
|
|
10859
10871
|
.bw-accordion-trigger,
|
|
10860
10872
|
.bw-event-instance-card {
|
|
10861
10873
|
position: relative;
|
|
10862
|
-
overflow: hidden;
|
|
10863
10874
|
}
|
|
10864
10875
|
|
|
10865
10876
|
.bw-accordion-trigger::before,
|
|
@@ -10908,14 +10919,11 @@
|
|
|
10908
10919
|
height: 32px !important;
|
|
10909
10920
|
font-size: 1rem !important;
|
|
10910
10921
|
}
|
|
10911
|
-
.bw-event-instance-title {
|
|
10912
|
-
font-size: 1rem !important;
|
|
10913
|
-
}
|
|
10914
10922
|
.bw-event-instance-price {
|
|
10915
10923
|
font-size: 1.1rem !important;
|
|
10916
10924
|
}
|
|
10917
10925
|
}
|
|
10918
|
-
` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`,
|
|
10926
|
+
` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
|
|
10919
10927
|
display: "flex",
|
|
10920
10928
|
flexDirection: "column",
|
|
10921
10929
|
gap: "20px",
|
|
@@ -11017,13 +11025,7 @@
|
|
|
11017
11025
|
height: "20px",
|
|
11018
11026
|
backgroundColor: "var(--bw-border-color)",
|
|
11019
11027
|
borderRadius: "8px",
|
|
11020
|
-
} })] }), eventIdx
|
|
11021
|
-
width: "90%",
|
|
11022
|
-
height: "12px",
|
|
11023
|
-
backgroundColor: "var(--bw-border-color)",
|
|
11024
|
-
borderRadius: "4px",
|
|
11025
|
-
marginTop: "8px",
|
|
11026
|
-
} }))] }, eventIdx))) })] }, idx))) }) }) })] }));
|
|
11028
|
+
} })] })] }, eventIdx))) })] }, idx))) }) }) })] }));
|
|
11027
11029
|
}
|
|
11028
11030
|
// Show empty state only if not loading and no event instances
|
|
11029
11031
|
if (eventInstances.length === 0) {
|
|
@@ -11032,7 +11034,6 @@
|
|
|
11032
11034
|
.bw-accordion-trigger,
|
|
11033
11035
|
.bw-event-instance-card {
|
|
11034
11036
|
position: relative;
|
|
11035
|
-
overflow: hidden;
|
|
11036
11037
|
}
|
|
11037
11038
|
|
|
11038
11039
|
.bw-accordion-trigger::before,
|
|
@@ -11081,9 +11082,6 @@
|
|
|
11081
11082
|
height: 32px !important;
|
|
11082
11083
|
font-size: 1rem !important;
|
|
11083
11084
|
}
|
|
11084
|
-
.bw-event-instance-title {
|
|
11085
|
-
font-size: 1rem !important;
|
|
11086
|
-
}
|
|
11087
11085
|
.bw-event-instance-price {
|
|
11088
11086
|
font-size: 1.1rem !important;
|
|
11089
11087
|
}
|
|
@@ -11114,7 +11112,6 @@
|
|
|
11114
11112
|
.bw-accordion-trigger,
|
|
11115
11113
|
.bw-event-instance-card {
|
|
11116
11114
|
position: relative;
|
|
11117
|
-
overflow: hidden;
|
|
11118
11115
|
}
|
|
11119
11116
|
|
|
11120
11117
|
.bw-accordion-trigger::before,
|
|
@@ -11163,14 +11160,11 @@
|
|
|
11163
11160
|
height: 32px !important;
|
|
11164
11161
|
font-size: 1rem !important;
|
|
11165
11162
|
}
|
|
11166
|
-
.bw-event-instance-title {
|
|
11167
|
-
font-size: 1rem !important;
|
|
11168
|
-
}
|
|
11169
11163
|
.bw-event-instance-price {
|
|
11170
11164
|
font-size: 1.1rem !important;
|
|
11171
11165
|
}
|
|
11172
11166
|
}
|
|
11173
|
-
` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`,
|
|
11167
|
+
` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
|
|
11174
11168
|
display: "flex",
|
|
11175
11169
|
flexDirection: "column",
|
|
11176
11170
|
gap: "20px",
|
|
@@ -11245,7 +11239,7 @@
|
|
|
11245
11239
|
color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
|
|
11246
11240
|
animation: "spin 1s linear infinite",
|
|
11247
11241
|
fontSize: "32px",
|
|
11248
|
-
}, children:
|
|
11242
|
+
}, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
|
|
11249
11243
|
display: "flex",
|
|
11250
11244
|
justifyContent: "space-between",
|
|
11251
11245
|
width: "100%",
|
|
@@ -11274,12 +11268,21 @@
|
|
|
11274
11268
|
alignItems: "start",
|
|
11275
11269
|
justifyContent: "start",
|
|
11276
11270
|
lineHeight: "1.2",
|
|
11277
|
-
}, children: [u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }),
|
|
11271
|
+
}, children: [u$2("div", { children: [u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
|
|
11272
|
+
formatWeekday(event.endTime) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), u$2("div", { children: formatWeekday(event.startTime) ===
|
|
11273
|
+
formatWeekday(event.endTime) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), u$2("span", { style: {
|
|
11274
|
+
fontSize: "12px",
|
|
11275
|
+
fontWeight: 400,
|
|
11276
|
+
color: "var(--bw-text-muted)",
|
|
11277
|
+
marginLeft: "6px",
|
|
11278
|
+
background: "var(--bw-background-muted)",
|
|
11279
|
+
whiteSpace: "nowrap",
|
|
11280
|
+
}, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "bw-event-instance-price", style: {
|
|
11278
11281
|
textAlign: "right",
|
|
11279
11282
|
display: "flex",
|
|
11280
11283
|
flexDirection: "column",
|
|
11281
11284
|
alignItems: "end",
|
|
11282
|
-
}, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), u$2("h4", { className: "bw-event-instance-title", style: {
|
|
11285
|
+
}, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "bw-event-instance-title", style: {
|
|
11283
11286
|
fontSize: "var(--bw-font-size)",
|
|
11284
11287
|
fontWeight: "600",
|
|
11285
11288
|
color: "var(--bw-text-color)",
|
|
@@ -11288,26 +11291,8 @@
|
|
|
11288
11291
|
display: "flex",
|
|
11289
11292
|
alignItems: "center",
|
|
11290
11293
|
gap: "8px",
|
|
11291
|
-
|
|
11292
|
-
|
|
11293
|
-
fontWeight: 400,
|
|
11294
|
-
color: "var(--bw-text-muted)",
|
|
11295
|
-
marginLeft: "6px",
|
|
11296
|
-
background: "var(--bw-background-muted)",
|
|
11297
|
-
borderRadius: "8px",
|
|
11298
|
-
padding: "2px 8px",
|
|
11299
|
-
whiteSpace: "nowrap",
|
|
11300
|
-
}, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$2("p", { style: {
|
|
11301
|
-
fontSize: "12px",
|
|
11302
|
-
color: "var(--bw-text-muted)",
|
|
11303
|
-
marginTop: "8px",
|
|
11304
|
-
display: "-webkit-box",
|
|
11305
|
-
WebkitBoxOrient: "vertical",
|
|
11306
|
-
WebkitLineClamp: 2,
|
|
11307
|
-
overflow: "hidden",
|
|
11308
|
-
margin: "0",
|
|
11309
|
-
lineHeight: "1.3",
|
|
11310
|
-
}, children: event.notes }))] }, event.id));
|
|
11294
|
+
maxWidth: "230px",
|
|
11295
|
+
}, children: event.name }))] }, event.id));
|
|
11311
11296
|
}) }) }, month));
|
|
11312
11297
|
}) }) }) })] }));
|
|
11313
11298
|
}
|