@heycater/qualification-funnel 1.3.21 → 1.4.0

package/dist/index.esm.js

@@ -7732,16 +7732,6 @@ function answerInitialQuestions(state, answers) {
         { id: answerId, value: answerValue },
         { storeIfInvalid: false }
       );
-      if (state.qualification.selectedMenu) {
-        stateWithAnswers = answerQuestion(
-          stateWithAnswers,
-          {
-            id: "catering_categories",
-            value: state.qualification.selectedMenu.cateringCategories
-          },
-          { storeIfInvalid: false }
-        );
-      }
     });
   }
   const funnelHasCityQuestion = state.qualification.steps.find(
@@ -7783,16 +7773,48 @@ function answerInitialQuestions(state, answers) {
   }
   return stateWithAnswers;
 }
+function generateSessionId() {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+}
+function cleanupOldTrackingSessions() {
+  if (typeof window === "undefined" || typeof sessionStorage === "undefined") {
+    return;
+  }
+  try {
+    const keysToRemove = [];
+    const maxAge = 24 * 60 * 60 * 1e3;
+    const now2 = Date.now();
+    for (let i2 = 0; i2 < sessionStorage.length; i2++) {
+      const key = sessionStorage.key(i2);
+      if (key && key.startsWith("funnel_started_")) {
+        const timestamp = key.split("-")[1];
+        if (timestamp && !isNaN(Number(timestamp))) {
+          const age = now2 - Number(timestamp);
+          if (age > maxAge) {
+            keysToRemove.push(key);
+          }
+        }
+      }
+    }
+    keysToRemove.forEach((key) => sessionStorage.removeItem(key));
+  } catch (e2) {
+  }
+}
 function initialize(state, {
   answers,
   disabledSteps,
   leadSource,
   nonSkippableQuestions,
   selectedCaterer,
-  selectedMenu,
   stepOrder
 } = {}) {
-  var _a2;
+  var _a2, _b;
   const currentPageHref = typeof window === "undefined" ? void 0 : `${window.location.origin}${window.location.pathname}`;
   leadSource = leadSource || currentPageHref;
   const isUserLoggedIn = typeof window !== "undefined" && window.localStorage.getItem("token");
@@ -7801,6 +7823,7 @@ function initialize(state, {
     stepOrder
   });
   const firstStepId = ((_a2 = initialSteps[0]) == null ? void 0 : _a2.id) || DEFAULT_STEP_ORDER[0];
+  const existingState = "qualification" in state ? state : null;
   const initialState = {
     ...state,
     initialOptions: {
@@ -7809,24 +7832,21 @@ function initialize(state, {
     status: QUALIFICATION_STATUS.answering,
     qualification: {
       leadSource,
+      sessionInfo: ((_b = existingState == null ? void 0 : existingState.qualification) == null ? void 0 : _b.sessionInfo) || {
+        sessionId: generateSessionId(),
+        startedAt: Date.now(),
+        lastActiveAt: Date.now()
+      },
       answers: {},
       errors: {},
       steps: initialSteps.map((q2) => ({ id: q2.id })),
       step: { id: firstStepId },
       stepIndex: 0,
       progressPercentage: 0,
-      selectedMenu,
       selectedCaterer
     }
   };
   let answeredState = answerInitialQuestions(initialState, answers);
-  if (selectedMenu) {
-    answeredState = answerQuestion(answeredState, {
-      id: "catering_categories",
-      value: selectedMenu.cateringCategories
-    });
-    disableStep(answeredState, "catering_categories");
-  }
   const orderedSteps = orderStepsBasedOnAnswers({
     steps: answeredState.qualification.steps,
     answers: answeredState.qualification.answers,
@@ -8122,35 +8142,6 @@ const qualificationReducer = (state, action2) => {
       }
       return state;
     }
-    case "clearBestseller": {
-      if (state.status === "answering") {
-        const newState = answerQuestion(state, {
-          id: "catering_categories",
-          value: void 0
-        });
-        return initialize(newState, {
-          answers: newState.qualification.answers,
-          selectedCaterer: newState.qualification.selectedCaterer,
-          selectedMenu: void 0
-        });
-      }
-      return state;
-    }
-    case "selectBestseller": {
-      if (state.status === "answering") {
-        const newState = answerQuestion(state, {
-          id: "catering_categories",
-          value: void 0
-        });
-        const answers = newState.qualification.answers;
-        return initialize(newState, {
-          answers,
-          selectedCaterer: newState.qualification.selectedCaterer,
-          selectedMenu: action2.payload
-        });
-      }
-      return state;
-    }
     default: {
       return state;
     }
@@ -8165,8 +8156,6 @@ function getActions(dispatch) {
     initialize: (options) => dispatch({ type: "initialize", payload: options || {} }),
     nextStep: () => dispatch({ type: "nextStep" }),
     prevStep: () => dispatch({ type: "prevStep" }),
-    selectBestseller: (bestseller2) => dispatch({ type: "selectBestseller", payload: bestseller2 }),
-    clearBestseller: () => dispatch({ type: "clearBestseller" }),
     setQuestion: (questionId) => dispatch({ type: "setQuestion", payload: questionId }),
     setRequest: (requestFormData) => dispatch({ type: "setRequest", payload: requestFormData }),
     qualify: (qualified) => dispatch({ type: "qualify", payload: qualified })
@@ -10096,7 +10085,7 @@ function BudgetQuestionWithPeopleCount() {
         onSelect: (value) => actions.answerQuestion(questions$2.peopleCount.id, value)
       }
     ) }),
-    /* @__PURE__ */ jsx(Divider$1, { my: 4 }),
+    /* @__PURE__ */ jsx(Divider, { my: 4 }),
     /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(Typography, { as: "label", htmlFor: pricePerPersonQuestion.id, children: t2("common:questions.budgetProPerson") }) }),
     /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
       PriceStepperField,
@@ -10139,7 +10128,7 @@ const ErrorWrapper = styled.div`
   color: #F95524;
   font-weight: 500;
 `;
-const Divider$1 = styled(Box)`
+const Divider = styled(Box)`
   height: 2px;
   background-color: ${({ theme }) => theme.palette.grey[100]};
   width: 100%;
@@ -10966,169 +10955,6 @@ const Wrapper$2 = styled.div`
   display: flex;
   flex-direction: column;
 `;
-const CloseCircleIcon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3e%3cpath%20fillRule='evenodd'%20fill='white'%20clipRule='evenodd'%20d='M2%2012C2%206.47%206.47%202%2012%202C17.53%202%2022%206.47%2022%2012C22%2017.53%2017.53%2022%2012%2022C6.47%2022%202%2017.53%202%2012ZM15.59%2017L17%2015.59L13.41%2012L17%208.41L15.59%207L12%2010.59L8.41%207L7%208.41L10.59%2012L7%2015.59L8.41%2017L12%2013.41L15.59%2017Z'/%3e%3c/svg%3e";
-const GreenCheckmark = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='25'%20height='24'%20viewBox='0%200%2025%2024'%20fill='none'%3e%3cpath%20d='M9.29508%2015.8749L5.12508%2011.7049L3.70508%2013.1149L9.29508%2018.7049L21.2951%206.70492L19.8851%205.29492L9.29508%2015.8749Z'%20fill='%237D8F5C'/%3e%3c/svg%3e";
-const SelectedMenuCard = (props) => {
-  const { actions } = useQualification();
-  const { t: t2 } = useTranslation();
-  const isMobile = useBreakpointDown("sm");
-  if (isMobile) {
-    return /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: actions.clearBestseller, children: /* @__PURE__ */ jsx(CloseCircleIcon, {}) }) }),
-      /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
-        /* @__PURE__ */ jsx(Box, { display: "flex", flexShrink: 0, children: /* @__PURE__ */ jsx(
-          MenuImage,
-          {
-            alt: "",
-            src: props.imageSrc,
-            height: 70,
-            width: 70
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            display: "flex",
-            mx: 2,
-            textAlign: "start",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            justifyContent: "center",
-            children: [
-              /* @__PURE__ */ jsx(CardLabel, { children: t2("qualification:bestseller.labelShort") }),
-              /* @__PURE__ */ jsx(Title$1, { children: props.title })
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Box, { py: 2, pb: 1, textAlign: "center", children: /* @__PURE__ */ jsx(CardLabel, { children: t2("qualification:bestseller.label") }) }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: actions.clearBestseller, children: /* @__PURE__ */ jsx(CloseCircleIcon, {}) }) }),
-      /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(MenuImage, { alt: "", src: props.imageSrc, height: 142, width: 300 }) }),
-      /* @__PURE__ */ jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsx(Box, { mb: 1, children: /* @__PURE__ */ jsx(Title$1, { children: props.title }) }),
-        /* @__PURE__ */ jsx(Box, { as: "ul", p: 0, m: 0, mb: 2, children: props.contents.map((benefit) => /* @__PURE__ */ jsxs(
-          Box,
-          {
-            as: "li",
-            display: "flex",
-            alignItems: "flex-start",
-            children: [
-              /* @__PURE__ */ jsx(Box, { mr: 1, children: /* @__PURE__ */ jsx(GreenCheckmark, {}) }),
-              /* @__PURE__ */ jsx(Box, { mb: 1, children: benefit })
-            ]
-          },
-          benefit
-        )) }),
-        /* @__PURE__ */ jsx(Box, { mt: "auto", mb: 1, children: /* @__PURE__ */ jsx(Divider, {}) }),
-        /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
-          /* @__PURE__ */ jsxs(PriceRange, { children: [
-            props.priceRange[0],
-            " - ",
-            props.priceRange[1],
-            " € p.P."
-          ] }),
-          /* @__PURE__ */ jsx(PriceRangeLabel, { children: t2("qualification:bestseller.delivery") })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-const MenuImage = styled.img`
-  object-fit: cover;
-`;
-const CardLabel = styled(Typography)`
-  color: ${({ theme }) => theme.palette.secondary[500]};
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 17px;
-`;
-const PriceRange = styled.div`
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 172.5%; /* 27.6px */
-`;
-const CloseButton = styled.button`
-  border: none;
-  outline: none;
-  padding: 0;
-  cursor: pointer;
-  background-color: transparent;
-  position: relative;
-  ::before {
-    content: '';
-    position: absolute;
-    left: 3px;
-    top: 3px;
-    height: 18px;
-    width: 18px;
-    border-radius: 100px;
-    z-index: -1;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-`;
-const PriceRangeLabel = styled.div`
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 17px;
-  letter-spacing: 0.4px;
-`;
-const Divider = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
-`;
-const CardContent = styled.div`
-  padding: ${({ theme }) => theme.spacing(0, 2, 2, 2)};
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-const Card = styled.div`
-  flex-shrink: none;
-  width: 100%;
-  border: 1px solid ${({ theme }) => theme.palette.secondary[500]};
-  background-color: #f7fcfa;
-  box-shadow: 0px 4px 20px 0px rgba(62, 41, 29, 0.08);
-  position: relative;
-  display: flex;
-  height: 100%;
-  flex-shrink: 0;
-  flex-direction: column;
-  border-radius: ${({ theme }) => theme.spacing(0.8)}px;
-  overflow: hidden;
-  box-shadow: 0px 4px 20px 0px rgba(62, 41, 29, 0.08);
-
-  ${({ theme }) => theme.breakpoints.up("md")} {
-    width: 300px;
-    border-radius: ${({ theme }) => theme.spacing(1.5)}px;
-  }
-`;
-const CloseButtonWrapper = styled.div`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 2;
-`;
-const Title$1 = styled(Typography)`
-  color: #3c4340;
-  padding: 0;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 150%; /* 27px */
-
-  ${({ theme }) => theme.breakpoints.up("md")} {
-    font-size: 18px;
-    text-align: center;
-  }
-`;
 function EmployeeCateringIcon(props) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -11188,6 +11014,20 @@ function FullServiceIcon(props) {
     }
   );
 }
