@bigz-app/booking-widget 1.3.4 → 1.4.1

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 (27) hide show
  1. package/dist/booking-widget.js +760 -551
  2. package/dist/booking-widget.js.map +1 -1
  3. package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
  4. package/dist/components/booking/BookingForm.d.ts +15 -5
  5. package/dist/components/booking/BookingForm.d.ts.map +1 -1
  6. package/dist/components/booking/index.d.ts +1 -1
  7. package/dist/components/booking/index.d.ts.map +1 -1
  8. package/dist/components/events/EventInstanceSelection.d.ts +2 -1
  9. package/dist/components/events/EventInstanceSelection.d.ts.map +1 -1
  10. package/dist/components/events/EventTypeSelection.d.ts.map +1 -1
  11. package/dist/components/shared/flow-progress.d.ts +8 -0
  12. package/dist/components/shared/flow-progress.d.ts.map +1 -0
  13. package/dist/components/shared/payment-logos-strip.d.ts +2 -0
  14. package/dist/components/shared/payment-logos-strip.d.ts.map +1 -0
  15. package/dist/components/upsells/UpsellCard.d.ts.map +1 -1
  16. package/dist/components/upsells/UpsellsStep.d.ts +2 -0
  17. package/dist/components/upsells/UpsellsStep.d.ts.map +1 -1
  18. package/dist/i18n/locales/de.d.ts.map +1 -1
  19. package/dist/i18n/locales/en.d.ts.map +1 -1
  20. package/dist/i18n/locales/es.d.ts.map +1 -1
  21. package/dist/i18n/locales/pt.d.ts.map +1 -1
  22. package/dist/i18n/locales/sv.d.ts.map +1 -1
  23. package/dist/index.cjs +760 -551
  24. package/dist/index.cjs.map +1 -1
  25. package/dist/index.esm.js +760 -551
  26. package/dist/index.esm.js.map +1 -1
  27. package/package.json +1 -1
package/dist/booking-widget.js CHANGED
@@ -283,6 +283,8 @@
283
283
  "button.depositAndBook": "Anzahlen & buchen",
284
284
  "button.continueWithout": "Weiter ohne Extras",
285
285
  "button.continue": "Weiter",
286
+ "button.continueToPayment": "Weiter zur Zahlung",
287
+ "button.backToDetails": "Zurück zu den Angaben",
286
288
  "button.addExtras": "Extras hinzufügen",
287
289
  // Event types
288
290
  "events.noEventsAvailable": "Keine Veranstaltungen verfügbar",
@@ -292,6 +294,7 @@
292
294
  "events.availableFrom": "Freie Plätze ab {{date}}",
293
295
  "events.noAvailableDates": "Keine Termine frei",
294
296
  "events.previewSectionTitle": "Specials & nächste Termine",
297
+ "events.seeMoreDates": "Weitere Termine ansehen...",
295
298
  // Event instances
296
299
  "instances.title": "Terminauswahl",
297
300
  "instances.noAvailable": "Keine verfügbaren Termine",
@@ -345,6 +348,10 @@
345
348
  "booking.maxSpotsReached": "Maximal {{count}} Plätze verfügbar.",
346
349
  "booking.comment": "Kommentar (optional)",
347
350
  "booking.commentPlaceholder": "Zusätzliche Anmerkungen zur Buchung...",
351
+ "booking.stepDate": "Termin",
352
+ "booking.stepUpsells": "Extras",
353
+ "booking.stepDetails": "Angaben",
354
+ "booking.stepPayment": "Zahlung",
348
355
  // Booking summary
349
356
  "summary.title": "Buchungszusammenfassung",
350
357
  "summary.subtotal": "Zwischensumme:",
@@ -475,6 +482,9 @@
475
482
  "upsells.noExtras": "Keine Extras für diese Buchung verfügbar.",
476
483
  "upsells.selected": "{{count}} Extra ausgewählt",
477
484
  "upsells.selectedPlural": "{{count}} Extras ausgewählt",
485
+ "upsells.savePercent": "{{percent}}% sparen",
486
+ "booking.paymentUnavailable": "Online-Zahlung ist für diese Buchung nicht verfügbar. Bitte kontaktiere uns, um die Reservierung abzuschließen.",
487
+ "booking.depositNotConfigured": "Online-Anzahlung ist für dieses Event nicht verfügbar. Bitte kontaktiere uns, um die Reservierung abzuschließen.",
478
488
  "upsells.spotsFree": "{{count}} Plätze frei",
479
489
  "upsells.notAvailable": "Nicht verfügbar",
480
490
  "upsells.reason.outOfStock": "{{productName}} ist nicht auf Lager",
@@ -500,6 +510,9 @@
500
510
  "promo.giftCode": "Dein Geschenk-Code",
501
511
  "promo.copied": "Kopiert!",
502
512
  "promo.copy": "Kopieren",
513
+ "trust.securePayment": "Sichere Zahlung",
514
+ "trust.paypal": "PayPal",
515
+ "trust.stripe": "Stripe",
503
516
  };
504
517
 
505
518
  const en = {
@@ -559,6 +572,8 @@
559
572
  "button.depositAndBook": "Pay deposit & book",
560
573
  "button.continueWithout": "Continue without extras",
561
574
  "button.continue": "Continue",
575
+ "button.continueToPayment": "Continue to payment",
576
+ "button.backToDetails": "Back to details",
562
577
  "button.addExtras": "Add extras",
563
578
  // Event types
564
579
  "events.noEventsAvailable": "No events available",
@@ -568,6 +583,7 @@
568
583
  "events.availableFrom": "Available from {{date}}",
569
584
  "events.noAvailableDates": "No dates available",
570
585
  "events.previewSectionTitle": "Specials & upcoming dates",
586
+ "events.seeMoreDates": "See more dates...",
571
587
  // Event instances
572
588
  "instances.title": "Select a date",
573
589
  "instances.noAvailable": "No available dates",
@@ -621,6 +637,10 @@
621
637
  "booking.maxSpotsReached": "Maximum {{count}} spots available.",
622
638
  "booking.comment": "Comment (optional)",
623
639
  "booking.commentPlaceholder": "Additional notes for the booking...",
640
+ "booking.stepDate": "Date",
641
+ "booking.stepUpsells": "Extras",
642
+ "booking.stepDetails": "Details",
643
+ "booking.stepPayment": "Payment",
624
644
  // Booking summary
625
645
  "summary.title": "Booking Summary",
626
646
  "summary.subtotal": "Subtotal:",
@@ -751,6 +771,9 @@
751
771
  "upsells.noExtras": "No extras available for this booking.",
752
772
  "upsells.selected": "{{count}} extra selected",
753
773
  "upsells.selectedPlural": "{{count}} extras selected",
774
+ "upsells.savePercent": "Save {{percent}}%",
775
+ "booking.paymentUnavailable": "Online payment is not available for this booking. Please contact us to complete your reservation.",
776
+ "booking.depositNotConfigured": "Online deposit payment is not available for this event. Please contact us to complete your reservation.",
754
777
  "upsells.spotsFree": "{{count}} spots available",
755
778
  "upsells.notAvailable": "Not available",
756
779
  "upsells.reason.outOfStock": "{{productName}} is out of stock",
@@ -776,6 +799,9 @@
776
799
  "promo.giftCode": "Your gift code",
777
800
  "promo.copied": "Copied!",
778
801
  "promo.copy": "Copy",
802
+ "trust.securePayment": "Secure payment",
803
+ "trust.paypal": "PayPal",
804
+ "trust.stripe": "Stripe",
779
805
  };
780
806
 
781
807
  const es = {
@@ -835,6 +861,8 @@
835
861
  "button.depositAndBook": "Pagar depósito y reservar",
836
862
  "button.continueWithout": "Continuar sin extras",
837
863
  "button.continue": "Continuar",
864
+ "button.continueToPayment": "Continuar al pago",
865
+ "button.backToDetails": "Volver a los datos",
838
866
  "button.addExtras": "Añadir extras",
839
867
  // Event types
840
868
  "events.noEventsAvailable": "No hay eventos disponibles",
@@ -844,6 +872,7 @@
844
872
  "events.availableFrom": "Disponible desde {{date}}",
845
873
  "events.noAvailableDates": "Sin fechas disponibles",
846
874
  "events.previewSectionTitle": "Especiales & próximas fechas",
875
+ "events.seeMoreDates": "Ver más fechas...",
847
876
  // Event instances
848
877
  "instances.title": "Seleccionar fecha",
849
878
  "instances.noAvailable": "Sin fechas disponibles",
@@ -897,6 +926,10 @@
897
926
  "booking.maxSpotsReached": "Máximo {{count}} plazas disponibles.",
898
927
  "booking.comment": "Comentario (opcional)",
899
928
  "booking.commentPlaceholder": "Notas adicionales para la reserva...",
929
+ "booking.stepDate": "Fecha",
930
+ "booking.stepUpsells": "Extras",
931
+ "booking.stepDetails": "Datos",
932
+ "booking.stepPayment": "Pago",
900
933
  // Booking summary
901
934
  "summary.title": "Resumen de la reserva",
902
935
  "summary.subtotal": "Subtotal:",
@@ -1027,6 +1060,9 @@
1027
1060
  "upsells.noExtras": "No hay extras disponibles para esta reserva.",
1028
1061
  "upsells.selected": "{{count}} extra seleccionado",
1029
1062
  "upsells.selectedPlural": "{{count}} extras seleccionados",
1063
+ "upsells.savePercent": "Ahorra {{percent}}%",
1064
+ "booking.paymentUnavailable": "El pago en línea no está disponible para esta reserva. Contáctanos para completarla.",
1065
+ "booking.depositNotConfigured": "El pago de depósito en línea no está disponible para este evento. Contáctanos para completar la reserva.",
1030
1066
  "upsells.spotsFree": "{{count}} plazas disponibles",
1031
1067
  "upsells.notAvailable": "No disponible",
1032
1068
  "upsells.reason.outOfStock": "{{productName}} está agotado",
@@ -1052,6 +1088,9 @@
1052
1088
  "promo.giftCode": "Tu codigo de regalo",
1053
1089
  "promo.copied": "Copiado!",
1054
1090
  "promo.copy": "Copiar",
1091
+ "trust.securePayment": "Pago seguro",
1092
+ "trust.paypal": "PayPal",
1093
+ "trust.stripe": "Stripe",
1055
1094
  };
1056
1095
 
1057
1096
  const pt = {
@@ -1111,6 +1150,8 @@
1111
1150
  "button.depositAndBook": "Pagar sinal e reservar",
1112
1151
  "button.continueWithout": "Continuar sem extras",
1113
1152
  "button.continue": "Continuar",
1153
+ "button.continueToPayment": "Continuar para pagamento",
1154
+ "button.backToDetails": "Voltar aos dados",
1114
1155
  "button.addExtras": "Adicionar extras",
1115
1156
  // Event types
1116
1157
  "events.noEventsAvailable": "Sem eventos disponíveis",
@@ -1120,6 +1161,7 @@
1120
1161
  "events.availableFrom": "Disponível a partir de {{date}}",
1121
1162
  "events.noAvailableDates": "Sem datas disponíveis",
1122
1163
  "events.previewSectionTitle": "Especiais & próximas datas",
1164
+ "events.seeMoreDates": "Ver mais datas...",
1123
1165
  // Event instances
1124
1166
  "instances.title": "Selecionar data",
1125
1167
  "instances.noAvailable": "Sem datas disponíveis",
@@ -1173,6 +1215,10 @@
1173
1215
  "booking.maxSpotsReached": "Máximo {{count}} lugares disponíveis.",
1174
1216
  "booking.comment": "Comentário (opcional)",
1175
1217
  "booking.commentPlaceholder": "Notas adicionais para a reserva...",
1218
+ "booking.stepDate": "Data",
1219
+ "booking.stepUpsells": "Extras",
1220
+ "booking.stepDetails": "Dados",
1221
+ "booking.stepPayment": "Pagamento",
1176
1222
  // Booking summary
1177
1223
  "summary.title": "Resumo da reserva",
1178
1224
  "summary.subtotal": "Subtotal:",
@@ -1303,6 +1349,9 @@
1303
1349
  "upsells.noExtras": "Sem extras disponíveis para esta reserva.",
1304
1350
  "upsells.selected": "{{count}} extra selecionado",
1305
1351
  "upsells.selectedPlural": "{{count}} extras selecionados",
1352
+ "upsells.savePercent": "Poupa {{percent}}%",
1353
+ "booking.paymentUnavailable": "O pagamento online não está disponível para esta reserva. Contacta-nos para concluir a reserva.",
1354
+ "booking.depositNotConfigured": "O pagamento de depósito online não está disponível para este evento. Contacta-nos para concluir a reserva.",
1306
1355
  "upsells.spotsFree": "{{count}} lugares disponíveis",
1307
1356
  "upsells.notAvailable": "Não disponível",
1308
1357
  "upsells.reason.outOfStock": "{{productName}} está esgotado",
@@ -1328,6 +1377,9 @@
1328
1377
  "promo.giftCode": "O teu codigo de oferta",
1329
1378
  "promo.copied": "Copiado!",
1330
1379
  "promo.copy": "Copiar",
1380
+ "trust.securePayment": "Pagamento seguro",
1381
+ "trust.paypal": "PayPal",
1382
+ "trust.stripe": "Stripe",
1331
1383
  };
