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

package/packages/event-game-play/src/components/Variants/Standard/Error/EventGameStandardError.js

@@ -0,0 +1,29 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import "react";
+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 "@mui/joy";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import i from "../../../../../../common/src/components/Skeletons/Standard/ApiError/StandardApiErrorSkeleton.js";
+import n from "../../../Shared/MainCard.js";
+import { useTranslation as o } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const A = (r) => {
+  const { t } = o();
+  return /* @__PURE__ */ e.jsx(n, { brandingBorderColor: null, children: /* @__PURE__ */ e.jsx(
+    i,
+    {
+      entity: { ...r.eventGame, labels: null },
+      headline: t("eventGame.headline"),
+      tryAgainButtonText: t("eventGame.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: r.defaultImagePlaceholderUrl,
+      imagePosition: r.imagePosition || "left",
+      isApiError: r.isApiError,
+      toggleTryAgain: r.toggleTryAgain,
+      renderPresentedBy: () => /* @__PURE__ */ e.jsx(e.Fragment, {})
+    }
+  ) });
+};
+export {
+  A as default
+};

package/packages/event-game-play/src/components/Variants/Standard/EventGameStandardVariant.js

@@ -0,0 +1,329 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import de, { useCallback as ue, useMemo as me } from "react";
+import { Box as r, Typography as m, Button as D } from "@mui/joy";
+import { useInternalTheme as xe, isMobile as fe, isExtraSmall as pe, useColors as g, useFontFamily as B, useCornerRadius as L, useSpacingScale as he, useImageBackgroundGradient as ge } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as ye } from "../../../../../common/src/functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as A } from "../../../../../common/src/enums/enums.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import Ce from "../../../../../common/src/components/Skeletons/Standard/StandardSkeleton.js";
+import { useImageVariant as ve } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import Se from "../../Shared/MainCard.js";
+import { createStyles as je } from "./EventGameStandardVariant.styles.js";
+import { EventGameOutcomeTypeEnum as y } from "fansunited-sdk-esm";
+import Ge from "../../Shared/Fixtures/Number/NumberFixture.js";
+import be from "../../Shared/Fixtures/Boolean/BooleanFixture.js";
+import $ from "../../Shared/Fixtures/Text/TextFixture.js";
+import Te from "../../Shared/Stepper.js";
+import Ee from "../../Shared/Countdown.js";
+import Pe from "../../Shared/Summary/PredictionSummary.js";
+import { isPredictionsCutoffPassed as qe, clampNumberPrediction as Fe } from "../../../helpers/helpers.js";
+import { useTranslation as Ie } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const et = (n) => {
+  const [o, T] = de.useState(1), w = xe(), { t: a } = Ie(), I = fe(), M = pe(), U = n.imagePosition || "left", E = ve(
+    {
+      images: n.eventGame.images,
+      imagePlaceholder: n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : ""
+    },
+    A.STANDARD
+  ), C = M || I && !!E, z = g().palette.danger.plainColor, V = g().textColor, H = g().textColor, W = B().secondary, _ = "60%", P = B().primary, J = g().surfaceVariant, K = L(), f = g().palette.primary.plainColor, p = g().palette.primary.onPrimary, N = L().xl, Q = he(), X = ge(
+    A.STANDARD
+  ), i = je({
+    finalImage: E,
+    spacingScale: Q,
+    borderRadius: K,
+    fontFamilyPrimary: P,
+    fontFamilySecondary: W,
+    textColor: V,
+    secondaryColor: H,
+    bgcolor: ye(J || ""),
+    opacity: _,
+    darkTextColor: w.colorSchemes.dark.textColor,
+    imageBackgroundGradient: X,
+    isMobile: I,
+    isExtraSmall: C,
+    dangerColor: z
+  }), v = ue(
+    (t, l) => {
+      n.setPrediction((d) => {
+        const u = { ...d }, c = u.fixtures.find(
+          (x) => x.id === t
+        );
+        return c && (c.prediction = l), u;
+      });
+    },
+    [n.setPrediction]
+  ), h = n.eventGame.fixtures.length + 1, q = n.eventGame.status === "OPEN" && qe(n.eventGame.predictionsCutoff || ""), Y = () => {
+    var l, d;
+    const t = n.eventGame.fixtures[o - 1];
+    if (t && t.outcomeType === y.NUMBER) {
+      const u = t.validOutcomes, c = (d = (l = n.prediction) == null ? void 0 : l.fixtures) == null ? void 0 : d.find(
+        (x) => x.id === t.id
+      );
+      if (c && typeof c.prediction == "number") {
+        const x = Fe(
+          c.prediction,
+          u
+        );
+        x !== c.prediction && v(t.id, x);
+      }
+    }
+    o < h ? T(o + 1) : n.play();
+  }, Z = (t) => {
+    T(t + 1);
+  }, F = () => {
+    var d, u;
+    if (o === h) return !0;
+    const t = n.eventGame.fixtures[o - 1];
+    if (!t) return !1;
+    const l = (u = (d = n.prediction) == null ? void 0 : d.fixtures) == null ? void 0 : u.find(
+      (c) => c.id === t.id
+    );
+    return l ? (t.outcomeType === y.NUMBER, l.prediction !== null) : !1;
+  }, ee = () => {
+    o > 1 && T(o - 1);
+  }, te = () => /* @__PURE__ */ e.jsx(r, { sx: i.questionArea, children: /* @__PURE__ */ e.jsx(r, { sx: i.questionContainer, children: /* @__PURE__ */ e.jsx(r, { sx: i.questionContentContainer, children: /* @__PURE__ */ e.jsxs(r, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsx(m, { sx: i.stateTitle, children: a("eventGame.states.pending.title") }),
+    /* @__PURE__ */ e.jsx(m, { sx: i.stateDescription, children: a("eventGame.states.pending.description") })
+  ] }) }) }) }), ne = () => /* @__PURE__ */ e.jsx(r, { sx: i.questionArea, children: /* @__PURE__ */ e.jsx(r, { sx: i.questionContainer, children: /* @__PURE__ */ e.jsx(r, { sx: i.questionContentContainer, children: /* @__PURE__ */ e.jsxs(r, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsxs(r, { sx: i.liveIndicatorContainer, children: [
+      /* @__PURE__ */ e.jsx(r, { sx: i.liveIndicator }),
+      /* @__PURE__ */ e.jsx(m, { sx: i.liveText, children: a("eventGame.states.live.indicator") })
+    ] }),
+    /* @__PURE__ */ e.jsx(m, { sx: i.stateDescription, children: a("eventGame.states.live.description") })
+  ] }) }) }) }), ie = () => /* @__PURE__ */ e.jsx(r, { sx: i.questionArea, children: /* @__PURE__ */ e.jsx(r, { sx: i.questionContainer, children: /* @__PURE__ */ e.jsx(r, { sx: i.questionContentContainer, children: /* @__PURE__ */ e.jsxs(r, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsx(r, { sx: i.closedStateHeader, children: /* @__PURE__ */ e.jsx(m, { sx: i.stateTitle, children: a("eventGame.states.closed.title") }) }),
+    /* @__PURE__ */ e.jsx(m, { sx: i.stateDescription, children: a("eventGame.states.closed.description") })
+  ] }) }) }) }), re = () => /* @__PURE__ */ e.jsxs(r, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsx(m, { sx: i.stateTitle, children: a("eventGame.states.open.title") }),
+    /* @__PURE__ */ e.jsx(m, { sx: i.stateDescription, children: a("eventGame.states.open.description") })
+  ] }), oe = () => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    n.showCountdown && n.eventGame.status === "OPEN" && /* @__PURE__ */ e.jsx(
+      Ee,
+      {
+        predictionsCutoffTime: n.eventGame.predictionsCutoff || ""
+      }
+    ),
+    /* @__PURE__ */ e.jsx(r, { sx: i.questionArea, children: /* @__PURE__ */ e.jsxs(r, { sx: i.questionContainer, children: [
+      !q && /* @__PURE__ */ e.jsx(r, { sx: i.paginationContainer, children: /* @__PURE__ */ e.jsx(
+        Te,
+        {
+          eventGame: n.eventGame,
+          currentStep: o,
+          totalSteps: h
+        }
+      ) }),
+      o === h ? /* @__PURE__ */ e.jsx(
+        Pe,
+        {
+          fixtures: n.eventGame.fixtures,
+          prediction: n.prediction,
+          onEditPrediction: Z,
+          onPredictionUpdate: n.setPrediction,
+          view: "play",
+          play: async () => n.play()
+        }
+      ) : /* @__PURE__ */ e.jsx(r, { sx: i.questionContentContainer, children: ce() }),
+      /* @__PURE__ */ e.jsx(r, { sx: i.footerContainerNoLogo, children: /* @__PURE__ */ e.jsxs(r, { sx: i.navigationContainer, children: [
+        o > 1 && o < h && /* @__PURE__ */ e.jsx(
+          D,
+          {
+            variant: "outlined",
+            onClick: ee,
+            sx: {
+              borderRadius: N,
+              py: "10px",
+              px: "16px",
+              borderColor: f,
+              color: p,
+              transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+              transform: "scale(1)",
+              alignSelf: "center",
+              "&:hover": {
+                borderColor: f,
+                backgroundColor: `${f}10`,
+                transform: "scale(1.02)"
+              },
+              "&:active": {
+                transform: "scale(0.98)"
+              },
+              fontSize: "0.9375em"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              m,
+              {
+                sx: {
+                  fontFamily: P,
+                  fontWeight: 500,
+                  fontSize: "0.9375em",
+                  lineHeight: "24px",
+                  letterSpacing: "0.46px",
+                  textTransform: "uppercase",
+                  gap: "8px",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: a("eventGame.buttons.back")
+              }
+            )
+          }
+        ),
+        !q && /* @__PURE__ */ e.jsx(
+          D,
+          {
+            variant: "soft",
+            onClick: F() ? Y : () => {
+            },
+            loading: n.isPlaying,
+            sx: {
+              cursor: F() ? "pointer" : "not-allowed",
+              opacity: F() ? "1" : "0.5",
+              borderRadius: N,
+              py: "10px",
+              px: "16px",
+              bgcolor: f,
+              color: p,
+              transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+              transform: "scale(1)",
+              alignSelf: "center",
+              "&:hover": {
+                bgcolor: f,
+                transform: "scale(1.02)"
+              },
+              "&:active": {
+                color: p,
+                transform: "scale(0.98)"
+              },
+              "&:disabled": {
+                bgcolor: f,
+                color: p,
+                opacity: "12%"
+              },
+              "--Icon-color": p,
+              fontSize: "0.9375em"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              m,
+              {
+                sx: {
+                  fontFamily: P,
+                  fontWeight: 500,
+                  fontSize: "0.9375em",
+                  lineHeight: "24px",
+                  letterSpacing: "0.46px",
+                  textTransform: "uppercase",
+                  color: p,
+                  gap: "8px",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: a(o === h ? "eventGame.buttons.play" : "eventGame.buttons.next")
+              }
+            )
+          }
+        )
+      ] }) })
+    ] }) })
+  ] }), se = () => {
+    switch (n.eventGame.status) {
+      case "PENDING":
+        return te();
+      case "LIVE":
+        return ne();
+      case "CLOSED":
+        return ie();
+      default:
+        return oe();
+    }
+  }, ae = me(() => n.eventGame.fixtures[o - 1], [n.eventGame.fixtures, o]), ce = () => {
+    var l, d, u, c, x, O, R, k;
+    const t = ae;
+    if (q)
+      return re();
+    if (t)
+      switch (t.outcomeType) {
+        case y.BOOLEAN:
+          const S = (d = (l = n.prediction) == null ? void 0 : l.fixtures) == null ? void 0 : d.find(
+            (s) => s.id === t.id
+          );
+          return /* @__PURE__ */ e.jsx(
+            be,
+            {
+              prediction: typeof (S == null ? void 0 : S.prediction) == "boolean" ? S.prediction : null,
+              onSelectionChange: (s) => v(t.id, s),
+              useExtraSmallLayout: C,
+              question: t.question,
+              fixtureId: t.id
+            },
+            `${t.outcomeType}-${t.id}`
+          );
+        case y.NUMBER:
+          const j = (c = (u = n.prediction) == null ? void 0 : u.fixtures) == null ? void 0 : c.find(
+            (s) => s.id === t.id
+          ), le = t.validOutcomes;
+          return /* @__PURE__ */ e.jsx(
+            Ge,
+            {
+              prediction: typeof (j == null ? void 0 : j.prediction) == "number" ? j.prediction : 0,
+              onChange: (s) => v(t.id, s),
+              useExtraSmallLayout: C,
+              question: t.question,
+              validOutcomes: le,
+              fixtureId: t.id
+            },
+            `${t.outcomeType}-${t.id}`
+          );
+        case y.FREE_INPUT:
+          const G = (O = (x = n.prediction) == null ? void 0 : x.fixtures) == null ? void 0 : O.find(
+            (s) => s.id === t.id
+          );
+          return /* @__PURE__ */ e.jsx(
+            $,
+            {
+              question: t.question,
+              prediction: typeof (G == null ? void 0 : G.prediction) == "string" ? G.prediction : null,
+              validOutcomes: null,
+              onTextChange: (s) => v(t.id, s),
+              useExtraSmallLayout: C,
+              fixtureId: t.id
+            },
+            `${t.outcomeType}-${t.id}`
+          );
+        case y.ENUM:
+          const b = (k = (R = n.prediction) == null ? void 0 : R.fixtures) == null ? void 0 : k.find(
+            (s) => s.id === t.id
+          );
+          return /* @__PURE__ */ e.jsx(
+            $,
+            {
+              question: t.question,
+              prediction: typeof (b == null ? void 0 : b.prediction) == "string" ? b.prediction : null,
+              validOutcomes: t.validOutcomes,
+              onTextChange: (s) => v(t.id, s),
+              useExtraSmallLayout: C,
+              fixtureId: t.id,
+              optionsLayout: n.optionsLayout
+            },
+            `${t.id}-${o}`
+          );
+        default:
+          return /* @__PURE__ */ e.jsx(e.Fragment, {});
+      }
+  };
+  return /* @__PURE__ */ e.jsx(Se, { brandingBorderColor: null, children: /* @__PURE__ */ e.jsx(
+    Ce,
+    {
+      entity: { ...n.eventGame, labels: null },
+      headline: a("eventGame.headline"),
+      finalImage: E,
+      imagePosition: U,
+      rulesDisplay: n.rulesDisplay,
+      children: se()
+    }
+  ) });
+};
+export {
+  et as default
+};