@heycater/qualification-funnel 1.8.2 → 1.10.0

package/dist/index.esm.js

@@ -10085,7 +10085,7 @@ function trackAnswerSelected(context, answer) {
   if (context.city) {
     properties.city = context.city;
   }
-  captureEvent("qf_v7_answer_selected", properties);
+  captureEvent("qf_v9_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_v7_form_submitted", properties);
+  captureEvent("qf_v9_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_v7_completed", properties);
+  captureEvent("qf_v9_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_v7_abandoned", properties);
+  captureEvent("qf_v9_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_v7_started", properties);
+  captureEvent("qf_v9_started", properties);
 }
 const TrackingContext = createContext(null);
 function TrackingProvider({
@@ -10156,50 +10156,60 @@ function TrackingProvider({
   currentStepId,
   children
 }) {
-  const { state } = useQualification();
-  const trackAnswer = useCallback(
-    (questionId, value) => {
-      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 questionIndex = questions2.findIndex((q2) => q2.id === questionId);
+  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_v9_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;
-      const sessionKey = `qf_v7_started_${funnelContextRef.current.session_id}`;
-      if (typeof sessionStorage !== "undefined") {
-        const hasStarted = sessionStorage.getItem(sessionKey);
-        if (!hasStarted) {
-          sessionStorage.setItem(sessionKey, "true");
-          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
-          });
-        }
-      } else if (questionId === "city") {
-        updateContext({ city: value });
+      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: questionId,
-        answer_value: value,
+        question_id: question.id,
+        answer_value: currentValue ?? null,
         is_last_question: isLastQuestion
       });
+    });
+  }, [funnelContextRef, currentStepId, state, updateContext, answerOf]);
+  const trackAnswer = useCallback(
+    (questionId, value) => {
+      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 });
+      }
     },
-    [funnelContextRef, currentStepId, state, updateContext]
+    [funnelContextRef, 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 +10226,8 @@ function useTracking() {
       funnelContextRef: defaultRef,
       currentStepId: "",
       trackAnswer: () => {
+      },
+      trackStepCompletion: () => {
       }
     };
   }