1332
1384
 
1333
1385
  const sv = {
@@ -1387,6 +1439,8 @@
1387
1439
  "button.depositAndBook": "Betala handpenning & boka",
1388
1440
  "button.continueWithout": "Fortsätt utan tillägg",
1389
1441
  "button.continue": "Fortsätt",
1442
+ "button.continueToPayment": "Fortsätt till betalning",
1443
+ "button.backToDetails": "Tillbaka till uppgifter",
1390
1444
  "button.addExtras": "Lägg till tillägg",
1391
1445
  // Event types
1392
1446
  "events.noEventsAvailable": "Inga evenemang tillgängliga",
@@ -1396,6 +1450,7 @@
1396
1450
  "events.availableFrom": "Lediga platser från {{date}}",
1397
1451
  "events.noAvailableDates": "Inga datum lediga",
1398
1452
  "events.previewSectionTitle": "Specials & kommande datum",
1453
+ "events.seeMoreDates": "Se fler datum...",
1399
1454
  // Event instances
1400
1455
  "instances.title": "Välj datum",
1401
1456
  "instances.noAvailable": "Inga tillgängliga datum",
@@ -1449,6 +1504,10 @@
1449
1504
  "booking.maxSpotsReached": "Maximalt {{count}} platser tillgängliga.",
1450
1505
  "booking.comment": "Kommentar (valfritt)",
1451
1506
  "booking.commentPlaceholder": "Ytterligare anteckningar för bokningen...",
1507
+ "booking.stepDate": "Datum",
1508
+ "booking.stepUpsells": "Tillägg",
1509
+ "booking.stepDetails": "Uppgifter",
1510
+ "booking.stepPayment": "Betalning",
1452
1511
  // Booking summary
1453
1512
  "summary.title": "Bokningssammanfattning",
1454
1513
  "summary.subtotal": "Delsumma:",
@@ -1579,6 +1638,9 @@
1579
1638
  "upsells.noExtras": "Inga tillägg tillgängliga för denna bokning.",
1580
1639
  "upsells.selected": "{{count}} tillägg valt",
1581
1640
  "upsells.selectedPlural": "{{count}} tillägg valda",
1641
+ "upsells.savePercent": "Spara {{percent}}%",
1642
+ "booking.paymentUnavailable": "Onlinebetalning är inte tillgänglig för denna bokning. Kontakta oss för att slutföra bokningen.",
1643
+ "booking.depositNotConfigured": "Online deposition är inte tillgänglig för detta evenemang. Kontakta oss för att slutföra bokningen.",
1582
1644
  "upsells.spotsFree": "{{count}} platser lediga",
1583
1645
  "upsells.notAvailable": "Inte tillgängligt",
1584
1646
  "upsells.reason.outOfStock": "{{productName}} är slut i lager",
@@ -1604,6 +1666,9 @@
1604
1666
  "promo.giftCode": "Din presentkod",
1605
1667
  "promo.copied": "Kopierad!",
1606
1668
  "promo.copy": "Kopiera",
1669
+ "trust.securePayment": "Säker betalning",
1670
+ "trust.paypal": "PayPal",
1671
+ "trust.stripe": "Stripe",
1607
1672
  };
1608
1673
 
1609
1674
  const SUPPORTED_LOCALES = ["de", "en", "es", "sv", "pt"];
@@ -7370,6 +7435,55 @@
7370
7435
  }, children: children }))] }));
7371
7436
  }
7372
7437
 
7438
+ function FlowProgress({ currentStep, hasUpsellsStep }) {
7439
+ const t = useTranslations();
7440
+ const steps = hasUpsellsStep
7441
+ ? [
7442
+ { key: "date", label: t("booking.stepDate") },
7443
+ { key: "upsells", label: t("booking.stepUpsells") },
7444
+ { key: "details", label: t("booking.stepDetails") },
7445
+ { key: "payment", label: t("booking.stepPayment") },
7446
+ ]
7447
+ : [
7448
+ { key: "date", label: t("booking.stepDate") },
7449
+ { key: "details", label: t("booking.stepDetails") },
7450
+ { key: "payment", label: t("booking.stepPayment") },
7451
+ ];
7452
+ const activeIndex = Math.max(steps.findIndex((step) => step.key === currentStep), 0);
7453
+ const progressPercent = steps.length > 1 ? (activeIndex / (steps.length - 1)) * 100 : 100;
7454
+ return (u$2("div", { style: {
7455
+ backgroundColor: "var(--bw-surface-color)",
7456
+ border: "1px solid var(--bw-border-color)",
7457
+ borderRadius: "var(--bw-border-radius)",
7458
+ padding: "12px 14px",
7459
+ marginBottom: "16px",
7460
+ }, children: [u$2("div", { style: {
7461
+ display: "flex",
7462
+ justifyContent: "space-between",
7463
+ alignItems: "center",
7464
+ marginBottom: "10px",
7465
+ fontFamily: "var(--bw-font-family)",
7466
+ gap: "8px",
7467
+ }, children: steps.map((step, index) => (u$2("span", { style: {
7468
+ fontSize: "12px",
7469
+ fontWeight: 700,
7470
+ color: index <= activeIndex ? "var(--bw-highlight-color)" : "var(--bw-text-muted)",
7471
+ whiteSpace: "nowrap",
7472
+ }, children: [index + 1, ". ", step.label] }, step.key))) }), u$2("div", { style: {
7473
+ width: "100%",
7474
+ height: "8px",
7475
+ borderRadius: "999px",
7476
+ backgroundColor: "var(--bw-background-color)",
7477
+ border: "1px solid var(--bw-border-color)",
7478
+ overflow: "hidden",
7479
+ }, children: u$2("div", { style: {
7480
+ width: `${progressPercent}%`,
7481
+ height: "100%",
7482
+ backgroundColor: "var(--bw-highlight-color)",
7483
+ transition: "width 0.25s ease",
7484
+ } }) })] }));
7485
+ }
7486
+
7373
7487
  // Spinner icon (kept local as it has animation style)
7374
7488
  const IconSpinner = ({ size = 16, color = "currentColor" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: u$2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
7375
7489
  function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVoucherValidated, appliedVouchers, onRemoveVoucher, disabled = false, }) {
@@ -11579,11 +11693,12 @@
11579
11693
  const labelStyles$1 = formStyles.label;
11580
11694
  const inputStyles$1 = formStyles.input;
11581
11695
  const errorTextStyles$1 = formStyles.error;
11582
- function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], }) {
11696
+ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], persistedState = null, onPersistedStateChange, }) {
11583
11697
  const t$1 = useTranslations();
11584
11698
  const { locale } = useLocale();
11585
11699
  const timezone = useTimezone();
11586
11700
  const roundEnabled = systemConfig?.roundPricesEnabled !== false;
11701
+ const widgetPaymentMode = systemConfig?.widgetPaymentMode ?? "all";
11587
11702
  const participantFieldsConfig = eventDetails.participantFieldsConfig ?? DEFAULT_PARTICIPANT_FIELDS_CONFIG;
11588
11703
  const participantLevelOptions = eventDetails.participantLevelOptions ?? ["beginner", "advanced"];
11589
11704
  const roundDiscountUp = (minorUnits) => Math.ceil(minorUnits / 100) * 100;
@@ -11591,15 +11706,17 @@
11591
11706
  const raw = Math.round((baseAmount * basisPoints) / 10000);
11592
11707
  return round ? roundDiscountUp(raw) : raw;
11593
11708
  };
11594
- const [appliedVouchers, setAppliedVouchers] = d$1([]);
11595
- const paymentSectionRef = A$2(null);
11709
+ const [appliedVouchers, setAppliedVouchers] = d$1(() => persistedState?.appliedVouchers ?? []);
11710
+ const [checkoutStep, setCheckoutStep] = d$1(() => persistedState?.checkoutStep ?? "details");
11596
11711
  // Payment option: "deposit" or "full" - only relevant when deposit is available
11597
- const [paymentOption, setPaymentOption] = d$1("deposit");
11712
+ const [paymentOption, setPaymentOption] = d$1(() => persistedState?.paymentOption ?? "deposit");
11598
11713
  // Per-participant upsell selections: participantIndex -> array of upsell package IDs
11599
- const [participantUpsells, setParticipantUpsells] = d$1({});
11714
+ const [participantUpsells, setParticipantUpsells] = d$1(() => persistedState?.participantUpsells ?? {});
11715
+ const [showPaymentValidationHint, setShowPaymentValidationHint] = d$1(false);
11716
+ const wasOpenRef = A$2(false);
11600
11717
  const form = useForm({
11601
11718
  resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
11602
- defaultValues: {
11719
+ defaultValues: persistedState?.formData ?? {
11603
11720
  customerName: "",
11604
11721
  customerEmail: "",
11605
11722
  customerPhone: "",
@@ -11609,6 +11726,28 @@
11609
11726
  acceptTerms: false,
11610
11727
  },
11611
11728
  });
11729
+ const persistState = q$2(() => {
11730
+ onPersistedStateChange?.({
11731
+ formData: form.getValues(),
11732
+ checkoutStep,
11733
+ paymentOption,
11734
+ appliedVouchers,
11735
+ participantUpsells,
11736
+ });
11737
+ }, [onPersistedStateChange, form, checkoutStep, paymentOption, appliedVouchers, participantUpsells]);
11738
+ y$1(() => {
11739
+ if (isOpen && !wasOpenRef.current && persistedState) {
11740
+ form.reset(persistedState.formData);
11741
+ setCheckoutStep(persistedState.checkoutStep);
11742
+ setPaymentOption(persistedState.paymentOption);
11743
+ setAppliedVouchers(persistedState.appliedVouchers);
11744
+ setParticipantUpsells(persistedState.participantUpsells);
11745
+ }
11746
+ if (!isOpen && wasOpenRef.current) {
11747
+ persistState();
11748
+ }
11749
+ wasOpenRef.current = isOpen;
11750
+ }, [isOpen, persistedState, form, persistState]);
11612
11751
  const watchedParticipants = form.watch("participants");
11613
11752
  const participantCount = watchedParticipants.length;
11614
11753
  const watchedCustomerName = form.watch("customerName");
@@ -11697,12 +11836,22 @@
11697
11836
  const totalDiscount = calculateTotalDiscount();
11698
11837
  const totalAmount = calculateTotal();
11699
11838
  const depositAmount = calculateDeposit();
11700
- // Deposit stays fixed unless the discounted total is lower than the deposit
11701
- // (discount applies to total price, not to the deposit itself)
11702
- const hasDepositOption = depositAmount > 0 && depositAmount < totalAmount;
11703
- const paymentAmount = hasDepositOption && paymentOption === "deposit"
11704
- ? Math.min(depositAmount, totalAmount)
11705
- : totalAmount;
11839
+ const allowsDepositInWidget = widgetPaymentMode === "all" || widgetPaymentMode === "deposits_only";
11840
+ const allowsFullInWidget = widgetPaymentMode === "all" || widgetPaymentMode === "full_only";
11841
+ const hasConfiguredDeposit = depositAmount > 0;
11842
+ const hasDepositChoice = allowsDepositInWidget && hasConfiguredDeposit && depositAmount < totalAmount;
11843
+ const depositsOnlyBlocked = widgetPaymentMode === "deposits_only" && !hasConfiguredDeposit;
11844
+ y$1(() => {
11845
+ if (widgetPaymentMode === "deposits_only") {
11846
+ setPaymentOption("deposit");
11847
+ }
11848
+ else if (widgetPaymentMode === "full_only") {
11849
+ setPaymentOption("full");
11850
+ }
11851
+ }, [widgetPaymentMode]);
11852
+ const paymentAmount = allowsFullInWidget && (!hasDepositChoice || paymentOption === "full" || !allowsDepositInWidget)
11853
+ ? totalAmount
11854
+ : Math.min(depositAmount, totalAmount);
11706
11855
  // Convert per-participant upsells to UpsellSelection[] format for API
11707
11856
  // Includes participantIndices to track which participants selected each upsell
11708
11857
  const aggregatedUpsellSelections = q$2(() => {
@@ -11733,6 +11882,18 @@
11733
11882
  }), [watchedCustomerName, watchedCustomerEmail, watchedCustomerPhone, watchedParticipants, watchedComment]);
11734
11883
  const appliedDiscountCode = appliedVouchers.find((v) => v.type === "discount");
11735
11884
  const appliedGiftCards = appliedVouchers.filter((v) => v.type === "giftCard");
