@bigz-app/booking-widget 0.3.5 → 0.3.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.
Files changed (8) hide show
  1. package/dist/booking-widget.js +167 -158
  2. package/dist/booking-widget.js.map +1 -1
  3. package/dist/components/EventInstanceSelection.d.ts.map +1 -1
  4. package/dist/index.cjs +167 -158
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.esm.js +167 -158
  7. package/dist/index.esm.js.map +1 -1
  8. package/package.json +1 -2
package/dist/booking-widget.js CHANGED
@@ -10993,16 +10993,7 @@
10993
10993
  } }) }));
10994
10994
  function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
10995
10995
  const [selectedEventInstanceId, setSelectedEventInstanceId] = d$1(null);
10996
- const [openMonths, setOpenMonths] = d$1(new Set());
10997
- const getEventsForMonth = (monthIndex) => {
10998
- return eventInstances.filter((instance) => new Date(instance.startTime).getMonth() === monthIndex);
10999
- };
11000
- const getMinPriceForMonth = (monthIndex) => {
11001
- const monthEvents = getEventsForMonth(monthIndex);
11002
- if (monthEvents.length === 0)
11003
- return 0;
11004
- return Math.min(...monthEvents.map((event) => event.price));
11005
- };
10996
+ const [openGroups, setOpenGroups] = d$1(new Set());
11006
10997
  const getMonthPriceDisplayInfo = (minPrice) => {
11007
10998
  return getPriceDisplayInfo(minPrice, yearPrices);
11008
10999
  };
@@ -11012,27 +11003,48 @@
11012
11003
  .filter((instance) => new Date(instance.startTime).getFullYear() === currentYear)
11013
11004
  .map((instance) => instance.price);
11014
11005
  const today = new Date();
11015
- // Get months that have events
11016
- const monthsWithEvents = months
11017
- .map((month, index) => ({
11018
- month,
11019
- index,
11020
- events: getEventsForMonth(index).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()),
11021
- minPrice: getMinPriceForMonth(index),
11022
- }))
11023
- .filter((monthData) => monthData.events.length > 0);
11006
+ // Group events by month and year, then sort chronologically (e.g., Aug 2025 before Apr 2026)
11007
+ const monthYearGroups = (() => {
11008
+ const groupsMap = new Map();
11009
+ for (const instance of eventInstances) {
11010
+ const date = new Date(instance.startTime);
11011
+ const year = date.getFullYear();
11012
+ const monthIndex = date.getMonth();
11013
+ const key = `${year}-${monthIndex}`;
11014
+ if (!groupsMap.has(key)) {
11015
+ groupsMap.set(key, {
11016
+ key,
11017
+ year,
11018
+ monthIndex,
11019
+ label: `${months[monthIndex]} ${year}`,
11020
+ events: [],
11021
+ minPrice: Number.POSITIVE_INFINITY,
11022
+ });
11023
+ }
11024
+ const group = groupsMap.get(key);
11025
+ group.events.push(instance);
11026
+ if (instance.price < group.minPrice)
11027
+ group.minPrice = instance.price;
11028
+ }
11029
+ return Array.from(groupsMap.values())
11030
+ .map((group) => ({
11031
+ ...group,
11032
+ events: group.events.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()),
11033
+ }))
11034
+ .sort((a, b) => (a.year === b.year ? a.monthIndex - b.monthIndex : a.year - b.year));
11035
+ })();
11024
11036
  const handleEventInstanceSelect = (eventInstance) => {
11025
11037
  setSelectedEventInstanceId(eventInstance.id);
11026
11038
  onEventInstanceSelect(eventInstance);
11027
11039
  };
