@bigz-app/booking-widget 1.3.0 → 1.3.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { createContext, useState, useEffect, useCallback, useMemo, useContext, forwardRef, useRef, Fragment as Fragment$1 } from 'react';
+import React__default, { createContext, useState, useCallback, useMemo, useContext, useEffect, forwardRef, useRef, Fragment as Fragment$1 } from 'react';
 import { createRoot } from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -280,6 +280,8 @@ const de$1 = {
     "booking.participantName": "Name *",
     "booking.participantNamePlaceholder": "Teilnehmername",
     "booking.participantAge": "Alter",
+    "booking.participantLevel": "Level",
+    "booking.participantLevelPlaceholder": "Level wählen...",
     "booking.addParticipant": "{{number}}. Teilnehmer hinzufügen",
     "booking.maxParticipants": "Maximale Anzahl an Teilnehmern erreicht. Es sind nur noch {{count}} Plätze verfügbar.",
     "booking.maxSpotsReached": "Maximal {{count}} Plätze verfügbar.",
@@ -428,7 +430,11 @@ const de$1 = {
     "validation.emailInvalid": "Ungültiges E-Mail-Format",
     "validation.emailDomainInvalid": "Ungültige E-Mail-Domain",
     "validation.participantRequired": "Mindestens ein Teilnehmer erforderlich",
+    "validation.ageRequired": "Alter ist erforderlich",
+    "validation.levelRequired": "Bitte ein Level auswählen",
     "validation.acceptTerms": "Bitte akzeptiere die Allgemeinen Geschäftsbedingungen",
+    "level.beginner": "Anfänger",
+    "level.advanced": "Fortgeschritten",
     // Sidebar
     "sidebar.close": "Schließen",
     // Promo
@@ -550,6 +556,8 @@ const en = {
     "booking.participantName": "Name *",
     "booking.participantNamePlaceholder": "Participant name",
     "booking.participantAge": "Age",
+    "booking.participantLevel": "Level",
+    "booking.participantLevelPlaceholder": "Select level...",
     "booking.addParticipant": "Add participant {{number}}",
     "booking.maxParticipants": "Maximum number of participants reached. Only {{count}} spots are available.",
     "booking.maxSpotsReached": "Maximum {{count}} spots available.",
@@ -698,7 +706,11 @@ const en = {
     "validation.emailInvalid": "Invalid email format",
     "validation.emailDomainInvalid": "Invalid email domain",
     "validation.participantRequired": "At least one participant is required",
+    "validation.ageRequired": "Age is required",
+    "validation.levelRequired": "Please select a level",
     "validation.acceptTerms": "Please accept the terms and conditions",
+    "level.beginner": "Beginner",
+    "level.advanced": "Advanced",
     // Sidebar
     "sidebar.close": "Close",
     // Promo
@@ -820,6 +832,8 @@ const es = {
     "booking.participantName": "Nombre *",
     "booking.participantNamePlaceholder": "Nombre del participante",
     "booking.participantAge": "Edad",
+    "booking.participantLevel": "Nivel",
+    "booking.participantLevelPlaceholder": "Seleccionar nivel...",
     "booking.addParticipant": "Añadir participante {{number}}",
     "booking.maxParticipants": "Número máximo de participantes alcanzado. Solo quedan {{count}} plazas disponibles.",
     "booking.maxSpotsReached": "Máximo {{count}} plazas disponibles.",
@@ -968,7 +982,11 @@ const es = {
     "validation.emailInvalid": "Formato de correo electrónico inválido",
     "validation.emailDomainInvalid": "Dominio de correo electrónico inválido",
     "validation.participantRequired": "Se requiere al menos un participante",
+    "validation.ageRequired": "La edad es obligatoria",
+    "validation.levelRequired": "Selecciona un nivel",
     "validation.acceptTerms": "Por favor, acepta los términos y condiciones",
+    "level.beginner": "Principiante",
+    "level.advanced": "Avanzado",
     // Sidebar
     "sidebar.close": "Cerrar",
     // Promo
@@ -1090,6 +1108,8 @@ const pt = {
     "booking.participantName": "Nome *",
     "booking.participantNamePlaceholder": "Nome do participante",
     "booking.participantAge": "Idade",
+    "booking.participantLevel": "Nível",
+    "booking.participantLevelPlaceholder": "Selecionar nível...",
     "booking.addParticipant": "Adicionar participante {{number}}",
     "booking.maxParticipants": "Número máximo de participantes atingido. Apenas {{count}} lugares disponíveis.",
     "booking.maxSpotsReached": "Máximo {{count}} lugares disponíveis.",
@@ -1238,7 +1258,11 @@ const pt = {
     "validation.emailInvalid": "Formato de email inválido",
     "validation.emailDomainInvalid": "Domínio de email inválido",
     "validation.participantRequired": "É necessário pelo menos um participante",
+    "validation.ageRequired": "A idade é obrigatória",
+    "validation.levelRequired": "Por favor selecione um nível",
     "validation.acceptTerms": "Por favor, aceite os termos e condições",
+    "level.beginner": "Iniciante",
+    "level.advanced": "Avançado",
     // Sidebar
     "sidebar.close": "Fechar",
     // Promo
@@ -1360,6 +1384,8 @@ const sv = {
     "booking.participantName": "Namn *",
     "booking.participantNamePlaceholder": "Deltagarens namn",
     "booking.participantAge": "Ålder",
+    "booking.participantLevel": "Nivå",
+    "booking.participantLevelPlaceholder": "Välj nivå...",
     "booking.addParticipant": "Lägg till deltagare {{number}}",
     "booking.maxParticipants": "Maximalt antal deltagare uppnått. Bara {{count}} platser är tillgängliga.",
     "booking.maxSpotsReached": "Maximalt {{count}} platser tillgängliga.",
@@ -1508,7 +1534,11 @@ const sv = {
     "validation.emailInvalid": "Ogiltigt e-postformat",
     "validation.emailDomainInvalid": "Ogiltig e-postdomän",
     "validation.participantRequired": "Minst en deltagare krävs",
+    "validation.ageRequired": "Ålder krävs",
+    "validation.levelRequired": "Välj en nivå",
     "validation.acceptTerms": "Acceptera villkoren",
+    "level.beginner": "Nybörjare",
+    "level.advanced": "Avancerad",
     // Sidebar
     "sidebar.close": "Stäng",
     // Promo
@@ -1601,18 +1631,9 @@ function persistLocale(locale) {
 }
 const I18nContext = createContext(null);
 function I18nProvider({ configLocale, children }) {
-    // Priority: configLocale (site owner) > persisted user choice > browser language > "de"
-    // If configLocale is set, the site owner has locked the language - don't restore user choice.
-    const [overrideLocale, setOverrideLocale] = useState(() => {
-        if (configLocale)
-            return null;
-        return readPersistedLocale();
-    });
-    useEffect(() => {
-        if (configLocale) {
-            setOverrideLocale(null);
-        }
-    }, [configLocale]);
+    // Priority: persisted user choice > configLocale (org default) > browser language > "de"
+    // This keeps org locale as default, but remembers explicit user overrides across reloads.
+    const [overrideLocale, setOverrideLocale] = useState(() => readPersistedLocale());
     const locale = overrideLocale ?? resolveLocale(configLocale);
     const handleSetLocale = useCallback((next) => {
         persistLocale(next);
@@ -1744,6 +1765,16 @@ const resolveSemanticColor = (colorValue, fallbackValue) => {
     // If semantic resolution fails, use fallback or return the original value
     return fallbackValue || colorValue;
 };
+// Legacy theme name redirects (old name → new name)
+const legacyThemeRedirects = {
+    "light-fresh": "teal-minimal",
+    "light-elegant": "blue-business",
+    "light-vibrant": "orange-raw",
+    "light-professional": "blue-business",
+    "dark-night": "navy-night",
+    "dark-modern": "navy-night",
+    "dark-forest": "green-deep",
+};
 // Predefined themes
 const themes = {
     // --- Light Themes ---
@@ -1890,7 +1921,9 @@ const StyleProvider = ({ config, children, }) => {
     }, []);
     // PERFORMANCE OPTIMIZATION: Memoize style calculations
     const themedStyles = useMemo(() => {
-        const themeName = config.theme || "teal-minimal";
+        const rawThemeName = config.theme || "teal-minimal";
+        // Redirect legacy theme names to new names
+        const themeName = legacyThemeRedirects[rawThemeName] || rawThemeName;
         const themeDefaults = themes[themeName] || themes["teal-minimal"];
         const getCSSValue = (value, fallback) => {
             if (!value)
@@ -11183,16 +11216,37 @@ const objectType = ZodObject.create;
 ZodUnion.create;
 ZodIntersection.create;
 ZodTuple.create;
-ZodEnum.create;
+const enumType = ZodEnum.create;
 ZodPromise.create;
 ZodOptional.create;
 ZodNullable.create;
+const preprocessType = ZodEffects.createWithPreprocess;
 
-const participantSchema = (t) => objectType({
-    name: stringType().trim().min(1, t("validation.nameRequired")),
+const DEFAULT_PARTICIPANT_FIELDS_CONFIG = {
+    name: { enabled: true, required: true },
+    age: { enabled: true, required: false },
+    level: { enabled: false, required: false },
+};
+const participantSchema = (t, fieldsConfig) => objectType({
+    name: stringType().trim().optional(),
     age: numberType().min(0).max(120).optional(),
+    level: preprocessType((value) => (value === "" ? undefined : value), enumType(["beginner", "advanced"]).optional()),
+})
+    .superRefine((value, ctx) => {
+    if (fieldsConfig.name.required && (!value.name || value.name.trim().length < 1)) {
+        ctx.addIssue({ code: ZodIssueCode.custom, message: t("validation.nameRequired"), path: ["name"] });
+    }
+    if (!fieldsConfig.name.enabled && value.name && value.name.trim().length > 0) {
+        ctx.addIssue({ code: ZodIssueCode.custom, message: t("validation.nameRequired"), path: ["name"] });
+    }
+    if (fieldsConfig.age.required && typeof value.age !== "number") {
+        ctx.addIssue({ code: ZodIssueCode.custom, message: t("validation.ageRequired"), path: ["age"] });
+    }
+    if (fieldsConfig.level.required && !value.level) {
+        ctx.addIssue({ code: ZodIssueCode.custom, message: t("validation.levelRequired"), path: ["level"] });
+    }
 });
-function createBookingFormSchema(t) {
+function createBookingFormSchema(t, fieldsConfig = DEFAULT_PARTICIPANT_FIELDS_CONFIG) {
     const tr = t ?? ((key) => key);
     return objectType({
         customerName: stringType().trim().min(2, tr("validation.nameMinLength")),
@@ -11202,7 +11256,7 @@ function createBookingFormSchema(t) {
             .email(tr("validation.emailInvalid"))
             .regex(/\.[a-zA-Z]{2,}$/, tr("validation.emailDomainInvalid")),
         customerPhone: stringType().trim().optional(),
-        participants: arrayType(participantSchema(tr)).min(1, tr("validation.participantRequired")),
+        participants: arrayType(participantSchema(tr, fieldsConfig)).min(1, tr("validation.participantRequired")),
         discountCode: stringType().trim().optional(),
         comment: stringType().trim().optional(),
         acceptTerms: booleanType().refine((val) => val === true, {
@@ -11345,7 +11399,8 @@ const participantUpsellStyles = {
         gap: "8px",
         marginTop: "10px",
         paddingTop: "10px",
-        borderTop: "1px dashed var(--bw-border-color)",
+        paddingBottom: "25px",
+        borderBottom: "1px dashed var(--bw-border-color)",
     },
     label: {
         display: "inline-flex",
@@ -11403,6 +11458,8 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const { locale } = useLocale();
     const timezone = useTimezone();
     const roundEnabled = systemConfig?.roundPricesEnabled !== false;
+    const participantFieldsConfig = eventDetails.participantFieldsConfig ?? DEFAULT_PARTICIPANT_FIELDS_CONFIG;
+    const participantLevelOptions = eventDetails.participantLevelOptions ?? ["beginner", "advanced"];
     const roundDiscountUp = (minorUnits) => Math.ceil(minorUnits / 100) * 100;
     const calcPercentDiscountAmount = (baseAmount, basisPoints, round) => {
         const raw = Math.round((baseAmount * basisPoints) / 10000);
@@ -11415,18 +11472,19 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     // Per-participant upsell selections: participantIndex -> array of upsell package IDs
     const [participantUpsells, setParticipantUpsells] = useState({});
     const form = useForm({
-        resolver: t(createBookingFormSchema(t$1)),
+        resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
         defaultValues: {
             customerName: "",
             customerEmail: "",
             customerPhone: "",
-            participants: [{ name: "" }],
+            participants: [{ name: "", level: undefined }],
             discountCode: "",
             comment: "",
             acceptTerms: false,
         },
     });
     const watchedParticipants = form.watch("participants");
+    const participantCount = watchedParticipants.length;
     const watchedCustomerName = form.watch("customerName");
     const watchedCustomerEmail = form.watch("customerEmail");
     const watchedComment = form.watch("comment");
@@ -11468,14 +11526,13 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const calculateBaseTotal = useCallback(() => {
         if (!eventDetails)
             return 0;
-        return eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
-    }, [eventDetails, watchedParticipants]);
+        return eventDetails.price * participantCount;
+    }, [eventDetails, participantCount]);
     // Calculate upsells total based on per-participant selections
     const calculateUpsellsTotal = useCallback(() => {
         let total = 0;
-        watchedParticipants.forEach((participant, index) => {
-            // Only count upsells for participants with names
-            if (participant.name.trim()) {
+        watchedParticipants.forEach((_, index) => {
+            if (participantCount > 0) {
                 const participantUpsellIds = participantUpsells[index] || [];
                 participantUpsellIds.forEach(upsellId => {
                     const upsell = upsells.find(u => u.id === upsellId);
@@ -11486,7 +11543,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
             }
         });
         return total;
-    }, [participantUpsells, upsells, watchedParticipants]);
+    }, [participantUpsells, upsells, watchedParticipants, participantCount]);
     const calculateTotalDiscount = useCallback(() => {
         return appliedVouchers.reduce((total, voucher) => {
             if (voucher.type === "discount") {
@@ -11507,8 +11564,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const calculateDeposit = () => {
         if (!eventDetails || !eventDetails.deposit)
             return 0;
-        const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
-        return eventDetails.deposit * participantCount;
+        return eventDetails.deposit * watchedParticipants.length;
     };
     const baseTotal = calculateBaseTotal();
     const upsellsTotal = calculateUpsellsTotal();
@@ -11525,8 +11581,8 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     // Includes participantIndices to track which participants selected each upsell
     const aggregatedUpsellSelections = useCallback(() => {
         const upsellParticipantMap = {};
-        watchedParticipants.forEach((participant, index) => {
-            if (participant.name.trim()) {
+        watchedParticipants.forEach((_, index) => {
+            if (participantCount > 0) {
                 const participantUpsellIds = participantUpsells[index] || [];
                 participantUpsellIds.forEach(upsellId => {
                     if (!upsellParticipantMap[upsellId]) {
@@ -11560,15 +11616,17 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         setAppliedVouchers((prev) => prev.filter((v) => v.code !== code));
     }, []);
     const isReadyForPayment = () => {
-        const participantsWithNames = watchedParticipants.filter((p) => p.name.trim()).length;
+        const participantsWithNames = watchedParticipants.filter((p) => p.name?.trim()).length;
         const totalParticipantRows = watchedParticipants.length;
-        const allParticipantsHaveNames = participantsWithNames === totalParticipantRows;
+        const allParticipantsHaveNames = participantFieldsConfig.name.required
+            ? participantsWithNames === totalParticipantRows
+            : true;
         const participantsWithinLimit = participantsWithNames <= (eventDetails?.availableSpots || 0);
         const hasValidCustomerName = watchedCustomerName && watchedCustomerName.trim().length >= 2;
         const hasValidCustomerEmail = watchedCustomerEmail && watchedCustomerEmail.trim().length > 0 && !customerEmailError;
         return allParticipantsHaveNames &&
             participantsWithinLimit &&
-            participantsWithNames > 0 &&
+            (participantFieldsConfig.name.required ? participantsWithNames > 0 : totalParticipantRows > 0) &&
             hasValidCustomerName &&
             hasValidCustomerEmail &&
             watchedAcceptTerms;
@@ -11576,7 +11634,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     useEffect(() => {
         if (appliedVouchers.length > 0) {
             const newBaseTotal = eventDetails?.price
-                ? eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length
+                ? eventDetails.price * watchedParticipants.length
                 : 0;
             const currentUpsellsTotal = calculateUpsellsTotal();
             const orderTotal = newBaseTotal + currentUpsellsTotal;
@@ -11621,7 +11679,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         const currentParticipants = form.getValues("participants");
         const availableSpots = eventDetails?.availableSpots || 0;
         if (currentParticipants.length < availableSpots) {
-            form.setValue("participants", [...currentParticipants, { name: "" }]);
+            form.setValue("participants", [...currentParticipants, { name: "", level: undefined }]);
         }
         else {
             alert(t$1("booking.maxParticipants", { count: availableSpots }));
@@ -11740,7 +11798,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                         justifyContent: "space-between",
                                         alignItems: "center",
                                         marginBottom: "16px",
-                                    }, children: jsx("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [jsxs("div", { style: { flex: 1 }, children: [jsx("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), jsx("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 && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] }), jsxs("div", { style: { width: "80px" }, children: [jsx("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), jsx("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
+                                    }, children: jsx("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [jsxs("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (jsxs("div", { style: { flex: 1 }, children: [jsx("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), jsx("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 && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (jsxs("div", { style: { width: "80px" }, children: [jsx("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), jsx("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
                                                                         setValueAs: (value) => {
                                                                             if (value === "" || value === null || value === undefined) {
                                                                                 return undefined;
@@ -11748,7 +11806,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                             const num = Number(value);
                                                                             return Number.isNaN(num) ? undefined : num;
                                                                         },
-                                                                    }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] }), watchedParticipants.length > 1 && (jsxs("div", { children: [jsx("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), jsx("button", { type: "button", onClick: () => removeParticipant(index), style: {
+                                                                    }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (jsxs("div", { children: [jsx("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), jsx("button", { type: "button", onClick: () => removeParticipant(index), style: {
                                                                         color: "var(--bw-error-color)",
                                                                         backgroundColor: "var(--bw-surface-color)",
                                                                         border: "1px solid var(--bw-border-color)",
@@ -11764,7 +11822,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                         fontWeight: 700,
                                                                         fontFamily: "var(--bw-font-family)",
                                                                         padding: 0,
-                                                                    }, children: "\u00D7" })] }))] }), upsells.length > 0 && (jsx("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
+                                                                    }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (jsxs("div", { style: { minWidth: "140px" }, children: [jsx("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), jsxs("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [jsx("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (jsx("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (jsx("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (jsx("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
                                                         const isSelected = (participantUpsells[index] || []).includes(upsell.id);
                                                         return (jsxs("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [jsx("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), jsx("span", { style: { fontWeight: 500 }, children: upsell.name }), jsxs("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
                                                     }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (jsx("div", { style: {
@@ -11793,9 +11851,9 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                 color: "var(--bw-text-color)",
                                                                 fontWeight: 500,
                                                                 fontFamily: "var(--bw-font-family)",
-                                                            }, children: [jsxs("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.filter((p) => p.name.trim()).length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (jsxs("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [jsxs("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) => {
+                                                            }, children: [jsxs("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (jsxs("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [jsxs("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) => {
                                                             // Count how many participants have this upsell selected
-                                                            const countWithUpsell = watchedParticipants.filter((p, idx) => p.name.trim() && (participantUpsells[idx] || []).includes(upsell.id)).length;
+                                                            const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
                                                             if (countWithUpsell === 0)
                                                                 return null;
                                                             const upsellLineTotal = upsell.price * countWithUpsell;
@@ -11896,15 +11954,17 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                             }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), jsx("div", { ref: paymentSectionRef, children: (stripePromise || systemConfig?.paymentProvider === "mollie") &&
                                         (() => {
                                             if (!isReadyForPayment()) {
-                                                const participantsWithNames = watchedParticipants.filter((p) => p.name.trim()).length;
+                                                const participantsWithNames = watchedParticipants.filter((p) => p.name?.trim()).length;
                                                 const totalParticipantRows = watchedParticipants.length;
                                                 const participantsWithoutNames = totalParticipantRows - participantsWithNames;
                                                 const missing = [];
-                                                if (participantsWithNames === 0) {
-                                                    missing.push(t$1("payment.needParticipant"));
-                                                }
-                                                else if (participantsWithoutNames > 0) {
-                                                    missing.push(t$1("payment.needAllNames", { count: totalParticipantRows }));
+                                                if (participantFieldsConfig.name.required) {
+                                                    if (participantsWithNames === 0) {
+                                                        missing.push(t$1("payment.needParticipant"));
+                                                    }
+                                                    else if (participantsWithoutNames > 0) {
+                                                        missing.push(t$1("payment.needAllNames", { count: totalParticipantRows }));
+                                                    }
                                                 }
                                                 if (participantsWithNames > (eventDetails?.availableSpots || 0)) {
                                                     missing.push(t$1("payment.reduceParticipants", { count: eventDetails?.availableSpots || 0 }));
@@ -12079,7 +12139,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
             try {
                 const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/get-booking-by-payment"), {
                     method: "POST",
-                    headers: createApiHeaders(config),
+                    headers: createApiHeaders(config, locale),
                     body: JSON.stringify(createRequestBody(config, {
                         paymentIntentId: targetPaymentIntentId,
                     })),
@@ -12313,7 +12373,7 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             flexDirection: "column",
                                             gap: "var(--bw-spacing-small)",
                                         }, children: formData.participants
-                                            .filter((p) => p.name.trim())
+                                            .filter((p) => p.name?.trim() || p.age || p.level)
                                             .map((participant, index) => (jsx("div", { className: "print-participant", style: {
                                                 display: "flex",
                                                 justifyContent: "space-between",
@@ -12324,11 +12384,15 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                                             }, children: jsxs("div", { className: "print-participant-info", children: [jsx("div", { className: "print-participant-name", style: {
                                                             color: "var(--bw-text-color)",
                                                             fontFamily: "var(--bw-font-family)",
-                                                        }, children: participant.name }), participant.age && (jsx("div", { className: "print-participant-age", style: {
+                                                        }, children: participant.name || `#${index + 1}` }), participant.age && (jsx("div", { className: "print-participant-age", style: {
                                                             color: "var(--bw-text-muted)",
                                                             fontSize: "var(--bw-font-size-small)",
                                                             fontFamily: "var(--bw-font-family)",
-                                                        }, children: t("success.age", { age: participant.age }) }))] }) }, index))) }) })] })), jsxs("div", { className: "print-booking-card", style: {
+                                                        }, children: t("success.age", { age: participant.age }) })), participant.level && (jsxs("div", { style: {
+                                                            color: "var(--bw-text-muted)",
+                                                            fontSize: "var(--bw-font-size-small)",
+                                                            fontFamily: "var(--bw-font-family)",
+                                                        }, children: [t("booking.participantLevel"), ": ", t(`level.${participant.level}`)] }))] }) }, index))) }) })] })), jsxs("div", { className: "print-booking-card", style: {
                                 backgroundColor: "var(--bw-surface-color)",
                                 border: `1px solid var(--bw-border-color)`,
                                 borderRadius: "var(--bw-border-radius)",
@@ -16507,11 +16571,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
 function UniversalBookingWidget(props) {
     const [languagePolicy, setLanguagePolicy] = useState(null);
     const [orgTimezone, setOrgTimezone] = useState("Europe/Berlin");
-    const serverLockedLocale = languagePolicy && !languagePolicy.multiLanguageEnabled
-        ? languagePolicy.organizationLocale
-        : undefined;
-    const i18nConfigLocale = serverLockedLocale !== undefined ? serverLockedLocale : props.config.locale;
-    const providerProps = i18nConfigLocale ? { configLocale: i18nConfigLocale } : {};
+    const providerProps = props.config.locale ? { configLocale: props.config.locale } : {};
     const showLanguagePicker = props.config.showLanguagePicker !== false &&
         (languagePolicy === null || languagePolicy.multiLanguageEnabled);
     return (jsx(I18nProvider, { ...providerProps, children: jsx(ShowLanguagePickerProvider, { value: showLanguagePicker, children: jsx(TimezoneProvider, { value: orgTimezone, children: jsx(UniversalBookingWidgetInner, { ...props, onWidgetLanguage: setLanguagePolicy, onTimezone: setOrgTimezone }) }) }) }));