@cuemath/leap 2.8.44-rj-1 → 2.8.44-rj-3

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

@@ -1,69 +1,69 @@
-import { jsx as e, Fragment as I } from "react/jsx-runtime";
-import { useRef as f, useCallback as E, useMemo as ie } from "react";
-import Q from "../../../../../assets/line-icons/icons/carat-right.js";
-import { PLATFORM_EVENTS_STUDENT as j } from "../../../../analytics-events/platform-events-student.js";
+import { jsx as t, Fragment as O } from "react/jsx-runtime";
+import { useRef as p, useCallback as f, useMemo as le, useEffect as ce } from "react";
+import z from "../../../../../assets/line-icons/icons/carat-right.js";
+import { PLATFORM_EVENTS_STUDENT as ee } from "../../../../analytics-events/platform-events-student.js";
 import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
-import { useJourney as oe } from "../../../../journey/use-journey/use-journey.js";
-import z from "../../../../ui/buttons/icon-button/icon-button.js";
-import { useUIContext as le } from "../../../../ui/context/context.js";
-import L from "../../../../ui/layout/flex-view.js";
+import { useJourney as ae } from "../../../../journey/use-journey/use-journey.js";
+import te from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as de } from "../../../../ui/context/context.js";
+import S from "../../../../ui/layout/flex-view.js";
 import s from "../../../../ui/text/text.js";
