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

package/packages/match-quiz-play/src/components/Variants/Split/Error/MatchQuizSplitError.js

@@ -0,0 +1,42 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as d } 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 "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import c from "../../../../../../common/src/components/Skeletons/Split/ApiError/SplitApiErrorSkeleton.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import h from "../../../Shared/MainCard.js";
+import b from "../../../Shared/PresentedBy.js";
+import { useTranslation as f } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const M = (i) => {
+  var e, a, n, l;
+  const g = d(), { t: o } = f(), r = ((e = i.matchQuiz.branding) == null ? void 0 : e.colors) || null, u = g ? ((a = i.matchQuiz.branding) == null ? void 0 : a.images.mobileLogo) || ((n = i.matchQuiz.branding) == null ? void 0 : n.images.mainLogo) || "" : ((l = i.matchQuiz.branding) == null ? void 0 : l.images.mainLogo) || "";
+  return /* @__PURE__ */ t.jsx(h, { brandingBorderColor: (r == null ? void 0 : r.borderColor) || null, children: /* @__PURE__ */ t.jsx(
+    c,
+    {
+      entity: i.matchQuiz,
+      headline: o("matchQuiz.headline"),
+      tryAgainButtonText: o("matchQuiz.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: i.defaultImagePlaceholderUrl,
+      isApiError: i.isApiError,
+      toggleTryAgain: i.toggleTryAgain,
+      renderPresentedBy: (s) => {
+        var m;
+        return /* @__PURE__ */ t.jsx(
+          b,
+          {
+            brandingLogo: u,
+            textColor: s,
+            label: ((m = i.matchQuiz.labels) == null ? void 0 : m.sponsor) || null
+          }
+        );
+      },
+      rulesDisplay: i.rulesDisplay
+    }
+  ) });
+};
+export {
+  M as default
+};

package/packages/match-quiz-play/src/components/Variants/Split/FinishedGame/MatchQuizSplitFinishedGame.js

@@ -0,0 +1,185 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n, Typography as s } from "@mui/joy";
+import { useInternalTheme as E, isMobile as J, useColors as l, useFontFamily as I, useCornerRadius as K, useSpacingScale as N, useImageBackgroundGradient as X } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as Y, stripHtmlTags as Z } 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 { WidgetTemplate as k } from "../../../../../../common/src/enums/enums.js";
+import _ from "../../../../../../common/src/components/Rules.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as $ } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import ee from "../../../Shared/MainCard.js";
+import te from "../../../../assets/default-quiz-bg.png.js";
+import ie from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import ne from "../../../Shared/PresentedBy.js";
+import { createStyles as oe } from "./MatchQuizSplitFinishedGame.styles.js";
+import re from "../../../Shared/FinishedGameWrapper/FinishedGameWrapper.js";
+import { useMatchQuizMarketsResults as ae } from "../../../../hooks/useMatchQuizMarketsResults.js";
+import { useMatchQuizLeaderboard as se } from "../../../../hooks/useMatchQuizLeaderboard.js";
+import le from "../../../Shared/Leaderboard/LeaderboardComponent.js";
+import ce from "../../../Shared/Leaderboard/RoundedPagination.js";
+import { useTranslation as me } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Me = (t) => {
+  var j, b, C, p, z, P, Q, S, T;
+  const d = E(), { t: B } = me(), r = J(), i = ((j = t.matchQuiz.branding) == null ? void 0 : j.colors) || null, a = r ? ((C = (b = t.matchQuiz.branding) == null ? void 0 : b.images) == null ? void 0 : C.mobileLogo) || ((z = (p = t.matchQuiz.branding) == null ? void 0 : p.images) == null ? void 0 : z.mainLogo) || "" : ((Q = (P = t.matchQuiz.branding) == null ? void 0 : P.images) == null ? void 0 : Q.mainLogo) || "", F = t.defaultImagePlaceholderUrl ? t.defaultImagePlaceholderUrl : r ? ie : te, L = $(
+    {
+      images: t.matchQuiz.images,
+      imagePlaceholder: F
+    },
+    k.SPLIT
+  ), R = l().palette.danger.plainColor, u = (i == null ? void 0 : i.contentColor) || l().textColor, w = (i == null ? void 0 : i.secondaryColor) || l().textColor, x = I().secondary, M = "60%", D = I().primary, H = (i == null ? void 0 : i.backgroundColor) || l().surfaceVariant, W = K(), h = N(), G = X(
+    k.SPLIT
+  ), o = oe({
+    finalImage: L,
+    spacingScale: h,
+    borderRadius: W,
+    fontFamilyPrimary: D,
+    fontFamilySecondary: x,
+    secondaryColor: w,
+    opacity: M,
+    bgcolor: Y(H || ""),
+    textColor: u,
+    brandingColors: i,
+    darkTextColor: d.colorSchemes.dark.textColor,
+    imageBackgroundGradient: G,
+    isMobile: r,
+    dangerColor: R,
+    isTabulated: t.showPredictionDetails || !1
+  }), c = ((S = t.matchQuiz.labels) == null ? void 0 : S.sponsor) || null, { leaderboard: V, userRankings: g, pagination: m, currentPage: A, goToPage: O } = se(t.matchQuiz.id, t.sdk), v = ae(
+    t.matchQuiz.id,
+    t.sdk,
+    t.showPredictionDetails || !1
+  ), f = () => /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(n, { sx: o.questionAreaContent, children: /* @__PURE__ */ e.jsxs(n, { sx: o.mainContentContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      le,
+      {
+        leaderboard: V,
+        userRankings: g,
+        matchQuiz: t.matchQuiz,
+        showHeading: !t.showPredictionDetails,
+        isSplitVariant: !0
+      }
+    ),
+    g && m && m.numberOfPages > 1 && /* @__PURE__ */ e.jsx(n, { sx: o.paginationContainer, children: /* @__PURE__ */ e.jsx(
+      ce,
+      {
+        count: m.numberOfPages,
+        page: A,
+        onChange: O,
+        size: "sm",
+        showFirstButton: !1,
+        showLastButton: !1,
+        siblingCount: 0
+      }
+    ) }),
+    a && r && /* @__PURE__ */ e.jsxs(
+      n,
+      {
+        sx: {
+          minWidth: "180px",
+          display: "flex",
+          gap: "8px",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          fontSize: "1em"
+        },
+        children: [
+          c && /* @__PURE__ */ e.jsx(
+            s,
+            {
+              level: "body-sm",
+              sx: {
+                fontWeight: 400,
+                lineHeight: "166%",
+                letterSpacing: "0.4px",
+                textAlign: "right",
+                fontSize: "1em",
+                color: u,
+                fontFamily: x
+              },
+              children: c
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: a,
+              alt: "branding-logo",
+              style: {
+                maxHeight: "50px",
+                maxWidth: "100px"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) }), U = (q) => /* @__PURE__ */ e.jsx(
+    ne,
+    {
+      brandingLogo: a,
+      textColor: q,
+      label: c
+    }
+  ), y = () => /* @__PURE__ */ e.jsx(n, { sx: o.headlineSection, children: /* @__PURE__ */ e.jsxs(n, { sx: o.headlineContent, children: [
+    /* @__PURE__ */ e.jsxs(n, { children: [
+      /* @__PURE__ */ e.jsxs(
+        n,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: r ? "center" : "flex-start",
+            gap: h["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ e.jsx(s, { sx: o.headlineText, children: B("matchQuiz.headline") }),
+            /* @__PURE__ */ e.jsx(
+              _,
+              {
+                rules: t.matchQuiz.rules || "",
+                rulesDisplay: t.rulesDisplay,
+                isOverlayVariant: !1
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(n, { sx: o.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(s, { sx: o.titleText, children: t.matchQuiz.title }),
+        /* @__PURE__ */ e.jsx(s, { sx: o.descriptionText, children: Z(t.matchQuiz.description) })
+      ] })
+    ] }),
+    a && !r && /* @__PURE__ */ e.jsx(n, { children: U(
+      (i == null ? void 0 : i.contentColor) || d.colorSchemes.dark.textColor
+    ) })
+  ] }) });
+  return /* @__PURE__ */ e.jsx(ee, { brandingBorderColor: (i == null ? void 0 : i.borderColor) || null, children: t.showPredictionDetails ? /* @__PURE__ */ e.jsxs(
+    re,
+    {
+      prediction: t.prediction,
+      marketsResults: v,
+      brandingColors: (T = t.matchQuiz.branding) == null ? void 0 : T.colors,
+      resultsTabPanelSxProps: {
+        display: "flex",
+        flexDirection: r ? "column" : "row",
+        px: 0,
+        pb: 0,
+        pt: 0
+      },
+      children: [
+        y(),
+        f()
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    y(),
+    f()
+  ] }) });
+};
+export {
+  Me as default
+};

package/packages/match-quiz-play/src/components/Variants/Split/FinishedGame/MatchQuizSplitFinishedGame.styles.js

@@ -0,0 +1,233 @@
+const a = (e) => {
+  var i, t, n;
+  return {
+    // Main headline section with background image
+    headlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.isTabulated ? 0 : e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.isTabulated ? 0 : e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Headline content wrapper
+    headlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Headline typography
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((i = e.brandingColors) == null ? void 0 : i.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((t = e.brandingColors) == null ? void 0 : t.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((n = e.brandingColors) == null ? void 0 : n.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Question area
+    questionArea: {
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    },
+    // Lead content container (filter screen)
+    leadContentContainer: {
+      p: e.spacingScale.md,
+      gap: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)",
+      bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+      borderRadius: e.borderRadius.sm
+    },
+    // Question area content wrapper
+    questionAreaContent: {
+      p: e.spacingScale.lg,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "16px",
+      width: e.isMobile ? "auto" : "100%"
+    },
+    // Main content container
+    mainContentContainer: {
+      p: e.spacingScale.lg,
+      gap: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      backdropFilter: "blur(4px)",
+      bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+      borderRadius: e.borderRadius.sm,
+      minHeight: "300px"
+    },
+    // Game state container
+    gameStateContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.xs,
+      textAlign: "center"
+    },
+    // State title
+    stateTitle: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 700,
+      fontSize: "1.5em",
+      lineHeight: "133%",
+      letterSpacing: "0.15px",
+      color: e.textColor
+    },
+    // State description
+    stateDescription: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 400,
+      fontSize: "1.25em",
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      color: e.secondaryColor,
+      opacity: e.opacity
+    },
+    // Live indicator container
+    liveIndicatorContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.spacingScale.xs
+    },
+    // Live indicator
+    liveIndicator: {
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      backgroundColor: e.dangerColor,
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": {
+          opacity: 1,
+          transform: "scale(1)"
+        },
+        "50%": {
+          opacity: 0.7,
+          transform: "scale(1.1)"
+        },
+        "100%": {
+          opacity: 1,
+          transform: "scale(1)"
+        }
+      }
+    },
+    // Live text
+    liveText: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: "1em",
+      color: e.dangerColor,
+      textTransform: "uppercase",
+      letterSpacing: "0.5px"
+    },
+    // Pagination container
+    paginationContainer: {
+      display: "flex",
+      justifyContent: "center",
+      ml: 0
+    },
+    // Navigation container
+    navigationContainer: {
+      display: "flex",
+      gap: e.spacingScale.md,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    matchResultBadge: {
+      display: "flex",
+      alignItems: "center",
+      alignSelf: "center",
+      gap: e.spacingScale.xs,
+      fontSize: "0.75em",
+      padding: "2px 6px",
+      minHeight: "20px",
+      borderRadius: e.borderRadius.sm,
+      border: `1px solid ${e.textColor}20`,
+      backgroundColor: e.textColor + "10",
+      width: "fit-content"
+    },
+    matchResultTeamLogo: {
+      width: "20px",
+      height: "20px",
+      borderRadius: "50%",
+      overflow: "hidden",
+      flexShrink: 0
+    },
+    matchResultScoreText: {
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.75em",
+      fontWeight: 600,
+      color: e.textColor,
+      lineHeight: 1
+    }
+  };
+};
+export {
+  a as createStyles
+};

package/packages/match-quiz-play/src/components/Variants/Split/LeadCollection/SplitLeadAfterCollection.js

@@ -0,0 +1,37 @@
+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/SplitLeadAfterCollection.js";
+import o from "../../../Shared/MainCard.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 d from "../../../Leads/CollectLeadWrapper.js";
+import { useTranslation as n } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const P = (e) => {
+  const { t } = n();
+  return /* @__PURE__ */ i.jsx(
+    m,
+    {
+      entity: e.matchQuiz,
+      headline: t("matchQuiz.headline"),
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholder: e.defaultImagePlaceholderUrl || r,
+      mobileImagePlaceholder: a,
+      onLeadSubmitted: e.onLeadSubmitted,
+      isSubmitting: e.isSubmitting,
+      MainCard: o,
+      PresentedBy: l,
+      CollectLeadWrapper: d,
+      rulesDisplay: e.rulesDisplay
+    }
+  );
+};
+export {
+  P as default
+};