@cuemath/leap 2.8.61-rj-8 → 2.8.61-rj-10

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

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

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 { 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}: 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, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = 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      endJourney(journeyId);\n    },\n    [endJourney, journeyId, 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: '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, handleEndJourney, 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      console.log('startJourney', { tablesData, isTutorialOnboardingDone });\n\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        console.log('SOMETHING IS NOT AVAILABLE');\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        console.log('TURIRTUAK NOT DONE', { tablesData, 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        console.log('TUTORIAL DONE 2', { tablePaginationRef });\n        addCoachmark(journeyId, {\n          originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n          isActive: false,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: <S.Indicator id=\"kill-me\" $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        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: '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","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","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":"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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  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}: 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, endJourney } = useJourney();\n  const { onEvent: trackAnalytics } = useUIContext();\n\n  const handleEndJourney = 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      endJourney(journeyId);\n    },\n    [endJourney, journeyId, 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: '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, handleEndJourney, 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      console.log('startJourney', { tablesData, isTutorialOnboardingDone });\n\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?.current\n      ) {\n        console.log('SOMETHING IS NOT AVAILABLE');\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      // TAKE THE USER TO THE TABLE CARD\n      if (!isTutorialOnboardingDone) {\n        console.log('JOURNEY 1');\n\n        setJourney(journeyId, [\n          {\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        ]);\n        carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n        nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n      } else {\n        console.log('JOURNEY 2', Boolean(tablePaginationRef?.current));\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        // after you call carouselRefs.current.goToIndex(...)\n        requestAnimationFrame(() => {\n          // now the DOM has updated\n          if (!tablePaginationRef.current) {\n            console.warn('Still no pagination!');\n            return;\n          }\n          // safe to setJourney/addCoachmark here\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\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","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","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":"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"}

package/dist/features/journey/use-journey/journey-context-provider.js

@@ -1,14 +1,16 @@
-import { jsxs as q, jsx as j } from "react/jsx-runtime";
-import { createContext as D, useState as h, useRef as g, useCallback as m, useMemo as L, useEffect as O } from "react";
-import { Coachmark as N } from "../comps/coachmark/coachmark.js";
-import { usePostUserJourney as z, useGetUserJourney as G } from "../user-journey-api/user-journey-api.js";
-import { Overlay as M } from "./journey-styled.js";
-const S = D(null), Q = ({ children: R, appId: n, userId: u }) => {
-  const [k, x] = h([]), [c, a] = h([]), [y, $] = h(!1), J = g(-1), r = g(), d = g([]), { post: p } = z(), {
+import { jsxs as b, jsx as w } from "react/jsx-runtime";
+import { createContext as q, useState as h, useRef as g, useCallback as m, useMemo as D, useEffect as O } from "react";
+import { Coachmark as L } from "../comps/coachmark/coachmark.js";
+import { usePostUserJourney as N, useGetUserJourney as z } from "../user-journey-api/user-journey-api.js";
+import { Overlay as G } from "./journey-styled.js";
+const M = q(null), K = ({ children: R, appId: n, userId: u }) => {
+  const [k, x] = h([]), [s, a] = h([]), [y, $] = h(!1), J = g(-1), r = g(), d = g([]), { post: p } = N(), {
     data: f = null,
     get: v,
     isProcessing: T
-  } = G(), U = (n === "" || f && !T) && c.length > 0, _ = m(
+  } = z();
+  (n === "" || f && !T) && s.length > 0;
+  const _ = m(
     (e, o) => {
       if (console.log(`setJourney: ${e}`), y) {
         console.error(
@@ -19,21 +21,21 @@ const S = D(null), Q = ({ children: R, appId: n, userId: u }) => {
       $(!0), r.current = e, J.current = -1, a([...o]);
     },
     [y]
-  ), s = m(() => {
+  ), c = m(() => {
     console.log(`clearJourney: ${r.current}`), d.current.forEach((e) => {
       clearTimeout(e);
     }), d.current = [], r.current = void 0, J.current = -1, a([]), $(!1);
-  }, []), w = m(
+  }, []), A = m(
     (e) => {
       console.log(`endJOurney: ${r.current}`), x((o) => [...o, e]), p({
         app_id: n,
         user_id: u,
         journey_id: e,
         journey_status: "COMPLETED"
-      }), s();
+      }), c();
     },
-    [n, s, p, u]
-  ), A = m((e, o) => {
+    [n, c, p, u]
+  ), E = m((e, o) => {
     if (console.log({ addCoachmark: { id: e, coachmark: o } }), !r.current || e !== r.current) {
       console.error(
         r.current ? `A Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}` : "addCoachmark was called before setJourney and Journey ID is undefined"
@@ -41,7 +43,7 @@ const S = D(null), Q = ({ children: R, appId: n, userId: u }) => {
       return;
     }
     a((l) => [...l, o]);
-  }, []), E = m(
+  }, []), P = m(
     (e, o = !1, l = 0) => {
       if (console.log({ addCoachmark: { id: e, keepPrevActive: o, delayInMs: l } }), !r.current || e !== r.current) {
         console.error(
@@ -50,38 +52,38 @@ const S = D(null), Q = ({ children: R, appId: n, userId: u }) => {
         return;
       }
       l !== 0 && a((t) => t.map((i) => ({ ...i, isActive: !1 })));
-      const P = setTimeout(() => {
-        clearTimeout(P);
+      const j = setTimeout(() => {
+        clearTimeout(j);
         const t = J.current + 1;
         a((i) => {
           if (t >= i.length || i.length === 0)
-            return s(), [];
+            return c(), [];
           J.current = t;
           const C = [...i];
           return C[t].isActive = !0, t > 0 && (C[t - 1].isActive = o), C;
         });
       }, l);
-      d.current.push(P);
+      d.current.push(j);
     },
-    [s]
-  ), b = L(
+    [c]
+  ), U = D(
     () => ({
-      nextCoachmark: E,
+      nextCoachmark: P,
       setJourney: _,
-      addCoachmark: A,
-      clearJourney: s,
-      endJourney: w,
-      coachmarks: c,
+      addCoachmark: E,
+      clearJourney: c,
+      endJourney: A,
+      coachmarks: s,
       userCompletedJourneyIds: k,
       isJourneyActive: y
     }),
     [
-      E,
+      P,
       _,
+      E,
+      c,
       A,
       s,
-      w,
-      c,
       k,
       y
     ]
@@ -97,13 +99,13 @@ const S = D(null), Q = ({ children: R, appId: n, userId: u }) => {
       const e = f.map((o) => o.journey_id);
       x(e);
     }
-  }, [f]), /* @__PURE__ */ q(S.Provider, { value: b, children: [
-    U && /* @__PURE__ */ j(M, { children: c.map((e, o) => /* @__PURE__ */ j(N, { coachmark: e }, `coachmark-${o}`)) }),
+  }, [f]), /* @__PURE__ */ b(M.Provider, { value: U, children: [
+    s.length > 0 && /* @__PURE__ */ w(G, { children: s.map((e, o) => /* @__PURE__ */ w(L, { coachmark: e }, `coachmark-${o}`)) }),
     R
   ] });
 };
 export {
-  S as JourneyContext,
-  Q as JourneyProvider
+  M as JourneyContext,
+  K as JourneyProvider
 };
 //# sourceMappingURL=journey-context-provider.js.map

package/dist/features/journey/use-journey/journey-context-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport type { TJourneyId } from '../journey-id/journey-id-types';\nimport type {\n  ICoachmarkProps,\n  IJourneyContext,\n  IJourneyProviderProps,\n} from './journey-context-types';\nimport type { FC } from 'react';\n\nimport { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport { useGetUserJourney, usePostUserJourney } from '../user-journey-api/user-journey-api';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<IJourneyProviderProps> = ({ children, appId, userId }) => {\n  const [userCompletedJourneyIds, setUserCompletedJourneyIds] = useState<TJourneyId[]>([]);\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const [isJourneyActive, setIsJourneyActive] = useState(false);\n  const currentIndex = useRef(-1);\n  const currentJourneyId = useRef<TJourneyId | undefined>();\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { post: postJourneyCompletion } = usePostUserJourney();\n  const {\n    data: userCompletedJourneys = null,\n    get: getJourneyProgress,\n    isProcessing,\n  } = useGetUserJourney();\n\n  const showCoachmarks =\n    appId === '' // Otherwise coachmark stories wont work\n      ? coachmarkList.length > 0\n      : userCompletedJourneys && !isProcessing && coachmarkList.length > 0;\n\n  const setJourney = useCallback(\n    (id: TJourneyId, coachmarks: ICoachmarkProps[]) => {\n      console.log(`setJourney: ${id}`);\n      if (isJourneyActive) {\n        console.error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n      setIsJourneyActive(true);\n      currentJourneyId.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList([...coachmarks]);\n    },\n    [isJourneyActive],\n  );\n\n  const clearJourney = useCallback(() => {\n    console.log(`clearJourney: ${currentJourneyId.current}`);\n    // Clear all timers\n    timerRefs.current.forEach(timer => {\n      clearTimeout(timer);\n    });\n    timerRefs.current = [];\n    currentJourneyId.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n    setIsJourneyActive(false);\n  }, []);\n\n  const endJourney = useCallback(\n    (journeyId: TJourneyId) => {\n      console.log(`endJOurney: ${currentJourneyId.current}`);\n      setUserCompletedJourneyIds(prev => [...prev, journeyId]);\n      postJourneyCompletion({\n        app_id: appId,\n        user_id: userId,\n        journey_id: journeyId,\n        journey_status: 'COMPLETED',\n      });\n      clearJourney();\n    },\n    [appId, clearJourney, postJourneyCompletion, userId],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: ICoachmarkProps) => {\n    console.log({ addCoachmark: { id, coachmark } });\n    if (!currentJourneyId.current || id !== currentJourneyId.current) {\n      console.error(\n        currentJourneyId.current\n          ? `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`\n          : `addCoachmark was called before setJourney and Journey ID is undefined`,\n      );\n\n      return;\n    }\n\n    setCoachmarkList(prev => [...prev, coachmark]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (id: TJourneyId, keepPrevActive: boolean = false, delayInMs: number = 0) => {\n      console.log({ addCoachmark: { id, keepPrevActive, delayInMs } });\n      if (!currentJourneyId.current || id !== currentJourneyId.current) {\n        console.error(\n          currentJourneyId.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n\n      if (delayInMs !== 0) {\n        // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n        setCoachmarkList(prevList => {\n          return prevList.map((item: ICoachmarkProps) => {\n            return { ...item, isActive: false };\n          });\n        });\n      }\n\n      const timer = setTimeout(() => {\n        clearTimeout(timer);\n        const currIndex = currentIndex.current + 1;\n\n        setCoachmarkList(prevList => {\n          // Finish onboarding\n          if (currIndex >= prevList.length || prevList.length === 0) {\n            clearJourney();\n\n            return [];\n          }\n\n          currentIndex.current = currIndex;\n          const updatedCoachmarkList = [...prevList];\n\n          (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n          if (currIndex > 0) {\n            (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n          }\n\n          return updatedCoachmarkList;\n        });\n      }, delayInMs);\n\n      timerRefs.current.push(timer);\n    },\n    [clearJourney],\n  );\n\n  const memoizedContextValue: IJourneyContext = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarks: coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    }),\n    [\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    ],\n  );\n\n  // Get the initial state of incompleteJourneys\n  useEffect(() => {\n    if (appId && userId) {\n      getJourneyProgress(userId, {\n        app_id: appId,\n        user_id: userId,\n        journey_status: 'COMPLETED',\n      });\n    }\n  }, [appId, getJourneyProgress, userId]);\n\n  // Set the data to context state initially\n  useEffect(() => {\n    if (userCompletedJourneys) {\n      const completedUserJourneysIds = userCompletedJourneys.map(journey => journey.journey_id);\n\n      setUserCompletedJourneyIds(completedUserJourneysIds);\n    }\n  }, [userCompletedJourneys]);\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {showCoachmarks && (\n        <S.Overlay>\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark key={`coachmark-${index}`} coachmark={coachmark} />\n          ))}\n        </S.Overlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","appId","userId","userCompletedJourneyIds","setUserCompletedJourneyIds","useState","coachmarkList","setCoachmarkList","isJourneyActive","setIsJourneyActive","currentIndex","useRef","currentJourneyId","timerRefs","postJourneyCompletion","usePostUserJourney","userCompletedJourneys","getJourneyProgress","isProcessing","useGetUserJourney","showCoachmarks","setJourney","useCallback","id","coachmarks","clearJourney","timer","endJourney","journeyId","prev","addCoachmark","coachmark","nextCoachmark","keepPrevActive","delayInMs","prevList","item","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","useEffect","completedUserJourneysIds","journey","jsxs","S.Overlay","index","jsx","Coachmark"],"mappings":"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"}
+{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport type { TJourneyId } from '../journey-id/journey-id-types';\nimport type {\n  ICoachmarkProps,\n  IJourneyContext,\n  IJourneyProviderProps,\n} from './journey-context-types';\nimport type { FC } from 'react';\n\nimport { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport { useGetUserJourney, usePostUserJourney } from '../user-journey-api/user-journey-api';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<IJourneyProviderProps> = ({ children, appId, userId }) => {\n  const [userCompletedJourneyIds, setUserCompletedJourneyIds] = useState<TJourneyId[]>([]);\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const [isJourneyActive, setIsJourneyActive] = useState(false);\n  const currentIndex = useRef(-1);\n  const currentJourneyId = useRef<TJourneyId | undefined>();\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { post: postJourneyCompletion } = usePostUserJourney();\n  const {\n    data: userCompletedJourneys = null,\n    get: getJourneyProgress,\n    isProcessing,\n  } = useGetUserJourney();\n\n  const showCoachmarks =\n    appId === '' // Otherwise coachmark stories wont work\n      ? coachmarkList.length > 0\n      : userCompletedJourneys && !isProcessing && coachmarkList.length > 0;\n\n  const setJourney = useCallback(\n    (id: TJourneyId, coachmarks: ICoachmarkProps[]) => {\n      console.log(`setJourney: ${id}`);\n      if (isJourneyActive) {\n        console.error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n      setIsJourneyActive(true);\n      currentJourneyId.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList([...coachmarks]);\n    },\n    [isJourneyActive],\n  );\n\n  const clearJourney = useCallback(() => {\n    console.log(`clearJourney: ${currentJourneyId.current}`);\n    // Clear all timers\n    timerRefs.current.forEach(timer => {\n      clearTimeout(timer);\n    });\n    timerRefs.current = [];\n    currentJourneyId.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n    setIsJourneyActive(false);\n  }, []);\n\n  const endJourney = useCallback(\n    (journeyId: TJourneyId) => {\n      console.log(`endJOurney: ${currentJourneyId.current}`);\n      setUserCompletedJourneyIds(prev => [...prev, journeyId]);\n      postJourneyCompletion({\n        app_id: appId,\n        user_id: userId,\n        journey_id: journeyId,\n        journey_status: 'COMPLETED',\n      });\n      clearJourney();\n    },\n    [appId, clearJourney, postJourneyCompletion, userId],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: ICoachmarkProps) => {\n    console.log({ addCoachmark: { id, coachmark } });\n    if (!currentJourneyId.current || id !== currentJourneyId.current) {\n      console.error(\n        currentJourneyId.current\n          ? `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`\n          : `addCoachmark was called before setJourney and Journey ID is undefined`,\n      );\n\n      return;\n    }\n\n    setCoachmarkList(prev => [...prev, coachmark]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (id: TJourneyId, keepPrevActive: boolean = false, delayInMs: number = 0) => {\n      console.log({ addCoachmark: { id, keepPrevActive, delayInMs } });\n      if (!currentJourneyId.current || id !== currentJourneyId.current) {\n        console.error(\n          currentJourneyId.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n\n      if (delayInMs !== 0) {\n        // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n        setCoachmarkList(prevList => {\n          return prevList.map((item: ICoachmarkProps) => {\n            return { ...item, isActive: false };\n          });\n        });\n      }\n\n      const timer = setTimeout(() => {\n        clearTimeout(timer);\n        const currIndex = currentIndex.current + 1;\n\n        setCoachmarkList(prevList => {\n          // Finish onboarding\n          if (currIndex >= prevList.length || prevList.length === 0) {\n            clearJourney();\n\n            return [];\n          }\n\n          currentIndex.current = currIndex;\n          const updatedCoachmarkList = [...prevList];\n\n          (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n          if (currIndex > 0) {\n            (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n          }\n\n          return updatedCoachmarkList;\n        });\n      }, delayInMs);\n\n      timerRefs.current.push(timer);\n    },\n    [clearJourney],\n  );\n\n  const memoizedContextValue: IJourneyContext = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarks: coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    }),\n    [\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    ],\n  );\n\n  // Get the initial state of incompleteJourneys\n  useEffect(() => {\n    if (appId && userId) {\n      getJourneyProgress(userId, {\n        app_id: appId,\n        user_id: userId,\n        journey_status: 'COMPLETED',\n      });\n    }\n  }, [appId, getJourneyProgress, userId]);\n\n  // Set the data to context state initially\n  useEffect(() => {\n    if (userCompletedJourneys) {\n      const completedUserJourneysIds = userCompletedJourneys.map(journey => journey.journey_id);\n\n      setUserCompletedJourneyIds(completedUserJourneysIds);\n    }\n  }, [userCompletedJourneys]);\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {coachmarkList.length > 0 && (\n        <S.Overlay>\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark key={`coachmark-${index}`} coachmark={coachmark} />\n          ))}\n        </S.Overlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","appId","userId","userCompletedJourneyIds","setUserCompletedJourneyIds","useState","coachmarkList","setCoachmarkList","isJourneyActive","setIsJourneyActive","currentIndex","useRef","currentJourneyId","timerRefs","postJourneyCompletion","usePostUserJourney","userCompletedJourneys","getJourneyProgress","isProcessing","useGetUserJourney","setJourney","useCallback","id","coachmarks","clearJourney","timer","endJourney","journeyId","prev","addCoachmark","coachmark","nextCoachmark","keepPrevActive","delayInMs","prevList","item","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","useEffect","completedUserJourneysIds","journey","jsxs","jsx","S.Overlay","index","Coachmark"],"mappings":"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"}

package/package.json

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