@heycater/qualification-funnel 1.19.37 → 1.20.0

package/dist/index.esm.js

@@ -2226,6 +2226,7 @@ const CITY_LABELS = {
   koeln: "Köln",
   stuttgart: "Stuttgart",
   wien: "Wien",
+  london: "London",
   other: "Andere Stadt"
 };
 const EVENT_LABELS_DE = {
@@ -7342,6 +7343,60 @@ const LeadTimeNote = styled.p`
   margin: 12px 0 0;
   text-align: center;
 `;
+const useIsGb = () => {
+  const { query } = useRouter();
+  return getIsGb(query);
+};
+const getIsGb = (query) => {
+  if (typeof window !== "undefined") {
+    const pathname = window.location.pathname.toLowerCase();
+    if (pathname.includes("en-uk") || pathname.includes("london")) {
+      return true;
+    }
+  }
+  if (query == null ? void 0 : query.slug) {
+    return query.slug === "catering-london";
+  }
+  if (typeof window !== "undefined") {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("slug") === "catering-london";
+  }
+  return false;
+};
+const getCurrencySymbol = (isGb) => {
+  return isGb ? "£" : "€";
+};
+function getRegionalFormat({
+  isGb,
+  isGerman
+}) {
+  const currencySymbol = getCurrencySymbol(isGb);
+  const numberLocale = isGerman ? "de-DE" : "en-GB";
+  return {
+    currencySymbol,
+    dialCode: isGb ? "+44" : "+49",
+    currencyPosition: isGb ? "prefix" : "suffix",
+    formatMoney: (amount) => {
+      const value = amount.toLocaleString(numberLocale);
+      return isGb ? `${currencySymbol}${value}` : `${value} ${currencySymbol}`;
+    },
+    formatDate: (date2) => format(date2, isGb ? "dd/MM/yyyy" : "dd.MM.yy"),
+    netLabel: isGerman ? "netto" : "excl. VAT",
+    emailPlaceholder: isGb ? "name@company.co.uk" : "name@firma.de",
+    phonePlaceholder: isGb ? "+44 20 7123 4567" : "+49 30 56837200",
+    addressPlaceholder: isGerman ? "Straße, PLZ, Ort" : isGb ? "Street, Postcode, City" : "Street, ZIP, City"
+  };
+}
+const MIN_PHONE_DIGITS = 8;
+function normalizePhoneInput(value, dialCode) {
+  const cleaned = value.replace(/[^\d+\s-]/g, "");
+  if (!cleaned) return cleaned;
+  if (cleaned.startsWith("+")) return cleaned;
+  return `${dialCode}${cleaned.replace(/^0+/, "")}`;
+}
+function hasEnoughPhoneDigits(value) {
+  return (value || "").replace(/\D/g, "").length >= MIN_PHONE_DIGITS;
+}
 const PRESETS = [10, 25, 50, 100];
 const BudgetPeopleStep = ({
   peopleCount,
@@ -7352,12 +7407,14 @@ const BudgetPeopleStep = ({
   var _a2;
   const { i18n } = useTranslation();
   const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const isGb = useIsGb();
+  const regional = getRegionalFormat({ isGb, isGerman });
   const [peopleInputValue, setPeopleInputValue] = useState(String(peopleCount));
   const [budgetInputValue, setBudgetInputValue] = useState(String(budgetPerPerson2));
   const peopleInputRef = useRef(null);
   const budgetInputRef = useRef(null);
   const totalBudget = peopleCount * budgetPerPerson2;
-  const formattedTotal = totalBudget.toLocaleString("de-DE");
+  const formattedTotal = regional.formatMoney(totalBudget);
   const handlePeopleIncrement = useCallback(() => {
     const newValue = peopleCount + 5;
     onPeopleCountChange(newValue);
@@ -7463,7 +7520,7 @@ const BudgetPeopleStep = ({
               onBlur: handleBudgetInputBlur
             }
           ),
-          /* @__PURE__ */ jsx(CurrencyLabel, { children: "€" })
+          /* @__PURE__ */ jsx(CurrencyLabel, { $position: regional.currencyPosition, children: regional.currencySymbol })
         ] }),
         /* @__PURE__ */ jsx(StepButton, { onClick: handleBudgetIncrement, type: "button", children: "+" })
       ] })
@@ -7472,12 +7529,9 @@ const BudgetPeopleStep = ({
       /* @__PURE__ */ jsxs(TotalLabel, { children: [
         isGerman ? "Gesamtbudget" : "Total budget",
         " ",
-        /* @__PURE__ */ jsx(NetLabel, { children: "netto" })
+        /* @__PURE__ */ jsx(NetLabel, { children: regional.netLabel })
       ] }),
-      /* @__PURE__ */ jsxs(TotalValue, { children: [
-        formattedTotal,
-        " €"
-      ] })
+      /* @__PURE__ */ jsx(TotalValue, { children: formattedTotal })
     ] })
   ] }) });
 };
