@cuemath/leap 2.8.49-rj-12 → 2.8.49-rj-14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +106 -99
  2. package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +1 -1
  3. package/package.json +1 -1
package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js CHANGED
@@ -1,89 +1,89 @@
1
- import { jsx as r, Fragment as R } from "react/jsx-runtime";
1
+ import { jsx as r, Fragment as O } from "react/jsx-runtime";
2
2
  import { useRef as A, useCallback as C, useEffect as V } from "react";
3
3
  import J from "../../../../../assets/line-icons/icons/carat-right.js";
4
4
  import { PLATFORM_EVENTS_STUDENT as U } from "../../../../analytics-events/platform-events-student.js";
5
5
  import { JOURNEY_ID_STUDENT as X } from "../../../../journey/journey-id/journey-id-student.js";
6
- import { IndicatorType as u } from "../../../../journey/use-journey/constants.js";
6
+ import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
7
7
  import { useJourney as K } from "../../../../journey/use-journey/use-journey.js";
8
8
  import j from "../../../../ui/buttons/icon-button/icon-button.js";
9
9
  import { useUIContext as Z } from "../../../../ui/context/context.js";
10
- import O from "../../../../ui/layout/flex-view.js";
10
+ import N from "../../../../ui/layout/flex-view.js";
11
11
  import m from "../../../../ui/text/text.js";
12
- import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as G } from "../../../enum/circle-onboarding-steps.js";
12
+ import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as v } from "../../../enum/circle-onboarding-steps.js";
13
13
  import { useCircleSounds as q } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
14
- import { TablesCard as v } from "../../comps/tables-card/tables-card.js";
14
+ import { TablesCard as G } from "../../comps/tables-card/tables-card.js";
15
15
  import { GAME_LAUNCHER_ANALYTICS_EVENTS as z } from "../../game-launcher-analytics-events.js";
