@heycater/qualification-funnel 1.19.34 → 1.19.36

package/dist/index.esm.js

@@ -13325,7 +13325,14 @@ function requireFunctionBind() {
   functionBind = Function.prototype.bind || implementation2;
   return functionBind;
 }
-var functionCall = Function.prototype.call;
+var functionCall;
+var hasRequiredFunctionCall;
+function requireFunctionCall() {
+  if (hasRequiredFunctionCall) return functionCall;
+  hasRequiredFunctionCall = 1;
+  functionCall = Function.prototype.call;
+  return functionCall;
+}
 var functionApply;
 var hasRequiredFunctionApply;
 function requireFunctionApply() {
@@ -13337,12 +13344,12 @@ function requireFunctionApply() {
 var reflectApply = typeof Reflect !== "undefined" && Reflect && Reflect.apply;
 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 = 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") {
@@ -13457,7 +13464,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 = {
@@ -32582,6 +32589,7 @@ const RedesignedFunnel = ({
       const response = await submitAsNewCustomer(buildValues);
       const { signInToken, opportunity, isUkLead } = response || {};
       if (isUkLead) {
+        trackFormSubmitted(funnelContextRef.current);
         trackCompleted(funnelContextRef.current);
         setSubmittedData(formData);
         setPhase("done");
@@ -32594,6 +32602,7 @@ const RedesignedFunnel = ({
       }
       const accountUrl = signInToken ? `/${router.locale}/account/requests/${opportunity.id}?one_time_sign_in_token=${signInToken}` : `/${router.locale}/account/external/requests/${opportunity.id}`;
       setRedirectUrl(accountUrl);
+      trackFormSubmitted(funnelContextRef.current);
       trackCompleted(funnelContextRef.current);
       setSubmittedData(formData);
       setPhase("done");
@@ -33235,33 +33244,83 @@ function useAbandonmentTracking(funnelContextRef, state) {
   ]);
 }
 const FEATURE_FLAG_NAME = "qf_redesign_v1";
-function useFunnelVariant() {
-  const forceRedesign = typeof window !== "undefined" && window.location.search.includes("variant=redesign");
-  const [variant, setVariant] = useState(forceRedesign ? "redesign" : "control");
+const POSTHOG_POLL_INTERVAL_MS = 100;
+const POSTHOG_MAX_WAIT_MS = 5e3;
+function checkPostHogFlag() {
+  if (typeof window === "undefined") return null;
+  const posthog = window.posthog;
+  if (!(posthog == null ? void 0 : posthog.getFeatureFlag)) return null;
+  const flagValue = posthog.getFeatureFlag(FEATURE_FLAG_NAME);
+  if (flagValue === "redesign") return "redesign";
+  if (flagValue === "control") return "control";
+  return null;
+}
+function getUrlVariantOverride() {
+  if (typeof window === "undefined") return null;
+  const search = window.location.search;
+  if (search.includes("variant=redesign")) return "redesign";
+  if (search.includes("variant=control")) return "control";
+  return null;
+}
+function useFunnelVariantWithLoading() {
+  const urlOverride = getUrlVariantOverride();
+  const [result, setResult] = useState(() => {
+    if (urlOverride) {
+      return { variant: urlOverride, isLoading: false };
+    }
+    const initialFlag = checkPostHogFlag();
+    if (initialFlag !== null) {
+      return { variant: initialFlag, isLoading: false };
+    }
+    return { variant: "control", isLoading: true };
+  });
   useEffect(() => {
-    if (forceRedesign) {
-      setVariant("redesign");
+    if (urlOverride) {
+      setResult({ variant: urlOverride, isLoading: false });
       return;
     }
-    if (typeof window === "undefined" || !window.posthog) {
+    const flagValue = checkPostHogFlag();
+    if (flagValue !== null) {
+      setResult({ variant: flagValue, isLoading: false });
       return;
     }
-    const posthog = window.posthog;
-    const checkFlag = () => {
-      var _a2;
-      const flagValue = (_a2 = posthog.getFeatureFlag) == null ? void 0 : _a2.call(posthog, FEATURE_FLAG_NAME);
-      if (flagValue === "redesign") {
-        setVariant("redesign");
-      } else {
-        setVariant("control");
+    let resolved = false;
+    let timeoutId = null;
+    const startTime = Date.now();
+    const resolve = (variant) => {
+      if (resolved) return;
+      resolved = true;
+      if (timeoutId) clearTimeout(timeoutId);
+      setResult({ variant, isLoading: false });
+    };
+    const pollForPostHog = () => {
+      if (resolved) return;
+      const posthog = window.posthog;
+      const immediateFlag = checkPostHogFlag();
+      if (immediateFlag !== null) {
+        resolve(immediateFlag);
+        return;
+      }
+      if (posthog == null ? void 0 : posthog.onFeatureFlags) {
+        posthog.onFeatureFlags(() => {
+          const flag = checkPostHogFlag();
+          resolve(flag ?? "control");
+        });
+        return;
+      }
+      if (Date.now() - startTime >= POSTHOG_MAX_WAIT_MS) {
+        resolve("control");
+        return;
       }
+      timeoutId = setTimeout(pollForPostHog, POSTHOG_POLL_INTERVAL_MS);
     };
-    checkFlag();
-    if (posthog.onFeatureFlags) {
-      posthog.onFeatureFlags(checkFlag);
-    }
-  }, [forceRedesign]);
-  return variant;
+    pollForPostHog();
+    return () => {
+      resolved = true;
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [urlOverride]);
+  return result;
 }
 const EmbeddedFunnel = React__default.forwardRef(
   ({
@@ -33277,7 +33336,7 @@ const EmbeddedFunnel = React__default.forwardRef(
   }, ref2) => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const scrollHelperRef = useRef(null);
-    const funnelVariant = useFunnelVariant();
+    const { variant: funnelVariant, isLoading: variantLoading } = useFunnelVariantWithLoading();
     const { state, actions, canContinue } = useQualification({});
     const funnelContext = useRef({
       session_id: "",
@@ -33378,6 +33437,9 @@ const EmbeddedFunnel = React__default.forwardRef(
       return null;
     }
     const isFullscreen = mode === "fullscreen";
+    if (isFullscreen && variantLoading) {
+      return /* @__PURE__ */ jsx(VariantLoadingWrapper, { children: /* @__PURE__ */ jsx(SmallSpinner, {}) });
+    }
     const shouldUseRedesign = isFullscreen && funnelVariant === "redesign";
     if (shouldUseRedesign) {
       return /* @__PURE__ */ jsx(
@@ -33524,6 +33586,26 @@ const FormWrapper = styled.form`
     outline: none;
   }
 `;
+const VariantLoadingWrapper = styled.div`
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+`;
+const SmallSpinner = styled.div`
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #F95524;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
 var createBreakpoints$1 = {};
 var interopRequireDefault = { exports: {} };
 (function(module) {

package/package.json

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