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

package/packages/match-quiz-play/src/components/Shared/Fixtures/PointsDisplay/PointsDisplay.js

@@ -0,0 +1,116 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as O } from "react";
+import { Tooltip as x, IconButton as T, Box as d, Typography as n } from "@mui/joy";
+import { useColors as S, useCornerRadius as F, useFontFamily as R, useSpacingScale as A, isMobile as E } 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 { useConstantContext as P } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import g from "../../../../../../../node_modules/@mui/icons-material/esm/HelpOutline.js";
+import { createStyles as z } from "./PointsDisplay.styles.js";
+import { MatchQuizConstantsContext as Q } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as B } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const V = (l) => {
+  const { t: o } = B(), i = S(), f = F(), c = R(), h = A(), y = E(), [p, m] = O(!1), { points: C } = P(Q), e = z({
+    spacingScale: h,
+    borderRadius: f,
+    fontFamilyPrimary: c.primary,
+    fontFamilySecondary: c.secondary,
+    textPrimary: i.textPrimary,
+    textSecondary: i.textSecondary,
+    neutralSoftBg: i.palette.neutral.softBg,
+    neutralOutlinedBorder: i.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: i.palette.neutral.plainHoverBg
+  }), s = C.find((r) => r.id === l.market);
+  if (!s)
+    return null;
+  const v = s.alternative && Object.values(s.alternative).some(
+    (r) => r > 0
+  ), u = () => {
+    if (!v)
+      return /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.tooltipText, children: o("matchQuiz.points.earnPointsForCorrect", {
+        points: s.points
+      }) });
+    const r = Object.entries(s.alternative).filter(
+      ([, a]) => a > 0
+    );
+    return /* @__PURE__ */ t.jsxs(d, { sx: e.tooltipContainer, children: [
+      /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.tooltipText, children: o("matchQuiz.points.earnPointsForCompletelyCorrect", {
+        points: s.points
+      }) }),
+      r.length > 0 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.tooltipSubtext, children: o("matchQuiz.points.canAlsoEarnForPartial") }),
+        r.map(([a, j]) => /* @__PURE__ */ t.jsxs(
+          n,
+          {
+            level: "body-sm",
+            sx: e.tooltipAlternative,
+            children: [
+              "• ",
+              j,
+              " ",
+              o("matchQuiz.points.pts"),
+              " -",
+              " ",
+              b(a)
+            ]
+          },
+          a
+        ))
+      ] })
+    ] });
+  }, b = (r) => {
+    switch (r) {
+      case "CORRECT_OUTCOME_1X2":
+        return o("matchQuiz.points.alternatives.correctOutcome1X2");
+      case "CORRECT_HOME_GOALS":
+        return o("matchQuiz.points.alternatives.correctHomeGoals");
+      case "CORRECT_AWAY_GOALS":
+        return o("matchQuiz.points.alternatives.correctAwayGoals");
+      case "CORRECT_GOAL_DIFFERENCE":
+        return o("matchQuiz.points.alternatives.correctGoalDifference");
+      default:
+        return r.replace(/_/g, " ").toLowerCase();
+    }
+  };
+  return y || l.isSplitVariant ? /* @__PURE__ */ t.jsx(
+    x,
+    {
+      title: u(),
+      placement: "top-start",
+      variant: "soft",
+      sx: e.tooltip,
+      disablePortal: !0,
+      open: p,
+      onClose: () => m(!1),
+      disableHoverListener: !0,
+      disableFocusListener: !0,
+      disableTouchListener: !0,
+      children: /* @__PURE__ */ t.jsx(
+        T,
+        {
+          onClick: () => m(!p),
+          sx: e.mobileIconButton,
+          children: /* @__PURE__ */ t.jsx(g, { sx: e.mobileIcon })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    x,
+    {
+      title: u(),
+      placement: "top-start",
+      variant: "soft",
+      sx: e.tooltip,
+      disablePortal: !0,
+      children: /* @__PURE__ */ t.jsxs(d, { sx: e.container, children: [
+        /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.pointsText, children: s.points }),
+        /* @__PURE__ */ t.jsx(n, { level: "body-xs", sx: e.ptsLabel, children: o("matchQuiz.points.pts") })
+      ] })
+    }
+  );
+};
+export {
+  V as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/PointsDisplay/PointsDisplay.styles.js

@@ -0,0 +1,98 @@
+const e = (t) => ({
+  container: {
+    backgroundColor: t.neutralSoftBg,
+    color: t.textPrimary,
+    borderRadius: t.borderRadius.md,
+    border: `1px solid ${t.neutralOutlinedBorder}`,
+    padding: `${t.spacingScale.xs} ${t.spacingScale.sm}`,
+    display: "flex",
+    alignItems: "center",
+    gap: t.spacingScale.xs,
+    cursor: "default",
+    transition: "all 0.2s ease-in-out",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    zIndex: 10,
+    minWidth: "56px",
+    justifyContent: "center",
+    "&:hover": {
+      backgroundColor: t.neutralPlainHoverBg,
+      transform: "scale(1.05)",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)"
+    }
+  },
+  pointsText: {
+    fontFamily: t.fontFamilyPrimary,
+    fontWeight: 700,
+    fontSize: "0.875em",
+    lineHeight: 1,
+    color: t.textPrimary
+  },
+  ptsLabel: {
+    fontFamily: t.fontFamilySecondary,
+    fontWeight: 500,
+    fontSize: "0.75em",
+    lineHeight: 1,
+    color: t.textSecondary,
+    opacity: 0.9
+  },
+  tooltip: {
+    maxWidth: "280px",
+    backgroundColor: t.neutralSoftBg,
+    color: t.textPrimary,
+    border: `1px solid ${t.neutralOutlinedBorder}`,
+    borderRadius: t.borderRadius.sm,
+    p: t.spacingScale.xs
+  },
+  tooltipContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: t.spacingScale.xs
+  },
+  tooltipText: {
+    fontFamily: t.fontFamilySecondary,
+    color: t.textPrimary,
+    fontSize: "0.875em",
+    lineHeight: 1.3
+  },
+  tooltipSubtext: {
+    fontFamily: t.fontFamilySecondary,
+    color: t.textSecondary,
+    fontSize: "0.75em",
+    lineHeight: 1.3
+  },
+  tooltipAlternative: {
+    fontFamily: t.fontFamilySecondary,
+    color: t.textPrimary,
+    fontSize: "0.75em",
+    lineHeight: 1.3,
+    paddingLeft: t.spacingScale.xs
+  },
+  // Mobile-specific styles
+  mobileIconButton: {
+    backgroundColor: "transparent",
+    color: t.textPrimary,
+    border: "none",
+    borderRadius: "50%",
+    width: "32px",
+    height: "32px",
+    minHeight: "32px",
+    minWidth: "32px",
+    padding: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease-in-out",
+    zIndex: 10,
+    "&:hover": {
+      backgroundColor: "transparent",
+      transform: "scale(1.1)"
+    }
+  },
+  mobileIcon: {
+    fontSize: "1em",
+    color: t.textPrimary
+  }
+});
+export {
+  e as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoFixture.js

@@ -0,0 +1,72 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as i, Typography as y } from "@mui/joy";
+import { useColors as S, isExtraSmall as C, useCornerRadius as g, useFontFamily as F, useSpacingScale as R } 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 { useConstantContext as j } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import E from "./YesNoSelector.js";
+import { createStyles as _ } from "./YesNoFixture.styles.js";
+import P from "../PointsDisplay/PointsDisplay.js";
+import { MatchQuizConstantsContext as k } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as p } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const W = (t) => {
+  const { t: r } = p(), n = S(), c = C(), x = g(), s = F(), u = R(), { points: d } = j(k), l = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : c, f = t.showPoints === void 0, m = _({
+    spacingScale: u,
+    borderRadius: x,
+    fontFamilyPrimary: s.primary,
+    fontFamilySecondary: s.secondary,
+    textPrimary: n.textPrimary,
+    textSecondary: n.textSecondary,
+    isExtraSmall: l
+  }), h = () => {
+    if (t.market.startsWith("OVER_GOALS_")) {
+      const a = t.market.replace("OVER_GOALS_", "").replace("_", "."), o = Math.floor(parseFloat(a));
+      return r("matchQuiz.fixtures.overGoalsFixtureTitle", { threshold: o });
+    }
+    if (t.market.startsWith("OVER_CORNERS_")) {
+      const a = t.market.replace("OVER_CORNERS_", "").replace("_", "."), o = Math.floor(parseFloat(a));
+      return r("matchQuiz.fixtures.overCornersFixtureTitle", { threshold: o });
+    }
+    return t.market === "RED_CARD_MATCH" ? r("matchQuiz.fixtures.redCardFixtureTitle") : r("matchQuiz.fixtures.penaltyFixtureTitle");
+  };
+  return /* @__PURE__ */ e.jsxs(i, { sx: m.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      i,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        children: [
+          l ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(i, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(y, { level: "h3", sx: m.title, children: h() }),
+          /* @__PURE__ */ e.jsx(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: f && d.length > 0 && /* @__PURE__ */ e.jsx(
+            P,
+            {
+              market: t.market,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      E,
+      {
+        market: t.market,
+        onSelectionChange: t.onSelectionChange,
+        brandingPrimaryColor: t.brandingPrimaryColor,
+        prediction: t.prediction
+      }
+    )
+  ] });
+};
+export {
+  W as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoFixture.styles.js

@@ -0,0 +1,29 @@
+import { isMobile as e } 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 "../../../../../../../node_modules/react/jsx-runtime.js";
+import "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+const p = (t) => {
+  const i = e();
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    title: {
+      fontFamily: t.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: i ? "1.125em" : "1.25em",
+      lineHeight: 1.2,
+      color: t.textPrimary,
+      textAlign: t.isExtraSmall ? "left" : "center"
+    }
+  };
+};
+export {
+  p as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoSelector.js

@@ -0,0 +1,108 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as g } from "react";
+import { Box as s, Typography as m } from "@mui/joy";
+import { useColors as f, useCornerRadius as j, useFontFamily as S, useSpacingScale as b, isMobile as w } 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 "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { createStyles as L } from "./YesNoSelector.styles.js";
+import { useTranslation as k } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Y = (i) => {
+  const { t: l } = k(), o = f(), C = j(), a = S(), u = b(), n = w(), [c, x] = g(
+    i.prediction
+  ), t = L({
+    spacingScale: u,
+    borderRadius: C,
+    fontFamilyPrimary: a.primary,
+    fontFamilySecondary: a.secondary,
+    textPrimary: o.textPrimary,
+    textSecondary: o.textSecondary,
+    neutralSoftBg: o.palette.neutral.softBg,
+    neutralOutlinedBorder: o.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: o.palette.neutral.plainHoverBg,
+    primary: i.brandingPrimaryColor || o.palette.primary.plainColor,
+    onPrimary: o.palette.primary.onPrimary,
+    successMain: o.palette.success.plainColor,
+    dangerMain: o.palette.danger.plainColor,
+    isMobile: n
+  }), p = (r) => {
+    x(r), i.onSelectionChange(r);
+  }, d = {
+    yes: l("matchQuiz.fixtures.yes"),
+    no: l("matchQuiz.fixtures.no")
+  }, y = ({ isSelected: r }) => /* @__PURE__ */ e.jsxs(s, { sx: t.optionContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      s,
+      {
+        sx: {
+          ...t.optionIcon,
+          ...r ? t.selectedYesIcon : {},
+          cursor: "pointer"
+        },
+        onClick: () => p(!0),
+        children: /* @__PURE__ */ e.jsx(
+          "svg",
+          {
+            width: n ? "20" : "24",
+            height: n ? "20" : "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ e.jsx(
+              "path",
+              {
+                d: "M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: t.optionLabel, children: d.yes })
+  ] }), h = ({ isSelected: r }) => /* @__PURE__ */ e.jsxs(s, { sx: t.optionContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      s,
+      {
+        sx: {
+          ...t.optionIcon,
+          ...r ? t.selectedNoIcon : {},
+          cursor: "pointer"
+        },
+        onClick: () => p(!1),
+        children: /* @__PURE__ */ e.jsx(
+          "svg",
+          {
+            width: n ? "20" : "24",
+            height: n ? "20" : "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ e.jsx(
+              "path",
+              {
+                d: "M17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V11C22 11.5304 21.7893 12.0391 21.4142 12.4142C21.0391 12.7893 20.5304 13 20 13H17M10 15V19C10 19.7956 10.3161 20.5587 10.8787 21.1213C11.4413 21.6839 12.2044 22 13 22L17 13V2H5.72C5.23766 1.99448 4.76962 2.16361 4.40206 2.47596C4.03451 2.78831 3.79232 3.22305 3.72 3.7L2.34 12.7C2.29648 12.9866 2.31583 13.2793 2.39668 13.5577C2.47753 13.8362 2.61793 14.0937 2.80816 14.3125C2.99839 14.5313 3.23394 14.7061 3.49843 14.8248C3.76291 14.9435 4.05011 15.0033 4.34 15H10Z",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: t.optionLabel, children: d.no })
+  ] });
+  return /* @__PURE__ */ e.jsxs(s, { sx: t.container, children: [
+    /* @__PURE__ */ e.jsx(y, { isSelected: c === !0 }),
+    /* @__PURE__ */ e.jsx(h, { isSelected: c === !1 })
+  ] });
+};
+export {
+  Y as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoSelector.styles.js

@@ -0,0 +1,44 @@
+import { createOptionIconStyles as t } from "../shared.styles.js";
+const a = (e) => {
+  const n = t({
+    spacingScale: e.spacingScale,
+    neutralSoftBg: e.neutralSoftBg,
+    neutralPlainHoverBg: e.neutralPlainHoverBg,
+    isMobile: e.isMobile,
+    primary: e.primary,
+    onPrimary: e.onPrimary,
+    successMain: e.successMain,
+    dangerMain: e.dangerMain
+  });
+  return {
+    container: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.xl : e.spacingScale["2xl"],
+      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    optionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.sm
+    },
+    optionIcon: {
+      ...n.base,
+      color: e.textSecondary
+    },
+    selectedYesIcon: n.selectedYes,
+    selectedNoIcon: n.selectedNo,
+    optionLabel: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.875em" : "1em",
+      fontWeight: 600,
+      textAlign: "center"
+    }
+  };
+};
+export {
+  a as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/shared.styles.js

@@ -0,0 +1,63 @@
+const a = (e) => ({
+  base: {
+    width: e.isMobile ? "48px" : "64px",
+    height: e.isMobile ? "48px" : "64px",
+    backgroundColor: e.neutralSoftBg,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    padding: e.isMobile ? e.spacingScale.xs : e.spacingScale.sm,
+    borderRadius: e.spacingScale.sm,
+    boxShadow: "0 5px 15px 0 rgba(49, 84, 139, .1)",
+    flexShrink: 0,
+    transition: "all 0.2s ease-in-out",
+    "&:hover": {
+      backgroundColor: e.neutralPlainHoverBg
+    }
+  },
+  selected: e.primary ? {
+    backgroundColor: e.primary,
+    "&:hover": {
+      backgroundColor: e.primary
+    },
+    borderRadius: e.spacingScale.sm
+  } : {
+    borderRadius: e.spacingScale.sm
+  },
+  text: {
+    fontFamily: "inherit",
+    fontSize: e.isMobile ? "0.625em" : "0.75em",
+    fontWeight: 600,
+    textAlign: "center"
+  },
+  selectedText: e.onPrimary ? {
+    color: e.onPrimary
+  } : {}
+}), n = (e) => ({
+  ...a(e),
+  selectedYes: e.successMain ? {
+    backgroundColor: e.successMain,
+    color: "white",
+    "&:hover": {
+      backgroundColor: e.successMain
+    },
+    borderRadius: e.spacingScale.sm
+  } : {
+    borderRadius: e.spacingScale.sm
+  },
+  selectedNo: e.dangerMain ? {
+    backgroundColor: e.dangerMain,
+    color: "white",
+    "&:hover": {
+      backgroundColor: e.dangerMain
+    },
+    borderRadius: e.spacingScale.sm
+  } : {
+    borderRadius: e.spacingScale.sm
+  }
+});
+export {
+  n as createOptionIconStyles,
+  a as createTeamLogoStyles
+};