@bigz-app/booking-widget 1.3.0 → 1.3.2

package/dist/booking-widget.js

@@ -338,6 +338,8 @@
       "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.",
@@ -486,7 +488,11 @@
       "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
@@ -608,6 +614,8 @@
       "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.",
@@ -756,7 +764,11 @@
       "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
@@ -878,6 +890,8 @@
       "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.",
@@ -1026,7 +1040,11 @@
       "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
@@ -1148,6 +1166,8 @@
       "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.",
@@ -1296,7 +1316,11 @@
       "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
@@ -1418,6 +1442,8 @@
       "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.",
@@ -1566,7 +1592,11 @@
       "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
@@ -1659,18 +1689,9 @@
   }
   const I18nContext = R$2(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] = d$1(() => {
-          if (configLocale)
-              return null;
-          return readPersistedLocale();
-      });
-      y$1(() => {
-          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] = d$1(() => readPersistedLocale());
       const locale = overrideLocale ?? resolveLocale(configLocale);
       const handleSetLocale = q$2((next) => {
           persistLocale(next);
@@ -1802,6 +1823,16 @@
       // 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 ---
@@ -1948,7 +1979,9 @@
       }, []);
       // PERFORMANCE OPTIMIZATION: Memoize style calculations
       const themedStyles = T$2(() => {
-          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)
@@ -11309,16 +11342,37 @@
   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")),
@@ -11328,7 +11382,7 @@
               .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, {
@@ -11471,7 +11525,8 @@
           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",
@@ -11529,6 +11584,8 @@
       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);
@@ -11541,18 +11598,19 @@
       // Per-participant upsell selections: participantIndex -> array of upsell package IDs
       const [participantUpsells, setParticipantUpsells] = d$1({});
       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");
@@ -11594,14 +11652,13 @@
       const calculateBaseTotal = q$2(() => {
           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 = q$2(() => {
           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);
@@ -11612,7 +11669,7 @@
               }
           });
           return total;
-      }, [participantUpsells, upsells, watchedParticipants]);
+      }, [participantUpsells, upsells, watchedParticipants, participantCount]);
       const calculateTotalDiscount = q$2(() => {
           return appliedVouchers.reduce((total, voucher) => {
               if (voucher.type === "discount") {
@@ -11633,8 +11690,7 @@
       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();
@@ -11651,8 +11707,8 @@
       // Includes participantIndices to track which participants selected each upsell
       const aggregatedUpsellSelections = q$2(() => {
           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]) {
@@ -11686,15 +11742,17 @@
           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;
@@ -11702,7 +11760,7 @@
       y$1(() => {
           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;
@@ -11747,7 +11805,7 @@
           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 }));
@@ -11866,7 +11924,7 @@
                                           justifyContent: "space-between",
                                           alignItems: "center",
                                           marginBottom: "16px",
-                                      }, 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: [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 }))] }), 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`, {
+                                      }, 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`, {
                                                                           setValueAs: (value) => {
                                                                               if (value === "" || value === null || value === undefined) {
                                                                                   return undefined;
@@ -11874,7 +11932,7 @@
                                                                               const num = Number(value);
                                                                               return Number.isNaN(num) ? undefined : num;
                                                                           },
-                                                                      }), 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: {
+                                                                      }), 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: {
                                                                           color: "var(--bw-error-color)",
                                                                           backgroundColor: "var(--bw-surface-color)",
                                                                           border: "1px solid var(--bw-border-color)",
@@ -11890,7 +11948,7 @@
                                                                           fontWeight: 700,
                                                                           fontFamily: "var(--bw-font-family)",
                                                                           padding: 0,
-                                                                      }, children: "\u00D7" })] }))] }), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
+                                                                      }, 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) => {
                                                           const isSelected = (participantUpsells[index] || []).includes(upsell.id);
                                                           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));
                                                       }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
