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

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

@@ -0,0 +1,88 @@
+import { j as o } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as c, IconButton as e } from "@mui/joy";
+import { useInternalTheme as m } 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 "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import x from "../../../../../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import u from "../../../../../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+const I = ({
+  hasNextPage: i,
+  hasPreviousPage: n,
+  onNextPage: a,
+  onPreviousPage: l,
+  isOverlayVariant: s = !1,
+  justifyContent: d = "flex-start"
+}) => {
+  const p = m(), t = () => {
+    if (!s)
+      return {
+        borderRadius: "8px",
+        minWidth: "32px",
+        minHeight: "32px"
+      };
+    const r = p.colorSchemes.dark;
+    return {
+      borderRadius: "8px",
+      minWidth: "32px",
+      minHeight: "32px",
+      backgroundColor: "transparent",
+      color: r.textColor,
+      border: "none",
+      "&:hover": {
+        backgroundColor: r.palette.neutral.solidBg,
+        color: r.textColor
+      },
+      "&:active": {
+        backgroundColor: r.palette.neutral.plainActiveBg
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent",
+        color: r.textDisabled,
+        opacity: 0.5
+      }
+    };
+  };
+  return /* @__PURE__ */ o.jsxs(
+    c,
+    {
+      sx: {
+        display: "flex",
+        gap: 0.5,
+        alignItems: "center",
+        justifyContent: d
+      },
+      children: [
+        /* @__PURE__ */ o.jsx(
+          e,
+          {
+            size: "md",
+            variant: "plain",
+            color: "neutral",
+            onClick: l,
+            disabled: !n,
+            sx: t(),
+            children: /* @__PURE__ */ o.jsx(x, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          e,
+          {
+            size: "md",
+            variant: "plain",
+            color: "neutral",
+            onClick: a,
+            disabled: !i,
+            sx: t(),
+            children: /* @__PURE__ */ o.jsx(u, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  I as default
+};

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

@@ -0,0 +1,34 @@
+import { j as m } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n } from "@mui/joy";
+import { isMobile as a, useCornerRadius as p, useColors as o, useBorderSize as u } 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 "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const R = ({
+  children: r,
+  brandingBorderColor: e
+}) => {
+  const i = a(), s = p().md, d = e || o().secondaryContainer, t = u().size + " solid " + d;
+  return /* @__PURE__ */ m.jsx(
+    n,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: i ? "column" : "row",
+        width: "100%",
+        borderRadius: s,
+        boxShadow: "md",
+        border: t,
+        overflow: "hidden",
+        background: o().surface,
+        minHeight: "250px"
+      },
+      children: r
+    }
+  );
+};
+export {
+  R as default
+};

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

@@ -0,0 +1,67 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Snackbar as l, Box as n, Typography as o } from "@mui/joy";
+import a from "../../../../../node_modules/@mui/icons-material/esm/CheckCircle.js";
+import m from "../../../../../node_modules/@mui/icons-material/esm/Error.js";
+import { useCornerRadius as p, useFontFamily 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 "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const z = ({
+  notification: r,
+  onClose: s
+}) => {
+  const t = p(), i = x();
+  return r.open ? /* @__PURE__ */ e.jsx(
+    l,
+    {
+      open: r.open,
+      onClose: s,
+      autoHideDuration: r.variant === "error" ? 5e3 : 3e3,
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      color: r.variant === "success" ? "success" : "danger",
+      variant: "soft",
+      startDecorator: r.variant === "success" ? /* @__PURE__ */ e.jsx(a, {}) : /* @__PURE__ */ e.jsx(m, {}),
+      sx: {
+        borderRadius: t.sm,
+        fontFamily: i.secondary,
+        minWidth: "300px",
+        maxWidth: "400px",
+        zIndex: 9999,
+        position: "fixed"
+      },
+      children: /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+        r.title && /* @__PURE__ */ e.jsx(
+          o,
+          {
+            level: "title-md",
+            sx: {
+              fontWeight: 600,
+              fontSize: "16px",
+              lineHeight: 1.2,
+              color: "inherit"
+            },
+            children: r.title
+          }
+        ),
+        r.message && /* @__PURE__ */ e.jsx(
+          o,
+          {
+            level: "body-sm",
+            sx: {
+              fontSize: "14px",
+              lineHeight: 1.3,
+              color: "inherit",
+              opacity: 0.9
+            },
+            children: r.message
+          }
+        )
+      ] })
+    }
+  ) : null;
+};
+export {
+  z as default
+};

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

