@cuemath/leap 2.9.8-as11 → 2.9.8-as12
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.
@@ -1,36 +1,35 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import { useRef as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
import {
|
10
|
-
import {
|
11
|
-
import
|
12
|
-
|
13
|
-
const
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
if (!(t != null && t.current) || !(r != null && r.current) || !m.current)
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
2
|
+
import { useRef as n, useCallback as p, useMemo as S, useEffect as x } from "react";
|
3
|
+
import N from "../../chapters-v2/chapter-details/block-sections/block-sections.js";
|
4
|
+
import L from "../../chapters-v2/chapter-details/chapter-banner/chapter-banner.js";
|
5
|
+
import P from "../../chapters-v2/chapter-details/chapter-details.js";
|
6
|
+
import _ from "../../ui/layout/flex-view.js";
|
7
|
+
import { JOURNEY_ID_STUDENT as I } from "../journey-id/journey-id-student.js";
|
8
|
+
import { PROGRESS_STAT_MOCK as k, BLOCK_MOCKS as K } from "../mocks/chapter-page-journey-mock-data.js";
|
9
|
+
import { IndicatorType as l } from "../use-journey/constants.js";
|
10
|
+
import { useJourney as H } from "../use-journey/use-journey.js";
|
11
|
+
import a from "./use-home-page-journey/tooltip-item.js";
|
12
|
+
const F = () => {
|
13
|
+
const t = I.CHAPTER_PAGE_JOURNEY, e = n(null), r = n(null), s = n(null), c = n([]), { nextCoachmark: d, setJourney: h, endJourney: C } = H(), i = p(() => {
|
14
|
+
d(t, !1, 0, !0);
|
15
|
+
}, [t, d]), g = p(() => {
|
16
|
+
document.body.style.overflow = "unset", C(t);
|
17
|
+
}, [C, t]), f = p(
|
18
|
+
({ chapterDetails: u, userChapterId: A, studentId: B, userType: T }) => {
|
19
|
+
const { name: O, image_hue: m, image_url: b } = u;
|
20
|
+
if (!(e != null && e.current) || !(r != null && r.current) || !s.current)
|
22
21
|
return;
|
23
|
-
const
|
22
|
+
const E = e.current.getBoundingClientRect(), R = [
|
24
23
|
{
|
25
|
-
originalElementToHighlightRef:
|
24
|
+
originalElementToHighlightRef: e,
|
26
25
|
isActive: !1,
|
27
|
-
type:
|
28
|
-
elementToHighlight: /* @__PURE__ */
|
29
|
-
|
26
|
+
type: l.TOOLTIP,
|
27
|
+
elementToHighlight: /* @__PURE__ */ o(
|
28
|
+
P,
|
30
29
|
{
|
31
|
-
userChapterId:
|
32
|
-
studentId:
|
33
|
-
userType:
|
30
|
+
userChapterId: A,
|
31
|
+
studentId: B,
|
32
|
+
userType: T,
|
34
33
|
onBlockSkipUnskip: () => null,
|
35
34
|
onNodeAttempt: () => null,
|
36
35
|
onNodeAttemptLocationChange: () => null,
|
@@ -43,39 +42,34 @@ const q = () => {
|
|
43
42
|
),
|
44
43
|
indicator: {
|
45
44
|
position: "left",
|
46
|
-
tooltipYCoOrdinates: -(
|
45
|
+
tooltipYCoOrdinates: -(E.height / 2) + 178,
|
47
46
|
backgroundColor: "BLUE_4",
|
48
47
|
borderColor: "BLACK",
|
49
48
|
arrowColor: "BLACK",
|
50
49
|
arrowSize: 12,
|
51
50
|
width: 264,
|
52
|
-
tooltipItem: /* @__PURE__ */
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
renderAs: "secondary",
|
61
|
-
onClick: i
|
62
|
-
}
|
63
|
-
)
|
64
|
-
] })
|
51
|
+
tooltipItem: /* @__PURE__ */ o(
|
52
|
+
a,
|
53
|
+
{
|
54
|
+
text: "Welcome to the all new chapter experience.",
|
55
|
+
buttonLabel: "Next",
|
56
|
+
onButtonClick: i
|
57
|
+
}
|
58
|
+
)
|
65
59
|
}
|
66
60
|
},
|
67
61
|
{
|
68
62
|
originalElementToHighlightRef: r,
|
69
|
-
elementToHighlight: /* @__PURE__ */
|
70
|
-
|
63
|
+
elementToHighlight: /* @__PURE__ */ o(
|
64
|
+
L,
|
71
65
|
{
|
72
|
-
title:
|
73
|
-
progressStats:
|
74
|
-
imageUrl:
|
75
|
-
imageHue:
|
66
|
+
title: O,
|
67
|
+
progressStats: k,
|
68
|
+
imageUrl: b,
|
69
|
+
imageHue: m
|
76
70
|
}
|
77
71
|
),
|
78
|
-
type:
|
72
|
+
type: l.TOOLTIP,
|
79
73
|
indicator: {
|
80
74
|
position: "bottom",
|
81
75
|
tooltipXCoOrdinates: -45,
|
@@ -85,34 +79,29 @@ const q = () => {
|
|
85
79
|
arrowColor: "BLACK",
|
86
80
|
width: 264,
|
87
81
|
arrowSize: 12,
|
88
|
-
tooltipItem: /* @__PURE__ */
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
renderAs: "secondary",
|
97
|
-
onClick: i
|
98
|
-
}
|
99
|
-
)
|
100
|
-
] })
|
82
|
+
tooltipItem: /* @__PURE__ */ o(
|
83
|
+
a,
|
84
|
+
{
|
85
|
+
text: "A chapter is divided into *core sheets (compulsory), and supplementary sheets.",
|
86
|
+
buttonLabel: "Next",
|
87
|
+
onButtonClick: i
|
88
|
+
}
|
89
|
+
)
|
101
90
|
},
|
102
91
|
isActive: !1
|
103
92
|
},
|
104
93
|
{
|
105
94
|
originalElementToHighlightRef: r,
|
106
|
-
elementToHighlight: /* @__PURE__ */
|
107
|
-
|
95
|
+
elementToHighlight: /* @__PURE__ */ o(
|
96
|
+
L,
|
108
97
|
{
|
109
|
-
title:
|
110
|
-
progressStats:
|
111
|
-
imageUrl:
|
112
|
-
imageHue:
|
98
|
+
title: O,
|
99
|
+
progressStats: k,
|
100
|
+
imageUrl: b,
|
101
|
+
imageHue: m
|
113
102
|
}
|
114
103
|
),
|
115
|
-
type:
|
104
|
+
type: l.TOOLTIP,
|
116
105
|
indicator: {
|
117
106
|
position: "bottom",
|
118
107
|
tooltipXCoOrdinates: -275,
|
@@ -122,26 +111,21 @@ const q = () => {
|
|
122
111
|
arrowColor: "BLACK",
|
123
112
|
arrowSize: 12,
|
124
113
|
width: 264,
|
125
|
-
tooltipItem: /* @__PURE__ */
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
renderAs: "secondary",
|
134
|
-
onClick: i
|
135
|
-
}
|
136
|
-
)
|
137
|
-
] })
|
114
|
+
tooltipItem: /* @__PURE__ */ o(
|
115
|
+
a,
|
116
|
+
{
|
117
|
+
text: "Easily track the progress of the core sheets.",
|
118
|
+
buttonLabel: "Next",
|
119
|
+
onButtonClick: i
|
120
|
+
}
|
121
|
+
)
|
138
122
|
},
|
139
123
|
isActive: !1
|
140
124
|
},
|
141
125
|
{
|
142
|
-
originalElementToHighlightRef:
|
143
|
-
elementToHighlight: /* @__PURE__ */
|
144
|
-
type:
|
126
|
+
originalElementToHighlightRef: s,
|
127
|
+
elementToHighlight: /* @__PURE__ */ o(_, { $widthX: 50, children: /* @__PURE__ */ o(N, { userType: T, blocks: K, imageHue: m }) }),
|
128
|
+
type: l.TOOLTIP,
|
145
129
|
indicator: {
|
146
130
|
position: "top",
|
147
131
|
tooltipXCoOrdinates: -150,
|
@@ -151,44 +135,39 @@ const q = () => {
|
|
151
135
|
arrowColor: "BLACK",
|
152
136
|
arrowSize: 12,
|
153
137
|
width: 264,
|
154
|
-
tooltipItem: /* @__PURE__ */
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
renderAs: "secondary",
|
163
|
-
onClick: A
|
164
|
-
}
|
165
|
-
)
|
166
|
-
] })
|
138
|
+
tooltipItem: /* @__PURE__ */ o(
|
139
|
+
a,
|
140
|
+
{
|
141
|
+
text: "Core sheets are marked to help you find them faster.",
|
142
|
+
buttonLabel: "Got it",
|
143
|
+
onButtonClick: g
|
144
|
+
}
|
145
|
+
)
|
167
146
|
},
|
168
147
|
isActive: !1
|
169
148
|
}
|
170
149
|
];
|
171
|
-
|
172
|
-
const
|
173
|
-
clearTimeout(
|
150
|
+
h(t, R);
|
151
|
+
const w = setTimeout(() => {
|
152
|
+
clearTimeout(w), window.scrollTo(0, 0), document.body.style.overflow = "hidden", i();
|
174
153
|
}, 500);
|
175
|
-
|
154
|
+
c.current.push(w);
|
176
155
|
},
|
177
|
-
[i,
|
178
|
-
),
|
156
|
+
[i, g, h, t]
|
157
|
+
), y = S(
|
179
158
|
() => ({
|
180
|
-
chapterPageRef:
|
159
|
+
chapterPageRef: e,
|
181
160
|
bannerRef: r,
|
182
|
-
coreBlocksRef:
|
183
|
-
startJourney:
|
161
|
+
coreBlocksRef: s,
|
162
|
+
startJourney: f
|
184
163
|
}),
|
185
|
-
[
|
164
|
+
[f]
|
186
165
|
);
|
187
|
-
return
|
188
|
-
|
189
|
-
}, []),
|
166
|
+
return x(() => () => {
|
167
|
+
c.current.forEach((u) => clearTimeout(u)), c.current = [];
|
168
|
+
}, []), y;
|
190
169
|
};
|
191
170
|
export {
|
192
|
-
|
171
|
+
F as useChapterPageJourney
|
193
172
|
};
|
194
173
|
//# sourceMappingURL=use-chapter-journey.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"use-chapter-journey.js","sources":["../../../../src/features/journey/hooks/use-chapter-journey.tsx"],"sourcesContent":["import type { IUserChapterData } from '../../chapters-v2/chapter-details/chapter-details-types';\nimport type { IArrowTooltipProps } from '../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { TUserTypes } from '../../ui/types';\nimport type { ICoachmarkProps } from '../use-journey/journey-context-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport BlockSections from '../../chapters-v2/chapter-details/block-sections/block-sections';\nimport ChapterBanner from '../../chapters-v2/chapter-details/chapter-banner/chapter-banner';\nimport ChapterDetails from '../../chapters-v2/chapter-details/chapter-details';\nimport Button from '../../ui/buttons/button/button';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { JOURNEY_ID_STUDENT } from '../journey-id/journey-id-student';\nimport { BLOCK_MOCKS, PROGRESS_STAT_MOCK } from '../mocks/chapter-page-journey-mock-data';\nimport { IndicatorType } from '../use-journey/constants';\nimport { useJourney } from '../use-journey/use-journey';\n\ninterface IChapterStartJourneyProps {\n chapterDetails: IUserChapterData;\n userChapterId: string;\n studentId: string;\n userType: TUserTypes;\n}\n\nexport const useChapterPageJourney = () => {\n const journeyId = JOURNEY_ID_STUDENT.CHAPTER_PAGE_JOURNEY;\n\n const chapterPageRef = useRef<HTMLDivElement>(null);\n const bannerRef = useRef<HTMLDivElement>(null);\n const coreBlocksRef = useRef<HTMLDivElement>(null);\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n const { nextCoachmark, setJourney, endJourney } = useJourney();\n\n const handleNextCoachmark = useCallback(() => {\n nextCoachmark(journeyId, false, 0, true);\n }, [journeyId, nextCoachmark]);\n\n const handleEndJourney = useCallback(() => {\n document.body.style.overflow = 'unset';\n endJourney(journeyId);\n }, [endJourney, journeyId]);\n\n const startJourney = useCallback(\n ({ chapterDetails, userChapterId, studentId, userType }: IChapterStartJourneyProps) => {\n const { name, image_hue: imageHue, image_url: imageUrl } = chapterDetails;\n\n if (!chapterPageRef?.current || !bannerRef?.current || !coreBlocksRef.current) {\n return;\n }\n\n const chapterPageRect = chapterPageRef.current.getBoundingClientRect();\n\n const chapterPageSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: chapterPageRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: (\n <ChapterDetails\n userChapterId={userChapterId}\n studentId={studentId}\n userType={userType}\n onBlockSkipUnskip={() => null}\n onNodeAttempt={() => null}\n onNodeAttemptLocationChange={() => null}\n onNodeMarkAsDone={() => null}\n onNodeReattempt={() => null}\n onNodeReview={() => null}\n onNodeView={() => null}\n onExit={() => null}\n />\n ),\n indicator: {\n position: 'left',\n tooltipYCoOrdinates: -(chapterPageRect.height / 2) + 178,\n backgroundColor: 'BLUE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n arrowSize: 12,\n width: 264,\n tooltipItem: (\n <FlexView $flexRowGapX={0.75}>\n <Text $renderAs=\"ab2-bold\">Welcome to the all new chapter experience.</Text>\n <Button\n label=\"Next\"\n size=\"xsmall\"\n widthX={6}\n renderAs=\"secondary\"\n onClick={handleNextCoachmark}\n />\n </FlexView>\n ),\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: bannerRef,\n elementToHighlight: (\n <ChapterBanner\n title={name}\n progressStats={PROGRESS_STAT_MOCK}\n imageUrl={imageUrl}\n imageHue={imageHue}\n />\n ),\n type: IndicatorType.TOOLTIP,\n indicator: {\n position: 'bottom',\n tooltipXCoOrdinates: -45,\n tooltipYCoOrdinates: -40,\n backgroundColor: 'ORANGE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n width: 264,\n arrowSize: 12,\n tooltipItem: (\n <FlexView $flexRowGapX={0.75}>\n <Text $renderAs=\"ab2-bold\">\n A chapter is divided into *core sheets (compulsory), and supplementary sheets.\n </Text>\n <Button\n label=\"Next\"\n size=\"xsmall\"\n widthX={6}\n renderAs=\"secondary\"\n onClick={handleNextCoachmark}\n />\n </FlexView>\n ),\n } as IArrowTooltipProps,\n isActive: false,\n },\n {\n originalElementToHighlightRef: bannerRef,\n elementToHighlight: (\n <ChapterBanner\n title={name}\n progressStats={PROGRESS_STAT_MOCK}\n imageUrl={imageUrl}\n imageHue={imageHue}\n />\n ),\n type: IndicatorType.TOOLTIP,\n indicator: {\n position: 'bottom',\n tooltipXCoOrdinates: -275,\n tooltipYCoOrdinates: -15,\n backgroundColor: 'PURPLE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n arrowSize: 12,\n width: 264,\n tooltipItem: (\n <FlexView $flexRowGapX={0.75}>\n <Text $renderAs=\"ab2-bold\">Easily track the progress of the core sheets.</Text>\n <Button\n label=\"Next\"\n size=\"xsmall\"\n widthX={6}\n renderAs=\"secondary\"\n onClick={handleNextCoachmark}\n />\n </FlexView>\n ),\n } as IArrowTooltipProps,\n isActive: false,\n },\n {\n originalElementToHighlightRef: coreBlocksRef,\n elementToHighlight: (\n <FlexView $widthX={50}>\n <BlockSections userType={userType} blocks={BLOCK_MOCKS} imageHue={imageHue} />\n </FlexView>\n ),\n type: IndicatorType.TOOLTIP,\n indicator: {\n position: 'top',\n tooltipXCoOrdinates: -150,\n tooltipYCoOrdinates: -260,\n backgroundColor: 'PURPLE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n arrowSize: 12,\n width: 264,\n tooltipItem: (\n <FlexView $flexRowGapX={0.75}>\n <Text $renderAs=\"ab2-bold\">Easily track the progress of the core sheets.</Text>\n <Button\n label=\"Got it\"\n size=\"xsmall\"\n widthX={6}\n renderAs=\"secondary\"\n onClick={handleEndJourney}\n />\n </FlexView>\n ),\n } as IArrowTooltipProps,\n isActive: false,\n },\n ];\n\n setJourney(journeyId, chapterPageSteps);\n\n const delayBeforeStart = setTimeout(() => {\n clearTimeout(delayBeforeStart);\n window.scrollTo(0, 0);\n document.body.style.overflow = 'hidden';\n handleNextCoachmark();\n }, 500);\n\n timerRefs.current.push(delayBeforeStart);\n },\n [handleNextCoachmark, handleEndJourney, setJourney, journeyId],\n );\n\n const data = useMemo(\n () => ({\n chapterPageRef,\n bannerRef,\n coreBlocksRef,\n startJourney,\n }),\n [startJourney],\n );\n\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, []);\n\n return data;\n};\n"],"names":["useChapterPageJourney","journeyId","JOURNEY_ID_STUDENT","chapterPageRef","useRef","bannerRef","coreBlocksRef","timerRefs","nextCoachmark","setJourney","endJourney","useJourney","handleNextCoachmark","useCallback","handleEndJourney","startJourney","chapterDetails","userChapterId","studentId","userType","name","imageHue","imageUrl","chapterPageRect","chapterPageSteps","IndicatorType","jsx","ChapterDetails","jsxs","FlexView","Text","Button","ChapterBanner","PROGRESS_STAT_MOCK","BlockSections","BLOCK_MOCKS","delayBeforeStart","data","useMemo","useEffect","timer"],"mappings":";;;;;;;;;;;;AAyBO,MAAMA,IAAwB,MAAM;AACzC,QAAMC,IAAYC,EAAmB,sBAE/BC,IAAiBC,EAAuB,IAAI,GAC5CC,IAAYD,EAAuB,IAAI,GACvCE,IAAgBF,EAAuB,IAAI,GAC3CG,IAAYH,EAAwC,CAAA,CAAE,GACtD,EAAE,eAAAI,GAAe,YAAAC,GAAY,YAAAC,MAAeC,EAAW,GAEvDC,IAAsBC,EAAY,MAAM;AAC9B,IAAAL,EAAAP,GAAW,IAAO,GAAG,EAAI;AAAA,EAAA,GACtC,CAACA,GAAWO,CAAa,CAAC,GAEvBM,IAAmBD,EAAY,MAAM;AAChC,aAAA,KAAK,MAAM,WAAW,SAC/BH,EAAWT,CAAS;AAAA,EAAA,GACnB,CAACS,GAAYT,CAAS,CAAC,GAEpBc,IAAeF;AAAA,IACnB,CAAC,EAAE,gBAAAG,GAAgB,eAAAC,GAAe,WAAAC,GAAW,UAAAC,QAA0C;AACrF,YAAM,EAAE,MAAAC,GAAM,WAAWC,GAAU,WAAWC,EAAa,IAAAN;AAEvD,UAAA,EAACb,KAAA,QAAAA,EAAgB,YAAW,EAACE,KAAA,QAAAA,EAAW,YAAW,CAACC,EAAc;AACpE;AAGI,YAAAiB,IAAkBpB,EAAe,QAAQ,sBAAsB,GAE/DqB,IAAsC;AAAA,QAC1C;AAAA,UACE,+BAA+BrB;AAAA,UAC/B,UAAU;AAAA,UACV,MAAMsB,EAAc;AAAA,UACpB,oBACE,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,eAAAV;AAAA,cACA,WAAAC;AAAA,cACA,UAAAC;AAAA,cACA,mBAAmB,MAAM;AAAA,cACzB,eAAe,MAAM;AAAA,cACrB,6BAA6B,MAAM;AAAA,cACnC,kBAAkB,MAAM;AAAA,cACxB,iBAAiB,MAAM;AAAA,cACvB,cAAc,MAAM;AAAA,cACpB,YAAY,MAAM;AAAA,cAClB,QAAQ,MAAM;AAAA,YAAA;AAAA,UAChB;AAAA,UAEF,WAAW;AAAA,YACT,UAAU;AAAA,YACV,qBAAqB,EAAEI,EAAgB,SAAS,KAAK;AAAA,YACrD,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,OAAO;AAAA,YACP,aACE,gBAAAK,EAACC,GAAS,EAAA,cAAc,MACtB,UAAA;AAAA,cAAC,gBAAAH,EAAAI,GAAA,EAAK,WAAU,YAAW,UAA0C,8CAAA;AAAA,cACrE,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAK;AAAA,kBACL,QAAQ;AAAA,kBACR,UAAS;AAAA,kBACT,SAASnB;AAAA,gBAAA;AAAA,cACX;AAAA,YAAA,GACF;AAAA,UAEJ;AAAA,QACF;AAAA,QACA;AAAA,UACE,+BAA+BP;AAAA,UAC/B,oBACE,gBAAAqB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,OAAOZ;AAAA,cACP,eAAea;AAAA,cACf,UAAAX;AAAA,cACA,UAAAD;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMI,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,UAAU;AAAA,YACV,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,WAAW;AAAA,YACX,aACE,gBAAAG,EAACC,GAAS,EAAA,cAAc,MACtB,UAAA;AAAA,cAAC,gBAAAH,EAAAI,GAAA,EAAK,WAAU,YAAW,UAE3B,kFAAA;AAAA,cACA,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAK;AAAA,kBACL,QAAQ;AAAA,kBACR,UAAS;AAAA,kBACT,SAASnB;AAAA,gBAAA;AAAA,cACX;AAAA,YAAA,GACF;AAAA,UAEJ;AAAA,UACA,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,UACE,+BAA+BP;AAAA,UAC/B,oBACE,gBAAAqB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,OAAOZ;AAAA,cACP,eAAea;AAAA,cACf,UAAAX;AAAA,cACA,UAAAD;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMI,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,UAAU;AAAA,YACV,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,OAAO;AAAA,YACP,aACE,gBAAAG,EAACC,GAAS,EAAA,cAAc,MACtB,UAAA;AAAA,cAAC,gBAAAH,EAAAI,GAAA,EAAK,WAAU,YAAW,UAA6C,iDAAA;AAAA,cACxE,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAK;AAAA,kBACL,QAAQ;AAAA,kBACR,UAAS;AAAA,kBACT,SAASnB;AAAA,gBAAA;AAAA,cACX;AAAA,YAAA,GACF;AAAA,UAEJ;AAAA,UACA,UAAU;AAAA,QACZ;AAAA,QACA;AAAA,UACE,+BAA+BN;AAAA,UAC/B,oBACG,gBAAAoB,EAAAG,GAAA,EAAS,SAAS,IACjB,UAAC,gBAAAH,EAAAQ,GAAA,EAAc,UAAAf,GAAoB,QAAQgB,GAAa,UAAAd,EAAA,CAAoB,EAC9E,CAAA;AAAA,UAEF,MAAMI,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,UAAU;AAAA,YACV,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,OAAO;AAAA,YACP,aACE,gBAAAG,EAACC,GAAS,EAAA,cAAc,MACtB,UAAA;AAAA,cAAC,gBAAAH,EAAAI,GAAA,EAAK,WAAU,YAAW,UAA6C,iDAAA;AAAA,cACxE,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAK;AAAA,kBACL,QAAQ;AAAA,kBACR,UAAS;AAAA,kBACT,SAASjB;AAAA,gBAAA;AAAA,cACX;AAAA,YAAA,GACF;AAAA,UAEJ;AAAA,UACA,UAAU;AAAA,QACZ;AAAA,MAAA;AAGF,MAAAL,EAAWR,GAAWuB,CAAgB;AAEhC,YAAAY,IAAmB,WAAW,MAAM;AACxC,qBAAaA,CAAgB,GACtB,OAAA,SAAS,GAAG,CAAC,GACX,SAAA,KAAK,MAAM,WAAW,UACXxB;SACnB,GAAG;AAEI,MAAAL,EAAA,QAAQ,KAAK6B,CAAgB;AAAA,IACzC;AAAA,IACA,CAACxB,GAAqBE,GAAkBL,GAAYR,CAAS;AAAA,EAAA,GAGzDoC,IAAOC;AAAA,IACX,OAAO;AAAA,MACL,gBAAAnC;AAAA,MACA,WAAAE;AAAA,MACA,eAAAC;AAAA,MACA,cAAAS;AAAA,IAAA;AAAA,IAEF,CAACA,CAAY;AAAA,EAAA;AAGf,SAAAwB,EAAU,MACD,MAAM;AACX,IAAAhC,EAAU,QAAQ,QAAQ,CAASiC,MAAA,aAAaA,CAAK,CAAC,GACtDjC,EAAU,UAAU;EAAC,GAEtB,CAAE,CAAA,GAEE8B;AACT;"}
|
1
|
+
{"version":3,"file":"use-chapter-journey.js","sources":["../../../../src/features/journey/hooks/use-chapter-journey.tsx"],"sourcesContent":["import type { IUserChapterData } from '../../chapters-v2/chapter-details/chapter-details-types';\nimport type { IArrowTooltipProps } from '../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { TUserTypes } from '../../ui/types';\nimport type { ICoachmarkProps } from '../use-journey/journey-context-types';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport BlockSections from '../../chapters-v2/chapter-details/block-sections/block-sections';\nimport ChapterBanner from '../../chapters-v2/chapter-details/chapter-banner/chapter-banner';\nimport ChapterDetails from '../../chapters-v2/chapter-details/chapter-details';\nimport FlexView from '../../ui/layout/flex-view';\nimport { JOURNEY_ID_STUDENT } from '../journey-id/journey-id-student';\nimport { BLOCK_MOCKS, PROGRESS_STAT_MOCK } from '../mocks/chapter-page-journey-mock-data';\nimport { IndicatorType } from '../use-journey/constants';\nimport { useJourney } from '../use-journey/use-journey';\nimport TooltipItem from './use-home-page-journey/tooltip-item';\n\ninterface IChapterStartJourneyProps {\n chapterDetails: IUserChapterData;\n userChapterId: string;\n studentId: string;\n userType: TUserTypes;\n}\n\nexport const useChapterPageJourney = () => {\n const journeyId = JOURNEY_ID_STUDENT.CHAPTER_PAGE_JOURNEY;\n\n const chapterPageRef = useRef<HTMLDivElement>(null);\n const bannerRef = useRef<HTMLDivElement>(null);\n const coreBlocksRef = useRef<HTMLDivElement>(null);\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n const { nextCoachmark, setJourney, endJourney } = useJourney();\n\n const handleNextCoachmark = useCallback(() => {\n nextCoachmark(journeyId, false, 0, true);\n }, [journeyId, nextCoachmark]);\n\n const handleEndJourney = useCallback(() => {\n document.body.style.overflow = 'unset';\n endJourney(journeyId);\n }, [endJourney, journeyId]);\n\n const startJourney = useCallback(\n ({ chapterDetails, userChapterId, studentId, userType }: IChapterStartJourneyProps) => {\n const { name, image_hue: imageHue, image_url: imageUrl } = chapterDetails;\n\n if (!chapterPageRef?.current || !bannerRef?.current || !coreBlocksRef.current) {\n return;\n }\n\n const chapterPageRect = chapterPageRef.current.getBoundingClientRect();\n\n const chapterPageSteps: ICoachmarkProps[] = [\n {\n originalElementToHighlightRef: chapterPageRef,\n isActive: false,\n type: IndicatorType.TOOLTIP,\n elementToHighlight: (\n <ChapterDetails\n userChapterId={userChapterId}\n studentId={studentId}\n userType={userType}\n onBlockSkipUnskip={() => null}\n onNodeAttempt={() => null}\n onNodeAttemptLocationChange={() => null}\n onNodeMarkAsDone={() => null}\n onNodeReattempt={() => null}\n onNodeReview={() => null}\n onNodeView={() => null}\n onExit={() => null}\n />\n ),\n indicator: {\n position: 'left',\n tooltipYCoOrdinates: -(chapterPageRect.height / 2) + 178,\n backgroundColor: 'BLUE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n arrowSize: 12,\n width: 264,\n tooltipItem: (\n <TooltipItem\n text=\"Welcome to the all new chapter experience.\"\n buttonLabel=\"Next\"\n onButtonClick={handleNextCoachmark}\n />\n ),\n } as IArrowTooltipProps,\n },\n {\n originalElementToHighlightRef: bannerRef,\n elementToHighlight: (\n <ChapterBanner\n title={name}\n progressStats={PROGRESS_STAT_MOCK}\n imageUrl={imageUrl}\n imageHue={imageHue}\n />\n ),\n type: IndicatorType.TOOLTIP,\n indicator: {\n position: 'bottom',\n tooltipXCoOrdinates: -45,\n tooltipYCoOrdinates: -40,\n backgroundColor: 'ORANGE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n width: 264,\n arrowSize: 12,\n tooltipItem: (\n <TooltipItem\n text=\"A chapter is divided into *core sheets (compulsory), and supplementary sheets.\"\n buttonLabel=\"Next\"\n onButtonClick={handleNextCoachmark}\n />\n ),\n } as IArrowTooltipProps,\n isActive: false,\n },\n {\n originalElementToHighlightRef: bannerRef,\n elementToHighlight: (\n <ChapterBanner\n title={name}\n progressStats={PROGRESS_STAT_MOCK}\n imageUrl={imageUrl}\n imageHue={imageHue}\n />\n ),\n type: IndicatorType.TOOLTIP,\n indicator: {\n position: 'bottom',\n tooltipXCoOrdinates: -275,\n tooltipYCoOrdinates: -15,\n backgroundColor: 'PURPLE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n arrowSize: 12,\n width: 264,\n tooltipItem: (\n <TooltipItem\n text=\"Easily track the progress of the core sheets.\"\n buttonLabel=\"Next\"\n onButtonClick={handleNextCoachmark}\n />\n ),\n } as IArrowTooltipProps,\n isActive: false,\n },\n {\n originalElementToHighlightRef: coreBlocksRef,\n elementToHighlight: (\n <FlexView $widthX={50}>\n <BlockSections userType={userType} blocks={BLOCK_MOCKS} imageHue={imageHue} />\n </FlexView>\n ),\n type: IndicatorType.TOOLTIP,\n indicator: {\n position: 'top',\n tooltipXCoOrdinates: -150,\n tooltipYCoOrdinates: -260,\n backgroundColor: 'PURPLE_4',\n borderColor: 'BLACK',\n arrowColor: 'BLACK',\n arrowSize: 12,\n width: 264,\n tooltipItem: (\n <TooltipItem\n text=\"Core sheets are marked to help you find them faster.\"\n buttonLabel=\"Got it\"\n onButtonClick={handleEndJourney}\n />\n ),\n } as IArrowTooltipProps,\n isActive: false,\n },\n ];\n\n setJourney(journeyId, chapterPageSteps);\n\n const delayBeforeStart = setTimeout(() => {\n clearTimeout(delayBeforeStart);\n window.scrollTo(0, 0);\n document.body.style.overflow = 'hidden';\n handleNextCoachmark();\n }, 500);\n\n timerRefs.current.push(delayBeforeStart);\n },\n [handleNextCoachmark, handleEndJourney, setJourney, journeyId],\n );\n\n const data = useMemo(\n () => ({\n chapterPageRef,\n bannerRef,\n coreBlocksRef,\n startJourney,\n }),\n [startJourney],\n );\n\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, []);\n\n return data;\n};\n"],"names":["useChapterPageJourney","journeyId","JOURNEY_ID_STUDENT","chapterPageRef","useRef","bannerRef","coreBlocksRef","timerRefs","nextCoachmark","setJourney","endJourney","useJourney","handleNextCoachmark","useCallback","handleEndJourney","startJourney","chapterDetails","userChapterId","studentId","userType","name","imageHue","imageUrl","chapterPageRect","chapterPageSteps","IndicatorType","jsx","ChapterDetails","TooltipItem","ChapterBanner","PROGRESS_STAT_MOCK","FlexView","BlockSections","BLOCK_MOCKS","delayBeforeStart","data","useMemo","useEffect","timer"],"mappings":"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"}
|