@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/index.esm.js
CHANGED
|
@@ -9112,7 +9112,7 @@ var reactStripe_umd = {exports: {}};
|
|
|
9112
9112
|
|
|
9113
9113
|
var reactStripe_umdExports = reactStripe_umd.exports;
|
|
9114
9114
|
|
|
9115
|
-
const spinner = (borderColor) => (jsx("div", { style: {
|
|
9115
|
+
const spinner$1 = (borderColor) => (jsx("div", { style: {
|
|
9116
9116
|
width: "auto",
|
|
9117
9117
|
height: "auto",
|
|
9118
9118
|
fontSize: "16px",
|
|
@@ -9248,7 +9248,7 @@ function PaymentFormInner({ config, eventDetails, formData, totalAmount, discoun
|
|
|
9248
9248
|
if (!isLoading) {
|
|
9249
9249
|
e.currentTarget.style.backgroundColor = "var(--bw-highlight-color)";
|
|
9250
9250
|
}
|
|
9251
|
-
}, children: isLoading ? (jsxs(Fragment, { children: [spinner("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (jsxs(Fragment, { children: [" ", totalAmount <
|
|
9251
|
+
}, children: isLoading ? (jsxs(Fragment, { children: [spinner$1("var(--bw-surface-color)"), " Verarbeite Zahlung..."] })) : (jsxs(Fragment, { children: [" ", totalAmount <
|
|
9252
9252
|
eventDetails.price * formData.participants.filter((p) => p.name.trim()).length
|
|
9253
9253
|
? "Anzahlen & buchen"
|
|
9254
9254
|
: "Jetzt buchen"] })) }), jsx("style", { children: `
|
|
@@ -9368,7 +9368,7 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
|
|
|
9368
9368
|
justifyContent: "center",
|
|
9369
9369
|
padding: "var(--bw-spacing)",
|
|
9370
9370
|
gap: "8px",
|
|
9371
|
-
}, children: [spinner(), jsx("span", { style: {
|
|
9371
|
+
}, children: [spinner$1(), jsx("span", { style: {
|
|
9372
9372
|
color: "var(--bw-text-muted)",
|
|
9373
9373
|
fontFamily: "var(--bw-font-family)",
|
|
9374
9374
|
fontSize: "var(--bw-font-size)",
|
|
@@ -9396,7 +9396,7 @@ function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode
|
|
|
9396
9396
|
}, children: jsx(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
|
|
9397
9397
|
}
|
|
9398
9398
|
|
|
9399
|
-
function Sidebar({ isOpen, onClose, title, children, width = "
|
|
9399
|
+
function Sidebar({ isOpen, onClose, title, children, width = "450px" }) {
|
|
9400
9400
|
const [isVisible, setIsVisible] = useState(false);
|
|
9401
9401
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
9402
9402
|
const themedStyles = useStyles();
|
|
@@ -9795,7 +9795,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
|
|
|
9795
9795
|
marginBottom: "8px",
|
|
9796
9796
|
fontFamily: "var(--bw-font-family)",
|
|
9797
9797
|
};
|
|
9798
|
-
return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`,
|
|
9798
|
+
return (jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, children: jsxs("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [jsxs("div", { style: {
|
|
9799
9799
|
backgroundColor: "var(--bw-surface-color)",
|
|
9800
9800
|
border: `1px solid var(--bw-border-color)`,
|
|
9801
9801
|
backdropFilter: "blur(4px)",
|
|
@@ -10013,7 +10013,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
|
|
|
10013
10013
|
fontFamily: "var(--bw-font-family)",
|
|
10014
10014
|
display: "block",
|
|
10015
10015
|
marginBottom: "8px",
|
|
10016
|
-
}, children: "Kommentar (optional)" }), jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen
|
|
10016
|
+
}, children: "Kommentar (optional)" }), jsx("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: "Zus\u00E4tzliche Anmerkungen zur Buchung...", rows: 3, style: {
|
|
10017
10017
|
width: "100%",
|
|
10018
10018
|
padding: "12px",
|
|
10019
10019
|
border: `1px solid var(--bw-border-color)`,
|
|
@@ -10641,44 +10641,42 @@ const getPriceDisplayInfo = (price, yearPrices) => {
|
|
|
10641
10641
|
// Allocation Badge Component
|
|
10642
10642
|
const AllocationBadge = ({ availableSpots, maxParticipants, }) => {
|
|
10643
10643
|
const badgeInfo = getAllocationBadgeInfo(availableSpots, maxParticipants);
|
|
10644
|
-
if (!badgeInfo)
|
|
10645
|
-
return null;
|
|
10646
10644
|
return (jsx("div", { style: {
|
|
10647
|
-
|
|
10648
|
-
|
|
10649
|
-
right: "20px",
|
|
10650
|
-
backgroundColor: badgeInfo.backgroundColor,
|
|
10651
|
-
color: badgeInfo.textColor,
|
|
10645
|
+
backgroundColor: badgeInfo?.backgroundColor || "transparent",
|
|
10646
|
+
color: badgeInfo?.textColor || "transparent",
|
|
10652
10647
|
fontSize: "11px",
|
|
10653
10648
|
fontWeight: "bold",
|
|
10654
|
-
padding: "
|
|
10649
|
+
padding: "1px 8px",
|
|
10650
|
+
display: "flex",
|
|
10651
|
+
marginRight: "auto",
|
|
10652
|
+
marginTop: "-24px",
|
|
10653
|
+
marginBottom: "5px",
|
|
10655
10654
|
borderRadius: "var(--bw-border-radius-small)",
|
|
10656
10655
|
fontFamily: "var(--bw-font-family)",
|
|
10657
|
-
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
|
10658
10656
|
zIndex: 50,
|
|
10659
10657
|
whiteSpace: "nowrap",
|
|
10660
|
-
|
|
10658
|
+
width: "fit-content",
|
|
10659
|
+
}, children: badgeInfo?.text || " - " }));
|
|
10661
10660
|
};
|
|
10662
10661
|
// Price Badge Component (for special prices)
|
|
10663
10662
|
const SpecialPriceBadge = ({ price, yearPrices }) => {
|
|
10664
10663
|
const badgeInfo = getPriceBadgeInfo(price, yearPrices);
|
|
10665
|
-
if (!badgeInfo)
|
|
10666
|
-
return null;
|
|
10667
10664
|
return (jsx("div", { style: {
|
|
10668
|
-
|
|
10669
|
-
|
|
10670
|
-
right: "20px",
|
|
10671
|
-
backgroundColor: badgeInfo.backgroundColor,
|
|
10672
|
-
color: badgeInfo.textColor,
|
|
10665
|
+
backgroundColor: badgeInfo?.backgroundColor || "transparent",
|
|
10666
|
+
color: badgeInfo?.textColor || "transparent",
|
|
10673
10667
|
fontSize: "11px",
|
|
10674
10668
|
fontWeight: "bold",
|
|
10675
|
-
padding: "
|
|
10669
|
+
padding: "1px 8px",
|
|
10670
|
+
display: "flex",
|
|
10671
|
+
marginLeft: "auto",
|
|
10672
|
+
marginTop: "-20px",
|
|
10673
|
+
marginBottom: "5px",
|
|
10676
10674
|
borderRadius: "var(--bw-border-radius-small)",
|
|
10677
10675
|
fontFamily: "var(--bw-font-family)",
|
|
10678
|
-
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
|
10679
10676
|
zIndex: 50,
|
|
10680
10677
|
whiteSpace: "nowrap",
|
|
10681
|
-
|
|
10678
|
+
width: "fit-content",
|
|
10679
|
+
}, children: badgeInfo?.text || " - " }));
|
|
10682
10680
|
};
|
|
10683
10681
|
// Price Display Component (with special price styling)
|
|
10684
10682
|
const PriceDisplay = ({ price, yearPrices }) => {
|
|
@@ -10691,13 +10689,27 @@ const PriceDisplay = ({ price, yearPrices }) => {
|
|
|
10691
10689
|
fontSize: "var(--bw-font-size-medium)",
|
|
10692
10690
|
fontWeight: "600",
|
|
10693
10691
|
padding: "3px 8px",
|
|
10694
|
-
marginTop: "-3px",
|
|
10695
10692
|
borderRadius: "var(--bw-border-radius-small)",
|
|
10696
10693
|
fontFamily: "var(--bw-font-family)",
|
|
10697
10694
|
border: displayInfo ? "none" : "1px solid var(--bw-border-color)",
|
|
10698
10695
|
boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
|
|
10699
10696
|
}, children: formatCurrency(price) }));
|
|
10700
10697
|
};
|
|
10698
|
+
const spinner = (borderColor) => (jsx("div", { style: {
|
|
10699
|
+
width: "auto",
|
|
10700
|
+
height: "auto",
|
|
10701
|
+
fontSize: "16px",
|
|
10702
|
+
color: "var(--bw-text-color)",
|
|
10703
|
+
animation: "spin 1s linear infinite",
|
|
10704
|
+
display: "flex",
|
|
10705
|
+
justifyContent: "center",
|
|
10706
|
+
alignItems: "center",
|
|
10707
|
+
}, children: jsx("div", { style: {
|
|
10708
|
+
width: "16px",
|
|
10709
|
+
height: "16px",
|
|
10710
|
+
border: `3px dotted ${"var(--bw-highlight-color)"}`,
|
|
10711
|
+
borderRadius: "50%",
|
|
10712
|
+
} }) }));
|
|
10701
10713
|
function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
|
|
10702
10714
|
const [selectedEventInstanceId, setSelectedEventInstanceId] = useState(null);
|
|
10703
10715
|
const [openMonths, setOpenMonths] = useState(new Set());
|
|
@@ -10774,7 +10786,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
10774
10786
|
.bw-accordion-trigger,
|
|
10775
10787
|
.bw-event-instance-card {
|
|
10776
10788
|
position: relative;
|
|
10777
|
-
overflow: hidden;
|
|
10778
10789
|
}
|
|
10779
10790
|
|
|
10780
10791
|
.bw-accordion-trigger::before,
|
|
@@ -10823,14 +10834,11 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
10823
10834
|
height: 32px !important;
|
|
10824
10835
|
font-size: 1rem !important;
|
|
10825
10836
|
}
|
|
10826
|
-
.bw-event-instance-title {
|
|
10827
|
-
font-size: 1rem !important;
|
|
10828
|
-
}
|
|
10829
10837
|
.bw-event-instance-price {
|
|
10830
10838
|
font-size: 1.1rem !important;
|
|
10831
10839
|
}
|
|
10832
10840
|
}
|
|
10833
|
-
` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`,
|
|
10841
|
+
` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name} Terminauswahl`, children: jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsx("div", { style: {
|
|
10834
10842
|
display: "flex",
|
|
10835
10843
|
flexDirection: "column",
|
|
10836
10844
|
gap: "20px",
|
|
@@ -10932,13 +10940,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
10932
10940
|
height: "20px",
|
|
10933
10941
|
backgroundColor: "var(--bw-border-color)",
|
|
10934
10942
|
borderRadius: "8px",
|
|
10935
|
-
} })] }), eventIdx
|
|
10936
|
-
width: "90%",
|
|
10937
|
-
height: "12px",
|
|
10938
|
-
backgroundColor: "var(--bw-border-color)",
|
|
10939
|
-
borderRadius: "4px",
|
|
10940
|
-
marginTop: "8px",
|
|
10941
|
-
} }))] }, eventIdx))) })] }, idx))) }) }) })] }));
|
|
10943
|
+
} })] })] }, eventIdx))) })] }, idx))) }) }) })] }));
|
|
10942
10944
|
}
|
|
10943
10945
|
// Show empty state only if not loading and no event instances
|
|
10944
10946
|
if (eventInstances.length === 0) {
|
|
@@ -10947,7 +10949,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
10947
10949
|
.bw-accordion-trigger,
|
|
10948
10950
|
.bw-event-instance-card {
|
|
10949
10951
|
position: relative;
|
|
10950
|
-
overflow: hidden;
|
|
10951
10952
|
}
|
|
10952
10953
|
|
|
10953
10954
|
.bw-accordion-trigger::before,
|
|
@@ -10996,9 +10997,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
10996
10997
|
height: 32px !important;
|
|
10997
10998
|
font-size: 1rem !important;
|
|
10998
10999
|
}
|
|
10999
|
-
.bw-event-instance-title {
|
|
11000
|
-
font-size: 1rem !important;
|
|
11001
|
-
}
|
|
11002
11000
|
.bw-event-instance-price {
|
|
11003
11001
|
font-size: 1.1rem !important;
|
|
11004
11002
|
}
|
|
@@ -11029,7 +11027,6 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
11029
11027
|
.bw-accordion-trigger,
|
|
11030
11028
|
.bw-event-instance-card {
|
|
11031
11029
|
position: relative;
|
|
11032
|
-
overflow: hidden;
|
|
11033
11030
|
}
|
|
11034
11031
|
|
|
11035
11032
|
.bw-accordion-trigger::before,
|
|
@@ -11078,14 +11075,11 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
11078
11075
|
height: 32px !important;
|
|
11079
11076
|
font-size: 1rem !important;
|
|
11080
11077
|
}
|
|
11081
|
-
.bw-event-instance-title {
|
|
11082
|
-
font-size: 1rem !important;
|
|
11083
|
-
}
|
|
11084
11078
|
.bw-event-instance-price {
|
|
11085
11079
|
font-size: 1.1rem !important;
|
|
11086
11080
|
}
|
|
11087
11081
|
}
|
|
11088
|
-
` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`,
|
|
11082
|
+
` }), jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, children: jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsx("div", { style: {
|
|
11089
11083
|
display: "flex",
|
|
11090
11084
|
flexDirection: "column",
|
|
11091
11085
|
gap: "20px",
|
|
@@ -11160,7 +11154,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
11160
11154
|
color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
|
|
11161
11155
|
animation: "spin 1s linear infinite",
|
|
11162
11156
|
fontSize: "32px",
|
|
11163
|
-
}, children:
|
|
11157
|
+
}, children: spinner() }) })), jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxs("div", { style: {
|
|
11164
11158
|
display: "flex",
|
|
11165
11159
|
justifyContent: "space-between",
|
|
11166
11160
|
width: "100%",
|
|
@@ -11189,12 +11183,21 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
11189
11183
|
alignItems: "start",
|
|
11190
11184
|
justifyContent: "start",
|
|
11191
11185
|
lineHeight: "1.2",
|
|
11192
|
-
}, children: [jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }),
|
|
11186
|
+
}, children: [jsxs("div", { children: [jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
|
|
11187
|
+
formatWeekday(event.endTime) && (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsx("div", { children: formatWeekday(event.startTime) ===
|
|
11188
|
+
formatWeekday(event.endTime) ? (jsxs(Fragment, { children: [jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxs("span", { style: {
|
|
11189
|
+
fontSize: "12px",
|
|
11190
|
+
fontWeight: 400,
|
|
11191
|
+
color: "var(--bw-text-muted)",
|
|
11192
|
+
marginLeft: "6px",
|
|
11193
|
+
background: "var(--bw-background-muted)",
|
|
11194
|
+
whiteSpace: "nowrap",
|
|
11195
|
+
}, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), jsx("div", { className: "bw-event-instance-price", style: {
|
|
11193
11196
|
textAlign: "right",
|
|
11194
11197
|
display: "flex",
|
|
11195
11198
|
flexDirection: "column",
|
|
11196
11199
|
alignItems: "end",
|
|
11197
|
-
}, children: jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }),
|
|
11200
|
+
}, children: jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsx("h4", { className: "bw-event-instance-title", style: {
|
|
11198
11201
|
fontSize: "var(--bw-font-size)",
|
|
11199
11202
|
fontWeight: "600",
|
|
11200
11203
|
color: "var(--bw-text-color)",
|
|
@@ -11203,26 +11206,8 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
|
|
|
11203
11206
|
display: "flex",
|
|
11204
11207
|
alignItems: "center",
|
|
11205
11208
|
gap: "8px",
|
|
11206
|
-
|
|
11207
|
-
|
|
11208
|
-
fontWeight: 400,
|
|
11209
|
-
color: "var(--bw-text-muted)",
|
|
11210
|
-
marginLeft: "6px",
|
|
11211
|
-
background: "var(--bw-background-muted)",
|
|
11212
|
-
borderRadius: "8px",
|
|
11213
|
-
padding: "2px 8px",
|
|
11214
|
-
whiteSpace: "nowrap",
|
|
11215
|
-
}, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (jsx("p", { style: {
|
|
11216
|
-
fontSize: "12px",
|
|
11217
|
-
color: "var(--bw-text-muted)",
|
|
11218
|
-
marginTop: "8px",
|
|
11219
|
-
display: "-webkit-box",
|
|
11220
|
-
WebkitBoxOrient: "vertical",
|
|
11221
|
-
WebkitLineClamp: 2,
|
|
11222
|
-
overflow: "hidden",
|
|
11223
|
-
margin: "0",
|
|
11224
|
-
lineHeight: "1.3",
|
|
11225
|
-
}, children: event.notes }))] }, event.id));
|
|
11209
|
+
maxWidth: "230px",
|
|
11210
|
+
}, children: event.name }))] }, event.id));
|
|
11226
11211
|
}) }) }, month));
|
|
11227
11212
|
}) }) }) })] }));
|
|
11228
11213
|
}
|