@@ -0,0 +1,151 @@
+import { j as o } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n, Typography as u } from "@mui/joy";
+import { useColors as C, useCornerRadius as y, isMobile as f, getSpacing as j } 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 "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const E = (e) => {
+  const r = C(), p = y(), m = f(), g = () => {
+    const c = p.full, a = e.brandingPrimaryColor || r.palette.primary.plainColor, l = e.brandingPrimaryColor || r.palette.primary.outlinedBorder, i = "#FFFFFF", t = r.outlineEnabledBorder;
+    return /* @__PURE__ */ o.jsxs(
+      n,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ o.jsx(
+            n,
+            {
+              sx: {
+                flex: 1,
+                height: "3px",
+                backgroundColor: t,
+                borderRadius: "1px"
+              }
+            }
+          ),
+          /* @__PURE__ */ o.jsx(
+            n,
+            {
+              sx: {
+                width: "32px",
+                height: "32px",
+                borderRadius: c,
+                backgroundColor: a,
+                border: `1px solid ${l}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "background-color 0.3s ease",
+                mx: 1.5
+                // Add margin between lines and circle
+              },
+              children: /* @__PURE__ */ o.jsx(
+                u,
+                {
+                  sx: {
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    color: i,
+                    lineHeight: 1
+                  },
+                  children: e.currentStep
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ o.jsx(
+            n,
+            {
+              sx: {
+                flex: 1,
+                height: "3px",
+                backgroundColor: t,
+                borderRadius: "1px"
+              }
+            }
+          )
+        ]
+      }
+    );
+  }, b = () => {
+    const c = p.full, a = e.totalSteps || e.eventGame.fixtures.length, l = [];
+    for (let i = 0; i < a; i++) {
+      const t = i + 1;
+      let s, d, x;
+      if (t < e.currentStep ? (s = e.brandingPrimaryColor || r.palette.primary.plainColor, d = e.brandingPrimaryColor || r.palette.primary.outlinedBorder, x = "#FFFFFF") : t === e.currentStep ? (s = e.brandingPrimaryColor || r.palette.primary.plainColor, d = e.brandingPrimaryColor || r.palette.primary.outlinedBorder, x = r.palette.primary.onPrimary) : (s = r.palette.neutral.softBg, d = r.outlineEnabledBorder, x = r.textColor), l.push(
+        /* @__PURE__ */ o.jsx(
+          n,
+          {
+            sx: {
+              width: "32px",
+              height: "32px",
+              borderRadius: c,
+              backgroundColor: s,
+              border: `1px solid ${d}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "background-color 0.3s ease",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ o.jsx(
+              u,
+              {
+                sx: {
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  color: x,
+                  lineHeight: 1
+                },
+                children: t
+              }
+            )
+          },
+          `step-${t}`
+        )
+      ), i < a - 1) {
+        const h = t < e.currentStep ? e.brandingPrimaryColor || r.palette.primary.plainColor : r.outlineEnabledBorder;
+        l.push(
+          /* @__PURE__ */ o.jsx(
+            n,
+            {
+              sx: {
+                width: "32px",
+                height: "3px",
+                backgroundColor: h,
+                transition: "background-color 0.3s ease",
+                borderRadius: "2px"
+              }
+            },
+            `line-${t}`
+          )
+        );
+      }
+    }
+    return l;
+  };
+  return /* @__PURE__ */ o.jsx(
+    n,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        py: j("xs"),
+        width: "100%",
+        zIndex: 1
+      },
+      children: m || e.isSplitVariant ? g() : b()
+    }
+  );
+};
+export {
+  E as default
+};

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

