@streamlayer/react-ui 1.17.0 → 1.18.1

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

@@ -1,21 +1,21 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as V, useLayoutEffect as W } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as N } from "@streamlayer/sdk-web-types";
 import { AnimatedCounter as $ } from "../../../animated-counter/index.js";
 import { IconDefault as y, IconContainer as F, IconWrap as M, IconCircle as z, ButtonContainer as G, ButtonPctWrap as H, ButtonPct as J, ButtonBody as K, Title as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
-const E = {
+const h = {
   [a.CENTERED]: (t) => /* @__PURE__ */ e(y, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
   [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(F, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(M, { style: { backgroundImage: `url(${t})` } }) }),
   [a.ROUNDED]: (t) => /* @__PURE__ */ e(z, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, tt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+}, tt = ({ questionType: t, hasCorrectAnswer: s, correct: n, youVoted: r, questionVoted: i }) => {
   if (t === o.POLL && r)
     return "voted";
   if (t === o.PREDICTION) {
-    if (!c && i)
+    if (!s && i)
       return r ? "voted" : "unset";
-    if (c && i)
+    if (s && i)
       return r ? n ? "correct" : "incorrect" : "unset";
     if (r)
       return "correct";
@@ -23,74 +23,77 @@ const E = {
   return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
 }, et = ({
   questionType: t,
-  questionVoted: c,
+  questionVoted: s,
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: i
-}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === p.RESOLVED && n : !1, st = (t) => {
-  var S;
+}) => t === o.TRIVIA ? s && n : t === o.PREDICTION ? s && n && r || i === N.RESOLVED && n : !1, ct = (t) => {
+  var T;
   const {
     // option props
-    id: c,
+    id: s,
     icon: n,
     text: r,
     percentageDecimal: i,
-    points: D,
+    points: S,
     // extra props
-    onVote: v,
-    markThatVoted: O,
+    onVote: p,
+    markThatVoted: D,
     onPercentsAnimated: f,
-    youSelected: h,
-    youVoted: g,
-    questionVoted: s,
+    youSelected: E,
+    youVoted: O,
+    questionVoted: c,
     imageMode: C,
-    answerTimeExpired: w,
-    questionStatus: P,
-    isLoading: A,
+    answerTimeExpired: g,
+    questionStatus: v,
+    isLoading: k,
     questionType: d,
-    correct: k,
-    hasCorrectAnswer: x,
-    votedAfterQuestionClosed: L,
-    enteredAnActiveQuestion: R,
+    correct: x,
+    hasCorrectAnswer: L,
+    votedAfterQuestionClosed: B,
+    enteredAnActiveQuestion: P,
     marketClosed: I
-  } = t, [B, T] = V(0), m = tt(t), Q = et({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: x, questionStatus: P }), u = I && d === o.PREDICTION, N = s || u, b = d === o.PREDICTION && !s && !I, j = s && !h && m !== "incorrect" && !g;
+  } = t, [Q, R] = V(0), m = tt(t), b = et({ questionType: d, questionVoted: c, correct: x, hasCorrectAnswer: L, questionStatus: v }), u = I && d === o.PREDICTION, w = c || u, j = d === o.PREDICTION && !c && !I, A = c && !E && m !== "incorrect" && !O;
   return W(() => {
-    T(0), requestAnimationFrame(() => {
-      T(i);
+    R(0), requestAnimationFrame(() => {
+      R(i);
     });
   }, [i]), /* @__PURE__ */ l(
     G,
     {
-      value: c,
-      "data-selected": h,
+      id: "voteAnswerContainer",
+      value: s,
+      "data-selected": E,
       "data-answer-state": m,
-      disabled: s || A || w || u && !R || u && R && L,
-      "data-is-not-checked": j,
+      disabled: c || k || g || u && !P || u && P && B,
+      "data-is-not-checked": A,
       onClick: (U) => {
-        O(
-          d === o.PREDICTION ? I : P === p.RESOLVED
-        ), v(U);
+        D(
+          d === o.PREDICTION ? I : v === N.RESOLVED
+        ), p(U);
       },
       children: [
         /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(
           J,
           {
+            id: "voteAnswerRct",
             "data-answer-state": m,
-            style: { width: `${N ? B : 0}%` },
+            "data-is-not-checked": A,
+            style: { width: `${w ? Q : 0}%` },
             onTransitionEnd: () => {
               u || f == null || f();
             }
           }
         ) }),
-        /* @__PURE__ */ l(K, { children: [
-          n && C && ((S = E[C]) == null ? void 0 : S.call(E, n)),
+        /* @__PURE__ */ l(K, { id: "voteAnswer", children: [
+          n && C && ((T = h[C]) == null ? void 0 : T.call(h, n)),
           /* @__PURE__ */ e(X, { children: r }),
-          b && /* @__PURE__ */ l("div", { children: [
-            D,
+          j && /* @__PURE__ */ l("div", { children: [
+            S,
             /* @__PURE__ */ e(Y, { children: "pts" })
           ] }),
-          N && /* @__PURE__ */ l(Z, { children: [
-            Q && /* @__PURE__ */ e(_, { name: "selected" }),
+          w && /* @__PURE__ */ l(Z, { id: "voteAnswerIndicators", children: [
+            b && /* @__PURE__ */ e(_, { name: "selected" }),
             /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e($, { value: i, suffix: "%" }) })
           ] })
         ] })
@@ -99,5 +102,5 @@ const E = {
   );
 };
 export {
-  st as VotingOption
+  ct as VotingOption
 };

package/lib/ui/icons/index.d.ts

@@ -38,6 +38,7 @@ export declare const icons: {
     'icon-btn-leaderboard': any;
     'icon-arrow': any;
     'icon-twitter-verified': any;
+    'icon-trophy-bet-pack': any;
     dashboard: any;
     correct: any;
     incorrect: any;
@@ -52,6 +53,10 @@ export declare const icons: {
     iconCopySuccess: any;
     chevronRight: any;
     noImageIcon: any;
+    iconArrowRight: any;
+    iconEarlyPrediction: any;
+    iconArrowPrev: any;
+    mastersLogoWhite: any;
 };
 export declare const IconsLibrary: () => import("react/jsx-runtime").JSX.Element;
 type SvgIconProps = {