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

package/packages/event-game-play/src/components/Shared/FinishedGameWrapper/FinishedGameWrapper.js

@@ -0,0 +1,574 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import _ from "react";
+import { Box as t, Tabs as L, TabList as Y, Tab as E, tabClasses as P, Typography as i, TabPanel as G } from "@mui/joy";
+import { useInternalTheme as q, isMobile as J, isExtraSmall as K, useCornerRadius as Q, useColors as d, useFontFamily as R, useSpacingScale as X } 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 Z from "../../../assets/school.svg.js";
+import O from "../../../assets/sports_score.svg.js";
+import { EventGameOutcomeTypeEnum as m } from "fansunited-sdk-esm";
+import { useTranslation as V } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const me = ({
+  prediction: p,
+  game: B,
+  resultsTabPanelSxProps: T,
+  isOverlayVariant: r,
+  children: v,
+  brandingColors: f
+}) => {
+  const [H, W] = _.useState(0), l = q(), { t: x } = V(), b = J(), y = K(), S = Q().md, h = r ? l.colorSchemes.dark.textPrimary : d().textPrimary, F = r ? l.colorSchemes.dark.textSecondary : d().textSecondary, u = R().primary, j = R().secondary, z = r ? l.colorSchemes.dark.secondaryContainer : d().secondaryContainer, w = f != null && f.backgroundColor || r ? l.colorSchemes.dark.surfaceVariant : d().surfaceVariant, c = X(), N = r ? l.colorSchemes.dark.palette.success.plainColor : d().palette.success.plainColor, D = r ? l.colorSchemes.dark.palette.danger.plainColor : d().palette.danger.plainColor, C = r ? l.colorSchemes.dark.outlineEnabledBorder : d().outlineEnabledBorder, k = r ? l.colorSchemes.dark.palette.neutral.softBg : d().palette.neutral.softBg;
+  let I = r ? l.colorSchemes.dark.textPrimary : d().textPrimary;
+  f != null && f.primaryColor && (I = f.primaryColor);
+  const $ = (s, o) => {
+    const n = {
+      display: "flex",
+      alignItems: "center",
+      gap: c.xs,
+      fontSize: "0.875em",
+      padding: "2px 6px",
+      minHeight: "20px",
+      borderRadius: S,
+      border: `1px solid ${C}`,
+      backgroundColor: k,
+      width: "fit-content"
+    }, a = {
+      fontFamily: u,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: h
+    };
+    if (o === m.BOOLEAN) {
+      const g = s === !0;
+      return /* @__PURE__ */ e.jsx(t, { sx: n, children: /* @__PURE__ */ e.jsx(i, { sx: a, children: x(g ? "eventGame.fixtures.yes" : "eventGame.fixtures.no") }) });
+    }
+    return o === m.NUMBER ? /* @__PURE__ */ e.jsx(t, { sx: n, children: /* @__PURE__ */ e.jsx(i, { sx: a, children: s }) }) : o === m.ENUM || o === m.FREE_INPUT ? /* @__PURE__ */ e.jsx(t, { sx: n, children: /* @__PURE__ */ e.jsx(i, { sx: a, children: s }) }) : null;
+  }, M = (s, o) => {
+    const n = {
+      display: "flex",
+      alignItems: "center",
+      gap: c.xs,
+      fontSize: "0.75em",
+      padding: "2px 6px",
+      minHeight: "20px",
+      borderRadius: S,
+      border: `1px solid ${C}`,
+      backgroundColor: k,
+      width: "fit-content"
+    }, a = {
+      fontFamily: u,
+      fontWeight: 500,
+      fontSize: y ? "0.75em" : "0.875em",
+      color: h
+    };
+    if (o === m.BOOLEAN) {
+      const g = s === !0;
+      return /* @__PURE__ */ e.jsx(t, { sx: n, children: /* @__PURE__ */ e.jsx(i, { sx: a, children: x(g ? "eventGame.fixtures.yes" : "eventGame.fixtures.no") }) });
+    }
+    return o === m.NUMBER ? /* @__PURE__ */ e.jsx(t, { sx: n, children: /* @__PURE__ */ e.jsx(i, { sx: a, children: s }) }) : o === m.ENUM || o === m.FREE_INPUT ? /* @__PURE__ */ e.jsx(t, { sx: n, children: /* @__PURE__ */ e.jsx(i, { sx: a, children: s }) }) : null;
+  }, U = (s) => {
+    var g;
+    const o = B.fixtures.find((A) => A.id === s), n = (g = p == null ? void 0 : p.fixtures) == null ? void 0 : g.find(
+      (A) => A.id === s
+    );
+    if (!o || !n) return null;
+    const a = n.correct === !0;
+    return /* @__PURE__ */ e.jsx(
+      t,
+      {
+        sx: {
+          borderRadius: S,
+          p: c.md,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          alignSelf: "stretch",
+          gap: c.md,
+          backdropFilter: "blur(4px)",
+          position: "relative",
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: w,
+            opacity: 0.5,
+            borderRadius: "inherit",
+            zIndex: 0,
+            backdropFilter: "blur(4px)"
+          },
+          "& > *": {
+            position: "relative",
+            zIndex: 1
+          }
+        },
+        children: /* @__PURE__ */ e.jsxs(
+          t,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              gap: "12px",
+              alignSelf: "stretch"
+            },
+            children: [
+              /* @__PURE__ */ e.jsxs(
+                t,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    alignSelf: "stretch"
+                  },
+                  children: [
+                    /* @__PURE__ */ e.jsx(
+                      i,
+                      {
+                        sx: {
+                          color: h,
+                          fontFamily: u,
+                          fontSize: "1.25em",
+                          fontStyle: "normal",
+                          fontWeight: 500,
+                          lineHeight: "120%",
+                          letterSpacing: "0.15px",
+                          flex: 1
+                        },
+                        children: o.question
+                      }
+                    ),
+                    !y && n.points !== void 0 && n.points !== null && /* @__PURE__ */ e.jsx(
+                      t,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: c.xs,
+                          padding: `${c.xs} ${c.sm}`,
+                          borderRadius: S,
+                          backgroundColor: k
+                        },
+                        children: /* @__PURE__ */ e.jsxs(
+                          i,
+                          {
+                            sx: {
+                              color: h,
+                              fontFamily: j,
+                              fontSize: "0.875em",
+                              fontWeight: 600
+                            },
+                            children: [
+                              n.points,
+                              " ",
+                              x("eventGame.points.pts")
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(
+                t,
+                {
+                  sx: {
+                    alignSelf: "stretch",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: c.xs
+                  },
+                  children: [
+                    /* @__PURE__ */ e.jsxs(
+                      t,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: c.xs
+                        },
+                        children: [
+                          /* @__PURE__ */ e.jsx(
+                            i,
+                            {
+                              sx: {
+                                color: a ? r ? l.colorSchemes.dark.palette.success.plainColor : N : r ? l.colorSchemes.dark.palette.danger.plainColor : D,
+                                fontFamily: j,
+                                fontSize: "1em",
+                                fontStyle: "normal",
+                                fontWeight: a ? 700 : 600,
+                                lineHeight: "20px",
+                                letterSpacing: "0.15px"
+                              },
+                              children: x("eventGame.yourPrediction")
+                            }
+                          ),
+                          $(
+                            n.prediction,
+                            o.outcomeType
+                          )
+                        ]
+                      }
+                    ),
+                    !a && o.outcome !== null && o.outcome !== void 0 && /* @__PURE__ */ e.jsxs(
+                      t,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: c.xs
+                        },
+                        children: [
+                          /* @__PURE__ */ e.jsx(
+                            i,
+                            {
+                              sx: {
+                                color: h,
+                                fontFamily: j,
+                                fontSize: "1em",
+                                fontStyle: "normal",
+                                fontWeight: 600,
+                                lineHeight: "20px",
+                                letterSpacing: "0.15px"
+                              },
+                              children: x("eventGame.correctPrediction")
+                            }
+                          ),
+                          M(
+                            o.outcome,
+                            o.outcomeType
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              y && n.points !== void 0 && n.points !== null && n.points > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                /* @__PURE__ */ e.jsx(
+                  t,
+                  {
+                    sx: {
+                      width: "100%",
+                      height: "1px",
+                      backgroundColor: C
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  t,
+                  {
+                    sx: {
+                      display: "flex",
+                      justifyContent: "flex-start",
+                      alignItems: "center",
+                      alignSelf: "stretch"
+                    },
+                    children: /* @__PURE__ */ e.jsxs(
+                      i,
+                      {
+                        sx: {
+                          color: h,
+                          fontFamily: j,
+                          fontSize: "1em",
+                          fontStyle: "normal",
+                          fontWeight: 600,
+                          lineHeight: "20px",
+                          letterSpacing: "0.15px"
+                        },
+                        children: [
+                          x("eventGame.earnedPoints"),
+                          ": ",
+                          n.points
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          },
+          `single-prediction-${s}`
+        )
+      },
+      `user-prediction-${s}`
+    );
+  };
+  return /* @__PURE__ */ e.jsx(t, { sx: { width: "100%" }, children: /* @__PURE__ */ e.jsxs(
+    L,
+    {
+      value: H,
+      onChange: (s, o) => W(o),
+      sx: {
+        borderRadius: S,
+        width: "100%",
+        // Ensure tabs container takes full width
+        backgroundColor: "transparent"
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          Y,
+          {
+            sx: {
+              fontSize: b ? "0.75em" : "1em",
+              "--Icon-fontSize": b ? "1em" : "1.25em"
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                E,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flex: 1,
+                    // Make each tab take equal width
+                    borderBottom: "1px solid " + z,
+                    opacity: "60%",
+                    "&:not(.Mui-selected):hover": {
+                      bgcolor: r ? "#FAFAFA14" : "#2121210A"
+                      // Highlight selected tab
+                    },
+                    [`&.${P.selected}`]: {
+                      bgcolor: r ? "#FAFAFA14" : "#2121210A",
+                      // Highlight selected tab
+                      borderBottom: "3px solid " + I,
+                      opacity: "100%",
+                      mb: "-1px"
+                    }
+                  },
+                  disableIndicator: !0,
+                  children: /* @__PURE__ */ e.jsxs(
+                    t,
+                    {
+                      sx: {
+                        display: "flex",
+                        py: "12px",
+                        px: "16px",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        gap: "8px",
+                        width: "100%"
+                        // Ensure inner box also takes full width
+                      },
+                      children: [
+                        /* @__PURE__ */ e.jsx(
+                          "img",
+                          {
+                            src: O,
+                            alt: "results-icon",
+                            style: {
+                              display: "flex",
+                              width: "24px",
+                              height: "24px",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              filter: r || l.mode == "dark" ? "brightness(0) invert(1)" : "none"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e.jsx(
+                          i,
+                          {
+                            sx: {
+                              color: F,
+                              fontFamily: u,
+                              fontSize: "1em",
+                              fontStyle: "normal",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.4px",
+                              textTransform: "uppercase"
+                            },
+                            children: x("eventGame.leaderboard.title")
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                E,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flex: 1,
+                    // Make each tab take equal width
+                    borderBottom: "1px solid " + z,
+                    opacity: "60%",
+                    "&:not(.Mui-selected):hover": {
+                      bgcolor: r ? "#FAFAFA14" : "#2121210A"
+                      // Highlight selected tab
+                    },
+                    [`&.${P.selected}`]: {
+                      bgcolor: r ? "#FAFAFA14" : "#2121210A",
+                      // Highlight selected tab
+                      borderBottom: "3px solid " + I,
+                      opacity: "100%",
+                      mb: "-1px"
+                    }
+                  },
+                  disableIndicator: !0,
+                  children: /* @__PURE__ */ e.jsxs(
+                    t,
+                    {
+                      sx: {
+                        display: "flex",
+                        py: "12px",
+                        px: "16px",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        gap: "8px",
+                        width: "100%"
+                        // Ensure inner box also takes full width
+                      },
+                      children: [
+                        /* @__PURE__ */ e.jsx(
+                          "img",
+                          {
+                            src: Z,
+                            alt: "predictions-icon",
+                            style: {
+                              display: "flex",
+                              width: "24px",
+                              height: "24px",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              filter: r || l.mode == "dark" ? "brightness(0) invert(1)" : "none"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e.jsx(
+                          i,
+                          {
+                            sx: {
+                              color: F,
+                              fontFamily: u,
+                              fontSize: "1em",
+                              fontStyle: "normal",
+                              fontWeight: 500,
+                              lineHeight: "24px",
+                              letterSpacing: "0.4px",
+                              textTransform: "uppercase"
+                            },
+                            children: x("eventGame.predictions")
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          G,
+          {
+            value: 0,
+            sx: {
+              ...T,
+              fontSize: y ? "0.625em" : b ? "0.75em" : "1em"
+            },
+            children: v
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          G,
+          {
+            value: 1,
+            sx: {
+              overflowY: "auto",
+              maxHeight: b ? "auto" : "450px",
+              fontSize: y ? "0.75em" : "1em"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              t,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  gap: "16px",
+                  alignSelf: "stretch"
+                },
+                children: p != null && p.fixtures && p.fixtures.length > 0 ? B.fixtures.map((s) => U(s.id)) : (
+                  // Empty state when user has no predictions
+                  /* @__PURE__ */ e.jsx(
+                    t,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        gap: c.lg,
+                        alignSelf: "stretch",
+                        minHeight: "200px",
+                        textAlign: "center",
+                        py: c.xl
+                      },
+                      children: /* @__PURE__ */ e.jsxs(
+                        t,
+                        {
+                          sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: c.xs,
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ e.jsx(
+                              i,
+                              {
+                                sx: {
+                                  color: h,
+                                  fontFamily: u,
+                                  fontSize: "1.25em",
+                                  fontWeight: 600,
+                                  lineHeight: "1.2"
+                                },
+                                children: x("eventGame.noPredictions.title")
+                              }
+                            ),
+                            /* @__PURE__ */ e.jsx(
+                              i,
+                              {
+                                sx: {
+                                  color: F,
+                                  fontFamily: j,
+                                  fontSize: "1em",
+                                  fontWeight: 400,
+                                  lineHeight: "1.4"
+                                },
+                                children: x("eventGame.noPredictions.description")
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  )
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  me as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Boolean/BooleanFixture.js

@@ -0,0 +1,60 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as c } from "@mui/joy";
+import { useColors as y, isExtraSmall as d, useCornerRadius as f, useFontFamily as u, useSpacingScale as S } 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 p } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import j from "./BooleanSelector.js";
+import { createStyles as C } from "./BooleanFixture.styles.js";
+import g from "../PointsDisplay/PointsDisplay.js";
+import { EventGameConstantsContext as h } from "../../../../providers/ConstantsProvider.js";
+const G = (t) => {
+  const r = y(), l = d(), m = f(), i = u(), n = S(), { points: x } = p(h), a = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : l, s = C({
+    spacingScale: n,
+    borderRadius: m,
+    fontFamilyPrimary: i.primary,
+    fontFamilySecondary: i.secondary,
+    textPrimary: r.textPrimary,
+    textSecondary: r.textSecondary,
+    isExtraSmall: a
+  });
+  return /* @__PURE__ */ e.jsxs(o, { sx: s.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      o,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: n.sm
+        },
+        children: [
+          a ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(o, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(c, { level: "h3", sx: s.title, children: t.question }),
+          /* @__PURE__ */ e.jsx(o, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: t.showPoints !== !1 && x.length > 0 && /* @__PURE__ */ e.jsx(
+            g,
+            {
+              fixtureId: t.fixtureId,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      j,
+      {
+        onSelectionChange: t.onSelectionChange,
+        prediction: t.prediction
+      }
+    )
+  ] });
+};
+export {
+  G as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Boolean/BooleanFixture.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
+};