@bigz-app/booking-widget 0.1.4 → 0.1.6
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 +720 -504
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/BookingForm.d.ts.map +1 -1
- package/dist/components/EventInstanceSelection.d.ts +2 -1
- package/dist/components/EventInstanceSelection.d.ts.map +1 -1
- package/dist/components/EventTypeSelection.d.ts.map +1 -1
- package/dist/components/Sidebar.d.ts +2 -1
- package/dist/components/Sidebar.d.ts.map +1 -1
- package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
- package/dist/index.cjs +721 -505
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +722 -506
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/booking-widget.js
CHANGED
|
@@ -6208,167 +6208,195 @@
|
|
|
6208
6208
|
return text.length > maxLength ? `${text.slice(0, maxLength - 1)}…` : text;
|
|
6209
6209
|
}
|
|
6210
6210
|
function EventTypeSelection({ eventTypes, onEventTypeSelect }) {
|
|
6211
|
-
|
|
6212
|
-
|
|
6213
|
-
|
|
6214
|
-
|
|
6215
|
-
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6220
|
-
|
|
6221
|
-
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
|
|
6226
|
-
|
|
6227
|
-
|
|
6228
|
-
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6234
|
-
|
|
6235
|
-
|
|
6236
|
-
|
|
6237
|
-
|
|
6238
|
-
|
|
6239
|
-
|
|
6240
|
-
|
|
6241
|
-
|
|
6242
|
-
|
|
6243
|
-
|
|
6244
|
-
|
|
6245
|
-
|
|
6246
|
-
|
|
6247
|
-
|
|
6248
|
-
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
6252
|
-
|
|
6253
|
-
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6211
|
+
// Responsive styles via a <style> tag
|
|
6212
|
+
// These styles will override inline styles for mobile
|
|
6213
|
+
return (u$1(k$2, { children: [u$1("style", { children: `
|
|
6214
|
+
@media (max-width: 600px) {
|
|
6215
|
+
.bw-event-type-list {
|
|
6216
|
+
padding: 8px !important;
|
|
6217
|
+
gap: 12px !important;
|
|
6218
|
+
}
|
|
6219
|
+
.bw-event-type-card {
|
|
6220
|
+
max-width: 100% !important;
|
|
6221
|
+
flex: 1 1 100% !important;
|
|
6222
|
+
padding: 0 !important;
|
|
6223
|
+
}
|
|
6224
|
+
.bw-event-type-img {
|
|
6225
|
+
height: 160px !important;
|
|
6226
|
+
}
|
|
6227
|
+
.bw-event-type-title {
|
|
6228
|
+
font-size: 1.1rem !important;
|
|
6229
|
+
}
|
|
6230
|
+
.bw-event-type-desc {
|
|
6231
|
+
font-size: 0.8rem !important;
|
|
6232
|
+
min-height: 100px !important;
|
|
6233
|
+
max-height: 100px !important;
|
|
6234
|
+
}
|
|
6235
|
+
.bw-event-type-price {
|
|
6236
|
+
font-size: 1.3rem !important;
|
|
6237
|
+
}
|
|
6238
|
+
.bw-event-type-content {
|
|
6239
|
+
padding: 12px !important;
|
|
6240
|
+
}
|
|
6241
|
+
}
|
|
6242
|
+
` }), eventTypes.length === 0 ? (u$1("div", { style: {
|
|
6243
|
+
minHeight: "400px",
|
|
6244
|
+
background: `linear-gradient(135deg, var(--bw-background-color), var(--bw-surface-color))`,
|
|
6245
|
+
color: "var(--bw-text-color)",
|
|
6246
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6247
|
+
display: "flex",
|
|
6248
|
+
alignItems: "center",
|
|
6249
|
+
justifyContent: "center",
|
|
6250
|
+
}, children: u$1("div", { style: { textAlign: "center" }, children: [u$1("div", { style: {
|
|
6251
|
+
margin: "0 auto 16px",
|
|
6252
|
+
width: "48px",
|
|
6253
|
+
height: "48px",
|
|
6254
|
+
color: "var(--bw-text-muted)",
|
|
6255
|
+
fontSize: "48px",
|
|
6256
|
+
}, children: u$1(IconTarget, { size: 48 }) }), u$1("h3", { style: {
|
|
6257
|
+
marginBottom: "8px",
|
|
6258
|
+
fontWeight: "600",
|
|
6259
|
+
fontSize: "var(--bw-font-size-large)",
|
|
6260
|
+
color: "var(--bw-text-muted)",
|
|
6261
|
+
fontFamily: "var(--bw-font-family)",
|
|
6262
|
+
}, children: "Keine Veranstaltungen verf\u00FCgbar" }), u$1("p", { style: {
|
|
6263
|
+
color: "var(--bw-text-muted)",
|
|
6264
|
+
fontFamily: "var(--bw-font-family)",
|
|
6265
|
+
}, children: "Derzeit sind keine Veranstaltungen verf\u00FCgbar." })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "24px" }, children: u$1("div", { style: {
|
|
6257
6266
|
display: "flex",
|
|
6258
|
-
|
|
6259
|
-
|
|
6260
|
-
|
|
6261
|
-
|
|
6262
|
-
|
|
6263
|
-
|
|
6264
|
-
|
|
6265
|
-
|
|
6266
|
-
|
|
6267
|
-
|
|
6268
|
-
|
|
6269
|
-
|
|
6270
|
-
|
|
6271
|
-
|
|
6272
|
-
|
|
6273
|
-
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
|
|
6282
|
-
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
|
|
6286
|
-
|
|
6287
|
-
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6291
|
-
|
|
6292
|
-
|
|
6293
|
-
|
|
6294
|
-
|
|
6295
|
-
|
|
6296
|
-
|
|
6297
|
-
|
|
6298
|
-
|
|
6299
|
-
|
|
6300
|
-
|
|
6301
|
-
|
|
6302
|
-
|
|
6303
|
-
|
|
6304
|
-
|
|
6305
|
-
|
|
6306
|
-
|
|
6307
|
-
|
|
6308
|
-
|
|
6267
|
+
flexWrap: "wrap",
|
|
6268
|
+
justifyContent: "center",
|
|
6269
|
+
gap: "32px",
|
|
6270
|
+
}, children: eventTypes.map((eventType) => {
|
|
6271
|
+
const isAvailable = eventType.hasAvailableInstances;
|
|
6272
|
+
return (u$1("div", { className: "bw-event-type-card", style: {
|
|
6273
|
+
position: "relative",
|
|
6274
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6275
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6276
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6277
|
+
overflow: "hidden",
|
|
6278
|
+
transition: "all 0.3s ease",
|
|
6279
|
+
cursor: isAvailable ? "pointer" : "not-allowed",
|
|
6280
|
+
opacity: isAvailable ? 1 : 0.6,
|
|
6281
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6282
|
+
fontFamily: "var(--bw-font-family)",
|
|
6283
|
+
maxWidth: "500px",
|
|
6284
|
+
flex: "1 1 350px",
|
|
6285
|
+
display: "flex",
|
|
6286
|
+
flexDirection: "column",
|
|
6287
|
+
}, onClick: () => isAvailable && onEventTypeSelect(eventType), onMouseEnter: (e) => {
|
|
6288
|
+
if (isAvailable) {
|
|
6289
|
+
e.currentTarget.style.transform = "translateY(-2px)";
|
|
6290
|
+
e.currentTarget.style.boxShadow = "var(--bw-shadow-lg)";
|
|
6291
|
+
}
|
|
6292
|
+
}, onMouseLeave: (e) => {
|
|
6293
|
+
if (isAvailable) {
|
|
6294
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
6295
|
+
e.currentTarget.style.boxShadow = "var(--bw-shadow-md)";
|
|
6296
|
+
}
|
|
6297
|
+
}, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
|
|
6298
|
+
padding: "4px 8px",
|
|
6299
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
6300
|
+
fontSize: "12px",
|
|
6301
|
+
fontWeight: "600",
|
|
6302
|
+
backgroundColor: isAvailable
|
|
6303
|
+
? "var(--bw-success-color)"
|
|
6304
|
+
: "var(--bw-error-color)",
|
|
6305
|
+
color: "white",
|
|
6306
|
+
fontFamily: "var(--bw-font-family)",
|
|
6307
|
+
}, children: isAvailable ? "freie Plätze" : "Ausgebucht" }) }), u$1("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: eventType.images.length > 0 ? (u$1(k$2, { children: u$1("img", { src: eventType.images[0], alt: eventType.name, style: {
|
|
6308
|
+
width: "100%",
|
|
6309
|
+
height: "100%",
|
|
6310
|
+
objectFit: "cover",
|
|
6311
|
+
} }) })) : (u$1("div", { style: {
|
|
6312
|
+
width: "100%",
|
|
6313
|
+
height: "100%",
|
|
6314
|
+
background: `linear-gradient(135deg, var(--bw-highlight-color), var(--bw-highlight-muted))`,
|
|
6315
|
+
display: "flex",
|
|
6316
|
+
alignItems: "center",
|
|
6317
|
+
justifyContent: "center",
|
|
6318
|
+
}, children: u$1("div", { style: {
|
|
6319
|
+
fontSize: "64px",
|
|
6320
|
+
color: "rgba(255, 255, 255, 0.8)",
|
|
6321
|
+
}, children: u$1(IconTarget, { size: 64 }) }) })) }), u$1("div", { className: "bw-event-type-content", style: { padding: "24px" }, children: [u$1("div", { style: {
|
|
6309
6322
|
fontSize: "14px",
|
|
6310
|
-
|
|
6311
|
-
|
|
6323
|
+
fontWeight: "600",
|
|
6324
|
+
color: "var(--bw-highlight-color)",
|
|
6325
|
+
marginBottom: "8px",
|
|
6312
6326
|
fontFamily: "var(--bw-font-family)",
|
|
6313
|
-
|
|
6327
|
+
}, children: eventType.category.name }), u$1("h2", { className: "bw-event-type-title", style: {
|
|
6328
|
+
fontSize: "clamp(1.1rem, 2.5vw, 24px)",
|
|
6329
|
+
fontWeight: "700",
|
|
6330
|
+
color: "var(--bw-text-color)",
|
|
6331
|
+
marginBottom: "12px",
|
|
6332
|
+
lineHeight: "1.3",
|
|
6333
|
+
fontFamily: "var(--bw-font-family)",
|
|
6334
|
+
margin: "0 0 12px 0",
|
|
6335
|
+
}, children: eventType.name }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconClock, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
|
|
6336
|
+
fontFamily: "var(--bw-font-family)",
|
|
6337
|
+
fontSize: "14px",
|
|
6338
|
+
color: "var(--bw-text-muted)",
|
|
6339
|
+
}, children: [eventType.durationDays, " Tag", eventType.durationDays > 1 ? "e" : ""] })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [u$1(IconCalendar, { size: 16, color: "var(--bw-text-color)" }), u$1("span", { style: {
|
|
6340
|
+
fontFamily: "var(--bw-font-family)",
|
|
6341
|
+
fontSize: "14px",
|
|
6342
|
+
color: "var(--bw-text-muted)",
|
|
6343
|
+
}, children: eventType.nextAvailableDate
|
|
6344
|
+
? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
|
|
6345
|
+
: "Keine Termine frei" })] }), u$1("p", { className: "bw-event-type-desc", style: {
|
|
6314
6346
|
color: "var(--bw-text-muted)",
|
|
6315
|
-
|
|
6316
|
-
|
|
6317
|
-
: "Keine Termine frei" })] }), u$1("p", { style: {
|
|
6318
|
-
color: "var(--bw-text-muted)",
|
|
6319
|
-
fontSize: "16px",
|
|
6320
|
-
lineHeight: "1.6",
|
|
6321
|
-
fontFamily: "var(--bw-font-family)",
|
|
6322
|
-
margin: "10px 0 10px 0",
|
|
6323
|
-
display: "-webkit-box",
|
|
6324
|
-
WebkitLineClamp: 5,
|
|
6325
|
-
WebkitBoxOrient: "vertical",
|
|
6326
|
-
overflow: "hidden",
|
|
6327
|
-
textOverflow: "ellipsis",
|
|
6328
|
-
minHeight: "128px",
|
|
6329
|
-
maxHeight: "128px",
|
|
6330
|
-
}, children: eventType.description ? truncateText(eventType.description, 300) : " " }), u$1("div", { style: {
|
|
6331
|
-
display: "flex",
|
|
6332
|
-
justifyContent: "space-between",
|
|
6333
|
-
alignItems: "center",
|
|
6334
|
-
marginTop: "20px",
|
|
6335
|
-
}, children: [u$1("div", { children: u$1("div", { style: {
|
|
6336
|
-
fontSize: "32px",
|
|
6337
|
-
fontWeight: "700",
|
|
6338
|
-
color: "var(--bw-text-color)",
|
|
6339
|
-
fontFamily: "var(--bw-font-family)",
|
|
6340
|
-
}, children: formatCurrency(eventType.basePrice) }) }), isAvailable && (u$1("div", { style: {
|
|
6341
|
-
backgroundColor: "var(--bw-highlight-color)",
|
|
6342
|
-
color: "white",
|
|
6343
|
-
padding: "12px 24px",
|
|
6344
|
-
borderRadius: "var(--bw-border-radius)",
|
|
6345
|
-
fontSize: "16px",
|
|
6346
|
-
fontWeight: "600",
|
|
6347
|
+
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
6348
|
+
lineHeight: "1.6",
|
|
6347
6349
|
fontFamily: "var(--bw-font-family)",
|
|
6350
|
+
margin: "10px 0 10px 0",
|
|
6351
|
+
display: "-webkit-box",
|
|
6352
|
+
WebkitLineClamp: 5,
|
|
6353
|
+
WebkitBoxOrient: "vertical",
|
|
6354
|
+
overflow: "hidden",
|
|
6355
|
+
textOverflow: "ellipsis",
|
|
6356
|
+
minHeight: "128px",
|
|
6357
|
+
maxHeight: "128px",
|
|
6358
|
+
}, children: eventType.description ? truncateText(eventType.description, 300) : " " }), u$1("div", { style: {
|
|
6348
6359
|
display: "flex",
|
|
6360
|
+
justifyContent: "space-between",
|
|
6349
6361
|
alignItems: "center",
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
|
|
6355
|
-
|
|
6356
|
-
|
|
6357
|
-
|
|
6358
|
-
|
|
6359
|
-
|
|
6360
|
-
|
|
6361
|
-
|
|
6362
|
-
|
|
6363
|
-
|
|
6364
|
-
|
|
6365
|
-
|
|
6366
|
-
|
|
6367
|
-
|
|
6368
|
-
|
|
6369
|
-
|
|
6370
|
-
|
|
6371
|
-
|
|
6362
|
+
marginTop: "20px",
|
|
6363
|
+
}, children: [u$1("div", { children: u$1("div", { className: "bw-event-type-price", style: {
|
|
6364
|
+
fontSize: "clamp(1.3rem, 4vw, 32px)",
|
|
6365
|
+
fontWeight: "700",
|
|
6366
|
+
color: "var(--bw-text-color)",
|
|
6367
|
+
fontFamily: "var(--bw-font-family)",
|
|
6368
|
+
}, children: formatCurrency(eventType.basePrice) }) }), isAvailable && (u$1("div", { style: {
|
|
6369
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6370
|
+
color: "white",
|
|
6371
|
+
padding: "12px 24px",
|
|
6372
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6373
|
+
fontSize: "16px",
|
|
6374
|
+
fontWeight: "600",
|
|
6375
|
+
fontFamily: "var(--bw-font-family)",
|
|
6376
|
+
display: "flex",
|
|
6377
|
+
alignItems: "center",
|
|
6378
|
+
gap: "8px",
|
|
6379
|
+
border: "none",
|
|
6380
|
+
cursor: "pointer",
|
|
6381
|
+
}, children: [u$1(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
|
|
6382
|
+
position: "absolute",
|
|
6383
|
+
inset: 0,
|
|
6384
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
6385
|
+
backdropFilter: "blur(2px)",
|
|
6386
|
+
display: "flex",
|
|
6387
|
+
alignItems: "center",
|
|
6388
|
+
justifyContent: "center",
|
|
6389
|
+
}, children: u$1("div", { style: {
|
|
6390
|
+
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
6391
|
+
padding: "12px 24px",
|
|
6392
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6393
|
+
color: "var(--bw-text-color)",
|
|
6394
|
+
fontWeight: "600",
|
|
6395
|
+
fontSize: "16px",
|
|
6396
|
+
fontFamily: "var(--bw-font-family)",
|
|
6397
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6398
|
+
}, children: "Ausgebucht" }) }))] }, eventType.id));
|
|
6399
|
+
}) }) }))] }));
|
|
6372
6400
|
}
|
|
6373
6401
|
|
|
6374
6402
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -7946,9 +7974,117 @@
|
|
|
7946
7974
|
}, children: u$1(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
|
|
7947
7975
|
}
|
|
7948
7976
|
|
|
7949
|
-
|
|
7977
|
+
// Simplified theme application (mirroring the main StyleProvider logic)
|
|
7978
|
+
const getThemedStyles = (config) => {
|
|
7979
|
+
if (!config) {
|
|
7980
|
+
// Fallback styles if no config provided
|
|
7981
|
+
return {
|
|
7982
|
+
"--bw-highlight-color": "#06b6d4",
|
|
7983
|
+
"--bw-background-color": "#e0f2fe",
|
|
7984
|
+
"--bw-surface-color": "#f0fdff",
|
|
7985
|
+
"--bw-text-color": "#0e7490",
|
|
7986
|
+
"--bw-text-muted": "rgba(14, 116, 144, 0.7)",
|
|
7987
|
+
"--bw-border-color": "#bae6fd",
|
|
7988
|
+
"--bw-success-color": "#38bdf8",
|
|
7989
|
+
"--bw-warning-color": "#fbbf24",
|
|
7990
|
+
"--bw-error-color": "#f43f5e",
|
|
7991
|
+
"--bw-border-radius": "18px",
|
|
7992
|
+
"--bw-border-radius-small": "16px",
|
|
7993
|
+
"--bw-spacing": "16px",
|
|
7994
|
+
"--bw-spacing-large": "24px",
|
|
7995
|
+
"--bw-font-family": "'Inter', system-ui, sans-serif",
|
|
7996
|
+
"--bw-font-size": "14px",
|
|
7997
|
+
"--bw-font-size-large": "18px",
|
|
7998
|
+
"--bw-shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
7999
|
+
};
|
|
8000
|
+
}
|
|
8001
|
+
// Simplified theme logic (basic version of what's in StyleProvider)
|
|
8002
|
+
const themes = {
|
|
8003
|
+
"light-fresh": {
|
|
8004
|
+
highlight: "#06b6d4",
|
|
8005
|
+
background: "#e0f2fe",
|
|
8006
|
+
surface: "#f0fdff",
|
|
8007
|
+
text: "#0e7490",
|
|
8008
|
+
border: "#bae6fd",
|
|
8009
|
+
success: "#38bdf8",
|
|
8010
|
+
warning: "#fbbf24",
|
|
8011
|
+
error: "#f43f5e",
|
|
8012
|
+
borderRadius: "18px",
|
|
8013
|
+
fontFamily: "'Inter', system-ui, sans-serif",
|
|
8014
|
+
},
|
|
8015
|
+
"midnight": {
|
|
8016
|
+
highlight: "#3b82f6",
|
|
8017
|
+
background: "#0f172a",
|
|
8018
|
+
surface: "#1e293b",
|
|
8019
|
+
text: "#f1f5f9",
|
|
8020
|
+
border: "#334155",
|
|
8021
|
+
success: "#22c55e",
|
|
8022
|
+
warning: "#eab308",
|
|
8023
|
+
error: "#ef4444",
|
|
8024
|
+
borderRadius: "8px",
|
|
8025
|
+
fontFamily: "Inter, system-ui, sans-serif",
|
|
8026
|
+
},
|
|
8027
|
+
// Add more themes as needed
|
|
8028
|
+
};
|
|
8029
|
+
const selectedTheme = config.theme || "light-fresh";
|
|
8030
|
+
const themeDefaults = themes[selectedTheme] || themes["light-fresh"];
|
|
8031
|
+
const getCSSValue = (value, fallback) => {
|
|
8032
|
+
if (!value)
|
|
8033
|
+
return fallback;
|
|
8034
|
+
if (value.includes("#") ||
|
|
8035
|
+
value.includes("px") ||
|
|
8036
|
+
value.includes("%") ||
|
|
8037
|
+
value.includes("rgb") ||
|
|
8038
|
+
value.includes("hsl")) {
|
|
8039
|
+
return value;
|
|
8040
|
+
}
|
|
8041
|
+
return fallback;
|
|
8042
|
+
};
|
|
8043
|
+
const addOpacity = (color, opacity) => {
|
|
8044
|
+
if (color.startsWith("#")) {
|
|
8045
|
+
const r = parseInt(color.slice(1, 3), 16);
|
|
8046
|
+
const g = parseInt(color.slice(3, 5), 16);
|
|
8047
|
+
const b = parseInt(color.slice(5, 7), 16);
|
|
8048
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
8049
|
+
}
|
|
8050
|
+
return color;
|
|
8051
|
+
};
|
|
8052
|
+
const colors = config.colors || {};
|
|
8053
|
+
const finalColors = {
|
|
8054
|
+
highlight: getCSSValue(colors.highlight, themeDefaults.highlight),
|
|
8055
|
+
background: getCSSValue(colors.background, themeDefaults.background),
|
|
8056
|
+
surface: getCSSValue(colors.surface, themeDefaults.surface),
|
|
8057
|
+
text: getCSSValue(colors.text, themeDefaults.text),
|
|
8058
|
+
border: getCSSValue(colors.border, themeDefaults.border),
|
|
8059
|
+
success: themeDefaults.success,
|
|
8060
|
+
warning: themeDefaults.warning,
|
|
8061
|
+
error: themeDefaults.error,
|
|
8062
|
+
};
|
|
8063
|
+
return {
|
|
8064
|
+
"--bw-highlight-color": finalColors.highlight,
|
|
8065
|
+
"--bw-background-color": finalColors.background,
|
|
8066
|
+
"--bw-surface-color": finalColors.surface,
|
|
8067
|
+
"--bw-text-color": finalColors.text,
|
|
8068
|
+
"--bw-text-muted": addOpacity(finalColors.text, 0.7),
|
|
8069
|
+
"--bw-border-color": finalColors.border,
|
|
8070
|
+
"--bw-success-color": finalColors.success,
|
|
8071
|
+
"--bw-warning-color": finalColors.warning,
|
|
8072
|
+
"--bw-error-color": finalColors.error,
|
|
8073
|
+
"--bw-border-radius": config.borderRadius || themeDefaults.borderRadius,
|
|
8074
|
+
"--bw-border-radius-small": config.borderRadius || themeDefaults.borderRadius,
|
|
8075
|
+
"--bw-spacing": "16px",
|
|
8076
|
+
"--bw-spacing-large": "24px",
|
|
8077
|
+
"--bw-font-family": config.fontFamily || themeDefaults.fontFamily,
|
|
8078
|
+
"--bw-font-size": "14px",
|
|
8079
|
+
"--bw-font-size-large": "18px",
|
|
8080
|
+
"--bw-shadow-lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
8081
|
+
};
|
|
8082
|
+
};
|
|
8083
|
+
function Sidebar({ isOpen, onClose, title, children, width = "400px", config, }) {
|
|
7950
8084
|
const [isVisible, setIsVisible] = d(false);
|
|
7951
8085
|
const [isAnimating, setIsAnimating] = d(false);
|
|
8086
|
+
// Get themed styles
|
|
8087
|
+
const themedStyles = getThemedStyles(config);
|
|
7952
8088
|
// Ensure portal root exists
|
|
7953
8089
|
y(() => {
|
|
7954
8090
|
let portalRoot = document.getElementById("booking-widget-portal-root");
|
|
@@ -8007,77 +8143,86 @@
|
|
|
8007
8143
|
}, [isOpen, onClose]);
|
|
8008
8144
|
if (!isVisible)
|
|
8009
8145
|
return null;
|
|
8010
|
-
const sidebarContent = (u$1("
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8019
|
-
position: "
|
|
8020
|
-
inset: 0,
|
|
8021
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
8022
|
-
opacity: isAnimating ? 1 : 0,
|
|
8023
|
-
transition: "opacity 0.3s ease-in-out",
|
|
8024
|
-
}, onClick: onClose }), u$1("div", { style: {
|
|
8025
|
-
position: "absolute",
|
|
8146
|
+
const sidebarContent = (u$1(k$2, { children: [u$1("style", { children: `
|
|
8147
|
+
@media (max-width: 600px) {
|
|
8148
|
+
.bw-sidebar-mobile {
|
|
8149
|
+
width: 100vw !important;
|
|
8150
|
+
max-width: 100vw !important;
|
|
8151
|
+
min-width: 0 !important;
|
|
8152
|
+
}
|
|
8153
|
+
}
|
|
8154
|
+
` }), u$1("div", { style: {
|
|
8155
|
+
position: "fixed",
|
|
8026
8156
|
top: 0,
|
|
8157
|
+
left: 0,
|
|
8027
8158
|
right: 0,
|
|
8028
8159
|
bottom: 0,
|
|
8029
|
-
|
|
8030
|
-
|
|
8031
|
-
|
|
8032
|
-
borderLeft: `1px solid var(--bw-border-color)`,
|
|
8033
|
-
boxShadow: "var(--bw-shadow-lg)",
|
|
8034
|
-
transform: isAnimating ? "translateX(0)" : "translateX(100%)",
|
|
8035
|
-
transition: "transform 0.3s ease-in-out",
|
|
8036
|
-
display: "flex",
|
|
8037
|
-
flexDirection: "column",
|
|
8038
|
-
overflow: "hidden",
|
|
8160
|
+
zIndex: 1000,
|
|
8161
|
+
fontFamily: "var(--bw-font-family)",
|
|
8162
|
+
...themedStyles, // Apply themed styles
|
|
8039
8163
|
}, children: [u$1("div", { style: {
|
|
8040
|
-
|
|
8041
|
-
|
|
8164
|
+
position: "absolute",
|
|
8165
|
+
inset: 0,
|
|
8166
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
8167
|
+
opacity: isAnimating ? 1 : 0,
|
|
8168
|
+
transition: "opacity 0.3s ease-in-out",
|
|
8169
|
+
}, onClick: onClose }), u$1("div", { className: "bw-sidebar-mobile", style: {
|
|
8170
|
+
position: "absolute",
|
|
8171
|
+
top: 0,
|
|
8172
|
+
right: 0,
|
|
8173
|
+
bottom: 0,
|
|
8174
|
+
width,
|
|
8175
|
+
maxWidth: "90vw",
|
|
8176
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
8177
|
+
borderLeft: `1px solid var(--bw-border-color)`,
|
|
8178
|
+
boxShadow: "var(--bw-shadow-lg)",
|
|
8179
|
+
transform: isAnimating ? "translateX(0)" : "translateX(100%)",
|
|
8180
|
+
transition: "transform 0.3s ease-in-out",
|
|
8042
8181
|
display: "flex",
|
|
8043
|
-
|
|
8044
|
-
|
|
8045
|
-
|
|
8046
|
-
|
|
8047
|
-
|
|
8048
|
-
fontWeight: "600",
|
|
8049
|
-
color: "var(--bw-text-color)",
|
|
8050
|
-
margin: 0,
|
|
8051
|
-
fontFamily: "var(--bw-font-family)",
|
|
8052
|
-
}, children: title }), u$1("button", { onClick: onClose, style: {
|
|
8053
|
-
width: "32px",
|
|
8054
|
-
height: "32px",
|
|
8055
|
-
borderRadius: "var(--bw-border-radius-small)",
|
|
8056
|
-
backgroundColor: "transparent",
|
|
8057
|
-
border: `1px solid var(--bw-border-color)`,
|
|
8058
|
-
color: "var(--bw-text-muted)",
|
|
8059
|
-
cursor: "pointer",
|
|
8182
|
+
flexDirection: "column",
|
|
8183
|
+
overflow: "hidden",
|
|
8184
|
+
}, children: [u$1("div", { style: {
|
|
8185
|
+
padding: "var(--bw-spacing)",
|
|
8186
|
+
borderBottom: `1px solid var(--bw-border-color)`,
|
|
8060
8187
|
display: "flex",
|
|
8061
8188
|
alignItems: "center",
|
|
8062
|
-
justifyContent: "
|
|
8063
|
-
|
|
8064
|
-
|
|
8065
|
-
|
|
8066
|
-
|
|
8067
|
-
|
|
8068
|
-
|
|
8069
|
-
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
|
|
8076
|
-
|
|
8189
|
+
justifyContent: "space-between",
|
|
8190
|
+
backgroundColor: "var(--bw-background-color)",
|
|
8191
|
+
}, children: [u$1("h2", { style: {
|
|
8192
|
+
fontSize: "var(--bw-font-size-large)",
|
|
8193
|
+
fontWeight: "600",
|
|
8194
|
+
color: "var(--bw-text-color)",
|
|
8195
|
+
margin: 0,
|
|
8196
|
+
fontFamily: "var(--bw-font-family)",
|
|
8197
|
+
}, children: title }), u$1("button", { onClick: onClose, style: {
|
|
8198
|
+
width: "32px",
|
|
8199
|
+
height: "32px",
|
|
8200
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
8201
|
+
backgroundColor: "transparent",
|
|
8202
|
+
border: `1px solid var(--bw-border-color)`,
|
|
8203
|
+
color: "var(--bw-text-muted)",
|
|
8204
|
+
cursor: "pointer",
|
|
8205
|
+
display: "flex",
|
|
8206
|
+
alignItems: "center",
|
|
8207
|
+
justifyContent: "center",
|
|
8208
|
+
fontSize: "18px",
|
|
8209
|
+
transition: "all 0.2s ease",
|
|
8210
|
+
fontFamily: "var(--bw-font-family)",
|
|
8211
|
+
}, onMouseEnter: (e) => {
|
|
8212
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
8213
|
+
e.currentTarget.style.color = "var(--bw-text-color)";
|
|
8214
|
+
}, onMouseLeave: (e) => {
|
|
8215
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
8216
|
+
e.currentTarget.style.color = "var(--bw-text-muted)";
|
|
8217
|
+
}, children: "\u2715" })] }), u$1("div", { style: {
|
|
8218
|
+
flex: 1,
|
|
8219
|
+
overflow: "auto",
|
|
8220
|
+
backgroundColor: "var(--bw-background-color)",
|
|
8221
|
+
}, children: children })] })] })] }));
|
|
8077
8222
|
const portalRoot = typeof window !== "undefined" ? document.getElementById("booking-widget-portal-root") : null;
|
|
8078
8223
|
return portalRoot ? Rn.createPortal(sidebarContent, portalRoot) : null;
|
|
8079
8224
|
}
|
|
8080
|
-
function Accordion
|
|
8225
|
+
function Accordion({ title, priceInfo, children, isOpen, onToggle }) {
|
|
8081
8226
|
return (u$1("div", { style: {
|
|
8082
8227
|
backgroundColor: "var(--bw-surface-color)",
|
|
8083
8228
|
border: `1px solid var(--bw-border-color)`,
|
|
@@ -8116,30 +8261,6 @@
|
|
|
8116
8261
|
}, children: children }))] }));
|
|
8117
8262
|
}
|
|
8118
8263
|
|
|
8119
|
-
// Accordion component for the booking form
|
|
8120
|
-
const Accordion = ({ title, children, isOpen, onToggle, }) => (u$1("div", { style: {
|
|
8121
|
-
backgroundColor: "var(--bw-surface-color)",
|
|
8122
|
-
border: `1px solid var(--bw-border-color)`,
|
|
8123
|
-
backdropFilter: "blur(4px)",
|
|
8124
|
-
borderRadius: "var(--bw-border-radius)",
|
|
8125
|
-
}, children: [u$1("button", { type: "button", style: {
|
|
8126
|
-
width: "100%",
|
|
8127
|
-
display: "flex",
|
|
8128
|
-
justifyContent: "space-between",
|
|
8129
|
-
alignItems: "center",
|
|
8130
|
-
padding: "var(--bw-spacing)",
|
|
8131
|
-
textAlign: "left",
|
|
8132
|
-
fontSize: "var(--bw-font-size-large)",
|
|
8133
|
-
fontWeight: "600",
|
|
8134
|
-
color: "var(--bw-text-color)",
|
|
8135
|
-
backgroundColor: "transparent",
|
|
8136
|
-
border: "none",
|
|
8137
|
-
cursor: "pointer",
|
|
8138
|
-
fontFamily: "var(--bw-font-family)",
|
|
8139
|
-
}, onClick: onToggle, children: [u$1("span", { children: title }), u$1("span", { style: {
|
|
8140
|
-
transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
|
|
8141
|
-
transition: "transform 0.2s ease",
|
|
8142
|
-
}, children: "\u25BC" })] }), isOpen && u$1("div", { style: { padding: "var(--bw-spacing)", paddingTop: 0 }, children: children })] }));
|
|
8143
8264
|
// Form schemas
|
|
8144
8265
|
const participantSchema = objectType({
|
|
8145
8266
|
name: stringType().min(1, "Name ist erforderlich"),
|
|
@@ -8161,7 +8282,6 @@
|
|
|
8161
8282
|
const [discountCode, setDiscountCode] = d(null);
|
|
8162
8283
|
const [discountLoading, setDiscountLoading] = d(false);
|
|
8163
8284
|
const [discountError, setDiscountError] = d(null);
|
|
8164
|
-
const [openSection, setOpenSection] = d("contact");
|
|
8165
8285
|
const form = useForm({
|
|
8166
8286
|
resolver: t(bookingFormSchema),
|
|
8167
8287
|
defaultValues: {
|
|
@@ -8226,13 +8346,6 @@
|
|
|
8226
8346
|
}, 500);
|
|
8227
8347
|
return () => clearTimeout(timer);
|
|
8228
8348
|
}, [watchedDiscountCode, watchedParticipants, eventDetails, config]);
|
|
8229
|
-
// Helper functions
|
|
8230
|
-
const addParticipant = () => {
|
|
8231
|
-
const currentParticipants = form.getValues("participants");
|
|
8232
|
-
if (currentParticipants.length < (eventDetails?.availableSpots || 0)) {
|
|
8233
|
-
form.setValue("participants", [...currentParticipants, { name: "", age: undefined }]);
|
|
8234
|
-
}
|
|
8235
|
-
};
|
|
8236
8349
|
const removeParticipant = (index) => {
|
|
8237
8350
|
const currentParticipants = form.getValues("participants");
|
|
8238
8351
|
if (currentParticipants.length > 1) {
|
|
@@ -8275,7 +8388,7 @@
|
|
|
8275
8388
|
}
|
|
8276
8389
|
};
|
|
8277
8390
|
if (!eventDetails.bookingOpen) {
|
|
8278
|
-
return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", children: u$1("div", { style: {
|
|
8391
|
+
return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Buchung nicht m\u00F6glich", config: config, children: u$1("div", { style: {
|
|
8279
8392
|
display: "flex",
|
|
8280
8393
|
alignItems: "center",
|
|
8281
8394
|
justifyContent: "center",
|
|
@@ -8316,19 +8429,7 @@
|
|
|
8316
8429
|
marginBottom: "8px",
|
|
8317
8430
|
fontFamily: "var(--bw-font-family)",
|
|
8318
8431
|
};
|
|
8319
|
-
|
|
8320
|
-
color: "var(--bw-highlight-color)",
|
|
8321
|
-
fontSize: "var(--bw-font-size)",
|
|
8322
|
-
fontWeight: "500",
|
|
8323
|
-
padding: "8px 12px",
|
|
8324
|
-
borderRadius: "var(--bw-border-radius-small)",
|
|
8325
|
-
backgroundColor: "var(--bw-surface-color)",
|
|
8326
|
-
border: `1px solid var(--bw-border-color)`,
|
|
8327
|
-
cursor: "pointer",
|
|
8328
|
-
transition: "all 0.2s ease",
|
|
8329
|
-
fontFamily: "var(--bw-font-family)",
|
|
8330
|
-
};
|
|
8331
|
-
return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", children: u$1("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$1("div", { style: {
|
|
8432
|
+
return (u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Buchung - ${eventDetails.name}`, width: "420px", config: config, children: u$1("div", { className: "booking-widget-container", style: { padding: "var(--bw-spacing)" }, children: [u$1("div", { style: {
|
|
8332
8433
|
backgroundColor: "var(--bw-surface-color)",
|
|
8333
8434
|
border: `1px solid var(--bw-border-color)`,
|
|
8334
8435
|
backdropFilter: "blur(4px)",
|
|
@@ -8376,58 +8477,65 @@
|
|
|
8376
8477
|
color: "var(--bw-text-color)",
|
|
8377
8478
|
fontWeight: "500",
|
|
8378
8479
|
fontFamily: "var(--bw-font-family)",
|
|
8379
|
-
}, 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(
|
|
8380
|
-
|
|
8381
|
-
|
|
8382
|
-
|
|
8383
|
-
|
|
8384
|
-
|
|
8385
|
-
|
|
8386
|
-
|
|
8387
|
-
|
|
8388
|
-
|
|
8389
|
-
|
|
8390
|
-
|
|
8391
|
-
|
|
8392
|
-
|
|
8393
|
-
|
|
8394
|
-
|
|
8395
|
-
|
|
8396
|
-
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
e
|
|
8400
|
-
|
|
8401
|
-
|
|
8402
|
-
|
|
8403
|
-
|
|
8404
|
-
|
|
8405
|
-
|
|
8406
|
-
|
|
8407
|
-
|
|
8408
|
-
|
|
8409
|
-
|
|
8410
|
-
|
|
8411
|
-
|
|
8412
|
-
|
|
8413
|
-
|
|
8414
|
-
|
|
8415
|
-
|
|
8416
|
-
|
|
8417
|
-
|
|
8418
|
-
|
|
8419
|
-
|
|
8420
|
-
|
|
8421
|
-
|
|
8422
|
-
|
|
8423
|
-
|
|
8424
|
-
|
|
8425
|
-
|
|
8426
|
-
|
|
8427
|
-
|
|
8428
|
-
|
|
8429
|
-
|
|
8430
|
-
|
|
8480
|
+
}, 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: {
|
|
8481
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
8482
|
+
border: `1px solid var(--bw-border-color)`,
|
|
8483
|
+
backdropFilter: "blur(4px)",
|
|
8484
|
+
borderRadius: "var(--bw-border-radius)",
|
|
8485
|
+
padding: "var(--bw-spacing)",
|
|
8486
|
+
marginBottom: "var(--bw-spacing-large)",
|
|
8487
|
+
}, children: [u$1("h2", { style: {
|
|
8488
|
+
fontSize: "var(--bw-font-size-large)",
|
|
8489
|
+
fontWeight: "600",
|
|
8490
|
+
color: "var(--bw-text-color)",
|
|
8491
|
+
marginBottom: "12px",
|
|
8492
|
+
fontFamily: "var(--bw-font-family)",
|
|
8493
|
+
}, children: "1. Kontaktdaten" }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [u$1("div", { style: {
|
|
8494
|
+
display: "grid",
|
|
8495
|
+
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
|
|
8496
|
+
gap: "var(--bw-spacing)",
|
|
8497
|
+
}, children: [u$1("div", { children: [u$1("label", { htmlFor: "customerName", style: labelStyle, children: "Name *" }), u$1("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyle, placeholder: "Dein vollst\u00E4ndiger Name", onFocus: (e) => {
|
|
8498
|
+
e.target.style.borderColor = "var(--bw-highlight-color)";
|
|
8499
|
+
e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
|
|
8500
|
+
}, onBlur: (e) => {
|
|
8501
|
+
e.target.style.borderColor = "var(--bw-border-color)";
|
|
8502
|
+
e.target.style.boxShadow = "none";
|
|
8503
|
+
} }), customerNameError && (u$1("p", { style: {
|
|
8504
|
+
color: "var(--bw-error-color)",
|
|
8505
|
+
fontSize: "var(--bw-font-size)",
|
|
8506
|
+
marginTop: "4px",
|
|
8507
|
+
fontFamily: "var(--bw-font-family)",
|
|
8508
|
+
}, children: customerNameError.message }))] }), u$1("div", { children: [u$1("label", { htmlFor: "customerEmail", style: labelStyle, children: "E-Mail *" }), u$1("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyle, placeholder: "deine@email.de", onFocus: (e) => {
|
|
8509
|
+
e.target.style.borderColor = "var(--bw-highlight-color)";
|
|
8510
|
+
e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
|
|
8511
|
+
}, onBlur: (e) => {
|
|
8512
|
+
e.target.style.borderColor = "var(--bw-border-color)";
|
|
8513
|
+
e.target.style.boxShadow = "none";
|
|
8514
|
+
} }), customerEmailError && (u$1("p", { style: {
|
|
8515
|
+
color: "var(--bw-error-color)",
|
|
8516
|
+
fontSize: "var(--bw-font-size)",
|
|
8517
|
+
marginTop: "4px",
|
|
8518
|
+
fontFamily: "var(--bw-font-family)",
|
|
8519
|
+
}, children: customerEmailError.message }))] })] }), u$1("div", { children: [u$1("label", { htmlFor: "customerPhone", style: labelStyle, children: "Telefon (optional)" }), u$1("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyle, placeholder: "+49 123 456789", onFocus: (e) => {
|
|
8520
|
+
e.target.style.borderColor = "var(--bw-highlight-color)";
|
|
8521
|
+
e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
|
|
8522
|
+
}, onBlur: (e) => {
|
|
8523
|
+
e.target.style.borderColor = "var(--bw-border-color)";
|
|
8524
|
+
e.target.style.boxShadow = "none";
|
|
8525
|
+
} })] })] })] }), u$1("div", { style: {
|
|
8526
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
8527
|
+
border: `1px solid var(--bw-border-color)`,
|
|
8528
|
+
backdropFilter: "blur(4px)",
|
|
8529
|
+
borderRadius: "var(--bw-border-radius)",
|
|
8530
|
+
padding: "var(--bw-spacing)",
|
|
8531
|
+
marginBottom: "var(--bw-spacing-large)",
|
|
8532
|
+
}, children: [u$1("h2", { style: {
|
|
8533
|
+
fontSize: "var(--bw-font-size-large)",
|
|
8534
|
+
fontWeight: "600",
|
|
8535
|
+
color: "var(--bw-text-color)",
|
|
8536
|
+
marginBottom: "12px",
|
|
8537
|
+
fontFamily: "var(--bw-font-family)",
|
|
8538
|
+
}, children: "2. Teilnehmer" }), u$1("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: watchedParticipants.map((participant, index) => (u$1("div", { style: { display: "flex", gap: "12px", alignItems: "end" }, children: [u$1("div", { style: { flex: 1 }, children: [u$1("label", { htmlFor: `participant-name-${index}`, style: labelStyle, children: "Name *" }), u$1("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyle, placeholder: "Teilnehmername", onFocus: (e) => {
|
|
8431
8539
|
e.target.style.borderColor = "var(--bw-highlight-color)";
|
|
8432
8540
|
e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)";
|
|
8433
8541
|
}, onBlur: (e) => {
|
|
@@ -8616,7 +8724,7 @@
|
|
|
8616
8724
|
"November",
|
|
8617
8725
|
"Dezember",
|
|
8618
8726
|
];
|
|
8619
|
-
function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, }) {
|
|
8727
|
+
function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, config, }) {
|
|
8620
8728
|
const [selectedEventInstanceId, setSelectedEventInstanceId] = d(null);
|
|
8621
8729
|
const [openMonths, setOpenMonths] = d(new Set());
|
|
8622
8730
|
const getEventsForMonth = (monthIndex) => {
|
|
@@ -8657,180 +8765,210 @@
|
|
|
8657
8765
|
onBackToEventTypes();
|
|
8658
8766
|
};
|
|
8659
8767
|
if (eventInstances.length === 0) {
|
|
8660
|
-
return (u$1(
|
|
8661
|
-
|
|
8662
|
-
|
|
8663
|
-
|
|
8664
|
-
|
|
8665
|
-
|
|
8666
|
-
|
|
8667
|
-
|
|
8668
|
-
|
|
8669
|
-
|
|
8670
|
-
|
|
8671
|
-
|
|
8672
|
-
|
|
8673
|
-
|
|
8674
|
-
|
|
8675
|
-
|
|
8676
|
-
|
|
8677
|
-
|
|
8678
|
-
|
|
8679
|
-
|
|
8680
|
-
|
|
8681
|
-
|
|
8682
|
-
|
|
8683
|
-
|
|
8684
|
-
|
|
8685
|
-
|
|
8686
|
-
|
|
8687
|
-
|
|
8688
|
-
|
|
8689
|
-
|
|
8690
|
-
|
|
8691
|
-
|
|
8692
|
-
|
|
8693
|
-
|
|
8694
|
-
|
|
8695
|
-
|
|
8696
|
-
|
|
8697
|
-
return "var(--bw-success-color)";
|
|
8698
|
-
if (isHighAvailability)
|
|
8699
|
-
return "var(--bw-warning-color)";
|
|
8700
|
-
if (isMediumAvailability)
|
|
8701
|
-
return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
|
|
8702
|
-
if (isLowAvailability)
|
|
8703
|
-
return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
|
|
8704
|
-
return "var(--bw-highlight-color)";
|
|
8705
|
-
};
|
|
8706
|
-
return (u$1("div", { style: {
|
|
8707
|
-
position: "relative",
|
|
8708
|
-
cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
|
|
8709
|
-
? "pointer"
|
|
8710
|
-
: "not-allowed",
|
|
8711
|
-
border: "1px solid",
|
|
8712
|
-
backgroundColor: "var(--bw-surface-color)",
|
|
8713
|
-
borderRadius: "var(--bw-border-radius)",
|
|
8714
|
-
padding: "8px 10px",
|
|
8715
|
-
transition: "all 0.2s ease",
|
|
8716
|
-
opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
|
|
8717
|
-
filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
|
|
8718
|
-
borderColor: getAvailabilityColor(),
|
|
8768
|
+
return (u$1(k$2, { children: [u$1("style", { children: `
|
|
8769
|
+
@media (max-width: 600px) {
|
|
8770
|
+
.bw-event-instance-list {
|
|
8771
|
+
padding: 8px !important;
|
|
8772
|
+
gap: 8px !important;
|
|
8773
|
+
}
|
|
8774
|
+
.bw-event-instance-card {
|
|
8775
|
+
padding: 6px 4px !important;
|
|
8776
|
+
font-size: 0.95rem !important;
|
|
8777
|
+
}
|
|
8778
|
+
.bw-event-instance-datebox {
|
|
8779
|
+
width: 32px !important;
|
|
8780
|
+
height: 32px !important;
|
|
8781
|
+
font-size: 1rem !important;
|
|
8782
|
+
}
|
|
8783
|
+
.bw-event-instance-title {
|
|
8784
|
+
font-size: 1rem !important;
|
|
8785
|
+
}
|
|
8786
|
+
.bw-event-instance-price {
|
|
8787
|
+
font-size: 1.1rem !important;
|
|
8788
|
+
}
|
|
8789
|
+
}
|
|
8790
|
+
` }), u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Keine verf\u00FCgbaren Termine", config: config, children: u$1("div", { className: "bw-event-instance-list", style: {
|
|
8791
|
+
display: "flex",
|
|
8792
|
+
alignItems: "center",
|
|
8793
|
+
justifyContent: "center",
|
|
8794
|
+
minHeight: "400px",
|
|
8795
|
+
textAlign: "center",
|
|
8796
|
+
padding: "var(--bw-spacing)",
|
|
8797
|
+
}, children: u$1("div", { children: [u$1("div", { style: {
|
|
8798
|
+
margin: "0 auto 16px",
|
|
8799
|
+
fontSize: "48px",
|
|
8800
|
+
}, children: "\uD83D\uDCC5" }), u$1("h3", { style: {
|
|
8801
|
+
marginBottom: "8px",
|
|
8802
|
+
fontWeight: "600",
|
|
8803
|
+
fontSize: "var(--bw-font-size-large)",
|
|
8804
|
+
color: "var(--bw-text-muted)",
|
|
8719
8805
|
fontFamily: "var(--bw-font-family)",
|
|
8720
|
-
},
|
|
8721
|
-
|
|
8722
|
-
|
|
8723
|
-
|
|
8724
|
-
|
|
8725
|
-
|
|
8726
|
-
|
|
8727
|
-
|
|
8728
|
-
|
|
8729
|
-
|
|
8730
|
-
|
|
8731
|
-
|
|
8732
|
-
|
|
8733
|
-
|
|
8734
|
-
|
|
8735
|
-
|
|
8736
|
-
|
|
8737
|
-
|
|
8738
|
-
|
|
8739
|
-
|
|
8740
|
-
|
|
8741
|
-
|
|
8742
|
-
|
|
8743
|
-
|
|
8744
|
-
|
|
8745
|
-
|
|
8746
|
-
}, children: u$1("div", { style: {
|
|
8747
|
-
width: "32px",
|
|
8748
|
-
height: "32px",
|
|
8749
|
-
color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
|
|
8750
|
-
animation: "spin 1s linear infinite",
|
|
8751
|
-
fontSize: "32px",
|
|
8752
|
-
}, children: "\u27F3" }) })), u$1("div", { style: {
|
|
8753
|
-
display: "flex",
|
|
8754
|
-
justifyContent: "space-between",
|
|
8755
|
-
width: "100%",
|
|
8756
|
-
alignItems: "start",
|
|
8757
|
-
gap: "12px",
|
|
8758
|
-
marginBottom: "4px",
|
|
8759
|
-
}, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { style: {
|
|
8760
|
-
fontSize: "var(--bw-font-size)",
|
|
8761
|
-
transition: "all 0.2s ease",
|
|
8762
|
-
borderRadius: "var(--bw-border-radius-small)",
|
|
8763
|
-
borderTop: `4px solid ${getAvailabilityColor()}`,
|
|
8764
|
-
border: "1px solid",
|
|
8765
|
-
width: "40px",
|
|
8766
|
-
height: "40px",
|
|
8767
|
-
display: "flex",
|
|
8768
|
-
alignItems: "center",
|
|
8769
|
-
justifyContent: "center",
|
|
8770
|
-
fontWeight: "bold",
|
|
8771
|
-
color: "var(--bw-text-color)",
|
|
8772
|
-
borderColor: getAvailabilityColor(),
|
|
8773
|
-
backgroundColor: "var(--bw-background-color)",
|
|
8774
|
-
}, children: startDate.getDate() }), u$1("div", { style: {
|
|
8775
|
-
fontSize: "var(--bw-font-size)",
|
|
8776
|
-
color: "var(--bw-text-color)",
|
|
8777
|
-
display: "flex",
|
|
8778
|
-
flexDirection: "column",
|
|
8779
|
-
alignItems: "start",
|
|
8780
|
-
justifyContent: "start",
|
|
8781
|
-
lineHeight: "1.2",
|
|
8782
|
-
}, children: [u$1("span", { style: {
|
|
8783
|
-
fontWeight: "600",
|
|
8784
|
-
marginBottom: "2px",
|
|
8785
|
-
}, children: formatWeekday(event.startTime) }), u$1("span", { style: {
|
|
8786
|
-
color: "var(--bw-text-muted)",
|
|
8787
|
-
fontSize: "14px",
|
|
8788
|
-
}, children: formatTime(event.startTime) })] })] }), u$1("div", { style: {
|
|
8789
|
-
textAlign: "right",
|
|
8790
|
-
display: "flex",
|
|
8791
|
-
flexDirection: "column",
|
|
8792
|
-
alignItems: "end",
|
|
8793
|
-
}, children: [u$1("div", { style: {
|
|
8794
|
-
color: "var(--bw-highlight-color)",
|
|
8795
|
-
fontSize: "var(--bw-font-size-large)",
|
|
8796
|
-
fontWeight: "bold",
|
|
8797
|
-
}, children: formatCurrency(event.price) }), event.deposit && event.deposit > 0 && (u$1("div", { style: {
|
|
8798
|
-
fontSize: "12px",
|
|
8799
|
-
color: "var(--bw-text-muted)",
|
|
8800
|
-
}, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$1("h4", { style: {
|
|
8801
|
-
fontSize: "var(--bw-font-size)",
|
|
8802
|
-
fontWeight: "600",
|
|
8803
|
-
color: "var(--bw-text-color)",
|
|
8804
|
-
lineHeight: "1.25",
|
|
8805
|
-
margin: "0 0 2px 0",
|
|
8806
|
-
display: "flex",
|
|
8807
|
-
alignItems: "center",
|
|
8808
|
-
gap: "8px",
|
|
8809
|
-
}, children: [event.name, u$1("span", { style: {
|
|
8810
|
-
fontSize: "12px",
|
|
8811
|
-
fontWeight: 400,
|
|
8812
|
-
color: "var(--bw-text-muted)",
|
|
8813
|
-
marginLeft: "6px",
|
|
8814
|
-
background: "var(--bw-surface-muted)",
|
|
8815
|
-
borderRadius: "8px",
|
|
8816
|
-
padding: "2px 8px",
|
|
8817
|
-
}, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$1("p", { style: {
|
|
8818
|
-
fontSize: "12px",
|
|
8819
|
-
color: "var(--bw-text-muted)",
|
|
8820
|
-
marginTop: "8px",
|
|
8821
|
-
display: "-webkit-box",
|
|
8822
|
-
WebkitBoxOrient: "vertical",
|
|
8823
|
-
WebkitLineClamp: 2,
|
|
8824
|
-
overflow: "hidden",
|
|
8825
|
-
margin: "0",
|
|
8826
|
-
lineHeight: "1.3",
|
|
8827
|
-
}, children: event.notes }))] }, event.id));
|
|
8828
|
-
}) }) }, month))) }) }), u$1("style", { children: `
|
|
8829
|
-
@keyframes spin {
|
|
8830
|
-
from { transform: rotate(0deg); }
|
|
8831
|
-
to { transform: rotate(360deg); }
|
|
8806
|
+
}, children: "Keine verf\u00FCgbaren Termine" }), u$1("p", { style: {
|
|
8807
|
+
color: "var(--bw-text-muted)",
|
|
8808
|
+
fontFamily: "var(--bw-font-family)",
|
|
8809
|
+
}, children: "F\u00FCr diesen Event-Typ sind derzeit keine Termine verf\u00FCgbar." })] }) }) })] }));
|
|
8810
|
+
}
|
|
8811
|
+
return (u$1(k$2, { children: [u$1("style", { children: `
|
|
8812
|
+
@media (max-width: 600px) {
|
|
8813
|
+
.bw-event-instance-list {
|
|
8814
|
+
padding: 8px !important;
|
|
8815
|
+
gap: 8px !important;
|
|
8816
|
+
}
|
|
8817
|
+
.bw-event-instance-card {
|
|
8818
|
+
padding: 6px 4px !important;
|
|
8819
|
+
font-size: 0.95rem !important;
|
|
8820
|
+
}
|
|
8821
|
+
.bw-event-instance-datebox {
|
|
8822
|
+
width: 32px !important;
|
|
8823
|
+
height: 32px !important;
|
|
8824
|
+
font-size: 1rem !important;
|
|
8825
|
+
}
|
|
8826
|
+
.bw-event-instance-title {
|
|
8827
|
+
font-size: 1rem !important;
|
|
8828
|
+
}
|
|
8829
|
+
.bw-event-instance-price {
|
|
8830
|
+
font-size: 1.1rem !important;
|
|
8831
|
+
}
|
|
8832
8832
|
}
|
|
8833
|
-
` })
|
|
8833
|
+
` }), u$1(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, width: "500px", config: config, children: u$1("div", { className: "bw-event-instance-list", style: { padding: "var(--bw-spacing)" }, children: u$1("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => (u$1(Accordion, { title: month, priceInfo: `ab ${formatCurrency(minPrice)}`, isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$1("div", { style: {
|
|
8834
|
+
display: "flex",
|
|
8835
|
+
flexDirection: "column",
|
|
8836
|
+
gap: "12px",
|
|
8837
|
+
paddingTop: "12px",
|
|
8838
|
+
}, children: events.map((event) => {
|
|
8839
|
+
const availableSpots = event.maxParticipants - event.participantCount;
|
|
8840
|
+
const isFullyBooked = availableSpots === 0;
|
|
8841
|
+
const startDate = new Date(event.startTime);
|
|
8842
|
+
const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
|
|
8843
|
+
const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
|
|
8844
|
+
const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
|
|
8845
|
+
const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
|
|
8846
|
+
const isPastEvent = today.toISOString() >= startDate.toISOString();
|
|
8847
|
+
const getAvailabilityColor = () => {
|
|
8848
|
+
if (isFullAvailability)
|
|
8849
|
+
return "var(--bw-success-color)";
|
|
8850
|
+
if (isHighAvailability)
|
|
8851
|
+
return "var(--bw-warning-color)";
|
|
8852
|
+
if (isMediumAvailability)
|
|
8853
|
+
return "var(--bw-availability-medium-color, #f97316)"; // orange fallback
|
|
8854
|
+
if (isLowAvailability)
|
|
8855
|
+
return "var(--bw-availability-low-color, #8b5cf6)"; // purple fallback
|
|
8856
|
+
return "var(--bw-highlight-color)";
|
|
8857
|
+
};
|
|
8858
|
+
return (u$1("div", { className: "bw-event-instance-card", style: {
|
|
8859
|
+
position: "relative",
|
|
8860
|
+
cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
|
|
8861
|
+
? "pointer"
|
|
8862
|
+
: "not-allowed",
|
|
8863
|
+
border: "1px solid",
|
|
8864
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
8865
|
+
borderRadius: "var(--bw-border-radius)",
|
|
8866
|
+
padding: "8px 10px",
|
|
8867
|
+
transition: "all 0.2s ease",
|
|
8868
|
+
opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
|
|
8869
|
+
filter: isFullyBooked || isPastEvent ? "grayscale(100%)" : "none",
|
|
8870
|
+
borderColor: getAvailabilityColor(),
|
|
8871
|
+
fontFamily: "var(--bw-font-family)",
|
|
8872
|
+
}, onClick: () => {
|
|
8873
|
+
if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
|
|
8874
|
+
handleEventInstanceSelect(event);
|
|
8875
|
+
}
|
|
8876
|
+
}, onMouseEnter: (e) => {
|
|
8877
|
+
if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
|
|
8878
|
+
e.currentTarget.style.transform = "scale(1.02)";
|
|
8879
|
+
e.currentTarget.style.backgroundColor =
|
|
8880
|
+
"var(--bw-surface-hover, rgba(0, 0, 0, 0.05))";
|
|
8881
|
+
}
|
|
8882
|
+
}, onMouseLeave: (e) => {
|
|
8883
|
+
if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
|
|
8884
|
+
e.currentTarget.style.transform = "scale(1)";
|
|
8885
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
8886
|
+
}
|
|
8887
|
+
}, children: [selectedEventInstanceId === event.id && (u$1("div", { style: {
|
|
8888
|
+
position: "absolute",
|
|
8889
|
+
top: 0,
|
|
8890
|
+
left: 0,
|
|
8891
|
+
width: "100%",
|
|
8892
|
+
height: "100%",
|
|
8893
|
+
backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
|
|
8894
|
+
borderRadius: "var(--bw-border-radius)",
|
|
8895
|
+
display: "flex",
|
|
8896
|
+
alignItems: "center",
|
|
8897
|
+
justifyContent: "center",
|
|
8898
|
+
}, children: u$1("div", { style: {
|
|
8899
|
+
width: "32px",
|
|
8900
|
+
height: "32px",
|
|
8901
|
+
color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
|
|
8902
|
+
animation: "spin 1s linear infinite",
|
|
8903
|
+
fontSize: "32px",
|
|
8904
|
+
}, children: "\u27F3" }) })), u$1("div", { style: {
|
|
8905
|
+
display: "flex",
|
|
8906
|
+
justifyContent: "space-between",
|
|
8907
|
+
width: "100%",
|
|
8908
|
+
alignItems: "start",
|
|
8909
|
+
gap: "12px",
|
|
8910
|
+
marginBottom: "4px",
|
|
8911
|
+
}, children: [u$1("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$1("div", { className: "bw-event-instance-datebox", style: {
|
|
8912
|
+
fontSize: "var(--bw-font-size)",
|
|
8913
|
+
transition: "all 0.2s ease",
|
|
8914
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
8915
|
+
borderTop: `4px solid ${getAvailabilityColor()}`,
|
|
8916
|
+
border: "1px solid",
|
|
8917
|
+
width: "40px",
|
|
8918
|
+
height: "40px",
|
|
8919
|
+
display: "flex",
|
|
8920
|
+
alignItems: "center",
|
|
8921
|
+
justifyContent: "center",
|
|
8922
|
+
fontWeight: "bold",
|
|
8923
|
+
color: "var(--bw-text-color)",
|
|
8924
|
+
borderColor: getAvailabilityColor(),
|
|
8925
|
+
backgroundColor: "var(--bw-background-color)",
|
|
8926
|
+
}, children: startDate.getDate() }), u$1("div", { style: {
|
|
8927
|
+
fontSize: "var(--bw-font-size)",
|
|
8928
|
+
color: "var(--bw-text-color)",
|
|
8929
|
+
display: "flex",
|
|
8930
|
+
flexDirection: "column",
|
|
8931
|
+
alignItems: "start",
|
|
8932
|
+
justifyContent: "start",
|
|
8933
|
+
lineHeight: "1.2",
|
|
8934
|
+
}, children: [u$1("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), u$1("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) })] })] }), u$1("div", { className: "bw-event-instance-price", style: {
|
|
8935
|
+
textAlign: "right",
|
|
8936
|
+
display: "flex",
|
|
8937
|
+
flexDirection: "column",
|
|
8938
|
+
alignItems: "end",
|
|
8939
|
+
}, children: [u$1("div", { style: {
|
|
8940
|
+
color: "var(--bw-highlight-color)",
|
|
8941
|
+
fontSize: "var(--bw-font-size-large)",
|
|
8942
|
+
fontWeight: "bold",
|
|
8943
|
+
}, children: formatCurrency(event.price) }), event.deposit && event.deposit > 0 && (u$1("div", { style: { fontSize: "12px", color: "var(--bw-text-muted)" }, children: ["ab ", formatCurrency(event.deposit)] }))] })] }), u$1("h4", { className: "bw-event-instance-title", style: {
|
|
8944
|
+
fontSize: "var(--bw-font-size)",
|
|
8945
|
+
fontWeight: "600",
|
|
8946
|
+
color: "var(--bw-text-color)",
|
|
8947
|
+
lineHeight: "1.25",
|
|
8948
|
+
margin: "0 0 2px 0",
|
|
8949
|
+
display: "flex",
|
|
8950
|
+
alignItems: "center",
|
|
8951
|
+
gap: "8px",
|
|
8952
|
+
}, children: [event.name, u$1("span", { style: {
|
|
8953
|
+
fontSize: "12px",
|
|
8954
|
+
fontWeight: 400,
|
|
8955
|
+
color: "var(--bw-text-muted)",
|
|
8956
|
+
marginLeft: "6px",
|
|
8957
|
+
background: "var(--bw-surface-muted)",
|
|
8958
|
+
borderRadius: "8px",
|
|
8959
|
+
padding: "2px 8px",
|
|
8960
|
+
}, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), event.notes && (u$1("p", { style: {
|
|
8961
|
+
fontSize: "12px",
|
|
8962
|
+
color: "var(--bw-text-muted)",
|
|
8963
|
+
marginTop: "8px",
|
|
8964
|
+
display: "-webkit-box",
|
|
8965
|
+
WebkitBoxOrient: "vertical",
|
|
8966
|
+
WebkitLineClamp: 2,
|
|
8967
|
+
overflow: "hidden",
|
|
8968
|
+
margin: "0",
|
|
8969
|
+
lineHeight: "1.3",
|
|
8970
|
+
}, children: event.notes }))] }, event.id));
|
|
8971
|
+
}) }) }, month))) }) }) })] }));
|
|
8834
8972
|
}
|
|
8835
8973
|
|
|
8836
8974
|
function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, }) {
|
|
@@ -9877,20 +10015,98 @@
|
|
|
9877
10015
|
};
|
|
9878
10016
|
// Loading state
|
|
9879
10017
|
if (isLoading) {
|
|
9880
|
-
return (u$1(StyleProvider, { config: config, children: u$1("div", {
|
|
9881
|
-
|
|
9882
|
-
|
|
9883
|
-
|
|
9884
|
-
|
|
9885
|
-
|
|
9886
|
-
|
|
9887
|
-
|
|
9888
|
-
|
|
9889
|
-
|
|
9890
|
-
|
|
9891
|
-
|
|
9892
|
-
|
|
9893
|
-
|
|
10018
|
+
return (u$1(StyleProvider, { config: config, children: u$1("div", { style: {
|
|
10019
|
+
width: "100%",
|
|
10020
|
+
maxWidth: 1600,
|
|
10021
|
+
margin: "0 auto",
|
|
10022
|
+
boxSizing: "border-box",
|
|
10023
|
+
padding: 24,
|
|
10024
|
+
}, children: u$1("div", { style: {
|
|
10025
|
+
display: "flex",
|
|
10026
|
+
flexWrap: "wrap",
|
|
10027
|
+
justifyContent: "center",
|
|
10028
|
+
gap: "32px",
|
|
10029
|
+
width: "100%",
|
|
10030
|
+
boxSizing: "border-box",
|
|
10031
|
+
}, children: [1, 2].map((_, idx) => (u$1("div", { style: {
|
|
10032
|
+
position: "relative",
|
|
10033
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
10034
|
+
border: `1px solid var(--bw-border-color)`,
|
|
10035
|
+
borderRadius: "var(--bw-border-radius)",
|
|
10036
|
+
overflow: "hidden",
|
|
10037
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
10038
|
+
fontFamily: "var(--bw-font-family)",
|
|
10039
|
+
minWidth: 350,
|
|
10040
|
+
maxWidth: 500,
|
|
10041
|
+
flex: "1 1 350px",
|
|
10042
|
+
display: "flex",
|
|
10043
|
+
flexDirection: "column",
|
|
10044
|
+
minHeight: 650,
|
|
10045
|
+
boxSizing: "border-box",
|
|
10046
|
+
}, children: [u$1("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$1("div", { style: {
|
|
10047
|
+
width: 80,
|
|
10048
|
+
height: 20,
|
|
10049
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
10050
|
+
background: "var(--bw-highlight-muted)",
|
|
10051
|
+
} }) }), u$1("div", { style: {
|
|
10052
|
+
position: "relative",
|
|
10053
|
+
width: "100%",
|
|
10054
|
+
height: "300px",
|
|
10055
|
+
background: "var(--bw-highlight-subtle)",
|
|
10056
|
+
} }), u$1("div", { style: { padding: "24px" }, children: [u$1("div", { style: {
|
|
10057
|
+
width: 120,
|
|
10058
|
+
height: 16,
|
|
10059
|
+
borderRadius: 8,
|
|
10060
|
+
background: "var(--bw-highlight-muted)",
|
|
10061
|
+
marginBottom: 8,
|
|
10062
|
+
} }), u$1("div", { style: {
|
|
10063
|
+
width: "70%",
|
|
10064
|
+
height: 28,
|
|
10065
|
+
borderRadius: 8,
|
|
10066
|
+
background: "var(--bw-text-subtle)",
|
|
10067
|
+
marginBottom: 12,
|
|
10068
|
+
} }), u$1("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [u$1("div", { style: {
|
|
10069
|
+
width: 16,
|
|
10070
|
+
height: 16,
|
|
10071
|
+
borderRadius: 8,
|
|
10072
|
+
background: "var(--bw-text-subtle)",
|
|
10073
|
+
} }), u$1("div", { style: {
|
|
10074
|
+
width: 60,
|
|
10075
|
+
height: 14,
|
|
10076
|
+
borderRadius: 6,
|
|
10077
|
+
background: "var(--bw-text-subtle)",
|
|
10078
|
+
} })] }), u$1("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [u$1("div", { style: {
|
|
10079
|
+
width: 16,
|
|
10080
|
+
height: 16,
|
|
10081
|
+
borderRadius: 8,
|
|
10082
|
+
background: "var(--bw-text-subtle)",
|
|
10083
|
+
} }), u$1("div", { style: {
|
|
10084
|
+
width: 120,
|
|
10085
|
+
height: 14,
|
|
10086
|
+
borderRadius: 6,
|
|
10087
|
+
background: "var(--bw-text-subtle)",
|
|
10088
|
+
} })] }), u$1("div", { style: {
|
|
10089
|
+
width: "100%",
|
|
10090
|
+
height: 96,
|
|
10091
|
+
borderRadius: 8,
|
|
10092
|
+
background: "var(--bw-text-muted)",
|
|
10093
|
+
margin: "10px 0",
|
|
10094
|
+
} }), u$1("div", { style: {
|
|
10095
|
+
display: "flex",
|
|
10096
|
+
justifyContent: "space-between",
|
|
10097
|
+
alignItems: "center",
|
|
10098
|
+
marginTop: 20,
|
|
10099
|
+
}, children: [u$1("div", { style: {
|
|
10100
|
+
width: 80,
|
|
10101
|
+
height: 32,
|
|
10102
|
+
borderRadius: 8,
|
|
10103
|
+
background: "var(--bw-text-subtle)",
|
|
10104
|
+
} }), u$1("div", { style: {
|
|
10105
|
+
width: 120,
|
|
10106
|
+
height: 40,
|
|
10107
|
+
borderRadius: "var(--bw-border-radius)",
|
|
10108
|
+
background: "var(--bw-highlight-muted)",
|
|
10109
|
+
} })] })] })] }, idx))) }) }) }));
|
|
9894
10110
|
}
|
|
9895
10111
|
// Error state
|
|
9896
10112
|
if (error) {
|
|
@@ -9941,7 +10157,7 @@
|
|
|
9941
10157
|
}, isOpen: currentStep === "eventInstances", onClose: () => {
|
|
9942
10158
|
setShowingPreview(true);
|
|
9943
10159
|
setCurrentStep("eventTypes");
|
|
9944
|
-
} }) }));
|
|
10160
|
+
}, config: config }) }));
|
|
9945
10161
|
}
|
|
9946
10162
|
if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
|
|
9947
10163
|
// Button mode - show button that opens sidebar/booking directly
|
|
@@ -9962,7 +10178,7 @@
|
|
|
9962
10178
|
boxShadow: "var(--bw-shadow-md)",
|
|
9963
10179
|
cursor: "pointer",
|
|
9964
10180
|
}, onClick: () => setCurrentStep("booking"), children: config.buttonText ||
|
|
9965
|
-
(isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false) }), 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 }))] }) }));
|
|
10181
|
+
(isDirectInstanceMode ? "Jetzt buchen" : "Jetzt Termin auswählen") }), u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), config: config }), 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 }))] }) }));
|
|
9966
10182
|
}
|
|
9967
10183
|
// Cards mode (default) - show event type selection
|
|
9968
10184
|
const cardsView = (u$1(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect }));
|
|
@@ -9995,7 +10211,7 @@
|
|
|
9995
10211
|
};
|
|
9996
10212
|
};
|
|
9997
10213
|
const backHandlers = getBackHandlers();
|
|
9998
|
-
return (u$1(StyleProvider, { config: config, children: [cardsView, u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes }), 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 }))] }));
|
|
10214
|
+
return (u$1(StyleProvider, { config: config, children: [cardsView, u$1(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, config: config }), 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 }))] }));
|
|
9999
10215
|
}
|
|
10000
10216
|
|
|
10001
10217
|
// Export init function for vanilla JS usage with Preact
|