+function getContextualProperties(state) {
+  if (!("qualification" in state)) return {};
+  const { sessionInfo, answers } = state.qualification;
+  const props = {
+    session_id: (sessionInfo == null ? void 0 : sessionInfo.sessionId) || ""
+  };
+  if (answers.service_type) {
+    props.service_type = answers.service_type;
+  }
+  if (answers.city) {
+    props.city = answers.city;
+  }
+  return props;
+}
 function trackFunnelEvent(action2, properties) {
   const eventName = `funnel_${action2}`;
   if (typeof window === "undefined") return;
@@ -11201,34 +11041,38 @@ function trackFunnelEvent(action2, properties) {
     });
   }
 }
-function trackFunnelStarted(mode, totalSteps) {
+function trackFunnelStarted(mode, totalSteps, contextProps) {
   trackFunnelEvent("started", {
     funnel_mode: mode,
-    total_steps: totalSteps
+    total_steps: totalSteps,
+    ...contextProps
   });
 }
-function trackStepViewed(mode, stepId, stepIndex, totalSteps) {
+function trackStepViewed(mode, stepId, stepIndex, totalSteps, contextProps) {
   trackFunnelEvent("step_viewed", {
     funnel_mode: mode,
     step_id: stepId,
     step_index: stepIndex,
-    total_steps: totalSteps
+    total_steps: totalSteps,
+    ...contextProps
   });
 }
-function trackAnswerSelected(mode, stepId, questionId, value) {
+function trackAnswerSelected(mode, stepId, questionId, value, contextProps) {
   trackFunnelEvent("answer_selected", {
     funnel_mode: mode,
     step_id: stepId,
     question_id: questionId,
-    answer_value: value
+    answer_value: value,
+    ...contextProps
   });
 }
-function trackStepCompleted(mode, stepId, stepIndex, totalSteps) {
+function trackStepCompleted(mode, stepId, stepIndex, totalSteps, contextProps) {
   trackFunnelEvent("step_completed", {
     funnel_mode: mode,
     step_id: stepId,
     step_index: stepIndex,
-    total_steps: totalSteps
+    total_steps: totalSteps,
+    ...contextProps
   });
 }
 function trackFormSubmitted(mode, properties) {
@@ -11237,9 +11081,10 @@ function trackFormSubmitted(mode, properties) {
     ...properties
   });
 }
-function trackFunnelCompleted(mode) {
+function trackFunnelCompleted(mode, contextProps) {
   trackFunnelEvent("completed", {
-    funnel_mode: mode
+    funnel_mode: mode,
+    ...contextProps
   });
 }
 const TrackingContext = createContext(null);
@@ -11645,7 +11490,6 @@ const EmbeddedQuestion = ({
   var _a2, _b, _c, _d, _e;
   const { t: t2 } = useTranslation();
   const { state, actions, answerOf } = useQualification();
-  const selectedMenu = "qualification" in state ? state.qualification.selectedMenu : null;
   const getTitleContent = useCallback(
     (title2) => renderTitle ? renderTitle(title2) : title2,
     []
@@ -11663,7 +11507,7 @@ const EmbeddedQuestion = ({
           content: /* @__PURE__ */ jsx(Container, { size: "sm", disableGutters: true, children: /* @__PURE__ */ jsx(
             CityTiles,
             {
-              size: selectedMenu ? "sm" : "md",
+              size: "md",
               variant: highlightColor,
               selected: answerOf("city"),
               onSelect: (city) => {
@@ -11671,8 +11515,7 @@ const EmbeddedQuestion = ({
                 actions.nextStep();
               }
             }
-          ) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          ) })
         }
       );
     case steps$2.cateringCategories.id: {
@@ -11696,8 +11539,7 @@ const EmbeddedQuestion = ({
                 category
               )
             }
-          ),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          )
         }
       );
     }
@@ -11712,8 +11554,7 @@ const EmbeddedQuestion = ({
           subtitle: t2(
             "qualification:embeddedFunnel.dietaryRestrictions.subtitle"
           ),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 3, px: 2, children: /* @__PURE__ */ jsx(DietaryDistribution, {}) }) }) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 3, px: 2, children: /* @__PURE__ */ jsx(DietaryDistribution, {}) }) }) })
         }
       );
     case steps$2.eventDateAndLeadType.id: {
@@ -11724,8 +11565,7 @@ const EmbeddedQuestion = ({
           wrapper: ((_c = slides == null ? void 0 : slides.dateAndLead) == null ? void 0 : _c.whiteWrapper) ? "white" : "transparent",
           ratings,
           title: getTitleContent(title),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(DatePickerEmbedded, {}) }) }) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(DatePickerEmbedded, {}) }) }) })
         }
       );
     }
