@cuemath/leap 2.9.7-rj-1 → 2.9.7-rj-3

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 (24) hide show
  1. package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js +82 -86
  2. package/dist/features/circle-games/game-launcher/hooks/use-game-launcher-journey/use-game-launcher-journey.js.map +1 -1
  3. package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js +73 -82
  4. package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js.map +1 -1
  5. package/dist/features/journey/comps/coachmark/coachmark.js +27 -26
  6. package/dist/features/journey/comps/coachmark/coachmark.js.map +1 -1
  7. package/dist/features/journey/use-journey/constants.js +2 -4
  8. package/dist/features/journey/use-journey/constants.js.map +1 -1
  9. package/dist/features/journey/use-journey/journey-styled.js +3 -4
  10. package/dist/features/journey/use-journey/journey-styled.js.map +1 -1
  11. package/dist/features/ui/constants/z-index.js +2 -1
  12. package/dist/features/ui/constants/z-index.js.map +1 -1
  13. package/dist/features/ui/theme/breakpoints.js +11 -0
  14. package/dist/features/ui/theme/breakpoints.js.map +1 -0
  15. package/dist/features/ui/theme/get-theme.js +20 -18
  16. package/dist/features/ui/theme/get-theme.js.map +1 -1
  17. package/dist/index.d.ts +8 -6
  18. package/dist/index.js +133 -135
  19. package/dist/index.js.map +1 -1
  20. package/package.json +1 -1
  21. package/dist/features/hooks/use-breakpoint/constants.js +0 -7
  22. package/dist/features/hooks/use-breakpoint/constants.js.map +0 -1
  23. package/dist/features/hooks/use-breakpoint/use-breakpoint.js +0 -16
  24. package/dist/features/hooks/use-breakpoint/use-breakpoint.js.map +0 -1
package/dist/features/circle-games/game-launcher/hooks/use-table-launcher-journey/use-table-launcher-journey.js CHANGED
@@ -1,35 +1,35 @@
1
- import { jsx as r, Fragment as N } from "react/jsx-runtime";
2
- import { useRef as S, useCallback as I, useEffect as j } from "react";
1
+ import { jsx as r, Fragment as O } from "react/jsx-runtime";
2
+ import { useRef as N, useCallback as L, useEffect as j } from "react";
3
3
  import Z from "../../../../../assets/line-icons/icons/carat-right.js";
4
- import { PLATFORM_EVENTS_STUDENT as x } from "../../../../analytics-events/platform-events-student.js";
5
- import { useBreakpoint as q } from "../../../../hooks/use-breakpoint/use-breakpoint.js";
6
- import { JOURNEY_ID_STUDENT as z } from "../../../../journey/journey-id/journey-id-student.js";
7
- import { IndicatorType as u } from "../../../../journey/use-journey/constants.js";
8
- import { useJourney as Q } from "../../../../journey/use-journey/use-journey.js";
9
- import ee from "../../../../ui/buttons/icon-button/icon-button.js";
10
- import { useUIContext as te } from "../../../../ui/context/context.js";
11
- import P from "../../../../ui/layout/flex-view.js";
4
+ import { PLATFORM_EVENTS_STUDENT as M } from "../../../../analytics-events/platform-events-student.js";
5
+ import { JOURNEY_ID_STUDENT as q } from "../../../../journey/journey-id/journey-id-student.js";
6
+ import { IndicatorType as d } from "../../../../journey/use-journey/constants.js";
7
+ import { useJourney as z } from "../../../../journey/use-journey/use-journey.js";
8
+ import Q from "../../../../ui/buttons/icon-button/icon-button.js";
9
+ import { useUIContext as ee } from "../../../../ui/context/context.js";
10
+ import S from "../../../../ui/layout/flex-view.js";
12
11
  import T from "../../../../ui/text/text.js";
13
- import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as $ } from "../../../enum/circle-onboarding-steps.js";
12
+ import { getTheme as te } from "../../../../ui/theme/get-theme.js";
13
+ import { CIRCLE_ONBOARDING_ANALYTICS_STEPS as x } from "../../../enum/circle-onboarding-steps.js";
14
14
  import { useCircleSounds as re } from "../../../hooks/use-circle-sounds/use-circle-sounds.js";
15
- import { TablesCard as w } from "../../comps/tables-card/tables-card.js";
15
+ import { TablesCard as $ } from "../../comps/tables-card/tables-card.js";
16
16
  import { GAME_LAUNCHER_ANALYTICS_EVENTS as ne } from "../../game-launcher-analytics-events.js";
17
- import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as oe, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ie, START_ANIMATING_CLONED_ELEM as F, TABLE_CARD_INDEX as V, GO_TO_TABLE_LAUNCHER_DURATION_MS as le, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ce, PUZZLE_CARD_INDEX as ae, SHOW_INITIAL_COACHMARK_AFTER_MS as X, LESSON_CARD_INDEX as se, SHOW_INITIAL_TOOLTIP_AFTER_MS as de } from "./constants.js";
17
+ import { SHOW_PICK_A_LEVEL_TOOLTIP_AFTER_MS as oe, SHOW_PICK_A_LEVEL_NUDGE_AFTER_MS as ie, START_ANIMATING_CLONED_ELEM as w, TABLE_CARD_INDEX as F, GO_TO_TABLE_LAUNCHER_DURATION_MS as le, SHOW_CLICK_TABLE_NUDGE_AFTER_MS as ce, PUZZLE_CARD_INDEX as ae, SHOW_INITIAL_COACHMARK_AFTER_MS as V, LESSON_CARD_INDEX as se, SHOW_INITIAL_TOOLTIP_AFTER_MS as de } from "./constants.js";
18
18
  import { Indicator as ue } from "./use-table-launcher-journey-styled.js";