@@ -11919,9 +11977,9 @@
                                                                   color: "var(--bw-text-color)",
                                                                   fontWeight: 500,
                                                                   fontFamily: "var(--bw-font-family)",
-                                                              }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.filter((p) => p.name.trim()).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) => {
+                                                              }, 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) => {
                                                               // 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;
@@ -12022,15 +12080,17 @@
                                                               }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), u$2("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 }));
@@ -12074,121 +12134,145 @@
   }
 
   /**
-   * Google Ads Conversion Tracking Utility
+   * Google Ads Tracking Utility
    *
-   * Simplified utility that waits 1500ms, checks/initializes gtag, and sends conversion.
-   */
-  /**
-   * Check if gtag is available in current or parent window
+   * Handles pageview tracking (widget load) and conversion tracking (successful booking).
+   * Supports both direct gtag.js and GTM dataLayer setups.
    */
   function isGtagAvailable() {
-      if (typeof window === "undefined") {
+      if (typeof window === "undefined")
           return false;
-      }
-      // Check current window
-      if (typeof window.gtag === "function") {
+      if (typeof window.gtag === "function")
           return true;
-      }
-      // Check parent window (for iframe/widget scenarios)
       if (window !== window.parent) {
           try {
-              if (typeof window.parent?.gtag === "function") {
+              if (typeof window.parent?.gtag === "function")
                   return true;
-              }
           }
           catch {
-              // Cannot access parent window (cross-origin)
+              // Cross-origin
           }
       }
       return false;
   }
-  /**
-   * Initialize gtag if not already available
-   */
   function initializeGtag(tagId) {
-      if (typeof window === "undefined") {
+      if (typeof window === "undefined" || isGtagAvailable())
           return;
-      }
-      // Skip if gtag already exists
-      if (isGtagAvailable()) {
-          return;
-      }
-      // Initialize dataLayer and gtag function
       window.dataLayer = window.dataLayer || [];
       window.gtag = (...args) => {
           window.dataLayer.push(args);
       };
-      // Set current timestamp
       window.gtag("js", new Date());
-      // Load gtag script
       const script = document.createElement("script");
       script.async = true;
       script.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
       document.head.appendChild(script);
-      // Configure the tag
       window.gtag("config", tagId, {
           anonymize_ip: true,
           allow_google_signals: false,
           allow_ad_personalization_signals: false,
       });
   }
