@cuemath/leap 3.2.24-as3 → 3.2.24-as6

package/dist/features/wins-dashboard/belts-elements-stickers/elements.js

@@ -1,12 +1,12 @@
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { memo as S, useState as T } from "react";
-import r, { css as a } from "styled-components";
-import l from "../../ui/layout/flex-view.js";
-import w from "../../ui/lottie-animation/lottie-animation.js";
-import L from "../../ui/separator/separator.js";
-import m from "../../ui/text/text.js";
-import { SCREEN_SIZES as u, getRewardElement as D, elementColors as W } from "../constants.js";
-const R = {
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { memo as T, useState as w, useCallback as m } from "react";
+import r, { css as l } from "styled-components";
+import d from "../../ui/layout/flex-view.js";
+import L from "../../ui/lottie-animation/lottie-animation.js";
+import D from "../../ui/separator/separator.js";
+import u from "../../ui/text/text.js";
+import { SCREEN_SIZES as A, getRewardElement as W, elementColors as R } from "../constants.js";
+const P = {
   TETRA: 0.5,
   COSA: 0.3,
   DODA: 0.3,
@@ -23,7 +23,7 @@ const R = {
   WOW: 0.6,
   CHEER: 0.6,
   "ROCK-ON": 0.6
-}, P = {
+}, H = {
   ASHTA: "Ashta",
   CHATVA: "Chatva",
   COSA: "Cosa",
@@ -40,51 +40,51 @@ const R = {
   GREAT: "Great",
   WOW: "Wow",
   AWESOME: "Awesome"
-}, H = (t, e) => {
-  let i = null, s = "-4px", n = null;
-  return t ? n = "-4px" : (i = `${e ? "-2px" : "2px"}`, s = `${e ? "-4px" : "2px"}`), `
+}, K = (t, e) => {
+  let i = null, a = "-4px", n = null;
+  return t ? n = "-4px" : (i = `${e ? "-2px" : "2px"}`, a = `${e ? "-4px" : "2px"}`), `
     bottom: ${i};
     top: ${n};
-    right: ${s};
+    right: ${a};
   `;
-}, K = r(l)`
+}, V = r(d)`
   align-items: center;
   gap: 4px;
-`, V = r(l)`
+`, y = r(d)`
   position: absolute;
   top: -3px;
   align-items: center;
   justify-content: center;
   width: 62px;
   height: 62px;
-`, y = r.div`
+`, G = r.div`
   position: relative;
   width: 62px;
   height: 62px;
-`, G = r.div`
+`, I = r.div`
   position: relative;
-`, I = r.img`
+`, j = r.img`
   width: 56px;
   height: 56px;
-  ${({ $disabled: t, $disabledVal: e }) => t && a`
+  ${({ $disabled: t, $disabledVal: e }) => t && l`
       filter: saturate(0);
       opacity: ${e};
     `}
-`, j = r.div`
+`, M = r.div`
   border: 1px solid ${({ theme: t }) => t.colors.GREY_2};
   border-radius: 8px;
-`, Z = r(l)`
+`, v = r(d)`
   width: 62px;
   height: 62px;
   align-items: center;
   justify-content: center;
-  ${({ $disabled: t, $disabledVal: e }) => t && a`
+  ${({ $disabled: t, $disabledVal: e }) => t && l`
       filter: saturate(0);
       opacity: ${e};
     `}
-`, v = r(l)`
+`, Z = r(d)`
   position: absolute;
-  ${({ $isSticker: t, $isCoddingType: e }) => H(t, e)};
+  ${({ $isSticker: t, $isCoddingType: e }) => K(t, e)};
   background-color: ${({ theme: t }) => t.colors.GREY_2};
   border-radius: ${({ $borderRadius: t }) => t};
   border: ${({ $borderColor: t }) => `1px solid ${t}`};
@@ -92,56 +92,58 @@ const R = {
   height: 16px;
   align-items: center;
   justify-content: center;
-  ${({ $currentScreenWidth: t, $width: e }) => t < u.LAPTOP && a`
+  ${({ $currentScreenWidth: t, $width: e }) => t < A.LAPTOP && l`
       width: ${e + 6}px;
       height: 22px;
     `}
-`, B = r(m)`
+`, B = r(u)`
   font-size: 9px;
   line-height: 14px;
-  ${({ $currentScreenWidth: t }) => t < u.LAPTOP && a`
+  ${({ $currentScreenWidth: t }) => t < A.LAPTOP && l`
       font-size: 12px;
       line-height: 14px;
     `}
-`, M = r(m)`
+`, N = r(u)`
   color: ${({ theme: t }) => t.colors.BLACK};
   opacity: ${({ $disabled: t }) => t ? 1 : 0.5};
-`, N = ({
+`, _ = ({
   isAchieved: t = !1,
   count: e = 0,
   elementType: i,
-  isCoddingType: s = !1,
+  isCoddingType: a = !1,
   isSticker: n = !1,
-  lotties: A = {},
+  lotties: C = {},
   currentScreenWidth: p
 }) => {
-  const [g, C] = T(!0), d = e >= 100, O = P[i], c = R[i] || 1, { height: E, width: f, lottieSrc: $ } = A[i] || {}, x = (b) => {
-    C(b);
-  };
-  return /* @__PURE__ */ h(K, { children: [
-    /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(V, { $flexDirection: "row", children: /* @__PURE__ */ h(G, { children: [
+  const [g, c] = w(!0), $ = e >= 100, O = H[i], h = P[i] || 1, { height: f, width: E, lottieSrc: s } = C[i] || {}, b = m(() => {
+    s && c(!1);
+  }, [s]), S = m(() => {
+    s && c(!0);
+  }, [s]);
+  return /* @__PURE__ */ x(V, { children: [
+    /* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(y, { $flexDirection: "row", children: /* @__PURE__ */ x(I, { children: [
       !n && /* @__PURE__ */ o(
-        I,
+        j,
         {
           $disabled: !t,
-          $disabledVal: c,
-          src: D(i),
+          $disabledVal: h,
+          src: W(i),
           alt: "reward"
         }
       ),
-      n && $ && /* @__PURE__ */ o(j, { $disabled: !t, children: /* @__PURE__ */ o(
-        Z,
+      n && s && /* @__PURE__ */ o(M, { $disabled: !t, children: /* @__PURE__ */ o(
+        v,
         {
           $disabled: !t,
-          $disabledVal: c,
-          onMouseEnter: () => x(!1),
-          onMouseLeave: () => x(!0),
+          $disabledVal: h,
+          onMouseEnter: b,
+          onMouseLeave: S,
           children: /* @__PURE__ */ o(
-            w,
+            L,
             {
-              src: $,
-              width: f,
-              height: E,
+              src: s,
+              width: E,
+              height: f,
               settings: {
                 loop: !0,
                 autoplay: !g && t
@@ -151,13 +153,13 @@ const R = {
         }
       ) }),
       t && /* @__PURE__ */ o(
-        v,
+        Z,
         {
           $isSticker: n,
-          $borderColor: W[i] || "#000",
-          $width: d ? 28 : 16,
-          $borderRadius: d ? "26px" : "50%",
-          $isCoddingType: s,
+          $borderColor: R[i] || "#000",
+          $width: $ ? 28 : 16,
+          $borderRadius: $ ? "26px" : "50%",
+          $isCoddingType: a,
           $currentScreenWidth: p,
           $flexDirection: "row",
           children: /* @__PURE__ */ o(
@@ -172,11 +174,11 @@ const R = {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ o(L, { height: 4 }),
-    /* @__PURE__ */ o(M, { $renderAs: "body3", $disabled: t, children: O })
+    /* @__PURE__ */ o(D, { height: 4 }),
+    /* @__PURE__ */ o(N, { $renderAs: "body3", $disabled: t, children: O })
   ] });
-}, J = S(N);
+}, Q = T(_);
 export {
-  J as default
+  Q as default
 };
 //# sourceMappingURL=elements.js.map

package/dist/features/wins-dashboard/belts-elements-stickers/elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/elements.tsx"],"sourcesContent":["import React, { memo, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { elementColors, getRewardElement, SCREEN_SIZES } from '../constants';\n\nconst disablePercentages: Record<string, number> = {\n  'TETRA': 0.5,\n  'COSA': 0.3,\n  'DODA': 0.3,\n  'HEXO': 0.5,\n  'OCTO': 0.5,\n  'EKA': 0.5,\n  'DVI': 0.3,\n  'CHATVA': 0.3,\n  'ASHTA': 0.5,\n  'ZODASA': 0.4,\n  'CLAP': 0.6,\n  'COOL': 0.6,\n  'LIKE': 0.6,\n  'WOW': 0.6,\n  'CHEER': 0.6,\n  'ROCK-ON': 0.6,\n};\n\nconst elementTitles: Record<string, string> = {\n  ASHTA: 'Ashta',\n  CHATVA: 'Chatva',\n  COSA: 'Cosa',\n  DODA: 'Doca',\n  DVI: 'Dvi',\n  EKA: 'Eka',\n  HEXO: 'Hexo',\n  OCTO: 'Octo',\n  TETRA: `T'tro`,\n  ZODASA: 'Zodasa',\n  CONGRATS: 'Congrats',\n  COOL: 'Cool',\n  KUDOS: 'Kudos',\n  GREAT: 'Great',\n  WOW: 'Wow',\n  AWESOME: 'Awesome',\n};\n\nconst getPositionStyles = (isSticker: boolean, isCoddingType: boolean): string => {\n  let bottom: string | null = null;\n  let right = '-4px';\n  let top: string | null = null;\n\n  if (!isSticker) {\n    bottom = `${isCoddingType ? '-2px' : '2px'}`;\n    right = `${isCoddingType ? '-4px' : '2px'}`;\n  } else {\n    top = '-4px';\n  }\n\n  return `\n    bottom: ${bottom};\n    top: ${top};\n    right: ${right};\n  `;\n};\n\nconst ElementContainer = styled(FlexView)`\n  align-items: center;\n  gap: 4px;\n`;\n\nconst Wrapper = styled(FlexView)`\n  position: absolute;\n  top: -3px;\n  align-items: center;\n  justify-content: center;\n  width: 62px;\n  height: 62px;\n`;\n\nconst BgWrapper = styled.div`\n  position: relative;\n  width: 62px;\n  height: 62px;\n`;\n\nconst GemContainer = styled.div`\n  position: relative;\n`;\n\ninterface ImageWrapperProps {\n  $disabled: boolean;\n  $disabledVal: number;\n}\n\nconst ImageWrapper = styled.img<ImageWrapperProps>`\n  width: 56px;\n  height: 56px;\n  ${({ $disabled, $disabledVal }) =>\n    $disabled &&\n    css`\n      filter: saturate(0);\n      opacity: ${$disabledVal};\n    `}\n`;\n\ninterface LottieContainerProps {\n  $disabled: boolean;\n}\n\nconst LottieContainer = styled.div<LottieContainerProps>`\n  border: 1px solid ${({ theme }) => theme.colors.GREY_2};\n  border-radius: 8px;\n`;\n\ninterface LottieWrapperProps {\n  $disabled: boolean;\n  $disabledVal: number;\n}\n\nconst LottieWrapper = styled(FlexView)<LottieWrapperProps>`\n  width: 62px;\n  height: 62px;\n  align-items: center;\n  justify-content: center;\n  ${({ $disabled, $disabledVal }) =>\n    $disabled &&\n    css`\n      filter: saturate(0);\n      opacity: ${$disabledVal};\n    `}\n`;\n\ninterface CountWrapperProps {\n  $isSticker: boolean;\n  $isCoddingType: boolean;\n  $borderColor: string;\n  $width: number;\n  $borderRadius: string;\n  $currentScreenWidth: number;\n}\n\nconst CountWrapper = styled(FlexView)<CountWrapperProps>`\n  position: absolute;\n  ${({ $isSticker, $isCoddingType }) => getPositionStyles($isSticker, $isCoddingType)};\n  background-color: ${({ theme }) => theme.colors.GREY_2};\n  border-radius: ${({ $borderRadius }) => $borderRadius};\n  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};\n  width: ${({ $width }) => $width}px;\n  height: 16px;\n  align-items: center;\n  justify-content: center;\n  ${({ $currentScreenWidth, $width }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: ${$width + 6}px;\n      height: 22px;\n    `}\n`;\n\ninterface CountTextProps {\n  $currentScreenWidth: number;\n}\n\nconst CountText = styled(Text)<CountTextProps>`\n  font-size: 9px;\n  line-height: 14px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      font-size: 12px;\n      line-height: 14px;\n    `}\n`;\n\ninterface ElementTextProps {\n  $disabled: boolean;\n}\n\nconst ElementText = styled(Text)<ElementTextProps>`\n  color: ${({ theme }) => theme.colors.BLACK};\n  opacity: ${({ $disabled }) => ($disabled ? 1 : 0.5)};\n`;\n\ninterface LottieData {\n  height: number;\n  width: number;\n  lottieSrc: string;\n}\n\ninterface ElementProps {\n  isAchieved?: boolean;\n  count?: number;\n  elementType: string;\n  isCoddingType?: boolean;\n  isSticker?: boolean;\n  lotties?: Record<string, LottieData>;\n  currentScreenWidth: number;\n}\n\nconst Element: React.FC<ElementProps> = ({\n  isAchieved = false,\n  count = 0,\n  elementType,\n  isCoddingType = false,\n  isSticker = false,\n  lotties = {},\n  currentScreenWidth,\n}) => {\n  const [isPaused, setIsPaused] = useState(true);\n  const isLargeCount = count >= 100;\n  const elementTitle = elementTitles[elementType];\n  const disabledVal = disablePercentages[elementType] || 1;\n  const { height, width, lottieSrc } = lotties[elementType] || {};\n\n  const animateLottie = (val: boolean) => {\n    setIsPaused(val);\n  };\n\n  return (\n    <ElementContainer>\n      <BgWrapper>\n        <Wrapper $flexDirection=\"row\">\n          <GemContainer>\n            {!isSticker && (\n              <ImageWrapper\n                $disabled={!isAchieved}\n                $disabledVal={disabledVal}\n                src={getRewardElement(elementType)}\n                alt=\"reward\"\n              />\n            )}\n            {isSticker && lottieSrc && (\n              <LottieContainer $disabled={!isAchieved}>\n                <LottieWrapper\n                  $disabled={!isAchieved}\n                  $disabledVal={disabledVal}\n                  onMouseEnter={() => animateLottie(false)}\n                  onMouseLeave={() => animateLottie(true)}\n                >\n                  <LottieAnimation\n                    src={lottieSrc}\n                    width={width}\n                    height={height}\n                    settings={{\n                      loop: true,\n                      autoplay: !isPaused && isAchieved,\n                    }}\n                  />\n                </LottieWrapper>\n              </LottieContainer>\n            )}\n\n            {isAchieved && (\n              <CountWrapper\n                $isSticker={isSticker}\n                $borderColor={elementColors[elementType as keyof typeof elementColors] || '#000'}\n                $width={isLargeCount ? 28 : 16}\n                $borderRadius={isLargeCount ? '26px' : '50%'}\n                $isCoddingType={isCoddingType}\n                $currentScreenWidth={currentScreenWidth}\n                $flexDirection=\"row\"\n              >\n                <CountText\n                  $currentScreenWidth={currentScreenWidth}\n                  $renderAs=\"body3\"\n                  $color=\"BLACK\"\n                >\n                  {count}\n                </CountText>\n              </CountWrapper>\n            )}\n          </GemContainer>\n        </Wrapper>\n      </BgWrapper>\n      <Separator height={4} />\n      <ElementText $renderAs=\"body3\" $disabled={isAchieved}>\n        {elementTitle}\n      </ElementText>\n    </ElementContainer>\n  );\n};\n\nexport default memo(Element);\n"],"names":["disablePercentages","elementTitles","getPositionStyles","isSticker","isCoddingType","bottom","right","top","ElementContainer","styled","FlexView","Wrapper","BgWrapper","GemContainer","ImageWrapper","$disabled","$disabledVal","css","LottieContainer","theme","LottieWrapper","CountWrapper","$isSticker","$isCoddingType","$borderRadius","$borderColor","$width","$currentScreenWidth","SCREEN_SIZES","CountText","Text","ElementText","Element","isAchieved","count","elementType","lotties","currentScreenWidth","isPaused","setIsPaused","useState","isLargeCount","elementTitle","disabledVal","height","width","lottieSrc","animateLottie","val","jsx","getRewardElement","LottieAnimation","elementColors","Separator","Element$1","memo"],"mappings":"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"}
+{"version":3,"file":"elements.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/elements.tsx"],"sourcesContent":["import React, { memo, useCallback, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { elementColors, getRewardElement, SCREEN_SIZES } from '../constants';\n\nconst disablePercentages: Record<string, number> = {\n  'TETRA': 0.5,\n  'COSA': 0.3,\n  'DODA': 0.3,\n  'HEXO': 0.5,\n  'OCTO': 0.5,\n  'EKA': 0.5,\n  'DVI': 0.3,\n  'CHATVA': 0.3,\n  'ASHTA': 0.5,\n  'ZODASA': 0.4,\n  'CLAP': 0.6,\n  'COOL': 0.6,\n  'LIKE': 0.6,\n  'WOW': 0.6,\n  'CHEER': 0.6,\n  'ROCK-ON': 0.6,\n};\n\nconst elementTitles: Record<string, string> = {\n  ASHTA: 'Ashta',\n  CHATVA: 'Chatva',\n  COSA: 'Cosa',\n  DODA: 'Doca',\n  DVI: 'Dvi',\n  EKA: 'Eka',\n  HEXO: 'Hexo',\n  OCTO: 'Octo',\n  TETRA: `T'tro`,\n  ZODASA: 'Zodasa',\n  CONGRATS: 'Congrats',\n  COOL: 'Cool',\n  KUDOS: 'Kudos',\n  GREAT: 'Great',\n  WOW: 'Wow',\n  AWESOME: 'Awesome',\n};\n\nconst getPositionStyles = (isSticker: boolean, isCoddingType: boolean): string => {\n  let bottom: string | null = null;\n  let right = '-4px';\n  let top: string | null = null;\n\n  if (!isSticker) {\n    bottom = `${isCoddingType ? '-2px' : '2px'}`;\n    right = `${isCoddingType ? '-4px' : '2px'}`;\n  } else {\n    top = '-4px';\n  }\n\n  return `\n    bottom: ${bottom};\n    top: ${top};\n    right: ${right};\n  `;\n};\n\nconst ElementContainer = styled(FlexView)`\n  align-items: center;\n  gap: 4px;\n`;\n\nconst Wrapper = styled(FlexView)`\n  position: absolute;\n  top: -3px;\n  align-items: center;\n  justify-content: center;\n  width: 62px;\n  height: 62px;\n`;\n\nconst BgWrapper = styled.div`\n  position: relative;\n  width: 62px;\n  height: 62px;\n`;\n\nconst GemContainer = styled.div`\n  position: relative;\n`;\n\ninterface ImageWrapperProps {\n  $disabled: boolean;\n  $disabledVal: number;\n}\n\nconst ImageWrapper = styled.img<ImageWrapperProps>`\n  width: 56px;\n  height: 56px;\n  ${({ $disabled, $disabledVal }) =>\n    $disabled &&\n    css`\n      filter: saturate(0);\n      opacity: ${$disabledVal};\n    `}\n`;\n\ninterface LottieContainerProps {\n  $disabled: boolean;\n}\n\nconst LottieContainer = styled.div<LottieContainerProps>`\n  border: 1px solid ${({ theme }) => theme.colors.GREY_2};\n  border-radius: 8px;\n`;\n\ninterface LottieWrapperProps {\n  $disabled: boolean;\n  $disabledVal: number;\n}\n\nconst LottieWrapper = styled(FlexView)<LottieWrapperProps>`\n  width: 62px;\n  height: 62px;\n  align-items: center;\n  justify-content: center;\n  ${({ $disabled, $disabledVal }) =>\n    $disabled &&\n    css`\n      filter: saturate(0);\n      opacity: ${$disabledVal};\n    `}\n`;\n\ninterface CountWrapperProps {\n  $isSticker: boolean;\n  $isCoddingType: boolean;\n  $borderColor: string;\n  $width: number;\n  $borderRadius: string;\n  $currentScreenWidth: number;\n}\n\nconst CountWrapper = styled(FlexView)<CountWrapperProps>`\n  position: absolute;\n  ${({ $isSticker, $isCoddingType }) => getPositionStyles($isSticker, $isCoddingType)};\n  background-color: ${({ theme }) => theme.colors.GREY_2};\n  border-radius: ${({ $borderRadius }) => $borderRadius};\n  border: ${({ $borderColor }) => `1px solid ${$borderColor}`};\n  width: ${({ $width }) => $width}px;\n  height: 16px;\n  align-items: center;\n  justify-content: center;\n  ${({ $currentScreenWidth, $width }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: ${$width + 6}px;\n      height: 22px;\n    `}\n`;\n\ninterface CountTextProps {\n  $currentScreenWidth: number;\n}\n\nconst CountText = styled(Text)<CountTextProps>`\n  font-size: 9px;\n  line-height: 14px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      font-size: 12px;\n      line-height: 14px;\n    `}\n`;\n\ninterface ElementTextProps {\n  $disabled: boolean;\n}\n\nconst ElementText = styled(Text)<ElementTextProps>`\n  color: ${({ theme }) => theme.colors.BLACK};\n  opacity: ${({ $disabled }) => ($disabled ? 1 : 0.5)};\n`;\n\ninterface LottieData {\n  height: number;\n  width: number;\n  lottieSrc: string;\n}\n\ninterface ElementProps {\n  isAchieved?: boolean;\n  count?: number;\n  elementType: string;\n  isCoddingType?: boolean;\n  isSticker?: boolean;\n  lotties?: Record<string, LottieData>;\n  currentScreenWidth: number;\n}\n\nconst Element: React.FC<ElementProps> = ({\n  isAchieved = false,\n  count = 0,\n  elementType,\n  isCoddingType = false,\n  isSticker = false,\n  lotties = {},\n  currentScreenWidth,\n}) => {\n  const [isPaused, setIsPaused] = useState(true);\n  const isLargeCount = count >= 100;\n  const elementTitle = elementTitles[elementType];\n  const disabledVal = disablePercentages[elementType] || 1;\n  const { height, width, lottieSrc } = lotties[elementType] || {};\n\n  const handleMouseEnter = useCallback(() => {\n    if (lottieSrc) {\n      setIsPaused(false);\n    }\n  }, [lottieSrc]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (lottieSrc) {\n      setIsPaused(true);\n    }\n  }, [lottieSrc]);\n\n  return (\n    <ElementContainer>\n      <BgWrapper>\n        <Wrapper $flexDirection=\"row\">\n          <GemContainer>\n            {!isSticker && (\n              <ImageWrapper\n                $disabled={!isAchieved}\n                $disabledVal={disabledVal}\n                src={getRewardElement(elementType)}\n                alt=\"reward\"\n              />\n            )}\n            {isSticker && lottieSrc && (\n              <LottieContainer $disabled={!isAchieved}>\n                <LottieWrapper\n                  $disabled={!isAchieved}\n                  $disabledVal={disabledVal}\n                  onMouseEnter={handleMouseEnter}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  <LottieAnimation\n                    src={lottieSrc}\n                    width={width}\n                    height={height}\n                    settings={{\n                      loop: true,\n                      autoplay: !isPaused && isAchieved,\n                    }}\n                  />\n                </LottieWrapper>\n              </LottieContainer>\n            )}\n\n            {isAchieved && (\n              <CountWrapper\n                $isSticker={isSticker}\n                $borderColor={elementColors[elementType as keyof typeof elementColors] || '#000'}\n                $width={isLargeCount ? 28 : 16}\n                $borderRadius={isLargeCount ? '26px' : '50%'}\n                $isCoddingType={isCoddingType}\n                $currentScreenWidth={currentScreenWidth}\n                $flexDirection=\"row\"\n              >\n                <CountText\n                  $currentScreenWidth={currentScreenWidth}\n                  $renderAs=\"body3\"\n                  $color=\"BLACK\"\n                >\n                  {count}\n                </CountText>\n              </CountWrapper>\n            )}\n          </GemContainer>\n        </Wrapper>\n      </BgWrapper>\n      <Separator height={4} />\n      <ElementText $renderAs=\"body3\" $disabled={isAchieved}>\n        {elementTitle}\n      </ElementText>\n    </ElementContainer>\n  );\n};\n\nexport default memo(Element);\n"],"names":["disablePercentages","elementTitles","getPositionStyles","isSticker","isCoddingType","bottom","right","top","ElementContainer","styled","FlexView","Wrapper","BgWrapper","GemContainer","ImageWrapper","$disabled","$disabledVal","css","LottieContainer","theme","LottieWrapper","CountWrapper","$isSticker","$isCoddingType","$borderRadius","$borderColor","$width","$currentScreenWidth","SCREEN_SIZES","CountText","Text","ElementText","Element","isAchieved","count","elementType","lotties","currentScreenWidth","isPaused","setIsPaused","useState","isLargeCount","elementTitle","disabledVal","height","width","lottieSrc","handleMouseEnter","useCallback","handleMouseLeave","jsx","getRewardElement","LottieAnimation","elementColors","Separator","Element$1","memo"],"mappings":"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"}

package/dist/features/wins-dashboard/student-badges/student-badge.js

@@ -1,149 +1,149 @@
-import { jsxs as d, jsx as o, Fragment as _ } from "react/jsx-runtime";
-import { memo as M, useState as S, useCallback as m } from "react";
-import r, { css as T, keyframes as W } from "styled-components";
-import n from "../../ui/layout/flex-view.js";
-import G from "../../ui/lottie-animation/lottie-animation.js";
-import N from "../../ui/separator/separator.js";
-import p from "../../ui/text/text.js";
-import { getTheme as P } from "../../ui/theme/get-theme.js";
-import O from "./hooks/use-student-badge-hook.js";
-const { colors: i } = P(), u = 20, H = (e) => W`
-  0% {
-    background-position: -${e}px 0;
-  }
-  80%, 100% {
-    background-position: ${e}px 0;
-  }
-`, Y = r.div`
-  display: flex;
-  width: ${({ $badgeWidth: e }) => e}px;
-  height: ${({ $badgeWidth: e }) => e}px;
-  background: linear-gradient(
-    92.42deg,
-    ${i.GREY_1}40 1.94%,
-    ${i.GREY_1} 48.8%,
-    ${i.GREY_1}40 97.88%
-  );
-  background-size: 200% 100%;
-  animation-name: ${({ $badgeWidth: e }) => H(e)};
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  background-repeat: no-repeat;
-  background-color: ${i.WHITE};
-  opacity: 0.5;
-`, j = r(n)`
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { memo as W, useState as O, useCallback as m } from "react";
+import r, { css as j } from "styled-components";
+import { useUIContext as H } from "../../ui/context/context.js";
+import i from "../../ui/layout/flex-view.js";
+import z from "../../ui/lottie-animation/lottie-animation.js";
+import F from "../../ui/separator/separator.js";
+import v from "../../ui/text/text.js";
+import { getTheme as K } from "../../ui/theme/get-theme.js";
+import { STUDENT_BADGE_STATUS as V, STUDENT_BADGE_TYPE as h, BADGE_TYPE_BADGE_ICON as k } from "../constants.js";
+const { colors: b } = K(), S = 20, X = r(i)`
   position: absolute;
   top: 0;
   right: 0;
-  background: ${i.ORANGE_3};
+  background: ${b.ORANGE_3};
   border-radius: 0px 8px;
   padding: 2px 8px;
   z-index: 1;
-`, z = r(n)`
+`, Z = r(i)`
   cursor: ${(e) => e.$isEarned ? "pointer" : "default"};
-`, D = r(n)`
+`, q = r(i)`
   position: relative;
   border-radius: 8px;
   overflow: hidden;
-`, F = r(n)`
+`, J = r(i)`
   position: relative;
   border-radius: 8px;
   overflow: hidden;
   background: ${({ $backgroundColor: e }) => e};
   opacity: ${({ $badgeEarned: e }) => e ? 1 : 0.5};
 
-  ${({ $notEarnedMysterBadge: e }) => e && T`
+  ${({ $notEarnedMysterBadge: e }) => e && j`
       mix-blend-mode: luminosity;
     `}
-`, U = r.img`
+`, Q = r.img`
   opacity: ${(e) => e.$mouseEntered ? 0 : 1};
-`, K = r(n)`
+`, ee = r(i)`
   position: absolute;
   bottom: 0;
-`, V = r(n)`
+`, te = r(i)`
   position: relative;
   overflow: hidden;
-`, X = r(n)`
+`, oe = r(i)`
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   transition: width 300ms ease-in-out;
-`, h = r(p)`
+`, A = r(v)`
   display: -webkit-box;
   -webkit-line-clamp: ${({ $numberOfLines: e }) => e};
   -webkit-box-orient: vertical;
   overflow: hidden;
-`, Z = (e) => {
-  const { is_recent: $, badgeWidth: t, maxBadgeNameLines: s = 1, image_url: b } = e, [c, g] = S(!1), f = m(() => {
-    g(!0);
-  }, []), x = m(() => {
-    g(!1);
-  }, []), {
-    badgeBackgroundColor: E,
-    badgeDescription: k,
-    badgeEarned: a,
-    badgeImage: w,
-    badgeName: B,
-    badgeProgress: y,
-    notEarnedMysterBadge: v,
-    onBadgeClick: R,
-    showLoader: A,
-    showProgress: C,
-    studentBadgeId: I,
-    studentBadgeRef: L,
-    animationUrl: l
-  } = O(e);
-  return /* @__PURE__ */ d(
-    z,
+`, ne = (e) => {
+  const {
+    is_recent: C,
+    badgeWidth: n,
+    animation_url: d,
+    maxBadgeNameLines: p = 1,
+    category: a,
+    current_count: E,
+    description: D,
+    image_url: $,
+    id: c,
+    invalidateRewardsHome: f,
+    name: N,
+    openModal: g,
+    state: I,
+    total_count: _
+  } = e, [B, w] = O(!1), { onEvent: l } = H(), t = I !== V.UNASSIGNED, x = E && _ ? E / _ * 100 : 0, M = a !== h.MYSTERY && !t && x > 0, y = t ? $ || k[a] : k[a], T = a === h.MYSTERY && !t, R = a === h.MYSTERY ? b.GREY_1 : b.WHITE, { badgeName: Y, badgeDescription: G } = T ? { badgeName: "????", badgeDescription: "----------------" } : { badgeName: N || "", badgeDescription: D || "" }, L = m(() => {
+    t && w(!0);
+  }, [t]), U = m(() => {
+    t && w(!1);
+  }, [t]), P = m(() => {
+    !t || !g || t && d && fetch(d).then((s) => s.json()).then((s) => {
+      g("student-badges", {
+        badges: [
+          {
+            ...e,
+            animationData: s || null
+          }
+        ],
+        invalidateRewardsHome: f
+      }), l("student_badge_clicked", {
+        studentBadgeId: c,
+        category: a,
+        badgeEarned: t
+      });
+    }).catch((s) => {
+      l("student_badge_animation_load_failed", {
+        studentBadgeId: c,
+        animationUrl: d,
+        error: s.message
+      });
+    });
+  }, [
+    t,
+    g,
+    d,
+    e,
+    c,
+    a,
+    l,
+    f
+  ]);
+  return /* @__PURE__ */ u(
+    Z,
     {
-      onClick: R,
-      ref: L,
-      $width: t,
-      $isEarned: a,
+      onClick: P,
+      $width: n,
+      $isEarned: t,
       children: [
-        /* @__PURE__ */ o(D, { children: A ? /* @__PURE__ */ o(Y, { $badgeWidth: t }) : /* @__PURE__ */ d(_, { children: [
-          /* @__PURE__ */ d(
-            F,
+        /* @__PURE__ */ u(q, { children: [
+          /* @__PURE__ */ u(
+            J,
             {
-              $backgroundColor: E,
-              $badgeEarned: a,
-              $notEarnedMysterBadge: v,
-              onMouseEnter: f,
-              onMouseLeave: x,
+              $backgroundColor: R,
+              $badgeEarned: t,
+              $notEarnedMysterBadge: T,
+              onMouseEnter: L,
+              onMouseLeave: U,
               children: [
-                $ && /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(p, { $renderAs: "cta2", children: "NEW" }) }),
-                a ? /* @__PURE__ */ o(
-                  U,
-                  {
-                    $mouseEntered: c,
-                    src: b,
-                    alt: "badge-placeholder",
-                    width: t,
-                    height: t
-                  }
-                ) : /* @__PURE__ */ o(
-                  "img",
+                C && /* @__PURE__ */ o(X, { children: /* @__PURE__ */ o(v, { $renderAs: "cta2", children: "NEW" }) }),
+                t ? /* @__PURE__ */ o(
+                  Q,
                   {
-                    src: w,
+                    $mouseEntered: B,
+                    src: $,
                     alt: "badge-placeholder",
-                    width: t,
-                    height: t
+                    width: n,
+                    height: n
                   }
-                ),
-                l && /* @__PURE__ */ o(
-                  n,
+                ) : /* @__PURE__ */ o("img", { src: y, alt: "badge-placeholder", width: n, height: n }),
+                d && t && /* @__PURE__ */ o(
+                  i,
                   {
-                    $width: t + u,
-                    $height: t + u,
+                    $width: n + S,
+                    $height: n + S,
                     $position: "absolute",
                     children: /* @__PURE__ */ o(
-                      G,
+                      z,
                       {
-                        src: l,
-                        width: t,
-                        height: t,
-                        settings: { autoplay: c, loop: !0 },
+                        src: d,
+                        width: n,
+                        height: n,
+                        settings: { autoplay: B, loop: !0 },
                         animateOnIntersect: !1
                       }
                     )
@@ -152,17 +152,17 @@ const { colors: i } = P(), u = 20, H = (e) => W`
               ]
             }
           ),
-          C && /* @__PURE__ */ o(K, { $width: t, children: /* @__PURE__ */ o(V, { $height: 4, $borderRadius: 2, $width: "100%", $background: "WHITE", children: /* @__PURE__ */ o(X, { $width: `${y}%`, $borderRadius: 2, $background: "BLACK" }) }) })
-        ] }) }),
-        /* @__PURE__ */ o(N, { height: 8 }),
-        /* @__PURE__ */ o(h, { $renderAs: "cta2", $numberOfLines: s, children: B }),
-        /* @__PURE__ */ o(h, { $renderAs: "body3", $numberOfLines: s + 1, children: k })
+          M && /* @__PURE__ */ o(ee, { $width: n, children: /* @__PURE__ */ o(te, { $height: 4, $borderRadius: 2, $width: "100%", $background: "WHITE", children: /* @__PURE__ */ o(oe, { $width: `${x}%`, $borderRadius: 2, $background: "BLACK" }) }) })
+        ] }),
+        /* @__PURE__ */ o(F, { height: 8 }),
+        /* @__PURE__ */ o(A, { $renderAs: "cta2", $numberOfLines: p, children: Y }),
+        /* @__PURE__ */ o(A, { $renderAs: "body3", $numberOfLines: p + 1, children: G })
       ]
     },
