@cuemath/leap 3.2.22-m → 3.2.23-as1

package/dist/features/ui/inputs/base-select-input/base-select-input.js

@@ -1,114 +1,124 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { useMemo as W, useRef as T, useCallback as d } from "react";
-import X from "../../../../assets/line-icons/icons/cross.js";
-import H from "../../hooks/use-context-menu-click-handler.js";
-import q from "../base-input/base-input.js";
-import { Input as G } from "../text-input/text-input-styled.js";
-import { Container as J, OptionsContainer as K, OptionsWrapper as N, StyledChevronDownIcon as P, StyledDownIcon as Q } from "./base-select-input-styled.js";
-import U from "./select-option/select-option.js";
-import Y from "./select-section/select-section.js";
-const ae = (y) => {
+import { jsxs as V, jsx as t } from "react/jsx-runtime";
+import { useMemo as G, useRef as A, useCallback as d } from "react";
+import J from "../../../../assets/line-icons/icons/cross.js";
+import K from "../../hooks/use-context-menu-click-handler.js";
+import N from "../base-input/base-input.js";
+import { Input as P } from "../text-input/text-input-styled.js";
+import { Container as Q, OptionsContainer as U, OptionsWrapper as Y, StyledChevronDownIcon as Z, StyledDownIcon as _ } from "./base-select-input-styled.js";
+import ee from "./select-option/select-option.js";
+import ne from "./select-section/select-section.js";
+const he = (E) => {
   const {
-    label: C,
-    value: r,
+    label: b,
+    value: i,
     options: u,
     searchable: n = !1,
     searchText: g,
-    onCloseWithoutSelection: V,
-    onSearchTextChange: o,
-    onChange: b,
+    onCloseWithoutSelection: L,
+    onSearchTextChange: r,
+    onChange: v,
     renderAs: h,
-    width: A,
-    widthX: E,
+    width: R,
+    widthX: j,
     disabled: p,
-    willShowMessage: R,
-    mandatory: j,
-    size: v = "regular",
+    willShowMessage: z,
+    mandatory: B,
+    size: w = "regular",
     shape: m,
     theme: f = "light",
-    isTransparent: w = !1,
+    isTransparent: S = !1,
     renderOptionsAs: $ = "list",
-    errorMessage: z
-  } = y, i = $ === "section-list" && u, s = $ === "list" && u, I = W(() => {
-    var e, c;
+    errorMessage: D,
+    inputLabelOverrides: C
+  } = E, s = $ === "section-list" && u, l = $ === "list" && u, I = G(() => {
+    var e;
     if (n) return g;
-    if (i)
-      return (e = i.flatMap((l) => l.data).find(({ id: l }) => l === r)) == null ? void 0 : e.label;
-    if (s) return (c = s.find((l) => l.id === r)) == null ? void 0 : c.label;
-  }, [n, g, i, s, r]), S = T(null), x = T(null), { menuVisible: a, onMenuClick: B, hideMenu: M } = H(
-    S,
+    if (s) {
+      let o, a;
+      for (const T of s) {
+        const y = T.data.find(({ id: q }) => q === i);
+        if (y) {
+          o = T, a = y;
+          break;
+        }
+      }
+      return o && C ? C(o, a) : (a == null ? void 0 : a.label) || "";
+    }
+    if (l) return (e = l.find((o) => o.id === i)) == null ? void 0 : e.label;
+  }, [n, g, s, l, C, i]), k = A(null), x = A(null), { menuVisible: c, onMenuClick: F, hideMenu: O } = K(
+    k,
     void 0,
     !n,
-    V,
+    L,
     p
-  ), D = d(
+  ), W = d(
     (e) => {
-      n && o && o(e.target.value);
+      n && r && r(e.target.value);
     },
-    [o, n]
-  ), O = d(
-    (e, c) => {
-      M(), b(e, c);
+    [r, n]
+  ), M = d(
+    (e, o) => {
+      O(), v(e, o);
     },
-    [M, b]
-  ), F = d((e) => {
+    [O, v]
+  ), X = d((e) => {
     e.target.select(), setTimeout(() => {
       e.target.scrollIntoView({
         behavior: "smooth"
       });
     }, 300);
-  }, []), L = d(() => {
+  }, []), H = d(() => {
     var e;
-    o && (o(""), (e = x.current) == null || e.focus());
-  }, [o]);
-  return /* @__PURE__ */ k(J, { ref: S, $width: A, $widthX: E, onClick: B, children: [
+    r && (r(""), (e = x.current) == null || e.focus());
+  }, [r]);
+  return /* @__PURE__ */ V(Q, { ref: k, $width: R, $widthX: j, onClick: F, children: [
     /* @__PURE__ */ t(
-      q,
+      N,
       {
         renderAs: h,
-        label: C,
+        label: b,
         stickyLabel: !0,
         disabled: p,
-        willShowMessage: R,
-        size: v,
-        mandatory: j,
+        willShowMessage: z,
+        size: w,
+        mandatory: B,
         shape: m,
-        isTransparent: w,
+        isTransparent: S,
         inputElement: /* @__PURE__ */ t(
-          G,
+          P,
           {
             ref: x,
             $renderAs: h,
-            $size: v,
-            placeholder: I ? "" : C,
+            $size: w,
+            placeholder: I ? "" : b,
             disabled: p,
             readOnly: !n,
             value: I ?? "",
-            onFocus: n ? F : void 0,
-            onChange: n ? D : void 0,
-            $isTransparent: w
+            onFocus: n ? X : void 0,
+            onChange: n ? W : void 0,
+            $isTransparent: S
           }
         ),
-        siblingElement: n && a ? /* @__PURE__ */ t(X, { onClick: L }) : m === "curved" || m === "borderLess" ? /* @__PURE__ */ t(P, { $menuVisible: a, pointerEvents: "none" }) : /* @__PURE__ */ t(Q, { $menuVisible: a, pointerEvents: "none" }),
-        errorMessage: z
+        siblingElement: n && c ? /* @__PURE__ */ t(J, { onClick: H }) : m === "curved" || m === "borderLess" ? /* @__PURE__ */ t(Z, { $menuVisible: c, pointerEvents: "none" }) : /* @__PURE__ */ t(_, { $menuVisible: c, pointerEvents: "none" }),
+        errorMessage: D
       }
     ),
-    u.length > 0 && /* @__PURE__ */ t(K, { $visible: a, children: /* @__PURE__ */ k(N, { $renderAs: h, $theme: f, children: [
-      i && /* @__PURE__ */ t(
-        Y,
+    u.length > 0 && /* @__PURE__ */ t(U, { $visible: c, children: /* @__PURE__ */ V(Y, { $renderAs: h, $theme: f, children: [
+      s && /* @__PURE__ */ t(
+        ne,
         {
-          sectionOptions: i,
+          sectionOptions: s,
           theme: f,
-          value: r,
-          onChange: O
+          value: i,
+          onChange: M
         }
       ),
-      s && s.map((e) => /* @__PURE__ */ t(
-        U,
+      l && l.map((e) => /* @__PURE__ */ t(
+        ee,
         {
           option: e,
-          selected: e.id === r,
-          onChange: O,
+          selected: e.id === i,
+          onChange: M,
           theme: f
         },
         e.id
@@ -117,6 +127,6 @@ const ae = (y) => {
   ] });
 };
 export {
-  ae as default
+  he as default
 };
 //# sourceMappingURL=base-select-input.js.map

package/dist/features/ui/inputs/base-select-input/base-select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n  props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n  const {\n    label,\n    value,\n    options,\n    searchable = false,\n    searchText,\n    onCloseWithoutSelection,\n    onSearchTextChange,\n    onChange,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    mandatory,\n    size = 'regular',\n    shape,\n    theme = 'light',\n    isTransparent = false,\n    renderOptionsAs = 'list',\n    errorMessage,\n  } = props;\n\n  const sectionOptions =\n    renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n  const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n  const inputValue = useMemo(() => {\n    if (searchable) return searchText;\n\n    if (sectionOptions) {\n      return sectionOptions.flatMap(section => section.data).find(({ id }) => id === value)\n        ?.label as string;\n    }\n\n    if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n  }, [searchable, searchText, sectionOptions, selectOptions, value]);\n\n  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n  const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n    containerRef,\n    undefined,\n    !searchable,\n    onCloseWithoutSelection,\n    disabled,\n  );\n\n  const handleTextChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (searchable && onSearchTextChange) {\n        onSearchTextChange(e.target.value);\n      }\n    },\n    [onSearchTextChange, searchable],\n  );\n\n  const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      hideMenu();\n      onChange(id, option);\n    },\n    [hideMenu, onChange],\n  );\n\n  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    setTimeout(() => {\n      e.target.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 300);\n  }, []);\n\n  const handleClear = useCallback(() => {\n    if (onSearchTextChange) {\n      onSearchTextChange('');\n      inputRef.current?.focus();\n    }\n  }, [onSearchTextChange]);\n\n  const downIcon =\n    shape === 'curved' || shape === 'borderLess' ? (\n      <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    ) : (\n      <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    );\n\n  return (\n    <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={true}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={size}\n        mandatory={mandatory}\n        shape={shape}\n        isTransparent={isTransparent}\n        inputElement={\n          <Input\n            ref={inputRef}\n            $renderAs={renderAs}\n            $size={size}\n            placeholder={inputValue ? '' : label}\n            disabled={disabled}\n            readOnly={!searchable}\n            value={inputValue ?? ''}\n            onFocus={searchable ? handleFocus : undefined}\n            onChange={searchable ? handleTextChange : undefined}\n            $isTransparent={isTransparent}\n          />\n        }\n        siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n        errorMessage={errorMessage}\n      />\n\n      {options.length > 0 && (\n        <Styled.OptionsContainer $visible={menuVisible}>\n          <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n            {sectionOptions && (\n              <SelectSection<IDType>\n                sectionOptions={sectionOptions}\n                theme={theme}\n                value={value}\n                onChange={handleChange}\n              />\n            )}\n\n            {selectOptions &&\n              selectOptions.map(option => (\n                <SelectOption<IDType>\n                  key={option.id}\n                  option={option}\n                  selected={option.id === value}\n                  onChange={handleChange}\n                  theme={theme}\n                />\n              ))}\n          </Styled.OptionsWrapper>\n        </Styled.OptionsContainer>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","sectionOptions","selectOptions","inputValue","useMemo","_a","section","id","_b","option","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}
+{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n  props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n  const {\n    label,\n    value,\n    options,\n    searchable = false,\n    searchText,\n    onCloseWithoutSelection,\n    onSearchTextChange,\n    onChange,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    mandatory,\n    size = 'regular',\n    shape,\n    theme = 'light',\n    isTransparent = false,\n    renderOptionsAs = 'list',\n    errorMessage,\n    inputLabelOverrides,\n  } = props;\n\n  const sectionOptions =\n    renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n  const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n  const inputValue = useMemo(() => {\n    if (searchable) return searchText;\n\n    if (sectionOptions) {\n      let foundSection, foundOption;\n\n      for (const section of sectionOptions) {\n        const option = section.data.find(({ id }) => id === value);\n\n        if (option) {\n          foundSection = section;\n          foundOption = option;\n\n          break;\n        }\n      }\n\n      if (foundSection && inputLabelOverrides)\n        return inputLabelOverrides(foundSection, foundOption);\n\n      return foundOption?.label || '';\n    }\n\n    if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n  }, [searchable, searchText, sectionOptions, selectOptions, inputLabelOverrides, value]);\n\n  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n  const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n    containerRef,\n    undefined,\n    !searchable,\n    onCloseWithoutSelection,\n    disabled,\n  );\n\n  const handleTextChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (searchable && onSearchTextChange) {\n        onSearchTextChange(e.target.value);\n      }\n    },\n    [onSearchTextChange, searchable],\n  );\n\n  const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      hideMenu();\n      onChange(id, option);\n    },\n    [hideMenu, onChange],\n  );\n\n  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    setTimeout(() => {\n      e.target.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 300);\n  }, []);\n\n  const handleClear = useCallback(() => {\n    if (onSearchTextChange) {\n      onSearchTextChange('');\n      inputRef.current?.focus();\n    }\n  }, [onSearchTextChange]);\n\n  const downIcon =\n    shape === 'curved' || shape === 'borderLess' ? (\n      <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    ) : (\n      <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    );\n\n  return (\n    <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={true}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={size}\n        mandatory={mandatory}\n        shape={shape}\n        isTransparent={isTransparent}\n        inputElement={\n          <Input\n            ref={inputRef}\n            $renderAs={renderAs}\n            $size={size}\n            placeholder={inputValue ? '' : label}\n            disabled={disabled}\n            readOnly={!searchable}\n            value={inputValue ?? ''}\n            onFocus={searchable ? handleFocus : undefined}\n            onChange={searchable ? handleTextChange : undefined}\n            $isTransparent={isTransparent}\n          />\n        }\n        siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n        errorMessage={errorMessage}\n      />\n\n      {options.length > 0 && (\n        <Styled.OptionsContainer $visible={menuVisible}>\n          <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n            {sectionOptions && (\n              <SelectSection<IDType>\n                sectionOptions={sectionOptions}\n                theme={theme}\n                value={value}\n                onChange={handleChange}\n              />\n            )}\n\n            {selectOptions &&\n              selectOptions.map(option => (\n                <SelectOption<IDType>\n                  key={option.id}\n                  option={option}\n                  selected={option.id === value}\n                  onChange={handleChange}\n                  theme={theme}\n                />\n              ))}\n          </Styled.OptionsWrapper>\n        </Styled.OptionsContainer>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","inputLabelOverrides","sectionOptions","selectOptions","inputValue","useMemo","foundSection","foundOption","section","option","id","_a","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}

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

@@ -0,0 +1,108 @@
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import h, { css as i } from "styled-components";
+import b from "../../ui/layout/flex-view.js";
+import l from "../../ui/separator/separator.js";
+import { StickerMap as A, MATH_REWARDS as k, INSTRUCTION_REWARDS as R, SCREEN_SIZES as m } from "../constants.js";
+import T from "./belts.js";
+import p from "./reward-elements.js";
+const D = h(b)`
+  justify-content: space-between;
+  margin: 110px 120px;
+  margin-bottom: 48px;
+  ${({ $containerStyle: t }) => t}
+
+  ${({ $renderOnTeacher: t }) => t && i`
+      margin: 50px auto;
+      padding: 0 16px;
+    `}
+`, _ = (t) => {
+  if (!(t && Array.isArray(t) && t.length > 0))
+    return { elements: [] };
+  const e = {
+    elements: []
+  };
+  return t.forEach((n) => {
+    const { aggregate_for: r, aggregates: s } = n || {}, { name: o } = r || {};
+    o && [...k, ...R].includes(o) && e.elements.push({ name: o, count: s || 0 });
+  }), e;
+}, C = (t) => {
+  if (!(t && Array.isArray(t) && t.length > 0))
+    return { stickers: [] };
+  const e = {};
+  return t.forEach((n) => {
+    const { badge_id: r, name: s } = n;
+    r && s && (e[r] === void 0 ? e[r] = { name: s, count: 1 } : e[r] = { name: s, count: e[r].count + 1 });
+  }), { stickers: Object.values(e) };
+}, $ = (t) => t >= m.LAPTOPL ? {
+  containerStyle: i`
+        margin: 110px auto;
+        margin-bottom: 48px;
+        max-width: 1040px;
+        width: 100%;
+      `
+} : t < m.TABLET ? {
+  containerStyle: i`
+        margin: 110px 40px;
+        margin-bottom: 48px;
+        flex-direction: column;
+        width: 100%;
+      `
+} : t < m.LAPTOP ? {
+  containerStyle: i`
+        max-width: 784px;
+        width: 100%;
+        margin: 100px auto;
+        flex-direction: column;
+      `
+} : {
+  containerStyle: i`
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin: 110px 120px;
+      margin-bottom: 48px;
+    `
+}, j = ({
+  curriculumHomeData: t,
+  rewardHomeData: c,
+  programStream: e = "MATH",
+  currentScreenWidth: n,
+  renderOnTeacher: r = !1
+}) => {
+  const { data: s } = t || {}, { curriculum_map: o } = s || {}, { belts: u, goals: x } = o || {}, { data: g } = c || {}, { user_rewards: d, user_stickers: f } = g || {}, { elements: w } = _(d || []), { stickers: E } = C(f || []), { containerStyle: S } = $(n) || {};
+  return /* @__PURE__ */ y(
+    D,
+    {
+      $flexDirection: "row",
+      $justifyContent: "space-between",
+      $containerStyle: S,
+      $renderOnTeacher: r,
+      children: [
+        /* @__PURE__ */ a(T, { beltStats: u, goalStats: x, currentScreenWidth: n }),
+        /* @__PURE__ */ a(l, { width: 60, height: 30 }),
+        /* @__PURE__ */ a(
+          p,
+          {
+            elements: w,
+            programStream: e,
+            currentScreenWidth: n
+          }
+        ),
+        /* @__PURE__ */ a(l, { width: 60, height: 30 }),
+        /* @__PURE__ */ a(
+          p,
+          {
+            elements: E,
+            isSticker: !0,
+            currentScreenWidth: n,
+            lotties: A
+          }
+        )
+      ]
+    }
+  );
+}, N = j;
+export {
+  N as default
+};
+//# sourceMappingURL=belts-elements-stickers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"belts-elements-stickers.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts-elements-stickers.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport { INSTRUCTION_REWARDS, MATH_REWARDS, SCREEN_SIZES, StickerMap } from '../constants';\nimport Belts from './belts';\nimport RewardElements from './reward-elements';\n\ninterface WrapperProps {\n  $containerStyle?: ReturnType<typeof css>;\n  $renderOnTeacher?: boolean;\n}\n\nconst Wrapper = styled(FlexView)<WrapperProps>`\n  justify-content: space-between;\n  margin: 110px 120px;\n  margin-bottom: 48px;\n  ${({ $containerStyle }) => $containerStyle}\n\n  ${({ $renderOnTeacher }) =>\n    $renderOnTeacher &&\n    css`\n      margin: 50px auto;\n      padding: 0 16px;\n    `}\n`;\n\ninterface RewardElement {\n  aggregate_for?: { name?: string };\n  aggregates?: number;\n}\n\ninterface StickerElement {\n  badge_id?: string;\n  name?: string;\n}\n\nconst getRewardElements = (\n  elements: RewardElement[],\n): { elements: Array<{ name: string; count: number }> } => {\n  const isElementsExist = elements && Array.isArray(elements) && elements.length > 0;\n\n  if (!isElementsExist) {\n    return { elements: [] };\n  }\n\n  const elementsData = {\n    elements: [] as Array<{ name: string; count: number }>,\n  };\n\n  elements.forEach(item => {\n    const { aggregate_for: rewardData, aggregates: totalCount } = item || {};\n    const { name } = rewardData || {};\n\n    if (name && [...MATH_REWARDS, ...INSTRUCTION_REWARDS].includes(name)) {\n      elementsData.elements.push({ name, count: totalCount || 0 });\n    }\n  });\n\n  return elementsData;\n};\n\nconst getRewardStickers = (\n  stickers: StickerElement[],\n): { stickers: Array<{ name: string; count: number }> } => {\n  const isStickersExist = stickers && Array.isArray(stickers) && stickers.length > 0;\n\n  if (!isStickersExist) {\n    return { stickers: [] };\n  }\n\n  const stickersCount: Record<string, { name: string; count: number }> = {};\n\n  stickers.forEach(item => {\n    const { badge_id: badgeId, name } = item;\n\n    if (badgeId && name) {\n      if (stickersCount[badgeId] === undefined) {\n        stickersCount[badgeId] = { name, count: 1 };\n      } else {\n        stickersCount[badgeId] = { name, count: stickersCount[badgeId].count + 1 };\n      }\n    }\n  });\n\n  return { stickers: Object.values(stickersCount) };\n};\n\nconst getBadgeContainerConfig = (currentScreenWidth: number) => {\n  if (currentScreenWidth >= SCREEN_SIZES.LAPTOPL) {\n    return {\n      containerStyle: css`\n        margin: 110px auto;\n        margin-bottom: 48px;\n        max-width: 1040px;\n        width: 100%;\n      `,\n    };\n  }\n\n  if (currentScreenWidth < SCREEN_SIZES.TABLET) {\n    return {\n      containerStyle: css`\n        margin: 110px 40px;\n        margin-bottom: 48px;\n        flex-direction: column;\n        width: 100%;\n      `,\n    };\n  }\n\n  if (currentScreenWidth < SCREEN_SIZES.LAPTOP) {\n    return {\n      containerStyle: css`\n        max-width: 784px;\n        width: 100%;\n        margin: 100px auto;\n        flex-direction: column;\n      `,\n    };\n  }\n\n  return {\n    containerStyle: css`\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      margin: 110px 120px;\n      margin-bottom: 48px;\n    `,\n  };\n};\n\n// Types for component props\ninterface CurriculumMap {\n  belts?: {\n    current_belt_type?: string;\n    goals_required?: number;\n  };\n  goals?: {\n    completed_goals: number;\n    total_goals: number;\n  };\n}\n\ninterface CurriculumHomeData {\n  data?: {\n    curriculum_map?: CurriculumMap;\n  };\n}\n\ninterface RewardHomeData {\n  data?: {\n    user_rewards?: RewardElement[];\n    user_stickers?: StickerElement[];\n  };\n}\n\ninterface BeltsElementsStickersProps {\n  curriculumHomeData?: CurriculumHomeData;\n  rewardHomeData?: RewardHomeData;\n  programStream?: string;\n  currentScreenWidth: number;\n  renderOnTeacher?: boolean;\n}\n\nconst BeltsElementsStickers: React.FC<BeltsElementsStickersProps> = ({\n  curriculumHomeData,\n  rewardHomeData,\n  programStream = 'MATH',\n  currentScreenWidth,\n  renderOnTeacher = false,\n}) => {\n  const { data: curriculumData } = curriculumHomeData || {};\n  const { curriculum_map: curriculumMap } = curriculumData || {};\n  const { belts: beltStats, goals: goalStats } = curriculumMap || {};\n  const { data: rewardHome } = rewardHomeData || {};\n  const { user_rewards: rewardElementsData, user_stickers: rewardStickersData } = rewardHome || {};\n  const { elements } = getRewardElements(rewardElementsData || []);\n  const { stickers } = getRewardStickers(rewardStickersData || []);\n  const { containerStyle } = getBadgeContainerConfig(currentScreenWidth) || {};\n\n  return (\n    <Wrapper\n      $flexDirection=\"row\"\n      $justifyContent=\"space-between\"\n      $containerStyle={containerStyle}\n      $renderOnTeacher={renderOnTeacher}\n    >\n      <Belts beltStats={beltStats} goalStats={goalStats} currentScreenWidth={currentScreenWidth} />\n      <Separator width={60} height={30} />\n      <RewardElements\n        elements={elements}\n        programStream={programStream}\n        currentScreenWidth={currentScreenWidth}\n      />\n      <Separator width={60} height={30} />\n      <RewardElements\n        elements={stickers}\n        isSticker\n        currentScreenWidth={currentScreenWidth}\n        lotties={StickerMap}\n      />\n    </Wrapper>\n  );\n};\n\nexport default BeltsElementsStickers;\n"],"names":["Wrapper","styled","FlexView","$containerStyle","$renderOnTeacher","css","getRewardElements","elements","elementsData","item","rewardData","totalCount","name","MATH_REWARDS","INSTRUCTION_REWARDS","getRewardStickers","stickers","stickersCount","badgeId","getBadgeContainerConfig","currentScreenWidth","SCREEN_SIZES","BeltsElementsStickers","curriculumHomeData","rewardHomeData","programStream","renderOnTeacher","curriculumData","curriculumMap","beltStats","goalStats","rewardHome","rewardElementsData","rewardStickersData","containerStyle","jsxs","jsx","Belts","Separator","RewardElements","StickerMap","BeltsElementsStickers$1"],"mappings":"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"}

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

@@ -0,0 +1,94 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import l, { css as c } from "styled-components";
+import w from "../../ui/arrow-tooltip/arrow-tooltip.js";
+import g from "../../ui/layout/flex-view.js";
+import h from "../../ui/separator/separator.js";
+import m from "../../ui/text/text.js";
+import { SCREEN_SIZES as p, getBeltIcon as x } from "../constants.js";
+import E from "./progress-bar-horizontal.js";
+const u = "Black", y = l.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      width: 80%;
+      flex-direction: row;
+    `}
+`, P = l(g)`
+  min-width: 250px;
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      min-width: 180px;
+    `}
+`, _ = l(g)`
+  width: 120px;
+  align-items: center;
+  padding-left: 22px;
+`, A = l.img`
+  width: 142px;
+  height: 110px;
+  ${({ $isBeltsExist: e }) => !e && c`
+      filter: grayscale(100%);
+      opacity: 20%;
+    `};
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      width: 104px;
+      height: 80px;
+    `}
+`, b = l(g)`
+  width: 250px;
+`, Y = l(h)`
+  ${({ $currentScreenWidth: e }) => e < p.LAPTOP && c`
+      height: 52px;
+    `}
+`, C = l(m)`
+  opacity: ${({ $isBeltsExist: e }) => !e && "50%"};
+`, L = (e, s, o, r) => {
+  let i = `${e}/${s} goal mastered`;
+  const a = s - e;
+  return o ? e === s ? i = "Congrats! You're now a Black Belt" : r ? i = `Next Belt: ${r} ${r > 1 ? "goals" : "goal"} away` : i = e < s ? `Next Belt: ${a} ${a > 1 ? "goals" : "goal"} away` : "Congrats! You're now a Black Belt" : o || (i = "You have no belts earned"), i;
+}, S = () => /* @__PURE__ */ t(m, { $renderAs: "body3", $color: "WHITE", children: "You can't earn belts for the selected program" }), j = ({ beltStats: e, goalStats: s, currentScreenWidth: o }) => {
+  const { current_belt_type: r, goals_required: i } = e || {}, { completed_goals: a = 0, total_goals: $ = 1 } = s || {}, n = !!r, f = n ? `${r && r.toUpperCase()} BELT` : "BELTS", B = Math.floor(a * 100 / $), T = L(a, $, n, i);
+  return /* @__PURE__ */ t(
+    w,
+    {
+      position: "bottom",
+      tooltipItem: S(),
+      renderAs: "primary",
+      hidden: n,
+      children: /* @__PURE__ */ d(y, { $currentScreenWidth: o, children: [
+        /* @__PURE__ */ d(P, { $currentScreenWidth: o, children: [
+          /* @__PURE__ */ t(m, { $renderAs: "h5", children: f }),
+          /* @__PURE__ */ t(h, { height: 24 }),
+          /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(
+            A,
+            {
+              $currentScreenWidth: o,
+              $isBeltsExist: n,
+              src: n ? x(r || "") : x(u),
+              alt: "Belt"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ d(b, { children: [
+          /* @__PURE__ */ t(Y, { $currentScreenWidth: o, height: 38 }),
+          /* @__PURE__ */ t(
+            E,
+            {
+              progress: B,
+              height: 4,
+              backgroundColor: "GREY_1",
+              progressColor: n ? "GREY_4" : "GREY_2"
+            }
+          ),
+          /* @__PURE__ */ t(h, { height: 8 }),
+          /* @__PURE__ */ t(C, { $isBeltsExist: n, $renderAs: "body3", $color: "GREY_4", children: T })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  j as default
+};
+//# sourceMappingURL=belts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"belts.js","sources":["../../../../src/features/wins-dashboard/belts-elements-stickers/belts.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { getBeltIcon, SCREEN_SIZES } from '../constants';\nimport ProgressBarHorizontal from './progress-bar-horizontal';\n\nconst DEFAULT_BELT_TYPE = 'Black';\n\ninterface ContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst Container = styled.div<ContainerProps>`\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: center;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 80%;\n      flex-direction: row;\n    `}\n`;\n\ninterface HeaderContainerProps {\n  $currentScreenWidth: number;\n}\n\nconst HeaderContainer = styled(FlexView)<HeaderContainerProps>`\n  min-width: 250px;\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      min-width: 180px;\n    `}\n`;\n\nconst ProfileWrapper = styled(FlexView)`\n  width: 120px;\n  align-items: center;\n  padding-left: 22px;\n`;\n\ninterface BeltImgProps {\n  $isBeltsExist: boolean;\n  $currentScreenWidth: number;\n}\n\nconst BeltImg = styled.img<BeltImgProps>`\n  width: 142px;\n  height: 110px;\n  ${({ $isBeltsExist }) =>\n    !$isBeltsExist &&\n    css`\n      filter: grayscale(100%);\n      opacity: 20%;\n    `};\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      width: 104px;\n      height: 80px;\n    `}\n`;\n\nconst ProgressBarWrapper = styled(FlexView)`\n  width: 250px;\n`;\n\ninterface SeparatorDivProps {\n  $currentScreenWidth: number;\n}\n\nconst SeparatorDiv = styled(Separator)<SeparatorDivProps>`\n  ${({ $currentScreenWidth }) =>\n    $currentScreenWidth < SCREEN_SIZES.LAPTOP &&\n    css`\n      height: 52px;\n    `}\n`;\n\ninterface BeltTextProps {\n  $isBeltsExist: boolean;\n}\n\nconst BeltText = styled(Text)<BeltTextProps>`\n  opacity: ${({ $isBeltsExist }) => !$isBeltsExist && '50%'};\n`;\n\nconst getBarTitle = (\n  completedGoals: number,\n  totalGoals: number,\n  isBeltsExist: boolean,\n  nextBeltGoals?: number,\n): string => {\n  let title = `${completedGoals}/${totalGoals} goal mastered`;\n  const goalsReq = totalGoals - completedGoals;\n\n  if (isBeltsExist) {\n    if (completedGoals === totalGoals) {\n      title = \"Congrats! You're now a Black Belt\";\n    } else if (nextBeltGoals) {\n      title = `Next Belt: ${nextBeltGoals} ${nextBeltGoals > 1 ? 'goals' : 'goal'} away`;\n    } else {\n      title =\n        completedGoals < totalGoals\n          ? `Next Belt: ${goalsReq} ${goalsReq > 1 ? 'goals' : 'goal'} away`\n          : \"Congrats! You're now a Black Belt\";\n    }\n  } else if (!isBeltsExist) {\n    title = 'You have no belts earned';\n  }\n\n  return title;\n};\n\nconst getToolTipText = () => {\n  return (\n    <Text $renderAs=\"body3\" $color=\"WHITE\">\n      You can&apos;t earn belts for the selected program\n    </Text>\n  );\n};\n\ninterface BeltStats {\n  current_belt_type?: string;\n  goals_required?: number;\n}\n\ninterface GoalStats {\n  completed_goals: number;\n  total_goals: number;\n}\n\ninterface BeltsProps {\n  beltStats?: BeltStats | null;\n  goalStats?: GoalStats | null;\n  currentScreenWidth: number;\n}\n\nconst Belts: React.FC<BeltsProps> = ({ beltStats, goalStats, currentScreenWidth }) => {\n  const { current_belt_type: currentBeltType, goals_required: nextBeltGoals } = beltStats || {};\n  const { completed_goals: completedGoals = 0, total_goals: totalGoals = 1 } = goalStats || {};\n\n  const isBeltsExist = !!currentBeltType;\n  const beltTitle = isBeltsExist\n    ? `${currentBeltType && currentBeltType.toUpperCase()} BELT`\n    : 'BELTS';\n  const progress = Math.floor((completedGoals * 100) / totalGoals);\n  const barTitle = getBarTitle(completedGoals, totalGoals, isBeltsExist, nextBeltGoals);\n\n  return (\n    <ArrowTooltip\n      position=\"bottom\"\n      tooltipItem={getToolTipText()}\n      renderAs=\"primary\"\n      hidden={isBeltsExist}\n    >\n      <Container $currentScreenWidth={currentScreenWidth}>\n        <HeaderContainer $currentScreenWidth={currentScreenWidth}>\n          <Text $renderAs=\"h5\">{beltTitle}</Text>\n          <Separator height={24} />\n          <ProfileWrapper>\n            <BeltImg\n              $currentScreenWidth={currentScreenWidth}\n              $isBeltsExist={isBeltsExist}\n              src={\n                !isBeltsExist ? getBeltIcon(DEFAULT_BELT_TYPE) : getBeltIcon(currentBeltType || '')\n              }\n              alt=\"Belt\"\n            />\n          </ProfileWrapper>\n        </HeaderContainer>\n        <ProgressBarWrapper>\n          <SeparatorDiv $currentScreenWidth={currentScreenWidth} height={38} />\n          <ProgressBarHorizontal\n            progress={progress}\n            height={4}\n            backgroundColor=\"GREY_1\"\n            progressColor={isBeltsExist ? 'GREY_4' : 'GREY_2'}\n          />\n          <Separator height={8} />\n          <BeltText $isBeltsExist={isBeltsExist} $renderAs=\"body3\" $color=\"GREY_4\">\n            {barTitle}\n          </BeltText>\n        </ProgressBarWrapper>\n      </Container>\n    </ArrowTooltip>\n  );\n};\n\nexport default Belts;\n"],"names":["DEFAULT_BELT_TYPE","Container","styled","$currentScreenWidth","SCREEN_SIZES","css","HeaderContainer","FlexView","ProfileWrapper","BeltImg","$isBeltsExist","ProgressBarWrapper","SeparatorDiv","Separator","BeltText","Text","getBarTitle","completedGoals","totalGoals","isBeltsExist","nextBeltGoals","title","goalsReq","getToolTipText","Belts","beltStats","goalStats","currentScreenWidth","currentBeltType","beltTitle","progress","barTitle","jsx","ArrowTooltip","jsxs","getBeltIcon","ProgressBarHorizontal"],"mappings":"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"}