@streamlayer/react-ui 0.81.0 → 0.81.1

package/lib/ui/gamification/vote/feedback/index.d.ts

@@ -15,6 +15,7 @@ interface FeedbackProps {
     votedInCurrentRender: boolean;
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;
+    marketClosed: boolean;
 }
 export declare const Feedback: React.FC<FeedbackProps>;
 export {};

package/lib/ui/gamification/vote/feedback/index.js

@@ -1,65 +1,66 @@
-import { jsxs as r, Fragment as o, jsx as i } from "react/jsx-runtime";
-import { QuestionType as t, QuestionStatus as R } from "@streamlayer/sdk-web-types";
+import { jsxs as r, Fragment as t, jsx as i } from "react/jsx-runtime";
+import { QuestionType as n, QuestionStatus as Q } from "@streamlayer/sdk-web-types";
 import { SvgIcon as l } from "../../../icons/index.js";
-import { Container as L, FeedbackIconWrap as h, FeedbackHeader as a, FeedbackDescription as d, FeedbackText as s, IconPrediction as N, FeedbackTitle as Q } from "./styles.js";
+import { Container as f, FeedbackIconWrap as h, FeedbackHeader as p, FeedbackDescription as d, FeedbackText as s, IconPrediction as L, FeedbackTitle as j } from "./styles.js";
 import "@linaria/react";
 import "react";
