@cuemath/leap 2.8.21-rj-5 → 2.8.21-rj-7

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

@@ -1,149 +1,137 @@
-import { jsx as e, Fragment as E, jsxs as R } from "react/jsx-runtime";
-import { useRef as g, useCallback as A, useMemo as j } from "react";
-import Z from "../../../../assets/line-icons/icons/next.js";
-import { IndicatorType as d } from "../../../journey/use-journey/constants.js";
-import { useJourney as z } from "../../../journey/use-journey/use-journey.js";
-import q from "../../../ui/buttons/icon-button/icon-button.js";
-import L from "../../../ui/layout/flex-view.js";
-import r from "../../../ui/text/text.js";
-import { useCircleSounds as ee } from "../../hooks/use-circle-sounds/use-circle-sounds.js";
-import { SegmentedGameCard as te } from "../comps/segmented-game-card/segmented-game-card.js";
-import { GO_TO_NEXT_SLIDE_AFTER_MS as re, SHOW_LABEL_HIGHLIGHT_AFTER_MS as ne, SHOW_NUDGE_AFTER_MS as ie } from "./constants.js";
-import { ProjectType as oe } from "../../games/web-view/enums/project-type-enum.js";
-const be = ({
-  onSegmentClick: C,
+import { jsx as e, Fragment as R } from "react/jsx-runtime";
+import { useRef as u, useCallback as b, useMemo as Q } from "react";
+import V from "../../../../assets/line-icons/icons/next.js";
+import { IndicatorType as s } 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 C from "../../../ui/layout/flex-view.js";
+import d from "../../../ui/text/text.js";
+import { useCircleSounds as z } from "../../hooks/use-circle-sounds/use-circle-sounds.js";
+import { SegmentedGameCard as ee } from "../comps/segmented-game-card/segmented-game-card.js";
+import { GO_TO_NEXT_SLIDE_AFTER_MS as te, SHOW_LABEL_HIGHLIGHT_AFTER_MS as re, SHOW_NUDGE_AFTER_MS as ne } from "./constants.js";
+import { ProjectType as ie } from "../../games/web-view/enums/project-type-enum.js";
+const Te = ({
+  onSegmentClick: L,
   setCarouselIndex: H,
-  onJourneyComplete: w
+  onJourneyComplete: A
 }) => {
-  const a = g(null), o = g(null), t = g(null), s = g(null), b = g(!1), { playButtonSound: y } = ee(), { nextCoachmark: l, setJourney: O } = z(), h = A(
-    (i, c, n, m = !1) => {
-      m || (y(), H((T) => T + 1), l(n, !1, re));
+  const c = u(null), i = u(null), t = u(null), a = u(null), E = u(!1), { playButtonSound: O } = z(), { nextCoachmark: o, setJourney: y } = j(), h = b(
+    (n, l, r, m = !1) => {
+      m || (O(), H((T) => T + 1), o(r, !1, te));
       const f = setTimeout(() => {
-        clearTimeout(f), i.startLabelAnimation(c);
-      }, ne), p = setTimeout(() => {
-        clearTimeout(p), l(n, !0);
-      }, ie);
+        clearTimeout(f), n.startLabelAnimation(l);
+      }, re), p = setTimeout(() => {
+        clearTimeout(p), o(r, !0);
+      }, ne);
     },
-    [l, y, H]
-  ), P = A(
-    (i, c) => {
-      C(i, oe.PUZZLE), l(c), w(c);
+    [o, O, H]
+  ), P = b(
+    (n, l) => {
+      L(n, ie.PUZZLE), o(l), A(l);
     },
-    [l, w, C]
-  ), _ = A(
-    (i, c, n) => {
-      var $, G, v, S, B, x, N, I, U, W, X, M, Y, D, F, J, V;
-      if (b.current || !(($ = a == null ? void 0 : a.current) != null && $.nextBtnRef.current) || !((G = t == null ? void 0 : t.current) != null && G.segmentedCardWrapperRef.current) || !((v = o == null ? void 0 : o.current) != null && v.labelRef.current) || !((S = t == null ? void 0 : t.current) != null && S.labelRef.current) || !i)
+    [o, A, L]
+  ), _ = b(
+    (n, l, r) => {
+      var k, v, G, S, B, N, x, I, U, $, W, X, Y, D, F, J, M;
+      if (E.current || !((k = c == null ? void 0 : c.current) != null && k.nextBtnRef.current) || !((v = t == null ? void 0 : t.current) != null && v.segmentedCardWrapperRef.current) || !((G = i == null ? void 0 : i.current) != null && G.labelRef.current) || !((S = t == null ? void 0 : t.current) != null && S.labelRef.current) || !n)
         return;
-      b.current = !0;
-      const m = ((N = (x = (B = s.current) == null ? void 0 : B.labelRef) == null ? void 0 : x.current) == null ? void 0 : N.getBoundingClientRect()) || {
+      E.current = !0;
+      const m = ((x = (N = (B = a.current) == null ? void 0 : B.labelRef) == null ? void 0 : N.current) == null ? void 0 : x.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, f = ((W = (U = (I = o.current) == null ? void 0 : I.labelRef) == null ? void 0 : U.current) == null ? void 0 : W.getBoundingClientRect()) || {
+      }, f = (($ = (U = (I = i.current) == null ? void 0 : I.labelRef) == null ? void 0 : U.current) == null ? void 0 : $.getBoundingClientRect()) || {
         height: 0,
         width: 0
-      }, p = ((Y = (M = (X = t.current) == null ? void 0 : X.labelRef) == null ? void 0 : M.current) == null ? void 0 : Y.getBoundingClientRect()) || {
+      }, p = ((Y = (X = (W = t.current) == null ? void 0 : W.labelRef) == null ? void 0 : X.current) == null ? void 0 : Y.getBoundingClientRect()) || {
         height: 0,
         width: 0
       }, T = ((J = (F = (D = t.current) == null ? void 0 : D.segmentedCardWrapperRef) == null ? void 0 : F.current) == null ? void 0 : J.getBoundingClientRect()) || {
         height: 0,
         width: 0
       };
-      let k = [];
-      c && s.current && (k = [
+      let w = [];
+      l && a.current && (w = [
         {
-          originalElementToHighlightRef: s.current.labelRef,
+          originalElementToHighlightRef: a.current.labelRef,
           isActive: !1,
-          type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ e(E, {}),
+          type: s.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ e(R, {}),
           indicator: {
             position: "right",
             backgroundColor: "BLUE_4",
-            width: 244,
-            tooltipItem: /* @__PURE__ */ R(L, { children: [
-              /* @__PURE__ */ e(r, { $renderAs: "ab2-bold", children: "Practice Mental Math" }),
-              /* @__PURE__ */ e(r, { $renderAs: "ub3", children: "Get faster & stay ahead in school," }),
-              /* @__PURE__ */ e(r, { $renderAs: "ub3", children: "with 3 new skills everyday." })
-            ] }),
+            width: 264,
+            tooltipItem: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Get faster & stay ahead in school. Practice 3 new skills everyday." }) }),
             tooltipXCoOrdinates: m.width,
             tooltipYCoOrdinates: m.height / 2
           }
         },
         {
-          originalElementToHighlightRef: (V = a.current) == null ? void 0 : V.nextBtnRef,
+          originalElementToHighlightRef: (M = c.current) == null ? void 0 : M.nextBtnRef,
           isActive: !1,
-          type: d.NUDGE,
+          type: s.NUDGE,
           elementToHighlight: /* @__PURE__ */ e(
-            q,
+            Z,
             {
               renderAs: "secondary",
-              Icon: Z,
-              onClick: () => h(o.current, "ORANGE_4", n),
+              Icon: V,
+              onClick: () => h(i.current, "ORANGE_4", r),
               analyticsLabel: "HELLO "
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ e(r, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
         }
       ]);
-      const K = [
+      const q = [
         {
-          originalElementToHighlightRef: o.current.labelRef,
+          originalElementToHighlightRef: i.current.labelRef,
           isActive: !1,
-          type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ e(E, {}),
+          type: s.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ e(R, {}),
           indicator: {
             position: "right",
             backgroundColor: "ORANGE_4",
-            width: 244,
-            tooltipItem: /* @__PURE__ */ R(L, { children: [
-              /* @__PURE__ */ e(r, { $renderAs: "ab2-bold", children: "Play Strategy Games" }),
-              /* @__PURE__ */ e(r, { $renderAs: "ub3", children: "Train to think deeper & plan ahead," }),
-              /* @__PURE__ */ e(r, { $renderAs: "ub3", children: "with 3 new games everyday." })
-            ] }),
+            width: 264,
+            tooltipItem: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Train to think deeper & plan ahead. Play 3 new games everyday." }) }),
             tooltipXCoOrdinates: f.width,
             tooltipYCoOrdinates: f.height / 2
           }
         },
         {
-          originalElementToHighlightRef: a.current.nextBtnRef,
+          originalElementToHighlightRef: c.current.nextBtnRef,
           isActive: !1,
-          type: d.NUDGE,
+          type: s.NUDGE,
           elementToHighlight: /* @__PURE__ */ e(
-            q,
+            Z,
             {
               renderAs: "secondary",
-              Icon: Z,
-              onClick: () => h(t.current, "PURPLE_4", n),
+              Icon: V,
+              onClick: () => h(t.current, "PURPLE_4", r),
               analyticsLabel: "HELLO "
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ e(r, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
+            content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
             nudgePointerX: 0,
             nudgePointerY: 0
           }
         }
-      ], Q = [
+      ], K = [
         {
           originalElementToHighlightRef: t.current.labelRef,
           isActive: !1,
-          type: d.TOOLTIP,
-          elementToHighlight: /* @__PURE__ */ e(E, {}),
+          type: s.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ e(R, {}),
           indicator: {
             position: "right",
             backgroundColor: "PURPLE_4",
-            width: 244,
-            tooltipItem: /* @__PURE__ */ R(L, { children: [
-              /* @__PURE__ */ e(r, { $renderAs: "ab2-bold", children: "Solve Logic Puzzles" }),
-              /* @__PURE__ */ e(r, { $renderAs: "ub3", children: "Think in new ways & stay sharp," }),
-              /* @__PURE__ */ e(r, { $renderAs: "ub3", children: "with 3 new puzzles everyday." })
-            ] }),
+            width: 264,
+            tooltipItem: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(d, { $renderAs: "ab2-bold", children: "Think in new ways & stay sharp. Solve 3 new puzzles everyday." }) }),
             tooltipXCoOrdinates: p.width,
             tooltipYCoOrdinates: p.height / 2
           }
@@ -151,48 +139,48 @@ const be = ({
         {
           originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
           isActive: !1,
-          type: d.NUDGE,
+          type: s.NUDGE,
           elementToHighlight: /* @__PURE__ */ e(
-            te,
+            ee,
             {
               label: "",
-              value: i.data.filter((u) => u.solved).length,
-              maxValue: i.data.length,
-              initialValue: i.initialProgressValue,
-              data: i.data.map((u) => ({
-                card: u.cardLottie,
+              value: n.data.filter((g) => g.solved).length,
+              maxValue: n.data.length,
+              initialValue: n.initialProgressValue,
+              data: n.data.map((g) => ({
+                card: g.cardLottie,
                 name: "",
                 // We dont want to show the name of the puzzle in onboarding
-                isCompleted: u.solved,
-                onPress: () => P(u, n)
+                isCompleted: g.solved,
+                onPress: () => P(g, r)
               }))
             }
           ),
           indicator: {
             nudge: "click",
-            content: /* @__PURE__ */ e(r, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
+            content: /* @__PURE__ */ e(d, { $renderAs: "ab1", $color: "WHITE", children: "Click to solve a puzzle" }),
             nudgePointerX: T.width * 0.6,
             nudgePointerY: T.height * 0.4
           }
         }
       ];
-      O(n, [...k, ...K, ...Q]), l(n, !0), c && s.current ? h(s.current, "BLUE_4", n, !0) : h(o.current, "ORANGE_4", n, !0);
+      y(r, [...w, ...q, ...K]), o(r, !0), l && a.current ? h(a.current, "BLUE_4", r, !0) : h(i.current, "ORANGE_4", r, !0);
     },
-    [P, h, l, O]
+    [P, h, o, y]
   );
-  return j(
+  return Q(
     () => ({
-      gameRefs: o,
+      gameRefs: i,
       puzzleRefs: t,
-      lessonRefs: s,
-      carouselNextBtnRef: a,
-      isJourneyInProgress: b,
+      lessonRefs: a,
+      carouselNextBtnRef: c,
+      isJourneyInProgress: E,
       startJourney: _
     }),
     [_]
   );
 };
 export {
-  be as useGameLauncherJourney
+  Te as useGameLauncherJourney
 };
 //# sourceMappingURL=use-game-launcher-journey.js.map

package/dist/features/circle-games/game-launcher/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/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 { ICarouselRefs } from '../comps/carousel/carousel-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 NextIcon from '../../../../assets/line-icons/icons/next';\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 FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\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 {\n  GO_TO_NEXT_SLIDE_AFTER_MS,\n  SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n  SHOW_NUDGE_AFTER_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n  onSegmentClick,\n  setCarouselIndex,\n  onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n  const carouselNextBtnRef = useRef<ICarouselRefs>(null);\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\n  const goToNextCard = useCallback(\n    (\n      refOfNextSlide: ISegmentedGameCardRefs,\n      color: TColorNames,\n      journeyId: TJourneyId,\n      isFirstSlide: boolean = false,\n    ) => {\n      if (!isFirstSlide) {\n        playButtonSound();\n        setCarouselIndex((prev: number) => prev + 1);\n        nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n      }\n\n      const animateLabelTimer = setTimeout(() => {\n        clearTimeout(animateLabelTimer);\n        refOfNextSlide.startLabelAnimation(color);\n      }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n      const showNudgeTimer = setTimeout(() => {\n        clearTimeout(showNudgeTimer);\n        nextCoachmark(journeyId, true);\n      }, SHOW_NUDGE_AFTER_MS);\n    },\n    [nextCoachmark, playButtonSound, setCarouselIndex],\n  );\n\n  const endJourney = useCallback(\n    (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n      onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n      nextCoachmark(journeyId);\n      onJourneyComplete(journeyId);\n    },\n    [nextCoachmark, onJourneyComplete, onSegmentClick],\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        !carouselNextBtnRef?.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: 244,\n              tooltipItem: (\n                <FlexView>\n                  <Text $renderAs=\"ab2-bold\">Practice Mental Math</Text>\n                  <Text $renderAs=\"ub3\">Get faster & stay ahead in school,</Text>\n                  <Text $renderAs=\"ub3\">with 3 new skills everyday.</Text>\n                </FlexView>\n              ),\n              tooltipXCoOrdinates: lessonLabelDims.width,\n              tooltipYCoOrdinates: lessonLabelDims.height / 2,\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: carouselNextBtnRef.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={NextIcon}\n                onClick={() =>\n                  goToNextCard(gameRefs.current as ISegmentedGameCardRefs, 'ORANGE_4', journeyId)\n                }\n                analyticsLabel=\"HELLO \"\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: 244,\n            tooltipItem: (\n              <FlexView>\n                <Text $renderAs=\"ab2-bold\">Play Strategy Games</Text>\n                <Text $renderAs=\"ub3\">Train to think deeper & plan ahead,</Text>\n                <Text $renderAs=\"ub3\">with 3 new games everyday.</Text>\n              </FlexView>\n            ),\n            tooltipXCoOrdinates: gameLabelDims.width,\n            tooltipYCoOrdinates: gameLabelDims.height / 2,\n          } as IArrowTooltipProps,\n        },\n        {\n          originalElementToHighlightRef: carouselNextBtnRef.current.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          elementToHighlight: (\n            <IconButton\n              renderAs=\"secondary\"\n              Icon={NextIcon}\n              onClick={() =>\n                goToNextCard(puzzleRefs.current as ISegmentedGameCardRefs, 'PURPLE_4', journeyId)\n              }\n              analyticsLabel=\"HELLO \"\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: 244,\n            tooltipItem: (\n              <FlexView>\n                <Text $renderAs=\"ab2-bold\">Solve Logic Puzzles</Text>\n                <Text $renderAs=\"ub3\">Think in new ways & stay sharp,</Text>\n                <Text $renderAs=\"ub3\">with 3 new puzzles everyday.</Text>\n              </FlexView>\n            ),\n            tooltipXCoOrdinates: puzzleLabelDims.width,\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      nextCoachmark(journeyId, true);\n      if (isLessonAvailable && lessonRefs.current) {\n        goToNextCard(lessonRefs.current, 'BLUE_4', journeyId, true);\n      } else {\n        goToNextCard(gameRefs.current, 'ORANGE_4', journeyId, true);\n      }\n    },\n    [endJourney, goToNextCard, nextCoachmark, setJourney],\n  );\n\n  return useMemo(\n    () => ({\n      gameRefs,\n      puzzleRefs,\n      lessonRefs,\n      carouselNextBtnRef,\n      isJourneyInProgress,\n      startJourney,\n    }),\n    [startJourney],\n  );\n};\n"],"names":["useGameLauncherJourney","onSegmentClick","setCarouselIndex","onJourneyComplete","carouselNextBtnRef","useRef","gameRefs","puzzleRefs","lessonRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","goToNextCard","useCallback","refOfNextSlide","color","journeyId","isFirstSlide","prev","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","showNudgeTimer","SHOW_NUDGE_AFTER_MS","endJourney","puzzlesData","ProjectType","startJourney","isLessonAvailable","_a","_b","_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","NextIcon","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","useMemo"],"mappings":"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"}
+{"version":3,"file":"use-game-launcher-journey.js","sources":["../../../../../src/features/circle-games/game-launcher/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 { ICarouselRefs } from '../comps/carousel/carousel-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 NextIcon from '../../../../assets/line-icons/icons/next';\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 FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\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 {\n  GO_TO_NEXT_SLIDE_AFTER_MS,\n  SHOW_LABEL_HIGHLIGHT_AFTER_MS,\n  SHOW_NUDGE_AFTER_MS,\n} from './constants';\n\nexport const useGameLauncherJourney = ({\n  onSegmentClick,\n  setCarouselIndex,\n  onJourneyComplete,\n}: IUseGameLauncherJourneyProps) => {\n  const carouselNextBtnRef = useRef<ICarouselRefs>(null);\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\n  const goToNextCard = useCallback(\n    (\n      refOfNextSlide: ISegmentedGameCardRefs,\n      color: TColorNames,\n      journeyId: TJourneyId,\n      isFirstSlide: boolean = false,\n    ) => {\n      if (!isFirstSlide) {\n        playButtonSound();\n        setCarouselIndex((prev: number) => prev + 1);\n        nextCoachmark(journeyId, false, GO_TO_NEXT_SLIDE_AFTER_MS);\n      }\n\n      const animateLabelTimer = setTimeout(() => {\n        clearTimeout(animateLabelTimer);\n        refOfNextSlide.startLabelAnimation(color);\n      }, SHOW_LABEL_HIGHLIGHT_AFTER_MS);\n\n      const showNudgeTimer = setTimeout(() => {\n        clearTimeout(showNudgeTimer);\n        nextCoachmark(journeyId, true);\n      }, SHOW_NUDGE_AFTER_MS);\n    },\n    [nextCoachmark, playButtonSound, setCarouselIndex],\n  );\n\n  const endJourney = useCallback(\n    (puzzlesData: Puzzle, journeyId: TJourneyId) => {\n      onSegmentClick(puzzlesData, ProjectType.PUZZLE);\n      nextCoachmark(journeyId);\n      onJourneyComplete(journeyId);\n    },\n    [nextCoachmark, onJourneyComplete, onSegmentClick],\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        !carouselNextBtnRef?.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,\n              tooltipYCoOrdinates: lessonLabelDims.height / 2,\n            } as IArrowTooltipProps,\n          },\n          {\n            originalElementToHighlightRef: carouselNextBtnRef.current?.nextBtnRef,\n            isActive: false,\n            type: IndicatorType.NUDGE,\n            elementToHighlight: (\n              <IconButton\n                renderAs=\"secondary\"\n                Icon={NextIcon}\n                onClick={() =>\n                  goToNextCard(gameRefs.current as ISegmentedGameCardRefs, 'ORANGE_4', journeyId)\n                }\n                analyticsLabel=\"HELLO \"\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,\n            tooltipYCoOrdinates: gameLabelDims.height / 2,\n          } as IArrowTooltipProps,\n        },\n        {\n          originalElementToHighlightRef: carouselNextBtnRef.current.nextBtnRef,\n          isActive: false,\n          type: IndicatorType.NUDGE,\n          elementToHighlight: (\n            <IconButton\n              renderAs=\"secondary\"\n              Icon={NextIcon}\n              onClick={() =>\n                goToNextCard(puzzleRefs.current as ISegmentedGameCardRefs, 'PURPLE_4', journeyId)\n              }\n              analyticsLabel=\"HELLO \"\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,\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      nextCoachmark(journeyId, true);\n      if (isLessonAvailable && lessonRefs.current) {\n        goToNextCard(lessonRefs.current, 'BLUE_4', journeyId, true);\n      } else {\n        goToNextCard(gameRefs.current, 'ORANGE_4', journeyId, true);\n      }\n    },\n    [endJourney, goToNextCard, nextCoachmark, setJourney],\n  );\n\n  return useMemo(\n    () => ({\n      gameRefs,\n      puzzleRefs,\n      lessonRefs,\n      carouselNextBtnRef,\n      isJourneyInProgress,\n      startJourney,\n    }),\n    [startJourney],\n  );\n};\n"],"names":["useGameLauncherJourney","onSegmentClick","setCarouselIndex","onJourneyComplete","carouselNextBtnRef","useRef","gameRefs","puzzleRefs","lessonRefs","isJourneyInProgress","playButtonSound","useCircleSounds","nextCoachmark","setJourney","useJourney","goToNextCard","useCallback","refOfNextSlide","color","journeyId","isFirstSlide","prev","GO_TO_NEXT_SLIDE_AFTER_MS","animateLabelTimer","SHOW_LABEL_HIGHLIGHT_AFTER_MS","showNudgeTimer","SHOW_NUDGE_AFTER_MS","endJourney","puzzlesData","ProjectType","startJourney","isLessonAvailable","_a","_b","_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","NextIcon","gameSteps","puzzleSteps","SegmentedGameCard","puzzle","useMemo"],"mappings":"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"}

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

@@ -1,59 +1,62 @@
-import { jsxs as w, jsx as d } from "react/jsx-runtime";
-import { createContext as x, useState as v, useRef as J, useCallback as m, useMemo as $ } from "react";
-import { Coachmark as p } from "../comps/coachmark/coachmark.js";
-import { BlurOverlay as g } from "./journey-styled.js";
-const A = x(null), N = ({ children: f }) => {
-  const [o, c] = v([]), a = J(-1), r = J(), l = m(
+import { jsxs as v, jsx as J } from "react/jsx-runtime";
+import { createContext as x, useState as $, useRef as f, useCallback as i, useMemo as p } from "react";
+import { Coachmark as g } from "../comps/coachmark/coachmark.js";
+import { BlurOverlay as A } from "./journey-styled.js";
+const R = x(null), j = ({ children: C }) => {
+  const [o, u] = $([]), c = f(-1), r = f(), l = i(
     (e, t) => {
       if (o.length > 0)
         throw new Error(
           `setJourney: Other Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}`
         );
-      r.current = e, a.current = -1, c([...t]);
+      r.current = e, c.current = -1, u([...t]);
     },
     [o.length]
-  ), h = m((e, t) => {
+  ), h = i(() => {
+    r.current = void 0, c.current = -1, u([]);
+  }, []), y = i((e, t) => {
     if (!r.current || e !== r.current)
       throw new Error(
         r.current ? "addCoachmark was called before setJourney" : `A Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}`
       );
-    c((s) => [...s, t]);
-  }, []), y = m(
+    u((s) => [...s, t]);
+  }, []), d = i(
     (e, t = !1, s = 0) => {
       if (!r.current || e !== r.current)
         throw new Error(
           r.current ? "nextCoachmark was called before setJourney" : `A Journey is already active, Current Journey: ${r.current}, New Journey Request: ${e}`
         );
-      s !== 0 && c((n) => n.map((u) => ({ ...u, isActive: !1 })));
-      const k = setTimeout(() => {
-        clearTimeout(k);
-        const n = a.current + 1;
-        c((u) => {
-          if (n >= u.length || u.length === 0)
-            return r.current = void 0, a.current = -1, [];
-          a.current = n;
-          const i = [...u];
-          return i[n].isActive = !0, n > 0 && (i[n - 1].isActive = t), i;
+      s !== 0 && u((n) => n.map((a) => ({ ...a, isActive: !1 })));
+      const w = setTimeout(() => {
+        clearTimeout(w);
+        const n = c.current + 1;
+        u((a) => {
+          if (n >= a.length || a.length === 0)
+            return r.current = void 0, c.current = -1, [];
+          c.current = n;
+          const m = [...a];
+          return m[n].isActive = !0, n > 0 && (m[n - 1].isActive = t), m;
         });
       }, s);
     },
     []
-  ), C = $(
+  ), k = p(
     () => ({
-      nextCoachmark: y,
+      nextCoachmark: d,
       setJourney: l,
-      addCoachmark: h,
+      addCoachmark: y,
+      clearJourney: h,
       coachmarks: o
     }),
-    [y, l, h, o]
+    [d, l, y, h, o]
   );
-  return /* @__PURE__ */ w(A.Provider, { value: C, children: [
-    o.length > 0 && /* @__PURE__ */ d(g, { children: o.map((e, t) => /* @__PURE__ */ d(p, { coachmark: e }, `coachmark-${t}`)) }),
-    f
+  return /* @__PURE__ */ v(R.Provider, { value: k, children: [
+    o.length > 0 && /* @__PURE__ */ J(A, { children: o.map((e, t) => /* @__PURE__ */ J(g, { coachmark: e }, `coachmark-${t}`)) }),
+    C
   ] });
 };
 export {
-  A as JourneyContext,
-  N as JourneyProvider
+  R as JourneyContext,
+  j 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":["import type { TJourneyId } from '../journey-id/journey-id-types';\nimport type { ICoachmarkProps, IJourneyContext } from './journey-context-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { createContext, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<{ children: ReactNode }> = ({ children }) => {\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const currentIndex = useRef(-1);\n  const currentJourneyIdStudent = useRef<TJourneyId | undefined>();\n\n  const setJourney = useCallback(\n    (id: TJourneyId, coachmarks: ICoachmarkProps[]) => {\n      if (coachmarkList.length > 0) {\n        throw new Error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n        );\n      }\n      currentJourneyIdStudent.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList([...coachmarks]);\n    },\n    [coachmarkList.length],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: ICoachmarkProps) => {\n    if (!currentJourneyIdStudent.current || id !== currentJourneyIdStudent.current) {\n      throw new Error(\n        currentJourneyIdStudent.current\n          ? `addCoachmark was called before setJourney`\n          : `A Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n      );\n    }\n\n    setCoachmarkList(prev => [...prev, coachmark]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (id: TJourneyId, keepPrevActive: boolean = false, delayInMs: number = 0) => {\n      if (!currentJourneyIdStudent.current || id !== currentJourneyIdStudent.current) {\n        throw new Error(\n          currentJourneyIdStudent.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n        );\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            currentJourneyIdStudent.current = undefined;\n            currentIndex.current = -1;\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    [],\n  );\n\n  const memoizedContextValue = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      coachmarks: coachmarkList,\n    }),\n    [nextCoachmark, setJourney, addCoachmark, coachmarkList],\n  );\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {coachmarkList.length > 0 && (\n        <S.BlurOverlay>\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark key={`coachmark-${index}`} coachmark={coachmark} />\n          ))}\n        </S.BlurOverlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","coachmarkList","setCoachmarkList","useState","currentIndex","useRef","currentJourneyIdStudent","setJourney","useCallback","id","coachmarks","addCoachmark","coachmark","prev","nextCoachmark","keepPrevActive","delayInMs","prevList","item","timer","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","jsxs","jsx","S.BlurOverlay","index","Coachmark"],"mappings":";;;;AASa,MAAAA,IAAiBC,EAAsC,IAAI,GAE3DC,IAA+C,CAAC,EAAE,UAAAC,QAAe;AAC5E,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA4B,CAAE,CAAA,GAClEC,IAAeC,EAAO,EAAE,GACxBC,IAA0BD,KAE1BE,IAAaC;AAAA,IACjB,CAACC,GAAgBC,MAAkC;AAC7C,UAAAT,EAAc,SAAS;AACzB,cAAM,IAAI;AAAA,UACR,iEAAiEK,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,QAAA;AAGhI,MAAAH,EAAwB,UAAUG,GAClCL,EAAa,UAAU,IACNF,EAAA,CAAC,GAAGQ,CAAU,CAAC;AAAA,IAClC;AAAA,IACA,CAACT,EAAc,MAAM;AAAA,EAAA,GAGjBU,IAAeH,EAAY,CAACC,GAAgBG,MAA+B;AAC/E,QAAI,CAACN,EAAwB,WAAWG,MAAOH,EAAwB;AACrE,YAAM,IAAI;AAAA,QACRA,EAAwB,UACpB,8CACA,iDAAiDA,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,MAAA;AAIpH,IAAAP,EAAiB,CAAQW,MAAA,CAAC,GAAGA,GAAMD,CAAS,CAAC;AAAA,EAC/C,GAAG,CAAE,CAAA,GAECE,IAAgBN;AAAA,IACpB,CAACC,GAAgBM,IAA0B,IAAOC,IAAoB,MAAM;AAC1E,UAAI,CAACV,EAAwB,WAAWG,MAAOH,EAAwB;AACrE,cAAM,IAAI;AAAA,UACRA,EAAwB,UACpB,+CACA,iDAAiDA,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,QAAA;AAIpH,MAAIO,MAAc,KAEhBd,EAAiB,CAAYe,MACpBA,EAAS,IAAI,CAACC,OACZ,EAAE,GAAGA,GAAM,UAAU,GAAM,EACnC,CACF;AAGG,YAAAC,IAAQ,WAAW,MAAM;AAC7B,qBAAaA,CAAK;AACZ,cAAAC,IAAYhB,EAAa,UAAU;AAEzC,QAAAF,EAAiB,CAAYe,MAAA;AAE3B,cAAIG,KAAaH,EAAS,UAAUA,EAAS,WAAW;AACtD,mBAAAX,EAAwB,UAAU,QAClCF,EAAa,UAAU,IAEhB;AAGT,UAAAA,EAAa,UAAUgB;AACjB,gBAAAC,IAAuB,CAAC,GAAGJ,CAAQ;AAExC,iBAAAI,EAAqBD,CAAS,EAAsB,WAAW,IAE5DA,IAAY,MACbC,EAAqBD,IAAY,CAAC,EAAsB,WAAWL,IAG/DM;AAAA,QAAA,CACR;AAAA,SACAL,CAAS;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EAAA,GAGGM,IAAuBC;AAAA,IAC3B,OAAO;AAAA,MACL,eAAAT;AAAA,MACA,YAAAP;AAAA,MACA,cAAAI;AAAA,MACA,YAAYV;AAAA,IAAA;AAAA,IAEd,CAACa,GAAeP,GAAYI,GAAcV,CAAa;AAAA,EAAA;AAGzD,SACG,gBAAAuB,EAAA3B,EAAe,UAAf,EAAwB,OAAOyB,GAC7B,UAAA;AAAA,IAAArB,EAAc,SAAS,KACtB,gBAAAwB,EAACC,GAAA,EACE,YAAc,IAAI,CAACd,GAAWe,wBAC5BC,GAAqC,EAAA,WAAAhB,EAAA,GAAtB,aAAae,CAAK,EAA0B,CAC7D,GACH;AAAA,IAED3B;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["import type { TJourneyId } from '../journey-id/journey-id-types';\nimport type { ICoachmarkProps, IJourneyContext } from './journey-context-types';\nimport type { FC, ReactNode } from 'react';\n\nimport { createContext, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<{ children: ReactNode }> = ({ children }) => {\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const currentIndex = useRef(-1);\n  const currentJourneyIdStudent = useRef<TJourneyId | undefined>();\n\n  const setJourney = useCallback(\n    (id: TJourneyId, coachmarks: ICoachmarkProps[]) => {\n      if (coachmarkList.length > 0) {\n        throw new Error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n        );\n      }\n      currentJourneyIdStudent.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList([...coachmarks]);\n    },\n    [coachmarkList.length],\n  );\n\n  const clearJourney = useCallback(() => {\n    currentJourneyIdStudent.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n  }, []);\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: ICoachmarkProps) => {\n    if (!currentJourneyIdStudent.current || id !== currentJourneyIdStudent.current) {\n      throw new Error(\n        currentJourneyIdStudent.current\n          ? `addCoachmark was called before setJourney`\n          : `A Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n      );\n    }\n\n    setCoachmarkList(prev => [...prev, coachmark]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (id: TJourneyId, keepPrevActive: boolean = false, delayInMs: number = 0) => {\n      if (!currentJourneyIdStudent.current || id !== currentJourneyIdStudent.current) {\n        throw new Error(\n          currentJourneyIdStudent.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyIdStudent.current}, New Journey Request: ${id}`,\n        );\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            currentJourneyIdStudent.current = undefined;\n            currentIndex.current = -1;\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    [],\n  );\n\n  const memoizedContextValue = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      coachmarks: coachmarkList,\n    }),\n    [nextCoachmark, setJourney, addCoachmark, clearJourney, coachmarkList],\n  );\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {coachmarkList.length > 0 && (\n        <S.BlurOverlay>\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark key={`coachmark-${index}`} coachmark={coachmark} />\n          ))}\n        </S.BlurOverlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","coachmarkList","setCoachmarkList","useState","currentIndex","useRef","currentJourneyIdStudent","setJourney","useCallback","id","coachmarks","clearJourney","addCoachmark","coachmark","prev","nextCoachmark","keepPrevActive","delayInMs","prevList","item","timer","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","jsxs","jsx","S.BlurOverlay","index","Coachmark"],"mappings":";;;;AASa,MAAAA,IAAiBC,EAAsC,IAAI,GAE3DC,IAA+C,CAAC,EAAE,UAAAC,QAAe;AAC5E,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA4B,CAAE,CAAA,GAClEC,IAAeC,EAAO,EAAE,GACxBC,IAA0BD,KAE1BE,IAAaC;AAAA,IACjB,CAACC,GAAgBC,MAAkC;AAC7C,UAAAT,EAAc,SAAS;AACzB,cAAM,IAAI;AAAA,UACR,iEAAiEK,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,QAAA;AAGhI,MAAAH,EAAwB,UAAUG,GAClCL,EAAa,UAAU,IACNF,EAAA,CAAC,GAAGQ,CAAU,CAAC;AAAA,IAClC;AAAA,IACA,CAACT,EAAc,MAAM;AAAA,EAAA,GAGjBU,IAAeH,EAAY,MAAM;AACrC,IAAAF,EAAwB,UAAU,QAClCF,EAAa,UAAU,IACvBF,EAAiB,CAAE,CAAA;AAAA,EACrB,GAAG,CAAE,CAAA,GAECU,IAAeJ,EAAY,CAACC,GAAgBI,MAA+B;AAC/E,QAAI,CAACP,EAAwB,WAAWG,MAAOH,EAAwB;AACrE,YAAM,IAAI;AAAA,QACRA,EAAwB,UACpB,8CACA,iDAAiDA,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,MAAA;AAIpH,IAAAP,EAAiB,CAAQY,MAAA,CAAC,GAAGA,GAAMD,CAAS,CAAC;AAAA,EAC/C,GAAG,CAAE,CAAA,GAECE,IAAgBP;AAAA,IACpB,CAACC,GAAgBO,IAA0B,IAAOC,IAAoB,MAAM;AAC1E,UAAI,CAACX,EAAwB,WAAWG,MAAOH,EAAwB;AACrE,cAAM,IAAI;AAAA,UACRA,EAAwB,UACpB,+CACA,iDAAiDA,EAAwB,OAAO,0BAA0BG,CAAE;AAAA,QAAA;AAIpH,MAAIQ,MAAc,KAEhBf,EAAiB,CAAYgB,MACpBA,EAAS,IAAI,CAACC,OACZ,EAAE,GAAGA,GAAM,UAAU,GAAM,EACnC,CACF;AAGG,YAAAC,IAAQ,WAAW,MAAM;AAC7B,qBAAaA,CAAK;AACZ,cAAAC,IAAYjB,EAAa,UAAU;AAEzC,QAAAF,EAAiB,CAAYgB,MAAA;AAE3B,cAAIG,KAAaH,EAAS,UAAUA,EAAS,WAAW;AACtD,mBAAAZ,EAAwB,UAAU,QAClCF,EAAa,UAAU,IAEhB;AAGT,UAAAA,EAAa,UAAUiB;AACjB,gBAAAC,IAAuB,CAAC,GAAGJ,CAAQ;AAExC,iBAAAI,EAAqBD,CAAS,EAAsB,WAAW,IAE5DA,IAAY,MACbC,EAAqBD,IAAY,CAAC,EAAsB,WAAWL,IAG/DM;AAAA,QAAA,CACR;AAAA,SACAL,CAAS;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EAAA,GAGGM,IAAuBC;AAAA,IAC3B,OAAO;AAAA,MACL,eAAAT;AAAA,MACA,YAAAR;AAAA,MACA,cAAAK;AAAA,MACA,cAAAD;AAAA,MACA,YAAYV;AAAA,IAAA;AAAA,IAEd,CAACc,GAAeR,GAAYK,GAAcD,GAAcV,CAAa;AAAA,EAAA;AAGvE,SACG,gBAAAwB,EAAA5B,EAAe,UAAf,EAAwB,OAAO0B,GAC7B,UAAA;AAAA,IAAAtB,EAAc,SAAS,KACtB,gBAAAyB,EAACC,GAAA,EACE,YAAc,IAAI,CAACd,GAAWe,wBAC5BC,GAAqC,EAAA,WAAAhB,EAAA,GAAtB,aAAae,CAAK,EAA0B,CAC7D,GACH;AAAA,IAED5B;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/index.d.ts

@@ -1279,6 +1279,17 @@ export declare interface IJourneyContext {
      * @param coachmark - The array of coachmarks to be used in this journey.
      */
     setJourney: (id: TJourneyId, coachmark: ICoachmarkProps[]) => void;
+    /**
+     * Clears the current journey, removing all coachmarks.
+     * Should be called inside useEffect to ensure cleanup.
+     * @example
+     * useEffect(() => {
+     *  return () => {
+     *   clearJourney();
+     * }
+     * }, []);
+     */
+    clearJourney: () => void;
     /**
      * Adds a single coachmark to an existing journey.
      * @param id - The journey identifier.

package/package.json

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