-import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as p } from "../../../enum/circle-onboarding-steps.js";
-import { useCircleSounds as ce } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { SegmentedGameCard as ae } from "../../comps/segmented-game-card/segmented-game-card.js";
-import { GAME_LAUNCHER_ANALYTICS_EVENTS as ee } from "../../game-launcher-analytics-events.js";
-import { GO_TO_NEXT_SLIDE_AFTER_MS as de, SHOW_LABEL_HIGHLIGHT_AFTER_MS as se, SHOW_NUDGE_AFTER_MS as ge, SLIDE_TO_LESSON_MS as he } from "./constants.js";
-import { ProjectType as me } from "../../../games/web-view/enums/project-type-enum.js";
-const He = ({
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as _ } from "../../../enum/circle-onboarding-steps.js";
+import { useCircleSounds as se } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { SegmentedGameCard as he } from "../../comps/segmented-game-card/segmented-game-card.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as re } from "../../game-launcher-analytics-events.js";
+import { GO_TO_NEXT_SLIDE_AFTER_MS as ge, SHOW_LABEL_HIGHLIGHT_AFTER_MS as me, SHOW_NUDGE_AFTER_MS as ue, SLIDE_TO_LESSON_MS as Te } from "./constants.js";
+import { ProjectType as Ee } from "../../../games/web-view/enums/project-type-enum.js";
+const ke = ({
   carouselRefs: n,
-  onSegmentClick: O,
-  onJourneyComplete: S
+  onSegmentClick: b,
+  onJourneyComplete: R
 }) => {
-  const o = f(null), r = f(null), a = f(null), b = f(!1), { playButtonSound: R } = ce(), { nextCoachmark: l, setJourney: P } = oe(), { onEvent: _ } = le(), N = E(
-    (t) => {
-      _(j.ONBOARDING_STEP_VIEWED, {
-        step: t
+  const o = p(null), r = p(null), a = p(null), A = p([]), L = p(!1), { playButtonSound: P } = se(), { nextCoachmark: l, setJourney: N } = ae(), { onEvent: C } = de(), y = f(
+    (e) => {
+      C(ee.ONBOARDING_STEP_VIEWED, {
+        step: e
       });
     },
-    [_]
-  ), y = E(
-    (t) => {
-      _(j.ONBOARDING_STEP_COMPLETED, {
-        step: t
+    [C]
+  ), H = f(
+    (e) => {
+      C(ee.ONBOARDING_STEP_COMPLETED, {
+        step: e
       });
     },
-    [_]
-  ), g = E(
-    (t, c, i, h, A = !1) => {
-      var m, T;
-      A || (R(), (T = n.current) == null || T.goToIndex(((m = n.current) == null ? void 0 : m.currentIndex) + 1), l(h, !1, de)), N(t);
-      const C = setTimeout(() => {
-        clearTimeout(C), c.startLabelAnimation(i);
-      }, se);
-      l(h, !0, ge);
+    [C]
+  ), h = f(
+    (e, c, i, g, I = !1) => {
+      var u, T;
+      I || (P(), (T = n.current) == null || T.goToIndex(((u = n.current) == null ? void 0 : u.currentIndex) + 1), l(g, !1, ge)), y(e);
+      const m = setTimeout(() => {
+        clearTimeout(m), c.startLabelAnimation(i);
+      }, me);
+      A.current.push(m), l(g, !0, ue);
     },
-    [n, l, R, N]
-  ), H = E(
-    (t, c) => {
-      O(t, me.PUZZLE), y(p.PUZZLE_ACTIVITY), l(c), S(c);
+    [n, l, P, y]
+  ), G = f(
+    (e, c) => {
+      b(e, Ee.PUZZLE), H(_.PUZZLE_ACTIVITY), l(c), R(c);
     },
-    [l, S, O, y]
-  ), G = E(
-    (t, c, i) => {
-      var k, w, Y, v, B, U, V, x, D, M, W, X, $, J, F, Z, K, q;
-      if (b.current || !((k = n == null ? void 0 : n.current) != null && k.nextBtnRef.current) || !((w = r == null ? void 0 : r.current) != null && w.segmentedCardWrapperRef.current) || !((Y = o == null ? void 0 : o.current) != null && Y.labelRef.current) || !((v = r == null ? void 0 : r.current) != null && v.labelRef.current) || !t)
+    [l, R, b, H]
+  ), k = f(
+    (e, c, i) => {
+      var Y, v, B, U, V, x, D, M, W, X, $, J, F, Z, K, q, Q, j;
+      if (L.current || !((Y = n == null ? void 0 : n.current) != null && Y.nextBtnRef.current) || !((v = r == null ? void 0 : r.current) != null && v.segmentedCardWrapperRef.current) || !((B = o == null ? void 0 : o.current) != null && B.labelRef.current) || !((U = r == null ? void 0 : r.current) != null && U.labelRef.current) || !e)
         return;
-      b.current = !0;
-      const h = ((V = (U = (B = a.current) == null ? void 0 : B.labelRef) == null ? void 0 : U.current) == null ? void 0 : V.getBoundingClientRect()) || {
+      L.current = !0;
+      const g = ((D = (x = (V = a.current) == null ? void 0 : V.labelRef) == null ? void 0 : x.current) == null ? void 0 : D.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, A = ((M = (D = (x = o.current) == null ? void 0 : x.labelRef) == null ? void 0 : D.current) == null ? void 0 : M.getBoundingClientRect()) || {
+      }, I = ((X = (W = (M = o.current) == null ? void 0 : M.labelRef) == null ? void 0 : W.current) == null ? void 0 : X.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, C = (($ = (X = (W = r.current) == null ? void 0 : W.labelRef) == null ? void 0 : X.current) == null ? void 0 : $.getBoundingClientRect()) || {
+      }, m = ((F = (J = ($ = r.current) == null ? void 0 : $.labelRef) == null ? void 0 : J.current) == null ? void 0 : F.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, m = ((Z = (F = (J = r.current) == null ? void 0 : J.segmentedCardWrapperRef) == null ? void 0 : F.current) == null ? void 0 : Z.getBoundingClientRect()) || {
+      }, u = ((q = (K = (Z = r.current) == null ? void 0 : Z.segmentedCardWrapperRef) == null ? void 0 : K.current) == null ? void 0 : q.getBoundingClientRect()) || {
         height: 0,
         width: 0
       };
@@ -73,144 +73,146 @@ const He = ({
           originalElementToHighlightRef: a.current.labelRef,
           isActive: !1,
           type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ e(I, {}),
+          elementToHighlight: /* @__PURE__ */ t(O, {}),
           indicator: {
             position: "right",
             backgroundColor: "BLUE_4",
             width: 264,
-            tooltipItem: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(s, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
-            tooltipXCoOrdinates: h.width + 50,
-            tooltipYCoOrdinates: h.height / 2
+            tooltipItem: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(s, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
+            tooltipXCoOrdinates: g.width + 50,
+            tooltipYCoOrdinates: g.height / 2
           }
         },
         {
-          originalElementToHighlightRef: (K = n.current) == null ? void 0 : K.nextBtnRef,
+          originalElementToHighlightRef: (Q = n.current) == null ? void 0 : Q.nextBtnRef,
           isActive: !1,
           type: d.NUDGE,
-          elementToHighlight: /* @__PURE__ */ e(
-            z,
+          elementToHighlight: /* @__PURE__ */ t(
+            te,
             {
               renderAs: "secondary",
-              Icon: Q,
-              onClick: () => g(
-                p.GAMES_ACTIVITY,
+              Icon: z,
+              onClick: () => h(
+                _.GAMES_ACTIVITY,
                 o.current,
                 "ORANGE_4",
                 i
               ),
-              analyticsLabel: ee.JOURNEY_NEXT_ACTIVITY
+              analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ e(s, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: /* @__PURE__ */ t(s, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
         }
       ]);
-      const te = [
+      const ie = [
         {
           originalElementToHighlightRef: o.current.labelRef,
           isActive: !1,
           type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ e(I, {}),
+          elementToHighlight: /* @__PURE__ */ t(O, {}),
           indicator: {
             position: "right",
             backgroundColor: "ORANGE_4",
             width: 264,
-            tooltipItem: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(s, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
-            tooltipXCoOrdinates: A.width + 50,
-            tooltipYCoOrdinates: A.height / 2
+            tooltipItem: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(s, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
+            tooltipXCoOrdinates: I.width + 50,
+            tooltipYCoOrdinates: I.height / 2
           }
         },
         {
           originalElementToHighlightRef: n.current.nextBtnRef,
           isActive: !1,
           type: d.NUDGE,
-          elementToHighlight: /* @__PURE__ */ e(
-            z,
+          elementToHighlight: /* @__PURE__ */ t(
+            te,
             {
               renderAs: "secondary",
-              Icon: Q,
-              onClick: () => g(
-                p.PUZZLE_ACTIVITY,
+              Icon: z,
+              onClick: () => h(
+                _.PUZZLE_ACTIVITY,
                 r.current,
                 "PURPLE_4",
                 i
               ),
-              analyticsLabel: ee.JOURNEY_NEXT_ACTIVITY
+              analyticsLabel: re.JOURNEY_NEXT_ACTIVITY
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ e(s, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: /* @__PURE__ */ t(s, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
         }
-      ], re = [
+      ], oe = [
         {
           originalElementToHighlightRef: r.current.labelRef,
           isActive: !1,
           type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ e(I, {}),
+          elementToHighlight: /* @__PURE__ */ t(O, {}),
           indicator: {
             position: "right",
             backgroundColor: "PURPLE_4",
             width: 264,
-            tooltipItem: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(s, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
-            tooltipXCoOrdinates: C.width + 50,
-            tooltipYCoOrdinates: C.height / 2
+            tooltipItem: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(s, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
+            tooltipXCoOrdinates: m.width + 50,
+            tooltipYCoOrdinates: m.height / 2
           }
         },
         {
           originalElementToHighlightRef: r.current.segmentedCardWrapperRef,
           isActive: !1,
           type: d.NUDGE,
-          elementToHighlight: /* @__PURE__ */ e(
-            ae,
+          elementToHighlight: /* @__PURE__ */ t(
+            he,
             {
               label: "",
-              value: t.data.filter((u) => u.solved).length,
-              maxValue: t.data.length,
-              initialValue: t.initialProgressValue,
-              data: t.data.map((u) => ({
-                card: u.cardLottie,
+              value: e.data.filter((E) => E.solved).length,
+              maxValue: e.data.length,
+              initialValue: e.initialProgressValue,
+              data: e.data.map((E) => ({
+                card: E.cardLottie,
                 name: "",
                 // We dont want to show the name of the puzzle in onboarding
-                isCompleted: u.solved,
-                onPress: () => H(u, i)
+                isCompleted: E.solved,
+                onPress: () => G(E, i)
               }))
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ e(s, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
-            nudgePointerX: m.width * 0.6,
-            nudgePointerY: m.height * 0.4
+            content: /* @__PURE__ */ t(s, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
+            nudgePointerX: u.width * 0.6,
+            nudgePointerY: u.height * 0.4
           }
         }
       ];
-      P(i, [...T, ...te, ...re]), (q = n.current) == null || q.goToIndex(0);
-      const ne = setTimeout(() => {
-        clearTimeout(ne), l(i);
-      }, he);
-      c && a.current ? g(p.SKILL_ACTIVITY, a.current, "BLUE_4", i, !0) : g(p.GAMES_ACTIVITY, o.current, "ORANGE_4", i, !0);
+      N(i, [...T, ...ie, ...oe]), (j = n.current) == null || j.goToIndex(0);
+      const w = setTimeout(() => {
+        clearTimeout(w), l(i);
+      }, Te);
+      A.current.push(w), c && a.current ? h(_.SKILL_ACTIVITY, a.current, "BLUE_4", i, !0) : h(_.GAMES_ACTIVITY, o.current, "ORANGE_4", i, !0);
     },
-    [n, H, g, l, P]
-  );
-  return ie(
+    [n, G, h, l, N]
+  ), ne = le(
     () => ({
       gameRefs: o,
       puzzleRefs: r,
       lessonRefs: a,
-      startJourney: G
+      startJourney: k
     }),
-    [G]
+    [k]
   );
+  return ce(() => () => {
+    A.current.forEach((e) => clearTimeout(e)), A.current = [], L.current = !1;
+  }, [n]), ne;
 };
 export {
-  He as useGameLauncherJourney
+  ke 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 { TJourneyId } from '../../../../journey/journey-id/journey-id-types';\nimport 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, 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 { 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 gameRefs = useRef<ISegmentedGameCardRefs>(null);\n  const puzzleRefs = useRef<ISegmentedGameCardRefs>(null);\n  const lessonRefs = useRef<ISegmentedGameCardRefs>(null);\n\n  const isJourneyInProgress = useRef(false);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney } = 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      journeyId: TJourneyId,\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      nextCoachmark(journeyId, true, SHOW_NUDGE_AFTER_MS);\n    },\n    [carouselRefs, nextCoachmark, playButtonSound, trackEventViewed],\n  );\n\n  const endJourney = useCallback(\n    (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n      onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n      trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n      nextCoachmark(journeyId);\n      onJourneyComplete(journeyId);\n    },\n    [nextCoachmark, onJourneyComplete, onSegmentClick, trackEventCompleted],\n  );\n\n  const startJourney = useCallback(\n    (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean, journeyId: TJourneyId) => {\n      if (isJourneyInProgress.current) {\n        return;\n      }\n\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      isJourneyInProgress.current = true;\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: 'right',\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 + 50,\n              tooltipYCoOrdinates: lessonLabelDims.height / 2,\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                    journeyId,\n                  )\n                }\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n            indicator: {\n              nudge: 'click',\n              content: (\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: 'right',\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 + 50,\n            tooltipYCoOrdinates: gameLabelDims.height / 2,\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                  journeyId,\n                )\n              }\n              analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: (\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: 'right',\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 + 50,\n            tooltipYCoOrdinates: puzzleLabelDims.height / 2,\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: () => endJourney(puzzle, journeyId),\n              }))}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: (\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      if (isLessonAvailable && lessonRefs.current) {\n        goToNextCard(ActionEvent.SKILL_ACTIVITY, lessonRefs.current, 'BLUE_4', journeyId, true);\n      } else {\n        goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', journeyId, true);\n      }\n    },\n    [carouselRefs, endJourney, goToNextCard, nextCoachmark, setJourney],\n  );\n\n  const data = useMemo(\n    () => ({\n      gameRefs,\n      puzzleRefs,\n      lessonRefs,\n      startJourney,\n    }),\n    [startJourney],\n  );\n\n  return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","gameRefs","useRef","puzzleRefs","lessonRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","journeyId","isFirstSlide","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","endJourney","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","useMemo"],"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 { TJourneyId } from '../../../../journey/journey-id/journey-id-types';\nimport 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 { 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 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 isJourneyInProgress = useRef(false);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney } = 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      journeyId: TJourneyId,\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, nextCoachmark, playButtonSound, trackEventViewed],\n  );\n\n  const endJourney = useCallback(\n    (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n      onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n      trackEventCompleted(ActionEvent.PUZZLE_ACTIVITY);\n      nextCoachmark(journeyId);\n      onJourneyComplete(journeyId);\n    },\n    [nextCoachmark, onJourneyComplete, onSegmentClick, trackEventCompleted],\n  );\n\n  const startJourney = useCallback(\n    (puzzlesData: IProject<Puzzle>, isLessonAvailable: boolean, journeyId: TJourneyId) => {\n      if (isJourneyInProgress.current) {\n        return;\n      }\n\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      isJourneyInProgress.current = true;\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: 'right',\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 + 50,\n              tooltipYCoOrdinates: lessonLabelDims.height / 2,\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                    journeyId,\n                  )\n                }\n                analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n              />\n            ),\n            indicator: {\n              nudge: 'click',\n              content: (\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: 'right',\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 + 50,\n            tooltipYCoOrdinates: gameLabelDims.height / 2,\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                  journeyId,\n                )\n              }\n              analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: (\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: 'right',\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 + 50,\n            tooltipYCoOrdinates: puzzleLabelDims.height / 2,\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: () => endJourney(puzzle, journeyId),\n              }))}\n            />\n          ),\n          indicator: {\n            nudge: 'click',\n            content: (\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', journeyId, true);\n      } else {\n        goToNextCard(ActionEvent.GAMES_ACTIVITY, gameRefs.current, 'ORANGE_4', journeyId, true);\n      }\n    },\n    [carouselRefs, endJourney, goToNextCard, nextCoachmark, setJourney],\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      isJourneyInProgress.current = false;\n    };\n  }, [carouselRefs]);\n\n  return data;\n};\n"],"names":["useGameLauncherJourney","carouselRefs","onSegmentClick","onJourneyComplete","gameRefs","useRef","puzzleRefs","lessonRefs","timerRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","trackAnalytics","useUIContext","trackEventViewed","useCallback","step","AnalyticsLabel","trackEventCompleted","goToNextCard","analyticsLabelViewed","refOfNextSlide","color","journeyId","isFirstSlide","_b","_a","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","SHOW_NUDGE_AFTER_MS","endJourney","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,138 +1,142 @@
-import { jsx as r, Fragment as L } from "react/jsx-runtime";
-import { useRef as I, useCallback as p } from "react";
-import F from "../../../../../assets/line-icons/icons/carat-right.js";
-import { PLATFORM_EVENTS_STUDENT as B } from "../../../../analytics-events/platform-events-student.js";
-import { JOURNEY_ID_STUDENT as V } from "../../../../journey/journey-id/journey-id-student.js";
-import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
-import { useJourney as J } from "../../../../journey/use-journey/use-journey.js";
-import X from "../../../../ui/buttons/icon-button/icon-button.js";
-import { useUIContext as K } from "../../../../ui/context/context.js";
-import b from "../../../../ui/layout/flex-view.js";
+import { jsx as r, Fragment as R } from "react/jsx-runtime";
+import { useRef as A, useCallback as C, useEffect as V } from "react";
+import J from "../../../../../assets/line-icons/icons/carat-right.js";
+import { PLATFORM_EVENTS_STUDENT as U } from "../../../../analytics-events/platform-events-student.js";
+import { JOURNEY_ID_STUDENT as X } from "../../../../journey/journey-id/journey-id-student.js";
+import { IndicatorType as u } from "../../../../journey/use-journey/constants.js";
+import { useJourney as K } from "../../../../journey/use-journey/use-journey.js";
+import j from "../../../../ui/buttons/icon-button/icon-button.js";
+import { useUIContext as Z } from "../../../../ui/context/context.js";
+import O from "../../../../ui/layout/flex-view.js";
 import m from "../../../../ui/text/text.js";
-import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as U } from "../../../enum/circle-onboarding-steps.js";
-import { useCircleSounds as j } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { TablesCard as G } from "../../comps/tables-card/tables-card.js";
-import { GAME_LAUNCHER_ANALYTICS_EVENTS as Z } from "../../game-launcher-analytics-events.js";
-import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as q, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as z, START_ANIMATING_CLONED_ELEM as v, TABLE_CARD_INDEX as M, GO_TO_TABLE_LAUNCHER_DURATION_MS as Q, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ee, PUZZLE_CARD_INDEX as te, SHOW_INITIAL_COACHMARK_AFTER_MS as $, SHOW_INITIAL_TOOLTIP_AFTER_MS as re } from "./constants.js";
-import { Indicator as ne } from "./use-table-launcher-journey-styled.js";
-const Ce = ({
+import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as G } from "../../../enum/circle-onboarding-steps.js";
+import { useCircleSounds as q } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { TablesCard as v } from "../../comps/tables-card/tables-card.js";
+import { GAME_LAUNCHER_ANALYTICS_EVENTS as z } from "../../game-launcher-analytics-events.js";
+import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as Q, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ee, START_ANIMATING_CLONED_ELEM as M, TABLE_CARD_INDEX as $, GO_TO_TABLE_LAUNCHER_DURATION_MS as te, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as re, PUZZLE_CARD_INDEX as ne, SHOW_INITIAL_COACHMARK_AFTER_MS as x, SHOW_INITIAL_TOOLTIP_AFTER_MS as ie } from "./constants.js";
+import { Indicator as oe } from "./use-table-launcher-journey-styled.js";
+const Ie = ({
   carouselRefs: s,
-  onTableSegmentClick: O,
-  onJourneyComplete: R
+  onTableSegmentClick: N,
+  onJourneyComplete: P
 }) => {
-  const e = V.CIRCLE_TABLES_INTRO_JOURNEY, t = I(null), f = I(null), N = I(!1), { playButtonSound: P } = j(), { nextCoachmark: n, setJourney: S, addCoachmark: a } = J(), { onEvent: _ } = K(), A = p(
-    (l) => {
-      var c, i;
-      l && O(l), _(B.ONBOARDING_STEP_COMPLETED, {
-        step: U.TABLES
-      }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (i = t == null ? void 0 : t.current) == null || i.stopLabelAnimation(), R(e), n(e, !1);
+  const e = X.CIRCLE_TABLES_INTRO_JOURNEY, t = A(null), p = A(null), L = A(!1), T = A([]), { playButtonSound: S } = q(), { nextCoachmark: i, setJourney: H, addCoachmark: c } = K(), { onEvent: _ } = Z(), I = C(
+    (n) => {
+      var a, o;
+      n && N(n), _(U.ONBOARDING_STEP_COMPLETED, {
+        step: G.TABLES
+      }), (a = t == null ? void 0 : t.current) == null || a.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), P(e), i(e, !1);
     },
-    [e, n, R, O, _]
-  ), H = p(
-    (l, c) => {
-      var g, T, E;
-      if (!((g = t.current) != null && g.segmentedCardWrapperRef.current) || !((T = t.current) != null && T.labelRef.current))
+    [e, i, P, N, _]
+  ), y = C(
+    (n, a) => {
+      var g, h, E;
+      if (!((g = t.current) != null && g.segmentedCardWrapperRef.current) || !((h = t.current) != null && h.labelRef.current))
         return;
-      const i = t.current.labelRef.current.getBoundingClientRect(), o = (E = t.current) == null ? void 0 : E.segmentedCardWrapperRef.current.getBoundingClientRect();
-      a(e, {
+      const o = t.current.labelRef.current.getBoundingClientRect(), l = (E = t.current) == null ? void 0 : E.segmentedCardWrapperRef.current.getBoundingClientRect();
+      c(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
-        type: d.TOOLTIP,
+        type: u.TOOLTIP,
         elementToHighlight: /* @__PURE__ */ r(
-          G,
+          v,
           {
-            ref: f,
-            defaultTable: c,
-            label: l.label,
-            data: l.data,
-            onPress: A,
-            onGoBackFromTableLevel: A
+            ref: p,
+            defaultTable: a,
+            label: n.label,
+            data: n.data,
+            onPress: I,
+            onGoBackFromTableLevel: I
           }
         ),
         indicator: {
           position: "left",
           backgroundColor: "YELLOW_4",
           width: 236,
-          tooltipItem: /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
+          tooltipItem: /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
           tooltipXCoOrdinates: 0,
-          tooltipYCoOrdinates: i.height * 0.35
+          tooltipYCoOrdinates: o.height * 0.35
         }
-      }), a(e, {
+      }), c(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
-        type: d.NUDGE,
+        type: u.NUDGE,
         indicator: {
           nudge: "click",
           content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
-          nudgePointerX: o.width / 2 + 50,
-          nudgePointerY: o.height * 0.4
+          nudgePointerX: l.width / 2 + 50,
+          nudgePointerY: l.height * 0.4
         },
-        elementToHighlight: /* @__PURE__ */ r(L, {})
-      }), n(e, !1, q), n(e, !0, z);
-      const u = setTimeout(() => {
-        var h;
-        clearTimeout(u), (h = f.current) == null || h.startLabelAnimation("YELLOW_4");
-      }, v);
+        elementToHighlight: /* @__PURE__ */ r(R, {})
+      }), i(e, !1, Q), i(e, !0, ee);
+      const d = setTimeout(() => {
+        var f;
+        clearTimeout(d), (f = p.current) == null || f.startLabelAnimation("YELLOW_4");
+      }, M);
+      T.current.push(d);
     },
-    [a, A, e, n]
-  ), C = p(() => {
-    var i;
-    P(), (i = s.current) == null || i.goToIndex(M), n(e, !1, Q), _(B.ONBOARDING_STEP_VIEWED, {
-      step: U.TABLES
+    [c, I, e, i]
+  ), b = C(() => {
+    var o;
+    S(), (o = s.current) == null || o.goToIndex($), i(e, !1, te), _(U.ONBOARDING_STEP_VIEWED, {
+      step: G.TABLES
     });
-    const l = setTimeout(() => {
-      var o;
-      clearTimeout(l), (o = t.current) == null || o.setLabelVisiblity(!1), n(e, !0);
-    }, ee), c = setTimeout(() => {
-      var o;
-      clearTimeout(c), (o = f.current) == null || o.startLabelAnimation("YELLOW_4");
-    }, v);
-  }, [s, e, n, P, _]), x = p(
-    (l, c = !1) => {
-      var E, h, y, W, D, Y, k;
-      if (N.current)
+    const n = setTimeout(() => {
+      var l;
+      clearTimeout(n), (l = t.current) == null || l.setLabelVisiblity(!1), i(e, !0);
+    }, re);
+    T.current.push(n);
+    const a = setTimeout(() => {
+      var l;
+      clearTimeout(a), (l = p.current) == null || l.startLabelAnimation("YELLOW_4");
+    }, M);
+    T.current.push(a);
+  }, [s, e, i, S, _]), w = C(
+    (n, a = !1) => {
+      var E, f, W, D, Y, k, B;
+      if (L.current)
         return;
-      const i = (E = s.current) == null ? void 0 : E.indicatorRefs, o = (h = s.current) == null ? void 0 : h.nextBtnRef, u = i == null ? void 0 : i[M];
-      if (!((y = t.current) != null && y.segmentedCardWrapperRef.current) || !((W = t.current) != null && W.labelRef.current) || !i || !(o != null && o.current) || !u || !u.current)
+      const o = (E = s.current) == null ? void 0 : E.indicatorRefs, l = (f = s.current) == null ? void 0 : f.nextBtnRef, d = o == null ? void 0 : o[$];
+      if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((D = t.current) != null && D.labelRef.current) || !o || !(l != null && l.current) || !d || !d.current)
         return;
-      N.current = !0;
-      const g = t.current.labelRef.current.getBoundingClientRect(), T = (D = t.current) == null ? void 0 : D.segmentedCardWrapperRef.current.getBoundingClientRect();
-      S(e, []), c ? (a(e, {
-        originalElementToHighlightRef: u,
+      L.current = !0;
+      const g = t.current.labelRef.current.getBoundingClientRect(), h = (Y = t.current) == null ? void 0 : Y.segmentedCardWrapperRef.current.getBoundingClientRect();
+      H(e, []), a ? (c(e, {
+        originalElementToHighlightRef: d,
         isActive: !1,
-        type: d.TOOLTIP,
-        elementToHighlight: /* @__PURE__ */ r(ne, { $isActive: !1 }),
+        type: u.TOOLTIP,
+        elementToHighlight: /* @__PURE__ */ r(oe, { $isActive: !1 }),
         indicator: {
           position: "bottom",
           backgroundColor: "YELLOW_4",
           width: 52,
           tooltipItem: /* @__PURE__ */ r(
-            b,
+            O,
             {
               $position: "absolute",
               $flexDirection: "row",
               style: { top: 6, left: 8, cursor: "pointer" },
-              onClick: C,
+              onClick: b,
               children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "NEW" })
             }
           ),
           tooltipYCoOrdinates: 14
           // Need some offset in Y direction from top
         }
-      }), a(e, {
-        originalElementToHighlightRef: u,
+      }), c(e, {
+        originalElementToHighlightRef: d,
         isActive: !1,
-        type: d.NUDGE,
+        type: u.NUDGE,
         indicator: {
           nudge: "click",
           content: "",
           nudgePointerY: 20
         },
-        elementToHighlight: /* @__PURE__ */ r(L, {})
-      }), n(e, !1, $), n(e, !0, re)) : (a(e, {
-        originalElementToHighlightRef: (Y = s.current) == null ? void 0 : Y.nextBtnRef,
+        elementToHighlight: /* @__PURE__ */ r(R, {})
+      }), i(e, !1, x), i(e, !0, ie)) : (c(e, {
+        originalElementToHighlightRef: (k = s.current) == null ? void 0 : k.nextBtnRef,
         isActive: !1,
-        type: d.NUDGE,
+        type: u.NUDGE,
         indicator: {
           nudge: "click",
           content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
@@ -140,66 +144,68 @@ const Ce = ({
           nudgePointerY: 0
         },
         elementToHighlight: /* @__PURE__ */ r(
-          X,
+          j,
           {
             renderAs: "secondary",
-            Icon: F,
-            onClick: C,
-            analyticsLabel: Z.JOURNEY_NEXT_ACTIVITY
+            Icon: J,
+            onClick: b,
+            analyticsLabel: z.JOURNEY_NEXT_ACTIVITY
           }
         )
-      }), (k = s.current) == null || k.goToIndex(te), n(e, !1, $)), a(e, {
+      }), (B = s.current) == null || B.goToIndex(ne), i(e, !1, x)), c(e, {
         originalElementToHighlightRef: t.current.labelRef,
         isActive: !1,
-        type: d.TOOLTIP,
-        elementToHighlight: /* @__PURE__ */ r(L, {}),
+        type: u.TOOLTIP,
+        elementToHighlight: /* @__PURE__ */ r(R, {}),
         indicator: {
           position: "right",
           backgroundColor: "YELLOW_4",
           width: 264,
-          tooltipItem: /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
+          tooltipItem: /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
           tooltipXCoOrdinates: g.width + 50,
           tooltipYCoOrdinates: g.height / 2
         }
-      }), a(e, {
+      }), c(e, {
         originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
         isActive: !1,
-        type: d.NUDGE,
+        type: u.NUDGE,
         indicator: {
           nudge: "click",
           content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
-          nudgePointerX: T.width / 2 + 50,
-          nudgePointerY: T.height / 2
+          nudgePointerX: h.width / 2 + 50,
+          nudgePointerY: h.height / 2
         },
         elementToHighlight: /* @__PURE__ */ r(
-          G,
+          v,
           {
-            ref: f,
-            label: l.label,
-            data: l.data,
+            ref: p,
+            label: n.label,
+            data: n.data,
             onPress: () => {
             },
-            onPressTableSegment: (w) => H(l, w)
+            onPressTableSegment: (F) => y(n, F)
           }
         )
       });
     },
     [
-      a,
+      c,
       s,
-      C,
-      H,
+      b,
+      y,
       e,
-      n,
-      S
+      i,
+      H
     ]
   );
-  return {
+  return V(() => () => {
+    T.current.forEach((n) => clearTimeout(n)), T.current = [], L.current = !1;
+  }, [e]), {
     tableRef: t,
-    startJourney: x
+    startJourney: w
   };
 };
 export {
-  Ce as useTableLauncherJourney
+  Ie 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, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\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  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 originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n  const isJourneyInProgress = useRef(false);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const endJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\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      nextCoachmark(journeyId, false);\n    },\n    [journeyId, nextCoachmark, 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={endJourney}\n            onGoBackFromTableLevel={endJourney}\n          />\n        ),\n        indicator: {\n          position: 'left',\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: 0,\n          tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\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: (\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    [addCoachmark, endJourney, 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    const animateLabel = setTimeout(() => {\n      clearTimeout(animateLabel);\n      highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n    }, START_ANIMATING_CLONED_ELEM);\n  }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n  const startJourney = useCallback(\n    (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n      if (isJourneyInProgress.current) {\n        return;\n      }\n\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      isJourneyInProgress.current = true;\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      setJourney(journeyId, []);\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        addCoachmark(journeyId, {\n          originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          indicator: {\n            nudge: 'click',\n            content: (\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        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        addCoachmark(journeyId, {\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        addCoachmark(journeyId, {\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        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: 'right',\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 + 50,\n          tooltipYCoOrdinates: labelDims.height / 2,\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: (\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      journeyId,\n      nextCoachmark,\n      setJourney,\n    ],\n  );\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","useJourney","trackAnalytics","useUIContext","endJourney","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","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo"],"mappings":"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"}
+{"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 { 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  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 originalTableRef = useRef<ITableCardRef>(null);\n  const highlightedTableRef = useRef<ITableCardRef>(null);\n  const isJourneyInProgress = useRef(false);\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { playButtonSound } = useCircleSounds();\n  const { nextCoachmark, setJourney, addCoachmark } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const endJourney = useCallback(\n    (tableDetails?: ITableDetails) => {\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      nextCoachmark(journeyId, false);\n    },\n    [journeyId, nextCoachmark, 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={endJourney}\n            onGoBackFromTableLevel={endJourney}\n          />\n        ),\n        indicator: {\n          position: 'left',\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: 0,\n          tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\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: (\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, endJourney, 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      if (isJourneyInProgress.current) {\n        return;\n      }\n\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      isJourneyInProgress.current = true;\n\n      const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n      const tableCardDims =\n        originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n      setJourney(journeyId, []);\n\n      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        addCoachmark(journeyId, {\n          originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          indicator: {\n            nudge: 'click',\n            content: (\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        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        addCoachmark(journeyId, {\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        addCoachmark(journeyId, {\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        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: 'right',\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 + 50,\n          tooltipYCoOrdinates: labelDims.height / 2,\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: (\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      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      isJourneyInProgress.current = false;\n    };\n  }, [journeyId]);\n\n  return {\n    tableRef: originalTableRef,\n    startJourney,\n  };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","useJourney","trackAnalytics","useUIContext","endJourney","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","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/package.json

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