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

package/packages/event-game-play/src/components/EventGamePlay.js

@@ -0,0 +1,318 @@
+import { j as t } from "../../../../node_modules/react/jsx-runtime.js";
+import { useState as j, useEffect as L } from "react";
+import { WidgetTemplate as u } from "../../../common/src/enums/enums.js";
+import "../../../common/src/providers/ContainerProvider.js";
+import "../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import N from "../../../common/src/components/Spinner.js";
+import "@mui/joy";
+import "../../../common/src/providers/ConstantsProvider.js";
+import { useEventGameById as F } from "../hooks/useEventGameById.js";
+import { useEventGamePrediction as V } from "../hooks/useEventGamePrediction.js";
+import B from "./Variants/Standard/EventGameStandardVariant.js";
+import M from "./Variants/Standard/ScoreState/EventGameStandardScoreState.js";
+import Y from "./Variants/Split/ScoreState/EventGameSplitScoreState.js";
+import b from "./Variants/Overlay/FinishedGame/EventGameOverlayFinishedGame.js";
+import O from "./EventGameNotFound.js";
+import q from "./Variants/Standard/Error/EventGameStandardError.js";
+import z from "./Variants/Split/Error/EventGameSplitError.js";
+import H from "./Variants/Overlay/Error/EventGameOverlayError.js";
+import { EventGamePredictionRequestBody as K, EventGameOutcomeTypeEnum as G } from "fansunited-sdk-esm";
+import W from "./Variants/Standard/FinishedGame/EventGameStandardFinishedGame.js";
+import v from "./Shared/Notification.js";
+import _ from "./Variants/Overlay/EventGameOverlayVariant.js";
+import J from "./Variants/Split/EventGameSplitVariant.js";
+import Q from "./Variants/Split/FinishedGame/EventGameSplitFinishedGame.js";
+import X from "./Variants/Overlay/ScoreState/EventGameOverlayScoreState.js";
+import { EventGameConstantsProvider as k } from "../providers/ConstantsProvider.js";
+import { useTranslation as Z } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const $ = (e) => {
+  const r = (l, i) => {
+    switch (l) {
+      case G.NUMBER:
+        return (i == null ? void 0 : i.min) !== null && (i == null ? void 0 : i.min) !== void 0 ? i.min : 0;
+      case G.BOOLEAN:
+      case G.ENUM:
+      case G.FREE_INPUT:
+        return null;
+    }
+  }, a = new K();
+  return a.fixtures = e.map((l) => ({
+    id: l.id,
+    predictionType: l.outcomeType,
+    prediction: r(l.outcomeType, l.validOutcomes)
+  })), a.tiebreaker = null, a;
+};
+function E(e) {
+  return e.template === u.STANDARD;
+}
+const we = (e) => {
+  const { t: r } = Z(), { game: a, points: l } = F(e.entityId, e.sdk, e.showPoints), {
+    myPrediction: i,
+    setMyPrediction: C,
+    isApiError: f,
+    setIsApiError: A,
+    isUnauthorized: y,
+    setIsUnauthorized: I
+  } = V(e.entityId, e.sdk), [x, w] = j(!1), [P, s] = j({
+    fixtures: [],
+    tiebreaker: null
+  }), [h, S] = j({
+    open: !1,
+    variant: "success",
+    title: "",
+    message: ""
+  }), m = (n, o, T) => {
+    S({
+      open: !0,
+      variant: n,
+      title: o,
+      message: T
+    });
+  }, g = () => {
+    S((n) => ({ ...n, open: !1 }));
+  }, U = (n) => {
+    n.success ? m(
+      "success",
+      r("eventGame.alerts.play.success.title"),
+      r("eventGame.alerts.play.success.message")
+    ) : m(
+      "error",
+      r("eventGame.alerts.play.error.title"),
+      r("eventGame.alerts.play.error.message")
+    );
+  };
+  if (L(() => {
+    a && a.status === "OPEN" && s($(a.fixtures));
+  }, [a == null ? void 0 : a.status]), !a || i === void 0)
+    return /* @__PURE__ */ t.jsx(N, { my: 20 });
+  if (!a.id)
+    return /* @__PURE__ */ t.jsx(O, {});
+  const D = () => {
+    A(!1), I(!1);
+  };
+  if (y || f)
+    return E(e) ? /* @__PURE__ */ t.jsx(
+      q,
+      {
+        eventGame: a,
+        imagePosition: e.imagePosition,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: f,
+        toggleTryAgain: D
+      }
+    ) : e.template === u.OVERLAY ? /* @__PURE__ */ t.jsx(
+      H,
+      {
+        eventGame: a,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: f,
+        toggleTryAgain: D
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      z,
+      {
+        eventGame: a,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: f,
+        toggleTryAgain: D
+      }
+    );
+  const d = async () => {
+    w(!0);
+    let n = {
+      fixtures: [],
+      tiebreaker: null
+      //TODO:
+    };
+    i ? n.fixtures = i.fixtures.map((o) => ({
+      id: o.id,
+      predictionType: o.predictionType,
+      prediction: o.prediction
+    })) : n = { ...P };
+    try {
+      const o = i ? await e.sdk.eventGame.updatePrediction(
+        e.entityId,
+        i.id,
+        n
+      ) : await e.sdk.eventGame.makePrediction(
+        e.entityId,
+        n
+      );
+      C(o), m(
+        "success",
+        r("eventGame.alerts.play.success.title"),
+        r("eventGame.alerts.play.success.message")
+      );
+    } catch (o) {
+      if (e.sdk.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const c = o;
+        c.error.code === 401 || c.error.code === 403 ? I(!0) : m(
+          "error",
+          r("eventGame.alerts.play.error.title"),
+          r("eventGame.alerts.play.error.message")
+        );
+      } else {
+        const c = o;
+        c.data.error.code === 401 || c.data.error.code === 403 ? I(!0) : m(
+          "error",
+          r("eventGame.alerts.play.error.title"),
+          r("eventGame.alerts.play.error.message")
+        );
+      }
+    } finally {
+      w(!1);
+    }
+  }, R = () => e.template === u.OVERLAY ? /* @__PURE__ */ t.jsx(k, { points: l || [], children: /* @__PURE__ */ t.jsx(
+    _,
+    {
+      isPlaying: x,
+      prediction: P,
+      sdk: e.sdk,
+      leads: e.leads,
+      eventGame: a,
+      play: d,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      setPrediction: s,
+      showCountdown: e.showCountdown,
+      optionsLayout: e.optionsLayout,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) }) : E(e) ? /* @__PURE__ */ t.jsx(k, { points: l || [], children: /* @__PURE__ */ t.jsx(
+    B,
+    {
+      isPlaying: x,
+      sdk: e.sdk,
+      leads: e.leads,
+      eventGame: a,
+      play: d,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      prediction: P,
+      setPrediction: s,
+      showCountdown: e.showCountdown,
+      optionsLayout: e.optionsLayout,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) }) : /* @__PURE__ */ t.jsx(k, { points: l || [], children: /* @__PURE__ */ t.jsx(
+    J,
+    {
+      isPlaying: x,
+      prediction: P,
+      sdk: e.sdk,
+      leads: e.leads,
+      eventGame: a,
+      play: d,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      setPrediction: s,
+      showCountdown: e.showCountdown,
+      optionsLayout: e.optionsLayout,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) });
+  return a.status === "SETTLED" ? E(e) ? /* @__PURE__ */ t.jsx(
+    W,
+    {
+      sdk: e.sdk,
+      eventGame: a,
+      prediction: i,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      showPredictionDetails: e.showPredictionDetails,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : e.template === u.OVERLAY ? /* @__PURE__ */ t.jsx(
+    b,
+    {
+      sdk: e.sdk,
+      game: a,
+      prediction: i,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      showPredictionDetails: e.showPredictionDetails,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : /* @__PURE__ */ t.jsx(
+    Q,
+    {
+      sdk: e.sdk,
+      event: a,
+      prediction: i,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      showPredictionDetails: e.showPredictionDetails,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : i ? e.template === u.OVERLAY ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      X,
+      {
+        sdk: e.sdk,
+        leads: e.leads,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isUnauthorized: y,
+        eventGame: a,
+        prediction: i,
+        onPredictionUpdate: s,
+        play: d,
+        onPlayResult: U,
+        additionalCTA: e.additionalCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      v,
+      {
+        notification: h,
+        onClose: g
+      }
+    )
+  ] }) : E(e) ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      M,
+      {
+        imagePosition: e.imagePosition || "left",
+        eventGame: a,
+        sdk: e.sdk,
+        leads: e.leads,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isUnauthorized: y,
+        prediction: i,
+        onPredictionUpdate: s,
+        play: d,
+        onPlayResult: U,
+        additionalCTA: e.additionalCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      v,
+      {
+        notification: h,
+        onClose: g
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      Y,
+      {
+        eventGame: a,
+        sdk: e.sdk,
+        leads: e.leads,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isUnauthorized: y,
+        prediction: i,
+        onPredictionUpdate: s,
+        play: d,
+        onPlayResult: U,
+        additionalCTA: e.additionalCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ),
+    /* @__PURE__ */ t.jsx(v, { notification: h, onClose: g })
+  ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    R(),
+    /* @__PURE__ */ t.jsx(v, { notification: h, onClose: g })
+  ] });
+};
+export {
+  we as default
+};

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

@@ -0,0 +1,93 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useInternalTheme as f, useCornerRadius as d, useFontFamily as p, isMobile 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 { Alert as x, Stack as h, Typography as s } from "@mui/joy";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import y from "../../../../../node_modules/@mui/icons-material/esm/CheckCircle.js";
+import g from "../../../../../node_modules/@mui/icons-material/esm/Info.js";
+import j from "../../../../../node_modules/@mui/icons-material/esm/Warning.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const S = (o, r) => {
+  switch (o) {
+    case "success":
+      return /* @__PURE__ */ e.jsx(y, {});
+    case "error":
+      return /* @__PURE__ */ e.jsx(j, { sx: { color: r } });
+    case "info":
+      return /* @__PURE__ */ e.jsx(g, {});
+  }
+}, b = (o) => {
+  switch (o) {
+    case "success":
+      return "success";
+    case "error":
+      return "danger";
+    case "info":
+      return "primary";
+  }
+}, W = ({
+  variant: o,
+  title: r,
+  message: m,
+  description: n
+}) => {
+  const l = f(), a = d(), t = p().secondary, c = u(), i = b(o);
+  return /* @__PURE__ */ e.jsx(
+    x,
+    {
+      variant: "soft",
+      color: i,
+      startDecorator: S(
+        o,
+        l.colorSchemes.light.palette.danger.plainColor
+      ),
+      sx: {
+        gap: 1,
+        borderRadius: a.sm,
+        fontSize: c ? "0.75em" : "0.875em",
+        "--Icon-fontSize": c ? "1em" : "1.25em"
+      },
+      children: /* @__PURE__ */ e.jsxs(
+        h,
+        {
+          sx: {
+            fontSize: "1.5em"
+          },
+          children: [
+            r && /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "title-md",
+                color: i,
+                fontWeight: "bold",
+                sx: { fontFamily: t, fontSize: "0.875em" },
+                children: r
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "body-sm",
+                sx: { fontFamily: t, fontSize: "0.675em" },
+                children: m
+              }
+            ),
+            n && /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "body-xs",
+                sx: { fontFamily: t, fontSize: "0.6em" },
+                children: n
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  W as default
+};

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

@@ -0,0 +1,125 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useColors as T, useCornerRadius as b, useFontFamily as w, useSpacingScale as C, isMobile as F } 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 { Box as a, Typography as i } from "@mui/joy";
+import { useState as v, useCallback as I, useEffect as R } from "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+import { useTranslation as L } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const P = (x) => {
+  const { t: l } = L(), c = T(), p = b(), m = w(), n = C(), o = F() || x.isSplitVariant, [s, h] = v({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    total: 0
+  }), u = I(() => {
+    const d = (/* @__PURE__ */ new Date()).getTime(), r = new Date(x.predictionsCutoffTime).getTime() - d;
+    if (r <= 0)
+      return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+    const y = Math.floor(r / (1e3 * 60 * 60 * 24)), g = Math.floor(
+      r % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)
+    ), j = Math.floor(r % (1e3 * 60 * 60) / (1e3 * 60)), S = Math.floor(r % (1e3 * 60) / 1e3);
+    return { days: y, hours: g, minutes: j, seconds: S, total: r };
+  }, [x.predictionsCutoffTime]);
+  if (R(() => {
+    const d = () => {
+      h(u());
+    };
+    d();
+    const f = setInterval(d, 1e3);
+    return () => clearInterval(f);
+  }, [u]), s.total <= 0)
+    return null;
+  const t = {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: n.sm,
+      pt: o ? 0 : n.md,
+      px: n.md,
+      zIndex: 1
+    },
+    participationText: {
+      fontFamily: m.primary,
+      fontWeight: 500,
+      fontSize: o ? "1.125em" : "1.25em",
+      lineHeight: 1.2,
+      color: c.textPrimary,
+      textAlign: "center"
+    },
+    countdownContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: o ? n.xs : n.sm
+    },
+    timeUnit: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: n["2xs"],
+      bgcolor: c.palette.neutral.softBg,
+      borderRadius: p.sm,
+      minWidth: o ? n["2xl"] : n["3xl"],
+      px: o ? n["2xs"] : n.xs,
+      py: o ? n["3xs"] : n["2xs"]
+    },
+    timeValue: {
+      fontFamily: m.primary,
+      fontWeight: 500,
+      fontSize: o ? "1em" : "1.5em",
+      color: c.textPrimary
+    },
+    timeLabel: {
+      fontFamily: m.secondary,
+      fontWeight: 400,
+      fontSize: o ? "0.625em" : "0.75em",
+      color: c.textSecondary
+    },
+    separator: {
+      fontFamily: m.primary,
+      fontWeight: 400,
+      fontSize: o ? "1em" : "1.25em",
+      color: c.textSecondary,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "auto",
+      flexShrink: 0
+    }
+  };
+  return /* @__PURE__ */ e.jsxs(a, { sx: t.container, children: [
+    /* @__PURE__ */ e.jsx(i, { sx: t.participationText, children: l("eventGame.countdown.participationTimeLeft") }),
+    /* @__PURE__ */ e.jsxs(a, { sx: t.countdownContainer, children: [
+      s.days > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(a, { sx: t.timeUnit, children: [
+          /* @__PURE__ */ e.jsx(i, { sx: t.timeValue, children: s.days.toString().padStart(2, "0") }),
+          /* @__PURE__ */ e.jsx(i, { sx: t.timeLabel, children: l("eventGame.countdown.daysShort") })
+        ] }),
+        /* @__PURE__ */ e.jsx(i, { sx: t.separator, children: ":" })
+      ] }),
+      (s.days > 0 || s.hours > 0) && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(a, { sx: t.timeUnit, children: [
+          /* @__PURE__ */ e.jsx(i, { sx: t.timeValue, children: s.hours.toString().padStart(2, "0") }),
+          /* @__PURE__ */ e.jsx(i, { sx: t.timeLabel, children: l("eventGame.countdown.hoursShort") })
+        ] }),
+        /* @__PURE__ */ e.jsx(i, { sx: t.separator, children: ":" })
+      ] }),
+      /* @__PURE__ */ e.jsxs(a, { sx: t.timeUnit, children: [
+        /* @__PURE__ */ e.jsx(i, { sx: t.timeValue, children: s.minutes.toString().padStart(2, "0") }),
+        /* @__PURE__ */ e.jsx(i, { sx: t.timeLabel, children: l("eventGame.countdown.minutesShort") })
+      ] }),
+      /* @__PURE__ */ e.jsx(i, { sx: t.separator, children: ":" }),
+      /* @__PURE__ */ e.jsxs(a, { sx: t.timeUnit, children: [
+        /* @__PURE__ */ e.jsx(i, { sx: t.timeValue, children: s.seconds.toString().padStart(2, "0") }),
+        /* @__PURE__ */ e.jsx(i, { sx: t.timeLabel, children: l("eventGame.countdown.secondsShort") })
+      ] })
+    ] })
+  ] });
+};
+export {
+  P as default
+};