@cuemath/leap 3.3.24 → 3.3.25-af-1

package/dist/features/circle-games/sign-up/sign-up.js

@@ -1,100 +1,83 @@
-import { jsx as r, jsxs as s, Fragment as Y } from "react/jsx-runtime";
-import { useState as o, useRef as se, useCallback as oe, useEffect as le } from "react";
-import { ILLUSTRATIONS as g } from "../../../assets/illustrations/illustrations.js";
-import R from "../../ui/image/image.js";
-import ie from "../../ui/layout/flex-view.js";
-import ae from "../../ui/separator/separator.js";
-import d from "../../ui/text/text.js";
-import { CircularSteps as ce } from "./comp/circular-steps/circular-steps.js";
-import { GradeInputBox as ue, SelectUserGrade as pe } from "./comp/select-user-grade/select-user-grade.js";
-import { Spinner as de } from "./comp/spinner/spinner.js";
-import { SplashScreen as me } from "./comp/splash-screen/splash-screen.js";
-import { ErrorMessage as I } from "./comp/username-input/constants.js";
-import { UsernameInput as he } from "./comp/username-input/username-input.js";
-import { GRADES as j, CONTAINER_WIDTH as Se, CONTAINER_HEIGHT as fe } from "./constants.js";
-import { useCreateUserDal as ge } from "./dal/create-user-dal/create-user-dal.js";
-import { useUpdateUserDal as Ee } from "./dal/update-user-dal/update-user-dal.js";
-import { useUpdateUsernameDal as Te } from "./dal/update-username-dal/update-username-dal.js";
-import { getTrialScreenUsername as Re, getSplashScreenText as Ie } from "./helper.js";
-import { BottomButtonContainer as b, SignupBtn as N, SmileyImage as be, ThemeText as Ne, BackgroundOverlay as ye, SignUpWrapper as Ce, SignUpContainer as ke, SignupText as xe } from "./sign-up-styled.js";
-const Xe = ({
-  mathGymEnrolledUser: y,
-  circleEnrolledUser: C,
-  circleOnLeapPremiumDays: k,
-  circleUsername: l,
-  countryCode: x,
-  grade: L,
-  state: G,
-  circleOnLeapPremiumEnabled: E,
-  studentId: m,
-  isSignUpProcessing: w,
-  onCreateUser: A,
-  onUpdateUser: B,
-  onSignupStepsComplete: X,
-  isPLAStudent: c
+import { jsx as t, jsxs as a, Fragment as ee } from "react/jsx-runtime";
+import { useState as s, useRef as te, useCallback as re, useEffect as se } from "react";
+import { ILLUSTRATIONS as S } from "../../../assets/illustrations/illustrations.js";
+import E from "../../ui/image/image.js";
+import H from "../../ui/text/text.js";
+import { CircularSteps as ne } from "./comp/circular-steps/circular-steps.js";
+import { GradeInputBox as oe, SelectUserGrade as le } from "./comp/select-user-grade/select-user-grade.js";
+import { Spinner as ie } from "./comp/spinner/spinner.js";
+import { SplashScreen as ae } from "./comp/splash-screen/splash-screen.js";
+import { ErrorMessage as $ } from "./comp/username-input/constants.js";
+import { UsernameInput as ue } from "./comp/username-input/username-input.js";
+import { GRADES as L, CONTAINER_WIDTH as ce, CONTAINER_HEIGHT as pe } from "./constants.js";
+import { useCreateUserDal as de } from "./dal/create-user-dal/create-user-dal.js";
+import { useUpdateUserDal as Se } from "./dal/update-user-dal/update-user-dal.js";
+import { getTrialScreenUsername as me, getSplashScreenText as he } from "./helper.js";
+import { BottomButtonContainer as T, SignupBtn as I, SmileyImage as fe, ThemeText as ge, BackgroundOverlay as Ee, SignUpWrapper as Te, SignUpContainer as Ie, SignupText as Re } from "./sign-up-styled.js";
+const $e = ({
+  mathGymEnrolledUser: R,
+  circleEnrolledUser: b,
+  circleOnLeapPremiumDays: A,
+  circleUsername: n,
+  countryCode: C,
+  grade: q,
+  state: x,
+  circleOnLeapPremiumEnabled: m,
+  studentId: h,
+  isSignUpProcessing: y,
+  onCreateUser: B,
+  onUpdateUser: N,
+  onSignupStepsComplete: V
 }) => {
-  const [v, U] = o(0), [n, u] = o(l), [h, p] = o(""), [t, _] = o(
-    j.find((e) => e.key === L) ?? null
-  ), [S, i] = o(!1), W = Re(G), f = se(null), [z, $] = o(!1), [J, O] = o(!1), P = (e) => {
-    i(!1), e ? (f.current = e, u(e.username), A && A(e), a()) : p(I.SOMETHING_WENT_WRONG);
-  }, Q = (e) => {
-    i(!1), e ? (f.current = e, u(e.username), B && B(e), a()) : p(I.SOMETHING_WENT_WRONG);
-  }, Z = (e) => {
-    i(!1), e ? (u(e.username), f.current = e, a()) : p(I.SOMETHING_WENT_WRONG);
-  }, { createUser: D } = ge(P), { updateUser: H } = Ee(Q), { updateUsername: q } = Te(Z), ee = () => {
-    O(!0), setTimeout(() => {
-      $(!0);
+  const [M, k] = s(0), [o, u] = s(n), [c, p] = s(""), [r, w] = s(
+    L.find((e) => e.key === q) ?? null
+  ), [d, l] = s(!1), G = me(x), f = te(null), [F, _] = s(!1), [K, U] = s(!1), P = (e) => {
+    l(!1), e ? (f.current = e, u(e.username), B && B(e), i()) : p($.SOMETHING_WENT_WRONG);
+  }, j = (e) => {
+    l(!1), e ? (f.current = e, u(e.username), N && N(e), i()) : p($.SOMETHING_WENT_WRONG);
+  }, { createUser: W } = de(P), { updateUser: D } = Se(j), Y = () => {
+    U(!0), setTimeout(() => {
+      _(!0);
     }, 500);
-  }, re = async (e) => {
-    _(e);
-  }, te = oe(async () => {
-    if (i(!0), h === "") {
-      if (c && n) {
-        q({
-          username: n,
-          studentId: m
-        });
-        return;
-      }
-      l === "" || l === void 0 || l === null ? D({
-        circleOnLeapPremiumEnabled: E,
-        grade: (t == null ? void 0 : t.key) || "",
-        username: n,
-        countryCode: x,
-        studentId: m
-      }) : H({
-        circleOnLeapPremiumEnabled: E,
-        grade: (t == null ? void 0 : t.key) || "",
-        username: n,
-        studentId: m
-      });
-    }
+  }, X = async (e) => {
+    w(e);
+  }, v = re(async () => {
+    l(!0), c === "" && (n === "" || n === void 0 || n === null ? W({
+      circleOnLeapPremiumEnabled: m,
+      grade: (r == null ? void 0 : r.key) || "",
+      username: o,
+      countryCode: C,
+      studentId: h
+    }) : D({
+      circleOnLeapPremiumEnabled: m,
+      grade: (r == null ? void 0 : r.key) || "",
+      username: o,
+      studentId: h
+    }));
   }, [
-    E,
-    l,
-    x,
-    D,
-    h,
-    t == null ? void 0 : t.key,
-    c,
     m,
-    H,
-    q,
-    n
-  ]), a = () => {
-    U((e) => e === K.steps.length - 1 ? (X(f.current), e) : e + 1);
-  }, T = () => {
-    S || U((e) => e === 0 ? e : e - 1);
-  }, V = {
+    n,
+    C,
+    W,
+    c,
+    r == null ? void 0 : r.key,
+    h,
+    D,
+    o
+  ]), i = () => {
+    k((e) => e === O.steps.length - 1 ? (V(f.current), e) : e + 1);
+  }, g = () => {
+    d || k((e) => e === 0 ? e : e - 1);
+  }, z = {
     id: "step-0",
     label: null,
     custEle: null,
     custEleInsideStep: null,
-    background: /* @__PURE__ */ r(me, { animationCompleted: ee }),
-    custEleBelowStep: /* @__PURE__ */ s(b, { paddingX: y && C ? 1 : 2.5, children: [
-      J && /* @__PURE__ */ r(xe, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: Ie({ state: G, circleEnrolledUser: C, mathGymEnrolledUser: y }) }),
-      z && /* @__PURE__ */ r(
-        N,
+    background: /* @__PURE__ */ t(ae, { animationCompleted: Y }),
+    custEleBelowStep: /* @__PURE__ */ a(T, { paddingX: R && b ? 1 : 2.5, children: [
+      K && /* @__PURE__ */ t(Re, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: he({ state: x, circleEnrolledUser: b, mathGymEnrolledUser: R }) }),
+      F && /* @__PURE__ */ t(
+        I,
         {
           label: "Let’s start",
           renderAs: "secondary",
@@ -102,139 +85,128 @@ const Xe = ({
           width: 144,
           isVisible: !0,
           onClick: () => {
-            a(), O(!1), $(!1);
+            i(), U(!1), _(!1);
           }
         }
       )
     ] }),
     isProgressAnimationRequired: !1
-  }, ne = {
+  }, J = {
     id: "step-1",
     label: "What’s your school grade?",
     custEle: null,
-    custEleInsideStep: /* @__PURE__ */ r(ue, { gradeInfo: t, showSpinner: S }),
-    background: /* @__PURE__ */ r(
-      R,
+    custEleInsideStep: /* @__PURE__ */ t(oe, { gradeInfo: r, showSpinner: d }),
+    background: /* @__PURE__ */ t(
+      E,
       {
-        src: g.GRADE_GRID_BACKGROUND,
+        src: S.GRADE_GRID_BACKGROUND,
         height: "100%",
         width: "100%",
         withLoader: !1,
         alt: "play"
       }
     ),
-    custEleBelowStep: /* @__PURE__ */ r(
-      pe,
+    custEleBelowStep: /* @__PURE__ */ t(
+      le,
       {
-        grades: j,
-        selected: (t == null ? void 0 : t.key) || null,
-        onSelect: (e) => re(e),
-        onNext: a
+        grades: L,
+        selected: (r == null ? void 0 : r.key) || null,
+        onSelect: (e) => X(e),
+        onNext: i
       }
     ),
-    onBack: T,
+    onBack: g,
     isProgressAnimationRequired: !0
-  }, M = {
+  }, Q = {
     id: "step-2",
-    label: c ? `Create a unique username
-for your child` : "Claim your unique alias",
+    label: "Claim your unique alias",
     custEle: null,
-    custEleInsideStep: /* @__PURE__ */ r(
-      he,
+    custEleInsideStep: /* @__PURE__ */ t(
+      ue,
       {
-        username: n,
-        circleUsername: l,
+        username: o,
+        circleUsername: n,
         isEdit: !1,
-        error: h,
+        error: c,
         setError: p,
-        showSpinner: S,
-        setShowSpinner: i,
+        showSpinner: d,
+        setShowSpinner: l,
         setUsername: u
       }
     ),
-    background: /* @__PURE__ */ r(
-      R,
+    background: /* @__PURE__ */ t(
+      E,
       {
-        src: g.USER_PROFILE_BACKGROUND,
+        src: S.USER_PROFILE_BACKGROUND,
         height: "100%",
         width: "100%",
         withLoader: !1,
         alt: "play"
       }
     ),
-    custEleBelowStep: /* @__PURE__ */ r(b, { children: n !== "" && /* @__PURE__ */ r(
-      N,
+    custEleBelowStep: /* @__PURE__ */ t(T, { children: o !== "" && /* @__PURE__ */ t(
+      I,
       {
         label: "Next",
-        disabled: S || h !== "",
+        disabled: d || c !== "",
         renderAs: "secondary",
-        onClick: () => te(),
+        onClick: () => v(),
         marginTop: 88
       }
     ) }),
-    onBack: T,
+    onBack: g,
     isProgressAnimationRequired: !0
-  }, F = {
+  }, Z = {
     id: "step-3",
     label: null,
     custEle: null,
-    custEleInsideStep: /* @__PURE__ */ r(be, { src: g.SMILEY, height: "100%", width: "100%", alt: "play" }),
-    background: /* @__PURE__ */ r(
-      R,
+    custEleInsideStep: /* @__PURE__ */ t(fe, { src: S.SMILEY, height: "100%", width: "100%", alt: "play" }),
+    background: /* @__PURE__ */ t(
+      E,
       {
-        src: g.USER_CROWN_GRID_BACKGROUND,
+        src: S.USER_CROWN_GRID_BACKGROUND,
         height: "100%",
         width: "100%",
         withLoader: !1,
         alt: "play"
       }
     ),
-    custEleBelowStep: /* @__PURE__ */ s(b, { children: [
-      c ? /* @__PURE__ */ s(ie, { children: [
-        /* @__PURE__ */ r(d, { $renderAs: "ac4-black", $align: "center", $color: "GREEN_4", children: "Premium access unlocked!" }),
-        /* @__PURE__ */ r(ae, { height: 12 }),
-        /* @__PURE__ */ s(d, { $renderAs: "ub2", $color: "WHITE", children: [
-          "Your child can directly login to leap.cuemath.com using “",
-          /* @__PURE__ */ r(d, { $color: "GREEN_4", $renderAs: "ub2", $inline: !0, children: n }),
-          "” as both username and password."
+    custEleBelowStep: /* @__PURE__ */ a(T, { children: [
+      /* @__PURE__ */ a(H, { $renderAs: "ab1", $color: "WHITE", children: [
+        G.primaryText,
+        A && /* @__PURE__ */ a(ge, { children: [
+          " ",
+          A,
+          " days of FREE"
         ] })
-      ] }) : /* @__PURE__ */ s(Y, { children: [
-        /* @__PURE__ */ s(d, { $renderAs: "ab1", $color: "WHITE", children: [
-          W.primaryText,
-          k && /* @__PURE__ */ s(Ne, { children: [
-            " ",
-            k,
-            " days of FREE"
-          ] })
-        ] }),
-        /* @__PURE__ */ r(d, { $renderAs: "ab1", $color: "WHITE", children: W.secondaryText })
       ] }),
-      w ? /* @__PURE__ */ r(de, { marginY: 24 }) : /* @__PURE__ */ r(
-        N,
+      /* @__PURE__ */ t(H, { $renderAs: "ab1", $color: "WHITE", children: G.secondaryText }),
+      y ? /* @__PURE__ */ t(ie, { marginY: 24 }) : /* @__PURE__ */ t(
+        I,
         {
           label: "Woohoo! Let me in!",
           renderAs: "secondary",
           marginTop: 24,
           width: 250,
-          onClick: () => a()
+          onClick: () => i()
         }
       )
     ] }),
-    onBack: w ? void 0 : T,
+    onBack: y ? void 0 : g,
     isProgressAnimationRequired: !0
-  }, K = {
-    steps: c ? [V, M, F] : [V, ne, M, F],
+  }, O = {
+    steps: [z, J, Q, Z],
     currentStepIndex: 0,
-    dimensions: { width: Se, height: fe }
+    dimensions: { width: ce, height: pe }
   };
-  return le(() => () => {
-    i(!1), u(""), _(null), p("");
-  }, []), /* @__PURE__ */ s(Y, { children: [
-    /* @__PURE__ */ r(ye, {}),
-    /* @__PURE__ */ r(Ce, { children: /* @__PURE__ */ r(ke, { children: /* @__PURE__ */ r(ce, { ...K, currentStepIndex: v }) }) })
+  return se(() => () => {
+    l(!1), u(""), w(null), p("");
+  }, []), /* @__PURE__ */ a(ee, { children: [
+    /* @__PURE__ */ t(Ee, {}),
+    /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ t(Ie, { children: /* @__PURE__ */ t(ne, { ...O, currentStepIndex: M }) }) })
   ] });
 };
 export {
-  Xe as SignUp
+  $e as SignUp
 };
 //# sourceMappingURL=sign-up.js.map

package/dist/features/circle-games/sign-up/sign-up.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign-up.js","sources":["../../../../src/features/circle-games/sign-up/sign-up.tsx"],"sourcesContent":["import type { IUpdateUsernameResponse } from './api/use-update-username-api/use-update-username-api-types';\nimport type {\n  ICircularSteps,\n  ICircularStepsProps,\n} from './comp/circular-steps/circular-steps-types';\nimport type { Grade } from './comp/grade-input/grade-input-types';\nimport type { ICreateUserResponseDal } from './dal/create-user-dal/create-user-dal-types';\nimport type { IUpdateUserPayloadDal } from './dal/update-user-dal/update-user-dal-types';\nimport type { ISignUpProps } from './sign-up-types';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { CircularSteps } from './comp/circular-steps/circular-steps';\nimport { GradeInputBox, SelectUserGrade } from './comp/select-user-grade/select-user-grade';\nimport { Spinner } from './comp/spinner/spinner';\nimport { SplashScreen } from './comp/splash-screen/splash-screen';\nimport { ErrorMessage } from './comp/username-input/constants';\nimport { UsernameInput } from './comp/username-input/username-input';\nimport { CONTAINER_HEIGHT, CONTAINER_WIDTH, GRADES } from './constants';\nimport { useCreateUserDal } from './dal/create-user-dal/create-user-dal';\nimport { useUpdateUserDal } from './dal/update-user-dal/update-user-dal';\nimport { useUpdateUsernameDal } from './dal/update-username-dal/update-username-dal';\nimport { getSplashScreenText, getTrialScreenUsername } from './helper';\nimport * as Styled from './sign-up-styled';\n\nexport const SignUp = ({\n  mathGymEnrolledUser,\n  circleEnrolledUser,\n  circleOnLeapPremiumDays,\n  circleUsername,\n  countryCode,\n  grade: defaultGrade,\n  state,\n  circleOnLeapPremiumEnabled,\n  studentId,\n  isSignUpProcessing,\n  onCreateUser,\n  onUpdateUser,\n  onSignupStepsComplete,\n  isPLAStudent,\n}: ISignUpProps) => {\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  const [username, setUsername] = useState(circleUsername);\n  const [error, setError] = useState('');\n  const [grade, setGrade] = useState<Grade | null>(\n    GRADES.find(g => g.key === defaultGrade) ?? null,\n  );\n  const [showSpinner, setShowSpinner] = useState(false);\n  const trialScreenContent = getTrialScreenUsername(state);\n\n  const userCreateUpdateResponseData = useRef<\n    ICreateUserResponseDal | IUpdateUserPayloadDal | IUpdateUsernameResponse | null\n  >(null);\n\n  const [splashBtnVisible, setSplashBtnVisible] = useState(false);\n  const [splashTxtVisible, setSplashTxtVisible] = useState(false);\n\n  const handleCreateUserResponse = (data: ICreateUserResponseDal | null) => {\n    setShowSpinner(false);\n    if (data) {\n      userCreateUpdateResponseData.current = data;\n      setUsername(data.username);\n      onCreateUser && onCreateUser(data);\n      goToNextStep();\n    } else {\n      setError(ErrorMessage.SOMETHING_WENT_WRONG);\n    }\n  };\n  const handleUpdateUserResponse = (data: IUpdateUserPayloadDal | null) => {\n    setShowSpinner(false);\n    if (data) {\n      userCreateUpdateResponseData.current = data;\n      setUsername(data.username);\n      onUpdateUser && onUpdateUser(data);\n      goToNextStep();\n    } else {\n      setError(ErrorMessage.SOMETHING_WENT_WRONG);\n    }\n  };\n  const handleUpdateUsernameResponse = (data: IUpdateUsernameResponse | null) => {\n    setShowSpinner(false);\n    if (data) {\n      setUsername(data.username);\n      userCreateUpdateResponseData.current = data;\n      goToNextStep();\n    } else {\n      setError(ErrorMessage.SOMETHING_WENT_WRONG);\n    }\n  };\n\n  const { createUser } = useCreateUserDal(handleCreateUserResponse);\n  const { updateUser } = useUpdateUserDal(handleUpdateUserResponse);\n  const { updateUsername } = useUpdateUsernameDal(handleUpdateUsernameResponse);\n  // Animate the text and btns a  fter the splash animation is completed in splash screen\n  const onSplashScreenBgAnimationComplete = () => {\n    setSplashTxtVisible(true);\n    setTimeout(() => {\n      setSplashBtnVisible(true);\n    }, 500);\n  };\n\n  const handleGradeSelect = async (_grade: Grade) => {\n    setGrade(_grade);\n  };\n\n  const handleUsernameSubmit = useCallback(async () => {\n    setShowSpinner(true);\n    if (error !== '') {\n      return;\n    }\n\n    if (isPLAStudent && username) {\n      //TODO: The old API should be migrated to use this for both PLA and Non PLA students\n      // PLA students can use the username as both the login username and password, and also set it as the Circle username.\n      updateUsername({\n        username,\n        studentId,\n      });\n\n      return;\n    }\n\n    if (circleUsername === '' || circleUsername === undefined || circleUsername === null) {\n      createUser({\n        circleOnLeapPremiumEnabled,\n        grade: grade?.key || '',\n        username,\n        countryCode,\n        studentId,\n      });\n    } else {\n      updateUser({\n        circleOnLeapPremiumEnabled,\n        grade: grade?.key || '',\n        username,\n        studentId,\n      });\n    }\n  }, [\n    circleOnLeapPremiumEnabled,\n    circleUsername,\n    countryCode,\n    createUser,\n    error,\n    grade?.key,\n    isPLAStudent,\n    studentId,\n    updateUser,\n    updateUsername,\n    username,\n  ]);\n\n  const goToNextStep = () => {\n    setCurrentStepIndex(prev => {\n      if (prev === SignupProps.steps.length - 1) {\n        onSignupStepsComplete(userCreateUpdateResponseData.current);\n\n        return prev;\n      }\n\n      return prev + 1;\n    });\n  };\n\n  const goToPrevStep = () => {\n    if (showSpinner) {\n      return;\n    }\n    setCurrentStepIndex(prev => {\n      if (prev === 0) {\n        return prev;\n      }\n\n      return prev - 1;\n    });\n  };\n\n  const splashScreenStep: ICircularSteps = {\n    id: 'step-0',\n    label: null,\n    custEle: null,\n    custEleInsideStep: null,\n    background: <SplashScreen animationCompleted={onSplashScreenBgAnimationComplete} />,\n    custEleBelowStep: (\n      <Styled.BottomButtonContainer paddingX={mathGymEnrolledUser && circleEnrolledUser ? 1 : 2.5}>\n        {splashTxtVisible && (\n          <Styled.SignupText $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n            {getSplashScreenText({ state, circleEnrolledUser, mathGymEnrolledUser })}\n          </Styled.SignupText>\n        )}\n        {splashBtnVisible && (\n          <Styled.SignupBtn\n            label=\"Let’s start\"\n            renderAs=\"secondary\"\n            marginTop={24}\n            width={144}\n            isVisible={true}\n            onClick={() => {\n              goToNextStep();\n              setSplashTxtVisible(false);\n              setSplashBtnVisible(false);\n            }}\n          />\n        )}\n      </Styled.BottomButtonContainer>\n    ),\n    isProgressAnimationRequired: false,\n  };\n\n  const gradeStep: ICircularSteps = {\n    id: 'step-1',\n    label: 'What’s your school grade?',\n    custEle: null,\n    custEleInsideStep: <GradeInputBox gradeInfo={grade} showSpinner={showSpinner} />,\n    background: (\n      <Image\n        src={ILLUSTRATIONS.GRADE_GRID_BACKGROUND}\n        height={'100%'}\n        width={'100%'}\n        withLoader={false}\n        alt=\"play\"\n      />\n    ),\n    custEleBelowStep: (\n      <SelectUserGrade\n        grades={GRADES}\n        selected={grade?.key || null}\n        onSelect={_grade => handleGradeSelect(_grade)}\n        onNext={goToNextStep}\n      />\n    ),\n    onBack: goToPrevStep,\n    isProgressAnimationRequired: true,\n  };\n\n  const usernameStep: ICircularSteps = {\n    id: 'step-2',\n    label: isPLAStudent ? `Create a unique username\\nfor your child` : 'Claim your unique alias',\n    custEle: null,\n    custEleInsideStep: (\n      <UsernameInput\n        username={username}\n        circleUsername={circleUsername}\n        isEdit={false}\n        error={error}\n        setError={setError}\n        showSpinner={showSpinner}\n        setShowSpinner={setShowSpinner}\n        setUsername={setUsername}\n      />\n    ),\n    background: (\n      <Image\n        src={ILLUSTRATIONS.USER_PROFILE_BACKGROUND}\n        height={'100%'}\n        width={'100%'}\n        withLoader={false}\n        alt=\"play\"\n      />\n    ),\n    custEleBelowStep: (\n      <Styled.BottomButtonContainer>\n        {username !== '' && (\n          <Styled.SignupBtn\n            label=\"Next\"\n            disabled={showSpinner || error !== ''}\n            renderAs=\"secondary\"\n            onClick={() => handleUsernameSubmit()}\n            marginTop={88}\n          />\n        )}\n      </Styled.BottomButtonContainer>\n    ),\n    onBack: goToPrevStep,\n    isProgressAnimationRequired: true,\n  };\n\n  const trialScreenStep: ICircularSteps = {\n    id: 'step-3',\n    label: null,\n    custEle: null,\n    custEleInsideStep: (\n      <Styled.SmileyImage src={ILLUSTRATIONS.SMILEY} height={'100%'} width={'100%'} alt=\"play\" />\n    ),\n    background: (\n      <Image\n        src={ILLUSTRATIONS.USER_CROWN_GRID_BACKGROUND}\n        height={'100%'}\n        width={'100%'}\n        withLoader={false}\n        alt=\"play\"\n      />\n    ),\n    custEleBelowStep: (\n      <Styled.BottomButtonContainer>\n        {isPLAStudent ? (\n          <FlexView>\n            <Text $renderAs=\"ac4-black\" $align=\"center\" $color=\"GREEN_4\">\n              Premium access unlocked!\n            </Text>\n            <Separator height={12} />\n            <Text $renderAs=\"ub2\" $color=\"WHITE\">\n              Your child can directly login to leap.cuemath.com using “\n              <Text $color=\"GREEN_4\" $renderAs=\"ub2\" $inline>\n                {username}\n              </Text>\n              ” as both username and password.\n            </Text>\n          </FlexView>\n        ) : (\n          <>\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {trialScreenContent.primaryText}\n              {circleOnLeapPremiumDays && (\n                <Styled.ThemeText> {circleOnLeapPremiumDays} days of FREE</Styled.ThemeText>\n              )}\n            </Text>\n            <Text $renderAs=\"ab1\" $color=\"WHITE\">\n              {trialScreenContent.secondaryText}\n            </Text>\n          </>\n        )}\n        {isSignUpProcessing ? (\n          <Spinner marginY={24} />\n        ) : (\n          <Styled.SignupBtn\n            label=\"Woohoo! Let me in!\"\n            renderAs=\"secondary\"\n            marginTop={24}\n            width={250}\n            onClick={() => goToNextStep()}\n          />\n        )}\n      </Styled.BottomButtonContainer>\n    ),\n    onBack: isSignUpProcessing ? undefined : goToPrevStep,\n    isProgressAnimationRequired: true,\n  };\n\n  const SignupProps: ICircularStepsProps = {\n    steps: isPLAStudent\n      ? [splashScreenStep, usernameStep, trialScreenStep]\n      : [splashScreenStep, gradeStep, usernameStep, trialScreenStep],\n    currentStepIndex: 0,\n    dimensions: { width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT },\n  };\n\n  // Reset states on unmount\n  useEffect(() => {\n    return () => {\n      setShowSpinner(false);\n      setUsername('');\n      setGrade(null);\n      setError('');\n    };\n  }, []);\n\n  return (\n    <>\n      <Styled.BackgroundOverlay />\n      <Styled.SignUpWrapper>\n        <Styled.SignUpContainer>\n          <CircularSteps {...SignupProps} currentStepIndex={currentStepIndex} />\n        </Styled.SignUpContainer>\n      </Styled.SignUpWrapper>\n    </>\n  );\n};\n"],"names":["SignUp","mathGymEnrolledUser","circleEnrolledUser","circleOnLeapPremiumDays","circleUsername","countryCode","defaultGrade","state","circleOnLeapPremiumEnabled","studentId","isSignUpProcessing","onCreateUser","onUpdateUser","onSignupStepsComplete","isPLAStudent","currentStepIndex","setCurrentStepIndex","useState","username","setUsername","error","setError","grade","setGrade","GRADES","g","showSpinner","setShowSpinner","trialScreenContent","getTrialScreenUsername","userCreateUpdateResponseData","useRef","splashBtnVisible","setSplashBtnVisible","splashTxtVisible","setSplashTxtVisible","handleCreateUserResponse","data","goToNextStep","ErrorMessage","handleUpdateUserResponse","handleUpdateUsernameResponse","createUser","useCreateUserDal","updateUser","useUpdateUserDal","updateUsername","useUpdateUsernameDal","onSplashScreenBgAnimationComplete","handleGradeSelect","_grade","handleUsernameSubmit","useCallback","prev","SignupProps","goToPrevStep","splashScreenStep","jsx","SplashScreen","Styled.BottomButtonContainer","Styled.SignupText","Styled.SignupBtn","gradeStep","GradeInputBox","Image","ILLUSTRATIONS","SelectUserGrade","usernameStep","UsernameInput","trialScreenStep","Styled.SmileyImage","jsxs","FlexView","Text","Separator","Fragment","Styled.ThemeText","Spinner","CONTAINER_WIDTH","CONTAINER_HEIGHT","useEffect","Styled.BackgroundOverlay","Styled.SignUpWrapper","Styled.SignUpContainer","CircularSteps"],"mappings":"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"}
+{"version":3,"file":"sign-up.js","sources":["../../../../src/features/circle-games/sign-up/sign-up.tsx"],"sourcesContent":["import type {\n  ICircularSteps,\n  ICircularStepsProps,\n} from './comp/circular-steps/circular-steps-types';\nimport type { Grade } from './comp/grade-input/grade-input-types';\nimport type { ICreateUserResponseDal } from './dal/create-user-dal/create-user-dal-types';\nimport type { IUpdateUserPayloadDal } from './dal/update-user-dal/update-user-dal-types';\nimport type { ISignUpProps } from './sign-up-types';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport Image from '../../ui/image/image';\nimport Text from '../../ui/text/text';\nimport { CircularSteps } from './comp/circular-steps/circular-steps';\nimport { GradeInputBox, SelectUserGrade } from './comp/select-user-grade/select-user-grade';\nimport { Spinner } from './comp/spinner/spinner';\nimport { SplashScreen } from './comp/splash-screen/splash-screen';\nimport { ErrorMessage } from './comp/username-input/constants';\nimport { UsernameInput } from './comp/username-input/username-input';\nimport { CONTAINER_HEIGHT, CONTAINER_WIDTH, GRADES } from './constants';\nimport { useCreateUserDal } from './dal/create-user-dal/create-user-dal';\nimport { useUpdateUserDal } from './dal/update-user-dal/update-user-dal';\nimport { getSplashScreenText, getTrialScreenUsername } from './helper';\nimport * as Styled from './sign-up-styled';\n\nexport const SignUp = ({\n  mathGymEnrolledUser,\n  circleEnrolledUser,\n  circleOnLeapPremiumDays,\n  circleUsername,\n  countryCode,\n  grade: defaultGrade,\n  state,\n  circleOnLeapPremiumEnabled,\n  studentId,\n  isSignUpProcessing,\n  onCreateUser,\n  onUpdateUser,\n  onSignupStepsComplete,\n}: ISignUpProps) => {\n  const [currentStepIndex, setCurrentStepIndex] = useState(0);\n  const [username, setUsername] = useState(circleUsername);\n  const [error, setError] = useState('');\n  const [grade, setGrade] = useState<Grade | null>(\n    GRADES.find(g => g.key === defaultGrade) ?? null,\n  );\n  const [showSpinner, setShowSpinner] = useState(false);\n  const trialScreenContent = getTrialScreenUsername(state);\n\n  const userCreateUpdateResponseData = useRef<\n    ICreateUserResponseDal | IUpdateUserPayloadDal | null\n  >(null);\n\n  const [splashBtnVisible, setSplashBtnVisible] = useState(false);\n  const [splashTxtVisible, setSplashTxtVisible] = useState(false);\n\n  const handleCreateUserResponse = (data: ICreateUserResponseDal | null) => {\n    setShowSpinner(false);\n    if (data) {\n      userCreateUpdateResponseData.current = data;\n      setUsername(data.username);\n      onCreateUser && onCreateUser(data);\n      goToNextStep();\n    } else {\n      setError(ErrorMessage.SOMETHING_WENT_WRONG);\n    }\n  };\n  const handleUpdateUserResponse = (data: IUpdateUserPayloadDal | null) => {\n    setShowSpinner(false);\n    if (data) {\n      userCreateUpdateResponseData.current = data;\n      setUsername(data.username);\n      onUpdateUser && onUpdateUser(data);\n      goToNextStep();\n    } else {\n      setError(ErrorMessage.SOMETHING_WENT_WRONG);\n    }\n  };\n\n  const { createUser } = useCreateUserDal(handleCreateUserResponse);\n  const { updateUser } = useUpdateUserDal(handleUpdateUserResponse);\n\n  // Animate the text and btns after the splash animation is completed in splash screen\n  const onSplashScreenBgAnimationComplete = () => {\n    setSplashTxtVisible(true);\n    setTimeout(() => {\n      setSplashBtnVisible(true);\n    }, 500);\n  };\n\n  const handleGradeSelect = async (_grade: Grade) => {\n    setGrade(_grade);\n  };\n\n  const handleUsernameSubmit = useCallback(async () => {\n    setShowSpinner(true);\n    if (error !== '') {\n      return;\n    }\n\n    if (circleUsername === '' || circleUsername === undefined || circleUsername === null) {\n      createUser({\n        circleOnLeapPremiumEnabled,\n        grade: grade?.key || '',\n        username,\n        countryCode,\n        studentId,\n      });\n    } else {\n      updateUser({\n        circleOnLeapPremiumEnabled,\n        grade: grade?.key || '',\n        username,\n        studentId,\n      });\n    }\n  }, [\n    circleOnLeapPremiumEnabled,\n    circleUsername,\n    countryCode,\n    createUser,\n    error,\n    grade?.key,\n    studentId,\n    updateUser,\n    username,\n  ]);\n\n  const goToNextStep = () => {\n    setCurrentStepIndex(prev => {\n      if (prev === SignupProps.steps.length - 1) {\n        onSignupStepsComplete(userCreateUpdateResponseData.current);\n\n        return prev;\n      }\n\n      return prev + 1;\n    });\n  };\n\n  const goToPrevStep = () => {\n    if (showSpinner) {\n      return;\n    }\n    setCurrentStepIndex(prev => {\n      if (prev === 0) {\n        return prev;\n      }\n\n      return prev - 1;\n    });\n  };\n\n  const splashScreenStep: ICircularSteps = {\n    id: 'step-0',\n    label: null,\n    custEle: null,\n    custEleInsideStep: null,\n    background: <SplashScreen animationCompleted={onSplashScreenBgAnimationComplete} />,\n    custEleBelowStep: (\n      <Styled.BottomButtonContainer paddingX={mathGymEnrolledUser && circleEnrolledUser ? 1 : 2.5}>\n        {splashTxtVisible && (\n          <Styled.SignupText $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n            {getSplashScreenText({ state, circleEnrolledUser, mathGymEnrolledUser })}\n          </Styled.SignupText>\n        )}\n        {splashBtnVisible && (\n          <Styled.SignupBtn\n            label=\"Let’s start\"\n            renderAs=\"secondary\"\n            marginTop={24}\n            width={144}\n            isVisible={true}\n            onClick={() => {\n              goToNextStep();\n              setSplashTxtVisible(false);\n              setSplashBtnVisible(false);\n            }}\n          />\n        )}\n      </Styled.BottomButtonContainer>\n    ),\n    isProgressAnimationRequired: false,\n  };\n\n  const gradeStep: ICircularSteps = {\n    id: 'step-1',\n    label: 'What’s your school grade?',\n    custEle: null,\n    custEleInsideStep: <GradeInputBox gradeInfo={grade} showSpinner={showSpinner} />,\n    background: (\n      <Image\n        src={ILLUSTRATIONS.GRADE_GRID_BACKGROUND}\n        height={'100%'}\n        width={'100%'}\n        withLoader={false}\n        alt=\"play\"\n      />\n    ),\n    custEleBelowStep: (\n      <SelectUserGrade\n        grades={GRADES}\n        selected={grade?.key || null}\n        onSelect={_grade => handleGradeSelect(_grade)}\n        onNext={goToNextStep}\n      />\n    ),\n    onBack: goToPrevStep,\n    isProgressAnimationRequired: true,\n  };\n\n  const usernameStep: ICircularSteps = {\n    id: 'step-2',\n    label: 'Claim your unique alias',\n    custEle: null,\n    custEleInsideStep: (\n      <UsernameInput\n        username={username}\n        circleUsername={circleUsername}\n        isEdit={false}\n        error={error}\n        setError={setError}\n        showSpinner={showSpinner}\n        setShowSpinner={setShowSpinner}\n        setUsername={setUsername}\n      />\n    ),\n    background: (\n      <Image\n        src={ILLUSTRATIONS.USER_PROFILE_BACKGROUND}\n        height={'100%'}\n        width={'100%'}\n        withLoader={false}\n        alt=\"play\"\n      />\n    ),\n    custEleBelowStep: (\n      <Styled.BottomButtonContainer>\n        {username !== '' && (\n          <Styled.SignupBtn\n            label=\"Next\"\n            disabled={showSpinner || error !== ''}\n            renderAs=\"secondary\"\n            onClick={() => handleUsernameSubmit()}\n            marginTop={88}\n          />\n        )}\n      </Styled.BottomButtonContainer>\n    ),\n    onBack: goToPrevStep,\n    isProgressAnimationRequired: true,\n  };\n\n  const trialScreenStep: ICircularSteps = {\n    id: 'step-3',\n    label: null,\n    custEle: null,\n    custEleInsideStep: (\n      <Styled.SmileyImage src={ILLUSTRATIONS.SMILEY} height={'100%'} width={'100%'} alt=\"play\" />\n    ),\n    background: (\n      <Image\n        src={ILLUSTRATIONS.USER_CROWN_GRID_BACKGROUND}\n        height={'100%'}\n        width={'100%'}\n        withLoader={false}\n        alt=\"play\"\n      />\n    ),\n    custEleBelowStep: (\n      <Styled.BottomButtonContainer>\n        <Text $renderAs=\"ab1\" $color=\"WHITE\">\n          {trialScreenContent.primaryText}\n          {circleOnLeapPremiumDays && (\n            <Styled.ThemeText> {circleOnLeapPremiumDays} days of FREE</Styled.ThemeText>\n          )}\n        </Text>\n        <Text $renderAs=\"ab1\" $color=\"WHITE\">\n          {trialScreenContent.secondaryText}\n        </Text>\n        {isSignUpProcessing ? (\n          <Spinner marginY={24} />\n        ) : (\n          <Styled.SignupBtn\n            label=\"Woohoo! Let me in!\"\n            renderAs=\"secondary\"\n            marginTop={24}\n            width={250}\n            onClick={() => goToNextStep()}\n          />\n        )}\n      </Styled.BottomButtonContainer>\n    ),\n    onBack: isSignUpProcessing ? undefined : goToPrevStep,\n    isProgressAnimationRequired: true,\n  };\n\n  const SignupProps: ICircularStepsProps = {\n    steps: [splashScreenStep, gradeStep, usernameStep, trialScreenStep],\n    currentStepIndex: 0,\n    dimensions: { width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT },\n  };\n\n  // Reset states on unmount\n  useEffect(() => {\n    return () => {\n      setShowSpinner(false);\n      setUsername('');\n      setGrade(null);\n      setError('');\n    };\n  }, []);\n\n  return (\n    <>\n      <Styled.BackgroundOverlay />\n      <Styled.SignUpWrapper>\n        <Styled.SignUpContainer>\n          <CircularSteps {...SignupProps} currentStepIndex={currentStepIndex} />\n        </Styled.SignUpContainer>\n      </Styled.SignUpWrapper>\n    </>\n  );\n};\n"],"names":["SignUp","mathGymEnrolledUser","circleEnrolledUser","circleOnLeapPremiumDays","circleUsername","countryCode","defaultGrade","state","circleOnLeapPremiumEnabled","studentId","isSignUpProcessing","onCreateUser","onUpdateUser","onSignupStepsComplete","currentStepIndex","setCurrentStepIndex","useState","username","setUsername","error","setError","grade","setGrade","GRADES","g","showSpinner","setShowSpinner","trialScreenContent","getTrialScreenUsername","userCreateUpdateResponseData","useRef","splashBtnVisible","setSplashBtnVisible","splashTxtVisible","setSplashTxtVisible","handleCreateUserResponse","data","goToNextStep","ErrorMessage","handleUpdateUserResponse","createUser","useCreateUserDal","updateUser","useUpdateUserDal","onSplashScreenBgAnimationComplete","handleGradeSelect","_grade","handleUsernameSubmit","useCallback","prev","SignupProps","goToPrevStep","splashScreenStep","jsx","SplashScreen","Styled.BottomButtonContainer","Styled.SignupText","Styled.SignupBtn","gradeStep","GradeInputBox","Image","ILLUSTRATIONS","SelectUserGrade","usernameStep","UsernameInput","trialScreenStep","Styled.SmileyImage","jsxs","Text","Styled.ThemeText","Spinner","CONTAINER_WIDTH","CONTAINER_HEIGHT","useEffect","Fragment","Styled.BackgroundOverlay","Styled.SignUpWrapper","Styled.SignUpContainer","CircularSteps"],"mappings":"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"}

package/dist/features/journey/hooks/use-puzzles-journey/use-puzzle-dashboard-journey.js

@@ -1,25 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useRef as p, useCallback as e } from "react";
-import y from "../../../ui/avatar/avatar.js";
-import { JOURNEY_ID_STUDENT as h } from "../../journey-id/journey-id-student.js";
-import { IndicatorType as C } from "../../use-journey/constants.js";
-import { useJourney as T } from "../../use-journey/use-journey.js";
-import J from "../use-home-page-journey/tooltip-item.js";
-const B = () => {
-  const o = h.PUZZLE_DASHBOARD_JOURNEY, c = p([]), { setJourney: n, endJourney: s, nextCoachmark: i } = T(), a = e(() => {
-    i(o, !1, 0, !1);
-  }, [o, i]), l = e(() => {
-    document.body.style.overflow = "unset", s(o);
-  }, [s, o]);
-  return e(
-    (t, d) => {
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as c, useCallback as r, useMemo as f } from "react";
+import h from "../../../ui/avatar/avatar.js";
+import { JOURNEY_ID_STUDENT as C } from "../../journey-id/journey-id-student.js";
+import { IndicatorType as T } from "../../use-journey/constants.js";
+import { useJourney as b } from "../../use-journey/use-journey.js";
+import A from "../use-home-page-journey/tooltip-item.js";
+const I = () => {
+  const o = C.PUZZLE_DASHBOARD_JOURNEY, t = c(null), d = c([]), { setJourney: n, endJourney: i, nextCoachmark: s } = b(), a = r(() => {
+    s(o, !1, 0, !1);
+  }, [o, s]), l = r(() => {
+    document.body.style.overflow = "unset", i(o);
+  }, [i, o]), u = r(
+    (p) => {
       if (!(t != null && t.current))
         return;
-      const u = [
+      const y = [
         {
           originalElementToHighlightRef: t,
-          elementToHighlight: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(y, { size: 55, avatar: d }) }),
-          type: C.TOOLTIP,
+          elementToHighlight: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, { size: 55, avatar: p }) }),
+          type: T.TOOLTIP,
           indicator: {
             renderAs: "primary",
             tooltipXCoOrdinates: 42,
@@ -30,8 +29,8 @@ const B = () => {
             backgroundColor: "BLUE_4",
             borderColor: "BLACK",
             arrowColor: "BLACK",
-            tooltipItem: /* @__PURE__ */ r(
-              J,
+            tooltipItem: /* @__PURE__ */ e(
+              A,
               {
                 text: "Click here to see all previously solved puzzles.",
                 buttonLabel: "Got it",
@@ -42,16 +41,23 @@ const B = () => {
           isActive: !1
         }
       ];
-      n(o, u);
+      n(o, y);
       const m = setTimeout(() => {
         clearTimeout(m), document.body.style.overflow = "hidden", a();
       }, 500);
-      c.current.push(m);
+      d.current.push(m);
     },
     [l, a, o, n]
   );
+  return f(
+    () => ({
+      puzzleProfileRef: t,
+      startJourney: u
+    }),
+    [u]
+  );
 };
 export {
-  B as usePuzzleDashboardJourney
+  I as usePuzzleDashboardJourney
 };
 //# sourceMappingURL=use-puzzle-dashboard-journey.js.map

package/dist/features/journey/hooks/use-puzzles-journey/use-puzzle-dashboard-journey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-puzzle-dashboard-journey.js","sources":["../../../../../src/features/journey/hooks/use-puzzles-journey/use-puzzle-dashboard-journey.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { ICoachmarkProps } from '../../use-journey/journey-context-types';\n\nimport { useCallback, useRef, type RefObject } from 'react';\n\nimport Avatar from '../../../ui/avatar/avatar';\nimport { JOURNEY_ID_STUDENT } from '../../journey-id/journey-id-student';\nimport { IndicatorType } from '../../use-journey/constants';\nimport { useJourney } from '../../use-journey/use-journey';\nimport TooltipItem from '../use-home-page-journey/tooltip-item';\n\nconst usePuzzleDashboardJourney = () => {\n  const journeyId = JOURNEY_ID_STUDENT.PUZZLE_DASHBOARD_JOURNEY;\n\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { setJourney, endJourney, nextCoachmark } = useJourney();\n\n  const handleNextCoachMark = useCallback(() => {\n    nextCoachmark(journeyId, false, 0, false);\n  }, [journeyId, nextCoachmark]);\n\n  const handleEndJourney = useCallback(() => {\n    document.body.style.overflow = 'unset';\n    endJourney(journeyId);\n  }, [endJourney, journeyId]);\n\n  const startJourney = useCallback(\n    (puzzleProfileRef: RefObject<HTMLDivElement>, avatar: IAvatarLayer[]) => {\n      if (!puzzleProfileRef?.current) {\n        return;\n      }\n\n      const puzzleAttemptSteps: ICoachmarkProps[] = [\n        {\n          originalElementToHighlightRef: puzzleProfileRef,\n          elementToHighlight: (\n            <div>\n              <Avatar size={55} avatar={avatar} />\n            </div>\n          ),\n          type: IndicatorType.TOOLTIP,\n          indicator: {\n            renderAs: 'primary',\n            tooltipXCoOrdinates: 42,\n            tooltipYCoOrdinates: 36,\n            arrowSize: 12,\n            arrowYCoOrdinates: -36,\n            position: 'right',\n            backgroundColor: 'BLUE_4',\n            borderColor: 'BLACK',\n            arrowColor: 'BLACK',\n            tooltipItem: (\n              <TooltipItem\n                text=\"Click here to see all previously solved puzzles.\"\n                buttonLabel=\"Got it\"\n                onButtonClick={handleEndJourney}\n              />\n            ),\n          } as IArrowTooltipProps,\n          isActive: false,\n        },\n      ];\n\n      setJourney(journeyId, puzzleAttemptSteps);\n\n      const delayBeforeStart = setTimeout(() => {\n        clearTimeout(delayBeforeStart);\n        document.body.style.overflow = 'hidden';\n        handleNextCoachMark();\n      }, 500);\n\n      timerRefs.current.push(delayBeforeStart);\n    },\n    [handleEndJourney, handleNextCoachMark, journeyId, setJourney],\n  );\n\n  return startJourney;\n};\n\nexport { usePuzzleDashboardJourney };\n"],"names":["usePuzzleDashboardJourney","journeyId","JOURNEY_ID_STUDENT","timerRefs","useRef","setJourney","endJourney","nextCoachmark","useJourney","handleNextCoachMark","useCallback","handleEndJourney","puzzleProfileRef","avatar","puzzleAttemptSteps","jsx","Avatar","IndicatorType","TooltipItem","delayBeforeStart"],"mappings":";;;;;;;AAYA,MAAMA,IAA4B,MAAM;AACtC,QAAMC,IAAYC,EAAmB,0BAE/BC,IAAYC,EAAwC,CAAA,CAAE,GAEtD,EAAE,YAAAC,GAAY,YAAAC,GAAY,eAAAC,MAAkBC,EAAW,GAEvDC,IAAsBC,EAAY,MAAM;AAC9B,IAAAH,EAAAN,GAAW,IAAO,GAAG,EAAK;AAAA,EAAA,GACvC,CAACA,GAAWM,CAAa,CAAC,GAEvBI,IAAmBD,EAAY,MAAM;AAChC,aAAA,KAAK,MAAM,WAAW,SAC/BJ,EAAWL,CAAS;AAAA,EAAA,GACnB,CAACK,GAAYL,CAAS,CAAC;AAoDnB,SAlDcS;AAAA,IACnB,CAACE,GAA6CC,MAA2B;AACnE,UAAA,EAACD,KAAA,QAAAA,EAAkB;AACrB;AAGF,YAAME,IAAwC;AAAA,QAC5C;AAAA,UACE,+BAA+BF;AAAA,UAC/B,sCACG,OACC,EAAA,UAAA,gBAAAG,EAACC,KAAO,MAAM,IAAI,QAAAH,GAAgB,EACpC,CAAA;AAAA,UAEF,MAAMI,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,UAAU;AAAA,YACV,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB,WAAW;AAAA,YACX,mBAAmB;AAAA,YACnB,UAAU;AAAA,YACV,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,aACE,gBAAAF;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,aAAY;AAAA,gBACZ,eAAeP;AAAA,cAAA;AAAA,YACjB;AAAA,UAEJ;AAAA,UACA,UAAU;AAAA,QACZ;AAAA,MAAA;AAGF,MAAAN,EAAWJ,GAAWa,CAAkB;AAElC,YAAAK,IAAmB,WAAW,MAAM;AACxC,qBAAaA,CAAgB,GACpB,SAAA,KAAK,MAAM,WAAW,UACXV;SACnB,GAAG;AAEI,MAAAN,EAAA,QAAQ,KAAKgB,CAAgB;AAAA,IACzC;AAAA,IACA,CAACR,GAAkBF,GAAqBR,GAAWI,CAAU;AAAA,EAAA;AAIjE;"}
+{"version":3,"file":"use-puzzle-dashboard-journey.js","sources":["../../../../../src/features/journey/hooks/use-puzzles-journey/use-puzzle-dashboard-journey.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { IAvatarLayer } from '../../../ui/avatar/avatar-types';\nimport type { ICoachmarkProps } from '../../use-journey/journey-context-types';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport Avatar from '../../../ui/avatar/avatar';\nimport { JOURNEY_ID_STUDENT } from '../../journey-id/journey-id-student';\nimport { IndicatorType } from '../../use-journey/constants';\nimport { useJourney } from '../../use-journey/use-journey';\nimport TooltipItem from '../use-home-page-journey/tooltip-item';\n\nconst usePuzzleDashboardJourney = () => {\n  const journeyId = JOURNEY_ID_STUDENT.PUZZLE_DASHBOARD_JOURNEY;\n\n  const puzzleProfileRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const { setJourney, endJourney, nextCoachmark } = useJourney();\n\n  const handleNextCoachMark = useCallback(() => {\n    nextCoachmark(journeyId, false, 0, false);\n  }, [journeyId, nextCoachmark]);\n\n  const handleEndJourney = useCallback(() => {\n    document.body.style.overflow = 'unset';\n    endJourney(journeyId);\n  }, [endJourney, journeyId]);\n\n  const startJourney = useCallback(\n    (avatar: IAvatarLayer[]) => {\n      if (!puzzleProfileRef?.current) {\n        return;\n      }\n\n      const puzzleAttemptSteps: ICoachmarkProps[] = [\n        {\n          originalElementToHighlightRef: puzzleProfileRef,\n          elementToHighlight: (\n            <div>\n              <Avatar size={55} avatar={avatar} />\n            </div>\n          ),\n          type: IndicatorType.TOOLTIP,\n          indicator: {\n            renderAs: 'primary',\n            tooltipXCoOrdinates: 42,\n            tooltipYCoOrdinates: 36,\n            arrowSize: 12,\n            arrowYCoOrdinates: -36,\n            position: 'right',\n            backgroundColor: 'BLUE_4',\n            borderColor: 'BLACK',\n            arrowColor: 'BLACK',\n            tooltipItem: (\n              <TooltipItem\n                text=\"Click here to see all previously solved puzzles.\"\n                buttonLabel=\"Got it\"\n                onButtonClick={handleEndJourney}\n              />\n            ),\n          } as IArrowTooltipProps,\n          isActive: false,\n        },\n      ];\n\n      setJourney(journeyId, puzzleAttemptSteps);\n\n      const delayBeforeStart = setTimeout(() => {\n        clearTimeout(delayBeforeStart);\n        document.body.style.overflow = 'hidden';\n        handleNextCoachMark();\n      }, 500);\n\n      timerRefs.current.push(delayBeforeStart);\n    },\n    [handleEndJourney, handleNextCoachMark, journeyId, setJourney],\n  );\n\n  const data = useMemo(\n    () => ({\n      puzzleProfileRef,\n      startJourney,\n    }),\n    [startJourney],\n  );\n\n  return data;\n};\n\nexport { usePuzzleDashboardJourney };\n"],"names":["usePuzzleDashboardJourney","journeyId","JOURNEY_ID_STUDENT","puzzleProfileRef","useRef","timerRefs","setJourney","endJourney","nextCoachmark","useJourney","handleNextCoachMark","useCallback","handleEndJourney","startJourney","avatar","puzzleAttemptSteps","jsx","Avatar","IndicatorType","TooltipItem","delayBeforeStart","useMemo"],"mappings":";;;;;;;AAYA,MAAMA,IAA4B,MAAM;AACtC,QAAMC,IAAYC,EAAmB,0BAE/BC,IAAmBC,EAAuB,IAAI,GAC9CC,IAAYD,EAAwC,CAAA,CAAE,GAEtD,EAAE,YAAAE,GAAY,YAAAC,GAAY,eAAAC,MAAkBC,EAAW,GAEvDC,IAAsBC,EAAY,MAAM;AAC9B,IAAAH,EAAAP,GAAW,IAAO,GAAG,EAAK;AAAA,EAAA,GACvC,CAACA,GAAWO,CAAa,CAAC,GAEvBI,IAAmBD,EAAY,MAAM;AAChC,aAAA,KAAK,MAAM,WAAW,SAC/BJ,EAAWN,CAAS;AAAA,EAAA,GACnB,CAACM,GAAYN,CAAS,CAAC,GAEpBY,IAAeF;AAAA,IACnB,CAACG,MAA2B;AACtB,UAAA,EAACX,KAAA,QAAAA,EAAkB;AACrB;AAGF,YAAMY,IAAwC;AAAA,QAC5C;AAAA,UACE,+BAA+BZ;AAAA,UAC/B,sCACG,OACC,EAAA,UAAA,gBAAAa,EAACC,KAAO,MAAM,IAAI,QAAAH,GAAgB,EACpC,CAAA;AAAA,UAEF,MAAMI,EAAc;AAAA,UACpB,WAAW;AAAA,YACT,UAAU;AAAA,YACV,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB,WAAW;AAAA,YACX,mBAAmB;AAAA,YACnB,UAAU;AAAA,YACV,iBAAiB;AAAA,YACjB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,aACE,gBAAAF;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,aAAY;AAAA,gBACZ,eAAeP;AAAA,cAAA;AAAA,YACjB;AAAA,UAEJ;AAAA,UACA,UAAU;AAAA,QACZ;AAAA,MAAA;AAGF,MAAAN,EAAWL,GAAWc,CAAkB;AAElC,YAAAK,IAAmB,WAAW,MAAM;AACxC,qBAAaA,CAAgB,GACpB,SAAA,KAAK,MAAM,WAAW,UACXV;SACnB,GAAG;AAEI,MAAAL,EAAA,QAAQ,KAAKe,CAAgB;AAAA,IACzC;AAAA,IACA,CAACR,GAAkBF,GAAqBT,GAAWK,CAAU;AAAA,EAAA;AAWxD,SARMe;AAAA,IACX,OAAO;AAAA,MACL,kBAAAlB;AAAA,MACA,cAAAU;AAAA,IAAA;AAAA,IAEF,CAACA,CAAY;AAAA,EAAA;AAIjB;"}

package/dist/features/journey/journey-id/journey-id-student.js

@@ -1,4 +1,4 @@
-var R = /* @__PURE__ */ ((E) => (E.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", E.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", E.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", E.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", E.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", E.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", E.CIRCLE_TABLES_INFINTE_JOURNEY = "CIRCLE_TABLES_INFINITE_JOURNEY", E.CIRCLE_LESSONS_K_1_INTRO_JOURNEY = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY", E.PLA_SWITCH_USER_JOURNEY = "PLA_SWITCH_USER_JOURNEY", E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.PUZZLE_ATTEMPT_JOURNEY = "PUZZLE_ATTEMPT_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.PUZZLE_ASSIGNED_JOURNEY = "PUZZLE_ASSIGNED_JOURNEY", E.PUZZLE_DASHBOARD_JOURNEY = "PUZZLE_DASHBOARD_JOURNEY", E))(R || {});
+var R = /* @__PURE__ */ ((E) => (E.CIRCLE_ACTIVITIES_INTRO_JOURNEY = "CIRCLE_ACTIVITIES_INTRO_JOURNEY", E.CIRCLE_LEADERBOARD_INTRO_JOURNEY = "CIRCLE_LEADERBOARD_INTRO_JOURNEY", E.CIRCLE_POINTS_REWARD_JOURNEY = "CIRCLE_POINTS_REWARD_JOURNEY", E.CIRCLE_STREAK_UPDATE_JOURNEY = "CIRCLE_STREAK_UPDATE_JOURNEY", E.CIRCLE_TUTORIAL_JOURNEY = "CIRCLE_TUTORIAL_JOURNEY", E.CIRCLE_TABLES_INTRO_JOURNEY = "CIRCLE_TABLES_INTRO_JOURNEY", E.CIRCLE_TABLES_INFINTE_JOURNEY = "CIRCLE_TABLES_INFINITE_JOURNEY", E.CIRCLE_LESSONS_K_1_INTRO_JOURNEY = "CIRCLE_LESSONS_K_1_INTRO_JOURNEY", E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.PUZZLE_ATTEMPT_JOURNEY = "PUZZLE_ATTEMPT_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.PUZZLE_ASSIGNED_JOURNEY = "PUZZLE_ASSIGNED_JOURNEY", E.PUZZLE_DASHBOARD_JOURNEY = "PUZZLE_DASHBOARD_JOURNEY", E))(R || {});
 export {
   R as JOURNEY_ID_STUDENT
 };

package/dist/features/journey/journey-id/journey-id-student.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n  PLA_SWITCH_USER_JOURNEY = 'PLA_SWITCH_USER_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  PUZZLE_ATTEMPT_JOURNEY = 'PUZZLE_ATTEMPT_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  PUZZLE_ASSIGNED_JOURNEY = 'PUZZLE_ASSIGNED_JOURNEY',\n  PUZZLE_DASHBOARD_JOURNEY = 'PUZZLE_DASHBOARD_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCACnCA,EAAA,0BAA0B,2BAG1BA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,0BAA0B,2BAC1BA,EAAA,2BAA2B,4BAjBjBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  PUZZLE_ATTEMPT_JOURNEY = 'PUZZLE_ATTEMPT_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  PUZZLE_ASSIGNED_JOURNEY = 'PUZZLE_ASSIGNED_JOURNEY',\n  PUZZLE_DASHBOARD_JOURNEY = 'PUZZLE_DASHBOARD_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCAGnCA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,0BAA0B,2BAC1BA,EAAA,2BAA2B,4BAhBjBA,IAAAA,KAAA,CAAA,CAAA;"}