fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

package/packages/match-quiz-play/src/components/Variants/Standard/MatchQuizStandardVariant.styles.js

@@ -0,0 +1,376 @@
+const a = (e) => {
+  var i, t, n;
+  return {
+    // Mobile headline with image background
+    mobileHeadlineWithImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px",
+      position: "relative",
+      minHeight: "210px",
+      overflow: "hidden",
+      height: "auto",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Mobile headline content
+    mobileHeadlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale["2xl"],
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      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: "center"
+    },
+    // Headline typography (mobile without image & desktop)
+    headlineTypography: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Headline typography (desktop centered)
+    headlineTypographyDesktop: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+      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: "center"
+    },
+    // Title typography (mobile without image & desktop responsive)
+    titleTypography: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Title typography (desktop centered)
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+      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: "center"
+    },
+    // Description typography (mobile without image & desktop responsive)
+    descriptionTypography: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (desktop centered)
+    descriptionTypographyDesktop: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Image container (left position)
+    imageContainerLeft: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: "auto",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center center",
+      backgroundRepeat: "no-repeat",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    // Image container (right position)
+    imageContainerRight: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: "auto",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center center",
+      backgroundRepeat: "no-repeat",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      display: "flex",
+      flexDirection: "column",
+      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      pt: e.spacingScale.lg,
+      pb: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.isExtraSmall ? e.spacingScale.sm : e.spacingScale.md
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // Lead collection container
+    leadCollectionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
+    },
+    // Lead question container
+    leadQuestionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.isExtraSmall ? e.spacingScale.lg : e.spacingScale.md
+    },
+    // Lead content container
+    leadContentContainer: {
+      borderRadius: e.borderRadius.md,
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.spacingScale.md,
+      bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)"
+    },
+    // Question area
+    questionArea: {
+      display: "flex",
+      flexDirection: "column",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
+    },
+    // Question container
+    questionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.isExtraSmall ? e.spacingScale.lg : e.spacingScale.md
+    },
+    // Question content container
+    questionContentContainer: {
+      borderRadius: e.borderRadius.md,
+      p: e.spacingScale.md,
+      gap: e.spacingScale.md,
+      bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      zIndex: 2
+    },
+    // Footer container
+    footerContainer: {
+      display: "flex",
+      flexDirection: e.isExtraSmall ? "column" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: e.spacingScale.lg
+    },
+    // Footer container (no logo)
+    footerContainerNoLogo: {
+      display: "flex",
+      flexDirection: e.isExtraSmall ? "column" : "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: e.spacingScale.lg
+    },
+    // Presented by mobile
+    presentedByMobile: {
+      display: e.isExtraSmall ? "block" : "none"
+    },
+    // Pagination container
+    paginationContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.md
+    },
+    // Navigation container
+    navigationContainer: {
+      display: "flex",
+      gap: e.spacingScale.md,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    // Game State Styles
+    gameStateContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      padding: `${e.spacingScale.xs} ${e.spacingScale.sm}`,
+      gap: e.spacingScale["3xs"]
+    },
+    stateTitle: {
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "1.5em",
+      fontWeight: 700,
+      color: e.textColor,
+      lineHeight: 1.3
+    },
+    stateDescription: {
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      fontWeight: 400,
+      color: e.secondaryColor,
+      lineHeight: 1.4,
+      opacity: e.opacity
+    },
+    liveIndicatorContainer: {
+      display: "flex",
+      alignItems: "center",
+      gap: e.spacingScale.xs,
+      marginTop: e.spacingScale.xs
+    },
+    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)"
+        }
+      }
+    },
+    liveText: {
+      fontFamily: e.fontFamilySecondary,
+      fontSize: "0.875em",
+      color: e.dangerColor,
+      fontWeight: 600,
+      textTransform: "uppercase",
+      letterSpacing: "0.5px"
+    },
+    closedStateHeader: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.spacingScale.sm,
+      flexWrap: "wrap"
+    },
+    // Match Result Badge Styles (like prediction badges)
+    matchResultBadge: {
+      display: "flex",
+      alignItems: "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: e.isExtraSmall ? "16px" : "20px",
+      height: e.isExtraSmall ? "16px" : "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/Standard/ScoreState/MatchQuizStandardScoreState.js

@@ -0,0 +1,135 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as s } from "@mui/joy";
+import { useInternalTheme as U, isMobile as q, useColors as c, useFontFamily as j, useCornerRadius as v, useSpacingScale as L, useImageBackgroundGradient as V, useBorderSize as w } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb 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 G from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import O from "../../../../../../common/src/components/Skeletons/Standard/StandardSkeleton.js";
+import { useImageVariant as W } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import $ from "../../../Shared/MainCard.js";
+import H from "../../../Shared/PresentedBy.js";
+import { createStyles as J } from "./MatchQuizStandardScoreState.styles.js";
+import K from "../../../Shared/AlertMessage.js";
+import X from "../../../Shared/Summary/PredictionSummary.js";
+import { useTranslation as Y } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const fe = (e) => {
+  var f, S, C, b;
+  const z = U(), u = W(
+    {
+      images: e.matchQuiz.images,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    P.STANDARD
+  ), { t: l } = Y(), o = ((f = e.matchQuiz.branding) == null ? void 0 : f.colors) || null, n = q(), m = n ? ((S = e.matchQuiz.branding) == null ? void 0 : S.images.mobileLogo) || ((C = e.matchQuiz.branding) == null ? void 0 : C.images.mainLogo) || "" : ((b = e.matchQuiz.branding) == null ? void 0 : b.images.mainLogo) || "", p = e.imagePosition || "left", T = e.matchQuiz.status === "OPEN", A = (a) => {
+    console.log(`Edit prediction for fixture at index: ${a}`);
+  }, x = (o == null ? void 0 : o.contentColor) || c().textColor, Q = j().secondary, y = j().primary, g = v(), i = L(), R = `rgba(${N(
+    c().surfaceVariant || ""
+  )}, 0.5)`, B = V(
+    P.STANDARD
+  ), F = "60%", h = (o == null ? void 0 : o.secondaryColor) || c().textSecondary, d = c().secondaryContainer, I = w().size, r = J({
+    finalImage: u,
+    spacingScale: i,
+    borderRadius: g,
+    fontFamilyPrimary: y,
+    fontFamilySecondary: Q,
+    textColor: x,
+    surfaceVariant: R,
+    brandingColors: o,
+    isMobile: n,
+    imageBackgroundGradient: B,
+    darkTextColor: z.colorSchemes.dark.textColor,
+    opacity: F,
+    secondaryColor: h
+  }), M = {
+    display: "flex",
+    py: n ? i.xs : i.sm,
+    px: n ? i.sm : i.md,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: g.xl,
+    border: I + " solid " + d,
+    bgcolor: d,
+    "&:hover": {
+      bgcolor: d,
+      opacity: 0.9
+    }
+  }, D = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  }, k = {
+    color: h,
+    fontFamily: y,
+    fontSize: n ? "0.750em" : "0.8125em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "22px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  }, E = () => {
+    var a;
+    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      e.isUnauthorized ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+        K,
+        {
+          variant: "error",
+          title: l("common.authentication.accessRequired"),
+          message: l("common.authentication.invalidOrMissingAuth")
+        }
+      ) }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(s, { sx: r.questionArea, children: /* @__PURE__ */ t.jsx(s, { sx: r.questionContainer, children: /* @__PURE__ */ t.jsx(s, { sx: r.questionContentContainer, children: T ? /* @__PURE__ */ t.jsx(
+        X,
+        {
+          fixtures: e.matchQuiz.fixtures,
+          prediction: e.prediction,
+          brandingPrimaryColor: o == null ? void 0 : o.primaryColor,
+          onEditPrediction: A,
+          onPredictionUpdate: e.onPredictionUpdate,
+          play: e.play,
+          view: "score",
+          onPlayResult: e.onPlayResult
+        }
+      ) : null }) }) }) }),
+      (m || e.additionalCTA) && /* @__PURE__ */ t.jsxs(s, { sx: r.footerContainer, children: [
+        m && /* @__PURE__ */ t.jsx(
+          H,
+          {
+            brandingLogo: m,
+            textColor: x,
+            label: ((a = e.matchQuiz.labels) == null ? void 0 : a.sponsor) || null
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          G,
+          {
+            additionalCTA: e.additionalCTA,
+            buttonStyle: M,
+            buttonContentStyle: D,
+            textStyle: k
+          }
+        )
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ t.jsx($, { brandingBorderColor: (o == null ? void 0 : o.borderColor) || null, children: /* @__PURE__ */ t.jsx(
+    O,
+    {
+      entity: e.matchQuiz,
+      headline: l("matchQuiz.headline"),
+      finalImage: u,
+      imagePosition: p,
+      rulesDisplay: e.rulesDisplay,
+      children: E()
+    }
+  ) });
+};
+export {
+  fe as default
+};