@cuemath/leap 2.8.49-rj-14 → 2.8.49-rj-15
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.
- package/dist/features/circle-games/game-launcher/dal/use-post-update-circle-journey-dal/use-post-update-circle-journey-dal.js +11 -11
- package/dist/features/circle-games/game-launcher/dal/use-post-update-circle-journey-dal/use-post-update-circle-journey-dal.js.map +1 -1
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +36 -38
- package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
@@ -1,21 +1,21 @@
|
|
1
1
|
import { useCallback as n } from "react";
|
2
2
|
import { usePostUpdateCircleCoachmark as a } from "../../api/update-circle-onboarding/post-circle-coachmark-api.js";
|
3
|
-
const p = (
|
3
|
+
const p = () => {
|
4
4
|
const {
|
5
|
-
post:
|
6
|
-
isProcessing:
|
7
|
-
onComplete:
|
8
|
-
...
|
9
|
-
} = a(),
|
10
|
-
(l) => {
|
11
|
-
|
12
|
-
intelenrollment_id:
|
5
|
+
post: o,
|
6
|
+
isProcessing: e,
|
7
|
+
onComplete: t,
|
8
|
+
...r
|
9
|
+
} = a(), s = n(
|
10
|
+
(c, l) => {
|
11
|
+
o({
|
12
|
+
intelenrollment_id: c,
|
13
13
|
completed_coachmarks: l
|
14
14
|
});
|
15
15
|
},
|
16
|
-
[
|
16
|
+
[o]
|
17
17
|
);
|
18
|
-
return { ...
|
18
|
+
return { ...r, isProcessing: e, onComplete: t, postCircleJourneyCompletion: s };
|
19
19
|
};
|
20
20
|
export {
|
21
21
|
p as usePostUpdateCircleJourneyDal
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"use-post-update-circle-journey-dal.js","sources":["../../../../../../src/features/circle-games/game-launcher/dal/use-post-update-circle-journey-dal/use-post-update-circle-journey-dal.ts"],"sourcesContent":["import type { TJourneyId } from '../../../../journey/journey-id/journey-id-types';\n\nimport { useCallback } from 'react';\n\nimport { usePostUpdateCircleCoachmark } from '../../api/update-circle-onboarding/post-circle-coachmark-api';\n\nexport const usePostUpdateCircleJourneyDal = (
|
1
|
+
{"version":3,"file":"use-post-update-circle-journey-dal.js","sources":["../../../../../../src/features/circle-games/game-launcher/dal/use-post-update-circle-journey-dal/use-post-update-circle-journey-dal.ts"],"sourcesContent":["import type { TJourneyId } from '../../../../journey/journey-id/journey-id-types';\n\nimport { useCallback } from 'react';\n\nimport { usePostUpdateCircleCoachmark } from '../../api/update-circle-onboarding/post-circle-coachmark-api';\n\nexport const usePostUpdateCircleJourneyDal = (): Omit<\n ReturnType<typeof usePostUpdateCircleCoachmark>,\n 'data' | 'post'\n> & {\n postCircleJourneyCompletion: (userId: string, journeyCompletionIds: TJourneyId[]) => void;\n} => {\n const {\n post: postCircleCoachmark,\n isProcessing,\n onComplete,\n ...rest\n } = usePostUpdateCircleCoachmark();\n\n const postCircleJourneyCompletion = useCallback(\n (userId: string, journeyCompletionIds: TJourneyId[]) => {\n postCircleCoachmark({\n intelenrollment_id: userId,\n completed_coachmarks: journeyCompletionIds,\n });\n },\n [postCircleCoachmark],\n );\n\n return { ...rest, isProcessing, onComplete, postCircleJourneyCompletion };\n};\n"],"names":["usePostUpdateCircleJourneyDal","postCircleCoachmark","isProcessing","onComplete","rest","usePostUpdateCircleCoachmark","postCircleJourneyCompletion","useCallback","userId","journeyCompletionIds"],"mappings":";;AAMO,MAAMA,IAAgC,MAKxC;AACG,QAAA;AAAA,IACJ,MAAMC;AAAA,IACN,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,MACDC,EAA6B,GAE3BC,IAA8BC;AAAA,IAClC,CAACC,GAAgBC,MAAuC;AAClC,MAAAR,EAAA;AAAA,QAClB,oBAAoBO;AAAA,QACpB,sBAAsBC;AAAA,MAAA,CACvB;AAAA,IACH;AAAA,IACA,CAACR,CAAmB;AAAA,EAAA;AAGtB,SAAO,EAAE,GAAGG,GAAM,cAAAF,GAAc,YAAAC,GAAY,6BAAAG,EAA4B;AAC1E;"}
|
@@ -9,40 +9,40 @@ import j from "../../../../ui/buttons/icon-button/icon-button.js";
|
|
9
9
|
import { useUIContext as Z } from "../../../../ui/context/context.js";
|
10
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
|
12
|
+
import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as G } 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
|
14
|
+
import { TablesCard as v } 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
|
17
|
-
import { Indicator as
|
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";
|
18
18
|
const Ie = ({
|
19
|
-
carouselRefs:
|
19
|
+
carouselRefs: a,
|
20
20
|
onTableSegmentClick: P,
|
21
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: H } = q(), { nextCoachmark:
|
23
|
+
const e = X.CIRCLE_TABLES_INTRO_JOURNEY, t = A(null), p = A(null), L = A(!1), T = A([]), { playButtonSound: H } = q(), { nextCoachmark: i, setJourney: I, addCoachmark: u } = K(), { onEvent: _ } = Z(), b = C(
|
24
24
|
(n) => {
|
25
|
-
var
|
25
|
+
var c, o;
|
26
26
|
n && P(n), _(U.ONBOARDING_STEP_COMPLETED, {
|
27
|
-
step:
|
28
|
-
}), (
|
27
|
+
step: G.TABLES
|
28
|
+
}), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), S(e), i(e, !1);
|
29
29
|
},
|
30
|
-
[e,
|
30
|
+
[e, i, S, P, _]
|
31
31
|
), y = C(
|
32
|
-
(n,
|
32
|
+
(n, c) => {
|
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
|
36
|
+
const o = t.current.labelRef.current.getBoundingClientRect(), l = (E = t.current) == null ? void 0 : E.segmentedCardWrapperRef.current.getBoundingClientRect();
|
37
37
|
u(e, {
|
38
38
|
originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
|
39
39
|
isActive: !1,
|
40
40
|
type: d.TOOLTIP,
|
41
41
|
elementToHighlight: /* @__PURE__ */ r(
|
42
|
-
|
42
|
+
v,
|
43
43
|
{
|
44
44
|
ref: p,
|
45
|
-
defaultTable:
|
45
|
+
defaultTable: c,
|
46
46
|
label: n.label,
|
47
47
|
data: n.data,
|
48
48
|
onPress: b,
|
@@ -55,7 +55,7 @@ const Ie = ({
|
|
55
55
|
width: 236,
|
56
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:
|
58
|
+
tooltipYCoOrdinates: o.height * 0.35
|
59
59
|
}
|
60
60
|
}), u(e, {
|
61
61
|
originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
|
@@ -68,47 +68,45 @@ const Ie = ({
|
|
68
68
|
nudgePointerY: l.height * 0.4
|
69
69
|
},
|
70
70
|
elementToHighlight: /* @__PURE__ */ r(O, {})
|
71
|
-
}),
|
71
|
+
}), i(e, !1, Q), i(e, !0, ee);
|
72
72
|
const s = setTimeout(() => {
|
73
73
|
var f;
|
74
74
|
clearTimeout(s), (f = p.current) == null || f.startLabelAnimation("YELLOW_4");
|
75
75
|
}, M);
|
76
76
|
T.current.push(s);
|
77
77
|
},
|
78
|
-
[u, b, e,
|
78
|
+
[u, b, e, i]
|
79
79
|
), R = C(() => {
|
80
|
-
var
|
81
|
-
H(), (
|
82
|
-
step:
|
80
|
+
var o;
|
81
|
+
H(), (o = a.current) == null || o.goToIndex($), i(e, !1, te), _(U.ONBOARDING_STEP_VIEWED, {
|
82
|
+
step: G.TABLES
|
83
83
|
});
|
84
84
|
const n = setTimeout(() => {
|
85
85
|
var l;
|
86
|
-
clearTimeout(n), (l = t.current) == null || l.setLabelVisiblity(!1),
|
86
|
+
clearTimeout(n), (l = t.current) == null || l.setLabelVisiblity(!1), i(e, !0);
|
87
87
|
}, re);
|
88
88
|
T.current.push(n);
|
89
|
-
const
|
89
|
+
const c = setTimeout(() => {
|
90
90
|
var l;
|
91
|
-
clearTimeout(
|
91
|
+
clearTimeout(c), (l = p.current) == null || l.startLabelAnimation("YELLOW_4");
|
92
92
|
}, M);
|
93
|
-
T.current.push(
|
94
|
-
}, [
|
95
|
-
(n,
|
93
|
+
T.current.push(c);
|
94
|
+
}, [a, e, i, H, _]), w = C(
|
95
|
+
(n, c = !1) => {
|
96
96
|
var E, f, W, D, Y, k, B;
|
97
97
|
if (L.current)
|
98
98
|
return;
|
99
|
-
const
|
100
|
-
if (!((W = t.current) != null && W.segmentedCardWrapperRef.current) || !((D = t.current) != null && D.labelRef.current) || !
|
101
|
-
console.error("Table card ref or carousel refs are not available");
|
99
|
+
const o = (E = a.current) == null ? void 0 : E.indicatorRefs, l = (f = a.current) == null ? void 0 : f.nextBtnRef, s = 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) || !s || !s.current)
|
102
101
|
return;
|
103
|
-
}
|
104
102
|
L.current = !0;
|
105
103
|
const g = t.current.labelRef.current.getBoundingClientRect(), h = (Y = t.current) == null ? void 0 : Y.segmentedCardWrapperRef.current.getBoundingClientRect();
|
106
|
-
|
104
|
+
c ? (I(e, [
|
107
105
|
{
|
108
106
|
originalElementToHighlightRef: s,
|
109
107
|
isActive: !1,
|
110
108
|
type: d.TOOLTIP,
|
111
|
-
elementToHighlight: /* @__PURE__ */ r(
|
109
|
+
elementToHighlight: /* @__PURE__ */ r(oe, { $isActive: !1 }),
|
112
110
|
indicator: {
|
113
111
|
position: "bottom",
|
114
112
|
backgroundColor: "YELLOW_4",
|
@@ -138,9 +136,9 @@ const Ie = ({
|
|
138
136
|
},
|
139
137
|
elementToHighlight: /* @__PURE__ */ r(O, {})
|
140
138
|
}
|
141
|
-
]),
|
139
|
+
]), i(e, !1, x), i(e, !0, ie)) : (I(e, [
|
142
140
|
{
|
143
|
-
originalElementToHighlightRef: (k =
|
141
|
+
originalElementToHighlightRef: (k = a.current) == null ? void 0 : k.nextBtnRef,
|
144
142
|
isActive: !1,
|
145
143
|
type: d.NUDGE,
|
146
144
|
indicator: {
|
@@ -159,7 +157,7 @@ const Ie = ({
|
|
159
157
|
}
|
160
158
|
)
|
161
159
|
}
|
162
|
-
]), (B =
|
160
|
+
]), (B = a.current) == null || B.goToIndex(ne), i(e, !1, x)), u(e, {
|
163
161
|
originalElementToHighlightRef: t.current.labelRef,
|
164
162
|
isActive: !1,
|
165
163
|
type: d.TOOLTIP,
|
@@ -183,7 +181,7 @@ const Ie = ({
|
|
183
181
|
nudgePointerY: h.height / 2
|
184
182
|
},
|
185
183
|
elementToHighlight: /* @__PURE__ */ r(
|
186
|
-
|
184
|
+
v,
|
187
185
|
{
|
188
186
|
ref: p,
|
189
187
|
label: n.label,
|
@@ -197,11 +195,11 @@ const Ie = ({
|
|
197
195
|
},
|
198
196
|
[
|
199
197
|
u,
|
200
|
-
|
198
|
+
a,
|
201
199
|
R,
|
202
200
|
y,
|
203
201
|
e,
|
204
|
-
|
202
|
+
i,
|
205
203
|
I
|
206
204
|
]
|
207
205
|
);
|
@@ -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 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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"}
|
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 // 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/dist/index.d.ts
CHANGED
@@ -5073,8 +5073,8 @@ declare const usePostUpdateCircleCoachmark: (opts?: {
|
|
5073
5073
|
onComplete: (() => void) | undefined;
|
5074
5074
|
};
|
5075
5075
|
|
5076
|
-
export declare const usePostUpdateCircleJourneyDal: (
|
5077
|
-
postCircleJourneyCompletion: (journeyCompletionIds: TJourneyId[]) => void;
|
5076
|
+
export declare const usePostUpdateCircleJourneyDal: () => Omit<ReturnType<typeof usePostUpdateCircleCoachmark>, "data" | "post"> & {
|
5077
|
+
postCircleJourneyCompletion: (userId: string, journeyCompletionIds: TJourneyId[]) => void;
|
5078
5078
|
};
|
5079
5079
|
|
5080
5080
|
export declare const User2Icon: React.FC<React.SVGProps<SVGSVGElement>>;
|