@@ -0,0 +1,163 @@
+import { j as n } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as b } from "react";
+import { Modal as P, ModalDialog as S, IconButton as E, DialogContent as F, DialogActions as I, Button as y } from "@mui/joy";
+import R from "../../../../../../node_modules/@mui/icons-material/esm/Close.js";
+import { useColors as T, useCornerRadius as q, useFontFamily as w, useSpacingScale as B } 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 N } from "../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as M } from "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import { EventGameOutcomeTypeEnum as l } from "fansunited-sdk-esm";
+import { createStyles as U } from "./EditPredictionModal.styles.js";
+import k from "../Fixtures/Number/NumberFixture.js";
+import D from "../Fixtures/Boolean/BooleanFixture.js";
+import C from "../Fixtures/Text/TextFixture.js";
+import { clampNumberPrediction as V } from "../../../helpers/helpers.js";
+import { useTranslation as G } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ie = (e) => {
+  const { t: d } = G(), { shadowRootElement: v } = N(M), r = T(), h = q(), f = w(), g = B(), [m, x] = b(!1), c = U({
+    spacingScale: g,
+    borderRadius: h,
+    fontFamilyPrimary: f.primary,
+    fontFamilySecondary: f.secondary,
+    textPrimary: r.textPrimary,
+    textSecondary: r.textSecondary,
+    primaryColor: r.palette.primary.plainColor,
+    surface: r.surface
+  }), t = e.prediction.fixtures.find(
+    (i) => i.id === e.fixture.id
+  ), s = (i) => {
+    const o = { ...e.prediction }, a = o.fixtures.findIndex(
+      (u) => u.id === e.fixture.id
+    );
+    a !== -1 && (o.fixtures[a] = {
+      ...o.fixtures[a],
+      prediction: i
+    }), e.onPredictionUpdate(o);
+  }, j = async () => {
+    if (x(!0), e.fixture.outcomeType === l.NUMBER) {
+      const i = e.fixture.validOutcomes;
+      if (t && typeof t.prediction == "number") {
+        const o = V(t.prediction, i);
+        o !== t.prediction && s(o);
+      }
+    }
+    try {
+      await e.play(), e.onPlayResult && e.onPlayResult({ success: !0 }), e.onClose();
+    } catch (i) {
+      console.error("Failed to save prediction:", i), e.onPlayResult && e.onPlayResult({ success: !1, error: i }), e.view !== "score" && e.onClose();
+    } finally {
+      x(!1);
+    }
+  }, O = () => {
+    const i = e.fixture.outcomeType;
+    if (i === l.NUMBER) {
+      const o = t == null ? void 0 : t.prediction, a = e.fixture.validOutcomes;
+      return /* @__PURE__ */ n.jsx(
+        k,
+        {
+          fixtureId: e.fixture.id,
+          prediction: o,
+          onChange: (u) => {
+            s(u);
+          },
+          question: e.fixture.question,
+          validOutcomes: a || null,
+          showPoints: !1,
+          isOverlayVariant: e.isOverlayVariant
+        }
+      );
+    }
+    if (i === l.BOOLEAN) {
+      const o = t == null ? void 0 : t.prediction;
+      return /* @__PURE__ */ n.jsx(
+        D,
+        {
+          fixtureId: e.fixture.id,
+          onSelectionChange: (a) => {
+            s(a);
+          },
+          prediction: o,
+          question: e.fixture.question,
+          showPoints: !1
+        }
+      );
+    }
+    if (i === l.FREE_INPUT) {
+      const o = t == null ? void 0 : t.prediction;
+      return /* @__PURE__ */ n.jsx(
+        C,
+        {
+          fixtureId: e.fixture.id,
+          question: e.fixture.question,
+          prediction: o || null,
+          validOutcomes: null,
+          onTextChange: (a) => {
+            s(a);
+          },
+          showPoints: !1
+        }
+      );
+    }
+    if (i === l.ENUM) {
+      const o = t == null ? void 0 : t.prediction;
+      return /* @__PURE__ */ n.jsx(
+        C,
+        {
+          fixtureId: e.fixture.id,
+          question: e.fixture.question,
+          prediction: o || null,
+          validOutcomes: e.fixture.validOutcomes,
+          onTextChange: (a) => {
+            s(a);
+          },
+          showPoints: !1
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ n.jsx(
+    P,
+    {
+      open: e.isOpen,
+      onClose: e.onClose,
+      container: v,
+      sx: { zIndex: 1300 },
+      children: /* @__PURE__ */ n.jsxs(S, { sx: c.modalDialog, children: [
+        /* @__PURE__ */ n.jsx(E, { onClick: e.onClose, sx: c.closeButton, children: /* @__PURE__ */ n.jsx(R, {}) }),
+        /* @__PURE__ */ n.jsx(F, { sx: c.content, children: O() }),
+        e.view === "score" && /* @__PURE__ */ n.jsxs(I, { children: [
+          /* @__PURE__ */ n.jsx(y, { variant: "solid", onClick: j, loading: m, children: d("eventGame.buttons.save") }),
+          /* @__PURE__ */ n.jsx(
+            y,
+            {
+              variant: "outlined",
+              onClick: e.onClose,
+              disabled: m,
+              sx: {
+                borderColor: r.secondaryContainer,
+                color: r.secondaryContainer,
+                "&:hover": {
+                  borderColor: r.textPrimary,
+                  color: r.textPrimary,
+                  backgroundColor: r.surfaceVariant
+                },
+                "&:disabled": {
+                  borderColor: r.secondaryContainer,
+                  color: r.secondaryContainer,
+                  opacity: 0.5
+                }
+              },
+              children: d("eventGame.buttons.close")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  ie as default
+};

package/packages/event-game-play/src/components/Shared/Summary/EditPredictionModal.styles.js

@@ -0,0 +1,110 @@
+import { isMobile as o } 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 g = (t) => {
+  const e = o();
+  return {
+    modalDialog: {
+      width: "100%",
+      maxWidth: e ? "90vw" : "600px",
+      maxHeight: e ? "90vh" : "80vh",
+      overflow: "auto",
+      p: e ? 2 : 3,
+      borderRadius: t.borderRadius.md,
+      backgroundColor: t.surface
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: t.spacingScale.md,
+      paddingBottom: t.spacingScale.lg
+    },
+    title: {
+      fontFamily: t.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: e ? "1.25em" : "1.5em",
+      lineHeight: 1.2,
+      color: t.textPrimary,
+      textAlign: "center",
+      marginBottom: t.spacingScale.sm
+    },
+    questionText: {
+      fontFamily: t.fontFamilySecondary,
+      fontWeight: 500,
+      fontSize: e ? "1em" : "1.125em",
+      lineHeight: 1.3,
+      color: t.textSecondary,
+      textAlign: "center",
+      marginBottom: t.spacingScale.md
+    },
+    buttonContainer: {
+      marginTop: t.spacingScale.lg,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    cancelButton: {
+      fontFamily: t.fontFamilySecondary,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      borderRadius: t.borderRadius.sm,
+      padding: `${t.spacingScale.sm} ${t.spacingScale.md}`,
+      minWidth: e ? "100px" : "120px",
+      borderColor: t.primaryColor,
+      color: t.primaryColor,
+      "&:hover": {
+        backgroundColor: `${t.primaryColor}10`,
+        borderColor: t.primaryColor
+      }
+    },
+    saveButton: {
+      fontFamily: t.fontFamilySecondary,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      borderRadius: t.borderRadius.sm,
+      padding: `${t.spacingScale.sm} ${t.spacingScale.md}`,
+      minWidth: e ? "100px" : "120px",
+      backgroundColor: t.primaryColor,
+      color: "#ffffff",
+      "&:hover": {
+        backgroundColor: t.primaryColor,
+        opacity: 0.9
+      }
+    },
+    closeButton: {
+      position: "absolute",
+      top: t.spacingScale.sm,
+      right: t.spacingScale.sm,
+      backgroundColor: "transparent",
+      color: t.textSecondary,
+      border: "none",
+      borderRadius: "50%",
+      width: "32px",
+      height: "32px",
+      minHeight: "32px",
+      minWidth: "32px",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      transition: "all 0.2s ease-in-out",
+      zIndex: 1e3,
+      "&:hover": {
+        backgroundColor: `${t.textSecondary}15`,
+        color: t.textPrimary,
+        transform: "scale(1.05)"
+      },
+      "& svg": {
+        fontSize: "1.25em"
+      }
+    }
+  };
+};
+export {
+  g as createStyles
+};