@cuemath/leap 2.9.7 → 2.9.8-as2

package/dist/features/homework/styles.js

@@ -0,0 +1,130 @@
+import r from "styled-components";
+import n from "../../assets/line-icons/icons/minus2.js";
+import e from "../ui/layout/flex-view.js";
+import i from "../ui/text/text.js";
+const l = r(e)(({ theme: o }) => `
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    
+    
+    &:hover {
+      border-radius: 50%;
+      background: ${o.colors.WHITE_5}; 
+    }
+  `), d = r(i)`
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, u = r(e)(({
+  $shouldopenonright: o,
+  $visible: t
+}) => `
+    cursor: pointer;
+    position: absolute;
+    z-index: 6;
+    top: calc(100% + 4px);
+    right: ${o ? 0 : "auto"};
+    transform-origin: top;
+    transform: scaleY(${t ? 1 : 0});
+    opacity: ${t ? 1 : 0};
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);
+    z-index: 10;
+  `), x = r(e)`
+  border: 1px solid ${({ theme: o }) => o.colors.BLACK_T_15};
+
+  &:hover {
+    border: 1px solid ${({ theme: o }) => o.colors.BLACK};
+  }
+`, b = r(e)(({ $bgImage: o }) => o ? `
+      background-image: url(${o});
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      overflow: hidden;
+    ` : "overflow: hidden;"), h = r(e)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, w = r(e)`
+  position: absolute;
+  right: -18px;
+  top: -4px;
+`, f = r.img(({ theme: o }) => {
+  const { gutter: t } = o.layout;
+  return `
+    border: 1px solid ${o.colors.BLACK_T_15};
+    width: ${t * 4}px;
+    height: ${t * 4}px;
+    border-radius: 50%;
+  `;
+}), g = r(n)`
+  path {
+    stroke: ${({ theme: o }) => o.colors.WHITE};
+  }
+`, m = r(i)`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: break-spaces;
+`;
+r(e)``;
+const k = r(e)(({
+  theme: o,
+  $disabled: t
+}) => `
+    cursor: ${t ? "not-allowed" : "pointer"};
+    
+    &:hover {
+      background: ${t ? "transparent" : o.colors.BLACK};
+    };
+    
+    path {
+      fill: ${o.colors.WHITE_1};
+    }
+  `), v = r(i)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, C = r(e)`
+  position: absolute;
+  z-index: 6;
+  top: calc(100% - 36px);
+  right: 12px;
+  transform-origin: top;
+  transform: scaleY(1);
+`, $ = r(e)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+`, y = r(e)`
+  position: absolute;
+  right: 42px;
+  top: 24px;
+`;
+export {
+  f as BannerImage,
+  w as BannerImageWrapper,
+  $ as BlurContainer,
+  y as BlurFlexView,
+  x as CardContainer,
+  l as CardKebabMenuWrapper,
+  u as CardMenuOptionsWrapper,
+  k as CardOptionWrapper,
+  b as CardWrapper,
+  m as HeaderText,
+  h as IconWrapper,
+  C as MenuWrapper,
+  v as OptionText,
+  g as StyledMinus2Icon,
+  d as SubHeaderText
+};
+//# sourceMappingURL=styles.js.map