@@ -12303,7 +12315,7 @@ var objectInspect = function inspect_(obj, options, depth, seen) {
     var ys = arrObjKeys(obj, inspect2);
     var isPlainObject2 = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object;
     var protoTag = obj instanceof Object ? "" : "null prototype";
-    var stringTag2 = !isPlainObject2 && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr$1(obj), 8, -1) : protoTag ? "Object" : "";
+    var stringTag2 = !isPlainObject2 && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? "Object" : "";
     var constructorTag = isPlainObject2 || typeof obj.constructor !== "function" ? "" : obj.constructor.name ? obj.constructor.name + " " : "";
     var tag = constructorTag + (stringTag2 || protoTag ? "[" + $join.call($concat$1.call([], stringTag2 || [], protoTag || []), ": ") + "] " : "");
     if (ys.length === 0) {
@@ -12328,25 +12340,25 @@ function canTrustToString(obj) {
   return !toStringTag || !(typeof obj === "object" && (toStringTag in obj || typeof obj[toStringTag] !== "undefined"));
 }
 function isArray$3(obj) {
-  return toStr$1(obj) === "[object Array]" && canTrustToString(obj);
+  return toStr(obj) === "[object Array]" && canTrustToString(obj);
 }
 function isDate(obj) {
-  return toStr$1(obj) === "[object Date]" && canTrustToString(obj);
+  return toStr(obj) === "[object Date]" && canTrustToString(obj);
 }
 function isRegExp$1(obj) {
-  return toStr$1(obj) === "[object RegExp]" && canTrustToString(obj);
+  return toStr(obj) === "[object RegExp]" && canTrustToString(obj);
 }
 function isError(obj) {
-  return toStr$1(obj) === "[object Error]" && canTrustToString(obj);
+  return toStr(obj) === "[object Error]" && canTrustToString(obj);
 }
 function isString(obj) {
-  return toStr$1(obj) === "[object String]" && canTrustToString(obj);
+  return toStr(obj) === "[object String]" && canTrustToString(obj);
 }
 function isNumber(obj) {
-  return toStr$1(obj) === "[object Number]" && canTrustToString(obj);
+  return toStr(obj) === "[object Number]" && canTrustToString(obj);
 }
 function isBoolean(obj) {
-  return toStr$1(obj) === "[object Boolean]" && canTrustToString(obj);
+  return toStr(obj) === "[object Boolean]" && canTrustToString(obj);
 }
 function isSymbol(obj) {
   if (hasShammedSymbols) {
@@ -12382,7 +12394,7 @@ var hasOwn$1 = Object.prototype.hasOwnProperty || function(key) {
 function has$4(obj, key) {
   return hasOwn$1.call(obj, key);
 }
-function toStr$1(obj) {
+function toStr(obj) {
   return objectToString.call(obj);
 }
 function nameOf(f) {
@@ -12691,7 +12703,7 @@ var syntax = SyntaxError;
 var uri = URIError;
 var abs$1 = Math.abs;
 var floor$1 = Math.floor;
-var max$2 = Math.max;
+var max$1 = Math.max;
 var min$1 = Math.min;
 var pow$1 = Math.pow;
 var round$2 = Math.round;
@@ -12820,78 +12832,99 @@ function requireObject_getPrototypeOf() {
   Object_getPrototypeOf = $Object2.getPrototypeOf || null;
   return Object_getPrototypeOf;
 }
-var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
-var toStr = Object.prototype.toString;
-var max$1 = Math.max;
-var funcType = "[object Function]";
-var concatty = function concatty2(a3, b2) {
-  var arr = [];
-  for (var i2 = 0; i2 < a3.length; i2 += 1) {
-    arr[i2] = a3[i2];
-  }
-  for (var j = 0; j < b2.length; j += 1) {
-    arr[j + a3.length] = b2[j];
-  }
-  return arr;
-};
-var slicy = function slicy2(arrLike, offset2) {
-  var arr = [];
-  for (var i2 = offset2, j = 0; i2 < arrLike.length; i2 += 1, j += 1) {
-    arr[j] = arrLike[i2];
-  }
-  return arr;
-};
-var joiny = function(arr, joiner) {
-  var str = "";
-  for (var i2 = 0; i2 < arr.length; i2 += 1) {
-    str += arr[i2];
-    if (i2 + 1 < arr.length) {
-      str += joiner;
+var implementation;
+var hasRequiredImplementation;
+function requireImplementation() {
+  if (hasRequiredImplementation) return implementation;
+  hasRequiredImplementation = 1;
+  var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
+  var toStr2 = Object.prototype.toString;
+  var max2 = Math.max;
+  var funcType = "[object Function]";
+  var concatty = function concatty2(a3, b2) {
+    var arr = [];
+    for (var i2 = 0; i2 < a3.length; i2 += 1) {
+      arr[i2] = a3[i2];
     }
-  }
-  return str;
-};
-var implementation$1 = function bind(that) {
-  var target = this;
-  if (typeof target !== "function" || toStr.apply(target) !== funcType) {
-    throw new TypeError(ERROR_MESSAGE + target);
-  }
-  var args = slicy(arguments, 1);
-  var bound;
-  var binder = function() {
-    if (this instanceof bound) {
-      var result = target.apply(
-        this,
-        concatty(args, arguments)
-      );
-      if (Object(result) === result) {
-        return result;
+    for (var j = 0; j < b2.length; j += 1) {
+      arr[j + a3.length] = b2[j];
+    }
+    return arr;
+  };
+  var slicy = function slicy2(arrLike, offset2) {
+    var arr = [];
+    for (var i2 = offset2, j = 0; i2 < arrLike.length; i2 += 1, j += 1) {
+      arr[j] = arrLike[i2];
+    }
+    return arr;
+  };
+  var joiny = function(arr, joiner) {
+    var str = "";
+    for (var i2 = 0; i2 < arr.length; i2 += 1) {
+      str += arr[i2];
+      if (i2 + 1 < arr.length) {
+        str += joiner;
       }
-      return this;
     }
-    return target.apply(
-      that,
-      concatty(args, arguments)
-    );
+    return str;
   };
-  var boundLength = max$1(0, target.length - args.length);
-  var boundArgs = [];
-  for (var i2 = 0; i2 < boundLength; i2++) {
-    boundArgs[i2] = "$" + i2;
-  }
-  bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
-  if (target.prototype) {
-    var Empty = function Empty2() {
+  implementation = function bind2(that) {
+    var target = this;
+    if (typeof target !== "function" || toStr2.apply(target) !== funcType) {
+      throw new TypeError(ERROR_MESSAGE + target);
+    }
+    var args = slicy(arguments, 1);
+    var bound;
+    var binder = function() {
+      if (this instanceof bound) {
+        var result = target.apply(
+          this,
+          concatty(args, arguments)
+        );
+        if (Object(result) === result) {
+          return result;
+        }
+        return this;
+      }
+      return target.apply(
+        that,
+        concatty(args, arguments)
+      );
     };
-    Empty.prototype = target.prototype;
-    bound.prototype = new Empty();
-    Empty.prototype = null;
-  }
-  return bound;
-};
-var implementation = implementation$1;
-var functionBind = Function.prototype.bind || implementation;
-var functionCall = Function.prototype.call;
+    var boundLength = max2(0, target.length - args.length);
+    var boundArgs = [];
+    for (var i2 = 0; i2 < boundLength; i2++) {
+      boundArgs[i2] = "$" + i2;
+    }
+    bound = Function("binder", "return function (" + joiny(boundArgs, ",") + "){ return binder.apply(this,arguments); }")(binder);
+    if (target.prototype) {
+      var Empty = function Empty2() {
+      };
+      Empty.prototype = target.prototype;
+      bound.prototype = new Empty();
+      Empty.prototype = null;
+    }
+    return bound;
+  };
+  return implementation;
+}
+var functionBind;
+var hasRequiredFunctionBind;
+function requireFunctionBind() {
+  if (hasRequiredFunctionBind) return functionBind;
+  hasRequiredFunctionBind = 1;
+  var implementation2 = requireImplementation();
+  functionBind = Function.prototype.bind || implementation2;
+  return functionBind;
+}
+var functionCall;
+var hasRequiredFunctionCall;
+function requireFunctionCall() {
+  if (hasRequiredFunctionCall) return functionCall;
+  hasRequiredFunctionCall = 1;
+  functionCall = Function.prototype.call;
+  return functionCall;
+}
 var functionApply;
 var hasRequiredFunctionApply;
 function requireFunctionApply() {
@@ -12901,14 +12934,14 @@ function requireFunctionApply() {
   return functionApply;
 }
 var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
-var bind$2 = functionBind;
+var bind$2 = requireFunctionBind();
 var $apply$1 = requireFunctionApply();
-var $call$2 = functionCall;
+var $call$2 = requireFunctionCall();
 var $reflectApply = reflectApply;
 var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
-var bind$1 = functionBind;
+var bind$1 = requireFunctionBind();
 var $TypeError$4 = type;
-var $call$1 = functionCall;
+var $call$1 = requireFunctionCall();
 var $actualApply = actualApply;
 var callBindApplyHelpers = function callBindBasic(args) {
   if (args.length < 1 || typeof args[0] !== "function") {
@@ -12974,8 +13007,8 @@ function requireHasown() {
   hasRequiredHasown = 1;
   var call = Function.prototype.call;
   var $hasOwn = Object.prototype.hasOwnProperty;
-  var bind3 = functionBind;
-  hasown = bind3.call(call, $hasOwn);
+  var bind2 = requireFunctionBind();
+  hasown = bind2.call(call, $hasOwn);
   return hasown;
 }
 var undefined$1;
@@ -12989,7 +13022,7 @@ var $TypeError$3 = type;
 var $URIError = uri;
 var abs = abs$1;
 var floor = floor$1;
-var max = max$2;
+var max = max$1;
 var min = min$1;
 var pow = pow$1;
 var round$1 = round$2;
@@ -13023,7 +13056,7 @@ var getProto = requireGetProto();
 var $ObjectGPO = requireObject_getPrototypeOf();
 var $ReflectGPO = requireReflect_getPrototypeOf();
 var $apply = requireFunctionApply();
-var $call = functionCall;
+var $call = requireFunctionCall();
 var needsEval = {};
 var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
 var INTRINSICS = {
@@ -13194,13 +13227,13 @@ var LEGACY_ALIASES = {
   "%WeakMapPrototype%": ["WeakMap", "prototype"],
   "%WeakSetPrototype%": ["WeakSet", "prototype"]
 };
-var bind2 = functionBind;
+var bind = requireFunctionBind();
 var hasOwn = requireHasown();
-var $concat = bind2.call($call, Array.prototype.concat);
-var $spliceApply = bind2.call($apply, Array.prototype.splice);
-var $replace = bind2.call($call, String.prototype.replace);
-var $strSlice = bind2.call($call, String.prototype.slice);
-var $exec = bind2.call($call, RegExp.prototype.exec);
+var $concat = bind.call($call, Array.prototype.concat);
+var $spliceApply = bind.call($apply, Array.prototype.splice);
+var $replace = bind.call($call, String.prototype.replace);
+var $strSlice = bind.call($call, String.prototype.slice);
+var $exec = bind.call($call, RegExp.prototype.exec);
 var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;
 var reEscapeChar = /\\(\\)?/g;
 var stringToPath = function stringToPath2(string2) {
@@ -29947,8 +29980,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) {
@@ -30003,69 +30041,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.2",
+  "version": "1.10.0",
   "type": "module",
   "description": "Heycater embedded qualification funnel widget",
   "main": "dist/index.cjs.js",