19
19
  const He = ({
20
20
  carouselRefs: a,
21
- onTableSegmentClick: H,
22
- onJourneyComplete: y
21
+ onTableSegmentClick: P,
22
+ onJourneyComplete: H
23
23
  }) => {
24
- const e = z.CIRCLE_TABLES_INTRO_JOURNEY, { isMobile: s } = q(), t = S(null), A = S(null), g = S([]), { playButtonSound: D } = re(), { nextCoachmark: l, setJourney: R, addCoachmark: m, endJourney: W } = Q(), { onEvent: C } = te(), L = s ? 232 : 264, E = s ? "ab3-bold" : "ab2-bold", O = I(
24
+ const e = q.CIRCLE_TABLES_INTRO_JOURNEY, { breakpoints: X } = te(), { isMobile: u } = X, g = u ? "ab3-bold" : "ab2-bold", t = N(null), A = N(null), E = N([]), { playButtonSound: y } = re(), { nextCoachmark: l, setJourney: I, addCoachmark: m, endJourney: D } = z(), { onEvent: C } = ee(), R = L(
25
25
  (n) => {
26
26
  var c, o;
27
- W(e), n && H(n), C(x.ONBOARDING_STEP_COMPLETED, {
28
- step: $.TABLES
29
- }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), y(e);
27
+ D(e), n && P(n), C(M.ONBOARDING_STEP_COMPLETED, {
28
+ step: x.TABLES
29
+ }), (c = t == null ? void 0 : t.current) == null || c.setLabelVisiblity(!0), (o = t == null ? void 0 : t.current) == null || o.stopLabelAnimation(), H(e);
30
30
  },
31
- [W, e, y, H, C]
32
- ), k = I(
31
+ [D, e, H, P, C]
32
+ ), W = L(
33
33
  (n, c) => {
34
34
  var h, p, _;
35
35
  if (!((h = t.current) != null && h.segmentedCardWrapperRef.current) || !((p = t.current) != null && p.labelRef.current))
@@ -38,93 +38,85 @@ const He = ({
38
38
  m(e, {
39
39
  originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
40
40
  isActive: !1,
41
- type: u.TOOLTIP,
41
+ type: d.TOOLTIP,
42
42
  elementToHighlight: /* @__PURE__ */ r(
43
- w,
43
+ $,
44
44
  {
45
45
  ref: A,
46
46
  defaultTable: c,
47
47
  label: n.label,
48
48
  data: n.data,
49
- onPress: O,
50
- onGoBackFromTableLevel: O
49
+ onPress: R,
50
+ onGoBackFromTableLevel: R
51
51
  }
52
52
  ),
53
53
  indicator: {
54
54
  position: "top",
55
55
  backgroundColor: "YELLOW_4",
56
- width: L,
57
- tooltipItem: /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(T, { $renderAs: E, children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
56
+ width: 236,
57
+ tooltipItem: /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(T, { $renderAs: g, children: "Each table has 3 levels—clear them and earn 3 stars!" }) }),
58
58
  tooltipXCoOrdinates: o.width / 2,
59
59
  tooltipYCoOrdinates: 45
60
60
  }
61
61
  }), m(e, {
62
62
  originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
63
63
  isActive: !1,
64
- type: u.NUDGE,
64
+ type: d.NUDGE,
65
65
  indicator: {
66
66
  nudge: "click",
67
- content: !s && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
67
+ content: !u && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Pick a level" }),
68
68
  nudgePointerX: i.width / 2 + 50,
69
69
  nudgePointerY: i.height * 0.4
70
70
  },
71
- elementToHighlight: /* @__PURE__ */ r(N, {})
71
+ elementToHighlight: /* @__PURE__ */ r(O, {})
72
72
  }), l(e, !1, oe), l(e, !0, ie);
73
- const d = setTimeout(() => {
73
+ const s = setTimeout(() => {
74
74
  var f;
75
- clearTimeout(d), (f = A.current) == null || f.startLabelAnimation("YELLOW_4");
76
- }, F);
77
- g.current.push(d);
75
+ clearTimeout(s), (f = A.current) == null || f.startLabelAnimation("YELLOW_4");
76
+ }, w);
77
+ E.current.push(s);
78
78
  },
79
- [
80
- m,
81
- O,
82
- s,
83
- e,
84
- l,
85
- E,
86
- L
87
- ]
88
- ), b = I(() => {
79
+ [m, R, u, e, l, g]
80
+ ), b = L(() => {
89
81
  var o;
90
- D(), (o = a.current) == null || o.goToIndex(V), l(e, !1, le), C(x.ONBOARDING_STEP_VIEWED, {
91
- step: $.TABLES
82
+ y(), (o = a.current) == null || o.goToIndex(F), l(e, !1, le), C(M.ONBOARDING_STEP_VIEWED, {
83
+ step: x.TABLES
92
84
  });
93
85
  const n = setTimeout(() => {
94
86
  var i;
95
87
  clearTimeout(n), (i = t.current) == null || i.setLabelVisiblity(!1), l(e, !0);
96
88
  }, ce);
97
- g.current.push(n);
89
+ E.current.push(n);
98
90
  const c = setTimeout(() => {
99
91
  var i;
100
92
  clearTimeout(c), (i = A.current) == null || i.startLabelAnimation("YELLOW_4");
101
- }, F);
102
- g.current.push(c);
103
- }, [a, e, l, D, C]), J = I(
93
+ }, w);
94
+ E.current.push(c);
95
+ }, [a, e, l, y, C]), J = L(
104
96
  (n, c = !1) => {
105
- var _, f, B, Y, U, G, v, M;
106
- const o = (_ = a.current) == null ? void 0 : _.indicatorRefs, i = (f = a.current) == null ? void 0 : f.nextBtnRef, d = o == null ? void 0 : o[V];
107
- if (!((B = t.current) != null && B.segmentedCardWrapperRef.current) || !((Y = t.current) != null && Y.labelRef.current) || !o || !(i != null && i.current) || !d || !d.current)
97
+ var _, f, k, Y, B, U, G, v;
98
+ const o = (_ = a.current) == null ? void 0 : _.indicatorRefs, i = (f = a.current) == null ? void 0 : f.nextBtnRef, s = o == null ? void 0 : o[F];
99
+ if (!((k = t.current) != null && k.segmentedCardWrapperRef.current) || !((Y = t.current) != null && Y.labelRef.current) || !o || !(i != null && i.current) || !s || !s.current)
108
100
  return;
109
- const h = t.current.labelRef.current.getBoundingClientRect(), p = (U = t.current) == null ? void 0 : U.segmentedCardWrapperRef.current.getBoundingClientRect();
110
- c ? (R(e, [
101
+ const h = t.current.labelRef.current.getBoundingClientRect(), p = (B = t.current) == null ? void 0 : B.segmentedCardWrapperRef.current.getBoundingClientRect();
102
+ c ? (I(e, [
111
103
  {
112
- originalElementToHighlightRef: d,
104
+ originalElementToHighlightRef: s,
113
105
  isActive: !1,
114
- type: u.TOOLTIP,
106
+ type: d.TOOLTIP,
115
107
  elementToHighlight: /* @__PURE__ */ r(ue, { $isActive: !1 }),
116
108
  indicator: {
117
109
  position: "bottom",
118
110
  backgroundColor: "YELLOW_4",
119
111
  width: 52,
120
112
  tooltipItem: /* @__PURE__ */ r(
121
- P,
113
+ S,
122
114
  {
123
115
  $position: "absolute",
124
116
  $flexDirection: "row",
125
117
  style: { top: 6, left: 8, cursor: "pointer" },
126
118
  onClick: b,
127
- children: /* @__PURE__ */ r(T, { $renderAs: E, children: "NEW" })
119
+ children: /* @__PURE__ */ r(T, { $renderAs: g, children: "NEW" })
128
120
  }
129
121
  ),
130
122
  tooltipYCoOrdinates: 14
@@ -132,29 +124,29 @@ const He = ({
132
124
  }
133
125
  },
134
126
  {
135
- originalElementToHighlightRef: d,
127
+ originalElementToHighlightRef: s,
136
128
  isActive: !1,
137
- type: u.NUDGE,
129
+ type: d.NUDGE,
138
130
  indicator: {
139
131
  nudge: "click",
140
132
  content: "",
141
133
  nudgePointerY: 20
142
134
  },
143
- elementToHighlight: /* @__PURE__ */ r(N, {})
135
+ elementToHighlight: /* @__PURE__ */ r(O, {})
144
136
  }
145
- ]), (M = a.current) == null || M.goToIndex(se), l(e, !1, X), l(e, !0, de)) : (R(e, [
137
+ ]), (v = a.current) == null || v.goToIndex(se), l(e, !1, V), l(e, !0, de)) : (I(e, [
146
138
  {
147
- originalElementToHighlightRef: (G = a.current) == null ? void 0 : G.nextBtnRef,
139
+ originalElementToHighlightRef: (U = a.current) == null ? void 0 : U.nextBtnRef,
148
140
  isActive: !1,
149
- type: u.NUDGE,
141
+ type: d.NUDGE,
150
142
  indicator: {
151
143
  nudge: "click",
152
- content: !s && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
144
+ content: !u && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Click to proceed" }),
153
145
  nudgePointerX: 0,
154
146
  nudgePointerY: 0
155
147
  },
156
148
  elementToHighlight: /* @__PURE__ */ r(
157
- ee,
149
+ Q,
158
150
  {
159
151
  renderAs: "secondary",
160
152
  Icon: Z,
@@ -163,38 +155,38 @@ const He = ({
163
155
  }
164
156
  )
165
157
  }
166
- ]), (v = a.current) == null || v.goToIndex(ae), l(e, !1, X)), m(e, {
158
+ ]), (G = a.current) == null || G.goToIndex(ae), l(e, !1, V)), m(e, {
167
159
  originalElementToHighlightRef: t.current.labelRef,
168
160
  isActive: !1,
169
- type: u.TOOLTIP,
170
- elementToHighlight: /* @__PURE__ */ r(N, {}),
161
+ type: d.TOOLTIP,
162
+ elementToHighlight: /* @__PURE__ */ r(O, {}),
171
163
  indicator: {
172
164
  position: "top",
173
165
  backgroundColor: "YELLOW_4",
174
- width: L,
175
- tooltipItem: /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(T, { $renderAs: E, children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
166
+ width: 264,
167
+ tooltipItem: /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(T, { $renderAs: g, children: "Get faster at multiplication! Practice everyday and become a Tables champ." }) }),
176
168
  tooltipXCoOrdinates: h.width / 2,
177
169
  tooltipYCoOrdinates: h.height + 10
178
170
  }
179
171
  }), m(e, {
180
172
  originalElementToHighlightRef: t.current.segmentedCardWrapperRef,
181
173
  isActive: !1,
182
- type: u.NUDGE,
174
+ type: d.NUDGE,
183
175
  indicator: {
184
176
  nudge: "click",
185
- content: !s && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
177
+ content: !u && /* @__PURE__ */ r(T, { $renderAs: "ab1", $color: "WHITE", children: "Pick a table to start" }),
186
178
  nudgePointerX: p.width / 2 + 50,
187
179
  nudgePointerY: p.height / 2
188
180
  },
189
181
  elementToHighlight: /* @__PURE__ */ r(
190
- w,
182
+ $,
191
183
  {
192
184
  ref: A,
193
185
  label: n.label,
194
186
  data: n.data,
195
187
  onPress: () => {
196
188
  },
197
- onPressTableSegment: (K) => k(n, K)
189
+ onPressTableSegment: (K) => W(n, K)
198
190
  }
199
191
  )
200
192
  });
@@ -203,17 +195,16 @@ const He = ({
203
195
  m,
204
196
  a,
205
197
  b,
206
- k,
207
- s,
198
+ W,
199
+ u,
208
200
  e,
209
201
  l,
210
- R,
211
- E,
212
- L
202
+ I,
203
+ g
213
204
  ]
214
205
  );
215
206
  return j(() => () => {
216
- g.current.forEach((n) => clearTimeout(n)), g.current = [];
207
+ E.current.forEach((n) => clearTimeout(n)), E.current = [];
217
208
  }, [e]), {
218
209
  tableRef: t,
219
210
  startJourney: J
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 { useBreakpoint } from '../../../../hooks/use-breakpoint/use-breakpoint';\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 LESSON_CARD_INDEX,\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 { isMobile } = useBreakpoint();\n\n const originalTableRef = useRef<ITableCardRef>(null);\n const highlightedTableRef = useRef<ITableCardRef>(null);\n\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const tooltipWidth = isMobile ? 232 : 264;\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n const handleEndJourney = useCallback(\n (tableDetails?: ITableDetails) => {\n endJourney(journeyId);\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 },\n [endJourney, journeyId, 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={handleEndJourney}\n onGoBackFromTableLevel={handleEndJourney}\n />\n ),\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: tooltipWidth,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Each table has 3 levels—clear them and earn 3 stars!\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: segmentedCardDims.width / 2,\n tooltipYCoOrdinates: 45,\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: !isMobile && (\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 [\n addCoachmark,\n handleEndJourney,\n isMobile,\n journeyId,\n nextCoachmark,\n tooltipTextRenderAs,\n tooltipWidth,\n ],\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 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 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: !isMobile && (\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={tooltipTextRenderAs}>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 carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\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: 'top',\n backgroundColor: 'YELLOW_4',\n width: tooltipWidth,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Get faster at multiplication! Practice everyday and become a Tables champ.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: labelDims.width / 2,\n tooltipYCoOrdinates: labelDims.height + 10,\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: !isMobile && (\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 isMobile,\n journeyId,\n nextCoachmark,\n setJourney,\n tooltipTextRenderAs,\n tooltipWidth,\n ],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [journeyId]);\n\n return {\n tableRef: originalTableRef,\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","isMobile","useBreakpoint","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","tooltipWidth","tooltipTextRenderAs","handleEndJourney","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","_h","LESSON_CARD_INDEX","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 { getTheme } from '../../../../ui/theme/get-theme';\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 LESSON_CARD_INDEX,\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\n const { breakpoints } = getTheme();\n const { isMobile } = breakpoints;\n const tooltipTextRenderAs = isMobile ? 'ab3-bold' : 'ab2-bold';\n\n const originalTableRef = useRef<ITableCardRef>(null);\n const highlightedTableRef = useRef<ITableCardRef>(null);\n\n const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n const { playButtonSound } = useCircleSounds();\n const { nextCoachmark, setJourney, addCoachmark, endJourney } = useJourney();\n const { onEvent: trackAnalytics } = useUIContext();\n\n const handleEndJourney = useCallback(\n (tableDetails?: ITableDetails) => {\n endJourney(journeyId);\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 },\n [endJourney, journeyId, 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={handleEndJourney}\n onGoBackFromTableLevel={handleEndJourney}\n />\n ),\n indicator: {\n position: 'top',\n backgroundColor: 'YELLOW_4',\n width: 236,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Each table has 3 levels—clear them and earn 3 stars!\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: segmentedCardDims.width / 2,\n tooltipYCoOrdinates: 45,\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: !isMobile && (\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, handleEndJourney, isMobile, journeyId, nextCoachmark, tooltipTextRenderAs],\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 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 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: !isMobile && (\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={tooltipTextRenderAs}>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 carouselRefs.current?.goToIndex(LESSON_CARD_INDEX);\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: 'top',\n backgroundColor: 'YELLOW_4',\n width: 264,\n tooltipItem: (\n <FlexView>\n <Text $renderAs={tooltipTextRenderAs}>\n Get faster at multiplication! Practice everyday and become a Tables champ.\n </Text>\n </FlexView>\n ),\n tooltipXCoOrdinates: labelDims.width / 2,\n tooltipYCoOrdinates: labelDims.height + 10,\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: !isMobile && (\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 isMobile,\n journeyId,\n nextCoachmark,\n setJourney,\n tooltipTextRenderAs,\n ],\n );\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n timerRefs.current.forEach(timer => clearTimeout(timer));\n timerRefs.current = [];\n };\n }, [journeyId]);\n\n return {\n tableRef: originalTableRef,\n startJourney,\n };\n};\n"],"names":["useTableLauncherJourney","carouselRefs","onTableSegmentClick","onJourneyComplete","journeyId","JOURNEY_ID_STUDENT","breakpoints","getTheme","isMobile","tooltipTextRenderAs","originalTableRef","useRef","highlightedTableRef","timerRefs","playButtonSound","useCircleSounds","nextCoachmark","setJourney","addCoachmark","endJourney","useJourney","trackAnalytics","useUIContext","handleEndJourney","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","_h","LESSON_CARD_INDEX","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/features/journey/comps/coachmark/coachmark.js CHANGED
@@ -1,21 +1,22 @@
1
- import { jsx as o, jsxs as g, Fragment as f } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as f, Fragment as T } from "react/jsx-runtime";
2
2
  import { useMemo as p } from "react";
3
- import m from "../../../ui/arrow-tooltip/arrow-tooltip.js";
4
- import y from "../../../ui/nudge/nudge.js";
5
- import { BLUR_OVERLAY_Z_INDEX as T, IndicatorType as d } from "../../use-journey/constants.js";
6
- import { CoachmarkBody as P, ClonedElementWrapper as s } from "./coachmark-styled.js";
7
- import { toolTipGetXCoordinates as $ } from "./coachmark-utils.js";
8
- const H = ({ coachmark: t }) => {
9
- const i = t.originalElementToHighlightRef.current, { top: r = 0, left: n = 0, height: h = 0, width: C = 0 } = (i == null ? void 0 : i.getBoundingClientRect()) || {}, l = p(() => () => i ? window.getComputedStyle(i).position === "absolute" : !1, [i]), u = p(() => {
10
- const e = t.indicator;
3
+ import h from "../../../ui/arrow-tooltip/arrow-tooltip.js";
4
+ import O from "../../../ui/nudge/nudge.js";
5
+ import { getTheme as P } from "../../../ui/theme/get-theme.js";
6
+ import { IndicatorType as d } from "../../use-journey/constants.js";
7
+ import { CoachmarkBody as $, ClonedElementWrapper as u } from "./coachmark-styled.js";
8
+ import { toolTipGetXCoordinates as w } from "./coachmark-utils.js";
9
+ const Y = ({ coachmark: t }) => {
10
+ const i = t.originalElementToHighlightRef.current, { top: r = 0, left: n = 0, height: I = 0, width: b = 0 } = (i == null ? void 0 : i.getBoundingClientRect()) || {}, { zIndex: C, breakpoints: c } = P(), { isMobile: g } = c, s = C.JOURNEY_OVERLAY, l = p(() => () => i ? window.getComputedStyle(i).position === "absolute" : !1, [i]), m = p(() => {
11
+ const o = t.indicator;
11
12
  return {
12
- width: 264,
13
+ width: g ? 246 : 264,
13
14
  // Can be over ridden
14
- tooltipXCoOrdinates: $(e.position) + (e.tooltipXCoOrdinates ?? 0),
15
+ tooltipXCoOrdinates: w(o.position) + (o.tooltipXCoOrdinates ?? 0),
15
16
  // For absolutely positioned elements
16
- zIndex: T + 1,
17
- ...e,
18
- tooltipItem: /* @__PURE__ */ o(P, { children: e.tooltipItem }),
17
+ zIndex: s + 1,
18
+ ...o,
19
+ tooltipItem: /* @__PURE__ */ e($, { children: o.tooltipItem }),
19
20
  alwaysVisible: !0,
20
21
  renderAs: "primary",
21
22
  // Deprecate this
@@ -25,20 +26,20 @@ const H = ({ coachmark: t }) => {
25
26
  type: d.TOOLTIP,
26
27
  isAnimated: !0
27
28
  };
28
- }, [t.indicator]), I = p(() => {
29
- const e = t.indicator;
29
+ }, [s, t.indicator, g]), y = p(() => {
30
+ const o = t.indicator;
30
31
  return {
31
- ...e,
32
- nudgePointerX: n + (e.nudgePointerX ?? 0),
33
- nudgePointerY: r + (e.nudgePointerY ?? 0)
32
+ ...o,
33
+ nudgePointerX: n + (o.nudgePointerX ?? 0),
34
+ nudgePointerY: r + (o.nudgePointerY ?? 0)
34
35
  };
35
36
  }, [t.indicator, n, r]);
36
- return !i || !t.isActive ? null : t.type === d.TOOLTIP ? l() ? /* @__PURE__ */ g(f, { children: [
37
+ return !i || !t.isActive ? null : t.type === d.TOOLTIP ? l() ? /* @__PURE__ */ f(T, { children: [
37
38
  t.elementToHighlight,
38
- /* @__PURE__ */ o(s, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ o(m, { ...u, children: /* @__PURE__ */ o("div", { style: { height: h, width: C } }) }) })
39
- ] }) : /* @__PURE__ */ o(s, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ o(m, { ...u, children: t.elementToHighlight }) }) : t.type === d.NUDGE ? /* @__PURE__ */ g(f, { children: [
40
- /* @__PURE__ */ o(
41
- s,
39
+ /* @__PURE__ */ e(u, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ e(h, { ...m, children: /* @__PURE__ */ e("div", { style: { height: I, width: b } }) }) })
40
+ ] }) : /* @__PURE__ */ e(u, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ e(h, { ...m, children: t.elementToHighlight }) }) : t.type === d.NUDGE ? /* @__PURE__ */ f(T, { children: [
41
+ /* @__PURE__ */ e(
42
+ u,
42
43
  {
43
44
  $top: l() ? 0 : r,
44
45
  $left: l() ? 0 : n,
@@ -46,10 +47,10 @@ const H = ({ coachmark: t }) => {
46
47
  children: t.elementToHighlight
47
48
  }
48
49
  ),
49
- /* @__PURE__ */ o(y, { zIndex: T + 1, ...I })
50
+ /* @__PURE__ */ e(O, { zIndex: s + 1, ...y })
50
51
  ] }) : null;
51
52
  };
52
53
  export {
53
- H as Coachmark
54
+ Y as Coachmark
54
55
  };
55
56
  //# sourceMappingURL=coachmark.js.map
package/dist/features/journey/comps/coachmark/coachmark.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"coachmark.js","sources":["../../../../../src/features/journey/comps/coachmark/coachmark.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../ui/nudge/nudge-types';\nimport type { ICoachmarkProps } from '../../use-journey/journey-context-types';\n\nimport React, { useMemo } from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Nudge from '../../../ui/nudge/nudge';\nimport { BLUR_OVERLAY_Z_INDEX, IndicatorType } from '../../use-journey/constants';\nimport * as S from './coachmark-styled';\nimport { toolTipGetXCoordinates } from './coachmark-utils';\n\nexport const Coachmark: React.FC<{ coachmark: ICoachmarkProps }> = ({ coachmark }) => {\n const targetElement = coachmark.originalElementToHighlightRef.current;\n const { top = 0, left = 0, height = 0, width = 0 } = targetElement?.getBoundingClientRect() || {};\n\n const isAbsolute = useMemo(() => {\n return () => {\n if (!targetElement) return false;\n\n return window.getComputedStyle(targetElement).position === 'absolute';\n };\n }, [targetElement]);\n\n const tooltipProps = useMemo(() => {\n const arrowToolTipProps = coachmark.indicator as IArrowTooltipProps;\n\n return {\n width: 264, // Can be over ridden\n tooltipXCoOrdinates:\n toolTipGetXCoordinates(arrowToolTipProps.position) +\n (arrowToolTipProps.tooltipXCoOrdinates ?? 0), // For absolutely positioned elements\n zIndex: BLUR_OVERLAY_Z_INDEX + 1,\n ...arrowToolTipProps,\n tooltipItem: <S.CoachmarkBody>{arrowToolTipProps.tooltipItem}</S.CoachmarkBody>,\n alwaysVisible: true,\n renderAs: 'primary', // Deprecate this\n borderWidth: 1,\n arrowColor: 'WHITE',\n borderColor: 'WHITE',\n type: IndicatorType.TOOLTIP,\n isAnimated: true,\n } as IArrowTooltipProps;\n }, [coachmark.indicator]);\n\n const nudgeProps = useMemo(() => {\n const props: INudgeProps = coachmark.indicator as INudgeProps;\n\n return {\n ...props,\n nudgePointerX: left + (props.nudgePointerX ?? 0),\n nudgePointerY: top + (props.nudgePointerY ?? 0),\n };\n }, [coachmark.indicator, left, top]);\n\n if (!targetElement || !coachmark.isActive) {\n return null;\n }\n\n if (coachmark.type === IndicatorType.TOOLTIP) {\n if (isAbsolute()) {\n return (\n <>\n {coachmark.elementToHighlight}\n <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n <ArrowTooltip {...tooltipProps}>\n <div style={{ height, width }} />\n </ArrowTooltip>\n </S.ClonedElementWrapper>\n </>\n );\n }\n\n return (\n <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n <ArrowTooltip {...tooltipProps}>{coachmark.elementToHighlight}</ArrowTooltip>\n </S.ClonedElementWrapper>\n );\n }\n\n if (coachmark.type === IndicatorType.NUDGE) {\n return (\n <>\n <S.ClonedElementWrapper\n $top={isAbsolute() ? 0 : top}\n $left={isAbsolute() ? 0 : left}\n $position={isAbsolute() ? 'relative' : 'absolute'}\n >\n {coachmark.elementToHighlight}\n </S.ClonedElementWrapper>\n <Nudge zIndex={BLUR_OVERLAY_Z_INDEX + 1} {...nudgeProps} />\n </>\n );\n }\n\n return null;\n};\n"],"names":["Coachmark","coachmark","targetElement","top","left","height","width","isAbsolute","useMemo","tooltipProps","arrowToolTipProps","toolTipGetXCoordinates","BLUR_OVERLAY_Z_INDEX","jsx","S.CoachmarkBody","IndicatorType","nudgeProps","props","jsxs","Fragment","S.ClonedElementWrapper","ArrowTooltip","Nudge"],"mappings":";;;;;;;AAYO,MAAMA,IAAsD,CAAC,EAAE,WAAAC,QAAgB;AAC9E,QAAAC,IAAgBD,EAAU,8BAA8B,SACxD,EAAE,KAAAE,IAAM,GAAG,MAAAC,IAAO,GAAG,QAAAC,IAAS,GAAG,OAAAC,IAAQ,EAAE,KAAIJ,KAAA,gBAAAA,EAAe,4BAA2B,CAAA,GAEzFK,IAAaC,EAAQ,MAClB,MACAN,IAEE,OAAO,iBAAiBA,CAAa,EAAE,aAAa,aAFhC,IAI5B,CAACA,CAAa,CAAC,GAEZO,IAAeD,EAAQ,MAAM;AACjC,UAAME,IAAoBT,EAAU;AAE7B,WAAA;AAAA,MACL,OAAO;AAAA;AAAA,MACP,qBACEU,EAAuBD,EAAkB,QAAQ,KAChDA,EAAkB,uBAAuB;AAAA;AAAA,MAC5C,QAAQE,IAAuB;AAAA,MAC/B,GAAGF;AAAA,MACH,aAAc,gBAAAG,EAAAC,GAAA,EAAiB,YAAkB,aAAY;AAAA,MAC7D,eAAe;AAAA,MACf,UAAU;AAAA;AAAA,MACV,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,MAAMC,EAAc;AAAA,MACpB,YAAY;AAAA,IAAA;AAAA,EACd,GACC,CAACd,EAAU,SAAS,CAAC,GAElBe,IAAaR,EAAQ,MAAM;AAC/B,UAAMS,IAAqBhB,EAAU;AAE9B,WAAA;AAAA,MACL,GAAGgB;AAAA,MACH,eAAeb,KAAQa,EAAM,iBAAiB;AAAA,MAC9C,eAAed,KAAOc,EAAM,iBAAiB;AAAA,IAAA;AAAA,KAE9C,CAAChB,EAAU,WAAWG,GAAMD,CAAG,CAAC;AAEnC,SAAI,CAACD,KAAiB,CAACD,EAAU,WACxB,OAGLA,EAAU,SAASc,EAAc,UAC/BR,MAGG,gBAAAW,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAUlB,EAAA;AAAA,IACX,gBAAAY,EAACO,GAAA,EAAuB,WAAU,YAAW,MAAMjB,GAAK,OAAOC,GAC7D,UAAA,gBAAAS,EAACQ,KAAc,GAAGZ,GAChB,4BAAC,OAAI,EAAA,OAAO,EAAE,QAAAJ,GAAQ,OAAAC,EAAA,GAAS,EAAA,CACjC,EACF,CAAA;AAAA,EACF,EAAA,CAAA,sBAKDc,GAAA,EAAuB,WAAU,YAAW,MAAMjB,GAAK,OAAOC,GAC7D,4BAACiB,GAAc,EAAA,GAAGZ,GAAe,UAAAR,EAAU,oBAAmB,EAChE,CAAA,IAIAA,EAAU,SAASc,EAAc,QAG/B,gBAAAG,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,MAAMb,MAAe,IAAIJ;AAAA,QACzB,OAAOI,MAAe,IAAIH;AAAA,QAC1B,WAAWG,MAAe,aAAa;AAAA,QAEtC,UAAUN,EAAA;AAAA,MAAA;AAAA,IACb;AAAA,sBACCqB,GAAM,EAAA,QAAQV,IAAuB,GAAI,GAAGI,GAAY;AAAA,EAC3D,EAAA,CAAA,IAIG;AACT;"}
1
+ {"version":3,"file":"coachmark.js","sources":["../../../../../src/features/journey/comps/coachmark/coachmark.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { INudgeProps } from '../../../ui/nudge/nudge-types';\nimport type { ICoachmarkProps } from '../../use-journey/journey-context-types';\n\nimport React, { useMemo } from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Nudge from '../../../ui/nudge/nudge';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { IndicatorType } from '../../use-journey/constants';\nimport * as S from './coachmark-styled';\nimport { toolTipGetXCoordinates } from './coachmark-utils';\n\nexport const Coachmark: React.FC<{ coachmark: ICoachmarkProps }> = ({ coachmark }) => {\n const targetElement = coachmark.originalElementToHighlightRef.current;\n const { top = 0, left = 0, height = 0, width = 0 } = targetElement?.getBoundingClientRect() || {};\n\n const { zIndex, breakpoints } = getTheme();\n const { isMobile } = breakpoints;\n\n const BLUR_OVERLAY_Z_INDEX = zIndex.JOURNEY_OVERLAY;\n\n const isAbsolute = useMemo(() => {\n return () => {\n if (!targetElement) return false;\n\n return window.getComputedStyle(targetElement).position === 'absolute';\n };\n }, [targetElement]);\n\n const tooltipProps = useMemo(() => {\n const arrowToolTipProps = coachmark.indicator as IArrowTooltipProps;\n\n return {\n width: isMobile ? 246 : 264, // Can be over ridden\n tooltipXCoOrdinates:\n toolTipGetXCoordinates(arrowToolTipProps.position) +\n (arrowToolTipProps.tooltipXCoOrdinates ?? 0), // For absolutely positioned elements\n zIndex: BLUR_OVERLAY_Z_INDEX + 1,\n ...arrowToolTipProps,\n tooltipItem: <S.CoachmarkBody>{arrowToolTipProps.tooltipItem}</S.CoachmarkBody>,\n alwaysVisible: true,\n renderAs: 'primary', // Deprecate this\n borderWidth: 1,\n arrowColor: 'WHITE',\n borderColor: 'WHITE',\n type: IndicatorType.TOOLTIP,\n isAnimated: true,\n } as IArrowTooltipProps;\n }, [BLUR_OVERLAY_Z_INDEX, coachmark.indicator, isMobile]);\n\n const nudgeProps = useMemo(() => {\n const props: INudgeProps = coachmark.indicator as INudgeProps;\n\n return {\n ...props,\n nudgePointerX: left + (props.nudgePointerX ?? 0),\n nudgePointerY: top + (props.nudgePointerY ?? 0),\n };\n }, [coachmark.indicator, left, top]);\n\n if (!targetElement || !coachmark.isActive) {\n return null;\n }\n\n if (coachmark.type === IndicatorType.TOOLTIP) {\n if (isAbsolute()) {\n return (\n <>\n {coachmark.elementToHighlight}\n <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n <ArrowTooltip {...tooltipProps}>\n <div style={{ height, width }} />\n </ArrowTooltip>\n </S.ClonedElementWrapper>\n </>\n );\n }\n\n return (\n <S.ClonedElementWrapper $position=\"absolute\" $top={top} $left={left}>\n <ArrowTooltip {...tooltipProps}>{coachmark.elementToHighlight}</ArrowTooltip>\n </S.ClonedElementWrapper>\n );\n }\n\n if (coachmark.type === IndicatorType.NUDGE) {\n return (\n <>\n <S.ClonedElementWrapper\n $top={isAbsolute() ? 0 : top}\n $left={isAbsolute() ? 0 : left}\n $position={isAbsolute() ? 'relative' : 'absolute'}\n >\n {coachmark.elementToHighlight}\n </S.ClonedElementWrapper>\n <Nudge zIndex={BLUR_OVERLAY_Z_INDEX + 1} {...nudgeProps} />\n </>\n );\n }\n\n return null;\n};\n"],"names":["Coachmark","coachmark","targetElement","top","left","height","width","zIndex","breakpoints","getTheme","isMobile","BLUR_OVERLAY_Z_INDEX","isAbsolute","useMemo","tooltipProps","arrowToolTipProps","toolTipGetXCoordinates","jsx","S.CoachmarkBody","IndicatorType","nudgeProps","props","jsxs","Fragment","S.ClonedElementWrapper","ArrowTooltip","Nudge"],"mappings":";;;;;;;;AAaO,MAAMA,IAAsD,CAAC,EAAE,WAAAC,QAAgB;AAC9E,QAAAC,IAAgBD,EAAU,8BAA8B,SACxD,EAAE,KAAAE,IAAM,GAAG,MAAAC,IAAO,GAAG,QAAAC,IAAS,GAAG,OAAAC,IAAQ,EAAE,KAAIJ,KAAA,gBAAAA,EAAe,4BAA2B,CAAA,GAEzF,EAAE,QAAAK,GAAQ,aAAAC,EAAY,IAAIC,EAAS,GACnC,EAAE,UAAAC,EAAa,IAAAF,GAEfG,IAAuBJ,EAAO,iBAE9BK,IAAaC,EAAQ,MAClB,MACAX,IAEE,OAAO,iBAAiBA,CAAa,EAAE,aAAa,aAFhC,IAI5B,CAACA,CAAa,CAAC,GAEZY,IAAeD,EAAQ,MAAM;AACjC,UAAME,IAAoBd,EAAU;AAE7B,WAAA;AAAA,MACL,OAAOS,IAAW,MAAM;AAAA;AAAA,MACxB,qBACEM,EAAuBD,EAAkB,QAAQ,KAChDA,EAAkB,uBAAuB;AAAA;AAAA,MAC5C,QAAQJ,IAAuB;AAAA,MAC/B,GAAGI;AAAA,MACH,aAAc,gBAAAE,EAAAC,GAAA,EAAiB,YAAkB,aAAY;AAAA,MAC7D,eAAe;AAAA,MACf,UAAU;AAAA;AAAA,MACV,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,MAAMC,EAAc;AAAA,MACpB,YAAY;AAAA,IAAA;AAAA,KAEb,CAACR,GAAsBV,EAAU,WAAWS,CAAQ,CAAC,GAElDU,IAAaP,EAAQ,MAAM;AAC/B,UAAMQ,IAAqBpB,EAAU;AAE9B,WAAA;AAAA,MACL,GAAGoB;AAAA,MACH,eAAejB,KAAQiB,EAAM,iBAAiB;AAAA,MAC9C,eAAelB,KAAOkB,EAAM,iBAAiB;AAAA,IAAA;AAAA,KAE9C,CAACpB,EAAU,WAAWG,GAAMD,CAAG,CAAC;AAEnC,SAAI,CAACD,KAAiB,CAACD,EAAU,WACxB,OAGLA,EAAU,SAASkB,EAAc,UAC/BP,MAGG,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAUtB,EAAA;AAAA,IACX,gBAAAgB,EAACO,GAAA,EAAuB,WAAU,YAAW,MAAMrB,GAAK,OAAOC,GAC7D,UAAA,gBAAAa,EAACQ,KAAc,GAAGX,GAChB,4BAAC,OAAI,EAAA,OAAO,EAAE,QAAAT,GAAQ,OAAAC,EAAA,GAAS,EAAA,CACjC,EACF,CAAA;AAAA,EACF,EAAA,CAAA,sBAKDkB,GAAA,EAAuB,WAAU,YAAW,MAAMrB,GAAK,OAAOC,GAC7D,4BAACqB,GAAc,EAAA,GAAGX,GAAe,UAAAb,EAAU,oBAAmB,EAChE,CAAA,IAIAA,EAAU,SAASkB,EAAc,QAG/B,gBAAAG,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,MAAMZ,MAAe,IAAIT;AAAA,QACzB,OAAOS,MAAe,IAAIR;AAAA,QAC1B,WAAWQ,MAAe,aAAa;AAAA,QAEtC,UAAUX,EAAA;AAAA,MAAA;AAAA,IACb;AAAA,sBACCyB,GAAM,EAAA,QAAQf,IAAuB,GAAI,GAAGS,GAAY;AAAA,EAC3D,EAAA,CAAA,IAIG;AACT;"}
package/dist/features/journey/use-journey/constants.js CHANGED
@@ -1,7 +1,5 @@
1
- var e = /* @__PURE__ */ ((t) => (t.TOOLTIP = "tooltip", t.NUDGE = "nudge", t))(e || {});
2
- const o = 1e3;
1
+ var t = /* @__PURE__ */ ((r) => (r.TOOLTIP = "tooltip", r.NUDGE = "nudge", r))(t || {});
3
2
  export {
4
- o as BLUR_OVERLAY_Z_INDEX,
5
- e as IndicatorType
3
+ t as IndicatorType
6
4
  };
7
5
  //# sourceMappingURL=constants.js.map
package/dist/features/journey/use-journey/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../../src/features/journey/use-journey/constants.ts"],"sourcesContent":["export enum IndicatorType {\n TOOLTIP = 'tooltip',\n NUDGE = 'nudge',\n}\nexport const BLUR_OVERLAY_Z_INDEX = 1000;\n"],"names":["IndicatorType","BLUR_OVERLAY_Z_INDEX"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAIL,MAAMC,IAAuB;"}
1
+ {"version":3,"file":"constants.js","sources":["../../../../src/features/journey/use-journey/constants.ts"],"sourcesContent":["export enum IndicatorType {\n TOOLTIP = 'tooltip',\n NUDGE = 'nudge',\n}\n"],"names":["IndicatorType"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;"}
package/dist/features/journey/use-journey/journey-styled.js CHANGED
@@ -1,14 +1,13 @@
1
1
  import o from "styled-components";
2
- import { BLUR_OVERLAY_Z_INDEX as t } from "./constants.js";
3
- const e = o.div`
2
+ const i = o.div`
4
3
  position: fixed;
5
4
  top: 0;
6
5
  right: 0;
7
6
  bottom: 0;
8
7
  left: 0;
9
- z-index: ${t};
8
+ z-index: ${({ theme: t }) => t.zIndex.JOURNEY_OVERLAY};
10
9
  `;
11
10
  export {
12
- e as Overlay
11
+ i as Overlay
13
12
  };
14
13
  //# sourceMappingURL=journey-styled.js.map
package/dist/features/journey/use-journey/journey-styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"journey-styled.js","sources":["../../../../src/features/journey/use-journey/journey-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BLUR_OVERLAY_Z_INDEX } from './constants';\n\nexport const Overlay = styled.div`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ${BLUR_OVERLAY_Z_INDEX};\n`;\n"],"names":["Overlay","styled","BLUR_OVERLAY_Z_INDEX"],"mappings":";;AAIO,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjBC,CAAoB;AAAA;"}
1
+ {"version":3,"file":"journey-styled.js","sources":["../../../../src/features/journey/use-journey/journey-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Overlay = styled.div`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ${({ theme }) => theme.zIndex.JOURNEY_OVERLAY};\n`;\n"],"names":["Overlay","styled","theme"],"mappings":";AAEO,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,eAAe;AAAA;"}
package/dist/features/ui/constants/z-index.js CHANGED
@@ -13,7 +13,8 @@ const _ = {
13
13
  //whiteboard
14
14
  QUESTION_TIPS: -1,
15
15
  DESMOS_CALCULATOR: 2,
16
- GOAL_CHAPTER_SHEETS_MENU: 4
16
+ GOAL_CHAPTER_SHEETS_MENU: 4,
17
+ JOURNEY_OVERLAY: 1e3
17
18
  };
18
19
  export {
19
20
  _ as ZINDEX
package/dist/features/ui/constants/z-index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n CHAPTER_CROWN_ICON: 4,\n CHAPTER_PLUS_ICON: 2,\n CHAPTER_PROGRESS_SVG: 1,\n LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n MODAL: 20,\n SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n TILE_CONTAINER: 30, //whiteboard\n QUESTION_TIPS: -1,\n DESMOS_CALCULATOR: 2,\n GOAL_CHAPTER_SHEETS_MENU: 4,\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAC5B;"}
1
+ {"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n CHAPTER_CROWN_ICON: 4,\n CHAPTER_PLUS_ICON: 2,\n CHAPTER_PROGRESS_SVG: 1,\n LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n MODAL: 20,\n SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n TILE_CONTAINER: 30, //whiteboard\n QUESTION_TIPS: -1,\n DESMOS_CALCULATOR: 2,\n GOAL_CHAPTER_SHEETS_MENU: 4,\n JOURNEY_OVERLAY: 1000,\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAAA,EAC1B,iBAAiB;AACnB;"}
package/dist/features/ui/theme/breakpoints.js ADDED
@@ -0,0 +1,11 @@
1
+ const n = () => {
2
+ const e = window.innerWidth <= 600 ? "MOBILE" : "DESKTOP";
3
+ return {
4
+ isMobile: e === "MOBILE",
5
+ isDesktop: e === "DESKTOP"
6
+ };
7
+ };
8
+ export {
9
+ n as getBreakpointsConfig
10
+ };
11
+ //# sourceMappingURL=breakpoints.js.map
package/dist/features/ui/theme/breakpoints.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"breakpoints.js","sources":["../../../../src/features/ui/theme/breakpoints.ts"],"sourcesContent":["export const getBreakpointsConfig = () => {\n const MOBILE_WIDTH = 600;\n const device = window.innerWidth <= MOBILE_WIDTH ? 'MOBILE' : 'DESKTOP';\n\n return {\n isMobile: device === 'MOBILE',\n isDesktop: device === 'DESKTOP',\n };\n};\n"],"names":["getBreakpointsConfig","device"],"mappings":"AAAO,MAAMA,IAAuB,MAAM;AAExC,QAAMC,IAAS,OAAO,cAAc,MAAe,WAAW;AAEvD,SAAA;AAAA,IACL,UAAUA,MAAW;AAAA,IACrB,WAAWA,MAAW;AAAA,EAAA;AAE1B;"}