@heycater/qualification-funnel 1.4.11 → 1.4.13

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";
@@ -11050,6 +11050,9 @@ function trackAnswerSelected(context, answer) {
   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,
@@ -11065,6 +11068,9 @@ function trackFormSubmitted(context, metadata) {
   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,
@@ -11079,6 +11085,9 @@ function trackCompleted(context) {
   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,
@@ -11133,6 +11142,7 @@ function TrackingProvider({
         const serviceType = value;
         if (serviceType) {
           const stepOrder = getStepOrderForServiceType(serviceType);
+          delete funnelContextRef.current.city;
           updateContext({
             service_type: serviceType,
             total_steps: stepOrder.length
@@ -11151,18 +11161,21 @@ function TrackingProvider({
     },
     [funnelContextRef, currentStepId, state, updateContext]
   );
-  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value: { funnelContext: funnelContextRef.current, 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: () => {
       }
@@ -12258,7 +12271,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(obj), 8, -1) : protoTag ? "Object" : "";
+    var stringTag2 = !isPlainObject2 && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr$1(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) {
@@ -12283,25 +12296,25 @@ function canTrustToString(obj) {
   return !toStringTag || !(typeof obj === "object" && (toStringTag in obj || typeof obj[toStringTag] !== "undefined"));
 }
 function isArray$3(obj) {
-  return toStr(obj) === "[object Array]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object Array]" && canTrustToString(obj);
 }
 function isDate(obj) {
-  return toStr(obj) === "[object Date]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object Date]" && canTrustToString(obj);
 }
 function isRegExp$1(obj) {
-  return toStr(obj) === "[object RegExp]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object RegExp]" && canTrustToString(obj);
 }
 function isError(obj) {
-  return toStr(obj) === "[object Error]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object Error]" && canTrustToString(obj);
 }
 function isString(obj) {
-  return toStr(obj) === "[object String]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object String]" && canTrustToString(obj);
 }
 function isNumber(obj) {
-  return toStr(obj) === "[object Number]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object Number]" && canTrustToString(obj);
 }
 function isBoolean(obj) {
-  return toStr(obj) === "[object Boolean]" && canTrustToString(obj);
+  return toStr$1(obj) === "[object Boolean]" && canTrustToString(obj);
 }
 function isSymbol(obj) {
   if (hasShammedSymbols) {
@@ -12337,7 +12350,7 @@ var hasOwn$1 = Object.prototype.hasOwnProperty || function(key) {
 function has$4(obj, key) {
   return hasOwn$1.call(obj, key);
 }
-function toStr(obj) {
+function toStr$1(obj) {
   return objectToString.call(obj);
 }
 function nameOf(f) {
@@ -12646,7 +12659,7 @@ var syntax = SyntaxError;
 var uri = URIError;
 var abs$1 = Math.abs;
 var floor$1 = Math.floor;
-var max$1 = Math.max;
+var max$2 = Math.max;
 var min$1 = Math.min;
 var pow$1 = Math.pow;
 var round$2 = Math.round;
@@ -12775,99 +12788,78 @@ function requireObject_getPrototypeOf() {
   Object_getPrototypeOf = $Object2.getPrototypeOf || null;
   return Object_getPrototypeOf;
 }
-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];
-    }
-    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];
+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;
     }
-    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 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;
       }
+      return this;
     }
-    return str;
+    return target.apply(
+      that,
+      concatty(args, arguments)
+    );
   };
-  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)
-      );
+  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() {
     };
-    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;
-}
+    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 functionApply;
 var hasRequiredFunctionApply;
 function requireFunctionApply() {
@@ -12877,14 +12869,14 @@ function requireFunctionApply() {
   return functionApply;
 }
 var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
-var bind$2 = requireFunctionBind();
+var bind$2 = functionBind;
 var $apply$1 = requireFunctionApply();
-var $call$2 = requireFunctionCall();
+var $call$2 = functionCall;
 var $reflectApply = reflectApply;
 var actualApply = $reflectApply || bind$2.call($call$2, $apply$1);
-var bind$1 = requireFunctionBind();
+var bind$1 = functionBind;
 var $TypeError$4 = type;
-var $call$1 = requireFunctionCall();
+var $call$1 = functionCall;
 var $actualApply = actualApply;
 var callBindApplyHelpers = function callBindBasic(args) {
   if (args.length < 1 || typeof args[0] !== "function") {
@@ -12950,8 +12942,8 @@ function requireHasown() {
   hasRequiredHasown = 1;
   var call = Function.prototype.call;
   var $hasOwn = Object.prototype.hasOwnProperty;
-  var bind2 = requireFunctionBind();
-  hasown = bind2.call(call, $hasOwn);
+  var bind3 = functionBind;
+  hasown = bind3.call(call, $hasOwn);
   return hasown;
 }
 var undefined$1;
@@ -12965,7 +12957,7 @@ var $TypeError$3 = type;
 var $URIError = uri;
 var abs = abs$1;
 var floor = floor$1;
-var max = max$1;
+var max = max$2;
 var min = min$1;
 var pow = pow$1;
 var round$1 = round$2;
@@ -12999,7 +12991,7 @@ var getProto = requireGetProto();
 var $ObjectGPO = requireObject_getPrototypeOf();
 var $ReflectGPO = requireReflect_getPrototypeOf();
 var $apply = requireFunctionApply();
-var $call = requireFunctionCall();
+var $call = functionCall;
 var needsEval = {};
 var TypedArray = typeof Uint8Array === "undefined" || !getProto ? undefined$1 : getProto(Uint8Array);
 var INTRINSICS = {
@@ -13170,13 +13162,13 @@ var LEGACY_ALIASES = {
   "%WeakMapPrototype%": ["WeakMap", "prototype"],
   "%WeakSetPrototype%": ["WeakSet", "prototype"]
 };
-var bind = requireFunctionBind();
+var bind2 = functionBind;
 var hasOwn = requireHasown();
-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 $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 rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;
 var reEscapeChar = /\\(\\)?/g;
 var stringToPath = function stringToPath2(string2) {
@@ -26660,7 +26652,7 @@ function RequestForm({ header = null }) {
     }
     handleDeliveryAddressChange();
   }, [deliveryAddress]);
-  const { funnelContext } = useTracking();
+  const { funnelContextRef } = useTracking();
   const handleSubmit = async (values2) => {
     var _a3;
     handleDisableCTA(true);
@@ -26676,10 +26668,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 +26698,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 +29783,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 +29803,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 +29824,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(
@@ -29872,7 +29863,7 @@ const EmbeddedFunnel = React__default.forwardRef(
     useEffect(() => {
       cleanupOldTrackingSessions();
     }, []);
-    useEffect(() => {
+    useLayoutEffect(() => {
       var _a3, _b2, _c2;
       if (!("qualification" in state)) return;
       const sessionId = ((_a3 = state.qualification.sessionInfo) == null ? void 0 : _a3.sessionId) || "";
@@ -29889,11 +29880,13 @@ const EmbeddedFunnel = React__default.forwardRef(
         } catch (e2) {
         }
       }
+      const shouldRestoreCity = (restoredContext == null ? void 0 : restoredContext.service_type) === serviceType;
+      const cityToUse = city || (shouldRestoreCity ? restoredContext == null ? void 0 : restoredContext.city : void 0);
       updateContext({
         session_id: sessionId,
         total_steps: totalSteps,
         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 } : {}
+        ...cityToUse ? { city: cityToUse } : {}
       });
     }, [
       "qualification" in state ? (_a2 = state.qualification.sessionInfo) == null ? void 0 : _a2.sessionId : null,
@@ -29911,7 +29904,7 @@ const EmbeddedFunnel = React__default.forwardRef(
         });
       }
     }, [state.status]);
-    useAbandonmentTracking(funnelContext.current, state);
+    useAbandonmentTracking(funnelContext, state);
     const toNextStep2 = useCallback(() => {
       actions.nextStep();
     }, [actions]);
@@ -29936,7 +29929,15 @@ const EmbeddedFunnel = React__default.forwardRef(
       }
     };
     if (state.status === QUALIFICATION_STATUS.qualifiedForRequest) {
-      return /* @__PURE__ */ jsx(EmbeddedRequestPage, { ratings });
+      return /* @__PURE__ */ jsx(
+        TrackingProvider,
+        {
+          funnelContextRef: funnelContext,
+          updateContext,
+          currentStepId: stepId,
+          children: /* @__PURE__ */ jsx(EmbeddedRequestPage, { ratings })
+        }
+      );
     }
     let textColor = onBackground === "light" ? "dark" : "light";
     if (stepId.includes("customer-") && ((_e = slides == null ? void 0 : slides.customerTier) == null ? void 0 : _e.whiteWrapper)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycater/qualification-funnel",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "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"
   }
 }