@bikdotai/bik-component-library 0.0.857-beta.0 → 0.0.857-beta.2

package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js

@@ -1,44 +1,44 @@
-import { jsxs as je, Fragment as Ee, jsx as C } from "react/jsx-runtime";
-import { useState as u, useEffect as P, useCallback as S } from "react";
-import ce, { ACTIONS as pe } from "react-joyride";
-import oe from "./MajorUpdatePopup.js";
-import ne from "./MinorUpdatePopup.js";
-import { VideoModal as Ne } from "./VideoModal.js";
-import { useFeatureAnnouncements as Pe } from "./hooks/useFeatureAnnouncements.js";
-import { SELECTORS as We } from "./constants/selectors.js";
-const $e = ({
-  children: fe,
-  fetchVisibleFeatures: me,
-  getStoreFeatureProgress: ge,
-  fetchFeatureById: he,
-  markFeatureAsViewedForStore: be,
-  isFeatureApplicableToCurrentPage: ye,
-  module: xe,
-  router: W,
-  storeId: E,
-  onAnnouncementShown: re,
-  onAnnouncementInteracted: L
+import { jsxs as Et, Fragment as Pt, jsx as B } from "react/jsx-runtime";
+import { useState as p, useEffect as O, useCallback as x } from "react";
+import mt, { ACTIONS as ft } from "react-joyride";
+import at from "./MajorUpdatePopup.js";
+import rt from "./MinorUpdatePopup.js";
+import { VideoModal as Vt } from "./VideoModal.js";
+import { useFeatureAnnouncements as Wt } from "./hooks/useFeatureAnnouncements.js";
+import { SELECTORS as Ot } from "./constants/selectors.js";
+const At = ({
+  children: gt,
+  fetchVisibleFeatures: yt,
+  getStoreFeatureProgress: bt,
+  fetchFeatureById: ht,
+  markFeatureAsViewedForStore: xt,
+  isFeatureApplicableToCurrentPage: St,
+  module: kt,
+  router: L,
+  storeId: m,
+  onAnnouncementShown: $,
+  onAnnouncementInteracted: y
 }) => {
   const {
-    majorUpdateFeatures: s,
-    minorUpdateFeatures: I,
-    isLoading: T,
-    markFeatureAsViewed: p
-  } = Pe({
-    fetchVisibleFeatures: me,
-    getStoreFeatureProgress: ge,
-    fetchFeatureById: he,
-    markFeatureAsViewedForStore: be,
-    isFeatureApplicableToCurrentPage: ye,
-    module: xe,
-    router: W
-  }), [m, B] = u(null), [l, w] = u(null), [O, v] = u(!1), [ae, k] = u([]), [Se, J] = u(!1), [se, U] = u([]), [ie, M] = u(!1), [h, b] = u(!1), [d, q] = u([]), [y, F] = u(!1), [x, j] = u(!1), [we, $] = u(!1), [ke, z] = u(""), [R, K] = u(!1), [Ce, _] = u(!1), [le, A] = u(!1), [Te, Me] = u(0), [Fe, Ie] = u(0), [N, Q] = u(
+    majorUpdateFeatures: r,
+    minorUpdateFeatures: P,
+    isLoading: F,
+    markFeatureAsViewed: u
+  } = Wt({
+    fetchVisibleFeatures: yt,
+    getStoreFeatureProgress: bt,
+    fetchFeatureById: ht,
+    markFeatureAsViewedForStore: xt,
+    isFeatureApplicableToCurrentPage: St,
+    module: kt,
+    router: L
+  }), [b, v] = p(null), [s, S] = p(null), [J, I] = p(!1), [st, k] = p([]), [wt, V] = p(!1), [lt, j] = p([]), [dt, w] = p(!1), [C, h] = p(!1), [l, z] = p([]), [T, M] = p(!1), [U, N] = p(!1), [Ct, q] = p(!1), [Tt, R] = p(""), [K, _] = p(!1), [Ut, A] = p(!1), [ct, Q] = p(!1), [Mt, Bt] = p(0), [Ft, vt] = p(0), [E, Z] = p(
     /* @__PURE__ */ new Set()
   );
-  P(() => {
-    const e = "minor-spotlight-cutout-style";
-    let o = document.getElementById(e);
-    return o || (o = document.createElement("style"), o.id = e, document.head.appendChild(o)), o.textContent = `
+  O(() => {
+    const t = "minor-spotlight-cutout-style";
+    let o = document.getElementById(t);
+    return o || (o = document.createElement("style"), o.id = t, document.head.appendChild(o)), o.textContent = `
 			.react-joyride__spotlight {
 				transition: box-shadow 0.3s ease-in-out !important;
 				will-change: box-shadow, transform;
@@ -53,131 +53,132 @@ const $e = ({
 				left: auto !important;
 			}
 		`, () => {
-      const n = document.getElementById(e);
+      const n = document.getElementById(t);
       n && n.remove();
     };
-  }, []), P(() => {
-    Me((e) => e + 1), Ie((e) => e + 1), _(!1), A(!1), Q(/* @__PURE__ */ new Set());
-  }, [W?.pathname]), P(() => {
-    if (s.length > 0 && !m && !T && !ie && !R) {
-      j(!1), F(!1), v(!1), k([]), w(null), q([]);
-      let e = 0;
+  }, []), O(() => {
+    Bt((t) => t + 1), vt((t) => t + 1), A(!1), Q(!1), Z(/* @__PURE__ */ new Set());
+  }, [L?.pathname]), O(() => {
+    if (r.length > 0 && !b && !F && !dt && !K) {
+      N(!1), M(!1), I(!1), k([]), S(null), z([]);
+      let t = 0;
       const o = 10, n = () => {
-        e++, document.querySelector(
+        t++, document.querySelector(
           '[data-testid="whats-new-button"]'
-        ) ? de(s[0]) : e < o ? setTimeout(n, 1e3) : j(!0);
+        ) ? ut(r[0]) : t < o ? setTimeout(n, 1e3) : N(!0);
       };
       n();
-    } else s.length === 0 && !T && j(!0);
+    } else r.length === 0 && !F && N(!0);
   }, [
-    s,
-    m,
-    T,
-    ie,
-    R
-  ]), P(() => {
-    const e = W?.query?.featureId;
-    if (!e || T || I.length === 0)
+    r,
+    b,
+    F,
+    dt,
+    K
+  ]), O(() => {
+    const t = L?.query?.featureId;
+    if (!t || F || P.length === 0)
       return;
-    const o = I.find(
-      (a) => a.id === e
+    const o = P.find(
+      (a) => a.id === t
     );
     if (!o || !o.featureTag)
       return;
-    F(!0), b(!0);
+    M(!0), h(!0);
     let n = 0;
-    const t = 25, r = setInterval(() => {
+    const e = 25, i = setInterval(() => {
       n++;
       const a = o.featureTag.startsWith("#") || o.featureTag.startsWith(".") || o.featureTag.startsWith("[") ? o.featureTag : `#${o.featureTag}`;
       if (document.querySelector(a)) {
         const c = [o];
-        q(c), V(o, c), clearInterval(r);
-      } else n >= t && (b(!1), clearInterval(r));
+        z(c), W(o, c), clearInterval(i);
+      } else n >= e && (h(!1), clearInterval(i));
     }, 200);
     return () => {
-      clearInterval(r);
+      clearInterval(i);
     };
-  }, [I, W?.query?.featureId, T]), P(() => {
-    if (I.length > 0 && !T && !O && !h && !l && !y && x && !R) {
-      let e = null, o = null, n = null, t = !1;
-      const r = () => {
-        if (t || h || l || y || !x)
+  }, [P, L?.query?.featureId, F]), O(() => {
+    if (P.length > 0 && !F && !J && !C && !s && !T && U && !K) {
+      let t = null, o = null, n = null, e = !1;
+      const i = () => {
+        if (e || C || s || T || !U)
           return;
-        const a = I.filter((i) => {
-          if (!i.featureTag || i.featureTag.trim() === "" || N.has(i.id))
+        const a = P.filter((d) => {
+          if (!d.featureTag || d.featureTag.trim() === "" || E.has(d.id))
             return !1;
-          const c = i.featureTag.startsWith("#") || i.featureTag.startsWith(".") || i.featureTag.startsWith("[") ? i.featureTag : `#${i.featureTag}`;
+          const c = d.featureTag.startsWith("#") || d.featureTag.startsWith(".") || d.featureTag.startsWith("[") ? d.featureTag : `#${d.featureTag}`;
           return document.querySelector(c) !== null;
         });
-        a.length > 0 && (q(a), V(a[0], a), e && (e.disconnect(), e = null), o && (window.removeEventListener("scroll", o), o = null), n && (clearTimeout(n), n = null));
+        a.length > 0 && (z(a), W(a[0], a), t && (t.disconnect(), t = null), o && (window.removeEventListener("scroll", o), o = null), n && (clearTimeout(n), n = null));
       };
-      return e = new MutationObserver((a) => {
-        let i = !1;
+      return t = new MutationObserver((a) => {
+        let d = !1;
         for (const c of a) {
           if (c.type === "childList" && c.addedNodes.length > 0)
-            for (let f = 0; f < c.addedNodes.length; f++) {
-              const g = c.addedNodes[f];
-              if (g.nodeType === Node.ELEMENT_NODE) {
-                const ue = g;
-                if (ue.id || ue.querySelector("[id]")) {
-                  i = !0;
+            for (let g = 0; g < c.addedNodes.length; g++) {
+              const f = c.addedNodes[g];
+              if (f.nodeType === Node.ELEMENT_NODE) {
+                const pt = f;
+                if (pt.id || pt.querySelector("[id]")) {
+                  d = !0;
                   break;
                 }
               }
             }
-          if (i) break;
+          if (d) break;
         }
-        !O && !t && !h && !l && !y && x && i && (n && clearTimeout(n), n = setTimeout(() => {
-          !t && !h && !l && !y && x && r();
+        !J && !e && !C && !s && !T && U && d && (n && clearTimeout(n), n = setTimeout(() => {
+          !e && !C && !s && !T && U && i();
         }, 200));
       }), o = () => {
-        !O && !t && !h && !l && !y && x && (n && clearTimeout(n), requestAnimationFrame(() => {
+        !J && !e && !C && !s && !T && U && (n && clearTimeout(n), requestAnimationFrame(() => {
           n = setTimeout(() => {
-            !t && !h && !l && !y && x && r();
+            !e && !C && !s && !T && U && i();
           }, 300);
         }));
-      }, e && e.observe(document.body, {
+      }, t && t.observe(document.body, {
         childList: !0,
         subtree: !0
-      }), o && window.addEventListener("scroll", o, { passive: !0 }), r(), setTimeout(() => {
-        !t && !h && !l && !y && x && r();
+      }), o && window.addEventListener("scroll", o, { passive: !0 }), i(), setTimeout(() => {
+        !e && !C && !s && !T && U && i();
       }, 100), setTimeout(() => {
-        !t && !h && !l && !y && x && r();
+        !e && !C && !s && !T && U && i();
       }, 1e3), setTimeout(() => {
-        !t && !h && !l && !y && x && r();
+        !e && !C && !s && !T && U && i();
       }, 500), () => {
-        t = !0, e && e.disconnect(), o && window.removeEventListener("scroll", o), n && clearTimeout(n);
+        e = !0, t && t.disconnect(), o && window.removeEventListener("scroll", o), n && clearTimeout(n);
       };
-    } else (I.length === 0 || T) && (W?.query?.featureId && l || (v(!1), k([]), w(null), q([]), F(!1)));
+    } else (P.length === 0 || F) && (L?.query?.featureId && s || (I(!1), k([]), S(null), z([]), M(!1)));
   }, [
-    I,
+    P,
+    F,
+    J,
+    C,
+    s,
     T,
-    O,
-    h,
-    l,
-    y,
-    x,
-    p,
-    R
+    U,
+    u,
+    K
   ]);
-  const de = (e) => {
-    B(e);
-    const o = s.findIndex(
-      (r) => r.id === e.id
-    ), n = s.length, t = [
+  const ut = (t) => {
+    v(t);
+    const o = r.findIndex(
+      (i) => i.id === t.id
+    ), n = r.length, e = [
       {
-        target: We.WHATS_NEW_BUTTON,
-        content: /* @__PURE__ */ C(
-          oe,
+        target: Ot.WHATS_NEW_BUTTON,
+        content: /* @__PURE__ */ B(
+          at,
           {
-            feature: e,
+            feature: t,
             currentIndex: o,
             totalFeatures: n,
-            onSkip: () => Z(e),
-            onExplore: (r) => D(e, r),
-            onPrevious: () => H(e),
-            onNext: () => X(e),
-            setIsClosing: _
+            onSkip: () => D(t),
+            onExplore: (i) => H(t, i),
+            onSecondaryAction: (i) => X(t, i),
+            onPrevious: () => G(t),
+            onNext: () => Y(t),
+            setIsClosing: A
           }
         ),
         placement: "bottom-start",
@@ -187,7 +188,7 @@ const $e = ({
         hideSkipButton: !0,
         hideFooter: !0,
         offset: 0,
-        data: { feature: e, isMajor: !0 },
+        data: { feature: t, isMajor: !0 },
         styles: {
           tooltip: {
             padding: 0,
@@ -215,22 +216,22 @@ const $e = ({
         }
       }
     ];
-    U(t), J(!0), re && E && re({
-      storeId: E,
-      announcementId: e.id,
-      announcementTitle: e.title,
-      imageUrl: e.displayImage || e.image,
-      videoUrl: e.productVideo
+    j(e), V(!0), $ && m && $({
+      storeId: m,
+      announcementId: t.id,
+      announcementTitle: t.title,
+      imageUrl: t.displayImage || t.image,
+      videoUrl: t.productVideo
     });
-  }, Z = S(
-    async (e) => {
-      const o = e || m;
-      o && (M(!0), await Promise.all(
-        s.map(
-          (n) => p(n.id)
+  }, D = x(
+    async (t) => {
+      const o = t || b;
+      o && (w(!0), await Promise.all(
+        r.map(
+          (n) => u(n.id)
         )
-      ), J(!1), B(null), U([]), j(!0), L && E && L({
-        storeId: E,
+      ), V(!1), v(null), j([]), N(!0), y && m && y({
+        storeId: m,
         announcementId: o.id,
         announcementTitle: o.title,
         imageUrl: o.displayImage || o.image,
@@ -239,60 +240,81 @@ const $e = ({
         buttonName: "Skip",
         buttonUrl: void 0
       }), setTimeout(() => {
-        M(!1);
+        w(!1);
       }, 500));
     },
-    [m, s, p]
-  ), D = S(
-    async (e, o) => {
-      M(!0), await p(e.id);
-      const n = o ?? e.primaryButton?.action;
-      if (n === "Play Video" && e.productVideo && (z(e.productVideo), $(!0), K(!0)), n === "Open link") {
-        const a = e.primaryButton?.redirectionUrl || e.redirectUrl;
+    [b, r, u]
+  ), H = x(
+    async (t, o) => {
+      w(!0), await u(t.id);
+      const n = o ?? t.primaryButton?.action;
+      if (n === "Play Video" && t.productVideo && (R(t.productVideo), q(!0), _(!0)), n === "Open link") {
+        const a = t.primaryButton?.redirectionUrl || t.redirectUrl;
         a && !a.startsWith("http") && (window.location.href = a);
       }
-      J(!1), B(null), U([]), s.findIndex(
-        (a) => a.id === e.id
-      ) === s.length - 1 && j(!0), L && E && L({
-        storeId: E,
-        announcementId: e.id,
-        announcementTitle: e.title,
-        imageUrl: e.displayImage || e.image,
-        videoUrl: e.productVideo,
+      V(!1), v(null), j([]), r.findIndex(
+        (a) => a.id === t.id
+      ) === r.length - 1 && N(!0), y && m && y({
+        storeId: m,
+        announcementId: t.id,
+        announcementTitle: t.title,
+        imageUrl: t.displayImage || t.image,
+        videoUrl: t.productVideo,
         buttonClicked: "Primary",
-        buttonName: e.buttonText || "Explore",
-        buttonUrl: e.redirectUrl || e.productVideo
+        // Mirrors the rendered button and the navigation target, which both
+        // prefer primaryButton over the legacy top-level fields.
+        buttonName: t.primaryButton?.text || t.buttonText || "Explore",
+        buttonUrl: t.primaryButton?.redirectionUrl || t.redirectUrl || t.productVideo
+      }), setTimeout(() => {
+        w(!1);
+      }, 500);
+    },
+    [r, u]
+  ), X = x(
+    async (t, o) => {
+      w(!0), await u(t.id), (o ?? t.secondaryButton?.action) === "Play Video" && t.productVideo && (R(t.productVideo), q(!0), _(!0)), V(!1), v(null), j([]), r.findIndex(
+        (a) => a.id === t.id
+      ) === r.length - 1 && N(!0), y && m && y({
+        storeId: m,
+        announcementId: t.id,
+        announcementTitle: t.title,
+        imageUrl: t.displayImage || t.image,
+        videoUrl: t.productVideo,
+        buttonClicked: "Secondary",
+        buttonName: t.secondaryButton?.text || "Secondary",
+        buttonUrl: t.secondaryButton?.redirectionUrl
       }), setTimeout(() => {
-        M(!1);
+        w(!1);
       }, 500);
     },
-    [s, p]
-  ), H = S(
-    (e) => {
-      const o = e || m;
+    [r, u]
+  ), G = x(
+    (t) => {
+      const o = t || b;
       if (!o)
         return;
-      const n = s.findIndex(
-        (t) => t.id === o.id
+      const n = r.findIndex(
+        (e) => e.id === o.id
       );
       if (n > 0) {
-        const t = s[n - 1];
-        B(t);
-        const r = n - 1, a = s.length;
-        U([
+        const e = r[n - 1];
+        v(e);
+        const i = n - 1, a = r.length;
+        j([
           {
             target: '[data-testid="whats-new-button"]',
-            content: /* @__PURE__ */ C(
-              oe,
+            content: /* @__PURE__ */ B(
+              at,
               {
-                feature: t,
-                currentIndex: r,
+                feature: e,
+                currentIndex: i,
                 totalFeatures: a,
-                onSkip: () => Z(t),
-                onExplore: (c) => D(t, c),
-                onPrevious: () => H(t),
-                onNext: () => X(t),
-                setIsClosing: _
+                onSkip: () => D(e),
+                onExplore: (c) => H(e, c),
+                onSecondaryAction: (c) => X(e, c),
+                onPrevious: () => G(e),
+                onNext: () => Y(e),
+                setIsClosing: A
               }
             ),
             placement: "bottom-start",
@@ -302,7 +324,7 @@ const $e = ({
             hideSkipButton: !0,
             hideFooter: !0,
             offset: 0,
-            data: { feature: t, isMajor: !0 },
+            data: { feature: e, isMajor: !0 },
             styles: {
               tooltip: {
                 padding: 0,
@@ -332,33 +354,34 @@ const $e = ({
         ]);
       }
     },
-    [m, s]
-  ), X = S(
-    (e) => {
-      const o = e || m;
+    [b, r]
+  ), Y = x(
+    (t) => {
+      const o = t || b;
       if (!o)
         return;
-      const n = s.findIndex(
-        (t) => t.id === o.id
+      const n = r.findIndex(
+        (e) => e.id === o.id
       );
-      if (n < s.length - 1) {
-        const t = s[n + 1];
-        B(t);
-        const r = n + 1, a = s.length;
-        U([
+      if (n < r.length - 1) {
+        const e = r[n + 1];
+        v(e);
+        const i = n + 1, a = r.length;
+        j([
           {
             target: '[data-testid="whats-new-button"]',
-            content: /* @__PURE__ */ C(
-              oe,
+            content: /* @__PURE__ */ B(
+              at,
               {
-                feature: t,
-                currentIndex: r,
+                feature: e,
+                currentIndex: i,
                 totalFeatures: a,
-                onSkip: () => Z(t),
-                onExplore: (c) => D(t, c),
-                onPrevious: () => H(t),
-                onNext: () => X(t),
-                setIsClosing: _
+                onSkip: () => D(e),
+                onExplore: (c) => H(e, c),
+                onSecondaryAction: (c) => X(e, c),
+                onPrevious: () => G(e),
+                onNext: () => Y(e),
+                setIsClosing: A
               }
             ),
             placement: "bottom-start",
@@ -368,7 +391,7 @@ const $e = ({
             hideSkipButton: !0,
             hideFooter: !0,
             offset: 0,
-            data: { feature: t, isMajor: !0 },
+            data: { feature: e, isMajor: !0 },
             styles: {
               tooltip: {
                 padding: 0,
@@ -397,62 +420,72 @@ const $e = ({
           }
         ]);
       } else
-        M(!0), p(o.id), J(!1), B(null), U([]), j(!0), setTimeout(() => {
-          M(!1);
+        w(!0), u(o.id), V(!1), v(null), j([]), N(!0), setTimeout(() => {
+          w(!1);
         }, 500);
     },
-    [m, s, p]
-  ), Be = () => {
-    s.length > 0 && !m && document.querySelector(
+    [b, r, u]
+  ), It = () => {
+    r.length > 0 && !b && document.querySelector(
       '[data-testid="whats-new-button"]'
-    ) && de(s[0]);
+    ) && ut(r[0]);
   };
-  P(() => (window.showMajorUpdatePopup = Be, () => {
+  O(() => (window.showMajorUpdatePopup = It, () => {
     delete window.showMajorUpdatePopup;
-  }), [s, m]);
-  const ve = S(
-    (e) => {
-      const { action: o } = e;
-      o === pe.CLOSE && (m && (M(!0), s.forEach((n) => {
-        p(n.id);
-      }), j(!0), setTimeout(() => {
-        M(!1);
-      }, 500)), J(!1), B(null), U([]));
+  }), [r, b]);
+  const jt = x(
+    (t) => {
+      const { action: o } = t;
+      o === ft.CLOSE && (b && (w(!0), r.forEach((n) => {
+        u(n.id);
+      }), N(!0), setTimeout(() => {
+        w(!1);
+      }, 500)), V(!1), v(null), j([]));
     },
-    [m, s, p]
-  ), Ue = S(
-    (e) => {
-      const { action: o } = e;
-      o === pe.CLOSE && (l && (b(!0), p(l.id), d.findIndex(
-        (r) => r.id === l.id
-      ) === d.length - 1 && F(!0), setTimeout(() => {
-        b(!1);
-      }, 500)), v(!1), w(null), k([]));
+    [b, r, u]
+  ), Nt = x(
+    (t) => {
+      const { action: o } = t;
+      o === ft.CLOSE && (s && (h(!0), u(s.id), l.findIndex(
+        (i) => i.id === s.id
+      ) === l.length - 1 && M(!0), y && m && y({
+        storeId: m,
+        announcementId: s.id,
+        announcementTitle: s.title,
+        imageUrl: s.displayImage || s.image,
+        videoUrl: s.productVideo,
+        buttonClicked: "Skip",
+        buttonName: "Skip",
+        buttonUrl: void 0
+      }), setTimeout(() => {
+        h(!1);
+      }, 500)), I(!1), S(null), k([]));
     },
-    [l, d, p]
-  ), V = async (e, o) => {
-    w(e);
-    const n = o || d, t = n.findIndex((f) => f.id === e.id), r = n.length, a = e.featureTag.startsWith("#") || e.featureTag.startsWith(".") || e.featureTag.startsWith("[") ? e.featureTag : `#${e.featureTag}`, i = document.querySelector(a);
-    if (i)
+    [s, l, u]
+  ), W = async (t, o) => {
+    S(t);
+    const n = o || l, e = n.findIndex((g) => g.id === t.id), i = n.length, a = t.featureTag.startsWith("#") || t.featureTag.startsWith(".") || t.featureTag.startsWith("[") ? t.featureTag : `#${t.featureTag}`, d = document.querySelector(a);
+    if (d)
       try {
-        const { scrollToElementSmooth: f } = await import("./utils/elementHelpers.js");
-        await f(i, 120);
+        const { scrollToElementSmooth: g } = await import("./utils/elementHelpers.js");
+        await g(d, 120);
       } catch {
       }
     k([
       {
         target: a,
-        content: /* @__PURE__ */ C(
-          ne,
+        content: /* @__PURE__ */ B(
+          rt,
           {
-            feature: e,
-            currentIndex: t,
-            totalFeatures: r,
-            onSkip: () => G(e),
-            onExplore: (f) => Y(e, f),
-            onPrevious: () => ee(e),
-            onNext: () => te(e),
-            setIsClosing: A
+            feature: t,
+            currentIndex: e,
+            totalFeatures: i,
+            onSkip: () => tt(t),
+            onExplore: (g) => et(t, g),
+            onSecondaryAction: (g) => ot(t, g),
+            onPrevious: () => nt(t),
+            onNext: () => it(t),
+            setIsClosing: Q
           }
         ),
         placement: "bottom",
@@ -462,7 +495,7 @@ const $e = ({
         hideSkipButton: !0,
         hideFooter: !0,
         offset: 0,
-        data: { feature: e, isMinor: !0 },
+        data: { feature: t, isMinor: !0 },
         styles: {
           tooltip: {
             padding: 0,
@@ -489,76 +522,125 @@ const $e = ({
           }
         }
       }
-    ]), v(!0);
-  }, G = S(
-    async (e) => {
-      const o = e || l;
+    ]), I(!0), $ && m && $({
+      storeId: m,
+      announcementId: t.id,
+      announcementTitle: t.title,
+      imageUrl: t.displayImage || t.image,
+      videoUrl: t.productVideo
+    });
+  }, tt = x(
+    async (t) => {
+      const o = t || s;
       if (o) {
-        b(!0), await p(o.id), Q((t) => new Set(t).add(o.id)), v(!1), w(null), k([]);
-        const n = d.find(
-          (t) => t.id !== o.id && !N.has(t.id)
+        h(!0), await u(o.id), Z((e) => new Set(e).add(o.id)), I(!1), S(null), k([]);
+        const n = l.find(
+          (e) => e.id !== o.id && !E.has(e.id)
         );
-        setTimeout(() => {
-          b(!1), n ? V(n, d) : F(!0);
+        y && m && y({
+          storeId: m,
+          announcementId: o.id,
+          announcementTitle: o.title,
+          imageUrl: o.displayImage || o.image,
+          videoUrl: o.productVideo,
+          buttonClicked: "Skip",
+          buttonName: "Skip",
+          buttonUrl: void 0
+        }), setTimeout(() => {
+          h(!1), n ? W(n, l) : M(!0);
         }, 500);
       }
     },
     [
+      s,
       l,
-      d,
-      p,
-      N
+      u,
+      E
     ]
-  ), Y = S(
-    async (e, o) => {
-      b(!0), await p(e.id), Q((r) => new Set(r).add(e.id));
-      const n = o ?? e.primaryButton?.action;
-      if (n === "Play Video" && e.productVideo && (z(e.productVideo), $(!0), K(!0)), n === "Open link") {
-        const r = e.primaryButton?.redirectionUrl || e.redirectUrl;
-        r && !r.startsWith("http") && (window.location.href = r);
+  ), et = x(
+    async (t, o) => {
+      h(!0), await u(t.id), Z((i) => new Set(i).add(t.id));
+      const n = o ?? t.primaryButton?.action;
+      if (n === "Play Video" && t.productVideo && (R(t.productVideo), q(!0), _(!0)), n === "Open link") {
+        const i = t.primaryButton?.redirectionUrl || t.redirectUrl;
+        i && !i.startsWith("http") && (window.location.href = i);
       }
-      v(!1), w(null), k([]);
-      const t = d.find(
-        (r) => r.id !== e.id && !N.has(r.id)
+      I(!1), S(null), k([]);
+      const e = l.find(
+        (i) => i.id !== t.id && !E.has(i.id)
       );
-      setTimeout(() => {
-        b(!1), t && n !== "Play Video" ? V(t, d) : t || F(!0);
+      y && m && y({
+        storeId: m,
+        announcementId: t.id,
+        announcementTitle: t.title,
+        imageUrl: t.displayImage || t.image,
+        videoUrl: t.productVideo,
+        buttonClicked: "Primary",
+        // Mirrors the rendered button and the navigation target, which both
+        // prefer primaryButton over the legacy top-level fields.
+        buttonName: t.primaryButton?.text || t.buttonText || "Explore",
+        buttonUrl: t.primaryButton?.redirectionUrl || t.redirectUrl || t.productVideo
+      }), setTimeout(() => {
+        h(!1), e && n !== "Play Video" ? W(e, l) : e || M(!0);
       }, 500);
     },
-    [d, p, N]
-  ), ee = S(
-    async (e) => {
-      const o = e || l;
+    [l, u, E]
+  ), ot = x(
+    async (t, o) => {
+      h(!0), await u(t.id), Z((i) => new Set(i).add(t.id));
+      const n = o ?? t.secondaryButton?.action;
+      n === "Play Video" && t.productVideo && (R(t.productVideo), q(!0), _(!0)), I(!1), S(null), k([]);
+      const e = l.find(
+        (i) => i.id !== t.id && !E.has(i.id)
+      );
+      y && m && y({
+        storeId: m,
+        announcementId: t.id,
+        announcementTitle: t.title,
+        imageUrl: t.displayImage || t.image,
+        videoUrl: t.productVideo,
+        buttonClicked: "Secondary",
+        buttonName: t.secondaryButton?.text || "Secondary",
+        buttonUrl: t.secondaryButton?.redirectionUrl
+      }), setTimeout(() => {
+        h(!1), e && n !== "Play Video" ? W(e, l) : e || M(!0);
+      }, 500);
+    },
+    [l, u, E]
+  ), nt = x(
+    async (t) => {
+      const o = t || s;
       if (!o)
         return;
-      const n = d.findIndex(
-        (t) => t.id === o.id
+      const n = l.findIndex(
+        (e) => e.id === o.id
       );
       if (n > 0) {
-        const t = d[n - 1];
-        w(t);
-        const r = t.featureTag.startsWith("#") || t.featureTag.startsWith(".") || t.featureTag.startsWith("[") ? t.featureTag : `#${t.featureTag}`, a = document.querySelector(r);
+        const e = l[n - 1];
+        S(e);
+        const i = e.featureTag.startsWith("#") || e.featureTag.startsWith(".") || e.featureTag.startsWith("[") ? e.featureTag : `#${e.featureTag}`, a = document.querySelector(i);
         if (a)
           try {
-            const { scrollToElementSmooth: g } = await import("./utils/elementHelpers.js");
-            await g(a, 120);
+            const { scrollToElementSmooth: f } = await import("./utils/elementHelpers.js");
+            await f(a, 120);
           } catch {
           }
-        const i = n - 1, c = d.length;
+        const d = n - 1, c = l.length;
         k([
           {
-            target: r,
-            content: /* @__PURE__ */ C(
-              ne,
+            target: i,
+            content: /* @__PURE__ */ B(
+              rt,
               {
-                feature: t,
-                currentIndex: i,
+                feature: e,
+                currentIndex: d,
                 totalFeatures: c,
-                onSkip: () => G(t),
-                onExplore: (g) => Y(t, g),
-                onPrevious: () => ee(t),
-                onNext: () => te(t),
-                setIsClosing: A
+                onSkip: () => tt(e),
+                onExplore: (f) => et(e, f),
+                onSecondaryAction: (f) => ot(e, f),
+                onPrevious: () => nt(e),
+                onNext: () => it(e),
+                setIsClosing: Q
               }
             ),
             placement: "bottom",
@@ -568,7 +650,7 @@ const $e = ({
             hideSkipButton: !0,
             hideFooter: !0,
             offset: 0,
-            data: { feature: t, isMinor: !0 },
+            data: { feature: e, isMinor: !0 },
             styles: {
               tooltip: {
                 padding: 0,
@@ -598,40 +680,41 @@ const $e = ({
         ]);
       }
     },
-    [l, d]
-  ), te = S(
-    async (e) => {
-      const o = e || l;
+    [s, l]
+  ), it = x(
+    async (t) => {
+      const o = t || s;
       if (!o)
         return;
-      const n = d.findIndex(
-        (t) => t.id === o.id
+      const n = l.findIndex(
+        (e) => e.id === o.id
       );
-      if (n < d.length - 1) {
-        const t = d[n + 1];
-        w(t);
-        const r = t.featureTag.startsWith("#") || t.featureTag.startsWith(".") || t.featureTag.startsWith("[") ? t.featureTag : `#${t.featureTag}`, a = document.querySelector(r);
+      if (n < l.length - 1) {
+        const e = l[n + 1];
+        S(e);
+        const i = e.featureTag.startsWith("#") || e.featureTag.startsWith(".") || e.featureTag.startsWith("[") ? e.featureTag : `#${e.featureTag}`, a = document.querySelector(i);
         if (a)
           try {
-            const { scrollToElementSmooth: g } = await import("./utils/elementHelpers.js");
-            await g(a, 120);
+            const { scrollToElementSmooth: f } = await import("./utils/elementHelpers.js");
+            await f(a, 120);
           } catch {
           }
-        const i = n + 1, c = d.length;
+        const d = n + 1, c = l.length;
         k([
           {
-            target: r,
-            content: /* @__PURE__ */ C(
-              ne,
+            target: i,
+            content: /* @__PURE__ */ B(
+              rt,
               {
-                feature: t,
-                currentIndex: i,
+                feature: e,
+                currentIndex: d,
                 totalFeatures: c,
-                onSkip: () => G(t),
-                onExplore: (g) => Y(t, g),
-                onPrevious: () => ee(t),
-                onNext: () => te(t),
-                setIsClosing: A
+                onSkip: () => tt(e),
+                onExplore: (f) => et(e, f),
+                onSecondaryAction: (f) => ot(e, f),
+                onPrevious: () => nt(e),
+                onNext: () => it(e),
+                setIsClosing: Q
               }
             ),
             placement: "bottom",
@@ -641,7 +724,7 @@ const $e = ({
             hideSkipButton: !0,
             hideFooter: !0,
             offset: 0,
-            data: { feature: t, isMinor: !0 },
+            data: { feature: e, isMinor: !0 },
             styles: {
               tooltip: {
                 padding: 0,
@@ -670,23 +753,23 @@ const $e = ({
           }
         ]);
       } else
-        b(!0), F(!0), p(o.id), v(!1), w(null), k([]), setTimeout(() => {
-          b(!1);
+        h(!0), M(!0), u(o.id), I(!1), S(null), k([]), setTimeout(() => {
+          h(!1);
         }, 500);
     },
-    [l, d, p]
+    [s, l, u]
   );
-  return /* @__PURE__ */ je(Ee, { children: [
-    fe,
-    se.length > 0 && /* @__PURE__ */ C(
-      ce,
+  return /* @__PURE__ */ Et(Pt, { children: [
+    gt,
+    lt.length > 0 && /* @__PURE__ */ B(
+      mt,
       {
-        steps: se,
-        run: Se,
+        steps: lt,
+        run: wt,
         continuous: !1,
         showProgress: !1,
         showSkipButton: !1,
-        callback: ve,
+        callback: jt,
         disableOverlayClose: !1,
         disableCloseOnEsc: !1,
         disableOverlay: !1,
@@ -696,7 +779,7 @@ const $e = ({
             primaryColor: "#007bff",
             zIndex: 1e4,
             width: "auto",
-            arrowColor: Ce ? "transparent" : "#212121"
+            arrowColor: Ut ? "transparent" : "#212121"
           },
           overlay: {
             backgroundColor: "transparent"
@@ -739,17 +822,17 @@ const $e = ({
           skip: "Skip"
         }
       },
-      `major-joyride-${Te}`
+      `major-joyride-${Mt}`
     ),
-    ae.length > 0 && /* @__PURE__ */ C(
-      ce,
+    st.length > 0 && /* @__PURE__ */ B(
+      mt,
       {
-        steps: ae,
-        run: O,
+        steps: st,
+        run: J,
         continuous: !1,
         showProgress: !1,
         showSkipButton: !1,
-        callback: Ue,
+        callback: Nt,
         disableOverlayClose: !1,
         disableCloseOnEsc: !1,
         disableOverlay: !1,
@@ -761,7 +844,7 @@ const $e = ({
             primaryColor: "#007bff",
             zIndex: 1e4,
             width: "auto",
-            arrowColor: le ? "transparent" : "#ffffff"
+            arrowColor: ct ? "transparent" : "#ffffff"
           },
           overlay: {
             backgroundColor: "transparent"
@@ -769,7 +852,7 @@ const $e = ({
           spotlight: {
             backgroundColor: "transparent",
             borderRadius: "8px",
-            boxShadow: le ? "none" : "0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"
+            boxShadow: ct ? "none" : "0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 20px 8px rgba(255, 255, 255, 0.4)"
           },
           tooltip: {
             borderRadius: "4px",
@@ -804,27 +887,27 @@ const $e = ({
           skip: "Skip"
         }
       },
-      `minor-joyride-${Fe}`
+      `minor-joyride-${Ft}`
     ),
-    /* @__PURE__ */ C(
-      Ne,
+    /* @__PURE__ */ B(
+      Vt,
       {
-        isOpen: we,
-        videoUrl: ke,
+        isOpen: Ct,
+        videoUrl: Tt,
         onClose: () => {
-          $(!1), z(""), K(!1);
-          const e = d.find(
-            (o) => !N.has(o.id)
+          q(!1), R(""), _(!1);
+          const t = l.find(
+            (o) => !E.has(o.id)
           );
-          e ? setTimeout(() => {
-            V(e, d);
-          }, 300) : F(!0);
+          t ? setTimeout(() => {
+            W(t, l);
+          }, 300) : M(!0);
         }
       }
     )
   ] });
 };
 export {
-  $e as default
+  At as default
 };
 //# sourceMappingURL=FeatureAnnouncementProvider.js.map