@streamlayer/react 1.9.8 → 1.10.0

package/lib/es/notification.js

@@ -0,0 +1,468 @@
+import { f as m, s as e, a3 as L, a4 as z, a5 as B, U as O, a6 as R, g as P, d as Q, a as U, i as V, J as T, u as F, b as W, j as G, h as K } from "./provider.js";
+import { i as p, Q as I, j as Y, S as _ } from "./useStreamLayerApp2.js";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { useState as q, useEffect as E, useMemo as J } from "react";
+const h = /* @__PURE__ */ e("div")({
+  name: "Media",
+  class: "m1bcvojl",
+  propsAsIs: !1
+}), H = () => h, X = /* @__PURE__ */ e(H())({
+  name: "MediaImgBottom",
+  class: "m58gin0",
+  propsAsIs: !0
+}), Z = () => h, C = /* @__PURE__ */ e(Z())({
+  name: "MediaImgSolid",
+  class: "m1atm8do",
+  propsAsIs: !0
+}), ss = () => h, es = /* @__PURE__ */ e(ss())({
+  name: "MediaImgRounded",
+  class: "myx3xoi",
+  propsAsIs: !0
+}), ns = () => h, ts = /* @__PURE__ */ e(ns())({
+  name: "MediaImgCentered",
+  class: "m1bwv0gx",
+  propsAsIs: !0
+}), os = () => h, is = /* @__PURE__ */ e(os())({
+  name: "MediaImgInsight",
+  class: "mntjanp",
+  propsAsIs: !0
+}), as = /* @__PURE__ */ e("div")({
+  name: "VideoIcon",
+  class: "v1kofb47",
+  propsAsIs: !1
+}), cs = {
+  [p.UNSET]: C,
+  [p.NONE]: C,
+  [p.ROUNDED]: es,
+  [p.CENTERED]: ts,
+  [p.TRANSPARENT]: X
+}, N = ({
+  src: t,
+  imageMode: o = p.UNSET,
+  withVideo: i,
+  fromInsight: a
+}) => {
+  if (o === p.NONE)
+    return null;
+  const n = a ? is : cs[o];
+  return /* @__PURE__ */ c(n, {
+    children: [/* @__PURE__ */ s("img", {
+      src: t,
+      alt: ""
+    }), i && /* @__PURE__ */ s(as, {
+      children: /* @__PURE__ */ s(m, {
+        name: "icon-play"
+      })
+    })]
+  });
+}, rs = /* @__PURE__ */ e("div")({
+  name: "NotificationContent",
+  class: "nuraq9m",
+  propsAsIs: !1
+}), ls = /* @__PURE__ */ e("div")({
+  name: "NotificationContainer",
+  class: "ns1nzpg",
+  propsAsIs: !1
+}), j = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "b1j59nzs",
+  propsAsIs: !1
+}), ds = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t9vmnpp",
+  propsAsIs: !1
+}), ps = /* @__PURE__ */ e("button")({
+  name: "Button",
+  class: "b14ivj5k",
+  propsAsIs: !1
+}), ms = () => m, us = /* @__PURE__ */ e(ms())({
+  name: "StyledChevronRight",
+  class: "s1atci8n",
+  propsAsIs: !0
+}), Is = /* @__PURE__ */ e("div")({
+  name: "QuoteWrap",
+  class: "q4w8jgs",
+  propsAsIs: !1
+}), hs = /* @__PURE__ */ e("blockquote")({
+  name: "Quote",
+  class: "qaa0kez",
+  propsAsIs: !1
+}), vs = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "b1wvd52w",
+  propsAsIs: !1
+}), As = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "ccvukea",
+  propsAsIs: !1
+}), $s = ({ image: t, tweet: o, account: i, accountVerified: a, body: n, title: l }) => {
+  var d;
+  return /* @__PURE__ */ c(As, { children: [
+    l && /* @__PURE__ */ s(Is, { children: /* @__PURE__ */ s(hs, { children: l }) }),
+    /* @__PURE__ */ s(
+      L,
+      {
+        image: t,
+        name: (d = o == null ? void 0 : o.meta) == null ? void 0 : d.accountName,
+        userName: i,
+        verified: a,
+        createdTweet: o == null ? void 0 : o.date
+      }
+    ),
+    /* @__PURE__ */ s(vs, { children: z(n) })
+  ] });
+}, ys = ({ title: t, questionType: o, questionTypeData: i }) => /* @__PURE__ */ c(j, { children: [
+  /* @__PURE__ */ s(
+    B,
+    {
+      questionTypeData: i,
+      questionType: o,
+      questionStatus: Y.UNSET
+    }
+  ),
+  t && /* @__PURE__ */ s(ds, { children: t })
+] }), fs = ({ tweet: t }) => t ? /* @__PURE__ */ s(j, { children: /* @__PURE__ */ s($s, { ...t, controlVideo: () => {
+} }) }) : null, gs = ({ action: t, questionType: o, inApp: i, insight: a, tweet: n }) => {
+  var l;
+  const d = O[o], r = R[o];
+  if (!d || !i || !i.notification)
+    return null;
+  const { title: v, image: A, imageMode: f } = i.notification;
+  let u = A;
+  o === I.TWEET && n != null && n.tweetMedia && (u = n.tweetMedia.image), f === p.NONE && (u = "");
+  const $ = i.useMediaFromContent && (a == null ? void 0 : a.image), g = o === I.TWEET && ((l = n == null ? void 0 : n.tweetMedia) == null ? void 0 : l.video) || o === I.FACTOID && (a == null ? void 0 : a.video);
+  return /* @__PURE__ */ s(ls, { className: "SL_InApp", onClick: t, children: /* @__PURE__ */ c(rs, { style: u ? {} : { paddingLeft: "1.5rem" }, children: [
+    u && !$ && /* @__PURE__ */ s(N, { src: u, imageMode: f, withVideo: !!g }),
+    $ && /* @__PURE__ */ s(N, { src: $, fromInsight: !0, withVideo: !!g }),
+    o === I.TWEET ? /* @__PURE__ */ s(fs, { tweet: n }) : /* @__PURE__ */ s(ys, { questionTypeData: d, questionType: o, title: v }),
+    /* @__PURE__ */ s(ps, { name: "inapp-button", children: r || "Open" }),
+    /* @__PURE__ */ s(us, { name: "chevronRight" })
+  ] }) });
+}, Ts = /* @__PURE__ */ e("div")({
+  name: "NotificationContainer",
+  class: "n11jcrxe",
+  propsAsIs: !1
+}), k = /* @__PURE__ */ e("img")({
+  name: "Icon",
+  class: "i1vmpt6u",
+  propsAsIs: !1
+}), Cs = /* @__PURE__ */ e("div")({
+  name: "IconContainer",
+  class: "i180665s",
+  propsAsIs: !1
+}), Ns = () => m, ks = /* @__PURE__ */ e(Ns())({
+  name: "TitleIcon",
+  class: "t16zzzei",
+  propsAsIs: !0
+}), bs = () => P, ws = /* @__PURE__ */ e(bs())({
+  name: "Close",
+  class: "c1sur0q2",
+  propsAsIs: !0
+}), Ss = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "bai9j52",
+  propsAsIs: !1
+}), qs = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1bnt25p",
+  propsAsIs: !1
+}), Es = /* @__PURE__ */ e("div")({
+  name: "Description",
+  class: "dmixjec",
+  propsAsIs: !1
+}), js = /* @__PURE__ */ e("button")({
+  name: "Button",
+  class: "b1ubkw1q",
+  propsAsIs: !1
+}), Ms = ({
+  open: t,
+  close: o,
+  ...i
+}) => {
+  var a, n;
+  return /* @__PURE__ */ c(
+    Ts,
+    {
+      onClick: () => {
+        t == null || t(), i && (i.instantOpen = !0);
+      },
+      children: [
+        /* @__PURE__ */ c(Cs, { children: [
+          /* @__PURE__ */ s(k, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
+          /* @__PURE__ */ s(
+            k,
+            {
+              className: "on-dark",
+              src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification-dark.png"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ c(Ss, { children: [
+          /* @__PURE__ */ c(qs, { children: [
+            /* @__PURE__ */ s(ks, { name: "icon-trophy-solid" }),
+            (a = i == null ? void 0 : i.titleCard) == null ? void 0 : a.title
+          ] }),
+          /* @__PURE__ */ c(Es, { children: [
+            /* @__PURE__ */ s("span", { children: (n = i == null ? void 0 : i.titleCard) == null ? void 0 : n.subtitle }),
+            /* @__PURE__ */ s(js, { name: "inapp-button", children: "Play Now" })
+          ] })
+        ] }),
+        /* @__PURE__ */ s(
+          ws,
+          {
+            close: (l) => {
+              l == null || l.stopPropagation(), o == null || o();
+            }
+          }
+        )
+      ]
+    }
+  );
+}, xs = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cef8huz",
+  propsAsIs: !1
+}), Ds = () => m, Ls = /* @__PURE__ */ e(Ds())({
+  name: "CheckIcon",
+  class: "c1mo15kk",
+  propsAsIs: !0
+}), zs = () => m, Bs = /* @__PURE__ */ e(zs())({
+  name: "PredictionIcon",
+  class: "p16zkqnm",
+  propsAsIs: !0
+}), Os = /* @__PURE__ */ e("div")({
+  name: "PredictionIconContainer",
+  class: "pjszi7a",
+  propsAsIs: !1
+}), Rs = /* @__PURE__ */ e("div")({
+  name: "BodyContainer",
+  class: "bftbmo3",
+  propsAsIs: !1
+}), Ps = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "barrbyu",
+  propsAsIs: !1
+}), Qs = /* @__PURE__ */ e("div")({
+  name: "Subtitle",
+  class: "sz7237i",
+  propsAsIs: !1
+}), Us = ({
+  step: t,
+  children: o,
+  answer: i,
+  state: a = "pending"
+}) => /* @__PURE__ */ c(xs, {
+  children: [/* @__PURE__ */ s(Os, {
+    children: /* @__PURE__ */ s(Bs, {
+      name: "icon-prediction"
+    })
+  }), /* @__PURE__ */ s(Rs, {
+    children: /* @__PURE__ */ s(Ps, {
+      children: o
+    }, t)
+  }), /* @__PURE__ */ s(Qs, {
+    className: a,
+    children: /* @__PURE__ */ c("div", {
+      children: [/* @__PURE__ */ s(Ls, {
+        name: "icon-check"
+      }), "Your Pick: ", i]
+    })
+  })]
+}), Vs = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "ckyzolp",
+  propsAsIs: !1
+}), y = /* @__PURE__ */ e("div")({
+  name: "Line",
+  class: "l16t1zr7",
+  propsAsIs: !1
+}), Fs = () => y, Ws = /* @__PURE__ */ e(Fs())({
+  name: "Line1",
+  class: "le78kvg",
+  propsAsIs: !0
+}), Gs = () => y, Ks = /* @__PURE__ */ e(Gs())({
+  name: "Line2",
+  class: "l1o7966d",
+  propsAsIs: !0
+}), Ys = () => y, _s = /* @__PURE__ */ e(Ys())({
+  name: "Line3",
+  class: "lu9lyxq",
+  propsAsIs: !0
+}), Js = () => /* @__PURE__ */ c(Vs, {
+  children: [/* @__PURE__ */ s(Ws, {
+    children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(Ks, {
+    children: /* @__PURE__ */ s("div", {})
+  }), /* @__PURE__ */ s(_s, {
+    children: /* @__PURE__ */ s("div", {})
+  })]
+}), Hs = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "c10jy6zf",
+  propsAsIs: !1
+}), Xs = () => m, Zs = /* @__PURE__ */ e(Xs())({
+  name: "CheckIcon",
+  class: "c1c7scay",
+  propsAsIs: !0
+}), se = () => /* @__PURE__ */ c(Hs, {
+  children: [/* @__PURE__ */ s(Zs, {
+    name: "icon-check"
+  }), " Prediction results are in!"]
+}), ee = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cf6k2yy",
+  propsAsIs: !1
+}), ne = /* @__PURE__ */ e("div")({
+  name: "Caption",
+  class: "c1c8xjus",
+  propsAsIs: !1
+}), te = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1d1uekn",
+  propsAsIs: !1
+}), oe = ({
+  title: t
+}) => /* @__PURE__ */ c(ee, {
+  children: [/* @__PURE__ */ s(ne, {
+    children: "Results for"
+  }), /* @__PURE__ */ s(te, {
+    children: t
+  })]
+}), M = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "c181a1as",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t1cduox6",
+  propsAsIs: !1
+}), ie = () => m, D = /* @__PURE__ */ e(ie())({
+  name: "CorrectIcon",
+  class: "c1onrv6j",
+  propsAsIs: !0
+}), ae = () => D, ce = /* @__PURE__ */ e(ae())({
+  name: "InCorrectIcon",
+  class: "i17n9o7e",
+  propsAsIs: !0
+}), re = () => /* @__PURE__ */ c(M, {
+  children: [/* @__PURE__ */ c(x, {
+    children: ["Congratulations!", /* @__PURE__ */ s("br", {}), "You answered correctly."]
+  }), /* @__PURE__ */ s(D, {
+    name: "icon-check"
+  })]
+}), le = ({
+  title: t
+}) => /* @__PURE__ */ c(M, {
+  children: [/* @__PURE__ */ c(x, {
+    children: ["Better luck next time!", /* @__PURE__ */ s("br", {}), "Correct: ", t]
+  }), /* @__PURE__ */ s(ce, {
+    name: "icon-cross"
+  })]
+}), de = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cnxgcs2",
+  propsAsIs: !1
+}), pe = /* @__PURE__ */ e("div")({
+  name: "Title",
+  class: "t903f8n",
+  propsAsIs: !1
+}), me = () => m, ue = /* @__PURE__ */ e(me())({
+  name: "CheckIcon",
+  class: "ceyu3qj",
+  propsAsIs: !0
+}), Ie = ({
+  points: t
+}) => /* @__PURE__ */ c(de, {
+  children: [/* @__PURE__ */ c(pe, {
+    children: ["You won ", /* @__PURE__ */ s(Q, {
+      delay: 0.5,
+      prefix: "+",
+      suffix: " points",
+      value: t
+    })]
+  }), /* @__PURE__ */ s(ue, {
+    name: "icon-trophy-solid"
+  })]
+}), b = /* @__PURE__ */ e("div")({
+  name: "Container",
+  class: "cq3agu2",
+  propsAsIs: !1
+}), w = /* @__PURE__ */ e("div")({
+  name: "Body",
+  class: "b16qj0do",
+  propsAsIs: !1
+}), S = {
+  1: 3e3,
+  2: 4e3,
+  3: 4e3,
+  4: 4e3
+}, he = ({ close: t, action: o, setStep: i, votedAnswer: a, correct: n, correctAnswerTitle: l, questionTitle: d, step: r }) => {
+  if (E(() => {
+    if (i) {
+      const A = setTimeout(() => {
+        S[r + 1] && (n || r < 3) ? i(r + 1) : t == null || t();
+      }, S[r]);
+      return () => {
+        A && clearTimeout(A);
+      };
+    }
+    return () => {
+    };
+  }, [i, r, t, n]), r === 1)
+    return /* @__PURE__ */ s(b, { children: /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(se, {}) }) });
+  let v = "pending";
+  return (r === 3 || r === 4) && (v = n ? "correct" : "incorrect"), /* @__PURE__ */ s(b, { onClick: () => o == null ? void 0 : o(), children: /* @__PURE__ */ c(w, { children: [
+    r !== 1 && /* @__PURE__ */ s(Js, {}, r),
+    /* @__PURE__ */ c(Us, { state: v, step: r, answer: (a == null ? void 0 : a.title) || "unknown", children: [
+      r === 2 && /* @__PURE__ */ s(oe, { title: d || "unknown" }),
+      r === 3 && n && /* @__PURE__ */ s(re, {}),
+      r === 3 && !n && /* @__PURE__ */ s(le, { title: l || "unknown" }),
+      r === 4 && /* @__PURE__ */ s(Ie, { points: (a == null ? void 0 : a.points) || 0 })
+    ] })
+  ] }) });
+}, ve = ({ close: t, action: o, votedAnswer: i, correct: a, correctAnswerTitle: n, questionTitle: l }) => {
+  const [d, r] = q(1);
+  return /* @__PURE__ */ s(
+    he,
+    {
+      close: t,
+      action: o,
+      votedAnswer: i,
+      correct: a,
+      correctAnswerTitle: n,
+      questionTitle: l,
+      setStep: r,
+      step: d,
+      title: ""
+    }
+  );
+}, Ae = /* @__PURE__ */ e("div")({
+  name: "NotificationContainer",
+  class: "n1i4h28u",
+  propsAsIs: !1
+}), $e = (t) => /* @__PURE__ */ s(Ae, { children: /* @__PURE__ */ s(ve, { ...t }) }), ye = ({ sdk: t }) => {
+  const [o] = q(t.getNotificationsStore()), i = U(o), a = t.getFeature(_.GAMES), n = J(() => t.getActiveNotification(), [t, i]);
+  return E(() => {
+    n && V.emit("notification", {
+      action: "rendered",
+      payload: {
+        questionId: n.data.questionId,
+        questionType: n.data.questionType
+      }
+    });
+  }, [n]), n && n.type === T.QUESTION_RESOLVED ? n.data.question && n.data.questionType === I.PREDICTION ? /* @__PURE__ */ s(
+    $e,
+    {
+      action: n.action,
+      close: n.close,
+      ...n.data.question
+    }
+  ) : null : n && n.type === T.ONBOARDING ? n.data.onboarding ? /* @__PURE__ */ s(Ms, { open: a == null ? void 0 : a.openFeature, close: n.close, ...n.data.onboarding }) : null : n && /* @__PURE__ */ s(gs, { ...n.data, action: n.action });
+}, Ne = ({ theme: t }) => {
+  const o = F(), i = W(), a = G();
+  return o && a.appNotification ? a.app ? null : /* @__PURE__ */ s("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ s(K, { customTheme: t ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ s(ye, { sdk: o }) }) }) : null;
+};
+export {
+  Ne as StreamLayerSDKNotification,
+  ye as StreamLayerSDKNotificationUI
+};

package/lib/es/points.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as m, useEffect as p } from "react";
-import { s as r, h as d, f as S, c as h, a as y, F as l, u as f, b as v, d as g } from "./index2.js";
+import { useState as u, useEffect as p } from "react";
+import { s as r, f as d, c as h, d as f, a as S, F as l, u as y, b as v, h as g } from "./provider.js";
 import { S as b } from "./useStreamLayerApp2.js";
 const k = /* @__PURE__ */ r("div")({
   name: "PointsContainer",
@@ -26,33 +26,33 @@ const k = /* @__PURE__ */ r("div")({
   name: "PointsValue",
   class: "prj9b3v",
   propsAsIs: !1
-}), x = ({ points: s, onClick: e }) => /* @__PURE__ */ i(k, { className: S, onClick: e, children: [
-  /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(P, { name: "icon-trophy" }) }),
+}), x = ({ points: s, onClick: e }) => /* @__PURE__ */ i(k, { className: h, onClick: e, children: [
+  /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(P, { name: "icon-trophy-solid" }) }),
   /* @__PURE__ */ i(T, { children: [
     /* @__PURE__ */ t(F, { children: "Total points" }),
-    /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(h, { value: s }) })
+    /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(f, { value: s }) })
   ] })
 ] }), C = ({ gamification: s }) => {
-  const e = s.userSummary.$store, [a, c] = m(0);
+  const e = s.userSummary.$store, [a, m] = u(0);
   return p(() => {
-    const u = e.subscribe((n) => {
-      var o;
-      (o = n == null ? void 0 : n.summary) != null && o.points && c(n.summary.points);
+    const c = e.subscribe((o) => {
+      var n;
+      (n = o == null ? void 0 : o.summary) != null && n.points && m(o.summary.points);
     });
     return () => {
-      u();
+      c();
     };
   }, [e]), /* @__PURE__ */ t(x, { points: a, onClick: () => {
     s.status.get() === l.Suspended ? s.openFeature() : s.status.get() === l.Ready && s.closeFeature(!1);
   } });
 }, j = ({ sdk: s }) => {
-  if (!y(s.featuresList.getStore()))
+  if (!S(s.featuresList.getStore()))
     return null;
   const e = s.getFeature(b.GAMES);
   return e ? /* @__PURE__ */ t(C, { gamification: e }) : null;
 }, K = ({ theme: s }) => {
-  const e = f(), a = v();
-  return e ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(g, { customTheme: s ?? a, children: /* @__PURE__ */ t(j, { sdk: e }) }) }) : null;
+  const e = y(), a = v();
+  return e ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(g, { customTheme: s ?? a.theme, themeMode: a.themeMode, children: /* @__PURE__ */ t(j, { sdk: e }) }) }) : null;
 };
 export {
   K as StreamLayerSDKPoints