-  /**
-   * Send conversion event using available gtag
-   */
-  function sendConversion(config) {
-      if (typeof window === "undefined") {
-          return;
+  function getGtag() {
+      if (typeof window === "undefined")
+          return null;
+      if (typeof window.gtag === "function") {
+          return window.gtag;
       }
-      let gtag = window.gtag;
-      // Try parent window gtag if current window doesn't have it
-      if (typeof gtag !== "function" && window !== window.parent) {
+      if (window !== window.parent) {
           try {
-              gtag = window.parent?.gtag;
+              const parentGtag = window.parent?.gtag;
+              if (typeof parentGtag === "function")
+                  return parentGtag;
           }
           catch {
-              // Cannot access parent window (cross-origin)
+              // Cross-origin
           }
       }
-      if (typeof gtag !== "function") {
+      return null;
+  }
+  /**
+   * Push an event to the dataLayer for GTM visibility,
+   * then also fire via gtag for direct Google Ads tracking.
+   */
+  function sendEvent(eventName, params) {
+      if (typeof window === "undefined")
           return;
+      // GTM dataLayer push (object format — visible in Tag Assistant)
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+          event: eventName,
+          ...params,
+      });
+      // gtag call (array format — processed by gtag.js for Google Ads)
+      const gtag = getGtag();
+      if (gtag) {
+          gtag("event", eventName, params);
       }
-      // Build conversion data
-      const conversionData = {
+  }
+  function sendConversion(config) {
+      const params = {
           send_to: `${config.tagId}/${config.conversionId}`,
       };
-      // Add optional parameters
       if (config.conversionValue !== undefined) {
-          conversionData.value = config.conversionValue;
+          params.value = config.conversionValue;
       }
       if (config.conversionCurrency) {
-          conversionData.currency = config.conversionCurrency;
+          params.currency = config.conversionCurrency;
       }
       if (config.transactionId) {
-          conversionData.transaction_id = config.transactionId;
+          params.transaction_id = config.transactionId;
       }
-      // Send conversion event
-      gtag("event", "conversion", conversionData);
+      sendEvent("conversion", params);
   }
   /**
-   * Main function to handle Google Ads conversion tracking
-   * Waits 1500ms, checks/initializes gtag, then sends conversion
+   * Track widget pageview (fired once on widget mount).
    */
-  function handleGoogleAdsConversion(config) {
-      // Validate required config
-      if (!config.tagId || !config.conversionId) {
+  function handleGoogleAdsPageview(tagId, consent) {
+      if (!tagId || false || typeof window === "undefined")
           return;
+      if (!isGtagAvailable()) {
+          initializeGtag(tagId);
       }
-      // Wait 1500ms before proceeding
+      const fire = () => sendEvent("widget_pageview", {
+          send_to: tagId,
+          page_location: window.location.href,
+          page_title: document.title,
+      });
+      if (isGtagAvailable()) {
+          fire();
+          return;
+      }
+      const script = document.querySelector(`script[src*="googletagmanager.com/gtag/js?id=${tagId}"]`);
+      if (script) {
+          script.addEventListener("load", fire, { once: true });
+      }
+  }
+  /**
+   * Handle Google Ads conversion tracking.
+   * Waits 1500ms for the success page to settle, then fires.
+   */
+  function handleGoogleAdsConversion(config) {
+      if (!config.tagId || !config.conversionId)
+          return;
       setTimeout(() => {
-          // Check if gtag is available, initialize if not
-          if (!isGtagAvailable()) {
-              initializeGtag(config.tagId);
+          if (isGtagAvailable()) {
+              sendConversion(config);
+              return;
+          }
+          initializeGtag(config.tagId);
+          const script = document.querySelector(`script[src*="googletagmanager.com/gtag/js?id=${config.tagId}"]`);
+          if (script) {
+              script.addEventListener("load", () => sendConversion(config));
+              script.addEventListener("error", () => sendConversion(config));
+          }
+          else {
+              sendConversion(config);
           }
-          sendConversion(config);
       }, 1500);
   }
 
-  const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
+  const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, googleAdsConfig: googleAdsConfigProp, }) => {
       const t = useTranslations();
       const { locale } = useLocale();
       const timezone = useTimezone();
@@ -12205,7 +12289,7 @@
               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,
                       })),
@@ -12237,20 +12321,16 @@
                       });
                       setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
                       const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
+                      const adsConfig = googleAdsConfigProp ?? data.googleAdsConfig;
                       if (finalPaymentStatus === "succeeded" &&
-                          config.googleAds?.tagId &&
-                          config.googleAds?.conversionId &&
-                          config.googleAds?.consent !== false) {
-                          // Prepare conversion tracking data
-                          const conversionValue = data.order.total / 100;
-                          const transactionId = data.order.id;
-                          // Track the conversion
+                          adsConfig?.tagId &&
+                          adsConfig?.conversionId) {
                           handleGoogleAdsConversion({
-                              tagId: config.googleAds.tagId,
-                              conversionId: config.googleAds.conversionId,
-                              conversionValue,
-                              conversionCurrency: config.googleAds.conversionCurrency || "EUR",
-                              transactionId,
+                              tagId: adsConfig.tagId,
+                              conversionId: adsConfig.conversionId,
+                              conversionValue: data.order.total / 100,
+                              conversionCurrency: adsConfig.conversionCurrency || "EUR",
+                              transactionId: data.order.id,
                           });
                       }
                   }