-    I
+    c
   );
-}, ae = M(Z);
+}, he = W(ne);
 export {
-  ae as default
+  he as default
 };
 //# sourceMappingURL=student-badge.js.map

package/dist/features/wins-dashboard/student-badges/student-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"student-badge.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badge.tsx"],"sourcesContent":["import React, { memo, useCallback, useState } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport useStudentBadgeHook from './hooks/use-student-badge-hook';\n\nconst { colors } = getTheme();\n\nconst EXTRA_BADGE_SIZE = 20;\n\nconst shimmer = (badgeWidth: number) => keyframes`\n  0% {\n    background-position: -${badgeWidth}px 0;\n  }\n  80%, 100% {\n    background-position: ${badgeWidth}px 0;\n  }\n`;\n\nconst BadgePlaceholder = styled.div<{ $badgeWidth: number }>`\n  display: flex;\n  width: ${({ $badgeWidth }) => $badgeWidth}px;\n  height: ${({ $badgeWidth }) => $badgeWidth}px;\n  background: linear-gradient(\n    92.42deg,\n    ${colors.GREY_1}40 1.94%,\n    ${colors.GREY_1} 48.8%,\n    ${colors.GREY_1}40 97.88%\n  );\n  background-size: 200% 100%;\n  animation-name: ${({ $badgeWidth }) => shimmer($badgeWidth)};\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n  background-repeat: no-repeat;\n  background-color: ${colors.WHITE};\n  opacity: 0.5;\n`;\n\nconst NewTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: ${colors.ORANGE_3};\n  border-radius: 0px 8px;\n  padding: 2px 8px;\n  z-index: 1;\n`;\n\ninterface StudentBadgeModalData {\n  badges: Array<{\n    animation_url?: string;\n    animationData?: object;\n    category: string;\n    current_count?: number;\n    description?: string;\n    id: string;\n    image_url?: string;\n    name?: string;\n    state?: string;\n    total_count?: number;\n  }>;\n  invalidateRewardsHome?: () => void;\n}\n\nexport interface StudentBadgeProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  id: string;\n  image_url?: string;\n  invalidateRewardsHome?: () => void;\n  is_recent?: boolean;\n  name?: string;\n  openModal?: (modalType: string, data: StudentBadgeModalData) => void;\n  state?: string;\n  total_count?: number;\n  badgeWidth: number;\n  maxBadgeNameLines: number;\n}\n\nconst Wrapper = styled(FlexView)<{ $isEarned: boolean }>`\n  cursor: ${props => (props.$isEarned ? 'pointer' : 'default')};\n`;\nconst StudentBadgeWrapper = styled(FlexView)`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\nconst BadgeImageContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeEarned: boolean;\n  $notEarnedMysterBadge: boolean;\n}>`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  background: ${({ $backgroundColor }) => $backgroundColor};\n  opacity: ${({ $badgeEarned }) => ($badgeEarned ? 1 : 0.5)};\n\n  ${({ $notEarnedMysterBadge }) =>\n    $notEarnedMysterBadge &&\n    css`\n      mix-blend-mode: luminosity;\n    `}\n`;\n\nconst BadgeImage = styled.img<{ $mouseEntered?: boolean }>`\n  opacity: ${props => (props.$mouseEntered ? 0 : 1)};\n`;\n\nconst ProgressContainer = styled(FlexView)`\n  position: absolute;\n  bottom: 0;\n`;\n\nconst Background = styled(FlexView)`\n  position: relative;\n  overflow: hidden;\n`;\n\nconst Progress = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  transition: width 300ms ease-in-out;\n`;\n\nconst BadgeText = styled(Text)<{ $numberOfLines: number }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ $numberOfLines }) => $numberOfLines};\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nconst StudentBadge: React.FC<StudentBadgeProps> = props => {\n  const { is_recent: isRecent, badgeWidth, maxBadgeNameLines = 1, image_url: imageUrl } = props;\n  const [mouseEntered, setMouseEntered] = useState(false);\n\n  const onBadgeMouseEnter = useCallback(() => {\n    setMouseEntered(true);\n  }, []);\n\n  const onBadgeMouseLeave = useCallback(() => {\n    setMouseEntered(false);\n  }, []);\n\n  const {\n    badgeBackgroundColor,\n    badgeDescription,\n    badgeEarned,\n    badgeImage,\n    badgeName,\n    badgeProgress,\n    notEarnedMysterBadge,\n    onBadgeClick,\n    showLoader,\n    showProgress,\n    studentBadgeId,\n    studentBadgeRef,\n    animationUrl,\n  } = useStudentBadgeHook(props);\n\n  return (\n    <Wrapper\n      onClick={onBadgeClick}\n      ref={studentBadgeRef}\n      $width={badgeWidth}\n      $isEarned={badgeEarned}\n      key={studentBadgeId}\n    >\n      <StudentBadgeWrapper>\n        {showLoader ? (\n          <BadgePlaceholder $badgeWidth={badgeWidth} />\n        ) : (\n          <>\n            <BadgeImageContainer\n              $backgroundColor={badgeBackgroundColor}\n              $badgeEarned={badgeEarned}\n              $notEarnedMysterBadge={notEarnedMysterBadge}\n              onMouseEnter={onBadgeMouseEnter}\n              onMouseLeave={onBadgeMouseLeave}\n            >\n              {isRecent && (\n                <NewTag>\n                  <Text $renderAs=\"cta2\">NEW</Text>\n                </NewTag>\n              )}\n              {badgeEarned ? (\n                <BadgeImage\n                  $mouseEntered={mouseEntered}\n                  src={imageUrl}\n                  alt=\"badge-placeholder\"\n                  width={badgeWidth}\n                  height={badgeWidth}\n                />\n              ) : (\n                <img\n                  src={badgeImage}\n                  alt=\"badge-placeholder\"\n                  width={badgeWidth}\n                  height={badgeWidth}\n                />\n              )}\n              {animationUrl && (\n                <FlexView\n                  $width={badgeWidth + EXTRA_BADGE_SIZE}\n                  $height={badgeWidth + EXTRA_BADGE_SIZE}\n                  $position=\"absolute\"\n                >\n                  <LottieAnimation\n                    src={animationUrl}\n                    width={badgeWidth}\n                    height={badgeWidth}\n                    settings={{ autoplay: mouseEntered, loop: true }}\n                    animateOnIntersect={false}\n                  />\n                </FlexView>\n              )}\n            </BadgeImageContainer>\n            {showProgress && (\n              <ProgressContainer $width={badgeWidth}>\n                <Background $height={4} $borderRadius={2} $width={'100%'} $background=\"WHITE\">\n                  <Progress $width={`${badgeProgress}%`} $borderRadius={2} $background=\"BLACK\" />\n                </Background>\n              </ProgressContainer>\n            )}\n          </>\n        )}\n      </StudentBadgeWrapper>\n      <Separator height={8} />\n      <BadgeText $renderAs=\"cta2\" $numberOfLines={maxBadgeNameLines}>\n        {badgeName}\n      </BadgeText>\n      <BadgeText $renderAs=\"body3\" $numberOfLines={maxBadgeNameLines + 1}>\n        {badgeDescription}\n      </BadgeText>\n    </Wrapper>\n  );\n};\n\nexport default memo(StudentBadge);\n"],"names":["colors","getTheme","EXTRA_BADGE_SIZE","shimmer","badgeWidth","keyframes","BadgePlaceholder","styled","$badgeWidth","NewTag","FlexView","Wrapper","props","StudentBadgeWrapper","BadgeImageContainer","$backgroundColor","$badgeEarned","$notEarnedMysterBadge","css","BadgeImage","ProgressContainer","Background","Progress","BadgeText","Text","$numberOfLines","StudentBadge","isRecent","maxBadgeNameLines","imageUrl","mouseEntered","setMouseEntered","useState","onBadgeMouseEnter","useCallback","onBadgeMouseLeave","badgeBackgroundColor","badgeDescription","badgeEarned","badgeImage","badgeName","badgeProgress","notEarnedMysterBadge","onBadgeClick","showLoader","showProgress","studentBadgeId","studentBadgeRef","animationUrl","useStudentBadgeHook","jsxs","jsx","Fragment","LottieAnimation","Separator","StudentBadge$1","memo"],"mappings":"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"}
+{"version":3,"file":"student-badge.js","sources":["../../../../src/features/wins-dashboard/student-badges/student-badge.tsx"],"sourcesContent":["import React, { memo, useCallback, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUIContext } from '../../ui/context/context';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport { BADGE_TYPE_BADGE_ICON, STUDENT_BADGE_STATUS, STUDENT_BADGE_TYPE } from '../constants';\n\nconst { colors } = getTheme();\n\nconst EXTRA_BADGE_SIZE = 20;\n\nconst NewTag = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: ${colors.ORANGE_3};\n  border-radius: 0px 8px;\n  padding: 2px 8px;\n  z-index: 1;\n`;\n\ninterface StudentBadgeModalData {\n  badges: Array<{\n    animation_url?: string;\n    animationData?: object;\n    category: string;\n    current_count?: number;\n    description?: string;\n    id: string;\n    image_url?: string;\n    name?: string;\n    state?: string;\n    total_count?: number;\n  }>;\n  invalidateRewardsHome?: () => void;\n}\n\nexport interface StudentBadgeProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  id: string;\n  image_url?: string;\n  invalidateRewardsHome?: () => void;\n  is_recent?: boolean;\n  name?: string;\n  openModal?: (modalType: string, data: StudentBadgeModalData) => void;\n  state?: string;\n  total_count?: number;\n  badgeWidth: number;\n  maxBadgeNameLines: number;\n}\n\nconst Wrapper = styled(FlexView)<{ $isEarned: boolean }>`\n  cursor: ${props => (props.$isEarned ? 'pointer' : 'default')};\n`;\nconst StudentBadgeWrapper = styled(FlexView)`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n`;\n\nconst BadgeImageContainer = styled(FlexView)<{\n  $backgroundColor: string;\n  $badgeEarned: boolean;\n  $notEarnedMysterBadge: boolean;\n}>`\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  background: ${({ $backgroundColor }) => $backgroundColor};\n  opacity: ${({ $badgeEarned }) => ($badgeEarned ? 1 : 0.5)};\n\n  ${({ $notEarnedMysterBadge }) =>\n    $notEarnedMysterBadge &&\n    css`\n      mix-blend-mode: luminosity;\n    `}\n`;\n\nconst BadgeImage = styled.img<{ $mouseEntered?: boolean }>`\n  opacity: ${props => (props.$mouseEntered ? 0 : 1)};\n`;\n\nconst ProgressContainer = styled(FlexView)`\n  position: absolute;\n  bottom: 0;\n`;\n\nconst Background = styled(FlexView)`\n  position: relative;\n  overflow: hidden;\n`;\n\nconst Progress = styled(FlexView)`\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  transition: width 300ms ease-in-out;\n`;\n\nconst BadgeText = styled(Text)<{ $numberOfLines: number }>`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ $numberOfLines }) => $numberOfLines};\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nconst StudentBadge: React.FC<StudentBadgeProps> = props => {\n  const {\n    is_recent: isRecent,\n    badgeWidth,\n    animation_url: animationUrl,\n    maxBadgeNameLines = 1,\n    category,\n    current_count: currentCount,\n    description,\n    image_url: imageUrl,\n    id: studentBadgeId,\n    invalidateRewardsHome,\n    name,\n    openModal,\n    state,\n    total_count: totalCount,\n  } = props;\n  const [mouseEntered, setMouseEntered] = useState(false);\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const badgeEarned = state !== STUDENT_BADGE_STATUS.UNASSIGNED;\n  const badgeProgress = currentCount && totalCount ? (currentCount / totalCount) * 100 : 0;\n  const showProgress = category !== STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned && badgeProgress > 0;\n  const badgeImage = badgeEarned\n    ? imageUrl || BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON]\n    : BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON];\n  const notEarnedMysterBadge = category === STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned;\n  const badgeBackgroundColor =\n    category === STUDENT_BADGE_TYPE.MYSTERY ? colors.GREY_1 : colors.WHITE;\n  const { badgeName, badgeDescription } = notEarnedMysterBadge\n    ? { badgeName: '????', badgeDescription: '----------------' }\n    : { badgeName: name || '', badgeDescription: description || '' };\n\n  const onBadgeMouseEnter = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(true);\n  }, [badgeEarned]);\n\n  const onBadgeMouseLeave = useCallback(() => {\n    if (!badgeEarned) {\n      return;\n    }\n    setMouseEntered(false);\n  }, [badgeEarned]);\n\n  const onBadgeClick = useCallback(() => {\n    if (!badgeEarned || !openModal) {\n      return;\n    }\n\n    if (badgeEarned && animationUrl) {\n      fetch(animationUrl)\n        .then(response => response.json())\n        .then(data => {\n          openModal('student-badges', {\n            badges: [\n              {\n                ...props,\n                animationData: data || null,\n              },\n            ],\n            invalidateRewardsHome,\n          });\n\n          trackEvent('student_badge_clicked', {\n            studentBadgeId,\n            category,\n            badgeEarned,\n          });\n        })\n        .catch(error => {\n          trackEvent('student_badge_animation_load_failed', {\n            studentBadgeId,\n            animationUrl,\n            error: error.message,\n          });\n        });\n    }\n  }, [\n    badgeEarned,\n    openModal,\n    animationUrl,\n    props,\n    studentBadgeId,\n    category,\n    trackEvent,\n    invalidateRewardsHome,\n  ]);\n\n  return (\n    <Wrapper\n      onClick={onBadgeClick}\n      $width={badgeWidth}\n      $isEarned={badgeEarned}\n      key={studentBadgeId}\n    >\n      <StudentBadgeWrapper>\n        <BadgeImageContainer\n          $backgroundColor={badgeBackgroundColor}\n          $badgeEarned={badgeEarned}\n          $notEarnedMysterBadge={notEarnedMysterBadge}\n          onMouseEnter={onBadgeMouseEnter}\n          onMouseLeave={onBadgeMouseLeave}\n        >\n          {isRecent && (\n            <NewTag>\n              <Text $renderAs=\"cta2\">NEW</Text>\n            </NewTag>\n          )}\n          {badgeEarned ? (\n            <BadgeImage\n              $mouseEntered={mouseEntered}\n              src={imageUrl}\n              alt=\"badge-placeholder\"\n              width={badgeWidth}\n              height={badgeWidth}\n            />\n          ) : (\n            <img src={badgeImage} alt=\"badge-placeholder\" width={badgeWidth} height={badgeWidth} />\n          )}\n          {animationUrl && badgeEarned && (\n            <FlexView\n              $width={badgeWidth + EXTRA_BADGE_SIZE}\n              $height={badgeWidth + EXTRA_BADGE_SIZE}\n              $position=\"absolute\"\n            >\n              <LottieAnimation\n                src={animationUrl}\n                width={badgeWidth}\n                height={badgeWidth}\n                settings={{ autoplay: mouseEntered, loop: true }}\n                animateOnIntersect={false}\n              />\n            </FlexView>\n          )}\n        </BadgeImageContainer>\n        {showProgress && (\n          <ProgressContainer $width={badgeWidth}>\n            <Background $height={4} $borderRadius={2} $width={'100%'} $background=\"WHITE\">\n              <Progress $width={`${badgeProgress}%`} $borderRadius={2} $background=\"BLACK\" />\n            </Background>\n          </ProgressContainer>\n        )}\n      </StudentBadgeWrapper>\n      <Separator height={8} />\n      <BadgeText $renderAs=\"cta2\" $numberOfLines={maxBadgeNameLines}>\n        {badgeName}\n      </BadgeText>\n      <BadgeText $renderAs=\"body3\" $numberOfLines={maxBadgeNameLines + 1}>\n        {badgeDescription}\n      </BadgeText>\n    </Wrapper>\n  );\n};\n\nexport default memo(StudentBadge);\n"],"names":["colors","getTheme","EXTRA_BADGE_SIZE","NewTag","styled","FlexView","Wrapper","props","StudentBadgeWrapper","BadgeImageContainer","$backgroundColor","$badgeEarned","$notEarnedMysterBadge","css","BadgeImage","ProgressContainer","Background","Progress","BadgeText","Text","$numberOfLines","StudentBadge","isRecent","badgeWidth","animationUrl","maxBadgeNameLines","category","currentCount","description","imageUrl","studentBadgeId","invalidateRewardsHome","name","openModal","state","totalCount","mouseEntered","setMouseEntered","useState","trackEvent","useUIContext","badgeEarned","STUDENT_BADGE_STATUS","badgeProgress","showProgress","STUDENT_BADGE_TYPE","badgeImage","BADGE_TYPE_BADGE_ICON","notEarnedMysterBadge","badgeBackgroundColor","badgeName","badgeDescription","onBadgeMouseEnter","useCallback","onBadgeMouseLeave","onBadgeClick","response","data","error","jsxs","jsx","LottieAnimation","Separator","StudentBadge$1","memo"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.2.24-as3",
+  "version": "3.2.24-as6",
   "type": "module",
   "files": [
     "dist"

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-hook.js

@@ -1,89 +0,0 @@
-import { useRef as E, useState as u, useEffect as w, useCallback as V } from "react";
-import { useUIContext as W } from "../../../ui/context/context.js";
-import { getTheme as q } from "../../../ui/theme/get-theme.js";
-import { STUDENT_BADGE_STATUS as z, STUDENT_BADGE_TYPE as b, BADGE_TYPE_BADGE_ICON as R } from "../../constants.js";
-const { colors: Y } = q();
-function Z(l) {
-  const {
-    animation_url: o,
-    category: t,
-    current_count: _,
-    description: p,
-    image_url: s,
-    id: a,
-    invalidateRewardsHome: S,
-    name: C,
-    openModal: g,
-    state: U,
-    total_count: D
-  } = l || {}, { onEvent: i } = W(), T = E(null), c = E(null), [r, k] = u(null), [v, G] = u(!1), e = U !== z.UNASSIGNED, [L, m] = u(e), B = _ && D ? _ / D * 100 : 0, M = t !== b.MYSTERY && !e && B > 0, d = E(null), [f, O] = u();
-  w(() => {
-    if (c.current)
-      return d.current = new window.IntersectionObserver(
-        ([n]) => {
-          O(n);
-        },
-        {
-          threshold: 0.5
-        }
-      ), d.current.observe(c.current), () => {
-        d.current && d.current.disconnect();
-      };
-  }, [c]);
-  const P = (f == null ? void 0 : f.isIntersecting) ?? !1, y = e ? s || R[t] : R[t], h = t === b.MYSTERY && !e, H = t === b.MYSTERY ? Y.GREY_1 : Y.WHITE, { badgeName: x, badgeDescription: J } = h ? { badgeName: "????", badgeDescription: "----------------" } : { badgeName: C || "", badgeDescription: p || "" }, A = e && r, I = !v && e && P && !r && o, N = e && s;
-  w(() => {
-    N && (T.current = new Image(), T.current.src = s, m(!1)), I && fetch(o).then((n) => n.json()).then((n) => {
-      k(JSON.stringify(n)), m(!1);
-    }).catch((n) => {
-      G(!0), m(!1), i("student_badge_animation_load_failed", {
-        studentBadgeId: a,
-        animationUrl: o,
-        error: n.message
-      });
-    });
-  }, [o, I, N, s, a, i]);
-  const j = V(() => {
-    !A || !g || (g("student-badges", {
-      badges: [
-        {
-          ...l,
-          animationData: r ? JSON.parse(r) : null
-        }
-      ],
-      invalidateRewardsHome: S
-    }), i("student_badge_clicked", {
-      studentBadgeId: a,
-      category: t,
-      badgeEarned: e
-    }));
-  }, [
-    A,
-    g,
-    l,
-    r,
-    S,
-    i,
-    a,
-    t,
-    e
-  ]);
-  return {
-    animationUrl: o,
-    badgeBackgroundColor: H,
-    badgeDescription: J,
-    badgeEarned: e,
-    badgeImage: y,
-    badgeName: x,
-    badgeProgress: B,
-    notEarnedMysterBadge: h,
-    onBadgeClick: j,
-    showLoader: L,
-    showProgress: M,
-    studentBadgeId: a,
-    studentBadgeRef: c
-  };
-}
-export {
-  Z as default
-};
-//# sourceMappingURL=use-student-badge-hook.js.map

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-hook.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-student-badge-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-hook.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useUIContext } from '../../../ui/context/context';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { BADGE_TYPE_BADGE_ICON, STUDENT_BADGE_STATUS, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst { colors } = getTheme();\n\ninterface StudentBadgeModalData {\n  badges: Array<{\n    animation_url?: string;\n    animationData?: object;\n    category: string;\n    current_count?: number;\n    description?: string;\n    id: string;\n    image_url?: string;\n    name?: string;\n    state?: string;\n    total_count?: number;\n  }>;\n  invalidateRewardsHome?: () => void;\n}\n\ninterface UseStudentBadgeHookProps {\n  animation_url?: string;\n  category: string;\n  current_count?: number;\n  description?: string;\n  image_url?: string;\n  id: string;\n  invalidateRewardsHome?: () => void;\n  is_recent?: boolean;\n  name?: string;\n  openModal?: (modalType: string, data: StudentBadgeModalData) => void;\n  state?: string;\n  total_count?: number;\n}\n\nexport default function useStudentBadgeHook(props: UseStudentBadgeHookProps) {\n  const {\n    animation_url: animationUrl,\n    category,\n    current_count: currentCount,\n    description,\n    image_url: imageUrl,\n    id: studentBadgeId,\n    invalidateRewardsHome,\n    name,\n    openModal,\n    state,\n    total_count: totalCount,\n  } = props || {};\n\n  const { onEvent: trackEvent } = useUIContext();\n  const imageRef = useRef<HTMLImageElement | null>(null);\n  const studentBadgeRef = useRef<HTMLDivElement | null>(null);\n  const [lottieAnimationData, setLottieAnimationData] = useState<string | null>(null);\n  const [lottieLoadingError, setLottieLoadingError] = useState(false);\n\n  const badgeEarned = state !== STUDENT_BADGE_STATUS.UNASSIGNED;\n  const [showLoader, setShowLoader] = useState(badgeEarned);\n  const badgeProgress = currentCount && totalCount ? (currentCount / totalCount) * 100 : 0;\n  const showProgress = category !== STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned && badgeProgress > 0;\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const [studentBadgeEntry, setStudentBadgeEntry] = useState<\n    IntersectionObserverEntry | undefined\n  >();\n\n  useEffect(() => {\n    if (!studentBadgeRef.current) return;\n\n    observerRef.current = new window.IntersectionObserver(\n      ([entry]) => {\n        setStudentBadgeEntry(entry);\n      },\n      {\n        threshold: 0.5,\n      },\n    );\n\n    observerRef.current.observe(studentBadgeRef.current);\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n      }\n    };\n  }, [studentBadgeRef]);\n\n  const studentBadgeVisible = studentBadgeEntry?.isIntersecting ?? false;\n\n  const badgeImage = badgeEarned\n    ? imageUrl || BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON]\n    : BADGE_TYPE_BADGE_ICON[category as keyof typeof BADGE_TYPE_BADGE_ICON];\n\n  const notEarnedMysterBadge = category === STUDENT_BADGE_TYPE.MYSTERY && !badgeEarned;\n  const badgeBackgroundColor =\n    category === STUDENT_BADGE_TYPE.MYSTERY ? colors.GREY_1 : colors.WHITE;\n\n  const { badgeName, badgeDescription } = notEarnedMysterBadge\n    ? { badgeName: '????', badgeDescription: '----------------' }\n    : { badgeName: name || '', badgeDescription: description || '' };\n\n  const showAnimation = badgeEarned && lottieAnimationData;\n  const loadAnimationData =\n    !lottieLoadingError &&\n    badgeEarned &&\n    studentBadgeVisible &&\n    !lottieAnimationData &&\n    animationUrl;\n  const loadBadgeImage = badgeEarned && imageUrl;\n\n  useEffect(() => {\n    if (loadBadgeImage) {\n      imageRef.current = new Image();\n      imageRef.current.src = imageUrl;\n      setShowLoader(false);\n    }\n\n    if (loadAnimationData) {\n      fetch(animationUrl)\n        .then(response => response.json())\n        .then(data => {\n          setLottieAnimationData(JSON.stringify(data));\n          setShowLoader(false);\n        })\n        .catch(error => {\n          setLottieLoadingError(true);\n          setShowLoader(false);\n          trackEvent('student_badge_animation_load_failed', {\n            studentBadgeId,\n            animationUrl,\n            error: error.message,\n          });\n        });\n    }\n  }, [animationUrl, loadAnimationData, loadBadgeImage, imageUrl, studentBadgeId, trackEvent]);\n\n  const onBadgeClick = useCallback(() => {\n    if (!showAnimation || !openModal) {\n      return;\n    }\n\n    openModal('student-badges', {\n      badges: [\n        {\n          ...props,\n          animationData: lottieAnimationData ? JSON.parse(lottieAnimationData) : null,\n        },\n      ],\n      invalidateRewardsHome,\n    });\n\n    trackEvent('student_badge_clicked', {\n      studentBadgeId,\n      category,\n      badgeEarned,\n    });\n  }, [\n    showAnimation,\n    openModal,\n    props,\n    lottieAnimationData,\n    invalidateRewardsHome,\n    trackEvent,\n    studentBadgeId,\n    category,\n    badgeEarned,\n  ]);\n\n  return {\n    animationUrl,\n    badgeBackgroundColor,\n    badgeDescription,\n    badgeEarned,\n    badgeImage,\n    badgeName,\n    badgeProgress,\n    notEarnedMysterBadge,\n    onBadgeClick,\n    showLoader,\n    showProgress,\n    studentBadgeId,\n    studentBadgeRef,\n  };\n}\n"],"names":["colors","getTheme","useStudentBadgeHook","props","animationUrl","category","currentCount","description","imageUrl","studentBadgeId","invalidateRewardsHome","name","openModal","state","totalCount","trackEvent","useUIContext","imageRef","useRef","studentBadgeRef","lottieAnimationData","setLottieAnimationData","useState","lottieLoadingError","setLottieLoadingError","badgeEarned","STUDENT_BADGE_STATUS","showLoader","setShowLoader","badgeProgress","showProgress","STUDENT_BADGE_TYPE","observerRef","studentBadgeEntry","setStudentBadgeEntry","useEffect","entry","studentBadgeVisible","badgeImage","BADGE_TYPE_BADGE_ICON","notEarnedMysterBadge","badgeBackgroundColor","badgeName","badgeDescription","showAnimation","loadAnimationData","loadBadgeImage","response","data","error","onBadgeClick","useCallback"],"mappings":"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"}