package/dist/features/homework/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/features/homework/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Minus2Icon from '../../assets/line-icons/icons/minus2';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\ninterface ICardWrapperProps {\n  $bgImage: string;\n}\ninterface ICardOptionsMenuWrapperProps {\n  $visible: boolean;\n  $shouldopenonright: boolean;\n}\n\nexport const CardKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    \n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport const SubHeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const CardMenuOptionsWrapper = styled(FlexView)<ICardOptionsMenuWrapperProps>(({\n  $shouldopenonright,\n  $visible,\n}) => {\n  return `\n    cursor: pointer;\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    right: ${$shouldopenonright ? 0 : 'auto'};\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);\n    z-index: 10;\n  `;\n});\n\nexport const CardContainer = styled(FlexView)`\n  border: 1px solid ${({ theme }) => theme.colors.BLACK_T_15};\n\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.BLACK};\n  }\n`;\n\nexport const CardWrapper = styled(FlexView)<ICardWrapperProps>(({ $bgImage }) => {\n  if ($bgImage) {\n    return `\n      background-image: url(${$bgImage});\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n      overflow: hidden;\n    `;\n  }\n\n  return 'overflow: hidden;';\n});\n\nexport const IconWrapper = styled(FlexView)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const BannerImageWrapper = styled(FlexView)`\n  position: absolute;\n  right: -18px;\n  top: -4px;\n`;\n\nexport const BannerImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    border: 1px solid ${theme.colors.BLACK_T_15};\n    width: ${gutter * 4}px;\n    height: ${gutter * 4}px;\n    border-radius: 50%;\n  `;\n});\n\nexport const StyledMinus2Icon = styled(Minus2Icon)`\n  path {\n    stroke: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const HeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\ninterface ICardOptionWrapperProps {\n  $disabled?: boolean;\n}\ninterface ICardOptionsProps {\n  $top: number;\n  $left: number;\n}\n\nexport const CardOptions = styled(FlexView)<ICardOptionsProps>``;\n\nexport const CardOptionWrapper = styled(FlexView)<ICardOptionWrapperProps>(({\n  theme,\n  $disabled,\n}) => {\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    \n    &:hover {\n      background: ${$disabled ? 'transparent' : theme.colors.BLACK};\n    };\n    \n    path {\n      fill: ${theme.colors.WHITE_1};\n    }\n  `;\n});\n\nexport const OptionText = styled(Text)`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  z-index: 6;\n  top: calc(100% - 36px);\n  right: 12px;\n  transform-origin: top;\n  transform: scaleY(1);\n`;\n\nexport const BlurContainer = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n`;\n\nexport const BlurFlexView = styled(FlexView)`\n  position: absolute;\n  right: 42px;\n  top: 24px;\n`;\n"],"names":["CardKebabMenuWrapper","styled","FlexView","theme","SubHeaderText","Text","CardMenuOptionsWrapper","$shouldopenonright","$visible","CardContainer","CardWrapper","$bgImage","IconWrapper","BannerImageWrapper","BannerImage","gutter","StyledMinus2Icon","Minus2Icon","HeaderText","CardOptionWrapper","$disabled","OptionText","MenuWrapper","BlurContainer","BlurFlexView"],"mappings":";;;;AAcO,MAAMA,IAAuBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAEYC,IAAgBH,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAAyBL,EAAOC,CAAQ,EAAgC,CAAC;AAAA,EACpF,oBAAAK;AAAA,EACA,UAAAC;AACF,MACS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKID,IAAqB,IAAI,MAAM;AAAA;AAAA,wBAEpBC,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,GAK9B,GAEYC,IAAgBR,EAAOC,CAAQ;AAAA,sBACtB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,wBAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAI5CO,IAAcT,EAAOC,CAAQ,EAAqB,CAAC,EAAE,UAAAS,QAC5DA,IACK;AAAA,8BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ7B,mBACR,GAEYC,IAAcX,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM7BW,IAAqBZ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMpCY,IAAcb,EAAO,IAAI,CAAC,EAAE,OAAAE,QAAY;AAC7C,QAAA,EAAE,QAAAY,EAAO,IAAIZ,EAAM;AAElB,SAAA;AAAA,wBACeA,EAAM,OAAO,UAAU;AAAA,aAClCY,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEYC,IAAmBf,EAAOgB,CAAU;AAAA;AAAA,cAEnC,CAAC,EAAE,OAAAd,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIlCe,IAAajB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBVJ,EAAOC,CAAQ;AAEnC,MAAMiB,IAAoBlB,EAAOC,CAAQ,EAA2B,CAAC;AAAA,EAC1E,OAAAC;AAAA,EACA,WAAAiB;AACF,MACS;AAAA,cACKA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,oBAG/BA,IAAY,gBAAgBjB,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,cAIpDA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGjC,GAEYkB,IAAapB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAcrB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS7BqB,IAAgBtB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BsB,IAAevB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/homework/utils.js

@@ -0,0 +1,48 @@
+import { TESTS_CREATION_ANALYTICS_EVENTS as l } from "../milestone/milestone-tests/tests-creation/tests-creation-analytics-events.js";
+import { NODE_TYPE as E } from "../sheets/constants/sheet.js";
+import { HOMEWORK_ANALYTICS_EVENTS as c } from "./homework-analytics-events.js";
+const y = ({
+  canResume: a,
+  canStart: i,
+  homeworkId: e,
+  isHomeWork: _,
+  isStudent: o,
+  milestoneId: n,
+  nodeType: t,
+  studentId: r,
+  userNodeId: s
+}) => {
+  if (o) {
+    if (_)
+      return i || a ? {
+        analyticsLabel: c.HOMEWORK_ATTEMPTED,
+        analyticsProps: { student_id: r, node_type: t, homework_id: e }
+      } : {
+        analyticsLabel: "homework-student-menu",
+        analyticsProps: { student_id: r, node_type: t, homework_id: e }
+      };
+    if (i || a)
+      return {
+        analyticsLabel: t === E.DYNAMIC ? l.CUSTOM_TEST_ATTEMPTED : "node-attempted",
+        analyticsProps: {
+          student_id: r,
+          node_type: t,
+          user_node_id: s,
+          milestone_id: n,
+          can_start: i,
+          can_resume: a
+        }
+      };
+  }
+  return _ ? {
+    analyticsLabel: "homework-card-teacher",
+    analyticsProps: { student_id: r, node_type: t }
+  } : {
+    analyticsLabel: "goals-card-teacher",
+    analyticsProps: { student_id: r, node_type: t }
+  };
+};
+export {
+  y as getCardAnalyticProps
+};
+//# sourceMappingURL=utils.js.map

package/dist/features/homework/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/features/homework/utils.ts"],"sourcesContent":["import type { TNodeTypes } from '../chapters-v2/comps/node-card/node-card-types';\n\nimport { TESTS_CREATION_ANALYTICS_EVENTS } from '../milestone/milestone-tests/tests-creation/tests-creation-analytics-events';\nimport { NODE_TYPE } from '../sheets/constants/sheet';\nimport { HOMEWORK_ANALYTICS_EVENTS } from './homework-analytics-events';\n\ninterface IGetCardAnalyticProps {\n  canResume: boolean;\n  canStart: boolean;\n  homeworkId?: string;\n  isHomeWork: boolean;\n  isStudent: boolean;\n  milestoneId?: string;\n  nodeType: TNodeTypes;\n  studentId: string;\n  userNodeId: string | null;\n}\n\nconst getCardAnalyticProps = ({\n  canResume,\n  canStart,\n  homeworkId,\n  isHomeWork,\n  isStudent,\n  milestoneId,\n  nodeType,\n  studentId,\n  userNodeId,\n}: IGetCardAnalyticProps) => {\n  if (isStudent) {\n    if (isHomeWork) {\n      if (canStart || canResume) {\n        return {\n          analyticsLabel: HOMEWORK_ANALYTICS_EVENTS.HOMEWORK_ATTEMPTED,\n          analyticsProps: { student_id: studentId, node_type: nodeType, homework_id: homeworkId },\n        };\n      }\n\n      return {\n        analyticsLabel: 'homework-student-menu',\n        analyticsProps: { student_id: studentId, node_type: nodeType, homework_id: homeworkId },\n      };\n    }\n\n    if (canStart || canResume) {\n      return {\n        analyticsLabel:\n          nodeType === NODE_TYPE.DYNAMIC\n            ? TESTS_CREATION_ANALYTICS_EVENTS.CUSTOM_TEST_ATTEMPTED\n            : 'node-attempted',\n        analyticsProps: {\n          student_id: studentId,\n          node_type: nodeType,\n          user_node_id: userNodeId,\n          milestone_id: milestoneId,\n          can_start: canStart,\n          can_resume: canResume,\n        },\n      };\n    }\n  }\n\n  if (isHomeWork) {\n    return {\n      analyticsLabel: 'homework-card-teacher',\n      analyticsProps: { student_id: studentId, node_type: nodeType },\n    };\n  }\n\n  return {\n    analyticsLabel: 'goals-card-teacher',\n    analyticsProps: { student_id: studentId, node_type: nodeType },\n  };\n};\n\nexport { getCardAnalyticProps };\n"],"names":["getCardAnalyticProps","canResume","canStart","homeworkId","isHomeWork","isStudent","milestoneId","nodeType","studentId","userNodeId","HOMEWORK_ANALYTICS_EVENTS","NODE_TYPE","TESTS_CREATION_ANALYTICS_EVENTS"],"mappings":";;;AAkBA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACF,MAA6B;AAC3B,MAAIJ,GAAW;AACb,QAAID;AACF,aAAIF,KAAYD,IACP;AAAA,QACL,gBAAgBS,EAA0B;AAAA,QAC1C,gBAAgB,EAAE,YAAYF,GAAW,WAAWD,GAAU,aAAaJ,EAAW;AAAA,MAAA,IAInF;AAAA,QACL,gBAAgB;AAAA,QAChB,gBAAgB,EAAE,YAAYK,GAAW,WAAWD,GAAU,aAAaJ,EAAW;AAAA,MAAA;AAI1F,QAAID,KAAYD;AACP,aAAA;AAAA,QACL,gBACEM,MAAaI,EAAU,UACnBC,EAAgC,wBAChC;AAAA,QACN,gBAAgB;AAAA,UACd,YAAYJ;AAAA,UACZ,WAAWD;AAAA,UACX,cAAcE;AAAA,UACd,cAAcH;AAAA,UACd,WAAWJ;AAAA,UACX,YAAYD;AAAA,QACd;AAAA,MAAA;AAAA,EAGN;AAEA,SAAIG,IACK;AAAA,IACL,gBAAgB;AAAA,IAChB,gBAAgB,EAAE,YAAYI,GAAW,WAAWD,EAAS;AAAA,EAAA,IAI1D;AAAA,IACL,gBAAgB;AAAA,IAChB,gBAAgB,EAAE,YAAYC,GAAW,WAAWD,EAAS;AAAA,EAAA;AAEjE;"}

package/dist/features/journey/comps/coachmark/coachmark-styled.js

@@ -1,17 +1,35 @@
 import e from "styled-components";
-import p from "../../../ui/layout/flex-view.js";
-const d = e(p)`
-  top: ${({ $top: t }) => t}px;
-  left: ${({ $left: t }) => t}px;
-`, l = e(p)(({ theme: t }) => {
-  const { gutter: o } = t.layout;
+import n from "../../../ui/layout/flex-view.js";
+const d = e(n)`
+  top: ${({ $top: r }) => r}px;
+  left: ${({ $left: r }) => r}px;
+`, i = e(n)(({ theme: r }) => {
+  const { gutter: t } = r.layout;
   return `
     width: 100%;
-    padding: ${o * 0.75}px ${o * 0.5}px;
+    padding: ${t * 0.75}px ${t * 0.5}px;
+  `;
+}), s = e.div`
+  pointer-events: none;
+  width: 720px;
+  overflow: hidden;
+  padding: 30px;
+  background-color: transparent;
+`, c = e.div(({ theme: r }) => {
+  const { WHITE_5: t, WHITE_2: p } = r.colors;
+  return `
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    align-content: start;
+    background: ${p};
+    background-image: linear-gradient(${t} 0.5px, transparent 0.5px), linear-gradient(90deg, ${t} 0.5px, transparent 0.5px);
+    background-size: 45px 45px;
   `;
 });
 export {
+  c as ChaptersWrapper,
   d as ClonedElementWrapper,
-  l as CoachmarkBody
+  i as CoachmarkBody,
+  s as ELementWrapper
 };
 //# sourceMappingURL=coachmark-styled.js.map

package/dist/features/journey/comps/coachmark/coachmark-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"coachmark-styled.js","sources":["../../../../../src/features/journey/comps/coachmark/coachmark-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const ClonedElementWrapper = styled(FlexView)<{\n  $top: number;\n  $left: number;\n}>`\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n`;\n\nexport const CoachmarkBody = styled(FlexView)(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    width: 100%;\n    padding: ${gutter * 0.75}px ${gutter * 0.5}px;\n  `;\n});\n"],"names":["ClonedElementWrapper","styled","FlexView","$top","$left","CoachmarkBody","theme","gutter"],"mappings":";;AAIa,MAAAA,IAAuBC,EAAOC,CAAQ;AAAA,SAI1C,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,GAGjBC,IAAgBJ,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAI,QAAY;AACrD,QAAA,EAAE,QAAAC,EAAO,IAAID,EAAM;AAElB,SAAA;AAAA;AAAA,eAEMC,IAAS,IAAI,MAAMA,IAAS,GAAG;AAAA;AAE9C,CAAC;"}
+{"version":3,"file":"coachmark-styled.js","sources":["../../../../../src/features/journey/comps/coachmark/coachmark-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const ClonedElementWrapper = styled(FlexView)<{\n  $top: number;\n  $left: number;\n}>`\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n`;\n\nexport const CoachmarkBody = styled(FlexView)(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    width: 100%;\n    padding: ${gutter * 0.75}px ${gutter * 0.5}px;\n  `;\n});\n\nexport const ELementWrapper = styled.div`\n  pointer-events: none;\n  width: 720px;\n  overflow: hidden;\n  padding: 30px;\n  background-color: transparent;\n`;\n\nexport const ChaptersWrapper = styled.div(({ theme }) => {\n  const { WHITE_5, WHITE_2 } = theme.colors;\n\n  return `\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    align-content: start;\n    background: ${WHITE_2};\n    background-image: linear-gradient(${WHITE_5} 0.5px, transparent 0.5px), linear-gradient(90deg, ${WHITE_5} 0.5px, transparent 0.5px);\n    background-size: 45px 45px;\n  `;\n});\n"],"names":["ClonedElementWrapper","styled","FlexView","$top","$left","CoachmarkBody","theme","gutter","ELementWrapper","ChaptersWrapper","WHITE_5","WHITE_2"],"mappings":";;AAIa,MAAAA,IAAuBC,EAAOC,CAAQ;AAAA,SAI1C,CAAC,EAAE,MAAAC,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,GAGjBC,IAAgBJ,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAI,QAAY;AACrD,QAAA,EAAE,QAAAC,EAAO,IAAID,EAAM;AAElB,SAAA;AAAA;AAAA,eAEMC,IAAS,IAAI,MAAMA,IAAS,GAAG;AAAA;AAE9C,CAAC,GAEYC,IAAiBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBQ,IAAkBR,EAAO,IAAI,CAAC,EAAE,OAAAK,QAAY;AACvD,QAAM,EAAE,SAAAI,GAAS,SAAAC,MAAYL,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA,kBAISK,CAAO;AAAA,wCACeD,CAAO,sDAAsDA,CAAO;AAAA;AAAA;AAG5G,CAAC;"}

package/dist/features/journey/comps/coachmark/coachmark.js

@@ -1,43 +1,43 @@
-import { jsx as o, jsxs as g, Fragment as f } from "react/jsx-runtime";
-import { useMemo as p } from "react";
+import { jsx as e, jsxs as g, Fragment as f } from "react/jsx-runtime";
+import { useMemo as d } from "react";
 import m from "../../../ui/arrow-tooltip/arrow-tooltip.js";
-import y from "../../../ui/nudge/nudge.js";
-import { BLUR_OVERLAY_Z_INDEX as T, IndicatorType as d } from "../../use-journey/constants.js";
-import { CoachmarkBody as P, ClonedElementWrapper as s } from "./coachmark-styled.js";
-import { toolTipGetXCoordinates as $ } from "./coachmark-utils.js";
+import b from "../../../ui/nudge/nudge.js";
+import { BLUR_OVERLAY_Z_INDEX as T, IndicatorType as p } from "../../use-journey/constants.js";
+import { CoachmarkBody as w, ClonedElementWrapper as s } from "./coachmark-styled.js";
+import { toolTipGetXCoordinates as y } from "./coachmark-utils.js";
 const H = ({ coachmark: t }) => {
-  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(() => {
-    const e = t.indicator;
+  const i = t.originalElementToHighlightRef.current, { top: r = 0, left: n = 0, height: h = 0, width: C = 0 } = (i == null ? void 0 : i.getBoundingClientRect()) || {}, l = d(() => () => i ? window.getComputedStyle(i).position === "absolute" : !1, [i]), u = d(() => {
+    const o = t.indicator;
     return {
       width: 264,
       // Can be over ridden
-      tooltipXCoOrdinates: $(e.position) + (e.tooltipXCoOrdinates ?? 0),
+      tooltipXCoOrdinates: y(o.position) + (o.tooltipXCoOrdinates ?? 0),
       // For absolutely positioned elements
       zIndex: T + 1,
-      ...e,
-      tooltipItem: /* @__PURE__ */ o(P, { children: e.tooltipItem }),
+      ...o,
+      tooltipItem: /* @__PURE__ */ e(w, { children: o.tooltipItem }),
       alwaysVisible: !0,
       renderAs: "primary",
       // Deprecate this
       borderWidth: 1,
-      arrowColor: "WHITE",
-      borderColor: "WHITE",
-      type: d.TOOLTIP,
+      arrowColor: o.arrowColor || "WHITE",
+      borderColor: o.borderColor || "WHITE",
+      type: p.TOOLTIP,
       isAnimated: !0
     };
-  }, [t.indicator]), I = p(() => {
-    const e = t.indicator;
+  }, [t.indicator]), I = d(() => {
+    const o = t.indicator;
     return {
-      ...e,
-      nudgePointerX: n + (e.nudgePointerX ?? 0),
-      nudgePointerY: r + (e.nudgePointerY ?? 0)
+      ...o,
+      nudgePointerX: n + (o.nudgePointerX ?? 0),
+      nudgePointerY: r + (o.nudgePointerY ?? 0)
     };
   }, [t.indicator, n, r]);
-  return !i || !t.isActive ? null : t.type === d.TOOLTIP ? l() ? /* @__PURE__ */ g(f, { children: [
+  return !i || !t.isActive ? null : t.type === p.TOOLTIP ? l() ? /* @__PURE__ */ g(f, { children: [
     t.elementToHighlight,
-    /* @__PURE__ */ o(s, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ o(m, { ...u, children: /* @__PURE__ */ o("div", { style: { height: h, width: C } }) }) })
-  ] }) : /* @__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: [
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ e(s, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ e(m, { ...u, children: /* @__PURE__ */ e("div", { style: { height: h, width: C } }) }) })
+  ] }) : /* @__PURE__ */ e(s, { $position: "absolute", $top: r, $left: n, children: /* @__PURE__ */ e(m, { ...u, children: t.elementToHighlight }) }) : t.type === p.NUDGE ? /* @__PURE__ */ g(f, { children: [
+    /* @__PURE__ */ e(
       s,
       {
         $top: l() ? 0 : r,
@@ -46,7 +46,7 @@ const H = ({ coachmark: t }) => {
         children: t.elementToHighlight
       }
     ),
-    /* @__PURE__ */ o(y, { zIndex: T + 1, ...I })
+    /* @__PURE__ */ e(b, { zIndex: T + 1, ...I })
   ] }) : null;
 };
 export {

package/dist/features/journey/comps/coachmark/coachmark.js.map

@@ -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;"}
+{"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: arrowToolTipProps.arrowColor || 'WHITE',\n      borderColor: arrowToolTipProps.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,YAAYJ,EAAkB,cAAc;AAAA,MAC5C,aAAaA,EAAkB,eAAe;AAAA,MAC9C,MAAMK,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;"}

package/dist/features/journey/hooks/use-chapter-journey.js

@@ -0,0 +1,194 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useRef as s, useCallback as C, useMemo as P, useEffect as _ } from "react";
+import X from "../../chapters-v2/chapter-details/block-sections/block-sections.js";
+import x from "../../chapters-v2/chapter-details/chapter-banner/chapter-banner.js";
+import I from "../../chapters-v2/chapter-details/chapter-details.js";
+import a from "../../ui/buttons/button/button.js";
+import l from "../../ui/layout/flex-view.js";
+import c from "../../ui/text/text.js";
+import { JOURNEY_ID_STUDENT as K } from "../journey-id/journey-id-student.js";
+import { PROGRESS_STAT_MOCK as y, BLOCK_MOCKS as H } from "../mocks/chapter-page-journey-mock-data.js";
+import { IndicatorType as d } from "../use-journey/constants.js";
+import { useJourney as $ } from "../use-journey/use-journey.js";
+const q = () => {
+  const o = K.CHAPTER_PAGE_JOURNEY, t = s(null), r = s(null), m = s(null), h = s([]), { nextCoachmark: g, setJourney: f, endJourney: A } = $(), i = C(() => {
+    g(o, !1, 0, !0);
+  }, [o, g]), w = C(() => {
+    A(o);
+  }, [A, o]), T = C(
+    ({ chapterDetails: p, userChapterId: B, studentId: L, userType: b }) => {
+      const { name: O, image_hue: u, image_url: R } = p;
+      if (!(t != null && t.current) || !(r != null && r.current) || !m.current)
+        return;
+      const S = t.current.getBoundingClientRect(), N = [
+        {
+          originalElementToHighlightRef: t,
+          isActive: !1,
+          type: d.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ e(
+            I,
+            {
+              userChapterId: B,
+              studentId: L,
+              userType: b,
+              onBlockSkipUnskip: () => null,
+              onNodeAttempt: () => null,
+              onNodeAttemptLocationChange: () => null,
+              onNodeMarkAsDone: () => null,
+              onNodeReattempt: () => null,
+              onNodeReview: () => null,
+              onNodeView: () => null,
+              onExit: () => null
+            }
+          ),
+          indicator: {
+            position: "left",
+            tooltipYCoOrdinates: -(S.height / 2) + 178,
+            backgroundColor: "BLUE_4",
+            borderColor: "BLACK",
+            arrowColor: "BLACK",
+            arrowSize: 12,
+            width: 264,
+            tooltipItem: /* @__PURE__ */ n(l, { $flexRowGapX: 0.75, children: [
+              /* @__PURE__ */ e(c, { $renderAs: "ab2-bold", children: "Welcome to the all new chapter experience." }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  label: "Next",
+                  size: "xsmall",
+                  widthX: 6,
+                  renderAs: "secondary",
+                  onClick: i
+                }
+              )
+            ] })
+          }
+        },
+        {
+          originalElementToHighlightRef: r,
+          elementToHighlight: /* @__PURE__ */ e(
+            x,
+            {
+              title: O,
+              progressStats: y,
+              imageUrl: R,
+              imageHue: u
+            }
+          ),
+          type: d.TOOLTIP,
+          indicator: {
+            position: "bottom",
+            tooltipXCoOrdinates: -45,
+            tooltipYCoOrdinates: -40,
+            backgroundColor: "ORANGE_4",
+            borderColor: "BLACK",
+            arrowColor: "BLACK",
+            width: 264,
+            arrowSize: 12,
+            tooltipItem: /* @__PURE__ */ n(l, { $flexRowGapX: 0.75, children: [
+              /* @__PURE__ */ e(c, { $renderAs: "ab2-bold", children: "A chapter is divided into *core sheets (compulsory), and supplementary sheets." }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  label: "Next",
+                  size: "xsmall",
+                  widthX: 6,
+                  renderAs: "secondary",
+                  onClick: i
+                }
+              )
+            ] })
+          },
+          isActive: !1
+        },
+        {
+          originalElementToHighlightRef: r,
+          elementToHighlight: /* @__PURE__ */ e(
+            x,
+            {
+              title: O,
+              progressStats: y,
+              imageUrl: R,
+              imageHue: u
+            }
+          ),
+          type: d.TOOLTIP,
+          indicator: {
+            position: "bottom",
+            tooltipXCoOrdinates: -275,
+            tooltipYCoOrdinates: -15,
+            backgroundColor: "PURPLE_4",
+            borderColor: "BLACK",
+            arrowColor: "BLACK",
+            arrowSize: 12,
+            width: 264,
+            tooltipItem: /* @__PURE__ */ n(l, { $flexRowGapX: 0.75, children: [
+              /* @__PURE__ */ e(c, { $renderAs: "ab2-bold", children: "Easily track the progress of the core sheets." }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  label: "Next",
+                  size: "xsmall",
+                  widthX: 6,
+                  renderAs: "secondary",
+                  onClick: i
+                }
+              )
+            ] })
+          },
+          isActive: !1
+        },
+        {
+          originalElementToHighlightRef: m,
+          elementToHighlight: /* @__PURE__ */ e(l, { $widthX: 50, children: /* @__PURE__ */ e(X, { userType: b, blocks: H, imageHue: u }) }),
+          type: d.TOOLTIP,
+          indicator: {
+            position: "top",
+            tooltipXCoOrdinates: -150,
+            tooltipYCoOrdinates: -260,
+            backgroundColor: "PURPLE_4",
+            borderColor: "BLACK",
+            arrowColor: "BLACK",
+            arrowSize: 12,
+            width: 264,
+            tooltipItem: /* @__PURE__ */ n(l, { $flexRowGapX: 0.75, children: [
+              /* @__PURE__ */ e(c, { $renderAs: "ab2-bold", children: "Easily track the progress of the core sheets." }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  label: "Got it",
+                  size: "xsmall",
+                  widthX: 6,
+                  renderAs: "secondary",
+                  onClick: w
+                }
+              )
+            ] })
+          },
+          isActive: !1
+        }
+      ];
+      f(o, N);
+      const k = setTimeout(() => {
+        clearTimeout(k), i();
+      }, 500);
+      h.current.push(k);
+    },
+    [i, w, f, o]
+  ), E = P(
+    () => ({
+      chapterPageRef: t,
+      bannerRef: r,
+      coreBlocksRef: m,
+      startJourney: T
+    }),
+    [T]
+  );
+  return _(() => () => {
+    h.current.forEach((p) => clearTimeout(p)), h.current = [];
+  }, []), E;
+};
+export {
+  q as useChapterPageJourney
+};
+//# sourceMappingURL=use-chapter-journey.js.map

package/dist/features/journey/hooks/use-chapter-journey.js.map

@@ -0,0 +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    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        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":"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"}