@heycater/qualification-funnel 1.8.1 → 1.9.0

package/dist/index.esm.js

@@ -10085,7 +10085,7 @@ function trackAnswerSelected(context, answer) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("qf_v6_answer_selected", properties);
+  captureEvent("qf_v8_answer_selected", properties);
 }
 function trackFormSubmitted(context, metadata) {
   if (!context.session_id) {
@@ -10103,7 +10103,7 @@ function trackFormSubmitted(context, metadata) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("qf_v6_form_submitted", properties);
+  captureEvent("qf_v8_form_submitted", properties);
 }
 function trackCompleted(context) {
   if (!context.session_id) {
@@ -10120,7 +10120,7 @@ function trackCompleted(context) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("qf_v6_completed", properties);
+  captureEvent("qf_v8_completed", properties);
 }
 function trackAbandoned(context, lastStep) {
   if (!context.session_id) {
@@ -10139,7 +10139,7 @@ function trackAbandoned(context, lastStep) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("qf_v6_abandoned", properties);
+  captureEvent("qf_v8_abandoned", properties);
 }
 function trackStarted(context, initialStepId) {
   const properties = {
@@ -10147,7 +10147,7 @@ function trackStarted(context, initialStepId) {
     session_id: context.session_id,
     initial_step: initialStepId
   };
-  captureEvent("qf_v6_started", properties);
+  captureEvent("qf_v8_started", properties);
 }
 const TrackingContext = createContext(null);
 function TrackingProvider({
@@ -10156,7 +10156,44 @@ function TrackingProvider({
   currentStepId,
   children
 }) {
-  const { state } = useQualification();
+  const { state, answerOf } = useQualification();
+  const trackStepCompletion = useCallback(() => {
+    if (!("qualification" in state)) return;
+    const qual = state.qualification;
+    if (!("step" in qual)) return;
+    const step2 = qual.step;
+    const stepIndex = qual.stepIndex;
+    const schemaStep = SCHEMA_STEPS[step2.id];
+    const questions2 = (schemaStep == null ? void 0 : schemaStep.questions) || [];
+    const sessionKey = `qf_v8_started_${funnelContextRef.current.session_id}`;
+    if (typeof sessionStorage !== "undefined") {
+      const hasStarted = sessionStorage.getItem(sessionKey);
+      if (!hasStarted) {
+        sessionStorage.setItem(sessionKey, "true");
+        trackStarted(funnelContextRef.current, currentStepId);
+      }
+    }
+    questions2.forEach((question, questionIndex) => {
+      const currentValue = answerOf(question.id);
+      const isLastQuestion = questionIndex === questions2.length - 1;
+      if (question.id === "service_type" && isValidServiceType(currentValue)) {
+        const stepOrder = getStepOrderForServiceType(currentValue);
+        updateContext({
+          service_type: currentValue,
+          total_steps: stepOrder.length
+        });
+      } else if (question.id === "city" && currentValue) {
+        updateContext({ city: currentValue });
+      }
+      trackAnswerSelected(funnelContextRef.current, {
+        step_id: step2.id,
+        step_index: stepIndex,
+        question_id: question.id,
+        answer_value: currentValue ?? null,
+        is_last_question: isLastQuestion
+      });
+    });
+  }, [funnelContextRef, currentStepId, state, updateContext, answerOf]);
   const trackAnswer = useCallback(
     (questionId, value) => {
       if (!("qualification" in state)) return;
@@ -10168,7 +10205,7 @@ 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 = `qf_v6_started_${funnelContextRef.current.session_id}`;
+      const sessionKey = `qf_v8_started_${funnelContextRef.current.session_id}`;
       if (typeof sessionStorage !== "undefined") {
         const hasStarted = sessionStorage.getItem(sessionKey);
         if (!hasStarted) {
@@ -10176,16 +10213,13 @@ function TrackingProvider({
           trackStarted(funnelContextRef.current, currentStepId);
         }
       }
-      if (questionId === "service_type") {
-        const serviceType = value;
-        if (serviceType) {
-          const stepOrder = getStepOrderForServiceType(serviceType);
-          delete funnelContextRef.current.city;
-          updateContext({
-            service_type: serviceType,
-            total_steps: stepOrder.length
-          });
-        }
+      if (questionId === "service_type" && isValidServiceType(value)) {
+        const stepOrder = getStepOrderForServiceType(value);
+        delete funnelContextRef.current.city;
+        updateContext({
+          service_type: value,
+          total_steps: stepOrder.length
+        });
       } else if (questionId === "city") {
         updateContext({ city: value });
       }
@@ -10199,7 +10233,7 @@ function TrackingProvider({
     },
     [funnelContextRef, currentStepId, state, updateContext]
   );
-  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value: { funnelContextRef, currentStepId, trackAnswer }, children });
+  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value: { funnelContextRef, currentStepId, trackAnswer, trackStepCompletion }, children });
 }
 function useTracking() {
   const context = useContext(TrackingContext);
@@ -10216,6 +10250,8 @@ function useTracking() {
       funnelContextRef: defaultRef,
       currentStepId: "",
       trackAnswer: () => {
+      },
+      trackStepCompletion: () => {
       }
     };
   }
@@ -29968,8 +30004,13 @@ const EmbeddedFunnel = React__default.forwardRef(
       }
     }, [state.status]);
     useAbandonmentTracking(funnelContext, state);
+    const toNextStepRef = useRef(null);
     const toNextStep2 = useCallback(() => {
-      actions.nextStep();
+      if (toNextStepRef.current) {
+        toNextStepRef.current();
+      } else {
+        actions.nextStep();
+      }
     }, [actions]);
     useEffect(() => {
       if (state.status === QUALIFICATION_STATUS.qualifiedForMarketplace) {
@@ -30024,69 +30065,85 @@ const EmbeddedFunnel = React__default.forwardRef(
     const isFullscreen = mode === "fullscreen";
     const enabledSteps = state.qualification.steps.filter((q2) => !q2.disabled);
     const handleCancel = onCancel || (() => window.history.back());
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       TrackingProvider,
       {
         funnelContextRef: funnelContext,
         updateContext,
         currentStepId: stepId,
-        children: /* @__PURE__ */ jsxs(
-          FormWrapper,
-          {
-            $textColor: textColor,
-            $mode: mode,
-            tabIndex: 0,
-            ref: ref2,
-            "data-embedded-funnel": true,
-            "data-ph-capture-attribute-funnel-step": stepId || void 0,
-            "data-ph-capture-attribute-funnel-mode": mode,
-            name: "step" in state.qualification ? state.qualification.step.id : state.status,
-            onSubmit: (e2) => {
-              e2.preventDefault();
-              toNextStep2();
-            },
-            onKeyPressCapture: onKeyPress,
-            children: [
-              isFullscreen && state.status === QUALIFICATION_STATUS.answering && /* @__PURE__ */ jsx(
-                FullscreenHeader,
-                {
-                  currentStep: state.qualification.stepIndex + 1,
-                  stepCount: enabledSteps.length,
-                  onCancel: handleCancel
-                }
-              ),
-              /* @__PURE__ */ jsx(Box, { position: "absolute", top: "-120px", ref: scrollHelperRef }),
-              /* @__PURE__ */ jsxs(Box, { width: "100%", pb: isFullscreen ? 0 : 6, flexGrow: 1, display: "flex", flexDirection: "column", children: [
-                state.status === QUALIFICATION_STATUS.answering && /* @__PURE__ */ jsx(
-                  EmbeddedQuestion,
+        children: [
+          /* @__PURE__ */ jsx(StepTransitionHandler, { toNextStepRef, nextStep: actions.nextStep }),
+          /* @__PURE__ */ jsxs(
+            FormWrapper,
+            {
+              $textColor: textColor,
+              $mode: mode,
+              tabIndex: 0,
+              ref: ref2,
+              "data-embedded-funnel": true,
+              "data-ph-capture-attribute-funnel-step": stepId || void 0,
+              "data-ph-capture-attribute-funnel-mode": mode,
+              name: "step" in state.qualification ? state.qualification.step.id : state.status,
+              onSubmit: (e2) => {
+                e2.preventDefault();
+                toNextStep2();
+              },
+              onKeyPressCapture: onKeyPress,
+              children: [
+                isFullscreen && state.status === QUALIFICATION_STATUS.answering && /* @__PURE__ */ jsx(
+                  FullscreenHeader,
                   {
-                    slides,
-                    step: state.qualification.step,
-                    highlightColor,
-                    ratings,
-                    renderTitle,
-                    LayoutComponent,
-                    titleTranslationKeys,
-                    mode
+                    currentStep: state.qualification.stepIndex + 1,
+                    stepCount: enabledSteps.length,
+                    onCancel: handleCancel
                   }
                 ),
-                state.status === QUALIFICATION_STATUS.answered && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    LoadingIndicator,
+                /* @__PURE__ */ jsx(Box, { position: "absolute", top: "-120px", ref: scrollHelperRef }),
+                /* @__PURE__ */ jsxs(Box, { width: "100%", pb: isFullscreen ? 0 : 6, flexGrow: 1, display: "flex", flexDirection: "column", children: [
+                  state.status === QUALIFICATION_STATUS.answering && /* @__PURE__ */ jsx(
+                    EmbeddedQuestion,
                     {
-                      variant: onBackground === "dark" ? "light" : "dark"
+                      slides,
+                      step: state.qualification.step,
+                      highlightColor,
+                      ratings,
+                      renderTitle,
+                      LayoutComponent,
+                      titleTranslationKeys,
+                      mode
                     }
                   ),
-                  /* @__PURE__ */ jsx(Box, { display: "none", children: /* @__PURE__ */ jsx(EmbeddedRequestPage, { ratings }) })
+                  state.status === QUALIFICATION_STATUS.answered && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      LoadingIndicator,
+                      {
+                        variant: onBackground === "dark" ? "light" : "dark"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Box, { display: "none", children: /* @__PURE__ */ jsx(EmbeddedRequestPage, { ratings }) })
+                  ] })
                 ] })
-              ] })
-            ]
-          }
-        )
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
+function StepTransitionHandler({ toNextStepRef, nextStep }) {
+  const { trackStepCompletion } = useTracking();
+  useLayoutEffect(() => {
+    toNextStepRef.current = () => {
+      trackStepCompletion();
+      nextStep();
+    };
+    return () => {
+      toNextStepRef.current = null;
+    };
+  }, [toNextStepRef, trackStepCompletion, nextStep]);
+  return null;
+}
 const FormWrapper = styled.form`
   --embedded-text-color: ${({ $textColor }) => $textColor === "light" ? "white" : "rgb(60, 67, 64)"};
   width: 100%;

package/package.json

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