@@ -11737,8 +11577,7 @@ const EmbeddedQuestion = ({
           wrapper: ((_d = slides == null ? void 0 : slides.budgetAndPeople) == null ? void 0 : _d.whiteWrapper) ? "white" : "transparent",
           ratings,
           title: getTitleContent(title),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(BudgetQuestionWithPeopleCount, {}) }) }) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 4, children: /* @__PURE__ */ jsx(BudgetQuestionWithPeopleCount, {}) }) }) })
         }
       );
     case steps$2.serviceSelection.id:
@@ -11758,8 +11597,7 @@ const EmbeddedQuestion = ({
                 actions.nextStep();
               }
             }
-          ) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          ) })
         }
       );
     case steps$2.teamSize.id:
@@ -11779,8 +11617,7 @@ const EmbeddedQuestion = ({
               placeholder: t2("qualification:embeddedFunnel.teamSize.placeholder"),
               suggestions: teamSizeQuestion.suggestions
             }
-          ) }) }) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          ) }) }) })
         }
       );
     case steps$2.deliveryFrequency.id:
@@ -11803,8 +11640,7 @@ const EmbeddedQuestion = ({
               }
             ),
             /* @__PURE__ */ jsx(BusinessCustomerToggle, {})
-          ] }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          ] })
         }
       );
     case steps$2.peopleCount.id:
@@ -11824,8 +11660,7 @@ const EmbeddedQuestion = ({
               placeholder: t2("qualification:embeddedFunnel.peopleCount.placeholder"),
               suggestions: peopleCountFullServiceQuestion.suggestions
             }
-          ) }) }) }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          ) }) }) })
         }
       );
     case steps$2.budgetRange.id:
@@ -11848,8 +11683,7 @@ const EmbeddedQuestion = ({
               }
             ),
             /* @__PURE__ */ jsx(BusinessCustomerToggle, {})
-          ] }),
-          side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
+          ] })
         }
       );
     case steps$2.contactForm.id:
@@ -26375,13 +26209,17 @@ function PhoneField({ label, name, formik, helperText }) {
 const StyledInput = styled(Input)`
   border-color: ${(props) => props.$hasError ? props.theme.palette.error.main : "transparent"};
 `;
-function Success() {
+function Success({ isUkLead = false }) {
   const { actions } = useQualification();
   const router = useRouter();
   const { t: t2 } = useTranslation("qualification");
   const handleClose = () => {
     actions.initialize();
-    router.push("/en/catering-london");
+    if (isUkLead) {
+      router.push("/en/catering-london");
+    } else {
+      router.push(`/${router.locale}`);
+    }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "end", children: /* @__PURE__ */ jsx(Box, { px: 2, children: /* @__PURE__ */ jsx(IconButton$2, { onClick: handleClose, "aria-label": "back", component: "span", children: /* @__PURE__ */ jsx(CloseIcon$1, {}) }) }) }),
@@ -26606,7 +26444,7 @@ function useRequestForm() {
   const { funnelCheckout } = useFunnelCheckout();
   const { createQfLead } = useQfLeadCreator();
   const buildOpportunityPayload = (values2) => {
-    var _a2, _b, _c, _d, _e;
+    var _a2, _b, _c, _d;
     const deliveryAddressStreetAndNumberValue = `${values2.deliveryAddressStreet} ${values2.deliveryAddressStreetNumber}`;
     const { street, postalCode, city, country } = ((_b = (_a2 = currentUserAccount == null ? void 0 : currentUserAccount.owner) == null ? void 0 : _a2.salesforceCustomer) == null ? void 0 : _b.billingAddress) || {
       street: deliveryAddressStreetAndNumberValue,
@@ -26627,7 +26465,6 @@ function useRequestForm() {
       catererSlug: (_d = qualification == null ? void 0 : qualification.selectedCaterer) == null ? void 0 : _d.slug,
       landingPageSource: qualification.leadSource,
       billingAddressStreetAndNumber: street || "",
-      inspiredByMenuId: (_e = qualification == null ? void 0 : qualification.selectedMenu) == null ? void 0 : _e.id,
       billingAddressPostalCode: postalCode || "",
       billingAddressCity: city || "",
       billingCountry: country || "",
@@ -26661,7 +26498,7 @@ function useRequestForm() {
       });
       return {
         success,
-        isUkLead: true
+        isUkLead
       };
     } else {
       const {
@@ -26709,6 +26546,7 @@ const getValidationSchema = ({
 function RequestForm({ header = null }) {
   var _a2, _b, _c;
   const [showLeadSuccess, setShowLeadSuccess] = useState(false);
+  const [isActualUkLead, setIsActualUkLead] = useState(false);
   const { t: t2 } = useTranslation("qualification");
   const { submitAsNewCustomer, submitAsExistingCustomer } = useRequestForm();
   const pillValues = useAnswerPills({ display: "all-answers" });
@@ -26719,7 +26557,7 @@ function RequestForm({ header = null }) {
     cacheValidations
   });
   const isFloating = mobile && isNotInView;
-  const qualification = "qualification" in state ? state.qualification : null;
+  "qualification" in state ? state.qualification : null;
   const { actions } = useQualification();
   const { currentUserAccount } = useCurrentUser();
   const router = useRouter();
@@ -26772,13 +26610,15 @@ function RequestForm({ header = null }) {
         isUkLead,
         success
       } = await submitAsNewCustomer(values2);
-      if (success && isUkLead) {
+      if (success) {
+        setIsActualUkLead(isUkLead);
         setShowLeadSuccess(true);
+        const contextProps2 = getContextualProperties(state);
         trackFormSubmitted(mode, {
-          is_uk_lead: true,
-          has_bestseller: !!(qualification == null ? void 0 : qualification.selectedMenu)
+          is_uk_lead: isUkLead,
+          ...contextProps2
         });
-        trackFunnelCompleted(mode);
+        trackFunnelCompleted(mode, contextProps2);
         return;
       }
       if (signInToken) {
@@ -26787,11 +26627,12 @@ function RequestForm({ header = null }) {
         redirectRoute = `/${router.locale}/account/external/requests/${opportunity.id}`;
       }
     }
+    const contextProps = getContextualProperties(state);
     trackFormSubmitted(mode, {
       is_logged_in: !!currentUserAccount,
-      has_bestseller: !!(qualification == null ? void 0 : qualification.selectedMenu)
+      ...contextProps
     });
-    trackFunnelCompleted(mode);
+    trackFunnelCompleted(mode, contextProps);
     actions.setRequest(values2);
     redirectToCustomerAccountRequest(redirectRoute);
   };
@@ -26850,7 +26691,7 @@ function RequestForm({ header = null }) {
     phone: ((_c = (_b = currentUserAccount == null ? void 0 : currentUserAccount.owner) == null ? void 0 : _b.salesforceCustomer) == null ? void 0 : _c.phoneNumber) || ""
   };
   const isLoggedIn = !!currentUserAccount;
-  if (showLeadSuccess) return /* @__PURE__ */ jsx(Success, {});
+  if (showLeadSuccess) return /* @__PURE__ */ jsx(Success, { isUkLead: isActualUkLead });
   return /* @__PURE__ */ jsxs(FeedbackMessageProvider, { children: [
     header,
     /* @__PURE__ */ jsx(
@@ -29873,6 +29714,55 @@ const LoadingIndicator = ({ variant }) => {
 const WrapperBox = styled(Box)`
   color: var(--embedded-text-color, inherit);
 `;
+function useAbandonmentTracking(mode, state) {
+  var _a2, _b;
+  const hasTrackedAbandonmentRef = useRef(false);
+  const hasCompletedRef = useRef(false);
+  useEffect(() => {
+    if (state.status === QUALIFICATION_STATUS.answered || state.status === QUALIFICATION_STATUS.qualifiedForRequest || state.status === QUALIFICATION_STATUS.qualifiedForMarketplace || state.status === QUALIFICATION_STATUS.qualifiedForCate) {
+      hasCompletedRef.current = true;
+      return;
+    }
+    if (state.status !== QUALIFICATION_STATUS.answering) {
+      hasTrackedAbandonmentRef.current = false;
+      return;
+    }
+    if (!("qualification" in state)) return;
+    const stateSnapshot = {
+      stepId: state.qualification.step.id,
+      stepIndex: state.qualification.stepIndex,
+      totalSteps: state.qualification.steps.filter((s3) => !s3.disabled).length,
+      contextProps: getContextualProperties(state)
+    };
+    const handleAbandonment = () => {
+      if (hasTrackedAbandonmentRef.current) return;
+      if (hasCompletedRef.current) return;
+      trackFunnelEvent("abandoned", {
+        funnel_mode: mode,
+        step_id: stateSnapshot.stepId,
+        step_index: stateSnapshot.stepIndex,
+        total_steps: stateSnapshot.totalSteps,
+        ...stateSnapshot.contextProps
+      });
+      hasTrackedAbandonmentRef.current = true;
+    };
+    window.addEventListener("beforeunload", handleAbandonment);
+    let invisibilityTimeout;
+    const handleVisibilityChange2 = () => {
+      if (document.hidden) {
+        invisibilityTimeout = setTimeout(handleAbandonment, 3e4);
+      } else {
+        clearTimeout(invisibilityTimeout);
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange2);
+    return () => {
+      window.removeEventListener("beforeunload", handleAbandonment);
+      document.removeEventListener("visibilitychange", handleVisibilityChange2);
+      clearTimeout(invisibilityTimeout);
+    };
+  }, [state.status, (_b = (_a2 = state.qualification) == null ? void 0 : _a2.step) == null ? void 0 : _b.id, mode]);
+}
 const EmbeddedFunnel = React__default.forwardRef(
   ({
     onBackground,
@@ -29885,44 +29775,62 @@ const EmbeddedFunnel = React__default.forwardRef(
     mode = "embedded",
     onCancel
   }, ref2) => {
-    var _a2, _b, _c, _d, _e, _f, _g;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     const scrollHelperRef = useRef(null);
-    const hasTrackedStart = useRef(false);
     const previousStepRef = useRef(null);
-    const onQuestionChange = useCallback(
-      (step2, stepIndex, totalSteps) => {
-        if (scrollHelperRef && (scrollHelperRef == null ? void 0 : scrollHelperRef.current)) {
-          scrollHelperRef.current.scrollIntoView({
-            inline: "nearest",
-            block: "nearest",
-            behavior: "smooth"
-          });
-        }
-        if (step2 && typeof totalSteps === "number") {
-          if (previousStepRef.current && previousStepRef.current !== step2.id && typeof stepIndex === "number" && stepIndex > 0) {
-            trackStepCompleted(
-              mode,
-              previousStepRef.current,
-              stepIndex - 1,
-              totalSteps
-            );
-          }
-          trackStepViewed(mode, step2.id, stepIndex ?? 0, totalSteps);
-          previousStepRef.current = step2.id;
+    const { state, actions, canContinue } = useQualification({});
+    useEffect(() => {
+      cleanupOldTrackingSessions();
+    }, []);
+    useEffect(() => {
+      if (state.status !== QUALIFICATION_STATUS.answering) {
+        return;
+      }
+      const step2 = state.qualification.step;
+      const stepIndex = state.qualification.stepIndex;
+      const totalSteps = state.qualification.steps.filter((s3) => !s3.disabled).length;
+      if (scrollHelperRef && (scrollHelperRef == null ? void 0 : scrollHelperRef.current)) {
+        scrollHelperRef.current.scrollIntoView({
+          inline: "nearest",
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+      if (step2 && previousStepRef.current !== step2.id) {
+        const contextProps = getContextualProperties(state);
+        if (previousStepRef.current && stepIndex > 0) {
+          trackStepCompleted(
+            mode,
+            previousStepRef.current,
+            stepIndex - 1,
+            totalSteps,
+            contextProps
+          );
         }
-      },
-      [mode]
-    );
-    const { state, actions, canContinue } = useQualification({
-      onQuestionChange
-    });
+        trackStepViewed(mode, step2.id, stepIndex, totalSteps, contextProps);
+        previousStepRef.current = step2.id;
+      }
+    }, [state.status, (_b = (_a2 = state.qualification) == null ? void 0 : _a2.step) == null ? void 0 : _b.id, mode]);
     useEffect(() => {
-      if (!hasTrackedStart.current && state.status === QUALIFICATION_STATUS.answering) {
+      var _a3, _b2;
+      const sessionId = "qualification" in state ? (_b2 = (_a3 = state.qualification) == null ? void 0 : _a3.sessionInfo) == null ? void 0 : _b2.sessionId : null;
+      if (!sessionId) return;
+      const trackingKey = `funnel_started_${sessionId}`;
+      let alreadyTracked = false;
+      try {
+        alreadyTracked = sessionStorage.getItem(trackingKey) === "true";
+      } catch (e2) {
+      }
+      if (!alreadyTracked && "qualification" in state) {
         const enabledSteps2 = state.qualification.steps.filter((s3) => !s3.disabled);
-        trackFunnelStarted(mode, enabledSteps2.length);
-        hasTrackedStart.current = true;
+        const contextProps = getContextualProperties(state);
+        trackFunnelStarted(mode, enabledSteps2.length, contextProps);
+        try {
+          sessionStorage.setItem(trackingKey, "true");
+        } catch (e2) {
+        }
       }
-    }, [state.status, mode]);
+    }, [(_d = (_c = state.qualification) == null ? void 0 : _c.sessionInfo) == null ? void 0 : _d.sessionId, mode]);
     useEffect(() => {
       if (scrollHelperRef && (scrollHelperRef == null ? void 0 : scrollHelperRef.current)) {
         scrollHelperRef.current.scrollIntoView({
@@ -29932,6 +29840,31 @@ const EmbeddedFunnel = React__default.forwardRef(
         });
       }
     }, [state.status]);
+    const previousStatusRef = useRef(state.status);
+    const lastAnsweringStateRef = useRef(null);
+    useEffect(() => {
+      if (state.status === QUALIFICATION_STATUS.answering && "qualification" in state) {
+        lastAnsweringStateRef.current = {
+          stepId: state.qualification.step.id,
+          stepIndex: state.qualification.stepIndex
+        };
+      }
+    }, [state.status, (_f = (_e = state.qualification) == null ? void 0 : _e.step) == null ? void 0 : _f.id, (_g = state.qualification) == null ? void 0 : _g.stepIndex]);
+    useEffect(() => {
+      if (previousStatusRef.current === QUALIFICATION_STATUS.answering && state.status === QUALIFICATION_STATUS.answered && lastAnsweringStateRef.current && "qualification" in state) {
+        const totalSteps = state.qualification.steps.filter((s3) => !s3.disabled).length;
+        const contextProps = getContextualProperties(state);
+        trackStepCompleted(
+          mode,
+          lastAnsweringStateRef.current.stepId,
+          lastAnsweringStateRef.current.stepIndex,
+          totalSteps,
+          contextProps
+        );
+      }
+      previousStatusRef.current = state.status;
+    }, [state.status, mode]);
+    useAbandonmentTracking(mode, state);
     const toNextStep2 = useCallback(() => {
       actions.nextStep();
     }, [actions]);
@@ -29948,7 +29881,7 @@ const EmbeddedFunnel = React__default.forwardRef(
     if (state.status !== QUALIFICATION_STATUS.answered && state.status !== QUALIFICATION_STATUS.answering && state.status !== QUALIFICATION_STATUS.qualifiedForRequest) {
       return null;
     }
-    const stepId = state.status === "answering" && ((_a2 = state.qualification.step) == null ? void 0 : _a2.id) || "";
+    const stepId = state.status === "answering" && ((_h = state.qualification.step) == null ? void 0 : _h.id) || "";
     const onKeyPress = (event) => {
       if (event.key === "Enter" && canContinue) {
         event.preventDefault();
@@ -29959,22 +29892,22 @@ const EmbeddedFunnel = React__default.forwardRef(
       return /* @__PURE__ */ jsx(EmbeddedRequestPage, { ratings });
     }
     let textColor = onBackground === "light" ? "dark" : "light";
-    if (stepId.includes("customer-") && ((_b = slides == null ? void 0 : slides.customerTier) == null ? void 0 : _b.whiteWrapper)) {
+    if (stepId.includes("customer-") && ((_i = slides == null ? void 0 : slides.customerTier) == null ? void 0 : _i.whiteWrapper)) {
       textColor = "dark";
     }
-    if (stepId === "city" && ((_c = slides == null ? void 0 : slides.city) == null ? void 0 : _c.whiteWrapper)) {
+    if (stepId === "city" && ((_j = slides == null ? void 0 : slides.city) == null ? void 0 : _j.whiteWrapper)) {
       textColor = "dark";
     }
-    if (stepId === "catering_categories" && ((_d = slides == null ? void 0 : slides.category) == null ? void 0 : _d.whiteWrapper)) {
+    if (stepId === "catering_categories" && ((_k = slides == null ? void 0 : slides.category) == null ? void 0 : _k.whiteWrapper)) {
       textColor = "dark";
     }
-    if (stepId === "people_count_and_budget" && ((_e = slides == null ? void 0 : slides.budgetAndPeople) == null ? void 0 : _e.whiteWrapper)) {
+    if (stepId === "people_count_and_budget" && ((_l = slides == null ? void 0 : slides.budgetAndPeople) == null ? void 0 : _l.whiteWrapper)) {
       textColor = "dark";
     }
-    if (stepId === "dietary_restrictions" && ((_f = slides == null ? void 0 : slides.dietaryRestriction) == null ? void 0 : _f.whiteWrapper)) {
+    if (stepId === "dietary_restrictions" && ((_m = slides == null ? void 0 : slides.dietaryRestriction) == null ? void 0 : _m.whiteWrapper)) {
       textColor = "dark";
     }
-    if (stepId === "event_date" && ((_g = slides == null ? void 0 : slides.dateAndLead) == null ? void 0 : _g.whiteWrapper)) {
+    if (stepId === "event_date" && ((_n = slides == null ? void 0 : slides.dateAndLead) == null ? void 0 : _n.whiteWrapper)) {
       textColor = "dark";
     }
     const isFullscreen = mode === "fullscreen";
@@ -30525,4 +30458,3 @@ function QualificationFunnel({
 export {
   QualificationFunnel
 };
-//# sourceMappingURL=index.esm.js.map