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

package/packages/event-game-play/src/components/Variants/Standard/ScoreState/EventGameStandardScoreState.styles.js

@@ -0,0 +1,259 @@
+const a = (e) => {
+  var i, n, t;
+  return {
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      display: "flex",
+      flexDirection: "column",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
+    },
+    // 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.isMobile ? e.spacingScale.lg : e.spacingScale.md
+    },
+    // Question content container
+    questionContentContainer: {
+      borderRadius: e.borderRadius.md,
+      gap: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column"
+    },
+    // 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.isMobile ? 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: e.surfaceVariant,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)"
+    },
+    footerContainer: {
+      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: e.spacingScale.md
+    },
+    // 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"
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // 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",
+      flex: "0.5",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.spacingScale.lg,
+      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: ((n = e.brandingColors) == null ? void 0 : n.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: ((t = e.brandingColors) == null ? void 0 : t.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
+    },
+    // Safe area indicator for Standard variant (30% width containers)
+    imageSafeArea: {
+      position: "relative",
+      zIndex: 2,
+      width: "165px",
+      // Safe area: 165px
+      height: "100%"
+      // Visual indicator for development (remove in production)
+      // border: "1px dashed rgba(255,255,255,0.7)",
+    }
+  };
+};
+export {
+  a as createStyles
+};

package/packages/event-game-play/src/helpers/helpers.js

@@ -0,0 +1,11 @@
+const x = (f) => {
+  const n = (/* @__PURE__ */ new Date()).getTime(), r = new Date(f).getTime();
+  return n > r;
+}, p = (f, n) => {
+  let r = f;
+  return (n == null ? void 0 : n.min) !== null && (n == null ? void 0 : n.min) !== void 0 && (r = Math.max(r, n.min)), (n == null ? void 0 : n.max) !== null && (n == null ? void 0 : n.max) !== void 0 && (r = Math.min(r, n.max)), r;
+};
+export {
+  p as clampNumberPrediction,
+  x as isPredictionsCutoffPassed
+};

package/packages/event-game-play/src/hooks/useEventGameById.js

@@ -0,0 +1,27 @@
+import { EventGameModel as p } from "fansunited-sdk-esm";
+import { useState as m, useEffect as f } from "react";
+const d = (s, o, r) => {
+  const [u, n] = m(null), [c, t] = m(null), i = async () => {
+    try {
+      const e = await o.eventGame.getGameById(s, !0);
+      if (n(e), r && e.fixtures) {
+        const l = e.fixtures.map(
+          (a) => ({
+            id: a.id,
+            points: a.points || 0
+          })
+        );
+        t(l);
+      } else
+        t([]);
+    } catch (e) {
+      console.warn(e), n(new p()), t([]);
+    }
+  };
+  return f(() => (i(), () => {
+    n(null), t(null);
+  }), [s, o, r]), { game: u, points: c };
+};
+export {
+  d as useEventGameById
+};

package/packages/event-game-play/src/hooks/useEventGamePrediction.js

@@ -0,0 +1,54 @@
+import { useState as i, useEffect as p } from "react";
+const y = (a, n) => {
+  const [u, e] = i(void 0), [d, t] = i(!1), [f, o] = i(!1), g = async () => {
+    let c = "";
+    try {
+      c = (await n.profile.getOwn().getInfo()).id;
+    } catch (r) {
+      if (n.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const l = r;
+        if (l.error.code === 401 || l.error.code === 403) {
+          t(!0), e(null);
+          return;
+        }
+        o(!0), e(null);
+        return;
+      }
+      const s = r;
+      if (s.data.error.code === 401 || s.data.error.code === 403) {
+        t(!0), e(null);
+        return;
+      }
+      o(!0), e(null);
+      return;
+    }
+    try {
+      const r = await n.eventGame.getGamePredictionsForUser(
+        a,
+        c,
+        void 0,
+        !0
+      );
+      if (r.data.length === 0) {
+        e(null);
+        return;
+      }
+      e(r.data[0]);
+    } catch {
+      e(null), t(!1), o(!0);
+    }
+  };
+  return p(() => (g(), () => {
+    e(void 0), t(!1), o(!1);
+  }), [a, n]), {
+    myPrediction: u,
+    setMyPrediction: e,
+    isUnauthorized: d,
+    isApiError: f,
+    setIsUnauthorized: t,
+    setIsApiError: o
+  };
+};
+export {
+  y as useEventGamePrediction
+};

package/packages/event-game-play/src/hooks/useEventRankings.js

@@ -0,0 +1,61 @@
+import { useState as e, useEffect as y } from "react";
+const U = (c, P) => {
+  const [v, r] = e(
+    null
+  ), [m, A] = e(!1), [x, i] = e(!1), [h, l] = e(
+    null
+  ), [o, u] = e([]), [n, g] = e(null), [d, S] = e(!1), f = async (t = null, s) => {
+    try {
+      S(!0);
+      const p = {
+        limit: 10,
+        ...t && { startAfter: t }
+      }, a = await P.eventGame.getRankings(c, p, !0);
+      if (a.data.length === 0) {
+        r([]), g(null);
+        return;
+      }
+      const R = s !== void 0 ? s : o;
+      r(a.data), g({
+        itemsPerPage: a.meta.pagination.itemsPerPage,
+        nextPageStartsAfter: a.meta.pagination.nextPageStartsAfter,
+        hasNextPage: a.meta.pagination.nextPageStartsAfter !== null,
+        hasPreviousPage: R.length > 0
+      });
+    } catch {
+      i(!0);
+    } finally {
+      S(!1);
+    }
+  }, k = () => {
+    if (n != null && n.nextPageStartsAfter) {
+      const t = [
+        ...o,
+        h
+      ];
+      u(t), l(n.nextPageStartsAfter), f(n.nextPageStartsAfter, t);
+    }
+  }, E = () => {
+    if (o.length > 0) {
+      const t = [...o], s = t.pop() || null;
+      u(t), l(s), f(s, t);
+    }
+  };
+  return y(() => (f(), () => {
+    r(null), A(!1), i(!1), g(null), l(null), u([]);
+  }), [c, P]), {
+    rankings: v,
+    pagination: n,
+    loading: d,
+    isUnauthorized: m,
+    isApiError: x,
+    setRankings: r,
+    setIsUnauthorized: A,
+    setIsApiError: i,
+    goToNextPage: k,
+    goToPreviousPage: E
+  };
+};
+export {
+  U as useEventRankings
+};

package/packages/event-game-play/src/index.js

@@ -0,0 +1,4 @@
+import o from "./main.js";
+export {
+  o as default
+};

package/packages/event-game-play/src/main.js

@@ -0,0 +1,7 @@
+import { j as e } from "../../../node_modules/react/jsx-runtime.js";
+import t from "./components/EventGamePlay.js";
+import r from "../../common/src/components/Portal.js";
+const i = (a) => /* @__PURE__ */ e.jsx(r, { packageName: "event-game-play", ...a, children: /* @__PURE__ */ e.jsx(t, { ...a }) });
+export {
+  i as default
+};

package/packages/event-game-play/src/providers/ConstantsProvider.js

@@ -0,0 +1,17 @@
+import { j as e } from "../../../../node_modules/react/jsx-runtime.js";
+import { createContext as n } from "react";
+const r = n({
+  points: []
+}), m = ({ points: t, children: o }) => /* @__PURE__ */ e.jsx(
+  r.Provider,
+  {
+    value: {
+      points: t
+    },
+    children: o
+  }
+);
+export {
+  r as EventGameConstantsContext,
+  m as EventGameConstantsProvider
+};