@streamlayer/react-ui 1.20.0 → 1.22.0

package/lib/app/masters/BetPack/index.js

@@ -1,93 +1,95 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { cx as x } from "@linaria/core";
-import A from "lodash.throttle";
-import { forwardRef as b, useState as y, useCallback as p, memo as L, useMemo as R, useRef as z, useEffect as F } from "react";
-import { useStore as k } from "@streamlayer/react-polyfills";
-import { FeatureType as I } from "@streamlayer/sdk-web-types";
-import { BetPackContent as O } from "./BetPackContent/index.js";
-import { EmergencyScreen as M } from "./BetPackContent/EmergencyScreen/index.js";
-import { LoaderScreen as j } from "./BetPackContent/LoaderScreen/index.js";
-import { BetPackContainer as E } from "./styles.js";
-import { defaultEventHandler as T } from "./utils.js";
-import { SvgIcon as w } from "../../../ui/icons/index.js";
-import { Container as G, Header as U, HeaderTitle as Y, CloseButton as q, Main as D, Footer as J, SlideSwitchButton as C, IconArrowPrev as K, buttonAvailable as H, IconArrowNext as Q } from "./BetPackOverlay/styles.js";
-const tr = b(
-  ({ sdk: m, onEvent: o, close: h, isMobile: a }, g) => {
-    const [c, d] = y(), [r, i] = y(), u = p(
-      (t) => {
-        if (t.type === "slBetPackReady") {
-          const { next: l, prev: s, current: P, canNext: B, canPrev: N } = t.payload || {};
-          d({ next: l, prev: s }), i((n) => ({
-            current: n != null && n.current ? n == null ? void 0 : n.current : P,
-            canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : N,
-            canNext: B
+import { cx as y } from "@linaria/core";
+import R from "lodash.throttle";
+import { forwardRef as b, useState as C, useCallback as N, useMemo as A, memo as z, useRef as L, useEffect as O } from "react";
+import { useStore as H } from "@streamlayer/react-polyfills";
+import { FeatureType as j } from "@streamlayer/sdk-web-types";
+import { BetPackContent as G } from "./BetPackContent/index.js";
+import { EmergencyScreen as T } from "./BetPackContent/EmergencyScreen/index.js";
+import { LoaderScreen as E } from "./BetPackContent/LoaderScreen/index.js";
+import { BetPackContainer as M } from "./styles.js";
+import { defaultEventHandler as U } from "./utils.js";
+import { useOrientation as Y } from "../useOrientation.js";
+import { SvgIcon as k } from "../../../ui/icons/index.js";
+import { Container as q, Header as D, HeaderTitle as J, CloseButton as K, Main as Q, Footer as V, SlideSwitchButton as p, IconArrowPrev as W, buttonAvailable as B, IconArrowNext as X } from "./BetPackOverlay/styles.js";
+const ur = b(
+  ({ sdk: m, onEvent: o, close: u, isMobile: c }, h) => {
+    const [i, d] = C(), [r, t] = C(), { orientation: s } = Y(), l = N(
+      (a) => {
+        if (a.type === "slBetPackReady") {
+          const { next: P, prev: x, current: w, canNext: F, canPrev: I } = a.payload || {};
+          d({ next: P, prev: x }), t((n) => ({
+            current: n != null && n.current ? n == null ? void 0 : n.current : w,
+            canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : I,
+            canNext: F
           }));
         }
-        if (t.type === "slBetPackChangeCard") {
-          const { current: l, canNext: s, canPrev: P } = t.payload || {};
-          i({ current: l, canNext: s, canPrev: P });
+        if (a.type === "slBetPackChangeCard") {
+          const { current: P, canNext: x, canPrev: w } = a.payload || {};
+          t({ current: P, canNext: x, canPrev: w });
         }
-        o == null || o(t);
+        o == null || o(a);
       },
       [o]
-    );
-    return /* @__PURE__ */ f(G, { ref: g, children: [
-      /* @__PURE__ */ f(U, { children: [
-        /* @__PURE__ */ f(Y, { children: [
-          /* @__PURE__ */ e(w, { name: "icon-trophy-bet-pack" }),
-          "LiveMatch Experience",
+    ), g = A(() => c ? s === "landscape" ? "60px" : "18px" : "30px", [c, s]);
+    return /* @__PURE__ */ f(q, { ref: h, children: [
+      /* @__PURE__ */ f(D, { children: [
+        /* @__PURE__ */ f(J, { children: [
+          /* @__PURE__ */ e(k, { name: "fgIcon" }),
+          "Featured Groups+",
           " "
         ] }),
-        /* @__PURE__ */ e(q, { onClick: h, children: /* @__PURE__ */ e(w, { name: "icon-close-btn-gray" }) })
+        /* @__PURE__ */ e(K, { onClick: u, children: /* @__PURE__ */ e(k, { name: "icon-close-btn-gray" }) })
       ] }),
-      /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
-        V,
+      /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(
+        Z,
         {
           sdk: m,
-          onEvent: u,
-          swipeable: !!a,
-          centerPadding: a ? "18px" : "30px",
-          heightOffset: a ? 0 : 48
+          onEvent: l,
+          swipeable: !!c,
+          centerPadding: g,
+          heightOffset: c ? 0 : 48
         }
       ) }),
-      !a && /* @__PURE__ */ f(J, { children: [
-        /* @__PURE__ */ e(C, { onClick: c == null ? void 0 : c.prev, disabled: !(r != null && r.canPrev), children: /* @__PURE__ */ e(K, { name: "iconArrowPrev", className: x((r == null ? void 0 : r.canPrev) && H) }) }),
-        /* @__PURE__ */ e(C, { onClick: c == null ? void 0 : c.next, disabled: !(r != null && r.canNext), children: /* @__PURE__ */ e(Q, { name: "iconArrowPrev", className: x((r == null ? void 0 : r.canNext) && H) }) })
+      !c && /* @__PURE__ */ f(V, { children: [
+        /* @__PURE__ */ e(p, { onClick: i == null ? void 0 : i.prev, disabled: !(r != null && r.canPrev), children: /* @__PURE__ */ e(W, { name: "iconArrowPrev", className: y((r == null ? void 0 : r.canPrev) && B) }) }),
+        /* @__PURE__ */ e(p, { onClick: i == null ? void 0 : i.next, disabled: !(r != null && r.canNext), children: /* @__PURE__ */ e(X, { name: "iconArrowPrev", className: y((r == null ? void 0 : r.canNext) && B) }) })
       ] })
     ] });
   }
-), V = L(({ sdk: m, swipeable: o = !0, heightOffset: h = 65, onEvent: a = T, centerPadding: g }) => {
-  const c = k(m.featuresList.getStore()), d = R(() => m.getFeature(I.GAMES), [c]), r = k(m.getUserStore()), i = z(null), [u, t] = y(), l = p(() => {
-    i.current && t(i.current.clientHeight);
+), Z = z(({ sdk: m, swipeable: o = !0, heightOffset: u = 65, onEvent: c = U, centerPadding: h }) => {
+  const i = H(m.featuresList.getStore()), d = A(() => m.getFeature(j.GAMES), [i]), r = H(m.getUserStore()), t = L(null), [s, l] = C(), g = N(() => {
+    t.current && l(t.current.clientHeight);
   }, []);
-  return F(() => {
-    const s = A(() => {
-      i.current && t(i.current.clientHeight);
+  return O(() => {
+    const a = R(() => {
+      t.current && l(t.current.clientHeight);
     }, 200);
-    return window.addEventListener("resize", s), () => {
-      window.removeEventListener("resize", s);
+    return window.addEventListener("resize", a), () => {
+      window.removeEventListener("resize", a);
     };
-  }, []), r.data ? d ? /* @__PURE__ */ e(E, { ref: i, className: x("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
-    O,
+  }, []), r.data ? d ? /* @__PURE__ */ e(M, { ref: t, className: y("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
+    G,
     {
       gamification: d,
-      onEvent: a,
+      onEvent: c,
       swipeable: o,
-      centerPadding: g,
-      changeHeightOnInit: l,
-      height: u ? u - h : void 0
+      centerPadding: h,
+      changeHeightOnInit: g,
+      height: s ? s - u : void 0
     }
   ) }) : /* @__PURE__ */ e("div", { children: "no gamification" }) : r.error && !r.loading ? /* @__PURE__ */ e(
-    M,
+    T,
     {
-      actionFn: () => a({ type: "slHardRefresh" }),
+      actionFn: () => c({ type: "slHardRefresh" }),
       description: `You are not authorized to
 view this resource.`,
-      isMobile: o
+      isMobile: o,
+      height: s ? s - u : void 0
     }
-  ) : /* @__PURE__ */ e(j, {});
+  ) : /* @__PURE__ */ e(E, {});
 });
 export {
-  V as BetPack,
-  tr as BetPackOverlay
+  Z as BetPack,
+  ur as BetPackOverlay
 };

package/lib/app/masters/BetPack/utils.d.ts

@@ -1,4 +1,4 @@
-export type AllowedMessageType = 'slBetPackReady' | 'slOpenGameCenter' | 'slHardRefresh' | 'slBetPackChangeCard';
+export type AllowedMessageType = 'slBetPackReady' | 'slOpenGameCenter' | 'slHardRefresh' | 'slBetPackChangeCard' | 'slVoted';
 declare global {
     interface Window {
         webkit?: {

package/lib/app/masters/BetPack/utils.js

@@ -1,10 +1,11 @@
-import { createLogger as n } from "@streamlayer/sdk-web-logger";
-const o = "slBetPackCb", w = n("betPack-ui"), d = (e, s = {}) => {
-  var t, i;
-  w.debug({ id: o, type: e, ...s }), (t = window.top) == null || t.postMessage({ id: o, type: e, ...s }, "*"), window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[o] && window.webkit.messageHandlers[o].postMessage({ type: e, ...s }), (i = window.slBetPackCb) != null && i.postMessage && window.slBetPackCb.postMessage(JSON.stringify({ type: e, ...s, from: "base" }));
-}, a = (e) => {
-  d(e.type);
+import { createLogger as w } from "@streamlayer/sdk-web-logger";
+const o = "slBetPackCb", g = w("betPack-ui"), r = (s, d = {}) => {
+  var a, t;
+  const { questionId: i, answerId: n } = d, e = { questionId: i, answerId: n };
+  g.debug({ id: o, type: s, ...e }), (a = window.top) == null || a.postMessage({ id: o, type: s, ...e }, "*"), window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[o] && window.webkit.messageHandlers[o].postMessage({ type: s, ...e }), (t = window.slBetPackCb) != null && t.postMessage && window.slBetPackCb.postMessage(JSON.stringify({ type: s, ...e, from: "base" }));
+}, c = (s) => {
+  r(s.type, s.payload);
 };
 export {
-  a as defaultEventHandler
+  c as defaultEventHandler
 };

package/lib/app/masters/Features/Gamification/index.js

@@ -18,13 +18,13 @@ const h = () => l, y = /* @__PURE__ */ u(h())({
   gamification: o
 }), D = ({
   gamification: o,
-  className: e,
-  appNode: r,
-  responsiveStore: i
+  responsiveStore: e,
+  className: i,
+  appNode: r
 }) => {
   const s = t(o.openedQuestion.$store), {
     sdkInDesktopView: m
-  } = t(i, {
+  } = t(e, {
     keys: ["sdkInDesktopView"]
   }), {
     hiding: a,
@@ -34,7 +34,7 @@ const h = () => l, y = /* @__PURE__ */ u(h())({
     container: r,
     useContainer: !m,
     children: /* @__PURE__ */ n(y, {
-      className: e,
+      className: i,
       hiding: a,
       onAnimationEnd: p,
       children: /* @__PURE__ */ n(f, {

package/lib/app/masters/Features/index.d.ts

@@ -1,7 +1,7 @@
 import { AppNodeRef } from '../..';
-import { ResponsiveStore } from '../useSdkResponsive';
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { ResponsiveStore } from '../useSdkResponsive';
 /** render feature by type */
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;
@@ -12,7 +12,7 @@ export declare const ActiveFeature: React.FC<{
 export declare const StandaloneFeature: React.FC<{
     sdk: StreamLayerSDK;
     feature: Features | null;
-    responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
+    responsiveStore: ResponsiveStore;
     className?: string;
 }>;

package/lib/app/masters/Features/index.js

@@ -15,9 +15,9 @@ const c = l(() => import("./Gamification/gamification-feature.js")), h = ({ sdk:
 }, v = ({ feature: e, className: t, appNode: i, responsiveStore: n }) => e && e.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ r(
   f,
   {
+    responsiveStore: n,
     className: t,
     appNode: i,
-    responsiveStore: n,
     gamification: e
   }
 ) : null;

package/lib/app/masters/Header/index.js

@@ -1,38 +1,34 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { cx as a } from "@linaria/core";
-import { styled as s } from "@linaria/react";
-import { forwardRef as t } from "react";
-import { SvgIcon as c } from "../../../ui/icons/index.js";
-const i = /* @__PURE__ */ s("div")({
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import { cx as t } from "@linaria/core";
+import { styled as o } from "@linaria/react";
+import { forwardRef as a } from "react";
+import { SvgIcon as i } from "../../../ui/icons/index.js";
+const c = /* @__PURE__ */ o("div")({
   name: "Navigation",
   class: "n1o1tw60",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ o("div")({
   name: "Container",
   class: "co2rstw",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ o("div")({
   name: "Title",
   class: "t1bqnx9c",
   propsAsIs: !1
-}), l = () => c, d = /* @__PURE__ */ s(l())({
-  name: "HeaderIcon",
-  class: "hlc2pcy",
-  propsAsIs: !0
-}), f = "h1aqxe8k", g = t(({
-  className: o
-}, n) => /* @__PURE__ */ r(i, {
-  className: a(o, f),
-  children: [/* @__PURE__ */ e(m, {
-    children: /* @__PURE__ */ r(p, {
-      children: [/* @__PURE__ */ e(d, {
-        name: "icon-trivia-transparent"
-      }), "Game Center"]
+}), p = "hlc2pcy", I = a(({
+  className: e
+}, n) => /* @__PURE__ */ r(c, {
+  className: t(e, p),
+  children: [/* @__PURE__ */ s(m, {
+    children: /* @__PURE__ */ r(l, {
+      children: [/* @__PURE__ */ s(i, {
+        name: "fgIcon"
+      }), "FG+ Game Center", " "]
     })
-  }), /* @__PURE__ */ e("div", {
+  }), /* @__PURE__ */ s("div", {
     ref: n
   })]
 }));
 export {
-  g as SDKHeader
+  I as SDKHeader
 };

package/lib/app/masters/Notifications/Onboarding/index.d.ts

@@ -7,7 +7,6 @@ export declare const Onboarding: React.FC<{
     notification: Notification;
     saveHeight: (height: number) => void;
     appNode: AppNodeRef;
-    sdkInDesktopView?: boolean;
     style?: React.CSSProperties;
     responsiveStore: ResponsiveStore;
 }>;

package/lib/app/masters/Notifications/Onboarding/index.js

@@ -41,26 +41,26 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   propsAsIs: !1
 }), q = ({
   deepLink: l,
-  onboardingOpts: r,
+  onboardingOpts: C,
   notification: i,
-  gamification: c,
+  gamification: p,
   loading: s,
   sdk: a
 }) => {
-  var d, o, m, h, g, V, L;
-  const p = x(c.friends.getStore()), [u, e] = I(void 0), f = S(() => {
-    var n, b;
-    const C = a.getInviter();
-    return C ? (b = (n = p.data) == null ? void 0 : n.find(({
+  var o, m, h, g, V, L, n;
+  const d = x(p.friends.getStore()), [e, f] = I(void 0), u = S(() => {
+    var c, b;
+    const r = a.getInviter();
+    return r ? (b = (c = d.data) == null ? void 0 : c.find(({
       slId: k
-    }) => k === C)) == null ? void 0 : b.name : "";
-  }, [p.data, a]);
+    }) => k === r)) == null ? void 0 : b.name : "";
+  }, [d.data, a]);
   return B(() => {
-    const C = l.$store.subscribe((n) => {
-      n && e(n.data);
+    const r = l.$store.subscribe((c) => {
+      c && f(c.data);
     });
     return () => {
-      C();
+      r();
     };
   }, [l.$store]), /* @__PURE__ */ t(W, {
     children: /* @__PURE__ */ t(E, {
@@ -75,45 +75,44 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
         label: "Top the leader board and best your friends.",
         icon: "icon-trophy"
       }],
-      rulesBtnLabel: (d = r.rules) == null ? void 0 : d.buttonLabel,
-      rulesTitle: (o = r.rules) == null ? void 0 : o.heading,
+      rulesBtnLabel: (o = C.rules) == null ? void 0 : o.buttonLabel,
+      rulesTitle: (m = C.rules) == null ? void 0 : m.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (m = r.rules) == null ? void 0 : m.terms,
+      termsText: (h = C.rules) == null ? void 0 : h.terms,
       steps: H,
-      primaryColor: (h = r.inviteCard) == null ? void 0 : h.iconColor,
-      inviteLink: u,
-      inviteCardTitle: (g = r.inviteCard) == null ? void 0 : g.heading,
-      inviteCardSubtext: (V = r.inviteCard) == null ? void 0 : V.subtext,
-      inviteCardBtnLabel: (L = r.inviteCard) == null ? void 0 : L.buttonLabel,
+      primaryColor: (g = C.inviteCard) == null ? void 0 : g.iconColor,
+      inviteLink: e,
+      inviteCardTitle: (V = C.inviteCard) == null ? void 0 : V.heading,
+      inviteCardSubtext: (L = C.inviteCard) == null ? void 0 : L.subtext,
+      inviteCardBtnLabel: (n = C.inviteCard) == null ? void 0 : n.buttonLabel,
       onClose: () => {
-        var C;
-        (C = i.close) == null || C.call(i);
+        var r;
+        (r = i.close) == null || r.call(i);
       },
-      gamification: c,
+      gamification: p,
       sdk: a,
-      inviterName: f
+      inviterName: u
     })
   });
 }, r2 = ({
   sdk: l,
-  notification: r,
+  notification: C,
   saveHeight: i,
-  style: c,
+  style: p,
   appNode: s,
-  sdkInDesktopView: a,
-  responsiveStore: p
+  responsiveStore: a
 }) => {
   var L;
-  const u = A(null), e = r.data.onboarding, [f, d] = I(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = S(() => H == null ? void 0 : H.map(({
-    graphicSrc: C
-  }) => C), []), {
+  const d = A(null), e = C.data.onboarding, [f, u] = I(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = S(() => H == null ? void 0 : H.map(({
+    graphicSrc: n
+  }) => n), []), {
     screen: h
-  } = x(p, {
+  } = x(a, {
     keys: ["screen"]
   });
   (L = e == null ? void 0 : e.titleCard) != null && L.media && (e.titleCard.media.sponsorLogo = R), _(() => {
-    var C;
-    i(((C = u.current) == null ? void 0 : C.getBoundingClientRect().height) || 0);
+    var n;
+    i(((n = d.current) == null ? void 0 : n.getBoundingClientRect().height) || 0);
   }, [i]);
   const {
     loading: g,
@@ -121,10 +120,10 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   } = T(m);
   return f && o && e && s.current && !V ? /* @__PURE__ */ t(G, {
     container: s,
-    useContainer: !a,
+    useContainer: !1,
     children: /* @__PURE__ */ t(q, {
-      notification: r,
-      setOpened: d,
+      notification: C,
+      setOpened: u,
       gamification: o,
       onboardingOpts: e,
       deepLink: o.deepLink,
@@ -133,7 +132,7 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
     })
   }) : /* @__PURE__ */ Z(w, {
     children: [/* @__PURE__ */ t(y, {
-      ref: u,
+      ref: d,
       style: {
         position: "absolute",
         visibility: "hidden"
@@ -146,14 +145,14 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
         onboarding: e
       })
     }), /* @__PURE__ */ t(O, {
-      style: c,
-      hiding: r.hiding,
+      style: p,
+      hiding: C.hiding,
       children: /* @__PURE__ */ t(y, {
         children: /* @__PURE__ */ t(M, {
-          close: r.close,
+          close: C.close,
           action: () => {
-            var n;
-            d(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
+            var r;
+            u(!0), (((r = s.current) == null ? void 0 : r.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
               behavior: "smooth"
             });
           },