@cuemath/leap 3.5.5 → 3.5.6-akm-1

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

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

package/dist/features/trial-session/comps/navigation-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/features/trial-session/comps/navigation-bar/index.tsx"],"sourcesContent":["import { useCallback, useMemo, type FC } from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Button from '../../../ui/buttons/button/button';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { isPLASource } from '../../helper';\nimport { useTrialSessionNavigation } from '../../hooks/use-trial-session-navigation';\nimport * as Styled from './navigation-bar-styled';\n\nconst NavigationBar: FC = () => {\n  const {\n    slideConfig,\n    buttonState,\n    openEndClassModal,\n    studentAbsentInClass,\n    trialHomeData,\n    formData,\n  } = useTrialSessionContext();\n\n  const { handleNavigation } = useTrialSessionNavigation();\n\n  const {\n    left: { isDisabled: isLeftBtnDisabled, isLoading: isLeftBtnLoading },\n    right: { isDisabled: isRightBtnDisabled, isLoading: isRightBtnLoading },\n  } = buttonState || {};\n\n  const { prevPage, nextPage } = slideConfig || {};\n  const { buttonLabel: prevButtonLabel, pageId: prevPageId } = prevPage || {};\n  const { buttonLabel: nextButtonLabel, pageId: nextPageId } = nextPage || {};\n  const { numberInNameError } = formData || {};\n\n  const isLastPage = prevPageId && !nextPageId;\n  const isPLA = isPLASource(trialHomeData?.intel_student?.source);\n\n  const nextButtonDisabled = useMemo(\n    () => isRightBtnDisabled || studentAbsentInClass || numberInNameError,\n    [isRightBtnDisabled, studentAbsentInClass, numberInNameError],\n  );\n  const prevButtonDisabled = useMemo(\n    () => isLeftBtnDisabled || studentAbsentInClass,\n    [isLeftBtnDisabled, studentAbsentInClass],\n  );\n\n  const tooltipContent = useMemo(() => {\n    if (numberInNameError) return 'Please enter a valid name';\n    return 'Waiting for student to join...';\n  }, [numberInNameError]);\n  const showTooltip = useMemo(\n    () => studentAbsentInClass || numberInNameError,\n    [studentAbsentInClass, numberInNameError],\n  );\n\n  const handleNext = useCallback(() => {\n    handleNavigation('next', nextPageId);\n  }, [handleNavigation, nextPageId]);\n\n  const handlePrev = useCallback(() => {\n    handleNavigation('prev', prevPageId);\n  }, [handleNavigation, prevPageId]);\n\n  return (\n    <Styled.Container\n      $flexDirection=\"row-reverse\"\n      $justifyContent=\"space-between\"\n      $alignItems=\"center\"\n    >\n      {isLastPage && (\n        <Button\n          renderAs=\"tertiary\"\n          size=\"small\"\n          label={isPLA ? 'End the session' : 'End the class'}\n          shape=\"square\"\n          onClick={openEndClassModal}\n        />\n      )}\n      {nextPageId && nextButtonLabel && (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGap={12}>\n          <Text $renderAs=\"ab2\" $color=\"BLACK_T_60\">\n            {nextButtonLabel}\n          </Text>\n          <ArrowTooltip\n            widthX={8}\n            zIndex={2}\n            position=\"top-left\"\n            renderAs=\"primary\"\n            tooltipItem={tooltipContent}\n            hidden={!showTooltip}\n          >\n            <IconButton\n              Icon={Styled.ForwardArrow}\n              renderAs=\"primary\"\n              analyticsLabel={nextButtonLabel}\n              size=\"small\"\n              onClick={handleNext}\n              disabled={nextButtonDisabled}\n              busy={isRightBtnLoading}\n            />\n          </ArrowTooltip>\n        </FlexView>\n      )}\n      {prevPageId && prevButtonLabel && (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGap={12}>\n          <IconButton\n            Icon={Styled.BackwardArrow}\n            renderAs=\"secondary\"\n            analyticsLabel={prevButtonLabel}\n            size=\"small\"\n            onClick={handlePrev}\n            disabled={prevButtonDisabled}\n            busy={isLeftBtnLoading}\n          />\n          <Text $renderAs=\"ab2\" $color=\"BLACK_T_60\">\n            {prevButtonLabel}\n          </Text>\n        </FlexView>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default NavigationBar;\n"],"names":["NavigationBar","slideConfig","buttonState","openEndClassModal","studentAbsentInClass","trialHomeData","formData","useTrialSessionContext","handleNavigation","useTrialSessionNavigation","isLeftBtnDisabled","isLeftBtnLoading","isRightBtnDisabled","isRightBtnLoading","prevPage","nextPage","prevButtonLabel","prevPageId","nextButtonLabel","nextPageId","numberInNameError","isLastPage","isPLA","isPLASource","_a","nextButtonDisabled","useMemo","prevButtonDisabled","tooltipContent","showTooltip","handleNext","useCallback","handlePrev","jsxs","Styled.Container","jsx","Button","FlexView","Text","ArrowTooltip","IconButton","Styled.ForwardArrow","Styled.BackwardArrow"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,KAAoB,MAAM;;AACxB,QAAA;AAAA,IACJ,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,MACEC,EAAuB,GAErB,EAAE,kBAAAC,MAAqBC,KAEvB;AAAA,IACJ,MAAM,EAAE,YAAYC,GAAmB,WAAWC,EAAiB;AAAA,IACnE,OAAO,EAAE,YAAYC,GAAoB,WAAWC,EAAkB;AAAA,EAAA,IACpEX,KAAe,CAAA,GAEb,EAAE,UAAAY,GAAU,UAAAC,MAAad,KAAe,CAAA,GACxC,EAAE,aAAae,GAAiB,QAAQC,EAAW,IAAIH,KAAY,IACnE,EAAE,aAAaI,GAAiB,QAAQC,EAAW,IAAIJ,KAAY,IACnE,EAAE,mBAAAK,EAAA,IAAsBd,KAAY,IAEpCe,IAAaJ,KAAc,CAACE,GAC5BG,IAAQC,GAAYC,IAAAnB,KAAA,gBAAAA,EAAe,kBAAf,gBAAAmB,EAA8B,MAAM,GAExDC,IAAqBC;AAAA,IACzB,MAAMd,KAAsBR,KAAwBgB;AAAA,IACpD,CAACR,GAAoBR,GAAsBgB,CAAiB;AAAA,EAAA,GAExDO,IAAqBD;AAAA,IACzB,MAAMhB,KAAqBN;AAAA,IAC3B,CAACM,GAAmBN,CAAoB;AAAA,EAAA,GAGpCwB,IAAiBF,EAAQ,MACzBN,IAA0B,8BACvB,kCACN,CAACA,CAAiB,CAAC,GAChBS,IAAcH;AAAA,IAClB,MAAMtB,KAAwBgB;AAAA,IAC9B,CAAChB,GAAsBgB,CAAiB;AAAA,EAAA,GAGpCU,IAAaC,EAAY,MAAM;AACnC,IAAAvB,EAAiB,QAAQW,CAAU;AAAA,EAAA,GAClC,CAACX,GAAkBW,CAAU,CAAC,GAE3Ba,IAAaD,EAAY,MAAM;AACnC,IAAAvB,EAAiB,QAAQS,CAAU;AAAA,EAAA,GAClC,CAACT,GAAkBS,CAAU,CAAC;AAG/B,SAAA,gBAAAgB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,iBAAgB;AAAA,MAChB,aAAY;AAAA,MAEX,UAAA;AAAA,QACCb,KAAA,gBAAAc;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,MAAK;AAAA,YACL,OAAOd,IAAQ,oBAAoB;AAAA,YACnC,OAAM;AAAA,YACN,SAASnB;AAAA,UAAA;AAAA,QACX;AAAA,QAEDgB,KAAcD,KACb,gBAAAe,EAACI,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,UAAU,IACrF,UAAA;AAAA,UAAA,gBAAAF,EAACG,GAAK,EAAA,WAAU,OAAM,QAAO,cAC1B,UACHpB,GAAA;AAAA,UACA,gBAAAiB;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,UAAS;AAAA,cACT,UAAS;AAAA,cACT,aAAaX;AAAA,cACb,QAAQ,CAACC;AAAA,cAET,UAAA,gBAAAM;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,MAAMC;AAAAA,kBACN,UAAS;AAAA,kBACT,gBAAgBvB;AAAA,kBAChB,MAAK;AAAA,kBACL,SAASY;AAAA,kBACT,UAAUL;AAAA,kBACV,MAAMZ;AAAA,gBAAA;AAAA,cACR;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GACF;AAAA,QAEDI,KAAcD,KACb,gBAAAiB,EAACI,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,UAAU,IACrF,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAME;AAAAA,cACN,UAAS;AAAA,cACT,gBAAgB1B;AAAA,cAChB,MAAK;AAAA,cACL,SAASgB;AAAA,cACT,UAAUL;AAAA,cACV,MAAMhB;AAAA,YAAA;AAAA,UACR;AAAA,4BACC2B,GAAK,EAAA,WAAU,OAAM,QAAO,cAC1B,UACHtB,GAAA;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/features/trial-session/comps/navigation-bar/index.tsx"],"sourcesContent":["import { useCallback, useMemo, type FC } from 'react';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport Button from '../../../ui/buttons/button/button';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport { isPLASource } from '../../helper';\nimport { useTrialSessionNavigation } from '../../hooks/use-trial-session-navigation';\nimport * as Styled from './navigation-bar-styled';\n\nconst NavigationBar: FC = () => {\n  const {\n    slideConfig,\n    buttonState,\n    openEndClassModal,\n    studentAbsentInClass,\n    trialHomeData,\n    formData,\n  } = useTrialSessionContext();\n\n  const { handleNavigation } = useTrialSessionNavigation();\n\n  const {\n    left: { isDisabled: isLeftBtnDisabled, isLoading: isLeftBtnLoading },\n    right: { isDisabled: isRightBtnDisabled, isLoading: isRightBtnLoading },\n  } = buttonState || {};\n\n  const { prevPage, nextPage } = slideConfig || {};\n  const { buttonLabel: prevButtonLabel, pageId: prevPageId } = prevPage || {};\n  const { buttonLabel: nextButtonLabel, pageId: nextPageId } = nextPage || {};\n  const { numberInNameError } = formData || {};\n\n  const isLastPage = prevPageId && !nextPageId;\n  const isPLA = isPLASource(trialHomeData?.intel_student?.source);\n\n  const nextButtonDisabled = useMemo(\n    () => isRightBtnDisabled || studentAbsentInClass || numberInNameError,\n    [isRightBtnDisabled, studentAbsentInClass, numberInNameError],\n  );\n  const prevButtonDisabled = useMemo(\n    () => isLeftBtnDisabled || studentAbsentInClass,\n    [isLeftBtnDisabled, studentAbsentInClass],\n  );\n\n  const tooltipContent = useMemo(() => {\n    if (numberInNameError) return 'Please enter a valid name';\n\n    return 'Waiting for student to join...';\n  }, [numberInNameError]);\n  const showTooltip = useMemo(\n    () => studentAbsentInClass || numberInNameError,\n    [studentAbsentInClass, numberInNameError],\n  );\n\n  const handleNext = useCallback(() => {\n    handleNavigation('next', nextPageId);\n  }, [handleNavigation, nextPageId]);\n\n  const handlePrev = useCallback(() => {\n    handleNavigation('prev', prevPageId);\n  }, [handleNavigation, prevPageId]);\n\n  return (\n    <Styled.Container\n      $flexDirection=\"row-reverse\"\n      $justifyContent=\"space-between\"\n      $alignItems=\"center\"\n    >\n      {isLastPage && (\n        <Button\n          renderAs=\"tertiary\"\n          size=\"small\"\n          label={isPLA ? 'End the session' : 'End the class'}\n          shape=\"square\"\n          onClick={openEndClassModal}\n        />\n      )}\n      {nextPageId && nextButtonLabel && (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGap={12}>\n          <Text $renderAs=\"ab2\" $color=\"BLACK_T_60\">\n            {nextButtonLabel}\n          </Text>\n          <ArrowTooltip\n            widthX={8}\n            zIndex={2}\n            position=\"top-left\"\n            renderAs=\"primary\"\n            tooltipItem={tooltipContent}\n            hidden={!showTooltip}\n          >\n            <IconButton\n              Icon={Styled.ForwardArrow}\n              renderAs=\"primary\"\n              analyticsLabel={nextButtonLabel}\n              size=\"small\"\n              onClick={handleNext}\n              disabled={nextButtonDisabled}\n              busy={isRightBtnLoading}\n            />\n          </ArrowTooltip>\n        </FlexView>\n      )}\n      {prevPageId && prevButtonLabel && (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGap={12}>\n          <IconButton\n            Icon={Styled.BackwardArrow}\n            renderAs=\"secondary\"\n            analyticsLabel={prevButtonLabel}\n            size=\"small\"\n            onClick={handlePrev}\n            disabled={prevButtonDisabled}\n            busy={isLeftBtnLoading}\n          />\n          <Text $renderAs=\"ab2\" $color=\"BLACK_T_60\">\n            {prevButtonLabel}\n          </Text>\n        </FlexView>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default NavigationBar;\n"],"names":["NavigationBar","slideConfig","buttonState","openEndClassModal","studentAbsentInClass","trialHomeData","formData","useTrialSessionContext","handleNavigation","useTrialSessionNavigation","isLeftBtnDisabled","isLeftBtnLoading","isRightBtnDisabled","isRightBtnLoading","prevPage","nextPage","prevButtonLabel","prevPageId","nextButtonLabel","nextPageId","numberInNameError","isLastPage","isPLA","isPLASource","_a","nextButtonDisabled","useMemo","prevButtonDisabled","tooltipContent","showTooltip","handleNext","useCallback","handlePrev","jsxs","Styled.Container","jsx","Button","FlexView","Text","ArrowTooltip","IconButton","Styled.ForwardArrow","Styled.BackwardArrow"],"mappings":"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"}

package/dist/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.js

@@ -1,32 +1,32 @@
 import r from "styled-components";
 import c from "../../../../assets/line-icons/icons/cross.js";
-import d from "../../../../assets/line-icons/icons/info3.js";
+import l from "../../../../assets/line-icons/icons/info3.js";
 import e from "../../../ui/layout/flex-view.js";
-import l from "../../../ui/text/text.js";
+import d from "../../../ui/text/text.js";
 import { CustomElement as a } from "../worksheet-question/worksheet-question-styled.js";
 import x from "../../../../assets/line-icons/icons/solution.js";
 r(e)`
   border: 2px solid #000;
 `;
 const y = r(e)(
-  ({ $questionWidth: t, $actionbarHeight: o, theme: i }) => `
+  ({ $questionWidth: t, $actionbarHeight: o, theme: n }) => `
   position: absolute;
   bottom: ${o}px;
   right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)
   width: calc(${t}px - 32px); // 32px is the left + right padding
   height: 30%;
   display: flex;
-  border: 1px solid ${i.colors.GREY_2};
+  border: 1px solid ${n.colors.GREY_2};
   overflow: hidden;
 `
 ), C = r(e)`
   cursor: pointer;
-`, I = r(l)`
+`, I = r(d)`
   text-decoration: underline;
   white-space: nowrap;
   writing-mode: vertical-rl;
   text-align: right;
-`, s = (t) => t.startsWith("calc(") ? t.replace(")", " - 0px)") : t, p = (t) => t.trim().split(/\s+(?=[+-])/).map((n) => n.startsWith("-") ? `+${n.slice(1)}` : n.startsWith("+") ? `-${n.slice(1)}` : `-${n}`).join(" "), m = (t) => t.startsWith("calc(") && t.endsWith(")") ? (t = t.slice(5, -1), `calc(${p(t)})`) : p(t), S = r(e)(
+`, s = (t) => t.startsWith("calc(") ? t.replace(")", " - 0px)") : t, p = (t) => t.trim().split(/\s+(?=[+-])/).map((i) => i.startsWith("-") ? `+${i.slice(1)}` : i.startsWith("+") ? `-${i.slice(1)}` : `-${i}`).join(" "), f = (t) => t.startsWith("calc(") && t.endsWith(")") ? (t = t.slice(5, -1), `calc(${p(t)})`) : p(t), S = r(e)(
   ({ $questionWidth: t }) => `
   width: calc(${t}px - 32px); // 32px is the left + right padding
   overflow-y: auto;
@@ -34,7 +34,7 @@ const y = r(e)(
   display: flex;
 `
 ), T = r(e)(({ $questionWidth: t, $height: o }) => `
-  margin-top: ${typeof o == "number" ? `${-o}px` : m(s(o))};
+  margin-top: ${typeof o == "number" ? `${-o}px` : f(s(o))};
   position: sticky;
   left: calc((100% - ${t}px ) *.5 + ${t}px + 12px);
   bottom: 16px;
@@ -64,28 +64,28 @@ const y = r(e)(
   position: absolute;
   top: 8px;
   right: 16px;
-`, k = r(d)(({ theme: t, $disabled: o }) => `
+`, v = r(l)(({ theme: t, $disabled: o }) => `
     & path {
-      stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
+      fill: ${o ? t.colors.GREY_4 : t.colors.BLACK};
     }
-  `), v = r(x)(({ theme: t, $disabled: o }) => `
+  `), R = r(x)(({ theme: t, $disabled: o }) => `
     & path {
-      stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
+      fill: ${o ? t.colors.GREY_4 : t.colors.BLACK};
     }
-  `), R = r(a)``;
+  `), Y = r(a)``;
 export {
   W as CloseIcon,
-  R as Guide,
+  Y as Guide,
   E as GuideContainer,
-  k as HintIcon,
+  v as HintIcon,
   G as Pointer,
   S as Section,
   y as SectionContainer,
   T as SideBarContainer,
-  v as SolIcon,
+  R as SolIcon,
   I as UnderlinedText,
   C as UnderlinedTextWrapper,
   s as getMinHeightFromString,
-  m as negateExpression
+  f as negateExpression
 };
 //# sourceMappingURL=worksheet-sidebar-styled.js.map

package/dist/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"worksheet-sidebar-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Info3Icon from '../../../../assets/line-icons/icons/info3';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { CustomElement } from '../worksheet-question/worksheet-question-styled';\nimport SolutionIcon from '../../../../assets/line-icons/icons/solution';\n\nexport const Circle = styled(FlexView)`\n  border: 2px solid #000;\n`;\nexport const SectionContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth, $actionbarHeight, theme }) => `\n  position: absolute;\n  bottom: ${$actionbarHeight}px;\n  right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  height: 30%;\n  display: flex;\n  border: 1px solid ${theme.colors.GREY_2};\n  overflow: hidden;\n`,\n);\n\nexport const UnderlinedTextWrapper = styled(FlexView)`\n  cursor: pointer;\n`;\n\nexport const UnderlinedText = styled(Text)`\n  text-decoration: underline;\n  white-space: nowrap;\n  writing-mode: vertical-rl;\n  text-align: right;\n`;\n\nexport const getMinHeightFromString = (minHeight: string) => {\n  if (minHeight.startsWith('calc(')) {\n    return minHeight.replace(')', ' - 0px)');\n  }\n\n  return minHeight;\n};\n\nconst negateString = (expression: string) => {\n  const terms = expression.trim().split(/\\s+(?=[+-])/);\n  const negatedTerms = terms.map(term => {\n    if (term.startsWith('-')) {\n      return `+${term.slice(1)}`; // change - to +\n    }\n\n    if (term.startsWith('+')) {\n      return `-${term.slice(1)}`; // change + to -\n    }\n\n    return `-${term}`; // add leading '-'\n  });\n\n  return negatedTerms.join(' ');\n};\n\nexport const negateExpression = (expression: string) => {\n  if (expression.startsWith('calc(') && expression.endsWith(')')) {\n    expression = expression.slice(5, -1); // Remove 'calc(' and ')'\n    const negatedTerms = negateString(expression);\n\n    return `calc(${negatedTerms})`;\n  }\n\n  return negateString(expression);\n};\n\nexport const Section = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth }) => `\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  overflow-y: auto;\n  height: 100%;\n  display: flex;\n`,\n);\nexport const SideBarContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $height: number | string;\n}>(({ $questionWidth, $height }) => {\n  return `\n  margin-top: ${\n    typeof $height === 'number'\n      ? `${-$height}px`\n      : negateExpression(getMinHeightFromString($height))\n  };\n  position: sticky;\n  left: calc((100% - ${$questionWidth}px ) *.5 + ${$questionWidth}px + 12px);\n  bottom: 16px;\n  align-items: center;\n  height: ${typeof $height === 'number' ? `${$height}px` : getMinHeightFromString($height)};\n  z-index: 1;\n`;\n});\n\nexport const GuideContainer = styled(FlexView)(\n  ({ theme }) => `\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid ${theme.colors.GREY_2};\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n`,\n);\n\nexport const Pointer = styled.div<{ topValue: number; leftValue: number }>`\n  position: fixed;\n  top: ${({ topValue }) => `${topValue}px`};\n  left: ${({ leftValue }) => `${leftValue}px`};\n  width: 15px;\n  height: 15px;\n  transform: rotate(45deg);\n  background: white;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n  position: absolute;\n  top: 8px;\n  right: 16px;\n`;\n\nexport const HintIcon = styled(Info3Icon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const SolIcon = styled(SolutionIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const Guide = styled(CustomElement)``;\n"],"names":["styled","FlexView","SectionContainer","$questionWidth","$actionbarHeight","theme","UnderlinedTextWrapper","UnderlinedText","Text","getMinHeightFromString","minHeight","negateString","expression","term","negateExpression","Section","SideBarContainer","$height","GuideContainer","Pointer","topValue","leftValue","CloseIcon","CrossIcon","HintIcon","Info3Icon","$disabled","SolIcon","SolutionIcon","Guide","CustomElement"],"mappings":";;;;;;;AASsBA,EAAOC,CAAQ;AAAA;AAAA;AAGxB,MAAAC,IAAmBF,EAAOC,CAAQ;AAAA,EAI7C,CAAC,EAAE,gBAAAE,GAAgB,kBAAAC,GAAkB,OAAAC,EAAY,MAAA;AAAA;AAAA,YAEvCD,CAAgB;AAAA;AAAA,gBAEZD,CAAc;AAAA;AAAA;AAAA,sBAGRE,EAAM,OAAO,MAAM;AAAA;AAAA;AAGzC,GAEaC,IAAwBN,EAAOC,CAAQ;AAAA;AAAA,GAIvCM,IAAiBP,EAAOQ,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAyB,CAACC,MACjCA,EAAU,WAAW,OAAO,IACvBA,EAAU,QAAQ,KAAK,SAAS,IAGlCA,GAGHC,IAAe,CAACC,MACNA,EAAW,KAAK,EAAE,MAAM,aAAa,EACxB,IAAI,CAAQC,MACjCA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGtBA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGnB,IAAIA,CAAI,EAChB,EAEmB,KAAK,GAAG,GAGjBC,IAAmB,CAACF,MAC3BA,EAAW,WAAW,OAAO,KAAKA,EAAW,SAAS,GAAG,KAC9CA,IAAAA,EAAW,MAAM,GAAG,EAAE,GAG5B,QAFcD,EAAaC,CAAU,CAEjB,OAGtBD,EAAaC,CAAU,GAGnBG,IAAUf,EAAOC,CAAQ;AAAA,EAIpC,CAAC,EAAE,gBAAAE,EAAA,MAAqB;AAAA,gBACVA,CAAc;AAAA;AAAA;AAAA;AAAA;AAK9B,GACaa,IAAmBhB,EAAOC,CAAQ,EAG5C,CAAC,EAAE,gBAAAE,GAAgB,SAAAc,QACb;AAAA,gBAEL,OAAOA,KAAY,WACf,GAAG,CAACA,CAAO,OACXH,EAAiBL,EAAuBQ,CAAO,CAAC,CACtD;AAAA;AAAA,uBAEqBd,CAAc,cAAcA,CAAc;AAAA;AAAA;AAAA,YAGrD,OAAOc,KAAY,WAAW,GAAGA,CAAO,OAAOR,EAAuBQ,CAAO,CAAC;AAAA;AAAA,CAGzF,GAEYC,IAAiBlB,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA;AAAA;AAAA,sBAGKA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKzC,GAEac,IAAUnB,EAAO;AAAA;AAAA,SAErB,CAAC,EAAE,UAAAoB,EAAe,MAAA,GAAGA,CAAQ,IAAI;AAAA,UAChC,CAAC,EAAE,WAAAC,EAAgB,MAAA,GAAGA,CAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAYtB,EAAOuB,CAAS;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAWxB,EAAOyB,CAAS,EAA0B,CAAC,EAAE,OAAApB,GAAO,WAAAqB,QACnE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYsB,IAAU3B,EAAO4B,CAAY,EAA0B,CAAC,EAAE,OAAAvB,GAAO,WAAAqB,QACrE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYwB,IAAQ7B,EAAO8B,CAAa;"}
+{"version":3,"file":"worksheet-sidebar-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Info3Icon from '../../../../assets/line-icons/icons/info3';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { CustomElement } from '../worksheet-question/worksheet-question-styled';\nimport SolutionIcon from '../../../../assets/line-icons/icons/solution';\n\nexport const Circle = styled(FlexView)`\n  border: 2px solid #000;\n`;\nexport const SectionContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth, $actionbarHeight, theme }) => `\n  position: absolute;\n  bottom: ${$actionbarHeight}px;\n  right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  height: 30%;\n  display: flex;\n  border: 1px solid ${theme.colors.GREY_2};\n  overflow: hidden;\n`,\n);\n\nexport const UnderlinedTextWrapper = styled(FlexView)`\n  cursor: pointer;\n`;\n\nexport const UnderlinedText = styled(Text)`\n  text-decoration: underline;\n  white-space: nowrap;\n  writing-mode: vertical-rl;\n  text-align: right;\n`;\n\nexport const getMinHeightFromString = (minHeight: string) => {\n  if (minHeight.startsWith('calc(')) {\n    return minHeight.replace(')', ' - 0px)');\n  }\n\n  return minHeight;\n};\n\nconst negateString = (expression: string) => {\n  const terms = expression.trim().split(/\\s+(?=[+-])/);\n  const negatedTerms = terms.map(term => {\n    if (term.startsWith('-')) {\n      return `+${term.slice(1)}`; // change - to +\n    }\n\n    if (term.startsWith('+')) {\n      return `-${term.slice(1)}`; // change + to -\n    }\n\n    return `-${term}`; // add leading '-'\n  });\n\n  return negatedTerms.join(' ');\n};\n\nexport const negateExpression = (expression: string) => {\n  if (expression.startsWith('calc(') && expression.endsWith(')')) {\n    expression = expression.slice(5, -1); // Remove 'calc(' and ')'\n    const negatedTerms = negateString(expression);\n\n    return `calc(${negatedTerms})`;\n  }\n\n  return negateString(expression);\n};\n\nexport const Section = styled(FlexView)<{\n  $questionWidth: number;\n  $actionbarHeight: number;\n}>(\n  ({ $questionWidth }) => `\n  width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n  overflow-y: auto;\n  height: 100%;\n  display: flex;\n`,\n);\nexport const SideBarContainer = styled(FlexView)<{\n  $questionWidth: number;\n  $height: number | string;\n}>(({ $questionWidth, $height }) => {\n  return `\n  margin-top: ${\n    typeof $height === 'number'\n      ? `${-$height}px`\n      : negateExpression(getMinHeightFromString($height))\n  };\n  position: sticky;\n  left: calc((100% - ${$questionWidth}px ) *.5 + ${$questionWidth}px + 12px);\n  bottom: 16px;\n  align-items: center;\n  height: ${typeof $height === 'number' ? `${$height}px` : getMinHeightFromString($height)};\n  z-index: 1;\n`;\n});\n\nexport const GuideContainer = styled(FlexView)(\n  ({ theme }) => `\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid ${theme.colors.GREY_2};\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n`,\n);\n\nexport const Pointer = styled.div<{ topValue: number; leftValue: number }>`\n  position: fixed;\n  top: ${({ topValue }) => `${topValue}px`};\n  left: ${({ leftValue }) => `${leftValue}px`};\n  width: 15px;\n  height: 15px;\n  transform: rotate(45deg);\n  background: white;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n  position: absolute;\n  top: 8px;\n  right: 16px;\n`;\n\nexport const HintIcon = styled(Info3Icon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      fill: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const SolIcon = styled(SolutionIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n  return `\n    & path {\n      fill: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n    }\n  `;\n});\n\nexport const Guide = styled(CustomElement)``;\n"],"names":["styled","FlexView","SectionContainer","$questionWidth","$actionbarHeight","theme","UnderlinedTextWrapper","UnderlinedText","Text","getMinHeightFromString","minHeight","negateString","expression","term","negateExpression","Section","SideBarContainer","$height","GuideContainer","Pointer","topValue","leftValue","CloseIcon","CrossIcon","HintIcon","Info3Icon","$disabled","SolIcon","SolutionIcon","Guide","CustomElement"],"mappings":";;;;;;;AASsBA,EAAOC,CAAQ;AAAA;AAAA;AAGxB,MAAAC,IAAmBF,EAAOC,CAAQ;AAAA,EAI7C,CAAC,EAAE,gBAAAE,GAAgB,kBAAAC,GAAkB,OAAAC,EAAY,MAAA;AAAA;AAAA,YAEvCD,CAAgB;AAAA;AAAA,gBAEZD,CAAc;AAAA;AAAA;AAAA,sBAGRE,EAAM,OAAO,MAAM;AAAA;AAAA;AAGzC,GAEaC,IAAwBN,EAAOC,CAAQ;AAAA;AAAA,GAIvCM,IAAiBP,EAAOQ,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAyB,CAACC,MACjCA,EAAU,WAAW,OAAO,IACvBA,EAAU,QAAQ,KAAK,SAAS,IAGlCA,GAGHC,IAAe,CAACC,MACNA,EAAW,KAAK,EAAE,MAAM,aAAa,EACxB,IAAI,CAAQC,MACjCA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGtBA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGnB,IAAIA,CAAI,EAChB,EAEmB,KAAK,GAAG,GAGjBC,IAAmB,CAACF,MAC3BA,EAAW,WAAW,OAAO,KAAKA,EAAW,SAAS,GAAG,KAC9CA,IAAAA,EAAW,MAAM,GAAG,EAAE,GAG5B,QAFcD,EAAaC,CAAU,CAEjB,OAGtBD,EAAaC,CAAU,GAGnBG,IAAUf,EAAOC,CAAQ;AAAA,EAIpC,CAAC,EAAE,gBAAAE,EAAA,MAAqB;AAAA,gBACVA,CAAc;AAAA;AAAA;AAAA;AAAA;AAK9B,GACaa,IAAmBhB,EAAOC,CAAQ,EAG5C,CAAC,EAAE,gBAAAE,GAAgB,SAAAc,QACb;AAAA,gBAEL,OAAOA,KAAY,WACf,GAAG,CAACA,CAAO,OACXH,EAAiBL,EAAuBQ,CAAO,CAAC,CACtD;AAAA;AAAA,uBAEqBd,CAAc,cAAcA,CAAc;AAAA;AAAA;AAAA,YAGrD,OAAOc,KAAY,WAAW,GAAGA,CAAO,OAAOR,EAAuBQ,CAAO,CAAC;AAAA;AAAA,CAGzF,GAEYC,IAAiBlB,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA;AAAA;AAAA,sBAGKA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKzC,GAEac,IAAUnB,EAAO;AAAA;AAAA,SAErB,CAAC,EAAE,UAAAoB,EAAe,MAAA,GAAGA,CAAQ,IAAI;AAAA,UAChC,CAAC,EAAE,WAAAC,EAAgB,MAAA,GAAGA,CAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAYtB,EAAOuB,CAAS;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAWxB,EAAOyB,CAAS,EAA0B,CAAC,EAAE,OAAApB,GAAO,WAAAqB,QACnE;AAAA;AAAA,cAEKA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGjE,GAEYsB,IAAU3B,EAAO4B,CAAY,EAA0B,CAAC,EAAE,OAAAvB,GAAO,WAAAqB,QACrE;AAAA;AAAA,cAEKA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGjE,GAEYwB,IAAQ7B,EAAO8B,CAAa;"}