@streamlayer/react-ui 0.75.1 → 0.76.1

package/lib/ui/app/masters.js

@@ -30,8 +30,10 @@ import "../video-player/styles.js";
 import "../gamification/question/notification/insight/styles.js";
 import "../gamification/question/notification/styles.js";
 import "../gamification/question/notification/tweet/index.js";
+import "../questions/twitter/index.js";
 import "../questions/twitter/account/index.js";
 import "../questions/twitter/account/styles.js";
+import "../questions/twitter/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
 import "../gamification/question/notification/prediction-result/index.js";
 import "../gamification/question/notification/prediction-result/animation-lines/index.js";
@@ -60,7 +62,7 @@ import "../navigation/button/index.js";
 const F = ({ sdk: r, className: i }) => {
   const [, m] = I(r);
   return /* @__PURE__ */ t(g, { className: i, feature: m, sdk: r });
-}, Et = ({ sdk: r, overlays: i, children: m }) => {
+}, Lt = ({ sdk: r, overlays: i, children: m }) => {
   const { sdkEnabled: p, sdkReady: e, activeOverlay: o, activateAndLoadOverlay: d, activateEventWithId: c, deactivate: l, isLogged: f } = C(r);
   return y(() => {
     import("./Features/Gamification/gamification-feature.js");
@@ -96,5 +98,5 @@ const F = ({ sdk: r, className: i }) => {
   ] });
 };
 export {
-  Et as MastersApp
+  Lt as MastersApp
 };

package/lib/ui/gamification/question/list/index.js

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Question as u } from "../index.js";
-import { Insight as s } from "../insight/index.js";
-import { QuestionsContainer as a } from "./styles.js";
+import { Question as b } from "../index.js";
+import { Insight as c } from "../insight/index.js";
+import { Twitter as p } from "../twitter/index.js";
+import { QuestionsContainer as d } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../constants.js";
 import "../styles.js";
@@ -14,18 +15,29 @@ import "../../../video-player/styles.js";
 import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
 import "../insight/styles.js";
