@cuemath/leap 2.9.7-rj-0 → 2.9.7-rj-1

package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js

@@ -1,217 +1,227 @@
-import { jsx as t, Fragment as L } from "react/jsx-runtime";
-import { useRef as O, useCallback as g, useMemo as ce, useEffect as ae } from "react";
-import ee from "../../../../../assets/line-icons/icons/carat-right.js";
-import { PLATFORM_EVENTS_STUDENT as te } from "../../../../analytics-events/platform-events-student.js";
-import { useBreakpoint as de } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
-import { JOURNEY_ID_STUDENT as se } from "../../../../journey/journey-id/journey-id-student.js";
-import { IndicatorType as c } from "../../../../journey/use-journey/constants.js";
-import { useJourney as me } from "../../../../journey/use-journey/use-journey.js";
-import re from "../../../../ui/buttons/icon-button/icon-button.js";
-import { useUIContext as he } from "../../../../ui/context/context.js";
-import R from "../../../../ui/layout/flex-view.js";
-import a from "../../../../ui/text/text.js";
-import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as E } from "../../../enum/circle-onboarding-steps.js";
-import { useCircleSounds as ue } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { SegmentedGameCard as Te } from "../../comps/segmented-game-card/segmented-game-card.js";
-import { GAME_LAUNCHER_ANALYTICS_EVENTS as ne } from "../../game-launcher-analytics-events.js";
-import { GO_TO_NEXT_SLIDE_AFTER_MS as ge, SHOW_LABEL_HIGHLIGHT_AFTER_MS as Ee, SHOW_NUDGE_AFTER_MS as pe, SLIDE_TO_LESSON_MS as Ie } from "./constants.js";
-import { ProjectType as _e } from "../../../games/web-view/enums/project-type-enum.js";
-const ve = ({
+import { jsx as t, Fragment as y } from "react/jsx-runtime";
+import { useRef as R, useCallback as E, useMemo as de, useEffect as se } from "react";
+import re from "../../../../../assets/line-icons/icons/carat-right.js";
+import { PLATFORM_EVENTS_STUDENT as ne } from "../../../../analytics-events/platform-events-student.js";
+import { useBreakpoint as me } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
+import { JOURNEY_ID_STUDENT as he } from "../../../../journey/journey-id/journey-id-student.js";
+import { IndicatorType as a } from "../../../../journey/use-journey/constants.js";
+import { useJourney as ue } from "../../../../journey/use-journey/use-journey.js";
+import oe from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as Te } from "../../../../ui/context/context.js";
+import S from "../../../../ui/layout/flex-view.js";
+import d from "../../../../ui/text/text.js";
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as p } from "../../../enum/circle-onboarding-steps.js";
+import { useCircleSounds as ge } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { SegmentedGameCard as Ee } from "../../comps/segmented-game-card/segmented-game-card.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as ie } from "../../game-launcher-analytics-events.js";
+import { GO_TO_NEXT_SLIDE_AFTER_MS as pe, SHOW_LABEL_HIGHLIGHT_AFTER_MS as Ie, SHOW_NUDGE_AFTER_MS as _e, SLIDE_TO_LESSON_MS as Ce } from "./constants.js";
+import { ProjectType as fe } from "../../../games/web-view/enums/project-type-enum.js";
+const xe = ({
   carouselRefs: n,
-  onSegmentClick: y,
-  onJourneyComplete: S
+  onSegmentClick: N,
+  onJourneyComplete: b
 }) => {
-  const o = se.CIRCLE_ACTIVITIES_INTRO_JOURNEY, { isMobile: p } = de(), i = O(null), r = O(null), l = O(null), I = O([]), { playButtonSound: N } = ue(), { nextCoachmark: d, setJourney: b, endJourney: P } = me(), { onEvent: _ } = he(), H = g(
+  const o = he.CIRCLE_ACTIVITIES_INTRO_JOURNEY, { isMobile: l } = me(), I = l ? 232 : 264, _ = l ? "ab3-bold" : "ab2-bold", i = R(null), r = R(null), c = R(null), C = R([]), { playButtonSound: P } = ge(), { nextCoachmark: s, setJourney: H, endJourney: k } = ue(), { onEvent: f } = Te(), G = E(
     (e) => {
-      _(te.ONBOARDING_STEP_VIEWED, {
+      f(ne.ONBOARDING_STEP_VIEWED, {
         step: e
       });
     },
-    [_]
-  ), k = g(
+    [f]
+  ), U = E(
     (e) => {
-      _(te.ONBOARDING_STEP_COMPLETED, {
+      f(ne.ONBOARDING_STEP_COMPLETED, {
         step: e
       });
     },
-    [_]
-  ), s = g(
-    (e, C, f, A = !1) => {
-      var h, u;
-      A || (N(), (u = n.current) == null || u.goToIndex(((h = n.current) == null ? void 0 : h.currentIndex) + 1), d(o, !1, ge)), H(e);
-      const m = setTimeout(() => {
-        clearTimeout(m), C.startLabelAnimation(f);
-      }, Ee);
-      I.current.push(m), d(o, !0, pe);
+    [f]
+  ), m = E(
+    (e, A, O, L = !1) => {
+      var u, T;
+      L || (P(), (T = n.current) == null || T.goToIndex(((u = n.current) == null ? void 0 : u.currentIndex) + 1), s(o, !1, pe)), G(e);
+      const h = setTimeout(() => {
+        clearTimeout(h), A.startLabelAnimation(O);
+      }, Ie);
+      C.current.push(h), s(o, !0, _e);
     },
-    [n, o, d, N, H]
-  ), G = g(
+    [n, o, s, P, G]
+  ), Y = E(
     (e) => {
-      y(e, _e.PUZZLE), k(E.PUZZLE_ACTIVITY), P(o), S(o);
+      N(e, fe.PUZZLE), U(p.PUZZLE_ACTIVITY), k(o), b(o);
     },
-    [P, o, S, y, k]
-  ), U = g(
-    (e, C) => {
-      var w, B, v, V, x, D, M, J, W, X, $, F, Z, j, K, q, Q, z;
-      if (!((w = n == null ? void 0 : n.current) != null && w.nextBtnRef.current) || !((B = r == null ? void 0 : r.current) != null && B.segmentedCardWrapperRef.current) || !((v = i == null ? void 0 : i.current) != null && v.labelRef.current) || !((V = r == null ? void 0 : r.current) != null && V.labelRef.current) || !e)
+    [k, o, b, N, U]
+  ), w = E(
+    (e, A) => {
+      var v, V, x, D, M, W, J, X, $, F, Z, j, K, q, Q, z, ee, te;
+      if (!((v = n == null ? void 0 : n.current) != null && v.nextBtnRef.current) || !((V = r == null ? void 0 : r.current) != null && V.segmentedCardWrapperRef.current) || !((x = i == null ? void 0 : i.current) != null && x.labelRef.current) || !((D = r == null ? void 0 : r.current) != null && D.labelRef.current) || !e)
         return;
-      const f = ((M = (D = (x = l.current) == null ? void 0 : x.labelRef) == null ? void 0 : D.current) == null ? void 0 : M.getBoundingClientRect()) || {
+      const O = ((J = (W = (M = c.current) == null ? void 0 : M.labelRef) == null ? void 0 : W.current) == null ? void 0 : J.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, A = ((X = (W = (J = i.current) == null ? void 0 : J.labelRef) == null ? void 0 : W.current) == null ? void 0 : X.getBoundingClientRect()) || {
+      }, L = ((F = ($ = (X = i.current) == null ? void 0 : X.labelRef) == null ? void 0 : $.current) == null ? void 0 : F.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, m = ((Z = (F = ($ = r.current) == null ? void 0 : $.labelRef) == null ? void 0 : F.current) == null ? void 0 : Z.getBoundingClientRect()) || {
+      }, h = ((K = (j = (Z = r.current) == null ? void 0 : Z.labelRef) == null ? void 0 : j.current) == null ? void 0 : K.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, h = ((q = (K = (j = r.current) == null ? void 0 : j.segmentedCardWrapperRef) == null ? void 0 : K.current) == null ? void 0 : q.getBoundingClientRect()) || {
+      }, u = ((z = (Q = (q = r.current) == null ? void 0 : q.segmentedCardWrapperRef) == null ? void 0 : Q.current) == null ? void 0 : z.getBoundingClientRect()) || {
         height: 0,
         width: 0
       };
-      let u = [];
-      C && l.current && (u = [
+      let T = [];
+      A && c.current && (T = [
         {
-          originalElementToHighlightRef: l.current.labelRef,
+          originalElementToHighlightRef: c.current.labelRef,
           isActive: !1,
-          type: c.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ t(L, {}),
+          type: a.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ t(y, {}),
           indicator: {
             position: "top",
             backgroundColor: "BLUE_4",
-            width: 264,
-            tooltipItem: /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(a, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
-            tooltipXCoOrdinates: f.width / 2,
-            tooltipYCoOrdinates: f.height + 10
+            width: I,
+            tooltipItem: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(d, { $renderAs: _, children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
+            tooltipXCoOrdinates: O.width / 2,
+            tooltipYCoOrdinates: O.height + 10
           }
         },
         {
-          originalElementToHighlightRef: (Q = n.current) == null ? void 0 : Q.nextBtnRef,
+          originalElementToHighlightRef: (ee = n.current) == null ? void 0 : ee.nextBtnRef,
           isActive: !1,
-          type: c.NUDGE,
+          type: a.NUDGE,
           elementToHighlight: /* @__PURE__ */ t(
-            re,
+            oe,
             {
               renderAs: "secondary",
-              Icon: ee,
-              onClick: () => s(
-                E.GAMES_ACTIVITY,
+              Icon: re,
+              onClick: () => m(
+                p.GAMES_ACTIVITY,
                 i.current,
                 "ORANGE_4"
               ),
-              analyticsLabel: ne.JOURNEY_NEXT_ACTIVITY
+              analyticsLabel: ie.JOURNEY_NEXT_ACTIVITY
             }
           ),
           indicator: {
             nudge: "click",
-            content: !p && /* @__PURE__ */ t(a, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: !l && /* @__PURE__ */ t(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
         }
       ]);
-      const ie = [
+      const ce = [
         {
           originalElementToHighlightRef: i.current.labelRef,
           isActive: !1,
-          type: c.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ t(L, {}),
+          type: a.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ t(y, {}),
           indicator: {
             position: "top",
             backgroundColor: "ORANGE_4",
-            width: 264,
-            tooltipItem: /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(a, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
-            tooltipXCoOrdinates: A.width / 2,
-            tooltipYCoOrdinates: A.height + 10
+            width: I,
+            tooltipItem: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(d, { $renderAs: _, children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
+            tooltipXCoOrdinates: L.width / 2,
+            tooltipYCoOrdinates: L.height + 10
           }
         },
         {
           originalElementToHighlightRef: n.current.nextBtnRef,
           isActive: !1,
-          type: c.NUDGE,
+          type: a.NUDGE,
           elementToHighlight: /* @__PURE__ */ t(
-            re,
+            oe,
             {
               renderAs: "secondary",
-              Icon: ee,
-              onClick: () => s(
-                E.PUZZLE_ACTIVITY,
+              Icon: re,
+              onClick: () => m(
+                p.PUZZLE_ACTIVITY,
                 r.current,
                 "PURPLE_4"
               ),
-              analyticsLabel: ne.JOURNEY_NEXT_ACTIVITY
+              analyticsLabel: ie.JOURNEY_NEXT_ACTIVITY
             }
           ),
           indicator: {
             nudge: "click",
-            content: !p && /* @__PURE__ */ t(a, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: !l && /* @__PURE__ */ t(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
         }
-      ], le = [
+      ], ae = [
         {
           originalElementToHighlightRef: r.current.labelRef,
           isActive: !1,
-          type: c.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ t(L, {}),
+          type: a.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ t(y, {}),
           indicator: {
             position: "top",
             backgroundColor: "PURPLE_4",
-            width: 264,
-            tooltipItem: /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(a, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
-            tooltipXCoOrdinates: m.width / 2,
-            tooltipYCoOrdinates: m.height + 10
+            width: I,
+            tooltipItem: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(d, { $renderAs: _, children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
+            tooltipXCoOrdinates: h.width / 2,
+            tooltipYCoOrdinates: h.height + 10
           }
         },
         {
           originalElementToHighlightRef: r.current.segmentedCardWrapperRef,
           isActive: !1,
-          type: c.NUDGE,
+          type: a.NUDGE,
           elementToHighlight: /* @__PURE__ */ t(
-            Te,
+            Ee,
             {
               label: "",
-              value: e.data.filter((T) => T.solved).length,
+              value: e.data.filter((g) => g.solved).length,
               maxValue: e.data.length,
               initialValue: e.initialProgressValue,
-              data: e.data.map((T) => ({
-                card: T.cardLottie,
+              data: e.data.map((g) => ({
+                card: g.cardLottie,
                 name: "",
                 // We dont want to show the name of the puzzle in onboarding
-                isCompleted: T.solved,
-                onPress: () => G(T)
+                isCompleted: g.solved,
+                onPress: () => Y(g)
               }))
             }
           ),
           indicator: {
             nudge: "click",
-            content: !p && /* @__PURE__ */ t(a, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
-            nudgePointerX: h.width * 0.6,
-            nudgePointerY: h.height * 0.4
+            content: !l && /* @__PURE__ */ t(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
+            nudgePointerX: u.width * 0.6,
+            nudgePointerY: u.height * 0.4
           }
         }
       ];
-      b(o, [...u, ...ie, ...le]), (z = n.current) == null || z.goToIndex(0);
-      const Y = setTimeout(() => {
-        clearTimeout(Y), d(o);
-      }, Ie);
-      I.current.push(Y), C && l.current ? s(E.SKILL_ACTIVITY, l.current, "BLUE_4", !0) : s(E.GAMES_ACTIVITY, i.current, "ORANGE_4", !0);
+      H(o, [...T, ...ce, ...ae]), (te = n.current) == null || te.goToIndex(0);
+      const B = setTimeout(() => {
+        clearTimeout(B), s(o);
+      }, Ce);
+      C.current.push(B), A && c.current ? m(p.SKILL_ACTIVITY, c.current, "BLUE_4", !0) : m(p.GAMES_ACTIVITY, i.current, "ORANGE_4", !0);
     },
-    [n, p, b, o, s, G, d]
-  ), oe = ce(
+    [
+      n,
+      I,
+      _,
+      l,
+      H,
+      o,
+      m,
+      Y,
+      s
+    ]
+  ), le = de(
     () => ({
       gameRefs: i,
       puzzleRefs: r,
-      lessonRefs: l,
-      startJourney: U
+      lessonRefs: c,
+      startJourney: w
     }),
-    [U]
+    [w]
   );
-  return ae(() => () => {
-    I.current.forEach((e) => clearTimeout(e)), I.current = [];
-  }, [n]), oe;
+  return se(() => () => {
+    C.current.forEach((e) => clearTimeout(e)), C.current = [];
+  }, [n]), le;
 };
 export {
-  ve as useGameLauncherJourney
+  xe as useGameLauncherJourney
 };
 //# sourceMappingURL=use-game-launcher-journey.js.map

package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { ICoachmarkProps } from '../../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { ISegmentedGameCardRefs } from '../../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n  IProject,\n  Puzzle,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT as AnalyticsLabel } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as ActionEvent } from '../../../enum/circle-onboarding-steps';\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { SegmentedGameCard } from '../../comps/segmented-game-card/segmented-game-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  GO_TO_NEXT_SLIDE_AFTER_MS,\n  SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n  SHOW_NUDGE_AFTER_MS,\n  SLIDE_TO_LESSON_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n  carouselRefs,\n  onSegmentClick,\n  onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY;\n\n  const { isMobile } = useBreakpoint();\n\n  const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n  const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n  const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const trackEventViewed = useCallback(\n    (step: ActionEvent) => {\n      trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_VIEWED, {\n        step,\n      });\n    },\n    [trackAnalytics],\n  );\n  const trackEventCompleted = useCallback(\n    (step: ActionEvent) => {\n      trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_COMPLETED, {\n        step,\n      });\n    },\n    [trackAnalytics],\n  );\n\n  const goToNextCard = useCallback(\n    (\n      analyticsLabelViewed: ActionEvent,\n      refOfNextSlide: ISegmentedGameCardRefs,\n      color: TColorNames,\n      isFirstSlide: boolean = false,\n    ) => {\n      if (!isFirstSlide) {\n        playButtonSound();\n        carouselRefs.current?.goToIndex(carouselRefs.current?.currentIndex + 1);\n        nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n      }\n\n      trackEventViewed(analyticsLabelViewed);\n\n      const animateLabelTimer = setTimeout(() => {\n        clearTimeout(animateLabelTimer);\n        refOfNextSlide.startLabelAnimation(color);\n      }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n      timerRefs.current.push(animateLabelTimer); // Store to cleanup later\n\n      nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n    },\n    [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackEventViewed],\n  );\n\n  const handleEndJourney = useCallback(\n    (puzzlesData: Puzzle) => {\n      onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n      trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n      endJourney(journeyId);\n      onJourneyComplete(journeyId);\n    },\n    [endJourney, journeyId, onJourneyComplete, onSegmentClick, trackEventCompleted],\n  );\n\n  const startJourney = useCallback(\n    (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean) => {\n      // If element refs are not available return, this is just for type safety\n      if (\n        !carouselRefs?.current?.nextBtnRef.current ||\n        !puzzleRefs?.current?.segmentedCardWrapperRef.current ||\n        !gameRefs?.current?.labelRef.current ||\n        !puzzleRefs?.current?.labelRef.current ||\n        !puzzlesData\n      ) {\n        return;\n      }\n\n      const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n        height: 0,\n        width: 0,\n      };\n      const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n        height: 0,\n        width: 0,\n      };\n      const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n        height: 0,\n        width: 0,\n      };\n\n      const launcherDims =\n        puzzleRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() || {\n          height: 0,\n          width: 0,\n        };\n\n      let lessonSteps: ICoachmarkProps[] = [];\n\n      if (isLessonAvailable && lessonRefs.current) {\n        lessonSteps = [\n          {\n            originalElementToHighlightRef: lessonRefs.current.labelRef,\n            isActive: false,\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <></>,\n            indicator: {\n              position: 'top',\n              backgroundColor: 'BLUE_4',\n              width: 264,\n              tooltipItem: (\n                <FlexView>\n                  <Text $renderAs=\"ab2-bold\">\n                    Get faster & stay ahead in school. Practice 3 new skills everyday.\n                  </Text>\n                </FlexView>\n              ),\n              tooltipXCoOrdinates: lessonLabelDims.width / 2,\n              tooltipYCoOrdinates: lessonLabelDims.height + 10,\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={() =>\n                  goToNextCard(\n                    ActionEvent.GAMES_ACTIVITY,\n                    gameRefs.current as ISegmentedGameCardRefs,\n                    'ORANGE_4',\n                  )\n                }\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n          },\n        ];\n      }\n\n      const gameSteps: ICoachmarkProps[] = [\n        {\n          originalElementToHighlightRef: gameRefs.current.labelRef,\n          isActive: false,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: <></>,\n          indicator: {\n            position: 'top',\n            backgroundColor: 'ORANGE_4',\n            width: 264,\n            tooltipItem: (\n              <FlexView>\n                <Text $renderAs=\"ab2-bold\">\n                  Train to think deeper & plan ahead. Play 3 new games everyday.\n                </Text>\n              </FlexView>\n            ),\n            tooltipXCoOrdinates: gameLabelDims.width / 2,\n            tooltipYCoOrdinates: gameLabelDims.height + 10,\n          } as IArrowTooltipProps,\n        },\n        {\n          originalElementToHighlightRef: carouselRefs.current.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          elementToHighlight: (\n            <IconButton\n              renderAs=\"secondary\"\n              Icon={CaratRightIcon}\n              onClick={() =>\n                goToNextCard(\n                  ActionEvent.PUZZLE_ACTIVITY,\n                  puzzleRefs.current as ISegmentedGameCardRefs,\n                  'PURPLE_4',\n                )\n              }\n              analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: !isMobile && (\n              <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                Click to proceed\n              </Text>\n            ),\n            nudgePointerX: 0,\n            nudgePointerY: 0,\n          } as INudgeProps,\n        },\n      ];\n\n      const puzzleSteps: ICoachmarkProps[] = [\n        {\n          originalElementToHighlightRef: puzzleRefs.current.labelRef,\n          isActive: false,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: <></>,\n          indicator: {\n            position: 'top',\n            backgroundColor: 'PURPLE_4',\n            width: 264,\n            tooltipItem: (\n              <FlexView>\n                <Text $renderAs=\"ab2-bold\">\n                  Think in new ways & stay sharp. Solve 3 new puzzles everyday.\n                </Text>\n              </FlexView>\n            ),\n            tooltipXCoOrdinates: puzzleLabelDims.width / 2,\n            tooltipYCoOrdinates: puzzleLabelDims.height + 10,\n          } as IArrowTooltipProps,\n        },\n        {\n          originalElementToHighlightRef: puzzleRefs.current.segmentedCardWrapperRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          elementToHighlight: (\n            <SegmentedGameCard\n              label={''} // This is intentionally left blank to avoid showing the label\n              value={puzzlesData.data.filter(puzzle => puzzle.solved).length}\n              maxValue={puzzlesData.data.length}\n              initialValue={puzzlesData.initialProgressValue}\n              data={puzzlesData.data.map(puzzle => ({\n                card: puzzle.cardLottie,\n                name: '', // We dont want to show the name of the puzzle in onboarding\n                isCompleted: puzzle.solved,\n                onPress: () => handleEndJourney(puzzle),\n              }))}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: !isMobile && (\n              <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                Click to solve a puzzle\n              </Text>\n            ),\n            nudgePointerX: launcherDims.width * 0.6,\n            nudgePointerY: launcherDims.height * 0.4,\n          } as INudgeProps,\n        },\n      ];\n\n      setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n\n      carouselRefs.current?.goToIndex(0); // Always start from 0th Index no matter what the current index is\n\n      const delayBeforeStart = setTimeout(() => {\n        clearTimeout(delayBeforeStart);\n        nextCoachmark(journeyId);\n      }, SLIDE_TO_LESSON_MS);\n\n      timerRefs.current.push(delayBeforeStart); // Store to cleanup later\n\n      if (isLessonAvailable && lessonRefs.current) {\n        goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', true);\n      } else {\n        goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', true);\n      }\n    },\n    [carouselRefs, isMobile, setJourney, journeyId, goToNextCard, handleEndJourney, nextCoachmark],\n  );\n\n  const data = useMemo(\n    () => ({\n      gameRefs,\n      puzzleRefs,\n      lessonRefs,\n      startJourney,\n    }),\n    [startJourney],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [carouselRefs]);\n\n  return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","gameRefs","useRef","puzzleRefs","lessonRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","isFirstSlide","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","handleEndJourney","puzzlesData","ProjectType","ActionEvent","startJourney","isLessonAvailable","_c","_d","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","_r","delayBeforeStart","SLIDE_TO_LESSON_MS","data","useMemo","useEffect","timer"],"mappings":"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"}
+{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.tsx"],"sourcesContent":["import type { ICoachmarkProps } from '../../../../journey/use-journey/journey-context-types';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { ISegmentedGameCardRefs } from '../../comps/segmented-game-card/segmented-game-card-types';\nimport type {\n  IProject,\n  Puzzle,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseGameLauncherJourneyProps } from './use-game-launcher-journey-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT as AnalyticsLabel } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as ActionEvent } from '../../../enum/circle-onboarding-steps';\nimport { ProjectType } from '../../../games/web-view/enums';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { SegmentedGameCard } from '../../comps/segmented-game-card/segmented-game-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  GO_TO_NEXT_SLIDE_AFTER_MS,\n  SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n  SHOW_NUDGE_AFTER_MS,\n  SLIDE_TO_LESSON_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n  carouselRefs,\n  onSegmentClick,\n  onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_ACTIVITIES_INTRO_JOURNEY;\n\n  const { isMobile } = useBreakpoint();\n\n  const tooltipWidth = isMobile ? 232 : 264;\n  const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n  const gameRefs = useRef<ISegmentedGameCardRefs>(null);\n  const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n  const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const trackEventViewed = useCallback(\n    (step: ActionEvent) => {\n      trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_VIEWED, {\n        step,\n      });\n    },\n    [trackAnalytics],\n  );\n  const trackEventCompleted = useCallback(\n    (step: ActionEvent) => {\n      trackAnalytics(AnalyticsLabel.ONBOARDING_STEP_COMPLETED, {\n        step,\n      });\n    },\n    [trackAnalytics],\n  );\n\n  const goToNextCard = useCallback(\n    (\n      analyticsLabelViewed: ActionEvent,\n      refOfNextSlide: ISegmentedGameCardRefs,\n      color: TColorNames,\n      isFirstSlide: boolean = false,\n    ) => {\n      if (!isFirstSlide) {\n        playButtonSound();\n        carouselRefs.current?.goToIndex(carouselRefs.current?.currentIndex + 1);\n        nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n      }\n\n      trackEventViewed(analyticsLabelViewed);\n\n      const animateLabelTimer = setTimeout(() => {\n        clearTimeout(animateLabelTimer);\n        refOfNextSlide.startLabelAnimation(color);\n      }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n      timerRefs.current.push(animateLabelTimer); // Store to cleanup later\n\n      nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n    },\n    [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackEventViewed],\n  );\n\n  const handleEndJourney = useCallback(\n    (puzzlesData: Puzzle) => {\n      onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n      trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n      endJourney(journeyId);\n      onJourneyComplete(journeyId);\n    },\n    [endJourney, journeyId, onJourneyComplete, onSegmentClick, trackEventCompleted],\n  );\n\n  const startJourney = useCallback(\n    (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean) => {\n      // If element refs are not available return, this is just for type safety\n      if (\n        !carouselRefs?.current?.nextBtnRef.current ||\n        !puzzleRefs?.current?.segmentedCardWrapperRef.current ||\n        !gameRefs?.current?.labelRef.current ||\n        !puzzleRefs?.current?.labelRef.current ||\n        !puzzlesData\n      ) {\n        return;\n      }\n\n      const lessonLabelDims = lessonRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n        height: 0,\n        width: 0,\n      };\n      const gameLabelDims = gameRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n        height: 0,\n        width: 0,\n      };\n      const puzzleLabelDims = puzzleRefs.current?.labelRef?.current?.getBoundingClientRect() || {\n        height: 0,\n        width: 0,\n      };\n\n      const launcherDims =\n        puzzleRefs.current?.segmentedCardWrapperRef?.current?.getBoundingClientRect() || {\n          height: 0,\n          width: 0,\n        };\n\n      let lessonSteps: ICoachmarkProps[] = [];\n\n      if (isLessonAvailable && lessonRefs.current) {\n        lessonSteps = [\n          {\n            originalElementToHighlightRef: lessonRefs.current.labelRef,\n            isActive: false,\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <></>,\n            indicator: {\n              position: 'top',\n              backgroundColor: 'BLUE_4',\n              width: tooltipWidth,\n              tooltipItem: (\n                <FlexView>\n                  <Text $renderAs={tooltipTextRenderAs}>\n                    Get faster & stay ahead in school. Practice 3 new skills everyday.\n                  </Text>\n                </FlexView>\n              ),\n              tooltipXCoOrdinates: lessonLabelDims.width / 2,\n              tooltipYCoOrdinates: lessonLabelDims.height + 10,\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={() =>\n                  goToNextCard(\n                    ActionEvent.GAMES_ACTIVITY,\n                    gameRefs.current as ISegmentedGameCardRefs,\n                    'ORANGE_4',\n                  )\n                }\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n          },\n        ];\n      }\n\n      const gameSteps: ICoachmarkProps[] = [\n        {\n          originalElementToHighlightRef: gameRefs.current.labelRef,\n          isActive: false,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: <></>,\n          indicator: {\n            position: 'top',\n            backgroundColor: 'ORANGE_4',\n            width: tooltipWidth,\n            tooltipItem: (\n              <FlexView>\n                <Text $renderAs={tooltipTextRenderAs}>\n                  Train to think deeper & plan ahead. Play 3 new games everyday.\n                </Text>\n              </FlexView>\n            ),\n            tooltipXCoOrdinates: gameLabelDims.width / 2,\n            tooltipYCoOrdinates: gameLabelDims.height + 10,\n          } as IArrowTooltipProps,\n        },\n        {\n          originalElementToHighlightRef: carouselRefs.current.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          elementToHighlight: (\n            <IconButton\n              renderAs=\"secondary\"\n              Icon={CaratRightIcon}\n              onClick={() =>\n                goToNextCard(\n                  ActionEvent.PUZZLE_ACTIVITY,\n                  puzzleRefs.current as ISegmentedGameCardRefs,\n                  'PURPLE_4',\n                )\n              }\n              analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: !isMobile && (\n              <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                Click to proceed\n              </Text>\n            ),\n            nudgePointerX: 0,\n            nudgePointerY: 0,\n          } as INudgeProps,\n        },\n      ];\n\n      const puzzleSteps: ICoachmarkProps[] = [\n        {\n          originalElementToHighlightRef: puzzleRefs.current.labelRef,\n          isActive: false,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: <></>,\n          indicator: {\n            position: 'top',\n            backgroundColor: 'PURPLE_4',\n            width: tooltipWidth,\n            tooltipItem: (\n              <FlexView>\n                <Text $renderAs={tooltipTextRenderAs}>\n                  Think in new ways & stay sharp. Solve 3 new puzzles everyday.\n                </Text>\n              </FlexView>\n            ),\n            tooltipXCoOrdinates: puzzleLabelDims.width / 2,\n            tooltipYCoOrdinates: puzzleLabelDims.height + 10,\n          } as IArrowTooltipProps,\n        },\n        {\n          originalElementToHighlightRef: puzzleRefs.current.segmentedCardWrapperRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          elementToHighlight: (\n            <SegmentedGameCard\n              label={''} // This is intentionally left blank to avoid showing the label\n              value={puzzlesData.data.filter(puzzle => puzzle.solved).length}\n              maxValue={puzzlesData.data.length}\n              initialValue={puzzlesData.initialProgressValue}\n              data={puzzlesData.data.map(puzzle => ({\n                card: puzzle.cardLottie,\n                name: '', // We dont want to show the name of the puzzle in onboarding\n                isCompleted: puzzle.solved,\n                onPress: () => handleEndJourney(puzzle),\n              }))}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: !isMobile && (\n              <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                Click to solve a puzzle\n              </Text>\n            ),\n            nudgePointerX: launcherDims.width * 0.6,\n            nudgePointerY: launcherDims.height * 0.4,\n          } as INudgeProps,\n        },\n      ];\n\n      setJourney(journeyId, [...lessonSteps, ...gameSteps, ...puzzleSteps]);\n\n      carouselRefs.current?.goToIndex(0); // Always start from 0th Index no matter what the current index is\n\n      const delayBeforeStart = setTimeout(() => {\n        clearTimeout(delayBeforeStart);\n        nextCoachmark(journeyId);\n      }, SLIDE_TO_LESSON_MS);\n\n      timerRefs.current.push(delayBeforeStart); // Store to cleanup later\n\n      if (isLessonAvailable && lessonRefs.current) {\n        goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', true);\n      } else {\n        goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', true);\n      }\n    },\n    [\n      carouselRefs,\n      tooltipWidth,\n      tooltipTextRenderAs,\n      isMobile,\n      setJourney,\n      journeyId,\n      goToNextCard,\n      handleEndJourney,\n      nextCoachmark,\n    ],\n  );\n\n  const data = useMemo(\n    () => ({\n      gameRefs,\n      puzzleRefs,\n      lessonRefs,\n      startJourney,\n    }),\n    [startJourney],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [carouselRefs]);\n\n  return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","tooltipWidth","tooltipTextRenderAs","gameRefs","useRef","puzzleRefs","lessonRefs","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","endJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","isFirstSlide","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","handleEndJourney","puzzlesData","ProjectType","ActionEvent","startJourney","isLessonAvailable","_c","_d","lessonLabelDims","_g","_f","_e","gameLabelDims","_j","_i","_h","puzzleLabelDims","_m","_l","_k","launcherDims","_p","_o","_n","lessonSteps","IndicatorType","jsx","Fragment","FlexView","Text","_q","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","_r","delayBeforeStart","SLIDE_TO_LESSON_MS","data","useMemo","useEffect","timer"],"mappings":"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"}

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js

@@ -1,122 +1,130 @@
-import { jsx as r, Fragment as O } from "react/jsx-runtime";
-import { useRef as R, useCallback as C, useEffect as J } from "react";
-import K from "../../../../../assets/line-icons/icons/carat-right.js";
-import { PLATFORM_EVENTS_STUDENT as v } from "../../../../analytics-events/platform-events-student.js";
-import { useBreakpoint as j } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
-import { JOURNEY_ID_STUDENT as Z } from "../../../../journey/journey-id/journey-id-student.js";
-import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
-import { useJourney as q } from "../../../../journey/use-journey/use-journey.js";
-import z from "../../../../ui/buttons/icon-button/icon-button.js";
-import { useUIContext as Q } from "../../../../ui/context/context.js";
-import N from "../../../../ui/layout/flex-view.js";
-import m from "../../../../ui/text/text.js";
-import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as M } from "../../../enum/circle-onboarding-steps.js";
-import { useCircleSounds as ee } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { TablesCard as $ } from "../../comps/tables-card/tables-card.js";
-import { GAME_LAUNCHER_ANALYTICS_EVENTS as te } from "../../game-launcher-analytics-events.js";
-import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as re, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ne, START_ANIMATING_CLONED_ELEM as x, TABLE_CARD_INDEX as w, GO_TO_TABLE_LAUNCHER_DURATION_MS as oe, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ie, PUZZLE_CARD_INDEX as le, SHOW_INITIAL_COACHMARK_AFTER_MS as F, LESSON_CARD_INDEX as ce, SHOW_INITIAL_TOOLTIP_AFTER_MS as ae } from "./constants.js";
-import { Indicator as se } from "./use-table-launcher-journey-styled.js";
-const Se = ({
+import { jsx as r, Fragment as N } from "react/jsx-runtime";
+import { useRef as S, useCallback as I, useEffect as j } from "react";
+import Z from "../../../../../assets/line-icons/icons/carat-right.js";
+import { PLATFORM_EVENTS_STUDENT as x } from "../../../../analytics-events/platform-events-student.js";
+import { useBreakpoint as q } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
+import { JOURNEY_ID_STUDENT as z } from "../../../../journey/journey-id/journey-id-student.js";
+import { IndicatorType as u } from "../../../../journey/use-journey/constants.js";
+import { useJourney as Q } from "../../../../journey/use-journey/use-journey.js";
+import ee from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as te } from "../../../../ui/context/context.js";
+import P from "../../../../ui/layout/flex-view.js";
+import T from "../../../../ui/text/text.js";
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as $ } from "../../../enum/circle-onboarding-steps.js";
+import { useCircleSounds as re } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { TablesCard as w } from "../../comps/tables-card/tables-card.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as ne } from "../../game-launcher-analytics-events.js";
+import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as oe, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ie, START_ANIMATING_CLONED_ELEM as F, TABLE_CARD_INDEX as V, GO_TO_TABLE_LAUNCHER_DURATION_MS as le, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ce, PUZZLE_CARD_INDEX as ae, SHOW_INITIAL_COACHMARK_AFTER_MS as X, LESSON_CARD_INDEX as se, SHOW_INITIAL_TOOLTIP_AFTER_MS as de } from "./constants.js";
+import { Indicator as ue } from "./use-table-launcher-journey-styled.js";
+const He = ({
   carouselRefs: a,
-  onTableSegmentClick: S,
-  onJourneyComplete: P
+  onTableSegmentClick: H,
+  onJourneyComplete: y
 }) => {
-  const e = Z.CIRCLE_TABLES_INTRO_JOURNEY, { isMobile: T } = j(), t = R(null), f = R(null), g = R([]), { playButtonSound: H } = ee(), { nextCoachmark: l, setJourney: L, addCoachmark: u, endJourney: y } = q(), { onEvent: A } = Q(), I = C(
+  const e = z.CIRCLE_TABLES_INTRO_JOURNEY, { isMobile: s } = q(), t = S(null), A = S(null), g = S([]), { playButtonSound: D } = re(), { nextCoachmark: l, setJourney: R, addCoachmark: m, endJourney: W } = Q(), { onEvent: C } = te(), L = s ? 232 : 264, E = s ? "ab3-bold" : "ab2-bold", O = I(
     (n) => {
       var c, o;
-      y(e), n && S(n), A(v.ONBOARDING_STEP_COMPLETED, {
-        step: M.TABLES
-      }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), P(e);
+      W(e), n && H(n), C(x.ONBOARDING_STEP_COMPLETED, {
+        step: $.TABLES
+      }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), y(e);
     },
-    [y, e, P, S, A]
-  ), D = C(
+    [W, e, y, H, C]
+  ), k = I(
     (n, c) => {
-      var E, h, p;
-      if (!((E = t.current) != null && E.segmentedCardWrapperRef.current) || !((h = t.current) != null && h.labelRef.current))
+      var h, p, _;
+      if (!((h = t.current) != null && h.segmentedCardWrapperRef.current) || !((p = t.current) != null && p.labelRef.current))
         return;
-      const o = t.current.labelRef.current.getBoundingClientRect(), i = (p = t.current) == null ? void 0 : p.segmentedCardWrapperRef.current.getBoundingClientRect();
-      u(e, {
+      const o = t.current.labelRef.current.getBoundingClientRect(), i = (_ = t.current) == null ? void 0 : _.segmentedCardWrapperRef.current.getBoundingClientRect();
+      m(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
-        type: d.TOOLTIP,
+        type: u.TOOLTIP,
         elementToHighlight: /* @__PURE__ */ r(
-          $,
+          w,
           {
-            ref: f,
+            ref: A,
             defaultTable: c,
             label: n.label,
             data: n.data,
-            onPress: I,
-            onGoBackFromTableLevel: I
+            onPress: O,
+            onGoBackFromTableLevel: O
           }
         ),
         indicator: {
           position: "top",
           backgroundColor: "YELLOW_4",
-          width: 236,
-          tooltipItem: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
+          width: L,
+          tooltipItem: /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(T, { $renderAs: E, children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
           tooltipXCoOrdinates: o.width / 2,
           tooltipYCoOrdinates: 45
         }
-      }), u(e, {
+      }), m(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
-        type: d.NUDGE,
+        type: u.NUDGE,
         indicator: {
           nudge: "click",
-          content: !T && /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
+          content: !s && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
           nudgePointerX: i.width / 2 + 50,
           nudgePointerY: i.height * 0.4
         },
-        elementToHighlight: /* @__PURE__ */ r(O, {})
-      }), l(e, !1, re), l(e, !0, ne);
-      const s = setTimeout(() => {
-        var _;
-        clearTimeout(s), (_ = f.current) == null || _.startLabelAnimation("YELLOW_4");
-      }, x);
-      g.current.push(s);
+        elementToHighlight: /* @__PURE__ */ r(N, {})
+      }), l(e, !1, oe), l(e, !0, ie);
+      const d = setTimeout(() => {
+        var f;
+        clearTimeout(d), (f = A.current) == null || f.startLabelAnimation("YELLOW_4");
+      }, F);
+      g.current.push(d);
     },
-    [u, I, T, e, l]
-  ), b = C(() => {
+    [
+      m,
+      O,
+      s,
+      e,
+      l,
+      E,
+      L
+    ]
+  ), b = I(() => {
     var o;
-    H(), (o = a.current) == null || o.goToIndex(w), l(e, !1, oe), A(v.ONBOARDING_STEP_VIEWED, {
-      step: M.TABLES
+    D(), (o = a.current) == null || o.goToIndex(V), l(e, !1, le), C(x.ONBOARDING_STEP_VIEWED, {
+      step: $.TABLES
     });
     const n = setTimeout(() => {
       var i;
       clearTimeout(n), (i = t.current) == null || i.setLabelVisiblity(!1), l(e, !0);
-    }, ie);
+    }, ce);
     g.current.push(n);
     const c = setTimeout(() => {
       var i;
-      clearTimeout(c), (i = f.current) == null || i.startLabelAnimation("YELLOW_4");
-    }, x);
+      clearTimeout(c), (i = A.current) == null || i.startLabelAnimation("YELLOW_4");
+    }, F);
     g.current.push(c);
-  }, [a, e, l, H, A]), V = C(
+  }, [a, e, l, D, C]), J = I(
     (n, c = !1) => {
-      var p, _, W, k, B, Y, U, G;
-      const o = (p = a.current) == null ? void 0 : p.indicatorRefs, i = (_ = a.current) == null ? void 0 : _.nextBtnRef, s = o == null ? void 0 : o[w];
-      if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((k = t.current) != null && k.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
+      var _, f, B, Y, U, G, v, M;
+      const o = (_ = a.current) == null ? void 0 : _.indicatorRefs, i = (f = a.current) == null ? void 0 : f.nextBtnRef, d = o == null ? void 0 : o[V];
+      if (!((B = t.current) != null && B.segmentedCardWrapperRef.current) || !((Y = t.current) != null && Y.labelRef.current) || !o || !(i != null && i.current) || !d || !d.current)
         return;
-      const E = t.current.labelRef.current.getBoundingClientRect(), h = (B = t.current) == null ? void 0 : B.segmentedCardWrapperRef.current.getBoundingClientRect();
-      c ? (L(e, [
+      const h = t.current.labelRef.current.getBoundingClientRect(), p = (U = t.current) == null ? void 0 : U.segmentedCardWrapperRef.current.getBoundingClientRect();
+      c ? (R(e, [
         {
-          originalElementToHighlightRef: s,
+          originalElementToHighlightRef: d,
           isActive: !1,
-          type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ r(se, { $isActive: !1 }),
+          type: u.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ r(ue, { $isActive: !1 }),
           indicator: {
             position: "bottom",
             backgroundColor: "YELLOW_4",
             width: 52,
             tooltipItem: /* @__PURE__ */ r(
-              N,
+              P,
               {
                 $position: "absolute",
                 $flexDirection: "row",
                 style: { top: 6, left: 8, cursor: "pointer" },
                 onClick: b,
-                children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "NEW" })
+                children: /* @__PURE__ */ r(T, { $renderAs: E, children: "NEW" })
               }
             ),
             tooltipYCoOrdinates: 14
@@ -124,92 +132,94 @@ const Se = ({
           }
         },
         {
-          originalElementToHighlightRef: s,
+          originalElementToHighlightRef: d,
           isActive: !1,
-          type: d.NUDGE,
+          type: u.NUDGE,
           indicator: {
             nudge: "click",
             content: "",
             nudgePointerY: 20
           },
-          elementToHighlight: /* @__PURE__ */ r(O, {})
+          elementToHighlight: /* @__PURE__ */ r(N, {})
         }
-      ]), (G = a.current) == null || G.goToIndex(ce), l(e, !1, F), l(e, !0, ae)) : (L(e, [
+      ]), (M = a.current) == null || M.goToIndex(se), l(e, !1, X), l(e, !0, de)) : (R(e, [
         {
-          originalElementToHighlightRef: (Y = a.current) == null ? void 0 : Y.nextBtnRef,
+          originalElementToHighlightRef: (G = a.current) == null ? void 0 : G.nextBtnRef,
           isActive: !1,
-          type: d.NUDGE,
+          type: u.NUDGE,
           indicator: {
             nudge: "click",
-            content: !T && /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: !s && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           },
           elementToHighlight: /* @__PURE__ */ r(
-            z,
+            ee,
             {
               renderAs: "secondary",
-              Icon: K,
+              Icon: Z,
               onClick: b,
-              analyticsLabel: te.JOURNEY_NEXT_ACTIVITY
+              analyticsLabel: ne.JOURNEY_NEXT_ACTIVITY
             }
           )
         }
-      ]), (U = a.current) == null || U.goToIndex(le), l(e, !1, F)), u(e, {
+      ]), (v = a.current) == null || v.goToIndex(ae), l(e, !1, X)), m(e, {
         originalElementToHighlightRef: t.current.labelRef,
         isActive: !1,
-        type: d.TOOLTIP,
-        elementToHighlight: /* @__PURE__ */ r(O, {}),
+        type: u.TOOLTIP,
+        elementToHighlight: /* @__PURE__ */ r(N, {}),
         indicator: {
           position: "top",
           backgroundColor: "YELLOW_4",
-          width: 264,
-          tooltipItem: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
-          tooltipXCoOrdinates: E.width / 2,
-          tooltipYCoOrdinates: E.height + 10
+          width: L,
+          tooltipItem: /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(T, { $renderAs: E, children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
+          tooltipXCoOrdinates: h.width / 2,
+          tooltipYCoOrdinates: h.height + 10
         }
-      }), u(e, {
+      }), m(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
-        type: d.NUDGE,
+        type: u.NUDGE,
         indicator: {
           nudge: "click",
-          content: !T && /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
-          nudgePointerX: h.width / 2 + 50,
-          nudgePointerY: h.height / 2
+          content: !s && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
+          nudgePointerX: p.width / 2 + 50,
+          nudgePointerY: p.height / 2
         },
         elementToHighlight: /* @__PURE__ */ r(
-          $,
+          w,
           {
-            ref: f,
+            ref: A,
             label: n.label,
             data: n.data,
             onPress: () => {
             },
-            onPressTableSegment: (X) => D(n, X)
+            onPressTableSegment: (K) => k(n, K)
           }
         )
       });
     },
     [
-      u,
+      m,
       a,
       b,
-      D,
-      T,
+      k,
+      s,
       e,
       l,
+      R,
+      E,
       L
     ]
   );
-  return J(() => () => {
+  return j(() => () => {
     g.current.forEach((n) => clearTimeout(n)), g.current = [];
   }, [e]), {
     tableRef: t,
-    startJourney: V
+    startJourney: J
   };
 };
 export {
-  Se as useTableLauncherJourney
+  He as useTableLauncherJourney
 };
 //# sourceMappingURL=use-table-launcher-journey.js.map

package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  LESSON_CARD_INDEX,\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  onTableSegmentClick,\n  onJourneyComplete,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n  const { isMobile } = useBreakpoint();\n\n  const originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      endJourney(journeyId);\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n    },\n    [endJourney, journeyId, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={handleEndJourney}\n            onGoBackFromTableLevel={handleEndJourney}\n          />\n        ),\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 236,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: segmentedCardDims.width / 2,\n          tooltipYCoOrdinates: 45,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n\n      timerRefs.current.push(startAnimationOnLabelAgain);\n    },\n    [addCoachmark, handleEndJourney, isMobile, journeyId, nextCoachmark],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    timerRefs.current.push(showNudge);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n\n    timerRefs.current.push(animateLabel);\n  }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={goToTableLauncher}\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n          },\n        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <S.Indicator $isActive={false} />,\n            indicator: {\n              position: 'bottom',\n              backgroundColor: 'YELLOW_4',\n              width: 52,\n              tooltipItem: (\n                <FlexView\n                  $position=\"absolute\"\n                  $flexDirection=\"row\"\n                  style={{ top: 6, left: 8, cursor: 'pointer' }}\n                  onClick={goToTableLauncher}\n                >\n                  <Text $renderAs=\"ab2-bold\">NEW</Text>\n                </FlexView>\n              ),\n              tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: '',\n              nudgePointerY: 20,\n            } as INudgeProps,\n            elementToHighlight: <></>,\n          },\n        ]);\n        carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: 264,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs=\"ab2-bold\">\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width / 2,\n          tooltipYCoOrdinates: labelDims.height + 10,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      setJourney,\n    ],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [journeyId]);\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":";;;;;;;;;;;;;;;;;;AA0CO,MAAMA,KAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAYC,EAAmB,6BAC/B,EAAE,UAAAC,MAAaC,KAEfC,IAAmBC,EAAsB,IAAI,GAC7CC,IAAsBD,EAAsB,IAAI,GAEhDE,IAAYF,EAAwC,CAAA,CAAE,GAEtD,EAAE,iBAAAG,MAAoBC,MACtB,EAAE,eAAAC,GAAe,YAAAC,GAAY,cAAAC,GAAc,YAAAC,EAAA,IAAeC,KAC1D,EAAE,SAASC,EAAe,IAAIC,EAAa,GAE3CC,IAAmBC;AAAA,IACvB,CAACC,MAAiC;;AAChC,MAAAN,EAAWb,CAAS,GAEhBmB,KACFrB,EAAoBqB,CAAY,GAElCJ,EAAeK,EAAwB,2BAA2B;AAAA,QAChE,MAAMC,EAAO;AAAA,MAAA,CACd,IAGiBC,IAAAlB,KAAA,gBAAAA,EAAA,YAAA,QAAAkB,EAAS,kBAAkB,MAC7CC,IAAAnB,KAAA,gBAAAA,EAAkB,YAAlB,QAAAmB,EAA2B,sBAC3BxB,EAAkBC,CAAS;AAAA,IAC7B;AAAA,IACA,CAACa,GAAYb,GAAWD,GAAmBD,GAAqBiB,CAAc;AAAA,EAAA,GAG1ES,IAA0BN;AAAA,IAC9B,CAACO,GAAuBC,MAA0B;;AAE9C,UAAA,GAACJ,IAAAlB,EAAiB,YAAjB,QAAAkB,EAA0B,wBAAwB,YACnD,GAACC,IAAAnB,EAAiB,YAAjB,QAAAmB,EAA0B,SAAS;AAEpC;AAGF,YAAMI,IAAoBvB,EAAiB,QAAQ,SAAS,QAAQ,yBAC9DwB,KACJC,IAAAzB,EAAiB,YAAjB,gBAAAyB,EAA0B,wBAAwB,QAAQ;AAE5D,MAAAjB,EAAaZ,GAAW;AAAA,QACtB,+BAA+BI,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,EAAc;AAAA,QACpB,oBACE,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAK1B;AAAA,YACL,cAAcoB;AAAA,YACd,OAAOD,EAAa;AAAA,YACpB,MAAMA,EAAa;AAAA,YACnB,SAASR;AAAA,YACT,wBAAwBA;AAAA,UAAA;AAAA,QAC1B;AAAA,QAEF,WAAW;AAAA,UACT,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,+BACGgB,GACC,EAAA,UAAA,gBAAAF,EAACG,KAAK,WAAU,YAAW,kEAAoD,EACjF,CAAA;AAAA,UAEF,qBAAqBP,EAAkB,QAAQ;AAAA,UAC/C,qBAAqB;AAAA,QACvB;AAAA,MAAA,CACD,GAEDf,EAAaZ,GAAW;AAAA,QACtB,+BAA+BI,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,EAAc;AAAA,QACpB,WAAW;AAAA,UACT,OAAO;AAAA,UACP,SAAS,CAAC5B,KACR,gBAAA6B,EAACG,KAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,eAAA,CAAA;AAAA,UAEF,eAAeN,EAAc,QAAQ,IAAI;AAAA,UACzC,eAAeA,EAAc,SAAS;AAAA,QACxC;AAAA,QACA,oBAAsB,gBAAAG,EAAAI,GAAA,EAAA;AAAA,MAAA,CACvB,GAEazB,EAAAV,GAAW,IAAOoC,EAAkC,GACpD1B,EAAAV,GAAW,IAAMqC,EAAgC;AAEzD,YAAAC,IAA6B,WAAW,MAAM;;AAClD,qBAAaA,CAA0B,IACnBhB,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,oBAAoB;AAAA,SAChDiB,CAA2B;AAEpB,MAAAhC,EAAA,QAAQ,KAAK+B,CAA0B;AAAA,IACnD;AAAA,IACA,CAAC1B,GAAcK,GAAkBf,GAAUF,GAAWU,CAAa;AAAA,EAAA,GAG/D8B,IAAoBtB,EAAY,MAAM;;AAC1B,IAAAV,MACHc,IAAAzB,EAAA,YAAA,QAAAyB,EAAS,UAAUmB,IAClB/B,EAAAV,GAAW,IAAO0C,EAAgC,GAEhE3B,EAAeK,EAAwB,wBAAwB;AAAA,MAC7D,MAAMC,EAAO;AAAA,IAAA,CACd;AAEK,UAAAsB,IAAY,WAAW,MAAM;;AACjC,mBAAaA,CAAS,IACLrB,IAAAlB,EAAA,YAAA,QAAAkB,EAAS,kBAAkB,KAC5CZ,EAAcV,GAAW,EAAI;AAAA,OAC5B4C,EAA+B;AAExB,IAAArC,EAAA,QAAQ,KAAKoC,CAAS;AAE1B,UAAAE,IAAe,WAAW,MAAM;;AACpC,mBAAaA,CAAY,IACLvB,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,oBAAoB;AAAA,OAChDiB,CAA2B;AAEpB,IAAAhC,EAAA,QAAQ,KAAKsC,CAAY;AAAA,EAAA,GAClC,CAAChD,GAAcG,GAAWU,GAAeF,GAAiBO,CAAc,CAAC,GAEtE+B,IAAe5B;AAAA,IACnB,CAAC6B,GAAqBC,IAAoC,OAAU;;AAC5D,YAAAC,KAAiB3B,IAAAzB,EAAa,YAAb,gBAAAyB,EAAsB,eACvC4B,KAAqB3B,IAAA1B,EAAa,YAAb,gBAAA0B,EAAsB,YAC3C4B,IAAqBF,KAAA,gBAAAA,EAAiBR;AAE5C,UACE,GAACZ,IAAAzB,EAAiB,YAAjB,QAAAyB,EAA0B,wBAAwB,YACnD,GAACuB,IAAAhD,EAAiB,YAAjB,QAAAgD,EAA0B,SAAS,YACpC,CAACH,KACD,EAACC,KAAA,QAAAA,EAAoB,YACrB,CAACC,KACD,CAACA,EAAmB;AAEpB;AAGF,YAAME,IAAYjD,EAAiB,QAAQ,SAAS,QAAQ,yBACtDwB,KACJ0B,IAAAlD,EAAiB,YAAjB,gBAAAkD,EAA0B,wBAAwB,QAAQ;AAG5D,MAAKN,KA6BHrC,EAAWX,GAAW;AAAA,QACpB;AAAA,UACE,+BAA+BmD;AAAA,UAC/B,UAAU;AAAA,UACV,MAAMrB,EAAc;AAAA,UACpB,oBAAqB,gBAAAC,EAAAwB,IAAA,EAAY,WAAW,GAAO,CAAA;AAAA,UACnD,WAAW;AAAA,YACT,UAAU;AAAA,YACV,iBAAiB;AAAA,YACjB,OAAO;AAAA,YACP,aACE,gBAAAxB;AAAA,cAACE;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,gBAAe;AAAA,gBACf,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,UAAU;AAAA,gBAC5C,SAASO;AAAA,gBAET,UAAC,gBAAAT,EAAAG,GAAA,EAAK,WAAU,YAAW,UAAG,OAAA;AAAA,cAAA;AAAA,YAChC;AAAA,YAEF,qBAAqB;AAAA;AAAA,UACvB;AAAA,QACF;AAAA,QACA;AAAA,UACE,+BAA+BiB;AAAA,UAC/B,UAAU;AAAA,UACV,MAAMrB,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,SAAS;AAAA,YACT,eAAe;AAAA,UACjB;AAAA,UACA,oBAAsB,gBAAAC,EAAAI,GAAA,EAAA;AAAA,QACxB;AAAA,MAAA,CACD,IACYqB,IAAA3D,EAAA,YAAA,QAAA2D,EAAS,UAAUC,KAClB/C,EAAAV,GAAW,IAAO0D,CAA+B,GACjDhD,EAAAV,GAAW,IAAM2D,EAA6B,MAjE5DhD,EAAWX,GAAW;AAAA,QACpB;AAAA,UACE,gCAA+B4D,IAAA/D,EAAa,YAAb,gBAAA+D,EAAsB;AAAA,UACrD,UAAU;AAAA,UACV,MAAM9B,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,SAAS,CAAC5B,KACR,gBAAA6B,EAACG,KAAK,WAAU,OAAM,QAAO,SAAQ,UAErC,mBAAA,CAAA;AAAA,YAEF,eAAe;AAAA,YACf,eAAe;AAAA,UACjB;AAAA,UACA,oBACE,gBAAAH;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,MAAMC;AAAA,cACN,SAAStB;AAAA,cACT,gBAAgBuB,GAA+B;AAAA,YAAA;AAAA,UACjD;AAAA,QAEJ;AAAA,MAAA,CACD,IACYC,IAAAnE,EAAA,YAAA,QAAAmE,EAAS,UAAUC,KAClBvD,EAAAV,GAAW,IAAO0D,CAA+B,IA2CjE9C,EAAaZ,GAAW;AAAA,QACtB,+BAA+BI,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,EAAc;AAAA,QACpB,oBAAsB,gBAAAC,EAAAI,GAAA,EAAA;AAAA,QACtB,WAAW;AAAA,UACT,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,OAAO;AAAA,UACP,+BACGF,GACC,EAAA,UAAA,gBAAAF,EAACG,KAAK,WAAU,YAAW,wFAE3B,EACF,CAAA;AAAA,UAEF,qBAAqBmB,EAAU,QAAQ;AAAA,UACvC,qBAAqBA,EAAU,SAAS;AAAA,QAC1C;AAAA,MAAA,CACD,GAEDzC,EAAaZ,GAAW;AAAA,QACtB,+BAA+BI,EAAiB,QAAQ;AAAA,QACxD,UAAU;AAAA,QACV,MAAM0B,EAAc;AAAA,QACpB,WAAW;AAAA,UACT,OAAO;AAAA,UACP,SAAS,CAAC5B,KACR,gBAAA6B,EAACG,KAAK,WAAU,OAAM,QAAO,SAC1B,UACH,wBAAA,CAAA;AAAA,UAEF,eAAeN,EAAc,QAAQ,IAAI;AAAA,UACzC,eAAeA,EAAc,SAAS;AAAA,QACxC;AAAA,QACA,oBACE,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAK1B;AAAA,YACL,OAAOyC,EAAW;AAAA,YAClB,MAAMA,EAAW;AAAA,YACjB,SAAS,MAAM;AAAA,YAAC;AAAA,YAChB,qBAAqB,CAAAmB,MAAa1C,EAAwBuB,GAAYmB,CAAS;AAAA,UAAA;AAAA,QACjF;AAAA,MAAA,CAEH;AAAA,IACH;AAAA,IACA;AAAA,MACEtD;AAAA,MACAf;AAAA,MACA2C;AAAA,MACAhB;AAAA,MACAtB;AAAA,MACAF;AAAA,MACAU;AAAA,MACAC;AAAA,IACF;AAAA,EAAA;AAIF,SAAAwD,EAAU,MACD,MAAM;AACX,IAAA5D,EAAU,QAAQ,QAAQ,CAAS6D,MAAA,aAAaA,CAAK,CAAC,GACtD7D,EAAU,UAAU;EAAC,GAEtB,CAACP,CAAS,CAAC,GAEP;AAAA,IACL,UAAUI;AAAA,IACV,cAAA0C;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n  ITableInfo,\n  ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n  LESSON_CARD_INDEX,\n  PUZZLE_CARD_INDEX,\n  SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n  SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n  TABLE_CARD_INDEX,\n} from './constants';\nimport {\n  GO_TO_TABLE_LAUNCHER_DURATION_MS,\n  SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n  SHOW_INITIAL_COACHMARK_AFTER_MS,\n  SHOW_INITIAL_TOOLTIP_AFTER_MS,\n  START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n  carouselRefs,\n  onTableSegmentClick,\n  onJourneyComplete,\n}: IUseTableJourneyProps) => {\n  const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n  const { isMobile } = useBreakpoint();\n\n  const originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const tooltipWidth = isMobile ? 232 : 264;\n  const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n  const handleEndJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\n      endJourney(journeyId);\n      // Only when User clicked on play\n      if (tableDetails) {\n        onTableSegmentClick(tableDetails);\n      }\n      trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n        step: Action.TABLES,\n      });\n\n      // Reset original table card ref label\n      originalTableRef?.current?.setLabelVisiblity(true);\n      originalTableRef?.current?.stopLabelAnimation();\n      onJourneyComplete(journeyId);\n    },\n    [endJourney, journeyId, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n  );\n\n  const handleTableSegmentClick = useCallback(\n    (launcherData: ITables, tableData: ITableInfo) => {\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current\n      ) {\n        return;\n      }\n\n      const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            defaultTable={tableData}\n            label={launcherData.label}\n            data={launcherData.data}\n            onPress={handleEndJourney}\n            onGoBackFromTableLevel={handleEndJourney}\n          />\n        ),\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: tooltipWidth,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs={tooltipTextRenderAs}>\n                Each table has 3 levels—clear them and earn 3 stars!\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: segmentedCardDims.width / 2,\n          tooltipYCoOrdinates: 45,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              Pick a level\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height * 0.4,\n        } as INudgeProps,\n        elementToHighlight: <></>,\n      });\n\n      nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n      nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n      const startAnimationOnLabelAgain = setTimeout(() => {\n        clearTimeout(startAnimationOnLabelAgain);\n        highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n      }, START_ANIMATING_CLONED_ELEM);\n\n      timerRefs.current.push(startAnimationOnLabelAgain);\n    },\n    [\n      addCoachmark,\n      handleEndJourney,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      tooltipTextRenderAs,\n      tooltipWidth,\n    ],\n  );\n\n  const goToTableLauncher = useCallback(() => {\n    playButtonSound();\n    carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n    nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n    trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n      step: Action.TABLES,\n    });\n\n    const showNudge = setTimeout(() => {\n      clearTimeout(showNudge);\n      originalTableRef.current?.setLabelVisiblity(false);\n      nextCoachmark(journeyId, true);\n    }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n    timerRefs.current.push(showNudge);\n\n    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n\n    timerRefs.current.push(animateLabel);\n  }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      const paginationList = carouselRefs.current?.indicatorRefs;\n      const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n      const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n      if (\n        !originalTableRef.current?.segmentedCardWrapperRef.current ||\n        !originalTableRef.current?.labelRef.current ||\n        !paginationList ||\n        !carouselNextBtnRef?.current ||\n        !tablePaginationRef ||\n        !tablePaginationRef.current\n      ) {\n        return;\n      }\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: !isMobile && (\n                <Text $renderAs=\"ab1\" $color=\"WHITE\">\n                  Click to proceed\n                </Text>\n              ),\n              nudgePointerX: 0,\n              nudgePointerY: 0,\n            } as INudgeProps,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={CaratRightIcon}\n                onClick={goToTableLauncher}\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n          },\n        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        setJourney(journeyId, [\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.TOOLTIP,\n            elementToHighlight: <S.Indicator $isActive={false} />,\n            indicator: {\n              position: 'bottom',\n              backgroundColor: 'YELLOW_4',\n              width: 52,\n              tooltipItem: (\n                <FlexView\n                  $position=\"absolute\"\n                  $flexDirection=\"row\"\n                  style={{ top: 6, left: 8, cursor: 'pointer' }}\n                  onClick={goToTableLauncher}\n                >\n                  <Text $renderAs={tooltipTextRenderAs}>NEW</Text>\n                </FlexView>\n              ),\n              tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            indicator: {\n              nudge: 'click',\n              content: '',\n              nudgePointerY: 20,\n            } as INudgeProps,\n            elementToHighlight: <></>,\n          },\n        ]);\n        carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n        nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n      }\n\n      // SHOW THE USER SELECT A TABLE\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.labelRef,\n        isActive: false,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: {\n          position: 'top',\n          backgroundColor: 'YELLOW_4',\n          width: tooltipWidth,\n          tooltipItem: (\n            <FlexView>\n              <Text $renderAs={tooltipTextRenderAs}>\n                Get faster at multiplication! Practice everyday and become a Tables champ.\n              </Text>\n            </FlexView>\n          ),\n          tooltipXCoOrdinates: labelDims.width / 2,\n          tooltipYCoOrdinates: labelDims.height + 10,\n        } as IArrowTooltipProps,\n      });\n\n      addCoachmark(journeyId, {\n        originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n        isActive: false,\n        type: IndicatorType.NUDGE,\n        indicator: {\n          nudge: 'click',\n          content: !isMobile && (\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {'Pick a table to start'}\n            </Text>\n          ),\n          nudgePointerX: tableCardDims.width / 2 + 50,\n          nudgePointerY: tableCardDims.height / 2,\n        } as INudgeProps,\n        elementToHighlight: (\n          <TablesCard\n            ref={highlightedTableRef}\n            label={tablesData.label}\n            data={tablesData.data}\n            onPress={() => {}}\n            onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n          />\n        ),\n      });\n    },\n    [\n      addCoachmark,\n      carouselRefs,\n      goToTableLauncher,\n      handleTableSegmentClick,\n      isMobile,\n      journeyId,\n      nextCoachmark,\n      setJourney,\n      tooltipTextRenderAs,\n      tooltipWidth,\n    ],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      timerRefs.current.forEach(timer => clearTimeout(timer));\n      timerRefs.current = [];\n    };\n  }, [journeyId]);\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","tooltipWidth","tooltipTextRenderAs","handleEndJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","_h","LESSON_CARD_INDEX","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}

package/dist/features/circle-games/games/tutorial/tutorial.js

@@ -1,26 +1,32 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { forwardRef as I, useState as v, useRef as u, useCallback as C, useImperativeHandle as V } from "react";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { forwardRef as I, useState as C, useRef as u, useCallback as V, useImperativeHandle as v } from "react";
 import x from "../../../../assets/line-icons/icons/cross.js";
-import { useJourney as H } from "../../../journey/use-journey/use-journey.js";
-import T from "../../../ui/text/text.js";
-import { GameTutorialWrapper as $, GameTutorialHeader as G, HeaderIconContainer as P, GameTutorialContainer as R, VideoContainer as W, VideoProgressWrapper as b, VideoProgressContainer as j, VideoProgress as k } from "./tutorial-styled.js";
-const q = I(
-  ({ src: m, title: o, onCross: t, showProgress: p = !0, onTutorialPlayedOnce: e }, f) => {
-    const [i, l] = v(0), n = u(!1), s = u(null), { isJourneyActive: h } = H(), g = C(
-      (c) => {
-        const a = (c.target.currentTime || 0) / (c.target.duration || 1) * 100;
-        a >= 90 && !n.current && (n.current = !0, e == null || e()), l(a);
+import H from "../../../ui/text/text.js";
+import { GameTutorialWrapper as T, GameTutorialHeader as $, HeaderIconContainer as G, GameTutorialContainer as P, VideoContainer as R, VideoProgressWrapper as W, VideoProgressContainer as b, VideoProgress as j } from "./tutorial-styled.js";
+const U = I(
+  ({
+    src: m,
+    title: o,
+    onCross: t,
+    showProgress: p = !0,
+    onTutorialPlayedOnce: e,
+    isJourneyActive: f
+  }, l) => {
+    const [i, h] = C(0), n = u(!1), s = u(null), g = V(
+      (a) => {
+        const d = (a.target.currentTime || 0) / (a.target.duration || 1) * 100;
+        d >= 90 && !n.current && (n.current = !0, e == null || e()), h(d);
       },
       [e]
     );
-    return V(f, () => ({
+    return v(l, () => ({
       videoRef: s
-    })), /* @__PURE__ */ d($, { children: [
-      (o || t) && /* @__PURE__ */ d(G, { children: [
-        o && /* @__PURE__ */ r(T, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
-        t && /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(x, { color: "#fff", onClick: t }) })
+    })), /* @__PURE__ */ c(T, { children: [
+      (o || t) && /* @__PURE__ */ c($, { children: [
+        o && /* @__PURE__ */ r(H, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: o }),
+        t && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ r(x, { color: "#fff", onClick: t }) })
       ] }),
-      /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(W, { isJourneyActive: h, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(R, { isJourneyActive: f, children: /* @__PURE__ */ r(
         "video",
         {
           ref: s,
@@ -34,11 +40,11 @@ const q = I(
           playsInline: !0
         }
       ) }) }),
-      p && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(j, { children: i > 0 && /* @__PURE__ */ r(k, { $width: i }) }) })
+      p && /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(b, { children: i > 0 && /* @__PURE__ */ r(j, { $width: i }) }) })
     ] });
   }
 );
 export {
-  q as Tutorial
+  U as Tutorial
 };
 //# sourceMappingURL=tutorial.js.map

package/dist/features/circle-games/games/tutorial/tutorial.js.map

@@ -1 +1 @@
-{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps, ITutorialRef } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport { useJourney } from '../../../journey/use-journey/use-journey';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = forwardRef<ITutorialRef, ITutorialProps>(\n  ({ src, title, onCross, showProgress = true, onTutorialPlayedOnce }: ITutorialProps, ref) => {\n    const [progress, setProgress] = useState(0);\n    const hasVideoEnded = useRef(false);\n    const videoRef = useRef<HTMLVideoElement>(null);\n\n    const { isJourneyActive } = useJourney();\n\n    const onProgress = useCallback(\n      (e: ChangeEvent<HTMLVideoElement>) => {\n        const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n        if (p >= 90 && !hasVideoEnded.current) {\n          hasVideoEnded.current = true;\n          onTutorialPlayedOnce?.();\n        }\n\n        setProgress(p);\n      },\n      [onTutorialPlayedOnce],\n    );\n\n    useImperativeHandle(ref, () => ({\n      videoRef,\n    }));\n\n    return (\n      <Styled.GameTutorialWrapper>\n        {(title || onCross) && (\n          <Styled.GameTutorialHeader>\n            {title && (\n              <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n                {title}\n              </Text>\n            )}\n            {onCross && (\n              <Styled.HeaderIconContainer>\n                <CrossIcon color=\"#fff\" onClick={onCross} />\n              </Styled.HeaderIconContainer>\n            )}\n          </Styled.GameTutorialHeader>\n        )}\n        <Styled.GameTutorialContainer>\n          <Styled.VideoContainer isJourneyActive={isJourneyActive}>\n            <video\n              ref={videoRef}\n              loop={true}\n              autoPlay={true}\n              muted={true}\n              src={src}\n              onTimeUpdate={onProgress}\n              disablePictureInPicture={true}\n              itemType=\"video/mp4\"\n              playsInline\n            />\n          </Styled.VideoContainer>\n        </Styled.GameTutorialContainer>\n\n        {showProgress && (\n          <Styled.VideoProgressWrapper>\n            <Styled.VideoProgressContainer>\n              {progress > 0 && <Styled.VideoProgress $width={progress} />}\n            </Styled.VideoProgressContainer>\n          </Styled.VideoProgressWrapper>\n        )}\n      </Styled.GameTutorialWrapper>\n    );\n  },\n);\n"],"names":["Tutorial","forwardRef","src","title","onCross","showProgress","onTutorialPlayedOnce","ref","progress","setProgress","useState","hasVideoEnded","useRef","videoRef","isJourneyActive","useJourney","onProgress","useCallback","e","p","useImperativeHandle","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;;AAUO,MAAMA,IAAWC;AAAA,EACtB,CAAC,EAAE,KAAAC,GAAK,OAAAC,GAAO,SAAAC,GAAS,cAAAC,IAAe,IAAM,sBAAAC,EAAqB,GAAmBC,MAAQ;AAC3F,UAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAC5BC,IAAWD,EAAyB,IAAI,GAExC,EAAE,iBAAAE,MAAoBC,KAEtBC,IAAaC;AAAA,MACjB,CAACC,MAAqC;AAC9B,cAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,QAAIC,KAAK,MAAM,CAACR,EAAc,YAC5BA,EAAc,UAAU,IACDL,KAAA,QAAAA,MAGzBG,EAAYU,CAAC;AAAA,MACf;AAAA,MACA,CAACb,CAAoB;AAAA,IAAA;AAGvB,WAAAc,EAAoBb,GAAK,OAAO;AAAA,MAC9B,UAAAM;AAAA,IACA,EAAA,GAGA,gBAAAQ,EAACC,GAAA,EACG,UAAA;AAAA,OAAAnB,KAASC,MACT,gBAAAiB,EAACE,GAAA,EACE,UAAA;AAAA,QACCpB,KAAA,gBAAAqB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHtB,EAAA,CAAA;AAAA,QAEDC,KACE,gBAAAoB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAASvB,EAAA,CAAS,EAC5C,CAAA;AAAA,MAAA,GAEJ;AAAA,MAEF,gBAAAoB,EAACI,GAAA,EACC,4BAACC,GAAA,EAAsB,iBAAAf,GACrB,UAAA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKX;AAAA,UACL,MAAM;AAAA,UACN,UAAU;AAAA,UACV,OAAO;AAAA,UACP,KAAAX;AAAA,UACA,cAAcc;AAAA,UACd,yBAAyB;AAAA,UACzB,UAAS;AAAA,UACT,aAAW;AAAA,QAAA;AAAA,SAEf,EACF,CAAA;AAAA,MAECX,KACE,gBAAAmB,EAAAM,GAAA,EACC,UAAA,gBAAAN,EAACO,GAAA,EACE,UAAWvB,IAAA,uBAAMwB,GAAA,EAAqB,QAAQxB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps, ITutorialRef } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = forwardRef<ITutorialRef, ITutorialProps>(\n  (\n    {\n      src,\n      title,\n      onCross,\n      showProgress = true,\n      onTutorialPlayedOnce,\n      isJourneyActive,\n    }: ITutorialProps,\n    ref,\n  ) => {\n    const [progress, setProgress] = useState(0);\n    const hasVideoEnded = useRef(false);\n    const videoRef = useRef<HTMLVideoElement>(null);\n\n    const onProgress = useCallback(\n      (e: ChangeEvent<HTMLVideoElement>) => {\n        const p = ((e.target.currentTime || 0) / (e.target.duration || 1)) * 100;\n\n        if (p >= 90 && !hasVideoEnded.current) {\n          hasVideoEnded.current = true;\n          onTutorialPlayedOnce?.();\n        }\n\n        setProgress(p);\n      },\n      [onTutorialPlayedOnce],\n    );\n\n    useImperativeHandle(ref, () => ({\n      videoRef,\n    }));\n\n    return (\n      <Styled.GameTutorialWrapper>\n        {(title || onCross) && (\n          <Styled.GameTutorialHeader>\n            {title && (\n              <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n                {title}\n              </Text>\n            )}\n            {onCross && (\n              <Styled.HeaderIconContainer>\n                <CrossIcon color=\"#fff\" onClick={onCross} />\n              </Styled.HeaderIconContainer>\n            )}\n          </Styled.GameTutorialHeader>\n        )}\n        <Styled.GameTutorialContainer>\n          <Styled.VideoContainer isJourneyActive={isJourneyActive}>\n            <video\n              ref={videoRef}\n              loop={true}\n              autoPlay={true}\n              muted={true}\n              src={src}\n              onTimeUpdate={onProgress}\n              disablePictureInPicture={true}\n              itemType=\"video/mp4\"\n              playsInline\n            />\n          </Styled.VideoContainer>\n        </Styled.GameTutorialContainer>\n\n        {showProgress && (\n          <Styled.VideoProgressWrapper>\n            <Styled.VideoProgressContainer>\n              {progress > 0 && <Styled.VideoProgress $width={progress} />}\n            </Styled.VideoProgressContainer>\n          </Styled.VideoProgressWrapper>\n        )}\n      </Styled.GameTutorialWrapper>\n    );\n  },\n);\n"],"names":["Tutorial","forwardRef","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","ref","progress","setProgress","useState","hasVideoEnded","useRef","videoRef","onProgress","useCallback","e","p","useImperativeHandle","jsxs","Styled.GameTutorialWrapper","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":";;;;;AASO,MAAMA,IAAWC;AAAA,EACtB,CACE;AAAA,IACE,KAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,sBAAAC;AAAA,IACA,iBAAAC;AAAA,KAEFC,MACG;AACH,UAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAgBC,EAAO,EAAK,GAC5BC,IAAWD,EAAyB,IAAI,GAExCE,IAAaC;AAAA,MACjB,CAACC,MAAqC;AAC9B,cAAAC,KAAMD,EAAE,OAAO,eAAe,MAAMA,EAAE,OAAO,YAAY,KAAM;AAErE,QAAIC,KAAK,MAAM,CAACN,EAAc,YAC5BA,EAAc,UAAU,IACDN,KAAA,QAAAA,MAGzBI,EAAYQ,CAAC;AAAA,MACf;AAAA,MACA,CAACZ,CAAoB;AAAA,IAAA;AAGvB,WAAAa,EAAoBX,GAAK,OAAO;AAAA,MAC9B,UAAAM;AAAA,IACA,EAAA,GAGA,gBAAAM,EAACC,GAAA,EACG,UAAA;AAAA,OAAAlB,KAASC,MACT,gBAAAgB,EAACE,GAAA,EACE,UAAA;AAAA,QACCnB,KAAA,gBAAAoB,EAACC,KAAK,WAAU,OAAM,QAAO,SAAQ,QAAO,UACzC,UACHrB,EAAA,CAAA;AAAA,QAEDC,KACE,gBAAAmB,EAAAE,GAAA,EACC,UAAC,gBAAAF,EAAAG,GAAA,EAAU,OAAM,QAAO,SAAStB,EAAA,CAAS,EAC5C,CAAA;AAAA,MAAA,GAEJ;AAAA,MAEF,gBAAAmB,EAACI,GAAA,EACC,4BAACC,GAAA,EAAsB,iBAAArB,GACrB,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKT;AAAA,UACL,MAAM;AAAA,UACN,UAAU;AAAA,UACV,OAAO;AAAA,UACP,KAAAZ;AAAA,UACA,cAAca;AAAA,UACd,yBAAyB;AAAA,UACzB,UAAS;AAAA,UACT,aAAW;AAAA,QAAA;AAAA,SAEf,EACF,CAAA;AAAA,MAECV,KACE,gBAAAkB,EAAAM,GAAA,EACC,UAAA,gBAAAN,EAACO,GAAA,EACE,UAAWrB,IAAA,uBAAMsB,GAAA,EAAqB,QAAQtB,EAAU,CAAA,EAC3D,CAAA,GACF;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/index.d.ts

@@ -2993,6 +2993,7 @@ export declare interface ITutorialProps {
     onCross?: () => void;
     showProgress?: boolean;
     onTutorialPlayedOnce?: () => void;
+    isJourneyActive: boolean;
 }
 
 export declare interface ITutorialRef {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "2.9.7-rj-0",
+  "version": "2.9.7-rj-1",
   "type": "module",
   "files": [
     "dist"