@cuemath/leap 3.2.4-aa0 → 3.2.4-akm-1

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

@@ -1,5 +1,5 @@
 import { jsx as t, Fragment as G } from "react/jsx-runtime";
-import { useRef as H, useCallback as m, useMemo as pe, useEffect as _e } from "react";
+import { useRef as H, useCallback as g, useMemo as pe, useEffect as _e } from "react";
 import ae from "../../../../../assets/line-icons/icons/carat-right.js";
 import { PLATFORM_EVENTS_STUDENT as ce } from "../../../../analytics-events/platform-events-student.js";
 import { JOURNEY_ID_STUDENT as U } from "../../../../journey/journey-id/journey-id-student.js";
@@ -14,48 +14,48 @@ import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as s } from "../../../enum/circle-onb
 import { useCircleSounds as Ae } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
 import { SegmentedGameCard as Te } from "../../comps/segmented-game-card/segmented-game-card.js";
 import { GAME_LAUNCHER_ANALYTICS_EVENTS as he } from "../../game-launcher-analytics-events.js";
-import { GO_TO_NEXT_SLIDE_AFTER_MS as Le, SHOW_LABEL_HIGHLIGHT_AFTER_MS as Re, SHOW_NUDGE_AFTER_MS as ge, SLIDE_TO_LESSON_MS as Oe } from "./constants.js";
-import { ProjectType as me } from "../../../games/web-view/enums/project-type-enum.js";
+import { GO_TO_NEXT_SLIDE_AFTER_MS as Le, SHOW_LABEL_HIGHLIGHT_AFTER_MS as Re, SHOW_NUDGE_AFTER_MS as me, SLIDE_TO_LESSON_MS as Oe } from "./constants.js";
+import { ProjectType as ge } from "../../../games/web-view/enums/project-type-enum.js";
 const $e = ({
   carouselRefs: i,
   onSegmentClick: f,
   onJourneyComplete: A
 }) => {
-  const { device: se } = fe(), h = se === "mobile", L = h ? "ab3-bold" : "ab2-bold", n = H(null), l = H(null), a = H(null), u = H([]), { playButtonSound: k } = Ae(), { nextCoachmark: g, setJourney: Y, endJourney: R } = Ie(), { onEvent: O } = Ce(), w = m(
+  const { device: se } = fe(), h = se === "mobile", L = h ? "ab3-bold" : "ab2-bold", n = H(null), l = H(null), a = H(null), u = H([]), { playButtonSound: k } = Ae(), { nextCoachmark: m, setJourney: Y, endJourney: R } = Ie(), { onEvent: O } = Ce(), w = g(
     (e) => {
       O(ce.ONBOARDING_STEP_VIEWED, {
         step: e
       });
     },
     [O]
-  ), N = m(
+  ), N = g(
     (e) => {
       O(ce.ONBOARDING_STEP_COMPLETED, {
         step: e
       });
     },
     [O]
-  ), E = m(
+  ), E = g(
     (e, r, c, S = !1, b) => {
       var _, I;
-      S || (k(), (I = i.current) == null || I.goToIndex(((_ = i.current) == null ? void 0 : _.currentIndex) + 1), g(b, !1, Le)), w(e);
+      S || (k(), (I = i.current) == null || I.goToIndex(((_ = i.current) == null ? void 0 : _.currentIndex) + 1), m(b, !1, Le)), w(e);
       const p = setTimeout(() => {
         clearTimeout(p), r.startLabelAnimation(c);
       }, Re);
-      u.current.push(p), g(b, !0, ge);
+      u.current.push(p), m(b, !0, me);
     },
-    [i, g, k, w]
-  ), x = m(
+    [i, m, k, w]
+  ), x = g(
     (e, r) => {
-      f(e, me.PUZZLE), N(s.PUZZLE_ACTIVITY), R(r), A(r);
+      f(e, ge.PUZZLE), N(s.PUZZLE_ACTIVITY), R(r), A(r);
     },
     [R, A, f, N]
-  ), v = m(
+  ), v = g(
     (e, r) => {
-      f(e, me.LESSON), N(s.SKILL_ACTIVITY), R(r), A(r);
+      f(e, ge.LESSON), N(s.SKILL_ACTIVITY), R(r), A(r);
     },
     [R, A, f, N]
-  ), y = m(
+  ), y = g(
     (e, r, c) => {
       var M, W, $, D, X, F, Z, K, q, Q, z, j, ee, te, re, ne, ie, oe, le;
       const S = !!c, b = !!r;
@@ -119,7 +119,7 @@ const $e = ({
             Te,
             {
               label: "",
-              value: c.data.filter((o) => o.status === "pending").length,
+              value: c.data.filter((o) => o.status === "completed").length,
               maxValue: c.data.length,
               initialValue: c.initialProgressValue,
               data: c.data.map((o) => ({
@@ -222,15 +222,15 @@ const $e = ({
         Y(e, V);
       (oe = i.current) == null || oe.goToIndex(0);
       const J = setTimeout(() => {
-        clearTimeout(J), g(e);
+        clearTimeout(J), m(e);
       }, Oe);
       if (u.current.push(J), e === U.CIRCLE_ACTIVITIES_INTRO_JOURNEY)
         S && n.current ? E(s.SKILL_ACTIVITY, n.current, "BLUE_4", !0, e) : E(s.GAMES_ACTIVITY, l.current, "ORANGE_4", !0, e);
       else {
         (le = n.current) == null || le.startLabelAnimation("BLUE_4");
         const o = setTimeout(() => {
-          clearTimeout(o), g(e, !0);
-        }, ge);
+          clearTimeout(o), m(e, !0);
+        }, me);
         u.current.push(o);
       }
     },
@@ -242,7 +242,7 @@ const $e = ({
       E,
       v,
       x,
-      g
+      m
     ]
   ), ue = pe(
     () => ({

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

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

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js

@@ -20,8 +20,8 @@ const a = r.div(({ theme: o }) => {
 `, p = r.div(({ isActive: o, theme: t }) => {
   const { WHITE: e, TRANSPARENT: n, GREY_2: i, WHITE_T_10: s } = t.colors;
   return `
-  height: 45px;
-  width: 45px;
+  width: clamp(30px, 10.5vw, 45px);
+  height: clamp(30px, 10.5vw, 45px);
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"grade-input-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const GradeInputWrapper = styled.div(({ theme }) => {\n  const { BLACK } = theme.colors;\n\n  return `\n  background: ${BLACK};\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  `;\n});\n\nexport const GradeInputContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nexport const GradeRow = styled.div`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n`;\n\nexport const GradeButton = styled.div<{ isActive: boolean }>(({ isActive, theme }) => {\n  const { WHITE, TRANSPARENT, GREY_2, WHITE_T_10 } = theme.colors;\n\n  return `\n  height: 45px;\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid ${WHITE};\n  background-color: ${isActive ? WHITE : TRANSPARENT};\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease,\n    transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.1);\n    background-color: ${isActive ? GREY_2 : WHITE_T_10};\n  }\n  `;\n});\n\nexport const NextButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 166px;\n  right: 16px;\n  z-index: 1;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 100%;\n  height: 40px;\n  width: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_3};\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n  &:hover svg {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n"],"names":["GradeInputWrapper","styled","theme","BLACK","GradeInputContainer","GradeRow","GradeButton","isActive","WHITE","TRANSPARENT","GREY_2","WHITE_T_10","NextButtonWrapper"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACnD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA,gBACOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,CAAC,GAEYC,IAAsBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlBK,IAAcL,EAAO,IAA2B,CAAC,EAAE,UAAAM,GAAU,OAAAL,QAAY;AACpF,QAAM,EAAE,OAAAM,GAAO,aAAAC,GAAa,QAAAC,GAAQ,YAAAC,MAAeT,EAAM;AAElD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOaM,CAAK;AAAA,sBACLD,IAAWC,IAAQC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ5BF,IAAWG,IAASC,CAAU;AAAA;AAAA;AAGtD,CAAC,GAEYC,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAW/B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,aACxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;"}
+{"version":3,"file":"grade-input-styled.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const GradeInputWrapper = styled.div(({ theme }) => {\n  const { BLACK } = theme.colors;\n\n  return `\n  background: ${BLACK};\n  width: 100%;\n  padding: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  `;\n});\n\nexport const GradeInputContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nexport const GradeRow = styled.div`\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n`;\n\nexport const GradeButton = styled.div<{ isActive: boolean }>(({ isActive, theme }) => {\n  const { WHITE, TRANSPARENT, GREY_2, WHITE_T_10 } = theme.colors;\n\n  return `\n  width: clamp(30px, 10.5vw, 45px);\n  height: clamp(30px, 10.5vw, 45px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid ${WHITE};\n  background-color: ${isActive ? WHITE : TRANSPARENT};\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease,\n    transform 0.2s ease;\n\n  &:hover {\n    transform: scale(1.1);\n    background-color: ${isActive ? GREY_2 : WHITE_T_10};\n  }\n  `;\n});\n\nexport const NextButtonWrapper = styled.div`\n  position: absolute;\n  bottom: 166px;\n  right: 16px;\n  z-index: 1;\n  background: ${({ theme }) => theme.colors.WHITE};\n  border-radius: 100%;\n  height: 40px;\n  width: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.BLACK_3};\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n  &:hover svg {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n"],"names":["GradeInputWrapper","styled","theme","BLACK","GradeInputContainer","GradeRow","GradeButton","isActive","WHITE","TRANSPARENT","GREY_2","WHITE_T_10","NextButtonWrapper"],"mappings":";AAEO,MAAMA,IAAoBC,EAAO,IAAI,CAAC,EAAE,OAAAC,QAAY;AACnD,QAAA,EAAE,OAAAC,EAAM,IAAID,EAAM;AAEjB,SAAA;AAAA,gBACOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrB,CAAC,GAEYC,IAAsBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,GAMlBK,IAAcL,EAAO,IAA2B,CAAC,EAAE,UAAAM,GAAU,OAAAL,QAAY;AACpF,QAAM,EAAE,OAAAM,GAAO,aAAAC,GAAa,QAAAC,GAAQ,YAAAC,MAAeT,EAAM;AAElD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOaM,CAAK;AAAA,sBACLD,IAAWC,IAAQC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ5BF,IAAWG,IAASC,CAAU;AAAA;AAAA;AAGtD,CAAC,GAEYC,IAAoBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKxB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAW/B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,aACxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;"}

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js

@@ -12,7 +12,7 @@ const _ = ({ selected: o, grades: s, onSelect: n, onNext: c }) => {
   }, [o]);
   const d = (e) => e === "13", u = (e) => {
     n == null || n(e);
-  }, f = 6, k = s.reduce((e, a, r) => {
+  }, f = 7, k = s.reduce((e, a, r) => {
     var l;
     return r % f === 0 && e.push([]), (l = e[e.length - 1]) == null || l.push(a), e;
   }, []);

package/dist/features/circle-games/sign-up/comp/grade-input/grade-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input.tsx"],"sourcesContent":["import type { Grade, GradeKey, IGradeInputProps } from './grade-input-types';\n\nimport { useEffect, useState } from 'react';\n\nimport Next2Icon from '../../../../../assets/line-icons/icons/next2';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport Text from '../../../../ui/text/text';\nimport { WithGrade } from '../../../leaderboard/comps/with-grade/with-grade';\nimport * as S from './grade-input-styled';\n\nexport const GradeInput = ({ selected, grades, onSelect, onNext }: IGradeInputProps) => {\n  const [active, setActive] = useState(selected);\n\n  useEffect(() => {\n    setActive(selected);\n  }, [selected]);\n\n  const isOutOfSchool = (gradeKey: GradeKey) => {\n    return gradeKey === ('13' as GradeKey);\n  };\n\n  const handleGrade = (gradeInfo: Grade) => {\n    onSelect?.(gradeInfo);\n  };\n\n  const maxNoOfRows = 6;\n\n  // Group grades into rows\n  const grade2d: Grade[][] = grades.reduce((acc: Grade[][], grade, index) => {\n    if (index % maxNoOfRows === 0) acc.push([]);\n    acc[acc.length - 1]?.push(grade);\n\n    return acc;\n  }, []);\n\n  return (\n    <S.GradeInputWrapper>\n      {selected && (\n        <S.NextButtonWrapper>\n          <Clickable onClick={onNext} analyticsLabel=\"circle_signup_grade_next\" label=\"\">\n            <Next2Icon height={28} width={28} />\n          </Clickable>\n        </S.NextButtonWrapper>\n      )}\n\n      <S.GradeInputContainer>\n        {grade2d.map((row, rowIndex) => (\n          <S.GradeRow key={rowIndex}>\n            {row.map(g => (\n              <S.GradeButton isActive={active === g.key} key={g.key} onClick={() => handleGrade(g)}>\n                {isOutOfSchool(g.key) && (\n                  <WithGrade grade={g.key}>\n                    <Text\n                      $renderAs={active === g.key ? 'ab1-bold' : 'ab1'}\n                      $color={active === g.key ? 'WHITE' : 'BLACK'}\n                    >\n                      {g.label}\n                    </Text>\n                  </WithGrade>\n                )}\n                {!isOutOfSchool(g.key) && (\n                  <Text $renderAs={'ab1'} $color={active === g.key ? 'BLACK' : 'WHITE'}>\n                    {g.label}\n                  </Text>\n                )}\n              </S.GradeButton>\n            ))}\n          </S.GradeRow>\n        ))}\n      </S.GradeInputContainer>\n    </S.GradeInputWrapper>\n  );\n};\n"],"names":["GradeInput","selected","grades","onSelect","onNext","active","setActive","useState","useEffect","isOutOfSchool","gradeKey","handleGrade","gradeInfo","maxNoOfRows","grade2d","acc","grade","index","_a","jsxs","S.GradeInputWrapper","S.NextButtonWrapper","jsx","Clickable","Next2Icon","S.GradeInputContainer","row","rowIndex","S.GradeRow","g","S.GradeButton","WithGrade","Text"],"mappings":";;;;;;;AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,QAAAC,QAA+B;AACtF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASN,CAAQ;AAE7C,EAAAO,EAAU,MAAM;AACd,IAAAF,EAAUL,CAAQ;AAAA,EAAA,GACjB,CAACA,CAAQ,CAAC;AAEP,QAAAQ,IAAgB,CAACC,MACdA,MAAc,MAGjBC,IAAc,CAACC,MAAqB;AACxC,IAAAT,KAAA,QAAAA,EAAWS;AAAA,EAAS,GAGhBC,IAAc,GAGdC,IAAqBZ,EAAO,OAAO,CAACa,GAAgBC,GAAOC,MAAU;;AACzE,WAAIA,IAAQJ,MAAgB,KAAOE,EAAA,KAAK,CAAA,CAAE,IAC1CG,IAAAH,EAAIA,EAAI,SAAS,CAAC,MAAlB,QAAAG,EAAqB,KAAKF,IAEnBD;AAAA,EACT,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAI,EAACC,GAAA,EACE,UAAA;AAAA,IAAAnB,uBACEoB,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAU,SAASnB,GAAQ,gBAAe,4BAA2B,OAAM,IAC1E,4BAACoB,GAAU,EAAA,QAAQ,IAAI,OAAO,IAAI,GACpC,EACF,CAAA;AAAA,IAGD,gBAAAF,EAAAG,GAAA,EACE,UAAQX,EAAA,IAAI,CAACY,GAAKC,MACjB,gBAAAL,EAACM,GAAA,EACE,UAAAF,EAAI,IAAI,CAAAG,MACN,gBAAAV,EAAAW,GAAA,EAAc,UAAUzB,MAAWwB,EAAE,KAAiB,SAAS,MAAMlB,EAAYkB,CAAC,GAChF,UAAA;AAAA,MAAApB,EAAcoB,EAAE,GAAG,uBACjBE,GAAU,EAAA,OAAOF,EAAE,KAClB,UAAA,gBAAAP;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAW3B,MAAWwB,EAAE,MAAM,aAAa;AAAA,UAC3C,QAAQxB,MAAWwB,EAAE,MAAM,UAAU;AAAA,UAEpC,UAAEA,EAAA;AAAA,QAAA;AAAA,MAAA,GAEP;AAAA,MAED,CAACpB,EAAcoB,EAAE,GAAG,uBAClBG,GAAK,EAAA,WAAW,OAAO,QAAQ3B,MAAWwB,EAAE,MAAM,UAAU,SAC1D,YAAE,OACL;AAAA,IAAA,EAAA,GAd4CA,EAAE,GAgBlD,CACD,EAnBc,GAAAF,CAoBjB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/circle-games/sign-up/comp/grade-input/grade-input.tsx"],"sourcesContent":["import type { Grade, GradeKey, IGradeInputProps } from './grade-input-types';\n\nimport { useEffect, useState } from 'react';\n\nimport Next2Icon from '../../../../../assets/line-icons/icons/next2';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport Text from '../../../../ui/text/text';\nimport { WithGrade } from '../../../leaderboard/comps/with-grade/with-grade';\nimport * as S from './grade-input-styled';\n\nexport const GradeInput = ({ selected, grades, onSelect, onNext }: IGradeInputProps) => {\n  const [active, setActive] = useState(selected);\n\n  useEffect(() => {\n    setActive(selected);\n  }, [selected]);\n\n  const isOutOfSchool = (gradeKey: GradeKey) => {\n    return gradeKey === ('13' as GradeKey);\n  };\n\n  const handleGrade = (gradeInfo: Grade) => {\n    onSelect?.(gradeInfo);\n  };\n\n  const maxNoOfRows = 7;\n\n  // Group grades into rows\n  const grade2d: Grade[][] = grades.reduce((acc: Grade[][], grade, index) => {\n    if (index % maxNoOfRows === 0) acc.push([]);\n    acc[acc.length - 1]?.push(grade);\n\n    return acc;\n  }, []);\n\n  return (\n    <S.GradeInputWrapper>\n      {selected && (\n        <S.NextButtonWrapper>\n          <Clickable onClick={onNext} analyticsLabel=\"circle_signup_grade_next\" label=\"\">\n            <Next2Icon height={28} width={28} />\n          </Clickable>\n        </S.NextButtonWrapper>\n      )}\n\n      <S.GradeInputContainer>\n        {grade2d.map((row, rowIndex) => (\n          <S.GradeRow key={rowIndex}>\n            {row.map(g => (\n              <S.GradeButton isActive={active === g.key} key={g.key} onClick={() => handleGrade(g)}>\n                {isOutOfSchool(g.key) && (\n                  <WithGrade grade={g.key}>\n                    <Text\n                      $renderAs={active === g.key ? 'ab1-bold' : 'ab1'}\n                      $color={active === g.key ? 'WHITE' : 'BLACK'}\n                    >\n                      {g.label}\n                    </Text>\n                  </WithGrade>\n                )}\n                {!isOutOfSchool(g.key) && (\n                  <Text $renderAs={'ab1'} $color={active === g.key ? 'BLACK' : 'WHITE'}>\n                    {g.label}\n                  </Text>\n                )}\n              </S.GradeButton>\n            ))}\n          </S.GradeRow>\n        ))}\n      </S.GradeInputContainer>\n    </S.GradeInputWrapper>\n  );\n};\n"],"names":["GradeInput","selected","grades","onSelect","onNext","active","setActive","useState","useEffect","isOutOfSchool","gradeKey","handleGrade","gradeInfo","maxNoOfRows","grade2d","acc","grade","index","_a","jsxs","S.GradeInputWrapper","S.NextButtonWrapper","jsx","Clickable","Next2Icon","S.GradeInputContainer","row","rowIndex","S.GradeRow","g","S.GradeButton","WithGrade","Text"],"mappings":";;;;;;;AAUO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,QAAAC,QAA+B;AACtF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAASN,CAAQ;AAE7C,EAAAO,EAAU,MAAM;AACd,IAAAF,EAAUL,CAAQ;AAAA,EAAA,GACjB,CAACA,CAAQ,CAAC;AAEP,QAAAQ,IAAgB,CAACC,MACdA,MAAc,MAGjBC,IAAc,CAACC,MAAqB;AACxC,IAAAT,KAAA,QAAAA,EAAWS;AAAA,EAAS,GAGhBC,IAAc,GAGdC,IAAqBZ,EAAO,OAAO,CAACa,GAAgBC,GAAOC,MAAU;;AACzE,WAAIA,IAAQJ,MAAgB,KAAOE,EAAA,KAAK,CAAA,CAAE,IAC1CG,IAAAH,EAAIA,EAAI,SAAS,CAAC,MAAlB,QAAAG,EAAqB,KAAKF,IAEnBD;AAAA,EACT,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAI,EAACC,GAAA,EACE,UAAA;AAAA,IAAAnB,uBACEoB,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAU,SAASnB,GAAQ,gBAAe,4BAA2B,OAAM,IAC1E,4BAACoB,GAAU,EAAA,QAAQ,IAAI,OAAO,IAAI,GACpC,EACF,CAAA;AAAA,IAGD,gBAAAF,EAAAG,GAAA,EACE,UAAQX,EAAA,IAAI,CAACY,GAAKC,MACjB,gBAAAL,EAACM,GAAA,EACE,UAAAF,EAAI,IAAI,CAAAG,MACN,gBAAAV,EAAAW,GAAA,EAAc,UAAUzB,MAAWwB,EAAE,KAAiB,SAAS,MAAMlB,EAAYkB,CAAC,GAChF,UAAA;AAAA,MAAApB,EAAcoB,EAAE,GAAG,uBACjBE,GAAU,EAAA,OAAOF,EAAE,KAClB,UAAA,gBAAAP;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAW3B,MAAWwB,EAAE,MAAM,aAAa;AAAA,UAC3C,QAAQxB,MAAWwB,EAAE,MAAM,UAAU;AAAA,UAEpC,UAAEA,EAAA;AAAA,QAAA;AAAA,MAAA,GAEP;AAAA,MAED,CAACpB,EAAcoB,EAAE,GAAG,uBAClBG,GAAK,EAAA,WAAW,OAAO,QAAQ3B,MAAWwB,EAAE,MAAM,UAAU,SAC1D,YAAE,OACL;AAAA,IAAA,EAAA,GAd4CA,EAAE,GAgBlD,CACD,EAnBc,GAAAF,CAoBjB,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/features/circle-games/sign-up/constants.js

@@ -1,5 +1,7 @@
 import { State as e } from "./sign-up-types.js";
 const h = [e.ACTIVE, e.PAUSED, e.PAID], i = [e.TRIAL, e.DEMO], p = [
+  { label: "KG", key: "0" },
+  { label: "1", key: "1", sup: "st" },
   { label: "2", key: "2", sup: "nd" },
   { label: "3", key: "3", sup: "rd" },
   { label: "4", key: "4", sup: "th" },
@@ -11,7 +13,7 @@ const h = [e.ACTIVE, e.PAUSED, e.PAID], i = [e.TRIAL, e.DEMO], p = [
   { label: "10", key: "10", sup: "th" },
   { label: "11", key: "11", sup: "th" },
   { label: "12", key: "12", sup: "th" }
-], t = 440, s = 640, n = window.innerWidth / t, a = window.innerHeight / s, l = Math.min(n, a), u = Math.min(s * l, s), b = Math.min(t * l, t);
+], t = 440, s = 640, a = window.innerWidth / t, n = window.innerHeight / s, l = Math.min(a, n), u = Math.min(s * l, s), b = Math.min(t * l, t);
 export {
   s as ACTUAL_HEIGHT,
   t as ACTUAL_WIDTH,

package/dist/features/circle-games/sign-up/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/features/circle-games/sign-up/constants.ts"],"sourcesContent":["import type { Grade } from './comp/grade-input/grade-input-types';\n\nimport { State } from './sign-up-types';\n\nexport const userIsEnrolledCases = [State.ACTIVE, State.PAUSED, State.PAID];\nexport const userIsOnTrialCases = [State.TRIAL, State.DEMO];\n\nexport const GRADES: Grade[] = [\n  { label: '2', key: '2', sup: 'nd' },\n  { label: '3', key: '3', sup: 'rd' },\n  { label: '4', key: '4', sup: 'th' },\n  { label: '5', key: '5', sup: 'th' },\n  { label: '6', key: '6', sup: 'th' },\n  { label: '7', key: '7', sup: 'th' },\n  { label: '8', key: '8', sup: 'th' },\n  { label: '9', key: '9', sup: 'th' },\n  { label: '10', key: '10', sup: 'th' },\n  { label: '11', key: '11', sup: 'th' },\n  { label: '12', key: '12', sup: 'th' },\n];\n\nexport const MIN_HEIGHT_TO_SUPPORT = 540;\nexport const ACTUAL_WIDTH = 440;\nexport const ACTUAL_HEIGHT = 640;\n\nconst widthRatio = window.innerWidth / ACTUAL_WIDTH;\nconst heightRatio = window.innerHeight / ACTUAL_HEIGHT;\nconst ratio = Math.min(widthRatio, heightRatio);\n\nexport const CONTAINER_HEIGHT = Math.min(ACTUAL_HEIGHT * ratio, ACTUAL_HEIGHT);\nexport const CONTAINER_WIDTH = Math.min(ACTUAL_WIDTH * ratio, ACTUAL_WIDTH);\n"],"names":["userIsEnrolledCases","State","userIsOnTrialCases","GRADES","ACTUAL_WIDTH","ACTUAL_HEIGHT","widthRatio","heightRatio","ratio","CONTAINER_HEIGHT","CONTAINER_WIDTH"],"mappings":";AAIO,MAAMA,IAAsB,CAACC,EAAM,QAAQA,EAAM,QAAQA,EAAM,IAAI,GAC7DC,IAAqB,CAACD,EAAM,OAAOA,EAAM,IAAI,GAE7CE,IAAkB;AAAA,EAC7B,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AACtC,GAGaC,IAAe,KACfC,IAAgB,KAEvBC,IAAa,OAAO,aAAaF,GACjCG,IAAc,OAAO,cAAcF,GACnCG,IAAQ,KAAK,IAAIF,GAAYC,CAAW,GAEjCE,IAAmB,KAAK,IAAIJ,IAAgBG,GAAOH,CAAa,GAChEK,IAAkB,KAAK,IAAIN,IAAeI,GAAOJ,CAAY;"}
+{"version":3,"file":"constants.js","sources":["../../../../src/features/circle-games/sign-up/constants.ts"],"sourcesContent":["import type { Grade } from './comp/grade-input/grade-input-types';\n\nimport { State } from './sign-up-types';\n\nexport const userIsEnrolledCases = [State.ACTIVE, State.PAUSED, State.PAID];\nexport const userIsOnTrialCases = [State.TRIAL, State.DEMO];\n\nexport const GRADES: Grade[] = [\n  { label: 'KG', key: '0' },\n  { label: '1', key: '1', sup: 'st' },\n  { label: '2', key: '2', sup: 'nd' },\n  { label: '3', key: '3', sup: 'rd' },\n  { label: '4', key: '4', sup: 'th' },\n  { label: '5', key: '5', sup: 'th' },\n  { label: '6', key: '6', sup: 'th' },\n  { label: '7', key: '7', sup: 'th' },\n  { label: '8', key: '8', sup: 'th' },\n  { label: '9', key: '9', sup: 'th' },\n  { label: '10', key: '10', sup: 'th' },\n  { label: '11', key: '11', sup: 'th' },\n  { label: '12', key: '12', sup: 'th' },\n];\n\nexport const MIN_HEIGHT_TO_SUPPORT = 540;\nexport const ACTUAL_WIDTH = 440;\nexport const ACTUAL_HEIGHT = 640;\n\nconst widthRatio = window.innerWidth / ACTUAL_WIDTH;\nconst heightRatio = window.innerHeight / ACTUAL_HEIGHT;\nconst ratio = Math.min(widthRatio, heightRatio);\n\nexport const CONTAINER_HEIGHT = Math.min(ACTUAL_HEIGHT * ratio, ACTUAL_HEIGHT);\nexport const CONTAINER_WIDTH = Math.min(ACTUAL_WIDTH * ratio, ACTUAL_WIDTH);\n"],"names":["userIsEnrolledCases","State","userIsOnTrialCases","GRADES","ACTUAL_WIDTH","ACTUAL_HEIGHT","widthRatio","heightRatio","ratio","CONTAINER_HEIGHT","CONTAINER_WIDTH"],"mappings":";AAIO,MAAMA,IAAsB,CAACC,EAAM,QAAQA,EAAM,QAAQA,EAAM,IAAI,GAC7DC,IAAqB,CAACD,EAAM,OAAOA,EAAM,IAAI,GAE7CE,IAAkB;AAAA,EAC7B,EAAE,OAAO,MAAM,KAAK,IAAI;AAAA,EACxB,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,EAClC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AAAA,EACpC,EAAE,OAAO,MAAM,KAAK,MAAM,KAAK,KAAK;AACtC,GAGaC,IAAe,KACfC,IAAgB,KAEvBC,IAAa,OAAO,aAAaF,GACjCG,IAAc,OAAO,cAAcF,GACnCG,IAAQ,KAAK,IAAIF,GAAYC,CAAW,GAEjCE,IAAmB,KAAK,IAAIJ,IAAgBG,GAAOH,CAAa,GAChEK,IAAkB,KAAK,IAAIN,IAAeI,GAAOJ,CAAY;"}

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js

@@ -1,72 +1,72 @@
-import { useMessageBrokerChannel as $ } from "@cuemath/cue-message-broker";
-import { useMemo as C, useState as j, useRef as z, useCallback as f } from "react";
-const M = (e) => ({
+import { useMessageBrokerChannel as W } from "@cuemath/cue-message-broker";
+import { useMemo as m, useState as $, useRef as j, useCallback as f } from "react";
+const C = (e) => ({
   userId: e.userId,
   data: e.data,
   height: e.height,
   responseId: e.responseId
-}), A = (e) => {
-  var a, i;
+}), z = (e) => {
+  var i, r;
   const n = {};
   if (!e) return n;
   for (const { message: u } of e) {
-    const t = (a = u.payload) == null ? void 0 : a.eventPayload, r = t == null ? void 0 : t.responseId;
+    const t = (i = u.payload) == null ? void 0 : i.eventPayload, a = t == null ? void 0 : t.responseId;
     if (!(t != null && t.responseId)) continue;
-    const c = M(t);
-    r && n[r] ? (i = n[r]) == null || i.push(c) : n[r] = [c];
+    const o = C(t);
+    a && n[a] ? (r = n[a]) == null || r.push(o) : n[a] = [o];
   }
   return n;
-}, E = (e, n, a, i = "canvas") => {
-  const u = C(
-    () => A(a),
-    [a]
-  ), [t, r] = j(void 0), c = z({}), g = i === "canvas" || e.includes("practice") ? 0 : 24, S = C(
+}, A = (e, n, i, r = "canvas") => {
+  const u = m(
+    () => z(i),
+    [i]
+  ), [t, a] = $(void 0), o = j({}), M = m(
     () => ({
       channelId: e,
-      ttl: g,
+      ttl: r === "canvas" ? 0 : 24,
       logger: n
     }),
-    [e, n, g]
-  ), b = f((k, l) => {
-    c.current = { ...c.current, [k]: l };
-  }, []), D = f(
+    [e, n, r]
+  ), S = f((k, l) => {
+    o.current = { ...o.current, [k]: l };
+  }, []), b = f(
     (k, l) => {
       const h = u;
-      k.forEach((F) => {
+      k.forEach((x) => {
         var I;
-        const { payload: O } = F.message, { eventPayload: s } = O, o = s == null ? void 0 : s.responseId, v = s == null ? void 0 : s.data, H = s == null ? void 0 : s.userId, W = s == null ? void 0 : s.height, p = c.current[o];
-        if (!l && p)
-          p({
-            data: v,
-            height: W,
-            userId: H,
-            responseId: o
+        const { payload: F } = x.message, { eventPayload: s } = F, c = s == null ? void 0 : s.responseId, O = s == null ? void 0 : s.data, v = s == null ? void 0 : s.userId, H = s == null ? void 0 : s.height, g = o.current[c];
+        if (!l && g)
+          g({
+            data: O,
+            height: H,
+            userId: v,
+            responseId: c
           });
         else {
-          const m = M(s);
-          o && h[o] ? (I = h[o]) == null || I.push(m) : h[o] = [m];
+          const p = C(s);
+          c && h[c] ? (I = h[c]) == null || I.push(p) : h[c] = [p];
         }
-      }), r(h);
+      }), a(h);
     },
     [u]
-  ), { publish: R, channelStatus: q, channel: d, channelMetadata: B, setChannelMetadata: w } = $({
-    channelOptions: S,
-    consumerFn: D,
-    metadataRequired: i === "whiteboard"
-  }), x = f(() => {
+  ), { publish: D, channelStatus: R, channel: d, channelMetadata: q, setChannelMetadata: B } = W({
+    channelOptions: M,
+    consumerFn: b,
+    metadataRequired: r === "whiteboard"
+  }), w = f(() => {
     d && d.destroyChannel();
   }, [d]);
   return {
-    publishStrokes: R,
-    channelStatus: q,
-    closeChannel: x,
+    publishStrokes: D,
+    channelStatus: R,
+    closeChannel: w,
     initialStrokesData: t,
-    registerCallback: b,
-    setChannelMetadata: w,
-    channelMetadata: B
+    registerCallback: S,
+    setChannelMetadata: B,
+    channelMetadata: q
   };
-}, K = E;
+}, J = A;
 export {
-  K as default
+  J as default
 };
 //# sourceMappingURL=use-canvas-sync-broker.js.map

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n  IActionData,\n  ICanvasUpdateConfig,\n  IPublishData,\n  TCueCanvasChangeDataObject,\n  TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n});\n\nconst getCanvasDataFromInitialData = (\n  initialCanvasData: Array<IChannelMessage> | undefined,\n): Record<string, IActionData[]> => {\n  const map: Record<string, IActionData[]> = {};\n\n  if (!initialCanvasData) return map;\n\n  for (const { message } of initialCanvasData) {\n    const payload = (message.payload as IMessage)?.eventPayload;\n    const qrId = payload?.responseId;\n\n    if (!payload?.responseId) continue;\n\n    const strokeData = extractStrokeData(payload);\n\n    if (qrId && map[qrId]) {\n      map[qrId]?.push(strokeData);\n    } else {\n      map[qrId] = [strokeData];\n    }\n  }\n\n  return map;\n};\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n  type: TRenderAs = 'canvas',\n) => {\n  const initialCanvasDataMap = useMemo(\n    () => getCanvasDataFromInitialData(initialCanvasData),\n    [initialCanvasData],\n  );\n  const [initialStrokesData, setInitialStrokesData] = useState<\n    Record<string, IActionData[]> | undefined\n  >(undefined);\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n  const ttl = type === 'canvas' ? 0 : channelId.includes('practice') ? 0 : 24;\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: ttl,\n      logger: logEvent,\n    }),\n    [channelId, logEvent, ttl],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = initialCanvasDataMap;\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n      setInitialStrokesData(strokesPerWidgetMap);\n    },\n    [initialCanvasDataMap],\n  );\n\n  const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n      channelOptions,\n      consumerFn: onMessageReceive,\n      metadataRequired: type === 'whiteboard',\n    });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n    setChannelMetadata,\n    channelMetadata,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","getCanvasDataFromInitialData","initialCanvasData","map","message","_a","qrId","strokeData","_b","useCanvasSyncBroker","channelId","logEvent","type","initialCanvasDataMap","useMemo","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","ttl","channelOptions","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}
+{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n  IActionData,\n  ICanvasUpdateConfig,\n  IPublishData,\n  TCueCanvasChangeDataObject,\n  TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n});\n\nconst getCanvasDataFromInitialData = (\n  initialCanvasData: Array<IChannelMessage> | undefined,\n): Record<string, IActionData[]> => {\n  const map: Record<string, IActionData[]> = {};\n\n  if (!initialCanvasData) return map;\n\n  for (const { message } of initialCanvasData) {\n    const payload = (message.payload as IMessage)?.eventPayload;\n    const qrId = payload?.responseId;\n\n    if (!payload?.responseId) continue;\n\n    const strokeData = extractStrokeData(payload);\n\n    if (qrId && map[qrId]) {\n      map[qrId]?.push(strokeData);\n    } else {\n      map[qrId] = [strokeData];\n    }\n  }\n\n  return map;\n};\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n  type: TRenderAs = 'canvas',\n) => {\n  const initialCanvasDataMap = useMemo(\n    () => getCanvasDataFromInitialData(initialCanvasData),\n    [initialCanvasData],\n  );\n  const [initialStrokesData, setInitialStrokesData] = useState<\n    Record<string, IActionData[]> | undefined\n  >(undefined);\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: type === 'canvas' ? 0 : 24,\n      logger: logEvent,\n    }),\n    [channelId, logEvent, type],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = initialCanvasDataMap;\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n      setInitialStrokesData(strokesPerWidgetMap);\n    },\n    [initialCanvasDataMap],\n  );\n\n  const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n      channelOptions,\n      consumerFn: onMessageReceive,\n      metadataRequired: type === 'whiteboard',\n    });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n    setChannelMetadata,\n    channelMetadata,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","getCanvasDataFromInitialData","initialCanvasData","map","message","_a","qrId","strokeData","_b","useCanvasSyncBroker","channelId","logEvent","type","initialCanvasDataMap","useMemo","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","channelOptions","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}

package/dist/features/ui/modals/modal-styled.js

@@ -1,16 +1,16 @@
-import a from "styled-components";
-const s = a.div(
-  ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
+import o from "styled-components";
+const s = o.div(
+  ({ theme: { colors: a, zIndex: t }, $isClosing: i }) => `
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${t.BLACK_T_60};
+  background-color: ${a.BLACK_T_60};
   backdrop-filter: blur(40px);
   display: flex;
-  animation: ${e ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
-  z-index: ${o.MODAL};
+  animation: ${i ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  z-index: ${t.MODAL};
 
   @keyframes backdropFadeIn {
     from {
@@ -30,20 +30,20 @@ const s = a.div(
     }
   }
 `
-), l = a.div(
-  ({ theme: { colors: t }, $isClosing: o, $width: e }) => `
+), l = o.div(
+  ({ theme: { colors: a }, $isClosing: t, $width: i }) => `
   position: relative;
   align-self: center;
   margin: 0 auto;
-  width: ${e};
-  background-color: ${t.WHITE_1};
-  border: 1px solid ${t.BLACK_1};
+  width: ${i};
+  background-color: ${a.WHITE_1};
+  border: 1px solid ${a.BLACK_1};
   transform-origin: center center;
-  animation: ${o ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+  animation: ${t ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
   box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
   
   /* Responsive behavior for smaller screens */
-  @media (max-width: calc(${e} + 80px)) {
+  @media (max-width: calc(${i} + 80px)) {
     width: 100%;
     max-width: 100%;
     height: 100%;
@@ -73,46 +73,40 @@ const s = a.div(
     }
   }
 `
-), c = a.div(
-  ({ $modalWidth: t }) => `
+), c = o.div(
+  ({ $modalWidth: a }) => `
   max-height: calc(100vh - 142px);
   overflow-y: auto;
 
-  @media (max-width: calc(${t} + 80px)) {
+  @media (max-width: calc(${a} + 80px)) {
     max-height: 100vh;
   }
 }`
-), d = a.div(
-  ({ theme: { colors: t }, $modalWidth: o }) => `
+), m = o.div(
+  ({ theme: { colors: a }, $modalWidth: t }) => `
   position: absolute;
   top: -56px;
   right: -40px;
-  color: ${t.WHITE_1};
+  color: ${a.WHITE_1};
   transition: all 0.2s ease;
   
   &:hover {
     transform: scale(1.05);
   }
 
-  @media (max-width: calc(${o} + 80px)) {
+  @media (max-width: calc(${t} + 80px)) {
     top: 16px;
     right: 16px;
-    color: ${t.BLACK_1};
+    color: ${a.BLACK_1};
   }
 `
-), m = a.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  width: 100%;
-`, i = 720, r = 800, n = 500, h = a.div(
-  ({ $isClosing: t }) => `
+), e = 720, r = 800, n = 500, d = o.div(
+  ({ $isClosing: a }) => `
   position: absolute;
-  width: ${i}px;
+  width: ${e}px;
   height: 100%;
   left: 50%;
-  margin-left: ${-(i / 2)}px;
+  margin-left: ${-(e / 2)}px;
   clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);
   background: linear-gradient(
     180deg,
@@ -124,7 +118,7 @@ const s = a.div(
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   opacity: 0;
-  ${t ? `
+  ${a ? `
       animation: closeSpotlight;
       animation-duration: ${n}ms;
       animation-timing-function: linear;
@@ -154,9 +148,8 @@ const s = a.div(
 export {
   l as BaseModal,
   c as BaseModalContent,
-  d as CloseButtonContainer,
+  m as CloseButtonContainer,
   s as ModalContainer,
-  m as ModalLoaderWrapper,
-  h as SpotlightModal
+  d as SpotlightModal
 };
 //# sourceMappingURL=modal-styled.js.map