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

package/packages/match-quiz-play/src/components/Shared/Summary/PredictionSummary.styles.js

@@ -0,0 +1,219 @@
+const t = (e) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.sm,
+    width: "100%"
+  },
+  title: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: "1em",
+    lineHeight: "1.25em",
+    color: e.textPrimary,
+    textAlign: "center",
+    marginBottom: e.spacingScale.sm
+  },
+  predictionsList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.xs,
+    backgroundColor: e.surfaceVariant,
+    borderRadius: e.borderRadius.md,
+    border: `1px solid ${e.outlineEnabledBorder}`,
+    overflow: "hidden"
+  },
+  predictionItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: `${e.spacingScale.sm} ${e.spacingScale.md}`,
+    borderBottom: `1px solid ${e.outlineEnabledBorder}`,
+    minHeight: "48px",
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  },
+  questionText: {
+    fontFamily: e.fontFamilySecondary,
+    fontWeight: 400,
+    fontSize: "1em",
+    lineHeight: "1em",
+    color: e.textSecondary,
+    marginBottom: "2px"
+  },
+  answerContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.md
+  },
+  answerContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    minWidth: "120px"
+  },
+  teamLogo: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  selectionText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.875em",
+    color: e.textPrimary
+  },
+  playerAvatar: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    backgroundColor: e.neutralSoftBg,
+    color: "#FFFFFF",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: "0.625em",
+    flexShrink: 0,
+    overflow: "hidden"
+  },
+  playerAvatarIcon: {
+    color: e.textSecondary,
+    fontSize: "0.75em"
+  },
+  editButton: {
+    padding: "2px 6px",
+    fontSize: "0.75em",
+    fontWeight: 500,
+    color: e.primaryColor,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: e.borderRadius.sm,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    fontFamily: e.fontFamilySecondary,
+    textDecoration: "underline",
+    minWidth: "auto",
+    "&:hover": {
+      backgroundColor: `${e.primaryColor}10`
+    }
+  },
+  yesNoIcon: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "0.75em",
+    fontWeight: 600,
+    color: "white",
+    flexShrink: 0
+  },
+  yesIcon: {
+    backgroundColor: "#4CAF50"
+  },
+  noIcon: {
+    backgroundColor: "#F44336"
+  },
+  cornersIcon: {
+    width: "20px",
+    height: "20px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "0.75em",
+    color: e.primaryColor,
+    flexShrink: 0
+  },
+  // Table styles
+  tableContainer: {
+    overflowX: "auto",
+    borderRadius: e.borderRadius.md,
+    border: `1px solid ${e.outlineEnabledBorder}`
+  },
+  table: {
+    backgroundColor: e.surfaceVariant,
+    "--TableCell-paddingX": "0.5rem",
+    "--TableCell-paddingY": "0.375rem",
+    cursor: "default",
+    fontSize: "1em",
+    "& > tbody > tr:hover": {
+      backgroundColor: "transparent"
+    },
+    "& > thead > tr > th": {
+      backgroundColor: e.surfaceVariant,
+      verticalAlign: "middle",
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 600,
+      color: e.textPrimary
+    },
+    "& > tbody > tr > td": {
+      verticalAlign: "middle",
+      borderBottom: `1px solid ${e.outlineEnabledBorder}`
+    },
+    "& > tbody > tr:last-child > td": {
+      borderBottom: "none"
+    }
+  },
+  headerCell: {
+    textAlign: "left",
+    padding: "0.375rem 0.5rem"
+  },
+  headerCellAction: {
+    textAlign: "center",
+    padding: "0.375rem 0.5rem",
+    width: "30px"
+  },
+  predictionCell: {
+    width: "calc(100% - 30px)"
+  },
+  actionCell: {
+    textAlign: "center",
+    width: "30px",
+    verticalAlign: "middle"
+  },
+  predictionContent: {
+    display: "flex",
+    gap: e.isMobile || e.isSplitVariant ? e.spacingScale["2xs"] : e.spacingScale.sm,
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  predictionBox: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "1em",
+    padding: "2px 6px",
+    minHeight: "20px",
+    borderRadius: e.borderRadius.sm,
+    border: `1px solid ${e.outlineEnabledBorder}`,
+    backgroundColor: e.neutralSoftBg,
+    width: "fit-content"
+  },
+  editIconButton: {
+    padding: "4px",
+    minHeight: "24px",
+    minWidth: "24px",
+    color: e.textPrimary,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: e.borderRadius.sm,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    "&:hover": {
+      backgroundColor: `${e.textPrimary}15`
+    },
+    "& svg": {
+      fontSize: "1em",
+      color: e.textPrimary
+    }
+  }
+});
+export {
+  t as createStyles
+};

