@streamlayer/react-ui 0.96.3 → 0.97.1

package/lib/ui/app/masters.js

@@ -1,31 +1,35 @@
-import { jsx as m, jsxs as f } from "react/jsx-runtime";
+import { jsx as m, jsxs as v } from "react/jsx-runtime";
 import { useStore as C } from "@nanostores/react";
-import { useRef as v, useEffect as F, useMemo as x } from "react";
-import { resetCss as d } from "../theme/theme.js";
-import { ActiveFeature as A, StandaloneFeature as I } from "./Features/index.js";
-import { MastersNavigation as M } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as B } from "./Notifications/index.js";
-import { SDKContainer as L, SDKScrollContainer as j } from "./styles.js";
-import { useMastersApp as D } from "./useMastersApp.js";
-import { MastersContext as E } from "./useMastersContext.js";
-import { useSdkFeature as K } from "./useSdkFeature.js";
-import { useSdkResponsive as O } from "./useSdkResponsive.js";
-import { useSdkScroll as R } from "./useSdkScroll.js";
-import { ChannelsButtonId as T } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as b } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as w } from "../navigation/button/FeaturedGroups.js";
-import "../theme/breakpoints.js";
+import { useAnalyticsListener as d, newTabLinkListener as A, appScrollListener as F, appClickListener as x } from "../../hooks/analytics.js";
+import { useRef as S, useEffect as b, useMemo as D } from "react";
+import { resetCss as f } from "../theme/theme.js";
+import { ActiveFeature as I, StandaloneFeature as M } from "./Features/index.js";
+import { MastersNavigation as B } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as j } from "./Notifications/index.js";
+import { SDKContainer as k, SDKScrollContainer as E } from "./styles.js";
+import { useMastersApp as K } from "./useMastersApp.js";
+import { MastersContext as O } from "./useMastersContext.js";
+import { useSdkFeature as R } from "./useSdkFeature.js";
+import { useSdkResponsive as T } from "./useSdkResponsive.js";
+import { useSdkScroll as w } from "./useSdkScroll.js";
+import { ChannelsButtonId as G } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as P } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as V } from "../navigation/button/FeaturedGroups.js";
+import "lodash.throttle";
+import "@streamlayer/sdk-web-interfaces";
 import "../theme/constants.js";
+import "../theme/breakpoints.js";
 import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
 import "@linaria/react";
-import "@streamlayer/sdk-web-interfaces";
 import "./Features/Gamification/index.js";
 import "../gamification/detail/header/index.js";
 import "../gamification/constants.js";
 import "../gamification/detail/header/styles.js";
 import "../icons/index.js";
 import "../gamification/user-statistics/index.js";
+import "../skeleton/index.js";
+import "../skeleton/styles.js";
 import "../../utils/common.js";
 import "../gamification/user-statistics/components/rank/index.js";
 import "../gamification/user-statistics/components/rank/styles.js";
@@ -115,8 +119,6 @@ import "../gamification/question/notification/prediction-result/styles.js";
 import "./Notifications/Onboarding/index.js";
 import "./useImagesPreload.js";
 import "../gamification/onboarding/index.js";
-import "../skeleton/index.js";
-import "../skeleton/styles.js";
 import "../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/invitingUser/index.js";
 import "../gamification/onboarding/invitingUser/styles.js";
@@ -131,90 +133,99 @@ import "./Notifications/Onboarding/Notification/styles.js";
 import "./Notifications/styles.js";
 import "../gamification/question/notification/pill/index.js";
 import "../gamification/question/notification/pill/styles.js";