-const Y = ({
+const B = ({
   feedbackMessages: e,
-  questionVotedCorrectly: P,
-  questionVoted: m,
-  questionType: n,
-  hasCorrectAnswer: u,
-  questionStatus: E,
-  showExpiredNotification: I,
+  questionVotedCorrectly: I,
+  questionVoted: a,
+  questionType: c,
+  hasCorrectAnswer: F,
+  questionStatus: S,
+  showExpiredNotification: u,
   showClosedNotificationTrivia: w,
-  votedInCurrentRender: p,
-  votedAfterQuestionClosed: S,
-  enteredAnActiveQuestion: x
+  votedInCurrentRender: m,
+  votedAfterQuestionClosed: y,
+  enteredAnActiveQuestion: E,
+  marketClosed: N
 }) => {
-  const T = m && (n === t.TRIVIA || n === t.PREDICTION) && p && E !== R.RESOLVED, b = n === t.PREDICTION && !u, k = E === R.RESOLVED && n === t.PREDICTION && !m && !x || n === t.PREDICTION && S && p && x, D = T && b, O = T && u, y = m && n === t.POLL && p;
-  if (!I && !w && !D && !O && !k && !y)
+  const b = a && (c === n.TRIVIA || c === n.PREDICTION) && m && S !== Q.RESOLVED, x = c === n.PREDICTION && !F, T = N && c === n.PREDICTION && !a && !E || c === n.PREDICTION && y && m && E, k = b && x, D = b && F, O = c === n.PREDICTION && a && m && F, R = a && c === n.POLL && m;
+  if (!u && !w && !k && !D && !T && !R && !O)
     return null;
-  const F = P ? "correct" : "incorrect", c = P ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
-  return /* @__PURE__ */ r(L, { "data-isPrediction": b, children: [
-    I && /* @__PURE__ */ r(o, { children: [
+  const P = I ? "correct" : "incorrect", o = I ? e == null ? void 0 : e.correctFeedback : e == null ? void 0 : e.incorrectFeedback;
+  return /* @__PURE__ */ r(f, { "data-isPrediction": x, children: [
+    u && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(d, { children: "Question Expired" }) }),
+        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Expired" }) }),
         /* @__PURE__ */ i(s, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
-    w && /* @__PURE__ */ r(o, { children: [
+    w && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
         /* @__PURE__ */ i(s, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
       ] })
     ] }),
-    k && /* @__PURE__ */ r(o, { children: [
+    T && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(l, { name: "questionExpired" }) }),
       /* @__PURE__ */ r("div", { children: [
-        /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
+        /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(d, { children: "Question Closed" }) }),
         /* @__PURE__ */ i(s, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
       ] })
     ] }),
-    D && /* @__PURE__ */ r(o, { children: [
-      /* @__PURE__ */ i(N, { name: "icon-prediction" }),
+    k && /* @__PURE__ */ r(t, { children: [
+      /* @__PURE__ */ i(L, { name: "icon-prediction" }),
       /* @__PURE__ */ i(d, { children: "Stay tuned to see if your prediction was correct." })
     ] }),
-    y && /* @__PURE__ */ r(o, { children: [
+    R && /* @__PURE__ */ r(t, { children: [
       /* @__PURE__ */ i(h, { "data-feedbackType": "correct", children: /* @__PURE__ */ i(l, { name: "correct" }) }),
       /* @__PURE__ */ i(d, { children: "That's for answering. Please stay tuned for the next question." })
     ] }),
-    O && /* @__PURE__ */ r(o, { children: [
-      /* @__PURE__ */ i(h, { "data-feedbackType": F, children: /* @__PURE__ */ i(l, { name: F }) }),
-      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ r(a, { children: [
-        /* @__PURE__ */ i(Q, { "data-feedbackType": F, children: c == null ? void 0 : c.title }),
-        /* @__PURE__ */ i(d, { children: c == null ? void 0 : c.description })
+    (D || O) && /* @__PURE__ */ r(t, { children: [
+      /* @__PURE__ */ i(h, { "data-feedbackType": P, children: /* @__PURE__ */ i(l, { name: P }) }),
+      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ i(j, { "data-feedbackType": P, children: o == null ? void 0 : o.title }),
+        /* @__PURE__ */ i(d, { children: o == null ? void 0 : o.description })
       ] }) })
     ] })
   ] });
 };
 export {
-  Y as Feedback
+  B as Feedback
 };

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

@@ -1,12 +1,12 @@
-import { jsx as c, jsxs as D, Fragment as K } from "react/jsx-runtime";
-import { useState as l, useEffect as Y, useCallback as p, useMemo as m } from "react";
-import { QuestionStatus as V, QuestionType as o } from "@streamlayer/sdk-web-types";
-import { SDKScrollContainer as z } from "../../app/styles.js";
-import { ExpiredAlert as G } from "./expired-alert/index.js";
-import { Feedback as J } from "./feedback/index.js";
-import { Container as U, Content as X, Title as Z, Options as _ } from "./styles.js";
-import { VotingOption as $ } from "./vote-option/index.js";
-import { WinBar as Q } from "./win-bar/index.js";
+import { jsx as a, jsxs as g, Fragment as Y } from "react/jsx-runtime";
+import { useState as T, useEffect as z, useCallback as A, useMemo as o } from "react";
+import { QuestionType as c, QuestionStatus as w } from "@streamlayer/sdk-web-types";
+import { SDKScrollContainer as G } from "../../app/styles.js";
+import { ExpiredAlert as J } from "./expired-alert/index.js";
+import { Feedback as U } from "./feedback/index.js";
+import { Container as X, Content as Z, Title as _, Options as $ } from "./styles.js";
+import { VotingOption as Q } from "./vote-option/index.js";
+import { WinBar as tt } from "./win-bar/index.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "./expired-alert/styles.js";
@@ -18,104 +18,106 @@ import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "./win-bar/styles.js";
-const pt = ({ openedQuestion: t, isLoading: y, vote: v, close: C }) => {
-  var S, q;
-  const g = t.subject, T = t.type, a = t.status, E = (S = t.options) == null ? void 0 : S.options, [d, b] = l(!1), [h, N] = l(!1), [n, P] = l(!0), [e, k] = l(!1), [u, x] = l(""), I = t == null ? void 0 : t.id;
-  Y(() => {
-    a === V.RESOLVED && P(!1);
+const At = ({ openedQuestion: t, isLoading: I, vote: v, close: p }) => {
+  var D, k;
+  const N = t.subject, l = t.type, e = t.status, E = (D = t.options) == null ? void 0 : D.options, V = t.marketClosed, [R, P] = T(!1), [y, b] = T(!1), [n, u] = T(!0), [s, L] = T(!1), [x, O] = T(""), d = t == null ? void 0 : t.id;
+  z(() => {
+    l === c.PREDICTION ? V && u(!1) : e === w.RESOLVED && u(!1);
   }, []);
-  const L = p((i) => {
-    N(i), b(!0);
-  }, []), R = p(
+  const M = A((i) => {
+    b(i), P(!0);
+  }, []), q = A(
     async (i) => {
-      if (I) {
+      if (d) {
         const f = i.currentTarget.value;
-        x(f), await v(I, f);
+        O(f), await v(d, f);
       }
     },
-    [I, x, v]
-  ), M = p(() => {
-    k(!0), setTimeout(C, 3e3);
-  }, [C]), r = m(
+    [d, O, v]
+  ), j = A(() => {
+    L(!0), setTimeout(p, 3e3);
+  }, [p]), r = o(
     () => t == null ? void 0 : t.answers.find((i) => i.youVoted === !0),
     [t]
-  ), A = m(
+  ), h = o(
     () => !!(t != null && t.answers.find((i) => i.correct === !0)),
     [t]
-  ), w = m(
+  ), C = o(
     () => t == null ? void 0 : t.answers.find((i) => i.correct === !0),
     [t]
-  ), j = m(() => t ? t.answers.map((i) => {
+  ), B = o(() => t ? t.answers.map((i) => {
     var f;
     return {
       ...i,
       questionVoted: !!r,
-      youSelected: u === i.id,
-      isLoading: y,
-      hasCorrectAnswer: A,
+      youSelected: x === i.id,
+      isLoading: I,
+      hasCorrectAnswer: h,
       questionType: t.type,
-      answerTimeExpired: e,
-      questionStatus: a,
+      answerTimeExpired: s,
+      questionStatus: e,
       imageMode: (f = t.appearance) == null ? void 0 : f.images,
-      onVote: R
+      onVote: q
     };
   }) : [], [
-    A,
-    e,
-    y,
+    h,
+    s,
+    I,
     t,
     r,
-    a,
-    R,
-    u
-  ]), B = E && (E.case === "trivia" || E.case === "prediction") ? E.value : void 0, s = a === V.RESOLVED && T === o.TRIVIA && !r && !n, O = T === o.TRIVIA && h && d && n, F = m(() => {
-    if (!(s || e))
-      return a === V.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : w == null ? void 0 : w.points;
-  }, [e, r, w, a, s]), W = m(() => s || e ? "Time expired" : t.type === o.POLL ? "Time remaining" : r ? "You won" : "To win", [e, t.type, r, s]), H = r || s || O || T === o.TRIVIA && a === V.RESOLVED && n;
-  return /* @__PURE__ */ c(z, { "data-question-header": "true", children: /* @__PURE__ */ c(U, { children: /* @__PURE__ */ D(X, { children: [
-    /* @__PURE__ */ c(
-      J,
+    e,
+    q,
+    x
+  ]), F = E && (E.case === "trivia" || E.case === "prediction") ? E.value : void 0, m = e === w.RESOLVED && l === c.TRIVIA && !r && !n, S = l === c.TRIVIA && y && R && n, W = o(() => {
+    if (!(m || s))
+      return e === w.RESOLVED ? 0 : r ? r.correct ? r.points : 0 : C == null ? void 0 : C.points;
+  }, [s, r, C, e, m]), H = o(() => m || s ? "Time expired" : t.type === c.POLL ? "Time remaining" : r ? "You won" : "To win", [s, t.type, r, m]), K = r || m || S || l === c.TRIVIA && e === w.RESOLVED && n;
+  return /* @__PURE__ */ a(G, { "data-question-header": "true", children: /* @__PURE__ */ a(X, { children: /* @__PURE__ */ g(Z, { children: [
+    /* @__PURE__ */ a(
+      U,
       {
-        feedbackMessages: B,
+        feedbackMessages: F,
         questionVoted: !!r,
         questionVotedCorrectly: r == null ? void 0 : r.correct,
-        questionType: T,
-        hasCorrectAnswer: A,
-        questionStatus: a,
-        showExpiredNotification: s,
-        showClosedNotificationTrivia: O,
-        votedInCurrentRender: d,
-        votedAfterQuestionClosed: h,
-        enteredAnActiveQuestion: n
+        questionType: l,
+        hasCorrectAnswer: h,
+        questionStatus: e,
+        showExpiredNotification: m,
+        showClosedNotificationTrivia: S,
+        votedInCurrentRender: R,
+        votedAfterQuestionClosed: y,
+        enteredAnActiveQuestion: n,
+        marketClosed: V
       }
     ),
-    t.type !== o.PREDICTION && /* @__PURE__ */ c(
-      Q,
+    t.type !== c.PREDICTION && /* @__PURE__ */ a(
+      tt,
       {
-        title: W,
-        points: F,
-        onTimerExpired: M,
+        title: H,
+        points: W,
+        onTimerExpired: j,
         questionType: t.type,
-        isTimer: !y,
+        isTimer: !I,
         isPlayingTimer: !r,
-        timerDuration: H ? 0 : Number(((q = t == null ? void 0 : t.appearance) == null ? void 0 : q.autoHideInterval) || "30")
+        timerDuration: K ? 0 : Number(((k = t == null ? void 0 : t.appearance) == null ? void 0 : k.autoHideInterval) || "30")
       }
     ),
-    e ? /* @__PURE__ */ c(
-      G,
+    s ? /* @__PURE__ */ a(
+      J,
       {
         title: "More to come...",
         description: "Watch for additional enhanced stream interactive experience."
       }
-    ) : /* @__PURE__ */ D(K, { children: [
-      /* @__PURE__ */ c(Z, { "data-isPrediction": t.type === o.PREDICTION, children: g }),
-      /* @__PURE__ */ c(_, { children: j.map((i) => /* @__PURE__ */ c(
-        $,
+    ) : /* @__PURE__ */ g(Y, { children: [
+      /* @__PURE__ */ a(_, { "data-isPrediction": t.type === c.PREDICTION, children: N }),
+      /* @__PURE__ */ a($, { children: B.map((i) => /* @__PURE__ */ a(
+        Q,
         {
           ...i,
-          markThatVoted: L,
-          votedAfterQuestionClosed: h,
-          enteredAnActiveQuestion: n
+          markThatVoted: M,
+          votedAfterQuestionClosed: y,
+          enteredAnActiveQuestion: n,
+          marketClosed: V
         },
         i.id
       )) })
@@ -123,5 +125,5 @@ const pt = ({ openedQuestion: t, isLoading: y, vote: v, close: C }) => {
   ] }) }) });
 };
 export {
-  pt as Vote
+  At as Vote
 };

package/lib/ui/gamification/vote/vote-option/index.d.ts

@@ -11,6 +11,7 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     questionStatus: QuestionStatus;
     votedAfterQuestionClosed: boolean;
     enteredAnActiveQuestion: boolean;
+    marketClosed: boolean;
     onVote: (e: React.MouseEvent<HTMLButtonElement>) => void;
     markThatVoted: (votedAfterQuestionClosed: boolean) => void;
 };

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,76 +1,79 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { QuestionImages as s, QuestionStatus as I, QuestionType as c } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as x } from "../../../animated-counter/index.js";
-import { IconDefault as L, IconContainer as Q, IconWrap as v, IconCircle as B, ButtonContainer as V, ButtonPct as b, ButtonBody as j, Title as U, Indicators as $, CheckIcon as M, Percentage as W } from "./styles.js";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { QuestionImages as s, QuestionType as i, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as L } from "../../../animated-counter/index.js";
+import { IconDefault as Q, IconContainer as v, IconWrap as B, IconCircle as V, ButtonContainer as b, ButtonPct as j, ButtonBody as U, Title as $, Indicators as M, CheckIcon as W, Percentage as y } from "./styles.js";
 import "react-countup";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const m = {
-  [s.CENTERED]: (t) => /* @__PURE__ */ n(L, { alt: "option-icon", src: t }),
-  [s.TRANSPARENT]: (t) => /* @__PURE__ */ n(Q, { children: /* @__PURE__ */ n(v, { style: { backgroundImage: `url(${t})` } }) }),
-  [s.ROUNDED]: (t) => /* @__PURE__ */ n(B, { alt: "option-icon", src: t }),
+const I = {
+  [s.CENTERED]: (t) => /* @__PURE__ */ r(Q, { alt: "option-icon", src: t }),
+  [s.TRANSPARENT]: (t) => /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(B, { style: { backgroundImage: `url(${t})` } }) }),
+  [s.ROUNDED]: (t) => /* @__PURE__ */ r(V, { alt: "option-icon", src: t }),
   [s.NONE]: () => null,
   [s.UNSET]: () => null
-}, y = ({ questionType: t, hasCorrectAnswer: i, correct: e, youVoted: r, questionVoted: o }) => {
-  if (t === c.POLL && r)
+}, z = ({ questionType: t, hasCorrectAnswer: c, correct: e, youVoted: n, questionVoted: o }) => {
+  if (t === i.POLL && n)
     return "correct";
-  if (t === c.PREDICTION) {
-    if (i && o)
-      return r ? e ? "correct" : "incorrect" : "unset";
-    if (r)
+  if (t === i.PREDICTION) {
+    if (c && o)
+      return n ? e ? "correct" : "incorrect" : "unset";
+    if (n)
       return "correct";
   }
-  return t === c.TRIVIA && o && r ? e ? "correct" : "incorrect" : "unset";
-}, z = ({
+  return t === i.TRIVIA && o && n ? e ? "correct" : "incorrect" : "unset";
+}, F = ({
   questionType: t,
-  questionVoted: i,
+  questionVoted: c,
   correct: e,
-  hasCorrectAnswer: r,
+  hasCorrectAnswer: n,
   questionStatus: o
-}) => t === c.TRIVIA ? i && e : t === c.PREDICTION ? i && e && r || o === I.RESOLVED && e : !1, q = (t) => {
-  var R;
+}) => t === i.TRIVIA ? c && e : t === i.PREDICTION ? c && e && n || o === p.RESOLVED && e : !1, tt = (t) => {
+  var S;
   const {
     // option props
-    id: i,
+    id: c,
     icon: e,
-    text: r,
+    text: n,
     percentageDecimal: o,
     // extra props
-    onVote: p,
+    onVote: T,
     markThatVoted: D,
-    youSelected: E,
+    youSelected: f,
     questionVoted: a,
     // ToDo: Figure out why imageMode is not in the response, and delete default value
-    imageMode: h,
-    answerTimeExpired: T,
-    questionStatus: d,
-    isLoading: g,
-    questionType: C,
-    correct: w,
-    hasCorrectAnswer: A,
-    votedAfterQuestionClosed: O,
-    enteredAnActiveQuestion: S
-  } = t, l = y(t), P = z({ questionType: C, questionVoted: a, correct: w, hasCorrectAnswer: A, questionStatus: d }), u = d === I.RESOLVED && C === c.PREDICTION, N = a || u;
-  return /* @__PURE__ */ f(
-    V,
+    imageMode: C,
+    answerTimeExpired: g,
+    questionStatus: h,
+    isLoading: w,
+    questionType: d,
+    correct: A,
+    hasCorrectAnswer: O,
+    votedAfterQuestionClosed: P,
+    enteredAnActiveQuestion: E,
+    marketClosed: N
+  } = t, l = z(t), k = F({ questionType: d, questionVoted: a, correct: A, hasCorrectAnswer: O, questionStatus: h }), u = N && d === i.PREDICTION, R = a || u;
+  return /* @__PURE__ */ m(
+    b,
     {
-      value: i,
-      "data-selected": E,
+      value: c,
+      "data-selected": f,
       "data-answerState": l,
-      disabled: a || g || T || u && !S || u && S && O,
-      "data-isNotChecked": a && !E && l !== "incorrect",
-      onClick: (k) => {
-        D(d === I.RESOLVED), p(k);
+      disabled: a || w || g || u && !E || u && E && P,
+      "data-isNotChecked": a && !f && l !== "incorrect",
+      onClick: (x) => {
+        D(
+          d === i.PREDICTION ? N : h === p.RESOLVED
+        ), T(x);
       },
       children: [
-        /* @__PURE__ */ n(b, { "data-answerState": l, style: { width: `${N ? o : 0}%` } }),
-        /* @__PURE__ */ f(j, { children: [
-          e && h && ((R = m[h]) == null ? void 0 : R.call(m, e)),
-          /* @__PURE__ */ n(U, { children: r }),
-          N && /* @__PURE__ */ f($, { children: [
-            P && /* @__PURE__ */ n(M, { name: "selected" }),
-            /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(x, { value: o, suffix: "%" }) })
+        /* @__PURE__ */ r(j, { "data-answerState": l, style: { width: `${R ? o : 0}%` } }),
+        /* @__PURE__ */ m(U, { children: [
+          e && C && ((S = I[C]) == null ? void 0 : S.call(I, e)),
+          /* @__PURE__ */ r($, { children: n }),
+          R && /* @__PURE__ */ m(M, { children: [
+            k && /* @__PURE__ */ r(W, { name: "selected" }),
+            /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(L, { value: o, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -78,5 +81,5 @@ const m = {
   );
 };
 export {
-  q as VotingOption
+  tt as VotingOption
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.81.0",
+  "version": "0.81.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -92,6 +92,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.33.0"
+    "@streamlayer/react": "^0.33.1"
   }
 }