package/packages/match-quiz-play/src/components/Variants/Overlay/Error/MatchQuizOverlayError.js

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

package/packages/match-quiz-play/src/components/Variants/Overlay/FinishedGame/MatchQuizOverlayFinishedGame.js

@@ -0,0 +1,157 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as m } from "@mui/joy";
+import { useSpacingScale as A, useInternalTheme as H, isMobile as U, isExtraSmall as Y, useImageBackgroundGradient as $, useColors as a, useFontFamily as f, useCornerRadius as q, useBorderSize as J } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as K, hexToRgb as y, stripHtmlTags as N } 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 p } from "../../../../../../common/src/enums/enums.js";
+import X from "../../../../../../common/src/components/Rules.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as Z } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import _ from "../../../../assets/default-quiz-bg.png.js";
+import ee from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import te from "../../../Shared/PresentedBy.js";
+import { createStyles as re } from "./MatchQuizOverlayFinishedGame.styles.js";
+import { useMatchQuizLeaderboard as ie } from "../../../../hooks/useMatchQuizLeaderboard.js";
+import oe from "../../../Shared/Leaderboard/LeaderboardComponent.js";
+import ae from "../../../Shared/Leaderboard/RoundedPagination.js";
+import ne from "../../../Shared/FinishedGameWrapper/FinishedGameWrapper.js";
+import { useMatchQuizMarketsResults as se } from "../../../../hooks/useMatchQuizMarketsResults.js";
+import { useTranslation as le } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Fe = (t) => {
+  var x;
+  const n = A(), s = H(), { t: C } = le(), l = U(), j = Y(), P = $(
+    p.OVERLAY
+  ), { brandingImage: b, brandingColors: r, brandingLogo: d } = K(t.matchQuiz.branding || null), S = t.defaultImagePlaceholderUrl ? t.defaultImagePlaceholderUrl : l ? ee : _, z = b || Z(
+    {
+      images: t.matchQuiz.images,
+      imagePlaceholder: S
+    },
+    p.OVERLAY
+  ), Q = a().textPrimary, T = (r == null ? void 0 : r.primaryColor) || a().palette.primary.plainColor, k = (r == null ? void 0 : r.contentColor) || a().textColor, B = f().secondary, I = f().primary, R = a().surface, V = `rgba(${y(
+    (r == null ? void 0 : r.backgroundColor) || a().surfaceVariant
+  )}, 0.5)`, F = a().onSurface, O = q(), v = J().size, D = `rgba(${y(
+    a().surfaceVariant || ""
+  )}, 0.5)`, M = (r == null ? void 0 : r.secondaryColor) || a().textColor, i = re({
+    finalImage: z,
+    spacingScale: n,
+    borderRadius: O,
+    fontFamilyPrimary: I,
+    fontFamilySecondary: B,
+    textPrimary: Q,
+    primaryColor: T,
+    textColor: k,
+    bgcolor: V,
+    buttonBgColor: R,
+    onSurfaceColor: F,
+    borderSize: v,
+    surfaceVariant: D,
+    brandingColors: r,
+    imagePosition: "left",
+    successColor: s.colorSchemes.light.palette.success.plainColor,
+    dangerColor: s.colorSchemes.light.palette.danger.plainColor,
+    onPrimaryColor: s.colorSchemes.light.palette.primary.onPrimary,
+    isMobile: l,
+    imageBackgroundGradient: P,
+    darkTextColor: s.colorSchemes.dark.textColor,
+    opacity: "60%",
+    secondaryColor: M,
+    isExtraSmall: j
+  }), { leaderboard: w, userRankings: u, pagination: c, currentPage: L, goToPage: E } = ie(t.matchQuiz.id, t.sdk), G = se(
+    t.matchQuiz.id,
+    t.sdk,
+    t.showPredictionDetails || !1
+  ), W = () => {
+    var g;
+    return /* @__PURE__ */ e.jsx(
+      te,
+      {
+        brandingLogo: d,
+        textColor: s.colorSchemes.dark.textColor,
+        label: ((g = t.matchQuiz.labels) == null ? void 0 : g.sponsor) || null
+      }
+    );
+  }, h = () => /* @__PURE__ */ e.jsxs(
+    o,
+    {
+      sx: { display: "flex", flexDirection: "column", gap: n.md },
+      children: [
+        /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsx(o, { sx: i.headlineSection, children: /* @__PURE__ */ e.jsx(o, { sx: i.headlineContent, children: /* @__PURE__ */ e.jsxs(o, { sx: i.headlineContentInner, children: [
+          /* @__PURE__ */ e.jsxs(
+            o,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: l ? "center" : "flex-start",
+                gap: n["3xs"]
+              },
+              children: [
+                /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: i.headlineText, children: C("matchQuiz.headline") }),
+                /* @__PURE__ */ e.jsx(
+                  X,
+                  {
+                    rules: t.matchQuiz.rules || "",
+                    rulesDisplay: t.rulesDisplay,
+                    isOverlayVariant: !0
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e.jsxs(o, { sx: i.contentContainer, children: [
+            /* @__PURE__ */ e.jsx(m, { level: "h4", sx: i.titleText, children: t.matchQuiz.title }),
+            t.matchQuiz.description && /* @__PURE__ */ e.jsx(m, { level: "body-lg", sx: i.descriptionText, children: N(t.matchQuiz.description) })
+          ] })
+        ] }) }) }) }),
+        /* @__PURE__ */ e.jsxs(o, { sx: i.mainContentSection, children: [
+          /* @__PURE__ */ e.jsxs(o, { sx: i.contentContainerWithBackdrop, children: [
+            /* @__PURE__ */ e.jsx(
+              oe,
+              {
+                leaderboard: w,
+                userRankings: u,
+                matchQuiz: t.matchQuiz,
+                showHeading: !t.showPredictionDetails,
+                isSplitVariant: !1
+              }
+            ),
+            u && c && c.numberOfPages > 1 && /* @__PURE__ */ e.jsx(o, { sx: i.paginationContainer, children: /* @__PURE__ */ e.jsx(
+              ae,
+              {
+                count: c.numberOfPages,
+                page: L,
+                onChange: E,
+                size: l ? "sm" : "md",
+                showFirstButton: !1,
+                showLastButton: !1,
+                siblingCount: l ? 0 : 1,
+                isOverlayVariant: !0
+              }
+            ) })
+          ] }),
+          d && W()
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: t.showPredictionDetails ? /* @__PURE__ */ e.jsx(o, { sx: i.mainContainerWithPredictionDetails, children: /* @__PURE__ */ e.jsx(
+    ne,
+    {
+      prediction: t.prediction,
+      marketsResults: G,
+      brandingColors: (x = t.matchQuiz.branding) == null ? void 0 : x.colors,
+      isOverlayVariant: !0,
+      resultsTabPanelSxProps: {
+        py: n.lg,
+        px: n.xl
+      },
+      children: h()
+    }
+  ) }) : /* @__PURE__ */ e.jsx(o, { sx: i.mainContainer, children: h() }) });
+};
+export {
+  Fe as default
+};