@@ -7566,7 +7620,7 @@ const ValueInputWrapper = styled.div`
 `;
 const CurrencyLabel = styled.span`
   position: absolute;
-  right: 12px;
+  ${({ $position }) => $position === "prefix" ? "left: 12px;" : "right: 12px;"}
   font-family: ${REDESIGN_FONTS.family};
   font-weight: ${REDESIGN_FONTS.weight.semibold};
   font-size: 16px;
@@ -7697,22 +7751,6 @@ const DEFAULT_QUALIFICATION_STATE = Object.freeze(
     currentUserAccount: null
   }
 );
-const getIsGb = (query) => {
-  if (typeof window !== "undefined") {
-    const pathname = window.location.pathname.toLowerCase();
-    if (pathname.includes("en-uk") || pathname.includes("london")) {
-      return true;
-    }
-  }
-  if (typeof window !== "undefined") {
-    const params = new URLSearchParams(window.location.search);
-    return params.get("slug") === "catering-london";
-  }
-  return false;
-};
-const getCurrencySymbol = (isGb) => {
-  return isGb ? "£" : "€";
-};
 const CATERING_CATEGORIES = [
   "breakfast",
   "fingerfood",
@@ -21698,6 +21736,8 @@ const RedesignContactForm = ({
   var _a2;
   const { t: t2, i18n } = useTranslation("qualification");
   const isGerman = (_a2 = i18n.language) == null ? void 0 : _a2.startsWith("de");
+  const isGb = useIsGb();
+  const regional = getRegionalFormat({ isGb, isGerman });
   const { answerOf } = useQualification();
   const [commentOpen, setCommentOpen] = useState(false);
   const [hasSubmitted, setHasSubmitted] = useState(false);
@@ -21730,7 +21770,11 @@ const RedesignContactForm = ({
     last_name: create$5().required(isGerman ? "Bitte Nachname eingeben" : "Please enter last name"),
     company: create$5().required(isGerman ? "Bitte Firma eingeben" : "Please enter company"),
     email: create$5().email(isGerman ? "Bitte gültige E-Mail eingeben" : "Please enter valid email").required(isGerman ? "Bitte E-Mail eingeben" : "Please enter email"),
-    phone: create$5().required(isGerman ? "Bitte Telefon eingeben" : "Please enter phone"),
+    phone: create$5().required(isGerman ? "Bitte Telefon eingeben" : "Please enter phone").test(
+      "phone-complete",
+      isGerman ? "Bitte vollständige Telefonnummer eingeben" : "Please enter a complete phone number",
+      hasEnoughPhoneDigits
+    ),
     deliveryAddressStreet: create$5().min(1).required(isGerman ? "Bitte Lieferadresse eingeben" : "Please enter delivery address"),
     deliveryAddressCity: create$5().min(1).required(isGerman ? "Bitte Stadt eingeben" : "Please enter city")
   });
@@ -21755,7 +21799,7 @@ const RedesignContactForm = ({
       } else if (eventDate) {
         try {
           const dateObj = eventDate instanceof Date ? eventDate : new Date(eventDate);
-          chips.push({ label: isGerman ? "Datum" : "Date", value: format(dateObj, "dd.MM.yy") });
+          chips.push({ label: isGerman ? "Datum" : "Date", value: regional.formatDate(dateObj) });
         } catch {
         }
       }
@@ -21764,7 +21808,7 @@ const RedesignContactForm = ({
       }
       if (typeof pricePerPerson === "number" && pricePerPerson > 0) {
         const total2 = (peopleCount || 0) * pricePerPerson;
-        chips.push({ label: "Budget", value: `${total2.toLocaleString("de-DE")} €` });
+        chips.push({ label: "Budget", value: regional.formatMoney(total2) });
       }
     } catch (e2) {
       console.error("Error building summary chips:", e2);
@@ -21843,7 +21887,7 @@ const RedesignContactForm = ({
       validateOnMount: false,
       validateOnBlur: true,
       validateOnChange: true,
-      children: ({ errors, touched, handleChange, handleBlur, values: values2, validateForm }) => /* @__PURE__ */ jsxs(FormWrapper, { children: [
+      children: ({ errors, touched, handleChange, handleBlur, values: values2, validateForm, setFieldValue }) => /* @__PURE__ */ jsxs(FormWrapper, { children: [
         /* @__PURE__ */ jsx(ScrollableContent, { children: /* @__PURE__ */ jsxs(Container, { children: [
           /* @__PURE__ */ jsxs(SummaryRow, { children: [
             /* @__PURE__ */ jsx(SummaryLabel, { children: isGerman ? "Deine Anfrage:" : "Your request:" }),
@@ -21959,7 +22003,7 @@ const RedesignContactForm = ({
                     markUserTouched("email");
                     handleBlur(e2);
                   },
-                  placeholder: "name@firma.de",
+                  placeholder: regional.emailPlaceholder,
                   $hasError: shouldShowError("email", !!touched.email, errors.email)
                 }
               ),
@@ -21976,12 +22020,15 @@ const RedesignContactForm = ({
                   type: "tel",
                   name: "phone",
                   value: values2.phone,
-                  onChange: handleChange,
+                  onChange: (e2) => setFieldValue(
+                    "phone",
+                    normalizePhoneInput(e2.target.value, regional.dialCode)
+                  ),
                   onBlur: (e2) => {
                     markUserTouched("phone");
                     handleBlur(e2);
                   },
-                  placeholder: "+49 30 56837200",
+                  placeholder: regional.phonePlaceholder,
                   $hasError: shouldShowError("phone", !!touched.phone, errors.phone)
                 }
               ),
@@ -21992,7 +22039,7 @@ const RedesignContactForm = ({
               {
                 name: "delivery_address",
                 label: isGerman ? "Lieferadresse" : "Delivery address",
-                placeholder: isGerman ? "Straße, PLZ, Ort" : "Street, ZIP, City",
+                placeholder: regional.addressPlaceholder,
                 helperText: isGerman ? "Kannst du später jederzeit anpassen." : "You can adjust this later anytime.",
                 component: AutocompleteAddress,
                 required: true
@@ -22536,6 +22583,11 @@ const SubmitButton = styled.button`
     transform: translateY(-1px);
   }
 `;
+function pushToDataLayer(eventName, properties) {
+  if (typeof window === "undefined") return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({ event: eventName, ...properties });
+}
 const sessionSequence = /* @__PURE__ */ new Map();
 function getNextSequence(sessionId) {
   const current = sessionSequence.get(sessionId) || 0;
@@ -22556,12 +22608,7 @@ function captureEvent(eventName, properties) {
       console.error("[PostHog] Failed to send event:", error);
     }
   }
-  if (window.dataLayer) {
-    window.dataLayer.push({
-      event: eventName,
-      ...properties
-    });
-  }
+  pushToDataLayer(eventName, properties);
 }
 function buildBaseProperties(context) {
   const properties = {
@@ -22674,18 +22721,7 @@ function trackOptimeleonConversion(eventName, serviceType) {
   }
 }
 function trackGtagConversion(eventName, params) {
-  if (typeof window === "undefined") return;
-  if (window.gtag) {
-    try {
-      window.gtag("event", eventName, {
-        ...params,
-        transport_type: "beacon",
-        send_to: getConfig().googleTagId || void 0
-      });
-    } catch (error) {
-      console.error("[gtag] Failed to send event:", error);
-    }
-  }
+  pushToDataLayer(eventName, params);
 }
 const getCookie$1 = (name) => {
   const match2 = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
@@ -22982,87 +23018,72 @@ function useFunnelCheckout() {
     funnelCheckout
   };
 }
+function countHeads(values2) {
+  return (values2.number_of_vegans || 0) + (values2.number_of_vegetarians || 0) + (values2.number_of_carnivore || 0);
+}
+function buildAddress(values2) {
+  return formatPlace(
+    {
+      country: values2.deliveryAddressCountry,
+      city: values2.deliveryAddressCity,
+      street: values2.deliveryAddressStreet,
+      streetNumber: values2.deliveryAddressStreetNumber,
+      postalCode: values2.deliveryAddressPostalCode
+    },
+    "inputString"
+  );
+}
+function buildQfLeadAttributes(values2) {
+  const numberOfPeople = countHeads(values2);
+  return {
+    firstName: values2.first_name,
+    lastName: values2.last_name,
+    email: values2.email,
+    phone: values2.phone || "",
+    company: values2.company,
+    comment: values2.comment,
+    address: buildAddress(values2),
+    cateringCategories: values2.catering_categories,
+    eventDate: values2.event_date ? new Date(values2.event_date).toDateString() : void 0,
+    hasRecurringNeed: values2.has_recurring_need,
+    isMultiDay: values2.is_multi_day,
+    numberOfOmnivores: values2.number_of_carnivore,
+    numberOfVegans: values2.number_of_vegans,
+    numberOfVegetarians: values2.number_of_vegetarians,
+    numberOfPeople,
+    totalBudget: numberOfPeople * (values2.price_per_person || 0),
+    leadType: values2.lead_type,
+    serviceType: values2.service_type,
+    teamSize: values2.team_size,
+    deliveryFrequency: values2.delivery_frequency,
+    budgetRange: values2.budget_range,
+    leadSource: values2.leadSource,
+    conversionUrl: values2.conversionUrl,
+    entranceUrl: values2.entranceUrl,
+    referrerUrl: values2.referrerUrl,
+    landingPageSource: values2.landingPageSource
+  };
+}
 function useQfLeadCreator() {
   const client = useClient();
-  const createQfLead = async (variables) => {
+  const createQfLead = async (values2) => {
     try {
-      const {
-        company,
-        comment,
-        deliveryAddressCity,
-        deliveryAddressCountry,
-        deliveryAddressPostalCode,
-        deliveryAddressStreet,
-        deliveryAddressStreetNumber,
-        email,
-        first_name,
-        last_name,
-        phone,
-        catering_categories,
-        event_date,
-        has_recurring_need,
-        is_multi_day,
-        number_of_carnivore,
-        lead_type,
-        number_of_vegans,
-        number_of_vegetarians,
-        price_per_person,
-        service_type,
-        team_size,
-        delivery_frequency,
-        budget_range,
-        leadSource,
-        conversionUrl,
-        entranceUrl,
-        referrerUrl,
-        landingPageSource
-      } = variables;
-      const numberOfPeople = number_of_vegans + number_of_vegetarians + number_of_carnivore;
-      const {
-        data: { createQfLead: response }
-      } = await createQfLeadMutation(
-        {
-          email,
-          firstName: first_name,
-          lastName: last_name,
-          phone,
-          company,
-          comment,
-          address: `${deliveryAddressStreet} ${deliveryAddressStreetNumber}, ${deliveryAddressPostalCode} ${deliveryAddressCity}, ${deliveryAddressCountry}`,
-          cateringCategories: catering_categories,
-          eventDate: new Date(event_date).toDateString(),
-          hasRecurringNeed: has_recurring_need,
-          isMultiDay: is_multi_day,
-          numberOfOmnivores: number_of_carnivore,
-          numberOfVegans: number_of_vegans,
-          numberOfVegetarians: number_of_vegetarians,
-          numberOfPeople,
-          totalBudget: numberOfPeople * price_per_person,
-          leadType: lead_type,
-          serviceType: service_type,
-          teamSize: team_size,
-          deliveryFrequency: delivery_frequency,
-          budgetRange: budget_range,
-          leadSource,
-          conversionUrl,
-          entranceUrl,
-          referrerUrl,
-          landingPageSource
-        },
+      const { data } = await createQfLeadMutation(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        buildQfLeadAttributes(values2),
         { client }
       );
-      return response;
+      return data == null ? void 0 : data.createQfLead;
     } catch (error) {
       if (error) {
         BugsnagExport.notify(error, (event) => {
-          event.addMetadata("createQfLead", variables);
+          event.addMetadata("createQfLead", values2);
         });
       }
+      return void 0;
     }
   };
-  return {
-    createQfLead
-  };
+  return { createQfLead };
 }
 const getCookie = (name) => {
   const match2 = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
@@ -23390,7 +23411,12 @@ const RedesignedFunnel = ({
     trackFormSubmitted(funnelContextRef.current, metadata);
     trackCompleted(funnelContextRef.current);
     trackOptimeleonConversion("funnel_completed", serviceType);
-    trackGtagConversion("submit_qf_request");
+    trackGtagConversion("submit_qf_request", {
+      city: funnelContextRef.current.city,
+      service_type: serviceType,
+      funnel_mode: funnelContextRef.current.funnel_mode,
+      funnel_variant: funnelContextRef.current.funnel_variant
+    });
   }, [funnelContextRef]);
   const handleContactFormSubmit = useCallback(async (formData) => {
     if (isSubmittingRef.current) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycater/qualification-funnel",
-  "version": "1.19.37",
+  "version": "1.20.0",
   "type": "module",
   "description": "Heycater embedded qualification funnel widget",
   "main": "dist/index.cjs.js",