11885
+ const discountCodeProp = appliedDiscountCode
11886
+ ? {
11887
+ id: appliedDiscountCode.id,
11888
+ code: appliedDiscountCode.code,
11889
+ description: appliedDiscountCode.description || undefined,
11890
+ type: appliedDiscountCode.discountType || "percentage",
11891
+ value: appliedDiscountCode.discountValue || 0,
11892
+ discountAmount: appliedDiscountCode.discountAmount,
11893
+ newTotal: appliedDiscountCode.newTotal,
11894
+ }
11895
+ : null;
11896
+ const hasPaymentProvider = Boolean(stripePromise || systemConfig?.paymentProvider === "mollie");
11736
11897
  const handleVoucherValidated = q$2((voucher, _error) => {
11737
11898
  if (voucher) {
11738
11899
  setAppliedVouchers((prev) => [...prev, voucher]);
@@ -11844,19 +12005,44 @@
11844
12005
  });
11845
12006
  }, [config]);
11846
12007
  const handleClose = () => {
12008
+ persistState();
12009
+ setCheckoutStep("details");
11847
12010
  onClose();
11848
- if (selectedEventInstance && selectedEventType) {
11849
- onBackToEventInstances?.();
12011
+ };
12012
+ // Footer navigation
12013
+ const canContinueToPayment = isReadyForPayment();
12014
+ const handleContinueToPayment = async () => {
12015
+ if (canContinueToPayment && hasPaymentProvider) {
12016
+ setShowPaymentValidationHint(false);
12017
+ setCheckoutStep("payment");
12018
+ return;
11850
12019
  }
11851
- else if (selectedEventType) {
11852
- onBackToEventTypes?.();
12020
+ const participantErrors = await form.trigger("participants");
12021
+ const customerErrors = await form.trigger(["customerName", "customerEmail", "acceptTerms"]);
12022
+ if (!participantErrors || !customerErrors) {
12023
+ setShowPaymentValidationHint(true);
11853
12024
  }
11854
12025
  };
11855
- const scrollToPayment = () => {
11856
- paymentSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
11857
- };
11858
- // Footer navigation
11859
- const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t$1("common.back") }), u$2("button", { type: "button", onClick: scrollToPayment, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: t$1("button.toPayment") })] }));
12026
+ y$1(() => {
12027
+ if (showPaymentValidationHint && canContinueToPayment) {
12028
+ setShowPaymentValidationHint(false);
12029
+ }
12030
+ }, [showPaymentValidationHint, canContinueToPayment]);
12031
+ const footerContent = (u$2("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "6px" }, children: [checkoutStep === "details" && (u$2("div", { style: {
12032
+ minHeight: "14px",
12033
+ fontSize: "11px",
12034
+ color: "var(--bw-error-color)",
12035
+ textAlign: "center",
12036
+ fontFamily: "var(--bw-font-family)",
12037
+ opacity: showPaymentValidationHint ? 1 : 0,
12038
+ transition: "opacity 0.15s ease",
12039
+ pointerEvents: "none",
12040
+ }, children: t$1("payment.fillRequired") })), u$2("div", { style: { display: "flex", gap: "12px", width: "100%" }, children: [u$2("button", { type: "button", onClick: checkoutStep === "payment" ? () => setCheckoutStep("details") : handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: checkoutStep === "payment" ? t$1("button.backToDetails") : t$1("common.back") }), checkoutStep === "details" && (u$2("button", { type: "button", onClick: handleContinueToPayment, disabled: !hasPaymentProvider, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth, !canContinueToPayment
12041
+ ? {
12042
+ opacity: 0.55,
12043
+ cursor: "pointer",
12044
+ }
12045
+ : undefined), children: t$1("button.continueToPayment") }))] })] }));
11860
12046
  if (!eventDetails.bookingOpen) {
11861
12047
  return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.notPossible"), children: u$2("div", { style: {
11862
12048
  display: "flex",
@@ -11873,264 +12059,211 @@
11873
12059
  fontFamily: "var(--bw-font-family)",
11874
12060
  }, children: t$1("booking.notPossible") }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.notPossibleMessage") })] }) }) }));
11875
12061
  }