11028
- const toggleMonth = (monthIndex) => {
11029
- if (openMonths.has(monthIndex)) {
11040
+ const toggleGroup = (key) => {
11041
+ if (openGroups.has(key)) {
11030
11042
  // Close if already open
11031
- setOpenMonths(new Set());
11043
+ setOpenGroups(new Set());
11032
11044
  }
11033
11045
  else {
11034
11046
  // Open only this one, close others
11035
- setOpenMonths(new Set([monthIndex]));
11047
+ setOpenGroups(new Set([key]));
11036
11048
  }
11037
11049
  };
11038
11050
  const handleClose = () => {
@@ -11289,10 +11301,7 @@
11289
11301
  minHeight: "400px",
11290
11302
  textAlign: "center",
11291
11303
  padding: "var(--bw-spacing)",
11292
- }, children: u$2("div", { children: [u$2("div", { style: {
11293
- margin: "0 auto 16px",
11294
- fontSize: "48px",
11295
- }, children: "\uD83D\uDCC5" }), u$2("h3", { style: {
11304
+ }, children: u$2("div", { children: [u$2("h3", { style: {
11296
11305
  marginBottom: "8px",
11297
11306
  fontWeight: "600",
11298
11307
  fontSize: "var(--bw-font-size-large)",
@@ -11360,137 +11369,137 @@
11360
11369
  font-size: 1.1rem !important;
11361
11370
  }
11362
11371
  }
11363
- ` }), 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: {
11364
- display: "flex",
11365
- flexDirection: "column",
11366
- gap: "20px",
11367
- }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => {
11368
- const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
11369
- return (u$2(Accordion, { title: month, priceInfo: u$2("div", { style: {
11370
- fontSize: "1rem",
11371
- backgroundColor: monthPriceDisplayInfo
11372
- ? monthPriceDisplayInfo.backgroundColor
11373
- : "#14532d",
11374
- color: monthPriceDisplayInfo ? monthPriceDisplayInfo.textColor : "#4ade80",
11375
- fontWeight: 500,
11376
- marginLeft: "auto",
11377
- padding: "4px 8px",
11378
- borderRadius: "var(--bw-border-radius-small)",
11379
- border: monthPriceDisplayInfo ? "none" : undefined,
11380
- boxShadow: monthPriceDisplayInfo
11381
- ? "0 2px 4px rgba(0, 0, 0, 0.2)"
11382
- : undefined,
11383
- }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: u$2("div", { style: {
11384
- display: "flex",
11385
- flexDirection: "column",
11386
- gap: "12px",
11387
- paddingTop: "12px",
11388
- }, children: events.map((event) => {
11389
- const availableSpots = event.maxParticipants - event.participantCount;
11390
- const isFullyBooked = availableSpots === 0;
11391
- const startDate = new Date(event.startTime);
11392
- const isPastEvent = today.toISOString() >= startDate.toISOString();
11393
- return (u$2("div", { className: "bw-event-instance-card", style: {
11394
- position: "relative",
11395
- cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
11396
- ? "pointer"
11397
- : "not-allowed",
11398
- border: "1px solid var(--bw-border-color)",
11399
- backgroundColor: "var(--bw-surface-color)",
11400
- borderRadius: "var(--bw-border-radius)",
11401
- padding: "16px 20px",
11402
- transition: "all 0.2s ease",
11403
- opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
11404
- filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
11405
- fontFamily: "var(--bw-font-family)",
11406
- }, onClick: () => {
11407
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11408
- handleEventInstanceSelect(event);
11409
- }
11410
- }, onMouseEnter: (e) => {
11411
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11412
- e.currentTarget.style.transform = "scale(1.02)";
11413
- e.currentTarget.style.backgroundColor =
11414
- "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
11415
- }
11416
- }, onMouseLeave: (e) => {
11417
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11418
- e.currentTarget.style.transform = "scale(1)";
11419
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
11420
- }
11421
- }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
11422
- position: "absolute",
11423
- top: 0,
11424
- left: 0,
11425
- width: "100%",
11426
- height: "100%",
11427
- backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
11428
- borderRadius: "var(--bw-border-radius)",
11429
- display: "flex",
11430
- alignItems: "center",
11431
- justifyContent: "center",
11432
- }, children: u$2("div", { style: {
11433
- width: "32px",
11434
- height: "32px",
11435
- color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
11436
- animation: "spin 1s linear infinite",
11437
- fontSize: "32px",
11438
- }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
11439
- display: "flex",
11440
- justifyContent: "space-between",
11441
- width: "100%",
11442
- alignItems: "start",
11443
- gap: "12px",
11444
- marginBottom: "4px",
11445
- }, children: [u$2("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$2("div", { className: "bw-event-instance-datebox", style: {
11446
- fontSize: "var(--bw-font-size)",
11447
- transition: "all 0.2s ease",
11448
- borderRadius: "var(--bw-border-radius-small)",
11449
- borderTop: `4px solid var(--bw-border-color)`,
11450
- border: "1px solid var(--bw-border-color)",
11451
- width: "40px",
11452
- height: "40px",
11453
- display: "flex",
11454
- alignItems: "center",
11455
- justifyContent: "center",
11456
- fontWeight: "bold",
11457
- color: "var(--bw-text-color)",
11458
- backgroundColor: "var(--bw-background-color)",
11459
- }, children: startDate.getDate() }), u$2("div", { style: {
11460
- fontSize: "var(--bw-font-size)",
11461
- color: "var(--bw-text-color)",
11462
- display: "flex",
11463
- flexDirection: "column",
11464
- alignItems: "start",
11465
- justifyContent: "start",
11466
- lineHeight: "1.2",
11467
- }, 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) !==
11468
- 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) ===
11469
- 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: {
11470
- fontSize: "12px",
11471
- fontWeight: 400,
11472
- color: "var(--bw-text-muted)",
11473
- marginLeft: "6px",
11474
- background: "var(--bw-background-muted)",
11475
- whiteSpace: "nowrap",
11476
- }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "bw-event-instance-price", style: {
11477
- textAlign: "right",
11478
- display: "flex",
11479
- flexDirection: "column",
11480
- alignItems: "end",
11481
- }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "bw-event-instance-title", style: {
11482
- fontSize: "var(--bw-font-size)",
11483
- fontWeight: "600",
11484
- color: "var(--bw-text-color)",
11485
- lineHeight: "1.25",
11486
- margin: "0 0 2px 0",
11487
- display: "flex",
11488
- alignItems: "center",
11489
- gap: "8px",
11490
- maxWidth: "230px",
11491
- }, children: event.name }))] }, event.id));
11492
- }) }) }, month));
11493
- }) }) }) })] }));
11372
+ ` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Termin-Auswahl", children: [u$2("p", { className: "bw-event-instance-title", children: selectedEventType?.name }), u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
11373
+ display: "flex",
11374
+ flexDirection: "column",
11375
+ gap: "20px",
11376
+ }, children: monthYearGroups.map(({ key, label, events, minPrice }) => {
11377
+ const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
11378
+ return (u$2(Accordion, { title: label, priceInfo: u$2("div", { style: {
11379
+ fontSize: "1rem",
11380
+ backgroundColor: monthPriceDisplayInfo
11381
+ ? monthPriceDisplayInfo.backgroundColor
11382
+ : "#14532d",
11383
+ color: monthPriceDisplayInfo ? monthPriceDisplayInfo.textColor : "#4ade80",
11384
+ fontWeight: 500,
11385
+ marginLeft: "auto",
11386
+ padding: "4px 8px",
11387
+ borderRadius: "var(--bw-border-radius-small)",
11388
+ border: monthPriceDisplayInfo ? "none" : undefined,
11389
+ boxShadow: monthPriceDisplayInfo
11390
+ ? "0 2px 4px rgba(0, 0, 0, 0.2)"
11391
+ : undefined,
11392
+ }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: u$2("div", { style: {
11393
+ display: "flex",
11394
+ flexDirection: "column",
11395
+ gap: "12px",
11396
+ paddingTop: "12px",
11397
+ }, children: events.map((event) => {
11398
+ const availableSpots = event.maxParticipants - event.participantCount;
11399
+ const isFullyBooked = availableSpots === 0;
11400
+ const startDate = new Date(event.startTime);
11401
+ const isPastEvent = today.toISOString() >= startDate.toISOString();
11402
+ return (u$2("div", { className: "bw-event-instance-card", style: {
11403
+ position: "relative",
11404
+ cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
11405
+ ? "pointer"
11406
+ : "not-allowed",
11407
+ border: "1px solid var(--bw-border-color)",
11408
+ backgroundColor: "var(--bw-surface-color)",
11409
+ borderRadius: "var(--bw-border-radius)",
11410
+ padding: "16px 20px",
11411
+ transition: "all 0.2s ease",
11412
+ opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
11413
+ filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
11414
+ fontFamily: "var(--bw-font-family)",
11415
+ }, onClick: () => {
11416
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11417
+ handleEventInstanceSelect(event);
11418
+ }
11419
+ }, onMouseEnter: (e) => {
11420
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11421
+ e.currentTarget.style.transform = "scale(1.02)";
11422
+ e.currentTarget.style.backgroundColor =
11423
+ "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
11424
+ }
11425
+ }, onMouseLeave: (e) => {
11426
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11427
+ e.currentTarget.style.transform = "scale(1)";
11428
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
11429
+ }
11430
+ }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
11431
+ position: "absolute",
11432
+ top: 0,
11433
+ left: 0,
11434
+ width: "100%",
11435
+ height: "100%",
11436
+ backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
11437
+ borderRadius: "var(--bw-border-radius)",
11438
+ display: "flex",
11439
+ alignItems: "center",
11440
+ justifyContent: "center",
11441
+ }, children: u$2("div", { style: {
11442
+ width: "32px",
11443
+ height: "32px",
11444
+ color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
11445
+ animation: "spin 1s linear infinite",
11446
+ fontSize: "32px",
11447
+ }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
11448
+ display: "flex",
11449
+ justifyContent: "space-between",
11450
+ width: "100%",
11451
+ alignItems: "start",
11452
+ gap: "12px",
11453
+ marginBottom: "4px",
11454
+ }, children: [u$2("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$2("div", { className: "bw-event-instance-datebox", style: {
11455
+ fontSize: "var(--bw-font-size)",
11456
+ transition: "all 0.2s ease",
11457
+ borderRadius: "var(--bw-border-radius-small)",
11458
+ borderTop: `4px solid var(--bw-border-color)`,
11459
+ border: "1px solid var(--bw-border-color)",
11460
+ width: "40px",
11461
+ height: "40px",
11462
+ display: "flex",
11463
+ alignItems: "center",
11464
+ justifyContent: "center",
11465
+ fontWeight: "bold",
11466
+ color: "var(--bw-text-color)",
11467
+ backgroundColor: "var(--bw-background-color)",
11468
+ }, children: startDate.getDate() }), u$2("div", { style: {
11469
+ fontSize: "var(--bw-font-size)",
11470
+ color: "var(--bw-text-color)",
11471
+ display: "flex",
11472
+ flexDirection: "column",
11473
+ alignItems: "start",
11474
+ justifyContent: "start",
11475
+ lineHeight: "1.2",
11476
+ }, 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) !==
11477
+ 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) ===
11478
+ 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: {
11479
+ fontSize: "12px",
11480
+ fontWeight: 400,
11481
+ color: "var(--bw-text-muted)",
11482
+ marginLeft: "6px",
11483
+ background: "var(--bw-background-muted)",
11484
+ whiteSpace: "nowrap",
11485
+ }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "bw-event-instance-price", style: {
11486
+ textAlign: "right",
11487
+ display: "flex",
11488
+ flexDirection: "column",
11489
+ alignItems: "end",
11490
+ }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "bw-event-instance-title", style: {
11491
+ fontSize: "var(--bw-font-size)",
11492
+ fontWeight: "600",
11493
+ color: "var(--bw-text-color)",
11494
+ lineHeight: "1.25",
11495
+ margin: "0 0 2px 0",
11496
+ display: "flex",
11497
+ alignItems: "center",
11498
+ gap: "8px",
11499
+ maxWidth: "230px",
11500
+ }, children: event.name }))] }, event.id));
11501
+ }) }) }, key));
11502
+ }) }) })] })] }));
11494
11503
  }
11495
11504
 
11496
11505
  // Loading skeleton component for NextEventsPreview