16
- import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as Q, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ee, START_ANIMATING_CLONED_ELEM as M, TABLE_CARD_INDEX as $, GO_TO_TABLE_LAUNCHER_DURATION_MS as te, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as re, PUZZLE_CARD_INDEX as ne, SHOW_INITIAL_COACHMARK_AFTER_MS as x, SHOW_INITIAL_TOOLTIP_AFTER_MS as ie } from "./constants.js";
17
- import { Indicator as oe } from "./use-table-launcher-journey-styled.js";
16
+ import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as Q, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ee, START_ANIMATING_CLONED_ELEM as M, TABLE_CARD_INDEX as $, GO_TO_TABLE_LAUNCHER_DURATION_MS as te, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as re, PUZZLE_CARD_INDEX as ne, SHOW_INITIAL_COACHMARK_AFTER_MS as x, SHOW_INITIAL_TOOLTIP_AFTER_MS as oe } from "./constants.js";
17
+ import { Indicator as ie } from "./use-table-launcher-journey-styled.js";
18
18
  const Ie = ({
19
- carouselRefs: s,
20
- onTableSegmentClick: N,
21
- onJourneyComplete: P
19
+ carouselRefs: c,
20
+ onTableSegmentClick: P,
21
+ onJourneyComplete: S
22
22
  }) => {
23
- const e = X.CIRCLE_TABLES_INTRO_JOURNEY, t = A(null), p = A(null), L = A(!1), T = A([]), { playButtonSound: S } = q(), { nextCoachmark: i, setJourney: H, addCoachmark: c } = K(), { onEvent: _ } = Z(), I = C(
23
+ const e = X.CIRCLE_TABLES_INTRO_JOURNEY, t = A(null), p = A(null), L = A(!1), T = A([]), { playButtonSound: H } = q(), { nextCoachmark: o, setJourney: I, addCoachmark: u } = K(), { onEvent: _ } = Z(), b = C(
24
24
  (n) => {
25
- var a, o;
26
- n && N(n), _(U.ONBOARDING_STEP_COMPLETED, {
27
- step: G.TABLES
28
- }), (a = t == null ? void 0 : t.current) == null || a.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), P(e), i(e, !1);
25
+ var a, i;
26
+ n && P(n), _(U.ONBOARDING_STEP_COMPLETED, {
27
+ step: v.TABLES
28
+ }), (a = t == null ? void 0 : t.current) == null || a.setLabelVisiblity(!0), (i = t == null ? void 0 : t.current) == null || i.stopLabelAnimation(), S(e), o(e, !1);
29
29
  },
30
- [e, i, P, N, _]
30
+ [e, o, S, P, _]
31
31
  ), y = C(
32
32
  (n, a) => {
33
33
  var g, h, E;
34
34
  if (!((g = t.current) != null && g.segmentedCardWrapperRef.current) || !((h = t.current) != null && h.labelRef.current))
35
35
  return;
36
- const o = t.current.labelRef.current.getBoundingClientRect(), l = (E = t.current) == null ? void 0 : E.segmentedCardWrapperRef.current.getBoundingClientRect();
37
- c(e, {
36
+ const i = t.current.labelRef.current.getBoundingClientRect(), l = (E = t.current) == null ? void 0 : E.segmentedCardWrapperRef.current.getBoundingClientRect();
37
+ u(e, {
38
38
  originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
39
39
  isActive: !1,
40
- type: u.TOOLTIP,
40
+ type: d.TOOLTIP,
41
41
  elementToHighlight: /* @__PURE__ */ r(
42
- v,
42
+ G,
43
43
  {
44
44
  ref: p,
45
45
  defaultTable: a,
46
46
  label: n.label,
47
47
  data: n.data,
48
- onPress: I,
49
- onGoBackFromTableLevel: I
48
+ onPress: b,
49
+ onGoBackFromTableLevel: b
50
50
  }
51
51
  ),
52
52
  indicator: {
53
53
  position: "left",
54
54
  backgroundColor: "YELLOW_4",
55
55
  width: 236,
56
- tooltipItem: /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
56
+ tooltipItem: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
57
57
  tooltipXCoOrdinates: 0,
58
- tooltipYCoOrdinates: o.height * 0.35
58
+ tooltipYCoOrdinates: i.height * 0.35
59
59
  }
60
- }), c(e, {
60
+ }), u(e, {
61
61
  originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
62
62
  isActive: !1,
63
- type: u.NUDGE,
63
+ type: d.NUDGE,
64
64
  indicator: {
65
65
  nudge: "click",
66
66
  content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
67
67
  nudgePointerX: l.width / 2 + 50,
68
68
  nudgePointerY: l.height * 0.4
69
69
  },
70
- elementToHighlight: /* @__PURE__ */ r(R, {})
71
- }), i(e, !1, Q), i(e, !0, ee);
72
- const d = setTimeout(() => {
70
+ elementToHighlight: /* @__PURE__ */ r(O, {})
71
+ }), o(e, !1, Q), o(e, !0, ee);
72
+ const s = setTimeout(() => {
73
73
  var f;
74
- clearTimeout(d), (f = p.current) == null || f.startLabelAnimation("YELLOW_4");
74
+ clearTimeout(s), (f = p.current) == null || f.startLabelAnimation("YELLOW_4");
75
75
  }, M);
76
- T.current.push(d);
76
+ T.current.push(s);
77
77
  },
78
- [c, I, e, i]
79
- ), b = C(() => {
80
- var o;
81
- S(), (o = s.current) == null || o.goToIndex($), i(e, !1, te), _(U.ONBOARDING_STEP_VIEWED, {
82
- step: G.TABLES
78
+ [u, b, e, o]
79
+ ), R = C(() => {
80
+ var i;
81
+ H(), (i = c.current) == null || i.goToIndex($), o(e, !1, te), _(U.ONBOARDING_STEP_VIEWED, {
82
+ step: v.TABLES
83
83
  });
84
84
  const n = setTimeout(() => {
85
85
  var l;
86
- clearTimeout(n), (l = t.current) == null || l.setLabelVisiblity(!1), i(e, !0);
86
+ clearTimeout(n), (l = t.current) == null || l.setLabelVisiblity(!1), o(e, !0);
87
87
  }, re);
88
88
  T.current.push(n);
89
89
  const a = setTimeout(() => {
@@ -91,84 +91,91 @@ const Ie = ({
91
91
  clearTimeout(a), (l = p.current) == null || l.startLabelAnimation("YELLOW_4");
92
92
  }, M);
93
93
  T.current.push(a);
94
- }, [s, e, i, S, _]), w = C(
94
+ }, [c, e, o, H, _]), w = C(
95
95
  (n, a = !1) => {
96
96
  var E, f, W, D, Y, k, B;
97
97
  if (L.current)
98
98
  return;
99
- const o = (E = s.current) == null ? void 0 : E.indicatorRefs, l = (f = s.current) == null ? void 0 : f.nextBtnRef, d = o == null ? void 0 : o[$];
100
- if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((D = t.current) != null && D.labelRef.current) || !o || !(l != null && l.current) || !d || !d.current)
99
+ const i = (E = c.current) == null ? void 0 : E.indicatorRefs, l = (f = c.current) == null ? void 0 : f.nextBtnRef, s = i == null ? void 0 : i[$];
100
+ if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((D = t.current) != null && D.labelRef.current) || !i || !(l != null && l.current) || !s || !s.current) {
101
+ console.error("Table card ref or carousel refs are not available");
101
102
  return;
103
+ }
102
104
  L.current = !0;
103
105
  const g = t.current.labelRef.current.getBoundingClientRect(), h = (Y = t.current) == null ? void 0 : Y.segmentedCardWrapperRef.current.getBoundingClientRect();
104
- H(e, []), a ? (c(e, {
105
- originalElementToHighlightRef: d,
106
- isActive: !1,
107
- type: u.TOOLTIP,
108
- elementToHighlight: /* @__PURE__ */ r(oe, { $isActive: !1 }),
109
- indicator: {
110
- position: "bottom",
111
- backgroundColor: "YELLOW_4",
112
- width: 52,
113
- tooltipItem: /* @__PURE__ */ r(
114
- O,
106
+ a ? (I(e, [
107
+ {
108
+ originalElementToHighlightRef: s,
109
+ isActive: !1,
110
+ type: d.TOOLTIP,
111
+ elementToHighlight: /* @__PURE__ */ r(ie, { $isActive: !1 }),
112
+ indicator: {
113
+ position: "bottom",
114
+ backgroundColor: "YELLOW_4",
115
+ width: 52,
116
+ tooltipItem: /* @__PURE__ */ r(
117
+ N,
118
+ {
119
+ $position: "absolute",
120
+ $flexDirection: "row",
121
+ style: { top: 6, left: 8, cursor: "pointer" },
122
+ onClick: R,
123
+ children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "NEW" })
124
+ }
125
+ ),
126
+ tooltipYCoOrdinates: 14
127
+ // Need some offset in Y direction from top
128
+ }
129
+ },
130
+ {
131
+ originalElementToHighlightRef: s,
132
+ isActive: !1,
133
+ type: d.NUDGE,
134
+ indicator: {
135
+ nudge: "click",
136
+ content: "",
137
+ nudgePointerY: 20
138
+ },
139
+ elementToHighlight: /* @__PURE__ */ r(O, {})
140
+ }
141
+ ]), o(e, !1, x), o(e, !0, oe)) : (I(e, [
142
+ {
143
+ originalElementToHighlightRef: (k = c.current) == null ? void 0 : k.nextBtnRef,
144
+ isActive: !1,
145
+ type: d.NUDGE,
146
+ indicator: {
147
+ nudge: "click",
148
+ content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
149
+ nudgePointerX: 0,
150
+ nudgePointerY: 0
151
+ },
152
+ elementToHighlight: /* @__PURE__ */ r(
153
+ j,
115
154
  {
116
- $position: "absolute",
117
- $flexDirection: "row",
118
- style: { top: 6, left: 8, cursor: "pointer" },
119
- onClick: b,
120
- children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "NEW" })
155
+ renderAs: "secondary",
156
+ Icon: J,
157
+ onClick: R,
158
+ analyticsLabel: z.JOURNEY_NEXT_ACTIVITY
121
159
  }
122
- ),
123
- tooltipYCoOrdinates: 14
124
- // Need some offset in Y direction from top
160
+ )
125
161
  }
126
- }), c(e, {
127
- originalElementToHighlightRef: d,
128
- isActive: !1,
129
- type: u.NUDGE,
130
- indicator: {
131
- nudge: "click",
132
- content: "",
133
- nudgePointerY: 20
134
- },
135
- elementToHighlight: /* @__PURE__ */ r(R, {})
136
- }), i(e, !1, x), i(e, !0, ie)) : (c(e, {
137
- originalElementToHighlightRef: (k = s.current) == null ? void 0 : k.nextBtnRef,
138
- isActive: !1,
139
- type: u.NUDGE,
140
- indicator: {
141
- nudge: "click",
142
- content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
143
- nudgePointerX: 0,
144
- nudgePointerY: 0
145
- },
146
- elementToHighlight: /* @__PURE__ */ r(
147
- j,
148
- {
149
- renderAs: "secondary",
150
- Icon: J,
151
- onClick: b,
152
- analyticsLabel: z.JOURNEY_NEXT_ACTIVITY
153
- }
154
- )
155
- }), (B = s.current) == null || B.goToIndex(ne), i(e, !1, x)), c(e, {
162
+ ]), (B = c.current) == null || B.goToIndex(ne), o(e, !1, x)), u(e, {
156
163
  originalElementToHighlightRef: t.current.labelRef,
157
164
  isActive: !1,
158
- type: u.TOOLTIP,
159
- elementToHighlight: /* @__PURE__ */ r(R, {}),
165
+ type: d.TOOLTIP,
166
+ elementToHighlight: /* @__PURE__ */ r(O, {}),
160
167
  indicator: {
161
168
  position: "right",
162
169
  backgroundColor: "YELLOW_4",
163
170
  width: 264,
164
- tooltipItem: /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
171
+ tooltipItem: /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(m, { $renderAs: "ab2-bold", children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
165
172
  tooltipXCoOrdinates: g.width + 50,
166
173
  tooltipYCoOrdinates: g.height / 2
167
174
  }
168
- }), c(e, {
175
+ }), u(e, {
169
176
  originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
170
177
  isActive: !1,
171
- type: u.NUDGE,
178
+ type: d.NUDGE,
172
179
  indicator: {
173
180
  nudge: "click",
174
181
  content: /* @__PURE__ */ r(m, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
@@ -176,7 +183,7 @@ const Ie = ({
176
183
  nudgePointerY: h.height / 2
177
184
  },
178
185
  elementToHighlight: /* @__PURE__ */ r(
179
- v,
186
+ G,
180
187
  {
181
188
  ref: p,
182
189
  label: n.label,
@@ -189,13 +196,13 @@ const Ie = ({
189
196
  });
190
197
  },
191
198
  [
199
+ u,
192
200
  c,
193
- s,
194
- b,
201
+ R,
195
202
  y,
196
203
  e,
197
- i,
198
- H
204
+ o,
205
+ I
199
206
  ]
200
207
  );
201
208
  return V(() => () => {
package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n ITableInfo,\n ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n PUZZLE_CARD_INDEX,\n SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n TABLE_CARD_INDEX,\n} from './constants';\nimport {\n GO_TO_TABLE_LAUNCHER_DURATION_MS,\n SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n SHOW_INITIAL_COACHMARK_AFTER_MS,\n SHOW_INITIAL_TOOLTIP_AFTER_MS,\n START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n carouselRefs,\n onTableSegmentClick,\n onJourneyComplete,\n}: IUseTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n const originalTableRef = useRef<ITableCardRef>(null);\n const highlightedTableRef = useRef<ITableCardRef>(null);\n const isJourneyInProgress = useRef(false);\n\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const endJourney = useCallback(\n (tableDetails?: ITableDetails) => {\n // Only when User clicked on play\n if (tableDetails) {\n onTableSegmentClick(tableDetails);\n }\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n step: Action.TABLES,\n });\n\n // Reset original table card ref label\n originalTableRef?.current?.setLabelVisiblity(true);\n originalTableRef?.current?.stopLabelAnimation();\n onJourneyComplete(journeyId);\n nextCoachmark(journeyId, false);\n },\n [journeyId, nextCoachmark, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n );\n\n const handleTableSegmentClick = useCallback(\n (launcherData: ITables, tableData: ITableInfo) => {\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current ||\n !originalTableRef.current?.labelRef.current\n ) {\n return;\n }\n\n const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n defaultTable={tableData}\n label={launcherData.label}\n data={launcherData.data}\n onPress={endJourney}\n onGoBackFromTableLevel={endJourney}\n />\n ),\n indicator: {\n position: 'left',\n backgroundColor: 'YELLOW_4',\n width: 236,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: 0,\n tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Pick a level\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height * 0.4,\n } as INudgeProps,\n elementToHighlight: <></>,\n });\n\n nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n const startAnimationOnLabelAgain = setTimeout(() => {\n clearTimeout(startAnimationOnLabelAgain);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(startAnimationOnLabelAgain);\n },\n [addCoachmark, endJourney, journeyId, nextCoachmark],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n step: Action.TABLES,\n });\n\n const showNudge = setTimeout(() => {\n clearTimeout(showNudge);\n originalTableRef.current?.setLabelVisiblity(false);\n nextCoachmark(journeyId, true);\n }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n timerRefs.current.push(showNudge);\n\n const animateLabel = setTimeout(() => {\n clearTimeout(animateLabel);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(animateLabel);\n }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n const startJourney = useCallback(\n (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n if (isJourneyInProgress.current) {\n return;\n }\n\n const paginationList = carouselRefs.current?.indicatorRefs;\n const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current ||\n !originalTableRef.current?.labelRef.current ||\n !paginationList ||\n !carouselNextBtnRef?.current ||\n !tablePaginationRef ||\n !tablePaginationRef.current\n ) {\n return;\n }\n\n isJourneyInProgress.current = true;\n\n const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n setJourney(journeyId, []);\n\n // TAKE THE USER TO THE TABLE CARD\n if (!isTutorialOnboardingDone) {\n addCoachmark(journeyId, {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={goToTableLauncher}\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n });\n carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n } else {\n addCoachmark(journeyId, {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <S.Indicator $isActive={false} />,\n indicator: {\n position: 'bottom',\n backgroundColor: 'YELLOW_4',\n width: 52,\n tooltipItem: (\n <FlexView\n $position=\"absolute\"\n $flexDirection=\"row\"\n style={{ top: 6, left: 8, cursor: 'pointer' }}\n onClick={goToTableLauncher}\n >\n <Text $renderAs=\"ab2-bold\">NEW</Text>\n </FlexView>\n ),\n tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n } as IArrowTooltipProps,\n });\n addCoachmark(journeyId, {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: '',\n nudgePointerY: 20,\n } as INudgeProps,\n elementToHighlight: <></>,\n });\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n }\n\n // SHOW THE USER SELECT A TABLE\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'right',\n backgroundColor: 'YELLOW_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Get faster at multiplication! Practice everyday and become a Tables champ.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: labelDims.width + 50,\n tooltipYCoOrdinates: labelDims.height / 2,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n {'Pick a table to start'}\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height / 2,\n } as INudgeProps,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n label={tablesData.label}\n data={tablesData.data}\n onPress={() => {}}\n onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n />\n ),\n });\n },\n [\n addCoachmark,\n carouselRefs,\n goToTableLauncher,\n handleTableSegmentClick,\n journeyId,\n nextCoachmark,\n setJourney,\n ],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n isJourneyInProgress.current = false;\n };\n }, [journeyId]);\n\n return {\n tableRef: originalTableRef,\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","useJourney","trackAnalytics","useUIContext","endJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}
1
+ {"version":3,"file":"use-table-launcher-journey.js","sources":["../../../../../../src/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../../ui/nudge/nudge-types';\nimport type { ITableCardRef, ITableDetails } from '../../comps/tables-card/tables-card-types';\nimport type {\n ITableInfo,\n ITables,\n} from '../../dal/use-get-circle-home-details-dal/use-get-circle-home-dal-types';\nimport type { IUseTableJourneyProps } from './use-table-launcher-journey-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport CaratRightIcon from '../../../../../assets/line-icons/icons/carat-right';\nimport { PLATFORM_EVENTS_STUDENT } from '../../../../analytics-events/platform-events-student';\nimport { JOURNEY_ID_STUDENT } from '../../../../journey/journey-id/journey-id-student';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport IconButton from '../../../../ui/buttons/icon-button/icon-button';\nimport { useUIContext } from '../../../../ui/context/context';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { CIRCLE_ONBOARDING_ANALYTICS_STEPS as Action } from '../../../enum/circle-onboarding-steps';\nimport { useCircleSounds } from '../../../hooks/use-circle-sounds/use-circle-sounds';\nimport { TablesCard } from '../../comps/tables-card/tables-card';\nimport { GAME_LAUNCHER_ANALYTICS_EVENTS } from '../../game-launcher-analytics-events';\nimport {\n PUZZLE_CARD_INDEX,\n SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS,\n SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS,\n TABLE_CARD_INDEX,\n} from './constants';\nimport {\n GO_TO_TABLE_LAUNCHER_DURATION_MS,\n SHOW_CLICK_TABLE_NUDGE_AFTER_MS,\n SHOW_INITIAL_COACHMARK_AFTER_MS,\n SHOW_INITIAL_TOOLTIP_AFTER_MS,\n START_ANIMATING_CLONED_ELEM,\n} from './constants';\nimport * as S from './use-table-launcher-journey-styled';\n\nexport const useTableLauncherJourney = ({\n carouselRefs,\n onTableSegmentClick,\n onJourneyComplete,\n}: IUseTableJourneyProps) => {\n const journeyId = JOURNEY_ID_STUDENT.CIRCLE_TABLES_INTRO_JOURNEY;\n const originalTableRef = useRef<ITableCardRef>(null);\n const highlightedTableRef = useRef<ITableCardRef>(null);\n const isJourneyInProgress = useRef(false);\n\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const endJourney = useCallback(\n (tableDetails?: ITableDetails) => {\n // Only when User clicked on play\n if (tableDetails) {\n onTableSegmentClick(tableDetails);\n }\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_COMPLETED, {\n step: Action.TABLES,\n });\n\n // Reset original table card ref label\n originalTableRef?.current?.setLabelVisiblity(true);\n originalTableRef?.current?.stopLabelAnimation();\n onJourneyComplete(journeyId);\n nextCoachmark(journeyId, false);\n },\n [journeyId, nextCoachmark, onJourneyComplete, onTableSegmentClick, trackAnalytics],\n );\n\n const handleTableSegmentClick = useCallback(\n (launcherData: ITables, tableData: ITableInfo) => {\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current ||\n !originalTableRef.current?.labelRef.current\n ) {\n return;\n }\n\n const segmentedCardDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n defaultTable={tableData}\n label={launcherData.label}\n data={launcherData.data}\n onPress={endJourney}\n onGoBackFromTableLevel={endJourney}\n />\n ),\n indicator: {\n position: 'left',\n backgroundColor: 'YELLOW_4',\n width: 236,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">Each table has 3 levels—clear them and earn 3 stars!</Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: 0,\n tooltipYCoOrdinates: segmentedCardDims.height * 0.35,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Pick a level\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height * 0.4,\n } as INudgeProps,\n elementToHighlight: <></>,\n });\n\n nextCoachmark(journeyId, false, SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS); // Show coachmark => Each table has 3... and Hide the previous two\n nextCoachmark(journeyId, true, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS); // Show nudge => Pick a level\n\n const startAnimationOnLabelAgain = setTimeout(() => {\n clearTimeout(startAnimationOnLabelAgain);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(startAnimationOnLabelAgain);\n },\n [addCoachmark, endJourney, journeyId, nextCoachmark],\n );\n\n const goToTableLauncher = useCallback(() => {\n playButtonSound();\n carouselRefs.current?.goToIndex(TABLE_CARD_INDEX);\n nextCoachmark(journeyId, false, GO_TO_TABLE_LAUNCHER_DURATION_MS);\n\n trackAnalytics(PLATFORM_EVENTS_STUDENT.ONBOARDING_STEP_VIEWED, {\n step: Action.TABLES,\n });\n\n const showNudge = setTimeout(() => {\n clearTimeout(showNudge);\n originalTableRef.current?.setLabelVisiblity(false);\n nextCoachmark(journeyId, true);\n }, SHOW_CLICK_TABLE_NUDGE_AFTER_MS);\n\n timerRefs.current.push(showNudge);\n\n const animateLabel = setTimeout(() => {\n clearTimeout(animateLabel);\n highlightedTableRef.current?.startLabelAnimation('YELLOW_4');\n }, START_ANIMATING_CLONED_ELEM);\n\n timerRefs.current.push(animateLabel);\n }, [carouselRefs, journeyId, nextCoachmark, playButtonSound, trackAnalytics]);\n\n const startJourney = useCallback(\n (tablesData: ITables, isTutorialOnboardingDone: boolean = false) => {\n if (isJourneyInProgress.current) {\n return;\n }\n\n const paginationList = carouselRefs.current?.indicatorRefs;\n const carouselNextBtnRef = carouselRefs.current?.nextBtnRef;\n const tablePaginationRef = paginationList?.[TABLE_CARD_INDEX];\n\n if (\n !originalTableRef.current?.segmentedCardWrapperRef.current ||\n !originalTableRef.current?.labelRef.current ||\n !paginationList ||\n !carouselNextBtnRef?.current ||\n !tablePaginationRef ||\n !tablePaginationRef.current\n ) {\n console.error('Table card ref or carousel refs are not available');\n\n return;\n }\n\n isJourneyInProgress.current = true;\n\n const labelDims = originalTableRef.current.labelRef.current.getBoundingClientRect();\n const tableCardDims =\n originalTableRef.current?.segmentedCardWrapperRef.current.getBoundingClientRect();\n\n // TAKE THE USER TO THE TABLE CARD\n if (!isTutorialOnboardingDone) {\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: carouselRefs.current?.nextBtnRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n Click to proceed\n </Text>\n ),\n nudgePointerX: 0,\n nudgePointerY: 0,\n } as INudgeProps,\n elementToHighlight: (\n <IconButton\n renderAs=\"secondary\"\n Icon={CaratRightIcon}\n onClick={goToTableLauncher}\n analyticsLabel={GAME_LAUNCHER_ANALYTICS_EVENTS.JOURNEY_NEXT_ACTIVITY}\n />\n ),\n },\n ]);\n carouselRefs.current?.goToIndex(PUZZLE_CARD_INDEX);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show nudge => Click to proceed\n } else {\n setJourney(journeyId, [\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <S.Indicator $isActive={false} />,\n indicator: {\n position: 'bottom',\n backgroundColor: 'YELLOW_4',\n width: 52,\n tooltipItem: (\n <FlexView\n $position=\"absolute\"\n $flexDirection=\"row\"\n style={{ top: 6, left: 8, cursor: 'pointer' }}\n onClick={goToTableLauncher}\n >\n <Text $renderAs=\"ab2-bold\">NEW</Text>\n </FlexView>\n ),\n tooltipYCoOrdinates: 14, // Need some offset in Y direction from top\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: tablePaginationRef as React.RefObject<HTMLDivElement>,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: '',\n nudgePointerY: 20,\n } as INudgeProps,\n elementToHighlight: <></>,\n },\n ]);\n nextCoachmark(journeyId, false, SHOW_INITIAL_COACHMARK_AFTER_MS); // Show Coachmark => NEW\n nextCoachmark(journeyId, true, SHOW_INITIAL_TOOLTIP_AFTER_MS); // Show Nudge over Coachmark\n }\n\n // SHOW THE USER SELECT A TABLE\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.labelRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: <></>,\n indicator: {\n position: 'right',\n backgroundColor: 'YELLOW_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs=\"ab2-bold\">\n Get faster at multiplication! Practice everyday and become a Tables champ.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: labelDims.width + 50,\n tooltipYCoOrdinates: labelDims.height / 2,\n } as IArrowTooltipProps,\n });\n\n addCoachmark(journeyId, {\n originalElementToHighlightRef: originalTableRef.current.segmentedCardWrapperRef,\n isActive: false,\n type: IndicatorType.NUDGE,\n indicator: {\n nudge: 'click',\n content: (\n <Text $renderAs=\"ab1\" $color=\"WHITE\">\n {'Pick a table to start'}\n </Text>\n ),\n nudgePointerX: tableCardDims.width / 2 + 50,\n nudgePointerY: tableCardDims.height / 2,\n } as INudgeProps,\n elementToHighlight: (\n <TablesCard\n ref={highlightedTableRef}\n label={tablesData.label}\n data={tablesData.data}\n onPress={() => {}}\n onPressTableSegment={tableInfo => handleTableSegmentClick(tablesData, tableInfo)}\n />\n ),\n });\n },\n [\n addCoachmark,\n carouselRefs,\n goToTableLauncher,\n handleTableSegmentClick,\n journeyId,\n nextCoachmark,\n setJourney,\n ],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n isJourneyInProgress.current = false;\n };\n }, [journeyId]);\n\n return {\n tableRef: originalTableRef,\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","originalTableRef","useRef","highlightedTableRef","isJourneyInProgress","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","useJourney","trackAnalytics","useUIContext","endJourney","useCallback","tableDetails","PLATFORM_EVENTS_STUDENT","Action","_a","_b","handleTableSegmentClick","launcherData","tableData","segmentedCardDims","tableCardDims","_c","IndicatorType","jsx","TablesCard","FlexView","Text","Fragment","SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS","SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS","startAnimationOnLabelAgain","START_ANIMATING_CLONED_ELEM","goToTableLauncher","TABLE_CARD_INDEX","GO_TO_TABLE_LAUNCHER_DURATION_MS","showNudge","SHOW_CLICK_TABLE_NUDGE_AFTER_MS","animateLabel","startJourney","tablesData","isTutorialOnboardingDone","paginationList","carouselNextBtnRef","tablePaginationRef","_d","labelDims","_e","S.Indicator","SHOW_INITIAL_COACHMARK_AFTER_MS","SHOW_INITIAL_TOOLTIP_AFTER_MS","_f","IconButton","CaratRightIcon","GAME_LAUNCHER_ANALYTICS_EVENTS","_g","PUZZLE_CARD_INDEX","tableInfo","useEffect","timer"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cuemath/leap",
3
- "version": "2.8.49-rj-12",
3
+ "version": "2.8.49-rj-14",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"