@@ -12439,7 +12519,7 @@
                                               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) => (u$2("div", { className: "print-participant", style: {
                                                   display: "flex",
                                                   justifyContent: "space-between",
@@ -12450,11 +12530,15 @@
                                               }, children: u$2("div", { className: "print-participant-info", children: [u$2("div", { className: "print-participant-name", style: {
                                                               color: "var(--bw-text-color)",
                                                               fontFamily: "var(--bw-font-family)",
-                                                          }, children: participant.name }), participant.age && (u$2("div", { className: "print-participant-age", style: {
+                                                          }, children: participant.name || `#${index + 1}` }), participant.age && (u$2("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))) }) })] })), u$2("div", { className: "print-booking-card", style: {
+                                                          }, children: t("success.age", { age: participant.age }) })), participant.level && (u$2("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))) }) })] })), u$2("div", { className: "print-booking-card", style: {
                                   backgroundColor: "var(--bw-surface-color)",
                                   border: `1px solid var(--bw-border-color)`,
                                   borderRadius: "var(--bw-border-radius)",
@@ -15511,6 +15595,13 @@
       const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
       const [shouldRenderUpsells, setShouldRenderUpsells] = d$1(false);
       const [shouldRenderBookingForm, setShouldRenderBookingForm] = d$1(false);
+      // Google Ads config (received from API, set once from the first API response)
+      const [googleAdsConfig, setGoogleAdsConfig] = d$1(null);
+      const extractGoogleAdsConfig = (data) => {
+          if (!googleAdsConfig && data?.googleAdsConfig?.tagId) {
+              setGoogleAdsConfig(data.googleAdsConfig);
+          }
+      };
       // Promo dialog state
       const [showPromoDialog, setShowPromoDialog] = d$1(false);
       const [widgetContainerRef, setWidgetContainerRef] = d$1(null);
@@ -15594,6 +15685,7 @@
                       image: resolvedImage,
                   };
                   setVoucherConfig(mergedConfig);
+                  extractGoogleAdsConfig(data);
                   setVoucherEventTypes(data.eventTypes || []);
                   // Set system config for payment processing
                   if (data.paymentProvider) {
@@ -15616,6 +15708,14 @@
               setIsLoadingVoucherConfig(false);
           }
       };
+      // Fire widget pageview once when Google Ads config is received from API
+      const pageviewFiredRef = A$2(false);
+      y$1(() => {
+          if (!pageviewFiredRef.current && googleAdsConfig?.tagId) {
+              pageviewFiredRef.current = true;
+              handleGoogleAdsPageview(googleAdsConfig.tagId);
+          }
+      }, [googleAdsConfig]);
       // Determine initial step and load data
       y$1(() => {
           const initializeWidget = async () => {
@@ -15829,6 +15929,7 @@
                   onWidgetLanguage?.(wl);
                   onTimezone?.(wl.timezone);
               }
+              extractGoogleAdsConfig(data);
               setEventTypes(data.eventTypes);
               if (isSingleEventTypeMode && data.eventTypes.length === 1) {
                   setSelectedEventType(data.eventTypes[0]);
@@ -15865,6 +15966,7 @@
                   onWidgetLanguage?.(wl);
                   onTimezone?.(wl.timezone);
               }
+              extractGoogleAdsConfig(data);
               setUpcomingEvents(data.upcomingEvents || []);
           }
           else {
@@ -15900,6 +16002,7 @@
                       onWidgetLanguage?.(wl);
                       onTimezone?.(wl.timezone);
                   }
+                  extractGoogleAdsConfig(data);
                   setSpecials(data.specials || []);
               }
               else {
@@ -15926,6 +16029,7 @@
                   onWidgetLanguage?.(wl);
                   onTimezone?.(wl.timezone);
               }
+              extractGoogleAdsConfig(data);
               setEventInstances(data.eventInstances);
               if (data.paymentProvider) {
                   setSystemConfig({
@@ -15986,6 +16090,7 @@
                       onWidgetLanguage?.(wl);
                       onTimezone?.(wl.timezone);
                   }
+                  extractGoogleAdsConfig(data);
                   setEventDetails(data.eventDetails);
                   setSystemConfig({
                       paymentProvider: data.paymentProvider,
@@ -16055,6 +16160,7 @@
                       onWidgetLanguage?.(wl);
                       onTimezone?.(wl.timezone);
                   }
+                  extractGoogleAdsConfig(data);
                   return data.upsells || [];
               }
               else {
@@ -16468,7 +16574,7 @@
                                   url.searchParams.delete("mollie_payment_id");
                                   url.searchParams.delete("mollie_status");
                                   window.history.replaceState({}, "", url.toString());
-                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "specials" && showingPreview) {
           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: () => {
@@ -16493,7 +16599,7 @@
                                   setShouldRenderBookingForm(false);
                                   setSelectedUpsells([]);
                                   setUpsells([]);
-                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
@@ -16516,7 +16622,7 @@
                                   url.searchParams.delete("mollie_payment_id");
                                   url.searchParams.delete("mollie_status");
                                   window.history.replaceState({}, "", url.toString());
-                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, style: {
@@ -16562,7 +16668,7 @@
                                   url.searchParams.delete("mollie_payment_id");
                                   url.searchParams.delete("mollie_status");
                                   window.history.replaceState({}, "", url.toString());
-                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       // Cards mode (default) - show event type selection with optional voucher card
       const cardsView = (u$2(k$3, { children: [hasEventSelection && (u$2(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, onInstancePreview: (instanceId, eventTypeId) => void handleUpcomingEventSelect(instanceId, eventTypeId), isLoading: isLoading, skeletonCount: getSkeletonCount(), showVoucherAttachment: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled && !isStandaloneVoucherMode), onVoucherClick: handleVoucherAttachmentClick })), isStandaloneVoucherMode && (u$2(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, systemConfig: systemConfig, isFormOpen: false, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: null, voucherPurchaseResult: null, isSuccess: false, showStandaloneCard: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled), onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => { } })), isStandaloneVoucherMode && isLoading && !voucherConfig && (u$2("div", { style: { padding: "24px", textAlign: "center" }, children: u$2("div", { style: {
@@ -16618,7 +16724,7 @@
                               url.searchParams.delete("mollie_payment_id");
                               url.searchParams.delete("mollie_status");
                               window.history.replaceState({}, "", url.toString());
-                          }, config: config, onError: setError, paymentIntentId: successPaymentId }), u$2(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, systemConfig: systemConfig, isFormOpen: isVoucherFormOpen, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: preselectedVoucherEventTypeId, voucherPurchaseResult: voucherPurchaseResult, isSuccess: isSuccess, showStandaloneCard: false, onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => {
+                          }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId }), u$2(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, systemConfig: systemConfig, isFormOpen: isVoucherFormOpen, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: preselectedVoucherEventTypeId, voucherPurchaseResult: voucherPurchaseResult, isSuccess: isSuccess, showStandaloneCard: false, onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => {
                               setIsSuccess(false);
                               setVoucherPurchaseResult(null);
                               const url = new URL(window.location.href);
@@ -16633,11 +16739,7 @@
   function UniversalBookingWidget(props) {
       const [languagePolicy, setLanguagePolicy] = d$1(null);
       const [orgTimezone, setOrgTimezone] = d$1("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 (u$2(I18nProvider, { ...providerProps, children: u$2(ShowLanguagePickerProvider, { value: showLanguagePicker, children: u$2(TimezoneProvider, { value: orgTimezone, children: u$2(UniversalBookingWidgetInner, { ...props, onWidgetLanguage: setLanguagePolicy, onTimezone: setOrgTimezone }) }) }) }));