fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/classic-quiz-play/src/components/Shared/ScoreStateWrapper.js

@@ -0,0 +1,443 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import $ from "react";
+import { Box as l, Tabs as _, TabList as E, Tab as w, tabClasses as z, Typography as s, TabPanel as C } from "@mui/joy";
+import { useInternalTheme as L, isMobile as U, useCornerRadius as Y, useColors as a, useFontFamily as k, useSpacingScale as v } from "../../../../common/src/functions/theme.js";
+import { stripHtmlTags as G } from "../../../../common/src/functions/helpers.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+import J from "../../assets/school.svg.js";
+import K from "../../assets/sports_score.svg.js";
+import N from "../../assets/info.svg.js";
+import { useTranslation as X } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ae = ({
+  questions: T,
+  userParticipation: H,
+  resultsTabPanelSxProps: W,
+  isOverlayVariant: o,
+  children: B,
+  brandingColors: i
+}) => {
+  const [d, D] = $.useState(0), n = L(), { t: x } = X(), p = U(), j = Y().md, h = o ? n.colorSchemes.dark.textPrimary : a().textPrimary, g = o ? n.colorSchemes.dark.textSecondary : a().textSecondary, u = k().primary, m = k().secondary, b = o ? n.colorSchemes.dark.secondaryContainer : a().secondaryContainer, P = i != null && i.backgroundColor || o ? n.colorSchemes.dark.surfaceVariant : a().surfaceVariant, y = v(), Q = a().palette.success.plainColor, R = a().palette.danger.plainColor;
+  let S = o ? n.colorSchemes.dark.textPrimary : a().textPrimary;
+  i != null && i.primaryColor && (S = i.primaryColor);
+  const M = (r, f) => {
+    var F, I, A;
+    const t = T.find(
+      (c) => c.questionId === r.questionId
+    );
+    return /* @__PURE__ */ e.jsx(
+      l,
+      {
+        sx: {
+          borderRadius: j,
+          p: y.md,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          alignSelf: "stretch",
+          gap: y.md,
+          backdropFilter: "blur(4px)",
+          position: "relative",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: P,
+            opacity: 0.5,
+            borderRadius: "inherit",
+            zIndex: 0,
+            backdropFilter: "blur(4px)"
+          },
+          "& > *": {
+            position: "relative",
+            zIndex: 1
+          }
+        },
+        children: /* @__PURE__ */ e.jsxs(
+          l,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              gap: "12px",
+              alignSelf: "stretch"
+            },
+            children: [
+              /* @__PURE__ */ e.jsxs(
+                l,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    alignSelf: "stretch"
+                  },
+                  children: [
+                    /* @__PURE__ */ e.jsxs(
+                      s,
+                      {
+                        sx: {
+                          alignSelf: "stretch",
+                          color: g,
+                          fontFamily: m,
+                          fontSize: "0.75em",
+                          fontStyle: "normal",
+                          fontWeight: 500,
+                          lineHeight: "166%",
+                          letterSpacing: "1px",
+                          textTransform: "uppercase"
+                        },
+                        children: [
+                          x("classicQuiz.question"),
+                          " ",
+                          f + 1
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(
+                      s,
+                      {
+                        sx: {
+                          alignSelf: "stretch",
+                          color: h,
+                          fontFamily: u,
+                          fontSize: "1.25em",
+                          fontStyle: "normal",
+                          fontWeight: 500,
+                          lineHeight: "120%",
+                          letterSpacing: "0.15px"
+                        },
+                        children: t == null ? void 0 : t.question
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e.jsx(l, { sx: { alignSelf: "stretch" }, children: r.correct ? /* @__PURE__ */ e.jsxs(
+                s,
+                {
+                  sx: {
+                    color: o ? n.colorSchemes.dark.palette.success.plainColor : Q,
+                    fontFamily: m,
+                    fontSize: "1em",
+                    fontStyle: "normal",
+                    fontWeight: 700,
+                    lineHeight: "20px",
+                    letterSpacing: "0.15px"
+                  },
+                  children: [
+                    x("classicQuiz.yourAnswer"),
+                    " ",
+                    (F = t == null ? void 0 : t.options.find(
+                      (c) => c.optionId === r.optionId
+                    )) == null ? void 0 : F.option
+                  ]
+                }
+              ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                /* @__PURE__ */ e.jsxs(
+                  s,
+                  {
+                    sx: {
+                      color: o ? n.colorSchemes.dark.palette.danger.plainColor : R,
+                      fontFamily: m,
+                      fontSize: "1em",
+                      fontStyle: "normal",
+                      fontWeight: 600,
+                      lineHeight: "20px",
+                      letterSpacing: "0.15px"
+                    },
+                    children: [
+                      x("classicQuiz.yourAnswer"),
+                      " ",
+                      (I = t == null ? void 0 : t.options.find(
+                        (c) => c.optionId === r.optionId
+                      )) == null ? void 0 : I.option
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e.jsxs(
+                  s,
+                  {
+                    sx: {
+                      color: h,
+                      fontFamily: m,
+                      fontSize: "1em",
+                      fontStyle: "normal",
+                      fontWeight: 600,
+                      lineHeight: "20px",
+                      letterSpacing: "0.15px"
+                    },
+                    children: [
+                      x("classicQuiz.correctAnswer"),
+                      " ",
+                      (A = t == null ? void 0 : t.options.find((c) => c.correct)) == null ? void 0 : A.option
+                    ]
+                  }
+                )
+              ] }) }),
+              t != null && t.explanation ? /* @__PURE__ */ e.jsxs(
+                l,
+                {
+                  sx: {
+                    display: "flex",
+                    py: "4px",
+                    pr: "16px",
+                    pl: "0px",
+                    justifyContent: "center",
+                    gap: "10px",
+                    alignItems: "flex-start",
+                    alignSelf: "stretch"
+                  },
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      "img",
+                      {
+                        src: N,
+                        alt: "explanation-icon",
+                        style: {
+                          display: "flex",
+                          width: "20px",
+                          height: "20px",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          filter: o ? "brightness(0) invert(1)" : "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(
+                      s,
+                      {
+                        sx: {
+                          flex: "1 0 0",
+                          color: h,
+                          fontFamily: m,
+                          fontSize: "0.875em",
+                          fontStyle: "normal",
+                          fontWeight: 400,
+                          lineHeight: "143%",
+                          letterSpacing: "0.17px"
+                        },
+                        children: G(t == null ? void 0 : t.explanation)
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+            ]
+          },
+          `single-answer-${r.questionId}`
+        )
+      },
+      `user-answer-${r.questionId}`
+    );
+  };
+  return /* @__PURE__ */ e.jsx(l, { sx: { width: "100%" }, children: /* @__PURE__ */ e.jsxs(
+    _,
+    {
+      value: d,
+      onChange: (r, f) => D(f),
+      sx: {
+        borderRadius: j,
+        width: "100%",
+        // Ensure tabs container takes full width
+        backgroundColor: "transparent"
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          E,
+          {
+            sx: {
+              fontSize: "1em",
+              "--Icon-fontSize": "1.25em",
+              flexDirection: p ? "column" : "row"
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                w,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flex: p ? "0 0 auto" : 1,
+                    width: p ? "100%" : "auto",
+                    borderBottom: "1px solid " + b,
+                    opacity: "60%",
+                    py: "12px",
+                    px: "16px",
+                    gap: "8px",
+                    "&:not(.Mui-selected):hover": {
+                      bgcolor: o ? "#FAFAFA14" : "#2121210A"
+                    },
+                    [`&.${z.selected}`]: {
+                      bgcolor: o ? "#FAFAFA14" : "#2121210A",
+                      borderBottom: "3px solid " + S,
+                      opacity: "100%",
+                      mb: "-1px"
+                    }
+                  },
+                  disableIndicator: !0,
+                  children: /* @__PURE__ */ e.jsxs(
+                    l,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        gap: "8px"
+                      },
+                      children: [
+                        /* @__PURE__ */ e.jsx(
+                          "img",
+                          {
+                            src: K,
+                            alt: "answers-icon",
+                            style: {
+                              display: "flex",
+                              width: "24px",
+                              height: "24px",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              filter: o || n.mode == "dark" ? "brightness(0) invert(1)" : "none"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e.jsx(
+                          s,
+                          {
+                            sx: {
+                              color: g,
+                              fontFamily: u,
+                              fontSize: "1em",
+                              fontStyle: "normal",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.4px",
+                              textTransform: "uppercase"
+                            },
+                            children: x("classicQuiz.results")
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                w,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flex: p ? "0 0 auto" : 1,
+                    width: p ? "100%" : "auto",
+                    borderBottom: "1px solid " + b,
+                    opacity: "60%",
+                    py: "12px",
+                    px: "16px",
+                    gap: "8px",
+                    "&:not(.Mui-selected):hover": {
+                      bgcolor: o ? "#FAFAFA14" : "#2121210A"
+                    },
+                    [`&.${z.selected}`]: {
+                      bgcolor: o ? "#FAFAFA14" : "#2121210A",
+                      borderBottom: "3px solid " + S,
+                      opacity: "100%",
+                      mb: "-1px"
+                    }
+                  },
+                  disableIndicator: !0,
+                  children: /* @__PURE__ */ e.jsxs(
+                    l,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        gap: "8px"
+                      },
+                      children: [
+                        /* @__PURE__ */ e.jsx(
+                          "img",
+                          {
+                            src: J,
+                            alt: "answers-icon",
+                            style: {
+                              display: "flex",
+                              width: "24px",
+                              height: "24px",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              filter: o || n.mode == "dark" ? "brightness(0) invert(1)" : "none"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e.jsx(
+                          s,
+                          {
+                            sx: {
+                              color: g,
+                              fontFamily: u,
+                              fontSize: "1em",
+                              fontStyle: "normal",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.4px",
+                              textTransform: "uppercase"
+                            },
+                            children: x("classicQuiz.answers")
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        d === 0 && /* @__PURE__ */ e.jsx(C, { value: 0, sx: { ...W, fontSize: "1em" }, children: B }),
+        d === 1 && /* @__PURE__ */ e.jsx(
+          C,
+          {
+            value: 1,
+            sx: {
+              overflowY: "auto",
+              maxHeight: { md: "450px" },
+              fontSize: "1em",
+              display: "flex",
+              flexDirection: "column",
+              p: y.lg
+            },
+            children: /* @__PURE__ */ e.jsx(
+              l,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  gap: "16px",
+                  alignSelf: "stretch"
+                },
+                children: H.map((r, f) => M(r, f))
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  ae as default
+};

package/packages/classic-quiz-play/src/components/Shared/Stepper.js

@@ -0,0 +1,59 @@
+import { j as a } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as u } from "@mui/joy";
+import { getSpacing as g, useInternalTheme as f } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const I = (o) => {
+  const d = () => {
+    const e = f(), m = e.customRadius.light.full, h = o.classicQuiz.questionsCount;
+    return Array.from({ length: h }, (x, i) => {
+      const s = i + 1;
+      let t, r;
+      if (s < o.currentQuestion) {
+        const l = o.userParticipation.find(
+          (c) => c.questionId === o.classicQuiz.questions[i].questionId
+        );
+        if (l) {
+          const n = o.classicQuiz.questions[i].options.find(
+            (p) => p.optionId === l.optionId
+          );
+          n != null && n.correct ? (t = e.colorSchemes.light.palette.success.plainColor, r = e.colorSchemes.light.palette.success.outlinedBorder) : (t = e.colorSchemes.light.palette.danger.plainColor, r = e.colorSchemes.light.palette.danger.outlinedBorder);
+        } else
+          t = e.colorSchemes.light.secondaryContainer, r = e.colorSchemes.light.secondaryContainer;
+      } else s === o.currentQuestion ? (t = o.brandingPrimaryColor || e.colorSchemes.light.palette.primary.plainColor, r = o.brandingPrimaryColor || e.colorSchemes.light.palette.primary.outlinedBorder) : (t = e.colorSchemes.light.secondaryContainer, r = e.colorSchemes.light.outlineEnabledBorder);
+      return /* @__PURE__ */ a.jsx(
+        u,
+        {
+          sx: {
+            maxWidth: "82.67px",
+            width: "100%",
+            height: "8px",
+            borderRadius: m,
+            backgroundColor: t,
+            border: `1px solid ${r}`,
+            transition: "background-color 0.3s ease"
+          }
+        },
+        `step-${s}`
+      );
+    });
+  };
+  return /* @__PURE__ */ a.jsx(
+    u,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        gap: "8px",
+        py: g("xs")
+      },
+      children: d()
+    }
+  );
+};
+export {
+  I as default
+};

package/packages/classic-quiz-play/src/components/Shared/Stopwatch.js

@@ -0,0 +1,109 @@
+import { j as a } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useColors as t, useCornerRadius as h, useFontFamily as T } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { Box as w, Typography as b } from "@mui/joy";
+import { useCallback as S, useEffect as k } from "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+import B from "../../../../../node_modules/@mui/icons-material/esm/TimerOutlined.js";
+const E = (o) => {
+  let r;
+  const g = t().palette.danger.softBg, l = t().palette.danger.plainColor, d = t().palette.warning.softBg, s = t().palette.warning.plainColor, f = o.brandingPrimaryColor || t().palette.primary.plainColor, p = h().xl, x = T().secondary, m = t().palette.primary.onPrimary, y = {
+    "@keyframes pulse": {
+      "0%": {
+        transform: "scale(1)"
+      },
+      "50%": {
+        transform: "scale(1.05)"
+      },
+      "100%": {
+        transform: "scale(1)"
+      }
+    }
+  }, c = S(() => {
+    const n = o.quizType === "countdown" ? o.timer - 1 : o.timer + 1;
+    o.onTimeUpdate(n);
+  }, [o.onTimeUpdate]);
+  k(() => (o.isRunning && (r = setInterval(c, 1e3)), () => {
+    r && clearInterval(r);
+  }), [o.isRunning, c, o.timer]);
+  const C = (n) => {
+    const i = Math.floor(n / 60), u = n % 60;
+    return `${i < 10 ? "0" : ""}${i}:${u < 10 ? "0" : ""}${u}${i > 0 ? "m" : "s"}`;
+  }, e = () => {
+    if (o.quizType === "countdown") {
+      const n = o.timer / o.initialTime * 100;
+      if (n <= 30)
+        return {
+          background: g,
+          color: l,
+          iconColor: l,
+          animation: "pulse 1s infinite"
+        };
+      if (n <= 50)
+        return {
+          background: d,
+          color: s,
+          iconColor: s
+        };
+    }
+    return {
+      background: f,
+      color: m,
+      iconColor: m
+    };
+  };
+  return /* @__PURE__ */ a.jsxs(
+    w,
+    {
+      sx: {
+        py: "8px",
+        pl: "12px",
+        pr: "16px",
+        display: "flex",
+        gap: "4px",
+        alignItems: "center",
+        bgcolor: e().background,
+        borderRadius: p,
+        maxWidth: "105px",
+        maxHeight: "40px",
+        transition: "all 0.3s ease",
+        animation: e().animation,
+        ...y,
+        zIndex: 10
+      },
+      children: [
+        /* @__PURE__ */ a.jsx(
+          B,
+          {
+            sx: {
+              width: "24px",
+              height: "24px",
+              color: e().iconColor,
+              transition: "color 0.3s ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ a.jsx(
+          b,
+          {
+            sx: {
+              fontFamily: x,
+              fontWeight: 400,
+              fontSize: "1em",
+              lineHeight: "150%",
+              letterSpacing: "0.15px",
+              color: e().color,
+              transition: "color 0.3s ease"
+            },
+            children: C(o.timer)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as default
+};

package/packages/classic-quiz-play/src/components/Variants/Overlay/Error/OverlayError.js

@@ -0,0 +1,45 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as n } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as s } from "../../../../../../common/src/functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import c from "../../../../../../common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import g from "../../../../assets/default-quiz-bg.png.js";
+import u from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import d from "../../../Shared/PresentedBy.js";
+import { useTranslation as f } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const U = (r) => {
+  const { t: e } = f(), o = n(), l = r.defaultImagePlaceholderUrl ? r.defaultImagePlaceholderUrl : o ? u : g, { brandingLogo: a } = s(
+    r.classicQuiz.branding || null
+  );
+  return /* @__PURE__ */ t.jsx(
+    c,
+    {
+      entity: r.classicQuiz,
+      headline: e("classicQuiz.headline"),
+      tryAgainButtonText: e("classicQuiz.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: l,
+      isApiError: r.isApiError,
+      toggleTryAgain: r.toggleTryAgain,
+      renderPresentedBy: (m) => {
+        var i;
+        return /* @__PURE__ */ t.jsx(
+          d,
+          {
+            brandingLogo: a,
+            textColor: m,
+            label: ((i = r.classicQuiz.labels) == null ? void 0 : i.sponsor) || null
+          }
+        );
+      },
+      rulesDisplay: r.rulesDisplay
+    }
+  );
+};
+export {
+  U as default
+};

package/packages/classic-quiz-play/src/components/Variants/Overlay/LeadCollection/OverlayLeadAfterCollection.js

@@ -0,0 +1,35 @@
+import { j as i } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import "react";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "@mui/joy";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import m from "../../../../../../common/src/components/LeadCollection/OverlayLeadAfterCollection.js";
+import r from "../../../../assets/default-quiz-bg.png.js";
+import a from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import l from "../../../Shared/PresentedBy.js";
+import o from "../../../Leads/CollectLeadWrapper.js";
+import { useTranslation as d } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const P = (e) => {
+  const { t } = d();
+  return /* @__PURE__ */ i.jsx(
+    m,
+    {
+      entity: e.classicQuiz,
+      headline: t("classicQuiz.headline"),
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholder: e.defaultImagePlaceholderUrl || r,
+      mobileImagePlaceholder: a,
+      onLeadSubmitted: e.onLeadSubmitted,
+      isSubmitting: e.isSubmitting,
+      PresentedBy: l,
+      CollectLeadWrapper: o,
+      rulesDisplay: e.rulesDisplay
+    }
+  );
+};
+export {
+  P as default
+};