-import "lodash.throttle";
-import "../../index-keh7OLCY.js";
-const G = ({ sdk: t, className: e, scrollStore: n, appNode: r, scrollNode: p, headerNode: o, responsiveStore: i }) => {
-  const [, s] = K(t);
+import "../../index-z0QjLiEL.js";
+const W = ({ sdk: t, className: n, scrollStore: s, appNode: r, scrollNode: p, headerNode: i, responsiveStore: o }) => {
+  const [, l] = R(t);
   return /* @__PURE__ */ m(
-    A,
+    I,
     {
-      className: e,
+      className: n,
       scrollNode: p,
       appNode: r,
-      scrollStore: n,
-      feature: s,
-      headerNode: o,
-      responsiveStore: i,
+      scrollStore: s,
+      feature: l,
+      headerNode: i,
+      responsiveStore: o,
       sdk: t
     }
   );
-}, P = ({ sdk: t, className: e, appNode: n, responsiveStore: r }) => {
+}, Y = ({ sdk: t, className: n, appNode: s, responsiveStore: r }) => {
   const p = C(t.featuresList.getStore());
-  return p ? Array.from(p, (o) => {
-    const i = t.getFeature(o);
-    return i ? /* @__PURE__ */ m(
-      I,
+  return p ? Array.from(p, (i) => {
+    const o = t.getFeature(i);
+    return o ? /* @__PURE__ */ m(
+      M,
       {
-        className: e,
-        appNode: n,
-        feature: i,
+        className: n,
+        appNode: s,
+        feature: o,
         responsiveStore: r,
         sdk: t
       },
-      o
+      i
     ) : null;
   }) : null;
-}, fo = ({ sdk: t, overlays: e, children: n }) => {
-  const r = v(null), p = v(null), [o] = O(r), [i, s] = R(r, o), { sdkEnabled: l, sdkReady: c, activeOverlay: a, activateAndLoadOverlay: S, activateEventWithId: h, deactivate: g, isLogged: N } = D(t);
-  F(() => {
+}, go = ({ sdk: t, overlays: n, children: s }) => {
+  const r = S(null), p = S(null), [i] = T(r), [o, l] = w(r, i), { sdkEnabled: e, sdkReady: c, activeOverlay: a, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = K(t);
+  d(r, { enabled: e, event: "click", listener: A }), d(o, {
+    enabled: e,
+    event: "scrollend",
+    listener: F,
+    useDomNode: !0
+  }), d(o, {
+    enabled: e,
+    event: "click",
+    listener: x,
+    useDomNode: !0
+  }), b(() => {
     import("./Features/Gamification/gamification-feature.js");
   }, []);
-  const y = x(() => ({ sdk: t }), [t]);
-  return /* @__PURE__ */ m(E.Provider, { value: y, children: /* @__PURE__ */ f(L, { ref: r, children: [
-    l && /* @__PURE__ */ m(
-      M,
+  const L = D(() => ({ sdk: t }), [t]);
+  return /* @__PURE__ */ m(O.Provider, { value: L, children: /* @__PURE__ */ v(k, { ref: r, children: [
+    e && /* @__PURE__ */ m(
+      B,
       {
         ref: p,
         sdkReady: c,
         activeOverlay: a,
-        className: d,
-        setActiveOverlay: (u) => S("", u),
+        className: f,
+        setActiveOverlay: (u) => h("", u),
         scrollToTop: () => {
           var u;
-          return (u = i.current) == null ? void 0 : u.scrollTo(0, 0);
+          return (u = o.current) == null ? void 0 : u.scrollTo(0, 0);
         },
-        responsiveStore: o
+        responsiveStore: i
       }
     ),
-    /* @__PURE__ */ f(j, { className: "sl-hide-on-modal", ref: i, "data-nav": l.toString(), children: [
+    /* @__PURE__ */ v(E, { className: "sl-hide-on-modal", ref: o, "data-nav": e.toString(), children: [
       c && /* @__PURE__ */ m(
-        B,
+        j,
         {
           sdk: t,
-          scrollNode: i,
+          scrollNode: o,
           headerNode: p,
           appNode: r,
-          scrollStore: s,
-          responsiveStore: o
+          scrollStore: l,
+          responsiveStore: i
         }
       ),
-      /* @__PURE__ */ m("div", { style: !l || a === T ? {} : { display: "none" }, children: n && n({ activateEventWithId: h, deactivate: g }) }),
-      e && a === b && e[a],
-      c && a === w && /* @__PURE__ */ m(
-        G,
+      /* @__PURE__ */ m("div", { style: !e || a === G ? {} : { display: "none" }, children: s && s({ activateEventWithId: N, deactivate: g }) }),
+      n && a === P && n[a],
+      c && a === V && /* @__PURE__ */ m(
+        W,
         {
-          scrollStore: s,
-          responsiveStore: o,
-          scrollNode: i,
+          scrollStore: l,
+          responsiveStore: i,
+          scrollNode: o,
           appNode: r,
           headerNode: p,
-          className: d,
+          className: f,
           sdk: t
         }
       ),
-      c && /* @__PURE__ */ m(P, { responsiveStore: o, appNode: r, className: d, sdk: t })
+      c && /* @__PURE__ */ m(Y, { responsiveStore: i, appNode: r, className: f, sdk: t })
     ] }),
-    l && !N && /* @__PURE__ */ m(
+    e && !y && /* @__PURE__ */ m(
       "div",
       {
         style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
@@ -224,5 +235,5 @@ const G = ({ sdk: t, className: e, scrollStore: n, appNode: r, scrollNode: p, he
   ] }) });
 };
 export {
-  fo as MastersApp
+  go as MastersApp
 };

package/lib/ui/app/useMastersApp.js

@@ -2,8 +2,8 @@ import { useStore as A } from "@nanostores/react";
 import { useRef as y, useState as d, useCallback as z, useEffect as u } from "react";
 import { FeatureType as v } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
-import { FeaturedGroupsButtonId as i } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as p } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as p } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as i } from "../navigation/button/Channels.js";
 import "react/jsx-runtime";
 import "../navigation/button/LeaderBoard.js";
 import "@linaria/react";
@@ -15,23 +15,23 @@ import "../navigation/masters.js";
 import "../navigation/index.js";
 import "../theme/constants.js";
 const D = (e) => {
-  const c = y(""), [S, o] = d(!1), E = A(e.status), a = A(e.userId()), f = A(e.getActiveFeature()), n = E === "ready", [l, r] = d(i), m = z(
+  const c = y(""), [S, o] = d(!1), E = A(e.status), a = A(e.userId()), f = A(e.getActiveFeature()), n = E === "ready", [l, r] = d(p), m = z(
     (t, s) => {
-      r(s), s === i ? (t && e.createEventSession(t), window.requestAnimationFrame(() => {
+      r(s), t && e.createEventSession(t), s === p ? window.requestAnimationFrame(() => {
         e.openFeature(v.GAMES);
-      })) : e.closeFeature(!1);
+      }) : e.closeFeature(!1);
     },
     [e]
   );
   u(() => {
-    !n && l === i && (r(p), e.closeFeature(!0));
+    !n && l === p && (r(i), e.closeFeature(!0));
   }, [n, l, e]), u(() => {
-    f === v.GAMES ? r(i) : f === v.UNSET && r(p);
+    f === v.GAMES ? r(p) : f === v.UNSET && r(i);
   }, [f]);
   const F = (t) => {
     c.current = t, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: s, err: g }) => {
       if (g) {
-        m(t, p);
+        m(t, i);
         return;
       }
       if (s) {
@@ -50,7 +50,7 @@ const D = (e) => {
   };
   return u(() => {
     if (!a) {
-      n && (r(p), e.disableApp());
+      n && (r(i), e.disableApp());
       return;
     }
     if (a && c.current && S) {

package/lib/ui/app/useSdkFeature.js

@@ -1,24 +1,21 @@
-import { useStore as o } from "@nanostores/react";
+import { useStore as f } from "@nanostores/react";
 import { useState as c, useEffect as l } from "react";
 import { FeatureStatus as a } from "@streamlayer/sdk-web-interfaces";
-const d = (r) => {
-  const s = o(r.getActiveFeature()), i = o(r.streamStore()), [n, f] = c(null);
+const p = (t) => {
+  const r = f(t.getActiveFeature()), n = f(t.streamStore()), [i, u] = c(null);
   return l(() => {
-    const u = r.getFeatures();
-    if (s)
-      for (const [e, t] of u)
-        e === s ? (t.status.get() === a.Suspended && t.enable(), f(t)) : t.status.get() === a.Ready && t.disable();
-    else {
-      for (const [, e] of u)
-        e.status.get() === a.Ready && e.disable();
-      f(null);
-    }
+    const o = t.getFeatures();
+    if (!r)
+      u(null);
+    else
+      for (const [s, e] of o)
+        s === r ? (e.status.get() === a.Suspended && e.enable(), u(e)) : e.status.get() === a.Ready && e.disable();
     return () => {
-      for (const [, e] of u)
-        e.status.get() === a.Ready && e.disable();
+      for (const [, s] of o)
+        s.status.get() === a.Ready && s.disable();
     };
-  }, [s, r, i]), [s, n];
+  }, [r, t, n]), [r, i];
 };
 export {
-  d as useSdkFeature
+  p as useSdkFeature
 };

package/lib/ui/app/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../theme/constants.js";
-import { m as p } from "../../index-keh7OLCY.js";
+import { m as p } from "../../index-z0QjLiEL.js";
 import "../../index-uEuzH3jr.js";
 const d = Object.keys(r), i = () => {
   const t = window.innerWidth;

package/lib/ui/app/useSdkScroll.d.ts

@@ -7,6 +7,6 @@ type ScrollData = {
     scrollDirection: 'forward' | 'backward';
 };
 export type ScrollStore = MapStore<ScrollData>;
-export declare const scrollIntoAppView: (appNode: AppNodeRef, options?: ScrollIntoViewOptions) => void;
+export declare const scrollIntoAppView: (appNode: AppNodeRef, screenSize: number, options?: ScrollIntoViewOptions) => void;
 export declare const useSdkScroll: (appNode: AppNodeRef, responsiveStore: ResponsiveStore) => [ScrollNodeRef, ScrollStore];
 export {};

package/lib/ui/app/useSdkScroll.js

@@ -1,43 +1,46 @@
 import { useStore as p } from "@nanostores/react";
 import S from "lodash.throttle";
-import { useRef as f, useState as h, useEffect as b } from "react";
-import { BREAKPOINTS as m } from "../theme/constants.js";
-import { m as g } from "../../index-keh7OLCY.js";
+import { useRef as m, useState as h, useEffect as g } from "react";
+import { BREAKPOINTS as l } from "../theme/constants.js";
+import { m as T } from "../../index-z0QjLiEL.js";
 import "../../index-uEuzH3jr.js";
-const C = (t, n) => {
-  var r;
-  (r = t.current) == null || r.scrollIntoView(n), window.scrollBy({ top: -52 });
-}, D = (t, n) => {
-  const r = f(null), l = f(0), [e] = h(
-    g({
+const C = (o, t, e) => {
+  const n = t >= l.lg && t < l.xl ? 75 : 52;
+  o.current && window.scrollTo({
+    top: o.current.offsetTop - n,
+    ...e
+  });
+}, D = (o, t) => {
+  const e = m(null), n = m(0), [s] = h(
+    T({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), c = p(n);
-  return b(() => {
-    const s = window.innerWidth < m.xl ? window : r.current;
-    if (!s)
+  ), i = p(t);
+  return g(() => {
+    const c = window.innerWidth < l.xl ? window : e.current;
+    if (!c)
       return () => {
       };
-    const i = S((w) => {
+    const u = S((w) => {
       var a;
-      const u = w.target;
-      if (!u)
+      const f = w.target;
+      if (!f)
         return;
-      let o = 0;
-      c.screen.size < m.xl ? o = ((a = t.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : o = u.scrollTop;
-      const d = l.current < o ? "forward" : "backward";
-      l.current = o, e.set({
-        scrollPosition: Math.round(o),
+      let r = 0;
+      i.screen.size < l.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = f.scrollTop;
+      const d = n.current < r ? "forward" : "backward";
+      n.current = r, s.set({
+        scrollPosition: Math.round(r),
         scrollDirection: d,
-        tabsShown: e.get().tabsShown
+        tabsShown: s.get().tabsShown
       });
     }, 200);
-    return s.addEventListener("scroll", i), () => {
-      s.removeEventListener("scroll", i);
+    return c.addEventListener("scroll", u), () => {
+      c.removeEventListener("scroll", u);
     };
-  }, [e, t, c.screen]), [r, e];
+  }, [s, o, i.screen]), [e, s];
 };
 export {
   C as scrollIntoAppView,

package/lib/ui/gamification/invite-link/index.js

@@ -1,16 +1,30 @@
-import { jsxs as i, jsx as C } from "react/jsx-runtime";
-import { Container as o, FriendsIcon as c, Content as l, Title as s, Description as h, ArrowInviteIcon as d } from "./styles.js";
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { useAnalyticsHandle as c } from "../../../hooks/analytics.js";
+import { InvitationFrom as l } from "@streamlayer/sdk-web-types";
+import { Container as m, FriendsIcon as s, Content as p, Title as a, Description as d, ArrowInviteIcon as h } from "./styles.js";
+import "lodash.throttle";
+import "react";
+import "@streamlayer/sdk-web-interfaces";
+import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
-import "react";
-const p = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", f = ({ title: t, description: e, onClick: n, className: r }) => /* @__PURE__ */ i(o, { onClick: n, className: r, children: [
-  /* @__PURE__ */ C(c, { alt: "friends-icon", src: p }),
-  /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ C(s, { children: t }),
-    /* @__PURE__ */ C(h, { children: e })
-  ] }),
-  /* @__PURE__ */ C(d, { name: "icon-copy" })
-] });
+const f = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", D = ({ title: t, description: n, onClick: o, className: r }) => {
+  const [e] = c({
+    type: "invitation",
+    action: "sent",
+    payload: {
+      from: l.TITLE_CARD
+    }
+  });
+  return /* @__PURE__ */ C(m, { onClick: e(o), className: r, children: [
+    /* @__PURE__ */ i(s, { alt: "friends-icon", src: f }),
+    /* @__PURE__ */ C(p, { children: [
+      /* @__PURE__ */ i(a, { children: t }),
+      /* @__PURE__ */ i(d, { children: n })
+    ] }),
+    /* @__PURE__ */ i(h, { name: "icon-copy" })
+  ] });
+};
 export {
-  f as InviteLink
+  D as InviteLink
 };

package/lib/ui/gamification/onboarding/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { HeaderNodeRef, type AppNodeRef } from '../../app/masters';
 import { OnboardingStep } from './slides/onboarding-instructions';
 import { OnboardingInviteCardProps } from './slides/onboarding-invite-card';
 import { OnboardingRule } from './slides/onboarding-rules';
@@ -17,7 +16,6 @@ type OnboardingType = OnboardingInviteCardProps & {
     primaryColor?: string;
     inviteCardBtnLabel?: string;
     loading: boolean;
-    renderToNode?: AppNodeRef | HeaderNodeRef;
     inviterName?: string;
     onClose: () => void;
 };

package/lib/ui/gamification/onboarding/index.js

@@ -1,18 +1,23 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { useState as h, useEffect as s, useMemo as E, useCallback as F } from "react";
-import G from "react-virtualized-auto-sizer";
-import { Skeleton as M } from "../../skeleton/index.js";
-import { OnboardingInstructions as P } from "./slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as R } from "./slides/onboarding-invite-card/index.js";
-import { OnboardingRules as U } from "./slides/onboarding-rules/index.js";
-import { OnboardingTerms as q } from "./slides/onboarding-terms/index.js";
-import { Container as J, OnboardingHeader as K, CloseBtn as Q, IconClose as V, Content as W, OnboardingFooter as X, OnboardingActionBtn as Y } from "./styles.js";
+import { useState as p, useEffect as s, useMemo as N, useCallback as z } from "react";
+import E from "react-virtualized-auto-sizer";
+import { Skeleton as F } from "../../skeleton/index.js";
+import { OnboardingInstructions as G } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as M } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as P } from "./slides/onboarding-rules/index.js";
+import { OnboardingTerms as R } from "./slides/onboarding-terms/index.js";
+import { Container as U, OnboardingHeader as q, CloseBtn as J, IconClose as K, Content as Q, OnboardingFooter as V, OnboardingActionBtn as W } from "./styles.js";
 import "../../skeleton/styles.js";
 import "@linaria/react";
 import "./invitingUser/index.js";
 import "../../../utils/common.js";
 import "./invitingUser/styles.js";
 import "./slides/onboarding-instructions/styles.js";
+import "../../../hooks/analytics.js";
+import "lodash.throttle";
+import "@streamlayer/sdk-web-interfaces";
+import "../../theme/constants.js";
+import "@streamlayer/sdk-web-types";
 import "../../app/useClipboardCopy.js";
 import "../../../index-jRXrW6ie.js";
 import "../../../index-uEuzH3jr.js";
@@ -24,80 +29,75 @@ import "./slides/onboarding-rules/styles.js";
 import "./slides/onboarding-terms/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
-const m = {
+const e = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, si = ({
+}, Ti = ({
   gamification: v,
   steps: i,
-  rules: r,
+  rules: o,
   rulesBtnLabel: d,
   rulesTitle: I,
   termsTitle: T,
-  termsText: p,
+  termsText: h,
   primaryColor: u,
   inviteLink: x,
-  socialLinks: D,
-  inviteCardTitle: k,
-  inviteCardSubtext: w,
+  inviteCardTitle: D,
+  inviteCardSubtext: k,
   inviteCardBtnLabel: g,
   loading: a,
-  renderToNode: A,
   inviterName: c,
   sdk: b,
-  onClose: j
+  onClose: w
 }) => {
-  const [o, C] = h(0), [l, O] = h(!1), [n, e] = h(m);
+  const [m, C] = p(0), [l, O] = p(!1), [r, n] = p(e);
   s(() => {
-    i != null && i.length ? e({ ...m, steps: !0 }) : r != null && r.length ? e({ ...m, rules: !0 }) : e({ ...m, inviteCard: !0 });
+    i != null && i.length ? n({ ...e, steps: !0 }) : o != null && o.length ? n({ ...e, rules: !0 }) : n({ ...e, inviteCard: !0 });
   }, []);
-  const H = E(() => n.steps && o === 0 ? "Continue" : n.rules ? l || !d ? "Got it" : d : n.inviteCard ? g || "Play Now" : "Next", [n, o, l, d, g]), N = F(() => {
-    i != null && i.length && o < i.length - 1 ? C((f) => ++f) : r != null && r.length && n.steps ? e({ ...m, rules: !0 }) : n.rules && e({ ...m, inviteCard: !0 });
-  }, [o, i == null ? void 0 : i.length, r == null ? void 0 : r.length, n, C, e]), z = async () => {
-    n.inviteCard ? await v.onboardingStatus.submitInplay() : n.rules && l ? O(!1) : N();
+  const A = N(() => r.steps && m === 0 ? "Continue" : r.rules ? l || !d ? "Got it" : d : r.inviteCard ? g || "Play Now" : "Next", [r, m, l, d, g]), j = z(() => {
+    i != null && i.length && m < i.length - 1 ? C((f) => ++f) : o != null && o.length && r.steps ? n({ ...e, rules: !0 }) : r.rules && n({ ...e, inviteCard: !0 });
+  }, [m, i == null ? void 0 : i.length, o == null ? void 0 : o.length, r, C, n]), H = async () => {
+    r.inviteCard ? await v.onboardingStatus.submitInplay() : r.rules && l ? O(!1) : j();
   };
   return s(() => {
     !a && c && b.inviteDisplayed();
-  }, [a, c, b]), /* @__PURE__ */ t(G, { children: ({ width: f, height: S }) => /* @__PURE__ */ y(J, { style: { width: f, height: S, maxHeight: S }, children: [
-    /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(Q, { onClick: j, children: /* @__PURE__ */ t(V, { name: "icon-close-btn-gray" }) }) }),
-    /* @__PURE__ */ y(W, { children: [
-      n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ t(
-        P,
+  }, [a, c, b]), /* @__PURE__ */ t(E, { children: ({ width: f, height: S }) => /* @__PURE__ */ y(U, { style: { width: f, height: S, maxHeight: S }, children: [
+    /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(J, { onClick: w, children: /* @__PURE__ */ t(K, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ y(Q, { children: [
+      r.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ t(
+        G,
         {
           loading: a,
-          stepsCount: i.length,
-          currentStep: o,
-          inviterName: c,
-          ...i[o]
+          steps: i,
+          currentStep: m,
+          inviterName: c
         }
       ),
-      n.rules && !l && /* @__PURE__ */ t(
-        U,
+      r.rules && !l && /* @__PURE__ */ t(
+        P,
         {
-          rules: r,
+          rules: o,
           rulesTitle: I,
-          termsText: p,
+          termsText: h,
           primaryColor: u,
           openTerms: () => O(!0)
         }
       ),
-      n.rules && l && /* @__PURE__ */ t(q, { termsTitle: T, termsText: p }),
-      n.inviteCard && /* @__PURE__ */ t(
-        R,
+      r.rules && l && /* @__PURE__ */ t(R, { termsTitle: T, termsText: h }),
+      r.inviteCard && /* @__PURE__ */ t(
+        M,
         {
           inviteLink: x,
-          inviteCardTitle: k,
-          inviteCardSubtext: w,
-          primaryColor: u,
-          socialLinks: D,
-          renderToNode: A
+          inviteCardTitle: D,
+          inviteCardSubtext: k,
+          primaryColor: u
         }
       )
     ] }),
-    /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(M, { loading: a, style: { width: "100%" }, children: /* @__PURE__ */ t(Y, { onClick: z, children: H }) }) })
+    /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(F, { loading: a, style: { width: "100%" }, children: /* @__PURE__ */ t(W, { onClick: H, children: A }) }) })
   ] }) });
 };
 export {
-  si as OnboardingUI
+  Ti as OnboardingUI
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-type OnboardingInstructionsProps = OnboardingStep & {
+type OnboardingInstructionsProps = {
     loading: boolean;
-    stepsCount: number;
+    steps: OnboardingStep[];
     currentStep: number;
     inviterName?: string;
 };