@heycater/qualification-funnel 1.4.10 → 1.4.12

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 var _a;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { createContext, useContext, useMemo, useReducer, useCallback, useEffect, useRef, useState, isValidElement, cloneElement, Children, forwardRef } from "react";
+import React__default, { createContext, useContext, useMemo, useReducer, useCallback, useEffect, useRef, useState, isValidElement, cloneElement, Children, forwardRef, useLayoutEffect } from "react";
 import { darken as darken$1, lighten as lighten$1, ButtonBase as ButtonBase$2, Typography as Typography$1, useMediaQuery, Input as Input$1, IconButton as IconButton$2, useTheme as useTheme$1, FormControlLabel, Tooltip, Menu, Hidden, SnackbarContent, Snackbar, TextField, CircularProgress, Modal, ThemeProvider as ThemeProvider$1, StylesProvider as StylesProvider$1, CssBaseline } from "@material-ui/core";
 import { useTranslation, initReactI18next, I18nextProvider } from "react-i18next";
 import styled, { css as css$1, createGlobalStyle, ThemeProvider } from "styled-components";
@@ -11047,9 +11047,12 @@ function trackAnswerSelected(context, answer) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("funnel_answer_selected", properties);
+  captureEvent("qf_v2_answer_selected", properties);
 }
 function trackFormSubmitted(context, metadata) {
+  if (!context.session_id) {
+    console.warn("[Tracking] trackFormSubmitted called with empty session_id", context);
+  }
   const properties = {
     funnel_mode: context.funnel_mode,
     session_id: context.session_id,
@@ -11062,9 +11065,12 @@ function trackFormSubmitted(context, metadata) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("funnel_form_submitted", properties);
+  captureEvent("qf_v2_form_submitted", properties);
 }
 function trackCompleted(context) {
+  if (!context.session_id) {
+    console.warn("[Tracking] trackCompleted called with empty session_id", context);
+  }
   const properties = {
     funnel_mode: context.funnel_mode,
     session_id: context.session_id,
@@ -11076,9 +11082,12 @@ function trackCompleted(context) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("funnel_completed", properties);
+  captureEvent("qf_v2_completed", properties);
 }
 function trackAbandoned(context, lastStep) {
+  if (!context.session_id) {
+    console.warn("[Tracking] trackAbandoned called with empty session_id", context);
+  }
   const properties = {
     funnel_mode: context.funnel_mode,
     session_id: context.session_id,
@@ -11092,7 +11101,7 @@ function trackAbandoned(context, lastStep) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("funnel_abandoned", properties);
+  captureEvent("qf_v2_abandoned", properties);
 }
 function trackStarted(context, initialStepId) {
   const properties = {
@@ -11100,11 +11109,11 @@ function trackStarted(context, initialStepId) {
     session_id: context.session_id,
     initial_step: initialStepId
   };
-  captureEvent("funnel_started", properties);
+  captureEvent("qf_v2_started", properties);
 }
 const TrackingContext = createContext(null);
 function TrackingProvider({
-  funnelContext,
+  funnelContextRef,
   updateContext,
   currentStepId,
   children
@@ -11121,12 +11130,12 @@ function TrackingProvider({
       const questions2 = (schemaStep == null ? void 0 : schemaStep.questions) || [];
       const questionIndex = questions2.findIndex((q2) => q2.id === questionId);
       const isLastQuestion = questionIndex === questions2.length - 1;
-      const sessionKey = `funnel_started_${funnelContext.session_id}`;
+      const sessionKey = `qf_v2_started_${funnelContextRef.current.session_id}`;
       if (typeof sessionStorage !== "undefined") {
         const hasStarted = sessionStorage.getItem(sessionKey);
         if (!hasStarted) {
           sessionStorage.setItem(sessionKey, "true");
-          trackStarted(funnelContext, currentStepId);
+          trackStarted(funnelContextRef.current, currentStepId);
         }
       }
       if (questionId === "service_type") {
@@ -11141,7 +11150,7 @@ function TrackingProvider({
       } else if (questionId === "city") {
         updateContext({ city: value });
       }
-      trackAnswerSelected(funnelContext, {
+      trackAnswerSelected(funnelContextRef.current, {
         step_id: step2.id,
         step_index: stepIndex,
         question_id: questionId,
@@ -11149,20 +11158,23 @@ function TrackingProvider({
         is_last_question: isLastQuestion
       });
     },
-    [funnelContext, currentStepId, state, updateContext]
+    [funnelContextRef, currentStepId, state, updateContext]
   );
-  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value: { funnelContext, currentStepId, trackAnswer }, children });
+  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value: { funnelContextRef, currentStepId, trackAnswer }, children });
 }
 function useTracking() {
   const context = useContext(TrackingContext);
   if (!context) {
-    return {
-      funnelContext: {
+    const defaultRef = {
+      current: {
         session_id: "",
         funnel_mode: "embedded",
         service_type: "",
         total_steps: 0
-      },
+      }
+    };
+    return {
+      funnelContextRef: defaultRef,
       currentStepId: "",
       trackAnswer: () => {
       }
@@ -26660,7 +26672,7 @@ function RequestForm({ header = null }) {
     }
     handleDeliveryAddressChange();
   }, [deliveryAddress]);
-  const { funnelContext } = useTracking();
+  const { funnelContextRef } = useTracking();
   const handleSubmit = async (values2) => {
     var _a3;
     handleDisableCTA(true);
@@ -26676,10 +26688,10 @@ function RequestForm({ header = null }) {
       if (success) {
         setIsActualUkLead(isUkLead);
         setShowLeadSuccess(true);
-        trackFormSubmitted(funnelContext, {
+        trackFormSubmitted(funnelContextRef.current, {
           is_uk_lead: isUkLead
         });
-        trackCompleted(funnelContext);
+        trackCompleted(funnelContextRef.current);
         return;
       } else {
         console.error("[HeyCater Funnel] Expected success screen but got success=false. Result:", response);
@@ -26706,10 +26718,10 @@ function RequestForm({ header = null }) {
         redirectRoute = `/${router.locale}/account/external/requests/${opportunity.id}`;
       }
     }
-    trackFormSubmitted(funnelContext, {
+    trackFormSubmitted(funnelContextRef.current, {
       is_logged_in: !!currentUserAccount
     });
-    trackCompleted(funnelContext);
+    trackCompleted(funnelContextRef.current);
     actions.setRequest(values2);
     redirectToCustomerAccountRequest(redirectRoute);
   };
@@ -29791,7 +29803,7 @@ const LoadingIndicator = ({ variant }) => {
 const WrapperBox = styled(Box)`
   color: var(--embedded-text-color, inherit);
 `;
-function useAbandonmentTracking(funnelContext, state) {
+function useAbandonmentTracking(funnelContextRef, state) {
   const hasTrackedAbandonmentRef = useRef(false);
   const hasCompletedRef = useRef(false);
   useEffect(() => {
@@ -29811,7 +29823,7 @@ function useAbandonmentTracking(funnelContext, state) {
     const handleAbandonment = () => {
       if (hasTrackedAbandonmentRef.current) return;
       if (hasCompletedRef.current) return;
-      trackAbandoned(funnelContext, {
+      trackAbandoned(funnelContextRef.current, {
         step_id: stateSnapshot.stepId,
         step_index: stateSnapshot.stepIndex
       });
@@ -29832,8 +29844,7 @@ function useAbandonmentTracking(funnelContext, state) {
     };
   }, [
     state.status,
-    "qualification" in state && "step" in state.qualification ? state.qualification.step.id : null,
-    funnelContext
+    "qualification" in state && "step" in state.qualification ? state.qualification.step.id : null
   ]);
 }
 const EmbeddedFunnel = React__default.forwardRef(
@@ -29859,22 +29870,41 @@ const EmbeddedFunnel = React__default.forwardRef(
     });
     const updateContext = useCallback((patch) => {
       funnelContext.current = { ...funnelContext.current, ...patch };
+      if (typeof sessionStorage !== "undefined" && funnelContext.current.session_id) {
+        try {
+          sessionStorage.setItem(
+            `funnel_context_${funnelContext.current.session_id}`,
+            JSON.stringify(funnelContext.current)
+          );
+        } catch (e2) {
+        }
+      }
     }, []);
     useEffect(() => {
       cleanupOldTrackingSessions();
     }, []);
-    useEffect(() => {
+    useLayoutEffect(() => {
       var _a3, _b2, _c2;
       if (!("qualification" in state)) return;
       const sessionId = ((_a3 = state.qualification.sessionInfo) == null ? void 0 : _a3.sessionId) || "";
       const totalSteps = state.qualification.steps.filter((s3) => !s3.disabled).length;
       const serviceType = ((_b2 = state.qualification.answers) == null ? void 0 : _b2.service_type) || "";
       const city = (_c2 = state.qualification.answers) == null ? void 0 : _c2.city;
+      let restoredContext = null;
+      if (typeof sessionStorage !== "undefined" && sessionId) {
+        try {
+          const stored = sessionStorage.getItem(`funnel_context_${sessionId}`);
+          if (stored) {
+            restoredContext = JSON.parse(stored);
+          }
+        } catch (e2) {
+        }
+      }
       updateContext({
         session_id: sessionId,
         total_steps: totalSteps,
-        service_type: serviceType,
-        ...city && { city }
+        service_type: (restoredContext == null ? void 0 : restoredContext.service_type) || serviceType,
+        ...(restoredContext == null ? void 0 : restoredContext.city) || city ? { city: (restoredContext == null ? void 0 : restoredContext.city) || city } : {}
       });
     }, [
       "qualification" in state ? (_a2 = state.qualification.sessionInfo) == null ? void 0 : _a2.sessionId : null,
@@ -29892,7 +29922,7 @@ const EmbeddedFunnel = React__default.forwardRef(
         });
       }
     }, [state.status]);
-    useAbandonmentTracking(funnelContext.current, state);
+    useAbandonmentTracking(funnelContext, state);
     const toNextStep2 = useCallback(() => {
       actions.nextStep();
     }, [actions]);
@@ -29944,7 +29974,7 @@ const EmbeddedFunnel = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       TrackingProvider,
       {
-        funnelContext: funnelContext.current,
+        funnelContextRef: funnelContext,
         updateContext,
         currentStepId: stepId,
         children: /* @__PURE__ */ jsxs(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycater/qualification-funnel",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "type": "module",
   "description": "Heycater embedded qualification funnel widget",
   "main": "dist/index.cjs.js",
@@ -32,7 +32,10 @@
     "preview": "vite preview",
     "prepublishOnly": "npm run clean && npm run build",
     "lint": "npx eslint ./src",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
   },
   "peerDependencies": {
     "@bugsnag/js": "^7.5.4",
@@ -66,6 +69,9 @@
   },
   "devDependencies": {
     "@svgr/rollup": "^8.1.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.0",
     "@types/google.maps": "^3.54.1",
     "@types/lodash": "^4.17.0",
     "@types/node": "20.3.2",
@@ -74,6 +80,8 @@
     "@types/react-dom": "^17.0.2",
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.0.0",
+    "happy-dom": "^12.10.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rollup-plugin-visualizer": "^6.0.5",
@@ -81,6 +89,7 @@
     "typescript": "5.1.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.7.0",
-    "vite-plugin-static-copy": "^3.1.4"
+    "vite-plugin-static-copy": "^3.1.4",
+    "vitest": "^1.0.0"
   }
 }