@heycater/qualification-funnel 1.3.21 → 1.3.22

package/dist/index.esm.js

@@ -7783,6 +7783,39 @@ 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,
@@ -7792,7 +7825,7 @@ function initialize(state, {
   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 +7834,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,6 +7843,11 @@ 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 })),
@@ -11188,6 +11227,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 +11254,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 +11294,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);
@@ -26375,13 +26433,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, {}) }) }) }),
@@ -26661,7 +26723,7 @@ function useRequestForm() {
       });
       return {
         success,
-        isUkLead: true
+        isUkLead
       };
     } else {
       const {
@@ -26709,6 +26771,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" });
@@ -26772,13 +26835,16 @@ 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,
+          has_bestseller: !!(qualification == null ? void 0 : qualification.selectedMenu),
+          ...contextProps2
         });
-        trackFunnelCompleted(mode);
+        trackFunnelCompleted(mode, contextProps2);
         return;
       }
       if (signInToken) {
@@ -26787,11 +26853,13 @@ 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)
+      has_bestseller: !!(qualification == null ? void 0 : qualification.selectedMenu),
+      ...contextProps
     });
-    trackFunnelCompleted(mode);
+    trackFunnelCompleted(mode, contextProps);
     actions.setRequest(values2);
     redirectToCustomerAccountRequest(redirectRoute);
   };
@@ -26850,7 +26918,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 +29941,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 +30002,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 +30067,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 +30108,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 +30119,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";