11876
- return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), u$2("div", { style: {
11877
- display: "grid",
11878
- gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
11879
- gap: "12px",
11880
- fontSize: "14px",
11881
- }, children: [u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
11882
- color: "var(--bw-text-muted)",
11883
- fontFamily: "var(--bw-font-family)",
11884
- display: "flex",
11885
- alignItems: "center",
11886
- gap: "4px",
11887
- }, children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.date")] }), u$2("span", { style: {
11888
- color: "var(--bw-text-color)",
11889
- fontWeight: 500,
11890
- fontFamily: "var(--bw-font-family)",
11891
- }, children: [formatEventDate(eventDetails.startTime, timezone, locale), " \u2022 ", formatTime(eventDetails.startTime, timezone, locale)] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
11892
- color: "var(--bw-text-muted)",
11893
- fontFamily: "var(--bw-font-family)",
11894
- display: "flex",
11895
- alignItems: "center",
11896
- gap: "4px",
11897
- }, children: [u$2(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.duration")] }), u$2("span", { style: {
11898
- color: "var(--bw-text-color)",
11899
- fontWeight: 500,
11900
- fontFamily: "var(--bw-font-family)",
11901
- }, children: [eventDetails.durationDays, " ", eventDetails.durationDays > 1 ? t$1("common.days") : t$1("common.day")] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
11902
- color: "var(--bw-text-muted)",
11903
- fontFamily: "var(--bw-font-family)",
12062
+ return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [u$2(FlowProgress, { currentStep: checkoutStep === "details" ? "details" : "payment", hasUpsellsStep: upsells.length > 0 }), checkoutStep === "details" && (u$2(k$3, { children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), u$2("div", { style: {
12063
+ display: "grid",
12064
+ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
12065
+ gap: "12px",
12066
+ fontSize: "14px",
12067
+ }, children: [u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
12068
+ color: "var(--bw-text-muted)",
12069
+ fontFamily: "var(--bw-font-family)",
12070
+ display: "flex",
12071
+ alignItems: "center",
12072
+ gap: "4px",
12073
+ }, children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.date")] }), u$2("span", { style: {
12074
+ color: "var(--bw-text-color)",
12075
+ fontWeight: 500,
12076
+ fontFamily: "var(--bw-font-family)",
12077
+ }, children: [formatEventDate(eventDetails.startTime, timezone, locale), " \u2022 ", formatTime(eventDetails.startTime, timezone, locale)] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
12078
+ color: "var(--bw-text-muted)",
12079
+ fontFamily: "var(--bw-font-family)",
12080
+ display: "flex",
12081
+ alignItems: "center",
12082
+ gap: "4px",
12083
+ }, children: [u$2(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.duration")] }), u$2("span", { style: {
12084
+ color: "var(--bw-text-color)",
12085
+ fontWeight: 500,
12086
+ fontFamily: "var(--bw-font-family)",
12087
+ }, children: [eventDetails.durationDays, " ", eventDetails.durationDays > 1 ? t$1("common.days") : t$1("common.day")] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
12088
+ color: "var(--bw-text-muted)",
12089
+ fontFamily: "var(--bw-font-family)",
12090
+ display: "flex",
12091
+ alignItems: "center",
12092
+ gap: "4px",
12093
+ }, children: [u$2(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.price")] }), u$2("span", { style: {
12094
+ color: "var(--bw-text-color)",
12095
+ fontWeight: 500,
12096
+ fontFamily: "var(--bw-font-family)",
12097
+ }, children: [formatCurrency(eventDetails.price), " ", t$1("common.perPerson")] })] })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.contactInfo") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
12098
+ display: "grid",
12099
+ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
12100
+ gap: "16px",
12101
+ }, children: [u$2("div", { children: [u$2("label", { htmlFor: "customerName", style: labelStyles$1, children: t$1("booking.name") }), u$2("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles$1, placeholder: t$1("booking.namePlaceholder") }), customerNameError && (u$2("p", { style: errorTextStyles$1, children: customerNameError.message }))] }), u$2("div", { children: [u$2("label", { htmlFor: "customerEmail", style: labelStyles$1, children: t$1("booking.email") }), u$2("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles$1, placeholder: t$1("booking.emailPlaceholder") }), customerEmailError && (u$2("p", { style: errorTextStyles$1, children: customerEmailError.message }))] })] }), u$2("div", { children: [u$2("label", { htmlFor: "customerPhone", style: labelStyles$1, children: t$1("booking.phone") }), u$2("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles$1, placeholder: t$1("booking.phonePlaceholder") })] }), u$2("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), u$2("label", { htmlFor: "acceptTerms", style: {
12102
+ fontSize: "14px",
12103
+ color: "var(--bw-text-muted)",
12104
+ fontFamily: "var(--bw-font-family)",
12105
+ maxWidth: "calc(100% - 32px)",
12106
+ overflowWrap: "break-word",
12107
+ cursor: "pointer",
12108
+ }, children: [t$1("booking.acceptTerms"), " ", u$2("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: t$1("booking.terms") }), "*"] })] }), form.formState.errors.acceptTerms && (u$2("p", { style: { ...errorTextStyles$1, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), u$2("div", { style: cardStyles$1, children: [u$2("div", { style: {
11904
12109
  display: "flex",
12110
+ justifyContent: "space-between",
11905
12111
  alignItems: "center",
11906
- gap: "4px",
11907
- }, children: [u$2(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.price")] }), u$2("span", { style: {
11908
- color: "var(--bw-text-color)",
11909
- fontWeight: 500,
11910
- fontFamily: "var(--bw-font-family)",
11911
- }, children: [formatCurrency(eventDetails.price), " ", t$1("common.perPerson")] })] })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.contactInfo") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
11912
- display: "grid",
11913
- gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
11914
- gap: "16px",
11915
- }, children: [u$2("div", { children: [u$2("label", { htmlFor: "customerName", style: labelStyles$1, children: t$1("booking.name") }), u$2("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles$1, placeholder: t$1("booking.namePlaceholder") }), customerNameError && (u$2("p", { style: errorTextStyles$1, children: customerNameError.message }))] }), u$2("div", { children: [u$2("label", { htmlFor: "customerEmail", style: labelStyles$1, children: t$1("booking.email") }), u$2("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles$1, placeholder: t$1("booking.emailPlaceholder") }), customerEmailError && (u$2("p", { style: errorTextStyles$1, children: customerEmailError.message }))] })] }), u$2("div", { children: [u$2("label", { htmlFor: "customerPhone", style: labelStyles$1, children: t$1("booking.phone") }), u$2("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles$1, placeholder: t$1("booking.phonePlaceholder") })] }), u$2("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), u$2("label", { htmlFor: "acceptTerms", style: {
12112
+ marginBottom: "16px",
12113
+ }, children: u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [u$2("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (u$2("div", { style: { flex: 1 }, children: [u$2("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), u$2("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles$1, placeholder: t$1("booking.participantNamePlaceholder") }), form.formState.errors.participants?.[index]?.name && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (u$2("div", { style: { width: "80px" }, children: [u$2("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), u$2("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
12114
+ setValueAs: (value) => {
12115
+ if (value === "" || value === null || value === undefined) {
12116
+ return undefined;
12117
+ }
12118
+ const num = Number(value);
12119
+ return Number.isNaN(num) ? undefined : num;
12120
+ },
12121
+ }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (u$2("div", { children: [u$2("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), u$2("button", { type: "button", onClick: () => removeParticipant(index), style: {
12122
+ color: "var(--bw-error-color)",
12123
+ backgroundColor: "var(--bw-surface-color)",
12124
+ border: "1px solid var(--bw-border-color)",
12125
+ borderRadius: "50%",
12126
+ width: "36px",
12127
+ height: "36px",
12128
+ display: "flex",
12129
+ alignItems: "center",
12130
+ justifyContent: "center",
12131
+ cursor: "pointer",
12132
+ transition: "all 0.2s ease",
12133
+ fontSize: "24px",
12134
+ fontWeight: 700,
12135
+ fontFamily: "var(--bw-font-family)",
12136
+ padding: 0,
12137
+ }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (u$2("div", { style: { minWidth: "140px" }, children: [u$2("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), u$2("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [u$2("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (u$2("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
12138
+ const isSelected = (participantUpsells[index] || []).includes(upsell.id);
12139
+ return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
12140
+ }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
12141
+ display: "flex",
12142
+ flexDirection: "column",
12143
+ alignItems: "center",
12144
+ marginTop: "12px",
12145
+ }, children: u$2("button", { type: "button", onClick: addParticipant, style: {
12146
+ color: "#ffffff",
12147
+ fontSize: "14px",
12148
+ fontWeight: 600,
12149
+ padding: "8px 16px",
12150
+ borderRadius: "var(--bw-border-radius)",
12151
+ backgroundColor: "var(--bw-highlight-color)",
12152
+ border: "1px solid var(--bw-highlight-color)",
12153
+ cursor: "pointer",
12154
+ transition: "all 0.2s ease",
12155
+ marginBottom: "4px",
12156
+ fontFamily: "var(--bw-font-family)",
12157
+ boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
12158
+ }, children: t$1("booking.addParticipant", { number: watchedParticipants.length + 1 }) }) })) : (u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.maxSpotsReached", { count: eventDetails.availableSpots }) }))] })] }), u$2(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), u$2("div", { style: cardStyles$1, children: [u$2("label", { htmlFor: "booking-comment", style: labelStyles$1, children: t$1("booking.comment") }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: t$1("booking.commentPlaceholder"), rows: 3, style: {
12159
+ ...inputStyles$1,
12160
+ resize: "vertical",
12161
+ minHeight: "80px",
12162
+ } })] })] })] })), checkoutStep === "payment" && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: "16px" }, children: t$1("summary.title") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.price") }), u$2("div", { style: {
12163
+ color: "var(--bw-text-color)",
12164
+ fontWeight: 500,
12165
+ fontFamily: "var(--bw-font-family)",
12166
+ }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (u$2("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: [t$1("common.extras"), ":"] }), upsells.map((upsell) => {
12167
+ // Count how many participants have this upsell selected
12168
+ const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
12169
+ if (countWithUpsell === 0)
12170
+ return null;
12171
+ const upsellLineTotal = upsell.price * countWithUpsell;
12172
+ return (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "13px" }, children: u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }) }, upsell.id));
12173
+ })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), u$2("span", { style: {
12174
+ fontFamily: "var(--bw-font-family)",
12175
+ color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
12176
+ textDecoration: totalDiscount > 0 ? "line-through" : "none",
12177
+ }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
12178
+ color: "var(--bw-success-color)",
12179
+ fontFamily: "var(--bw-font-family)",
12180
+ fontSize: "14px",
12181
+ }, children: t$1("summary.discount", { code: appliedDiscountCode.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
12182
+ color: "var(--bw-success-color)",
12183
+ fontFamily: "var(--bw-font-family)",
11916
12184
  fontSize: "14px",
12185
+ }, children: t$1("summary.giftCard", { code: giftCard.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { style: {
12186
+ borderTop: "1px solid var(--bw-border-color)",
12187
+ paddingTop: "12px",
12188
+ }, children: [hasDepositChoice && (u$2("div", { style: {
12189
+ display: "flex",
12190
+ justifyContent: "space-between",
12191
+ alignItems: "center",
12192
+ fontSize: "14px",
12193
+ marginBottom: "12px",
12194
+ }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.totalAmount") }), u$2("span", { style: {
11917
12195
  color: "var(--bw-text-muted)",
11918
12196
  fontFamily: "var(--bw-font-family)",
11919
- maxWidth: "calc(100% - 32px)",
11920
- overflowWrap: "break-word",
12197
+ fontWeight: 500,
12198
+ }, children: formatCurrency(totalAmount) })] })), hasDepositChoice && widgetPaymentMode === "all" && (u$2("div", { style: {
12199
+ display: "flex",
12200
+ gap: "8px",
12201
+ marginBottom: "16px",
12202
+ }, children: [u$2("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
12203
+ flex: 1,
12204
+ padding: "12px",
12205
+ borderRadius: "var(--bw-border-radius)",
12206
+ border: paymentOption === "deposit"
12207
+ ? "2px solid var(--bw-highlight-color)"
12208
+ : "1px solid var(--bw-border-color)",
12209
+ backgroundColor: paymentOption === "deposit"
12210
+ ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
12211
+ : "var(--bw-surface-color)",
11921
12212
  cursor: "pointer",
11922
- }, children: [t$1("booking.acceptTerms"), " ", u$2("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: t$1("booking.terms") }), "*"] })] }), form.formState.errors.acceptTerms && (u$2("p", { style: { ...errorTextStyles$1, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), u$2("div", { style: cardStyles$1, children: [u$2("div", { style: {
11923
- display: "flex",
11924
- justifyContent: "space-between",
11925
- alignItems: "center",
11926
- marginBottom: "16px",
11927
- }, children: u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [u$2("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (u$2("div", { style: { flex: 1 }, children: [u$2("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), u$2("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles$1, placeholder: t$1("booking.participantNamePlaceholder") }), form.formState.errors.participants?.[index]?.name && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (u$2("div", { style: { width: "80px" }, children: [u$2("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), u$2("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
11928
- setValueAs: (value) => {
11929
- if (value === "" || value === null || value === undefined) {
11930
- return undefined;
11931
- }
11932
- const num = Number(value);
11933
- return Number.isNaN(num) ? undefined : num;
11934
- },
11935
- }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (u$2("div", { children: [u$2("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), u$2("button", { type: "button", onClick: () => removeParticipant(index), style: {
11936
- color: "var(--bw-error-color)",
11937
- backgroundColor: "var(--bw-surface-color)",
11938
- border: "1px solid var(--bw-border-color)",
11939
- borderRadius: "50%",
11940
- width: "36px",
11941
- height: "36px",
11942
- display: "flex",
11943
- alignItems: "center",
11944
- justifyContent: "center",
11945
- cursor: "pointer",
11946
- transition: "all 0.2s ease",
11947
- fontSize: "24px",
12213
+ fontFamily: "var(--bw-font-family)",
12214
+ transition: "all 0.2s ease",
12215
+ }, children: [u$2("div", { style: {
12216
+ fontSize: "13px",
12217
+ color: "var(--bw-text-muted)",
12218
+ marginBottom: "4px",
12219
+ }, children: t$1("summary.deposit") }), u$2("div", { style: {
12220
+ fontSize: "18px",
11948
12221
  fontWeight: 700,
11949
- fontFamily: "var(--bw-font-family)",
11950
- padding: 0,
11951
- }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (u$2("div", { style: { minWidth: "140px" }, children: [u$2("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), u$2("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [u$2("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (u$2("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
11952
- const isSelected = (participantUpsells[index] || []).includes(upsell.id);
11953
- return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
11954
- }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
11955
- display: "flex",
11956
- flexDirection: "column",
11957
- alignItems: "center",
11958
- marginTop: "12px",
11959
- }, children: u$2("button", { type: "button", onClick: addParticipant, style: {
11960
- color: "#ffffff",
11961
- fontSize: "14px",
11962
- fontWeight: 600,
11963
- padding: "8px 16px",
11964
- borderRadius: "var(--bw-border-radius)",
11965
- backgroundColor: "var(--bw-highlight-color)",
11966
- border: "1px solid var(--bw-highlight-color)",
11967
- cursor: "pointer",
11968
- transition: "all 0.2s ease",
11969
- marginBottom: "4px",
11970
- fontFamily: "var(--bw-font-family)",
11971
- boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
11972
- }, children: t$1("booking.addParticipant", { number: watchedParticipants.length + 1 }) }) })) : (u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.maxSpotsReached", { count: eventDetails.availableSpots }) }))] })] }), u$2(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), u$2("div", { style: cardStyles$1, children: [u$2("label", { htmlFor: "booking-comment", style: labelStyles$1, children: t$1("booking.comment") }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: t$1("booking.commentPlaceholder"), rows: 3, style: {
11973
- ...inputStyles$1,
11974
- resize: "vertical",
11975
- minHeight: "80px",
11976
- } })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: "16px" }, children: t$1("summary.title") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.price") }), u$2("div", { style: {
11977
- color: "var(--bw-text-color)",
11978
- fontWeight: 500,
12222
+ color: paymentOption === "deposit"
12223
+ ? "var(--bw-highlight-color)"
12224
+ : "var(--bw-text-color)",
12225
+ }, children: formatCurrency(depositAmount) })] }), u$2("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
12226
+ flex: 1,
12227
+ padding: "12px",
12228
+ borderRadius: "var(--bw-border-radius)",
12229
+ border: paymentOption === "full"
12230
+ ? "2px solid var(--bw-highlight-color)"
12231
+ : "1px solid var(--bw-border-color)",
12232
+ backgroundColor: paymentOption === "full"
12233
+ ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
12234
+ : "var(--bw-surface-color)",
12235
+ cursor: "pointer",
11979
12236
  fontFamily: "var(--bw-font-family)",
11980
- }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (u$2("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: [t$1("common.extras"), ":"] }), upsells.map((upsell) => {
11981
- // Count how many participants have this upsell selected
11982
- const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
11983
- if (countWithUpsell === 0)
11984
- return null;
11985
- const upsellLineTotal = upsell.price * countWithUpsell;
11986
- return (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px" }, children: [u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }, upsell.id));
11987
- })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), u$2("span", { style: {
11988
- fontFamily: "var(--bw-font-family)",
11989
- color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
11990
- textDecoration: totalDiscount > 0 ? "line-through" : "none",
11991
- }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
11992
- color: "var(--bw-success-color)",
11993
- fontFamily: "var(--bw-font-family)",
11994
- fontSize: "14px",
11995
- }, children: t$1("summary.discount", { code: appliedDiscountCode.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
11996
- color: "var(--bw-success-color)",
11997
- fontFamily: "var(--bw-font-family)",
11998
- fontSize: "14px",
11999
- }, children: t$1("summary.giftCard", { code: giftCard.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { style: {
12000
- borderTop: "1px solid var(--bw-border-color)",
12001
- paddingTop: "12px",
12002
- }, children: [hasDepositOption && (u$2("div", { style: {
12003
- display: "flex",
12004
- gap: "8px",
12005
- marginBottom: "16px",
12006
- }, children: [u$2("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
12007
- flex: 1,
12008
- padding: "12px",
12009
- borderRadius: "var(--bw-border-radius)",
12010
- border: paymentOption === "deposit"
12011
- ? "2px solid var(--bw-highlight-color)"
12012
- : "1px solid var(--bw-border-color)",
12013
- backgroundColor: paymentOption === "deposit"
12014
- ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
12015
- : "var(--bw-surface-color)",
12016
- cursor: "pointer",
12017
- fontFamily: "var(--bw-font-family)",
12018
- transition: "all 0.2s ease",
12019
- }, children: [u$2("div", { style: {
12020
- fontSize: "13px",
12021
- color: "var(--bw-text-muted)",
12022
- marginBottom: "4px",
12023
- }, children: t$1("summary.deposit") }), u$2("div", { style: {
12024
- fontSize: "18px",
12025
- fontWeight: 700,
12026
- color: paymentOption === "deposit"
12027
- ? "var(--bw-highlight-color)"
12028
- : "var(--bw-text-color)",
12029
- }, children: formatCurrency(depositAmount) })] }), u$2("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
12030
- flex: 1,
12031
- padding: "12px",
12032
- borderRadius: "var(--bw-border-radius)",
12033
- border: paymentOption === "full"
12034
- ? "2px solid var(--bw-highlight-color)"
12035
- : "1px solid var(--bw-border-color)",
12036
- backgroundColor: paymentOption === "full"
12037
- ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
12038
- : "var(--bw-surface-color)",
12039
- cursor: "pointer",
12040
- fontFamily: "var(--bw-font-family)",
12041
- transition: "all 0.2s ease",
12042
- }, children: [u$2("div", { style: {
12043
- fontSize: "13px",
12044
- color: "var(--bw-text-muted)",
12045
- marginBottom: "4px",
12046
- }, children: t$1("summary.payFull") }), u$2("div", { style: {
12047
- fontSize: "18px",
12048
- fontWeight: 700,
12049
- color: paymentOption === "full"
12050
- ? "var(--bw-highlight-color)"
12051
- : "var(--bw-text-color)",
12052
- }, children: formatCurrency(totalAmount) })] })] })), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
12053
- display: "flex",
12054
- justifyContent: "space-between",
12055
- alignItems: "center",
12056
- fontSize: "14px",
12057
- marginBottom: "8px",
12058
- }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.totalAmount") }), u$2("span", { style: {
12237
+ transition: "all 0.2s ease",
12238
+ }, children: [u$2("div", { style: {
12239
+ fontSize: "13px",
12059
12240
  color: "var(--bw-text-muted)",
12060
- fontFamily: "var(--bw-font-family)",
12061
- fontWeight: 500,
12062
- }, children: formatCurrency(totalAmount) })] })), u$2("div", { style: {
12063
- display: "flex",
12064
- justifyContent: "space-between",
12065
- alignItems: "center",
12066
- fontSize: "18px",
12067
- fontWeight: 600,
12068
- }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
12069
- ? t$1("summary.payToday")
12070
- : t$1("summary.totalAmount") }), u$2("span", { style: {
12071
- color: "var(--bw-highlight-color)",
12072
- fontFamily: "var(--bw-font-family)",
12241
+ marginBottom: "4px",
12242
+ }, children: t$1("summary.payFull") }), u$2("div", { style: {
12243
+ fontSize: "18px",
12073
12244
  fontWeight: 700,
12074
- }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
12075
- fontSize: "12px",
12076
- color: "var(--bw-text-muted)",
12245
+ color: paymentOption === "full"
12246
+ ? "var(--bw-highlight-color)"
12247
+ : "var(--bw-text-color)",
12248
+ }, children: formatCurrency(totalAmount) })] })] })), u$2("div", { style: {
12249
+ display: "flex",
12250
+ justifyContent: "space-between",
12251
+ alignItems: "center",
12252
+ fontSize: "18px",
12253
+ fontWeight: 600,
12254
+ }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositChoice && paymentOption === "deposit"
12255
+ ? t$1("summary.payToday")
12256
+ : t$1("summary.totalAmount") }), u$2("span", { style: {
12257
+ color: "var(--bw-highlight-color)",
12077
12258
  fontFamily: "var(--bw-font-family)",
12078
- marginTop: "8px",
12079
- textAlign: "right",
12080
- }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), u$2("div", { ref: paymentSectionRef, children: (stripePromise || systemConfig?.paymentProvider === "mollie") &&
12081
- (() => {
12082
- if (!isReadyForPayment()) {
12083
- const participantsWithNames = watchedParticipants.filter((p) => p.name?.trim()).length;
12084
- const totalParticipantRows = watchedParticipants.length;
12085
- const participantsWithoutNames = totalParticipantRows - participantsWithNames;
12086
- const missing = [];
12087
- if (participantFieldsConfig.name.required) {
12088
- if (participantsWithNames === 0) {
12089
- missing.push(t$1("payment.needParticipant"));
12090
- }
12091
- else if (participantsWithoutNames > 0) {
12092
- missing.push(t$1("payment.needAllNames", { count: totalParticipantRows }));
12093
- }
12094
- }
12095
- if (participantsWithNames > (eventDetails?.availableSpots || 0)) {
12096
- missing.push(t$1("payment.reduceParticipants", { count: eventDetails?.availableSpots || 0 }));
12097
- }
12098
- if (!watchedCustomerName || watchedCustomerName.trim().length < 2 || customerNameError) {
12099
- missing.push(t$1("payment.needValidName"));
12100
- }
12101
- if (!watchedCustomerEmail || watchedCustomerEmail.trim().length === 0 || customerEmailError) {
12102
- missing.push(t$1("payment.needValidEmail"));
12103
- }
12104
- if (!watchedAcceptTerms) {
12105
- missing.push(t$1("payment.needAcceptTerms"));
12106
- }
12107
- const message = missing.length > 0
12108
- ? t$1("payment.missingFields", { fields: missing.join(", ") })
12109
- : t$1("payment.fillRequired");
12110
- return (u$2("div", { style: {
12111
- ...cardStyles$1,
12112
- border: "1px solid var(--bw-warning-color)",
12113
- color: "var(--bw-warning-color)",
12259
+ fontWeight: 700,
12260
+ }, children: formatCurrency(paymentAmount) })] }), hasDepositChoice && paymentOption === "deposit" && (u$2("div", { style: {
12261
+ fontSize: "12px",
12262
+ color: "var(--bw-text-muted)",
12114
12263
  fontFamily: "var(--bw-font-family)",
12115
- textAlign: "center",
12116
- }, children: message }));
12117
- }
12118
- const discountCodeProp = appliedDiscountCode
12119
- ? {
12120
- id: appliedDiscountCode.id,
12121
- code: appliedDiscountCode.code,
12122
- description: appliedDiscountCode.description || undefined,
12123
- type: appliedDiscountCode.discountType || "percentage",
12124
- value: appliedDiscountCode.discountValue || 0,
12125
- discountAmount: appliedDiscountCode.discountAmount,
12126
- newTotal: appliedDiscountCode.newTotal,
12127
- }
12128
- : null;
12129
- if (systemConfig?.paymentProvider === "mollie") {
12130
- return (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] }));
12131
- }
12132
- return (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(StripePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] }));
12133
- })() })] })] })] }) }));
12264
+ marginTop: "8px",
12265
+ textAlign: "right",
12266
+ }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), depositsOnlyBlocked && (u$2("div", { style: cardStyles$1, children: u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.depositNotConfigured") }) })), !hasPaymentProvider && !depositsOnlyBlocked && (u$2("div", { style: cardStyles$1, children: u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && !depositsOnlyBlocked && (systemConfig?.paymentProvider === "mollie" ? (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] })) : (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(StripePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] })))] }))] }) }));
12134
12267
  }
12135
12268
 
12136
12269
  /**
@@ -12978,6 +13111,40 @@
12978
13111
  } }))] }));
12979
13112
  };
12980
13113
 
13114
+ function PaymentLogosStrip() {
13115
+ const logoHeight = 20;
13116
+ const logoCellStyle = {
13117
+ display: "inline-flex",
13118
+ alignItems: "center",
13119
+ justifyContent: "center",
13120
+ padding: "0px 6px",
13121
+ minHeight: "29px", // +7px from previous 22px
13122
+ borderRadius: "6px",
13123
+ };
13124
+ return (u$2("div", { style: {
13125
+ padding: "6px 14px 10px 14px",
13126
+ backgroundColor: "color-mix(in srgb, var(--bw-text-color) 100%, var(--bw-surface-color) 18%)",
13127
+ display: "flex",
13128
+ alignItems: "center",
13129
+ justifyContent: "center",
13130
+ borderRadius: "var(--bw-border-radius)",
13131
+ gap: "4px",
13132
+ flexWrap: "wrap",
13133
+ width: "fit-content",
13134
+ margin: "20px auto",
13135
+ }, children: [u$2("span", { style: logoCellStyle, children: [u$2("span", { style: { color: "#003087", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Pay" }), u$2("span", { style: { color: "#009cde", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Pal" })] }), u$2("span", { style: logoCellStyle, children: u$2("svg", { width: "34", height: logoHeight, viewBox: "0 0 34 20", "aria-label": "Maestro", children: [u$2("circle", { cx: "13", cy: "10", r: "8", fill: "#eb001b" }), u$2("circle", { cx: "21", cy: "10", r: "8", fill: "#00a2e5", fillOpacity: "0.92" })] }) }), u$2("span", { style: logoCellStyle, children: u$2("span", { style: { color: "#1434CB", fontSize: "14px", fontStyle: "italic", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "VISA" }) }), u$2("span", { style: logoCellStyle, children: u$2("span", { style: { color: "purple", fontSize: "14px", fontWeight: 800, fontFamily: "Arial, sans-serif", lineHeight: 1 }, children: "Klarna" }) }), u$2("span", { style: logoCellStyle, children: u$2("svg", { width: "74", height: logoHeight, viewBox: "0 0 74 20", "aria-label": "Amazon Pay", children: [u$2("text", { x: "0", y: "14", fontSize: "12", fill: "#111827", fontFamily: "Arial, sans-serif", children: "amazon" }), u$2("text", { x: "45", y: "14", fontSize: "12", fill: "#111827", fontFamily: "Arial, sans-serif", children: "pay" }), u$2("path", { d: "M5 15 C17 20, 35 20, 48 15", stroke: "#f59e0b", strokeWidth: "1.6", fill: "none", strokeLinecap: "round" })] }) }), u$2("span", { style: logoCellStyle, children: [u$2("span", { style: {
13136
+ fontSize: "16px",
13137
+ fontWeight: 800,
13138
+ fontFamily: "Arial, sans-serif",
13139
+ lineHeight: 1,
13140
+ background: "conic-gradient(from 25deg, #4285F4 0 24%, #DB4437 24% 48%, #F4B400 48% 73%, #0F9D58 73% 100%)",
13141
+ WebkitBackgroundClip: "text",
13142
+ backgroundClip: "text",
13143
+ color: "transparent",
13144
+ WebkitTextFillColor: "transparent",
13145
+ }, children: "G" }), u$2("span", { style: { color: "#5f6368", fontSize: "14px", fontWeight: 600, fontFamily: "Arial, sans-serif", marginLeft: "3px", lineHeight: 1 }, children: "Pay" })] }), u$2("span", { style: logoCellStyle, children: u$2("svg", { width: "60", height: logoHeight, viewBox: "0 0 60 20", "aria-label": "Apple Pay", children: [u$2("text", { x: "0", y: "14.5", fontSize: "14.5", fill: "#111827", fontFamily: "-apple-system, BlinkMacSystemFont, Arial, sans-serif", children: "\uF8FF" }), u$2("text", { x: "14", y: "14.5", fontSize: "14.5", fill: "#111827", fontFamily: "-apple-system, BlinkMacSystemFont, Arial, sans-serif", children: "Pay" })] }) })] }));
13146
+ }
13147
+
12981
13148
  function VoucherPurchaseCard({ config, minEventPrice, fallbackImages = [], onClick, standalone = false, }) {
12982
13149
  const t = useTranslations();
12983
13150
  const [activeSlideIndex, setActiveSlideIndex] = d$1(0);
@@ -14097,7 +14264,7 @@
14097
14264
  display: "flex",
14098
14265
  flexDirection: "column",
14099
14266
  justifyContent: "space-between",
14100
- height: "490px",
14267
+ height: "540px",
14101
14268
  }, children: [u$2("div", { children: [u$2("h2", { className: "event-type-title", style: {
14102
14269
  fontSize: "clamp(1.1rem, 2.5vw, 24px)",
14103
14270
  fontWeight: 700,
@@ -14167,19 +14334,9 @@
14167
14334
  }) }) })) : (u$2("div", { className: "event-type-desc", style: {
14168
14335
  margin: "10px 0",
14169
14336
  height: "7.5em", // Same height as highlights
14170
- }, children: "\u00A0" })) })] }), u$2("div", { children: [u$2("div", { children: [u$2("div", { className: "event-type-price", style: {
14171
- fontWeight: 700,
14172
- color: "var(--bw-text-color)",
14173
- fontFamily: "var(--bw-font-family)",
14174
- textAlign: "right",
14175
- }, children: u$2("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), u$2("div", { className: "event-type-price", style: {
14176
- fontSize: "clamp(1.72rem, 4vw, 32px)",
14177
- fontWeight: 700,
14178
- color: "var(--bw-text-color)",
14179
- fontFamily: "var(--bw-font-family)",
14180
- textAlign: "right",
14181
- }, children: u$2("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), (() => {
14337
+ }, children: "\u00A0" })) })] }), u$2("div", { children: [(() => {
14182
14338
  const preview = eventType.cardPreview ?? [];
14339
+ const hasMoreDates = eventType.availableInstancesCount > preview.length;
14183
14340
  return (u$2("div", { style: {
14184
14341
  marginTop: "12px",
14185
14342
  borderTop: "1px solid var(--bw-border-color)",
@@ -14213,8 +14370,33 @@
14213
14370
  transition: "background 0.15s",
14214
14371
  boxSizing: "border-box",
14215
14372
  }, children: [u$2("span", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: "3px" }, children: [item.isSpecial && (u$2("span", { style: { color: "var(--bw-highlight-color)", fontSize: "11px", lineHeight: 1 }, children: "\u2605" })), formatWeekday(item.startTime, timezone, locale), " ", formatDate(item.startTime, timezone, locale)] }), u$2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }, children: item.name }), u$2("span", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [hasDiscount && (u$2("span", { style: { textDecoration: "line-through", opacity: 0.55, fontSize: "11px" }, children: formatCurrency(item.basePrice) })), u$2("span", { style: { fontWeight: 700, color: item.isSpecial ? "var(--bw-highlight-color)" : "var(--bw-text-color)" }, children: formatCurrency(item.price) })] }), item.specialDescription ? (u$2(InfoBadge, { text: item.specialDescription })) : (u$2("span", {}))] }, item.id));
14216
- }) })] }));
14217
- })(), u$2("div", { style: {
14373
+ }) }), hasMoreDates && (u$2("button", { type: "button", onClick: (e) => {
14374
+ e.stopPropagation();
14375
+ onEventTypeSelect(eventType);
14376
+ }, style: {
14377
+ marginTop: "6px",
14378
+ padding: 0,
14379
+ border: "none",
14380
+ background: "none",
14381
+ color: "var(--bw-highlight-color)",
14382
+ fontFamily: "var(--bw-font-family)",
14383
+ fontSize: "13px",
14384
+ fontWeight: 600,
14385
+ cursor: "pointer",
14386
+ textDecoration: "underline",
14387
+ }, children: t("events.seeMoreDates") }))] }));
14388
+ })(), u$2("div", { style: { marginBottom: "16px" }, children: [u$2("div", { className: "event-type-price", style: {
14389
+ fontWeight: 700,
14390
+ color: "var(--bw-text-color)",
14391
+ fontFamily: "var(--bw-font-family)",
14392
+ textAlign: "right",
14393
+ }, children: u$2("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), u$2("div", { className: "event-type-price", style: {
14394
+ fontSize: "clamp(1.72rem, 4vw, 32px)",
14395
+ fontWeight: 700,
14396
+ color: "var(--bw-text-color)",
14397
+ fontFamily: "var(--bw-font-family)",
14398
+ textAlign: "right",
14399
+ }, children: u$2("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), u$2("div", { style: {
14218
14400
  display: "flex",
14219
14401
  justifyContent: "flex-end",
14220
14402
  alignItems: "center",
@@ -14272,7 +14454,7 @@
14272
14454
  fontFamily: "var(--bw-font-family)",
14273
14455
  boxShadow: "var(--bw-shadow-md)",
14274
14456
  }, children: t("events.soldOut") }) }))] }, eventType.id));
14275
- }) }) })), u$2(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
14457
+ }) }) })), u$2(PaymentLogosStrip, {}), u$2(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
14276
14458
  }
14277
14459
 
14278
14460
  const getAllocationBadgeInfo = (availableSpots, maxParticipants, t) => {
@@ -14399,7 +14581,7 @@
14399
14581
  boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
14400
14582
  }, children: formatCurrency(price) }));
14401
14583
  };
14402
- function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
14584
+ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, hasUpsellsStep = false, }) {
14403
14585
  const t = useTranslations();
14404
14586
  const { locale } = useLocale();
14405
14587
  const timezone = useTimezone();
@@ -14465,88 +14647,88 @@
14465
14647
  const footerNav = (u$2("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t("common.back") }));
14466
14648
  // Show loading state first if we're loading event instances
14467
14649
  if (isLoadingEventInstances) {
14468
- return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "24px" }, children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer", style: {
14469
- backgroundColor: "var(--bw-surface-color)",
14470
- border: "1px solid var(--bw-border-color)",
14471
- borderRadius: "var(--bw-border-radius)",
14472
- overflow: "hidden",
14473
- }, children: [u$2("div", { style: {
14474
- display: "flex",
14475
- justifyContent: "space-between",
14476
- alignItems: "center",
14477
- padding: "16px 20px",
14478
- cursor: "pointer",
14479
- borderBottom: "1px solid var(--bw-border-color)",
14480
- }, children: [u$2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$2("div", { style: {
14481
- width: "80px",
14482
- height: "20px",
14483
- backgroundColor: "var(--bw-border-color)",
14484
- borderRadius: "var(--bw-border-radius-small)",
14485
- } }), u$2("div", { style: {
14486
- width: "16px",
14487
- height: "16px",
14488
- backgroundColor: "var(--bw-border-color)",
14489
- borderRadius: "var(--bw-border-radius-small)",
14490
- } })] }), u$2("div", { style: {
14491
- width: "70px",
14492
- height: "16px",
14493
- backgroundColor: "var(--bw-highlight-color)",
14494
- opacity: 0.3,
14495
- borderRadius: "var(--bw-border-radius-small)",
14496
- } })] }), u$2("div", { style: {
14497
- display: "flex",
14498
- flexDirection: "column",
14499
- gap: "12px",
14500
- paddingTop: "12px",
14501
- padding: "12px 20px 20px 20px",
14502
- }, children: Array.from({ length: 2 }).map((_, eventIdx) => (u$2("div", { style: {
14503
- position: "relative",
14504
- border: "1px solid var(--bw-border-color)",
14505
- backgroundColor: "var(--bw-surface-color)",
14506
- borderRadius: "var(--bw-border-radius)",
14650
+ return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "24px" }, children: [u$2(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (u$2("div", { className: "skeleton-shimmer", style: {
14651
+ backgroundColor: "var(--bw-surface-color)",
14652
+ border: "1px solid var(--bw-border-color)",
14653
+ borderRadius: "var(--bw-border-radius)",
14654
+ overflow: "hidden",
14655
+ }, children: [u$2("div", { style: {
14656
+ display: "flex",
14657
+ justifyContent: "space-between",
14658
+ alignItems: "center",
14507
14659
  padding: "16px 20px",
14508
- fontFamily: "var(--bw-font-family)",
14509
- }, children: [u$2("div", { style: {
14510
- display: "flex",
14511
- justifyContent: "space-between",
14512
- width: "100%",
14513
- alignItems: "flex-start",
14514
- gap: "12px",
14515
- marginBottom: "4px",
14516
- }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
14517
- width: "40px",
14518
- height: "40px",
14519
- backgroundColor: "var(--bw-background-color)",
14520
- border: "1px solid var(--bw-border-color)",
14521
- borderTopWidth: "4px",
14522
- borderRadius: "var(--bw-border-radius-small)",
14523
- } }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [u$2("div", { style: {
14524
- width: "80px",
14525
- height: "16px",
14526
- backgroundColor: "var(--bw-border-color)",
14527
- borderRadius: "var(--bw-border-radius)",
14528
- } }), u$2("div", { style: {
14529
- width: "60px",
14530
- height: "14px",
14531
- backgroundColor: "var(--bw-border-color)",
14532
- borderRadius: "var(--bw-border-radius)",
14533
- } })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: u$2("div", { style: {
14534
- width: "70px",
14535
- height: "20px",
14536
- backgroundColor: "var(--bw-highlight-color)",
14537
- opacity: 0.3,
14538
- borderRadius: "var(--bw-border-radius)",
14539
- } }) })] }), u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [u$2("div", { style: {
14540
- width: "120px",
14541
- height: "16px",
14660
+ cursor: "pointer",
14661
+ borderBottom: "1px solid var(--bw-border-color)",
14662
+ }, children: [u$2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [u$2("div", { style: {
14663
+ width: "80px",
14664
+ height: "20px",
14542
14665
  backgroundColor: "var(--bw-border-color)",
14543
- borderRadius: "var(--bw-border-radius)",
14666
+ borderRadius: "var(--bw-border-radius-small)",
14544
14667
  } }), u$2("div", { style: {
14545
- width: "50px",
14546
- height: "20px",
14668
+ width: "16px",
14669
+ height: "16px",
14547
14670
  backgroundColor: "var(--bw-border-color)",
14548
- borderRadius: "16px",
14549
- } })] })] }, eventIdx))) })] }, idx))) }) }) }));
14671
+ borderRadius: "var(--bw-border-radius-small)",
14672
+ } })] }), u$2("div", { style: {
14673
+ width: "70px",
14674
+ height: "16px",
14675
+ backgroundColor: "var(--bw-highlight-color)",
14676
+ opacity: 0.3,
14677
+ borderRadius: "var(--bw-border-radius-small)",
14678
+ } })] }), u$2("div", { style: {
14679
+ display: "flex",
14680
+ flexDirection: "column",
14681
+ gap: "12px",
14682
+ paddingTop: "12px",
14683
+ padding: "12px 20px 20px 20px",
14684
+ }, children: Array.from({ length: 2 }).map((_, eventIdx) => (u$2("div", { style: {
14685
+ position: "relative",
14686
+ border: "1px solid var(--bw-border-color)",
14687
+ backgroundColor: "var(--bw-surface-color)",
14688
+ borderRadius: "var(--bw-border-radius)",
14689
+ padding: "16px 20px",
14690
+ fontFamily: "var(--bw-font-family)",
14691
+ }, children: [u$2("div", { style: {
14692
+ display: "flex",
14693
+ justifyContent: "space-between",
14694
+ width: "100%",
14695
+ alignItems: "flex-start",
14696
+ gap: "12px",
14697
+ marginBottom: "4px",
14698
+ }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
14699
+ width: "40px",
14700
+ height: "40px",
14701
+ backgroundColor: "var(--bw-background-color)",
14702
+ border: "1px solid var(--bw-border-color)",
14703
+ borderTopWidth: "4px",
14704
+ borderRadius: "var(--bw-border-radius-small)",
14705
+ } }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [u$2("div", { style: {
14706
+ width: "80px",
14707
+ height: "16px",
14708
+ backgroundColor: "var(--bw-border-color)",
14709
+ borderRadius: "var(--bw-border-radius)",
14710
+ } }), u$2("div", { style: {
14711
+ width: "60px",
14712
+ height: "14px",
14713
+ backgroundColor: "var(--bw-border-color)",
14714
+ borderRadius: "var(--bw-border-radius)",
14715
+ } })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: u$2("div", { style: {
14716
+ width: "70px",
14717
+ height: "20px",
14718
+ backgroundColor: "var(--bw-highlight-color)",
14719
+ opacity: 0.3,
14720
+ borderRadius: "var(--bw-border-radius)",
14721
+ } }) })] }), u$2("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [u$2("div", { style: {
14722
+ width: "120px",
14723
+ height: "16px",
14724
+ backgroundColor: "var(--bw-border-color)",
14725
+ borderRadius: "var(--bw-border-radius)",
14726
+ } }), u$2("div", { style: {
14727
+ width: "50px",
14728
+ height: "20px",
14729
+ backgroundColor: "var(--bw-border-color)",
14730
+ borderRadius: "16px",
14731
+ } })] })] }, eventIdx))) })] }, idx))) })] }) }));
14550
14732
  }
14551
14733
  // Show empty state only if not loading and no event instances
14552
14734
  if (eventInstances.length === 0) {
@@ -14565,116 +14747,116 @@
14565
14747
  fontFamily: "var(--bw-font-family)",
14566
14748
  }, children: t("instances.noAvailable") }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t("instances.noAvailableMessage") })] }) }) }));
14567
14749
  }
14568
- return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "20px 10px" }, children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
14569
- const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
14570
- return (u$2(k$3, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (u$2("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), u$2(Accordion, { title: label, priceInfo: u$2("div", { style: {
14571
- fontSize: "16px",
14572
- fontWeight: 500,
14573
- marginLeft: "auto",
14574
- padding: "4px 8px",
14575
- borderRadius: "var(--bw-border-radius-small)",
14576
- backgroundColor: monthPriceDisplayInfo
14577
- ? monthPriceDisplayInfo.backgroundColor
14578
- : "#14532d",
14579
- color: monthPriceDisplayInfo
14580
- ? monthPriceDisplayInfo.textColor
14581
- : "#4ade80",
14582
- boxShadow: monthPriceDisplayInfo
14583
- ? "0 2px 4px rgba(0, 0, 0, 0.2)"
14584
- : undefined,
14585
- }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
14586
- const availableSpots = event.maxParticipants - event.participantCount;
14587
- const isFullyBooked = availableSpots === 0;
14588
- const startDate = new Date(event.startTime);
14589
- const isPastEvent = today.toISOString() >= startDate.toISOString();
14590
- const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
14591
- return (u$2("div", { style: {
14592
- position: "relative",
14593
- border: "1px solid var(--bw-border-color)",
14594
- backgroundColor: "var(--bw-surface-color)",
14595
- borderRadius: "var(--bw-border-radius)",
14596
- padding: "16px 10px",
14597
- transition: "all 0.2s ease",
14598
- fontFamily: "var(--bw-font-family)",
14599
- opacity: isDisabled ? 0.3 : 1,
14600
- filter: isDisabled ? "grayscale(40%)" : "none",
14601
- cursor: isDisabled ? "not-allowed" : "pointer",
14602
- }, onClick: () => {
14603
- if (!isDisabled) {
14604
- handleEventInstanceSelect(event);
14605
- }
14606
- }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
14607
- position: "absolute",
14608
- inset: 0,
14609
- backgroundColor: "rgba(15, 23, 42, 0.8)",
14610
- borderRadius: "var(--bw-border-radius)",
14611
- display: "flex",
14612
- alignItems: "center",
14613
- justifyContent: "center",
14614
- }, children: u$2("div", { style: {
14615
- width: "32px",
14616
- height: "32px",
14617
- color: "var(--bw-highlight-color)",
14618
- opacity: 0.8,
14619
- fontSize: "32px",
14620
- }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), u$2("div", { style: {
14621
- display: "flex",
14622
- justifyContent: "space-between",
14623
- width: "100%",
14624
- alignItems: "flex-start",
14625
- gap: "12px",
14626
- marginBottom: "4px",
14627
- }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
14628
- fontSize: "16px",
14629
- transition: "all 0.2s ease",
14630
- borderRadius: "var(--bw-border-radius-small)",
14631
- borderTop: "4px solid var(--bw-border-color)",
14632
- border: "1px solid var(--bw-border-color)",
14633
- width: "40px",
14634
- height: "40px",
14635
- display: "flex",
14636
- alignItems: "center",
14637
- justifyContent: "center",
14638
- fontWeight: 700,
14639
- color: "var(--bw-text-color)",
14640
- backgroundColor: "var(--bw-background-color)",
14641
- }, children: startDate.getDate() }), u$2("div", { style: {
14642
- fontSize: "16px",
14643
- color: "var(--bw-text-color)",
14644
- display: "flex",
14645
- flexDirection: "column",
14646
- alignItems: "flex-start",
14647
- justifyContent: "flex-start",
14648
- lineHeight: 1.25,
14649
- }, children: [u$2("div", { children: [u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
14650
- formatWeekday(event.endTime, timezone, locale) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), u$2("div", { children: formatWeekday(event.startTime, timezone, locale) ===
14651
- formatWeekday(event.endTime, timezone, locale) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), 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, timezone, locale) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), u$2("span", { style: {
14652
- fontSize: "12px",
14653
- fontWeight: 400,
14654
- color: "var(--bw-text-muted)",
14655
- marginLeft: "6px",
14656
- backgroundColor: "rgba(0, 0, 0, 0.05)",
14657
- whiteSpace: "nowrap",
14658
- padding: "2px 6px",
14659
- borderRadius: "var(--bw-border-radius-small)",
14660
- }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), u$2("div", { style: {
14661
- textAlign: "right",
14662
- display: "flex",
14663
- flexDirection: "column",
14664
- alignItems: "flex-end",
14665
- }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { style: {
14666
- fontSize: "16px",
14667
- fontWeight: 600,
14668
- color: "var(--bw-text-color)",
14669
- lineHeight: 1.25,
14670
- margin: "0 0 2px 0",
14671
- display: "flex",
14672
- alignItems: "center",
14673
- gap: "8px",
14674
- maxWidth: "230px",
14675
- }, children: event.name }))] }, event.id));
14676
- }) }) })] }, key));
14677
- }) }) }) }));
14750
+ return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: u$2("div", { style: { padding: "20px 10px" }, children: [u$2(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
14751
+ const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
14752
+ return (u$2(k$3, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (u$2("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), u$2(Accordion, { title: label, priceInfo: u$2("div", { style: {
14753
+ fontSize: "16px",
14754
+ fontWeight: 500,
14755
+ marginLeft: "auto",
14756
+ padding: "4px 8px",
14757
+ borderRadius: "var(--bw-border-radius-small)",
14758
+ backgroundColor: monthPriceDisplayInfo
14759
+ ? monthPriceDisplayInfo.backgroundColor
14760
+ : "#14532d",
14761
+ color: monthPriceDisplayInfo
14762
+ ? monthPriceDisplayInfo.textColor
14763
+ : "#4ade80",
14764
+ boxShadow: monthPriceDisplayInfo
14765
+ ? "0 2px 4px rgba(0, 0, 0, 0.2)"
14766
+ : undefined,
14767
+ }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
14768
+ const availableSpots = event.maxParticipants - event.participantCount;
14769
+ const isFullyBooked = availableSpots === 0;
14770
+ const startDate = new Date(event.startTime);
14771
+ const isPastEvent = today.toISOString() >= startDate.toISOString();
14772
+ const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
14773
+ return (u$2("div", { style: {
14774
+ position: "relative",
14775
+ border: "1px solid var(--bw-border-color)",
14776
+ backgroundColor: "var(--bw-surface-color)",
14777
+ borderRadius: "var(--bw-border-radius)",
14778
+ padding: "16px 10px",
14779
+ transition: "all 0.2s ease",
14780
+ fontFamily: "var(--bw-font-family)",
14781
+ opacity: isDisabled ? 0.3 : 1,
14782
+ filter: isDisabled ? "grayscale(40%)" : "none",
14783
+ cursor: isDisabled ? "not-allowed" : "pointer",
14784
+ }, onClick: () => {
14785
+ if (!isDisabled) {
14786
+ handleEventInstanceSelect(event);
14787
+ }
14788
+ }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
14789
+ position: "absolute",
14790
+ inset: 0,
14791
+ backgroundColor: "rgba(15, 23, 42, 0.8)",
14792
+ borderRadius: "var(--bw-border-radius)",
14793
+ display: "flex",
14794
+ alignItems: "center",
14795
+ justifyContent: "center",
14796
+ }, children: u$2("div", { style: {
14797
+ width: "32px",
14798
+ height: "32px",
14799
+ color: "var(--bw-highlight-color)",
14800
+ opacity: 0.8,
14801
+ fontSize: "32px",
14802
+ }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), u$2("div", { style: {
14803
+ display: "flex",
14804
+ justifyContent: "space-between",
14805
+ width: "100%",
14806
+ alignItems: "flex-start",
14807
+ gap: "12px",
14808
+ marginBottom: "4px",
14809
+ }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
14810
+ fontSize: "16px",
14811
+ transition: "all 0.2s ease",
14812
+ borderRadius: "var(--bw-border-radius-small)",
14813
+ borderTop: "4px solid var(--bw-border-color)",
14814
+ border: "1px solid var(--bw-border-color)",
14815
+ width: "40px",
14816
+ height: "40px",
14817
+ display: "flex",
14818
+ alignItems: "center",
14819
+ justifyContent: "center",
14820
+ fontWeight: 700,
14821
+ color: "var(--bw-text-color)",
14822
+ backgroundColor: "var(--bw-background-color)",
14823
+ }, children: startDate.getDate() }), u$2("div", { style: {
14824
+ fontSize: "16px",
14825
+ color: "var(--bw-text-color)",
14826
+ display: "flex",
14827
+ flexDirection: "column",
14828
+ alignItems: "flex-start",
14829
+ justifyContent: "flex-start",
14830
+ lineHeight: 1.25,
14831
+ }, children: [u$2("div", { children: [u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
14832
+ formatWeekday(event.endTime, timezone, locale) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), u$2("div", { children: formatWeekday(event.startTime, timezone, locale) ===
14833
+ formatWeekday(event.endTime, timezone, locale) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), 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, timezone, locale) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), u$2("span", { style: {
14834
+ fontSize: "12px",
14835
+ fontWeight: 400,
14836
+ color: "var(--bw-text-muted)",
14837
+ marginLeft: "6px",
14838
+ backgroundColor: "rgba(0, 0, 0, 0.05)",
14839
+ whiteSpace: "nowrap",
14840
+ padding: "2px 6px",
14841
+ borderRadius: "var(--bw-border-radius-small)",
14842
+ }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), u$2("div", { style: {
14843
+ textAlign: "right",
14844
+ display: "flex",
14845
+ flexDirection: "column",
14846
+ alignItems: "flex-end",
14847
+ }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { style: {
14848
+ fontSize: "16px",
14849
+ fontWeight: 600,
14850
+ color: "var(--bw-text-color)",
14851
+ lineHeight: 1.25,
14852
+ margin: "0 0 2px 0",
14853
+ display: "flex",
14854
+ alignItems: "center",
14855
+ gap: "8px",
14856
+ maxWidth: "230px",
14857
+ }, children: event.name }))] }, event.id));
14858
+ }) }) })] }, key));
14859
+ }) })] }) }));
14678
14860
  }
14679
14861
 
14680
14862
  function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, isLoadingEventDetails = false, isLoadingShowAll = false, isLoading = false, }) {
@@ -15297,12 +15479,11 @@
15297
15479
  return $$1(dialogContent, portalContainer);
15298
15480
  }
15299
15481
 
15300
- // Upsell card styles
15301
15482
  const cardBaseStyles = {
15302
15483
  position: "relative",
15303
15484
  display: "flex",
15304
15485
  flexDirection: "column",
15305
- padding: "16px",
15486
+ padding: "12px",
15306
15487
  backgroundColor: "var(--bw-surface-color)",
15307
15488
  borderWidth: "2px",
15308
15489
  borderStyle: "solid",
@@ -15322,19 +15503,13 @@
15322
15503
  opacity: 0.6,
15323
15504
  cursor: "not-allowed",
15324
15505
  };
15325
- const checkboxContainerStyles = {
15326
- position: "absolute",
15327
- bottom: "12px",
15328
- left: "12px",
15329
- zIndex: 1,
15330
- };
15331
15506
  const checkboxInnerStyles = {
15332
- width: "24px",
15333
- height: "24px",
15507
+ width: "48px",
15508
+ height: "48px",
15334
15509
  borderWidth: "2px",
15335
15510
  borderStyle: "solid",
15336
15511
  borderColor: "var(--bw-border-color)",
15337
- borderRadius: "6px",
15512
+ borderRadius: "12px",
15338
15513
  display: "flex",
15339
15514
  alignItems: "center",
15340
15515
  justifyContent: "center",
@@ -15346,13 +15521,13 @@
15346
15521
  borderColor: "var(--bw-highlight-color)",
15347
15522
  backgroundColor: "var(--bw-highlight-color)",
15348
15523
  };
15349
- const imageContainerStyles = {
15350
- width: "100%",
15351
- height: "120px",
15352
- marginBottom: "12px",
15524
+ const previewImageContainerStyles = {
15525
+ width: "56px",
15526
+ height: "56px",
15353
15527
  borderRadius: "calc(var(--bw-border-radius) - 4px)",
15354
15528
  overflow: "hidden",
15355
15529
  backgroundColor: "var(--bw-background-color)",
15530
+ flexShrink: 0,
15356
15531
  };
15357
15532
  const imageStyles = {
15358
15533
  width: "100%",
@@ -15367,23 +15542,53 @@
15367
15542
  justifyContent: "center",
15368
15543
  color: "var(--bw-text-muted)",
15369
15544
  };
15370
- const nameStyles = {
15545
+ const previewNameStyles = {
15371
15546
  fontSize: "16px",
15372
15547
  fontWeight: 600,
15373
15548
  color: "var(--bw-text-color)",
15374
- margin: "0 0 6px 0",
15375
- paddingRight: "36px",
15549
+ margin: 0,
15376
15550
  fontFamily: "var(--bw-font-family)",
15377
15551
  };
15552
+ const previewHeaderStyles = {
15553
+ display: "flex",
15554
+ alignItems: "center",
15555
+ gap: "10px",
15556
+ };
15557
+ const previewPriceStyles = {
15558
+ fontSize: "13px",
15559
+ color: "var(--bw-text-muted)",
15560
+ marginTop: "2px",
15561
+ fontFamily: "var(--bw-font-family)",
15562
+ };
15563
+ const headerRightStyles = {
15564
+ marginLeft: "auto",
15565
+ display: "flex",
15566
+ alignItems: "center",
15567
+ gap: "8px",
15568
+ };
15569
+ const chevronStyles = {
15570
+ fontSize: "12px",
15571
+ color: "var(--bw-text-muted)",
15572
+ transition: "transform 0.2s ease",
15573
+ };
15574
+ const expandedContentStyles = {
15575
+ marginTop: "12px",
15576
+ paddingTop: "12px",
15577
+ borderTop: "1px solid var(--bw-border-color)",
15578
+ };
15579
+ const expandedImageContainerStyles = {
15580
+ width: "100%",
15581
+ height: "180px",
15582
+ marginBottom: "12px",
15583
+ borderRadius: "calc(var(--bw-border-radius) - 4px)",
15584
+ overflow: "hidden",
15585
+ backgroundColor: "var(--bw-background-color)",
15586
+ };
15378
15587
  const descriptionStyles = {
15379
15588
  fontSize: "13px",
15380
15589
  color: "var(--bw-text-muted)",
15381
15590
  margin: "0 0 10px 0",
15382
15591
  lineHeight: 1.4,
15383
- display: "-webkit-box",
15384
- WebkitLineClamp: 5,
15385
- WebkitBoxOrient: "vertical",
15386
- overflow: "hidden",
15387
15592
  fontFamily: "var(--bw-font-family)",
15388
15593
  };
15389
15594
  const itemsContainerStyles = {
@@ -15465,6 +15670,8 @@
15465
15670
  const { locale } = useLocale();
15466
15671
  const totalPrice = upsell.price * participantCount;
15467
15672
  const isDisabled = !upsell.available;
15673
+ const [isExpanded, setIsExpanded] = d$1(false);
15674
+ const hasSavings = (upsell.savingsPercent ?? 0) > 0;
15468
15675
  const getCardStyles = () => {
15469
15676
  if (isDisabled)
15470
15677
  return cardDisabledStyles;
@@ -15472,16 +15679,22 @@
15472
15679
  return cardSelectedStyles;
15473
15680
  return cardBaseStyles;
15474
15681
  };
15475
- return (u$2("div", { style: getCardStyles(), onClick: !isDisabled ? onSelect : undefined, role: "checkbox", "aria-checked": isSelected, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
15682
+ const toggleExpanded = () => {
15683
+ setIsExpanded((current) => !current);
15684
+ };
15685
+ return (u$2("div", { style: getCardStyles(), onClick: !isDisabled ? toggleExpanded : undefined, role: "button", "aria-expanded": isExpanded, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
15476
15686
  if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
15477
15687
  e.preventDefault();
15478
- onSelect();
15688
+ toggleExpanded();
15479
15689
  }
15480
- }, children: [u$2("div", { style: checkboxContainerStyles, children: u$2("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "16px", height: "16px" }, children: u$2("polyline", { points: "20 6 9 17 4 12" }) })) }) }), u$2("div", { style: imageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), u$2("div", { style: { flex: 1 }, children: [u$2("h4", { style: nameStyles, children: upsell.name }), upsell.description && (u$2("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (u$2("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (u$2("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (u$2("div", { style: eventInfoStyles, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString(locale === "de" ? "de-DE" : locale === "en" ? "en-US" : locale === "es" ? "es-ES" : locale === "sv" ? "sv-SE" : "pt-PT", {
15690
+ }, children: [u$2("div", { style: previewHeaderStyles, children: [u$2("div", { style: previewImageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "32px", height: "32px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), u$2("div", { style: { minWidth: 0 }, children: [u$2("h4", { style: previewNameStyles, children: upsell.name }), u$2("div", { style: previewPriceStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), hasSavings && (u$2("div", { style: { ...previewPriceStyles, color: "var(--bw-highlight-color)" }, children: t("upsells.savePercent", { percent: upsell.savingsPercent ?? 0 }) }))] }), u$2("div", { style: headerRightStyles, children: [u$2("button", { type: "button", onClick: (event) => {
15691
+ event.stopPropagation();
15692
+ onSelect();
15693
+ }, "aria-label": t("common.extras"), style: { background: "transparent", border: "none", cursor: "pointer", padding: 0 }, disabled: isDisabled, children: u$2("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "32px", height: "32px" }, children: u$2("polyline", { points: "20 6 9 17 4 12" }) })) }) }), u$2("span", { style: { ...chevronStyles, transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)" }, children: "\u25BC" })] })] }), isExpanded && (u$2("div", { style: expandedContentStyles, children: [u$2("div", { style: expandedImageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), upsell.description && (u$2("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (u$2("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (u$2("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (u$2("div", { style: eventInfoStyles, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString(locale === "de" ? "de-DE" : locale === "en" ? "en-US" : locale === "es" ? "es-ES" : locale === "sv" ? "sv-SE" : "pt-PT", {
15481
15694
  weekday: "short",
15482
15695
  day: "numeric",
15483
15696
  month: "short",
15484
- })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] }))] }), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason
15697
+ })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] })), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] })), hasSavings && (u$2("span", { style: priceTotalStyles, children: t("upsells.savePercent", { percent: upsell.savingsPercent ?? 0 }) }))] })] })), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason
15485
15698
  ? formatUnavailableReason(upsell.unavailableReason, t)
15486
15699
  : t("upsells.notAvailable") }) }))] }));
15487
15700
  }
@@ -15500,20 +15713,9 @@
15500
15713
  }
15501
15714
  };
15502
15715
  const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
15503
- // Calculate total for selected upsells
15504
- const calculateTotal = () => {
15505
- return selectedUpsells.reduce((total, selection) => {
15506
- const upsell = upsells.find((u) => u.id === selection.upsellPackageId);
15507
- if (upsell) {
15508
- return total + upsell.price * selection.quantity;
15509
- }
15510
- return total;
15511
- }, 0);
15512
- };
15513
- const selectedTotal = calculateTotal();
15514
15716
  const selectedCount = selectedUpsells.length;
15515
15717
  const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), className: buttonClassName, children: t("common.back") }), u$2("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), className: buttonClassName, children: selectedCount === 0 ? t("button.continueWithout") : t("button.continue") })] }));
15516
- return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), u$2("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
15718
+ return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [u$2(FlowProgress, { currentStep: "upsells", hasUpsellsStep: true }), isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
15517
15719
  }
15518
15720
 
15519
15721
  /**
@@ -15651,8 +15853,10 @@
15651
15853
  // Upsells state
15652
15854
  const [upsells, setUpsells] = d$1([]);
15653
15855
  const [selectedUpsells, setSelectedUpsells] = d$1([]);
15856
+ const [bookingPersistedState, setBookingPersistedState] = d$1(null);
15654
15857
  const [isLoadingUpsells, setIsLoadingUpsells] = d$1(false);
15655
15858
  const [tempParticipantCount, setTempParticipantCount] = d$1(1); // Used during upsell step
15859
+ const hasUpsellsFlowStep = upsells.length > 0 || currentStep === "upsells";
15656
15860
  // State for upcoming events (next-events view mode)
15657
15861
  const [upcomingEvents, setUpcomingEvents] = d$1([]);
15658
15862
  const [showingPreview, setShowingPreview] = d$1(true);
@@ -15779,6 +15983,7 @@
15779
15983
  ...(data.mollieProfileId ? { mollieProfileId: data.mollieProfileId } : {}),
15780
15984
  ...(data.mollieTestmode !== undefined ? { mollieTestmode: data.mollieTestmode } : {}),
15781
15985
  roundPricesEnabled: data.roundPricesEnabled ?? true,
15986
+ widgetPaymentMode: data.widgetPaymentMode ?? "all",
15782
15987
  });
15783
15988
  }
15784
15989
  }
@@ -16143,6 +16348,7 @@
16143
16348
  mollieProfileId: data.mollieProfileId,
16144
16349
  mollieTestmode: data.mollieTestmode,
16145
16350
  roundPricesEnabled: data.roundPricesEnabled ?? true,
16351
+ widgetPaymentMode: data.widgetPaymentMode ?? "all",
16146
16352
  });
16147
16353
  }
16148
16354
  if (data.stripePublishableKey) {
@@ -16203,6 +16409,7 @@
16203
16409
  mollieProfileId: data.mollieProfileId,
16204
16410
  mollieTestmode: data.mollieTestmode,
16205
16411
  roundPricesEnabled: data.roundPricesEnabled ?? true,
16412
+ widgetPaymentMode: data.widgetPaymentMode ?? "all",
16206
16413
  });
16207
16414
  if (!stripePromise && data.stripePublishableKey) {
16208
16415
  const stripeOptions = {
@@ -16305,6 +16512,7 @@
16305
16512
  const handleEventInstanceSelect = async (eventInstance) => {
16306
16513
  trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
16307
16514
  setSelectedEventInstance(eventInstance);
16515
+ setBookingPersistedState(null);
16308
16516
  bookingReturnStep.current = "eventInstances";
16309
16517
  // Set default participant count for upsell calculations
16310
16518
  const defaultParticipantCount = 1;
@@ -16358,6 +16566,21 @@
16358
16566
  setCurrentStep(bookingReturnStep.current);
16359
16567
  setSelectedEventInstance(null);
16360
16568
  setEventDetails(null);
16569
+ setBookingPersistedState(null);
16570
+ };
16571
+ const handleBackFromBooking = () => {
16572
+ if (upsells.length > 0) {
16573
+ setCurrentStep("upsells");
16574
+ return;
16575
+ }
16576
+ if (isDirectInstanceMode) {
16577
+ setCurrentStep("eventTypes");
16578
+ setSidebarOpen(false);
16579
+ setEventDetails(null);
16580
+ setBookingPersistedState(null);
16581
+ return;
16582
+ }
16583
+ handleBackToEventInstances();
16361
16584
  };
16362
16585
  const handleBookingSuccess = (result) => {
16363
16586
  trackEvent("booking_completed", { paymentIntentId: result.paymentIntent?.id });
@@ -16365,6 +16588,7 @@
16365
16588
  setSuccessPaymentId(result.paymentIntent.id);
16366
16589
  setSidebarOpen(false);
16367
16590
  setShouldRenderBookingForm(false);
16591
+ setBookingPersistedState(null);
16368
16592
  config.onSuccess?.(result);
16369
16593
  };
16370
16594
  const handleBookingError = (errorMessage) => {
@@ -16433,6 +16657,7 @@
16433
16657
  ? (eventTypes.find((et) => et.id === eventTypeId) ?? selectedEventType)
16434
16658
  : selectedEventType;
16435
16659
  if (resolvedEventType && resolvedEventType !== selectedEventType) {
16660
+ trackEvent("event_type_selected", { eventTypeId: resolvedEventType.id, eventTypeName: resolvedEventType.name });
16436
16661
  setSelectedEventType(resolvedEventType);
16437
16662
  }
16438
16663
  // Check if this is coming from a card preview (eventTypeId was provided)
@@ -16486,7 +16711,9 @@
16486
16711
  }
16487
16712
  : null;
16488
16713
  if (eventInstance) {
16714
+ trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
16489
16715
  setSelectedEventInstance(eventInstance);
16716
+ setBookingPersistedState(null);
16490
16717
  }
16491
16718
  setError(null);
16492
16719
  // Check for upsells before going to booking (same as handleEventInstanceSelect)
@@ -16650,19 +16877,7 @@
16650
16877
  }
16651
16878
  // Main view based on view mode
16652
16879
  if (viewMode === "next-events" && showingPreview) {
16653
- return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
16654
- setCurrentStep("eventTypes");
16655
- setShowingPreview(true);
16656
- setEventDetails(null);
16657
- }, onBackToEventTypes: () => {
16658
- setCurrentStep("eventTypes");
16659
- setShowingPreview(true);
16660
- setEventDetails(null);
16661
- }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
16662
- setCurrentStep("eventTypes");
16663
- setShowingPreview(true);
16664
- setEventDetails(null);
16665
- }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16880
+ return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16666
16881
  setIsSuccess(false);
16667
16882
  setCurrentStep("eventTypes");
16668
16883
  setShowingPreview(true);
@@ -16672,6 +16887,7 @@
16672
16887
  setShouldRenderBookingForm(false);
16673
16888
  setSelectedUpsells([]);
16674
16889
  setUpsells([]);
16890
+ setBookingPersistedState(null);
16675
16891
  const url = new URL(window.location.href);
16676
16892
  url.searchParams.delete("payment_intent");
16677
16893
  url.searchParams.delete("payment_intent_client_secret");
@@ -16682,19 +16898,7 @@
16682
16898
  }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
16683
16899
  }
16684
16900
  if (viewMode === "specials" && showingPreview) {
16685
- return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
16686
- setCurrentStep("eventTypes");
16687
- setShowingPreview(true);
16688
- setEventDetails(null);
16689
- }, onBackToEventTypes: () => {
16690
- setCurrentStep("eventTypes");
16691
- setShowingPreview(true);
16692
- setEventDetails(null);
16693
- }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
16694
- setCurrentStep("eventTypes");
16695
- setShowingPreview(true);
16696
- setEventDetails(null);
16697
- }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16901
+ return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16698
16902
  setIsSuccess(false);
16699
16903
  setCurrentStep("eventTypes");
16700
16904
  setShowingPreview(true);
@@ -16704,6 +16908,7 @@
16704
16908
  setShouldRenderBookingForm(false);
16705
16909
  setSelectedUpsells([]);
16706
16910
  setUpsells([]);
16911
+ setBookingPersistedState(null);
16707
16912
  }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
16708
16913
  }
16709
16914
  if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
@@ -16713,7 +16918,7 @@
16713
16918
  }, isOpen: currentStep === "eventInstances", onClose: () => {
16714
16919
  setShowingPreview(true);
16715
16920
  setCurrentStep("eventTypes");
16716
- }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16921
+ }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16717
16922
  setIsSuccess(false);
16718
16923
  setCurrentStep("eventTypes");
16719
16924
  setShowingPreview(true);
@@ -16756,7 +16961,7 @@
16756
16961
  setShouldRenderInstanceSelection(true);
16757
16962
  }
16758
16963
  }, children: config.buttonText ||
16759
- (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(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, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16964
+ (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
16760
16965
  setIsSuccess(false);
16761
16966
  setCurrentStep("eventTypes");
16762
16967
  setSidebarOpen(false);
@@ -16788,32 +16993,36 @@
16788
16993
  // Determine the correct back handlers based on view mode
16789
16994
  const getBackHandlers = () => {
16790
16995
  if (viewMode === "next-events") {
16791
- return {
16792
- onBackToEventInstances: () => {
16793
- setCurrentStep("eventInstances");
16996
+ const backFromBooking = () => {
16997
+ if (upsells.length > 0) {
16998
+ setCurrentStep("upsells");
16794
16999
  setShowingPreview(false);
16795
- setEventDetails(null);
16796
- },
17000
+ return;
17001
+ }
17002
+ setCurrentStep("eventInstances");
17003
+ setShowingPreview(false);
17004
+ setEventDetails(null);
17005
+ setBookingPersistedState(null);
17006
+ };
17007
+ return {
17008
+ onBackToEventInstances: backFromBooking,
16797
17009
  onBackToEventTypes: () => {
16798
17010
  setShowingPreview(true);
16799
17011
  setCurrentStep("eventTypes");
16800
17012
  setEventDetails(null);
17013
+ setBookingPersistedState(null);
16801
17014
  },
16802
- onClose: () => {
16803
- setCurrentStep("eventInstances");
16804
- setShowingPreview(false);
16805
- setEventDetails(null);
16806
- },
17015
+ onClose: backFromBooking,
16807
17016
  };
16808
17017
  }
16809
17018
  return {
16810
- onBackToEventInstances: handleBackToEventInstances,
17019
+ onBackToEventInstances: handleBackFromBooking,
16811
17020
  onBackToEventTypes: handleBackToEventTypes,
16812
- onClose: handleBackToEventInstances,
17021
+ onClose: handleBackFromBooking,
16813
17022
  };
16814
17023
  };
16815
17024
  const backHandlers = getBackHandlers();
16816
- return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(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, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
17025
+ return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
16817
17026
  setIsSuccess(false);
16818
17027
  setCurrentStep("eventTypes");
16819
17028
  setSuccessPaymentId(null);