@heycater/qualification-funnel 1.19.33 → 1.19.35

package/dist/index.esm.js

@@ -30597,7 +30597,7 @@ const EVENT_TYPE_TO_ICON = {
   party: "drinks",
   meeting: "fingerfood",
   conference: "buffet",
-  workshop: "street_food",
+  workshop: "fine_dining",
   other: null
 };
 const EventTypeTiles = ({
@@ -33242,33 +33242,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(
   ({
@@ -33284,7 +33334,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: "",
@@ -33385,6 +33435,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(
@@ -33531,6 +33584,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.33",
+  "version": "1.19.35",
   "type": "module",
   "description": "Heycater embedded qualification funnel widget",
   "main": "dist/index.cjs.js",