-const L = ({ questions: r, openQuestion: o }) => /* @__PURE__ */ e(a, { children: r == null ? void 0 : r.map((t) => {
-  var m, n;
-  if (t.type === "question" && ((m = t.attributes) == null ? void 0 : m.attributes.case) === "question") {
+import "../../../questions/twitter/index.js";
+import "../../../questions/twitter/account/index.js";
+import "../../../questions/twitter/account/styles.js";
+import "../../../questions/twitter/styles.js";
+import "../twitter/styles.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
+const J = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ e(d, { children: r == null ? void 0 : r.map((t) => {
+  var o, u, a;
+  if (t.type === "question" && ((o = t.attributes) == null ? void 0 : o.attributes.case) === "question") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(u, { openQuestion: o, ...i }, i.questionId);
+    return /* @__PURE__ */ e(b, { openQuestion: m, ...i }, i.questionId);
   }
-  if (t.type === "insight" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "insight") {
+  if (t.type === "insight" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "insight") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ e(s, { openInsight: o, ...i }, i.questionId);
+    return /* @__PURE__ */ e(c, { openInsight: m, ...i }, i.questionId);
+  }
+  if (t.type === "tweet" && ((a = t.attributes) == null ? void 0 : a.attributes.case) === "tweet") {
+    const i = t.attributes.attributes.value, n = t.attributes.id, s = t.attributes.created;
+    return /* @__PURE__ */ e(p, { openTweet: m, ...i, tweetId: n, created: s }, n);
   }
   return null;
 }) });
 export {
-  L as QuestionList
+  J as QuestionList
 };

package/lib/ui/gamification/question/notification/index.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as o, Fragment as c } from "react/jsx-runtime";
+import { jsxs as p, jsx as o, Fragment as c } from "react/jsx-runtime";
 import { QuestionType as t } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as d } from "../../constants.js";
 import { Insight as f } from "./insight/index.js";
@@ -10,18 +10,20 @@ import "../../../icons/index.js";
 import "@linaria/react";
 import "../../../video-player/styles.js";
 import "./insight/styles.js";
+import "../../../questions/twitter/index.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
+import "../../../questions/twitter/styles.js";
 import "./tweet/styles.js";
-const R = ({
-  close: e,
+const y = ({
+  close: a,
   action: i,
-  data: { questionType: r, question: m, insight: l, tweet: p }
+  data: { questionType: r, question: m, insight: e, tweet: l }
 }) => {
   const n = d[r];
-  return n ? /* @__PURE__ */ a(h, { children: [
-    /* @__PURE__ */ o(I, { onClick: e, children: /* @__PURE__ */ o(T, { name: "icon-cross" }) }),
-    r !== t.TWEET && /* @__PURE__ */ a(C, { children: [
+  return n ? /* @__PURE__ */ p(h, { children: [
+    /* @__PURE__ */ o(I, { onClick: a, children: /* @__PURE__ */ o(T, { name: "icon-cross" }) }),
+    r !== t.TWEET && /* @__PURE__ */ p(C, { children: [
       /* @__PURE__ */ o(
         E,
         {
@@ -32,17 +34,17 @@ const R = ({
       ),
       /* @__PURE__ */ o(s, { children: n.label })
     ] }),
-    r === t.FACTOID && /* @__PURE__ */ o(f, { ...l, action: i }),
+    r === t.FACTOID && /* @__PURE__ */ o(f, { ...e, action: i }),
     r === t.TWEET && // ToDo: connect with real Api data
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    /* @__PURE__ */ o(W, { ...p, action: i }),
-    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ o(W, { ...l, action: i }),
+    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ p(c, { children: [
       /* @__PURE__ */ o(A, { children: m == null ? void 0 : m.title }),
       /* @__PURE__ */ o(D, { onClick: i, children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  R as Notification
+  y as Notification
 };

package/lib/ui/gamification/question/notification/tweet/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Notification } from '@streamlayer/sdk-web-notifications';
-import { TwitterContentProps } from '../../../../questions/twitter';
+import { type TwitterContentProps } from '../../../../questions/twitter';
 export declare const Tweet: React.FC<TwitterContentProps & {
     action: Notification['action'];
 }>;

package/lib/ui/gamification/question/notification/tweet/index.js

@@ -1,25 +1,17 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { Account as m } from "../../../../questions/twitter/account/index.js";
-import { Container as p, QuoteWrap as l, Quote as d, Details as h, Body as s, Image as u, ActionBtn as f } from "./styles.js";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { TwitterContent as e } from "../../../../questions/twitter/index.js";
+import { Container as n, QuoteWrap as m, Quote as l, ActionBtn as p } from "./styles.js";
+import "../../../../questions/twitter/account/index.js";
 import "../../../../icons/index.js";
 import "@linaria/react";
 import "react";
 import "../../../../questions/twitter/account/styles.js";
-const Q = ({
-  account: i,
-  body: n,
-  image: o,
-  title: c,
-  action: t
-}) => /* @__PURE__ */ e(p, { children: [
-  /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(d, { children: c }) }),
-  /* @__PURE__ */ e(h, { children: [
-    /* @__PURE__ */ r(m, { ...i }),
-    /* @__PURE__ */ r(s, { children: n }),
-    o && /* @__PURE__ */ r(u, { src: o })
-  ] }),
-  t && /* @__PURE__ */ r(f, { onClick: t, children: "View Tweet" })
+import "../../../../questions/twitter/styles.js";
+const j = ({ action: r, ...i }) => /* @__PURE__ */ o(n, { children: [
+  i.title && /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(l, { children: i.title }) }),
+  /* @__PURE__ */ t(e, { ...i }),
+  r && /* @__PURE__ */ t(p, { onClick: r, children: "View Insight" })
 ] });
 export {
-  Q as Tweet
+  j as Tweet
 };

package/lib/ui/gamification/question/notification/tweet/styles.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ActionBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
-export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuoteWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;

package/lib/ui/gamification/question/notification/tweet/styles.js

@@ -1,39 +1,24 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const t = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1t4f0x4",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("button")({
+}), n = /* @__PURE__ */ s("button")({
   name: "ActionBtn",
   class: "a16w1nl6",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
-  name: "Body",
-  class: "b14u54rf",
-  propsAsIs: !1
-}), n = /* @__PURE__ */ s("img")({
-  name: "Image",
-  class: "i1hxm6zo",
-  propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
-  name: "Details",
-  class: "d1s19yop",
-  propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), e = /* @__PURE__ */ s("div")({
   name: "QuoteWrap",
-  class: "q1qyx94r",
+  class: "q14u54rf",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("blockquote")({
+}), a = /* @__PURE__ */ s("blockquote")({
   name: "Quote",
-  class: "qs97clu",
+  class: "q1hxm6zo",
   propsAsIs: !1
 });
 export {
-  e as ActionBtn,
-  t as Body,
-  a as Container,
-  l as Details,
-  n as Image,
-  p as Quote,
-  c as QuoteWrap
+  n as ActionBtn,
+  t as Container,
+  a as Quote,
+  e as QuoteWrap
 };

package/lib/ui/gamification/question/twitter/index.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-import { TwitterContentProps } from '../../../questions/twitter';
-export declare const Twitter: React.FC<TwitterContentProps>;
+import { type TwitterContentProps } from '../../../questions/twitter';
+export declare const Twitter: React.FC<TwitterContentProps & {
+    openTweet?: (questionId: string) => void;
+}>;

package/lib/ui/gamification/question/twitter/index.js

@@ -1,18 +1,42 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { TwitterContent as i } from "../../../questions/twitter/index.js";
-import { Container as m, ActionButton as p } from "./styles.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { TwitterContent as l } from "../../../questions/twitter/index.js";
+import { isValidDate as f, formatDate as d, formatTime as c } from "../../../../utils/common.js";
+import { Container as u, DateTime as p, Quote as s, ActionButton as h } from "./styles.js";
 import "../../../questions/twitter/account/index.js";
 import "../../../icons/index.js";
 import "@linaria/react";
-import "react";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const u = (r) => /* @__PURE__ */ o(m, { children: [
-  /* @__PURE__ */ t(i, { ...r }),
-  /* @__PURE__ */ t(p, { children: "View Insight" })
-] });
+const M = ({
+  openTweet: m,
+  created: i,
+  ...t
+}) => {
+  const r = a(() => {
+    if (i) {
+      const e = new Date(i);
+      if (f(e))
+        return {
+          date: d(e),
+          time: c(e)
+        };
+    }
+    return null;
+  }, [i]);
+  return /* @__PURE__ */ n(u, { children: [
+    r && /* @__PURE__ */ n(p, { children: [
+      r.date,
+      " · ",
+      r.time
+    ] }),
+    t.title && /* @__PURE__ */ o(s, { children: t.title }),
+    /* @__PURE__ */ o(l, { ...t }),
+    m && /* @__PURE__ */ o(h, { onClick: () => m(t.tweetId), children: "View Insight" })
+  ] });
+};
 export {
-  u as Twitter
+  M as Twitter
 };

package/lib/ui/gamification/question/twitter/styles.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ActionButton: any;
+export declare const DateTime: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Quote: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & Record<never, unknown>>;

package/lib/ui/gamification/question/twitter/styles.js

@@ -1,17 +1,27 @@
-import { styled as t } from "@linaria/react";
-import { Button as o } from "../../../button/index.js";
+import { styled as s } from "@linaria/react";
+import { Button as t } from "../../../button/index.js";
 import "react/jsx-runtime";
 import "../../../button/styles.js";
-const c = /* @__PURE__ */ t("div")({
+const c = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cl56x6b",
   propsAsIs: !1
-}), s = () => o, i = /* @__PURE__ */ t(s())({
+}), o = () => t, r = /* @__PURE__ */ s(o())({
   name: "ActionButton",
   class: "a11pzf92",
   propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "DateTime",
+  class: "d1hbaleq",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("blockquote")({
+  name: "Quote",
+  class: "qvvgqjm",
+  propsAsIs: !1
 });
 export {
-  i as ActionButton,
-  c as Container
+  r as ActionButton,
+  c as Container,
+  m as DateTime,
+  i as Quote
 };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { QuestionStatus, QuestionType } from '@streamlayer/sdk-web-types';
 interface FeedbackProps {
-    feedbackMessages: Partial<Record<'correctFeedback' | 'incorrectFeedback', {
+    feedbackMessages?: Partial<Record<'correctFeedback' | 'incorrectFeedback', {
         description: string;
         title: string;
     }>>;
@@ -10,6 +10,9 @@ interface FeedbackProps {
     questionVotedCorrectly?: boolean;
     hasCorrectAnswer: boolean;
     questionStatus: QuestionStatus;
+    votedInCurrentRender: boolean;
+    votedAfterQuestionClosed: boolean;
+    enteredAnActiveQuestion: boolean;
 }
 export declare const Feedback: React.FC<FeedbackProps>;
 export {};

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

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