@magmamath/students-features 1.3.23-rc.21 → 1.3.23-rc.22

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -8,6 +8,8 @@ import { PoundIcon } from '../../../../shared/icons/keyboard/PoundIcon'
 import { YenIcon } from '../../../../shared/icons/keyboard/YenIcon'
 import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
 import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
+import { ZlotyIcon } from '../../../../shared/icons/keyboard/ZlotyIcon'
+import { GroszIcon } from '../../../../shared/icons/keyboard/GroszIcon'
 
 export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
   KRONE: {
@@ -46,6 +48,16 @@ export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
     mathliveValue: '¢',
     katexValue: '¢',
   },
+  ZLOTY: {
+    icon: <ZlotyIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{zł}',
+    katexValue: 'zł',
+  },
+  GROSZ: {
+    icon: <GroszIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{gr}',
+    katexValue: 'gr',
+  },
 } as const
 
 export const MATH_LENGTH_UNITS: MathOperatorsGroup = {

package/src/features/pmProgress/components/chart/chart.helpers.ts

@@ -1,6 +1,7 @@
 export const getSliceClipId = (index: number | string) => `slice-clip-${index}`
 
 export const dynamicInnerRadius = (sliceCount: number): number => {
+  if (sliceCount >= 8) return 20
   if (sliceCount >= 5) return 14
   if (sliceCount === 4) return 8
   if (sliceCount === 3) return 6

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { Platform, StyleSheet, TextStyle, useWindowDimensions, View } from 'react-native'
+import { ScrollView, StyleSheet, TextStyle, useWindowDimensions, View } from 'react-native'
 import {
+  BORDER_RADIUS,
   Button,
   ButtonVariant,
   CaretDownIcon,
@@ -10,6 +11,7 @@ import {
   HeadingVariants,
   Menu,
   MenuItemProps,
+  SHADOWS,
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
@@ -50,6 +52,11 @@ export const PmProgressHeader = () => {
       })),
   })
 
+  const selectGrade = (key: number) => {
+    model.tree.setGrade(key)
+    setIsDropdownOpen(false)
+  }
+
   return (
     <View style={styles.container}>
       <View style={styles.title}>
@@ -91,14 +98,13 @@ export const PmProgressHeader = () => {
             </Button>
           }
         >
-          <Menu
-            style={styles.menu}
-            items={grades}
-            onItemPress={(item) => {
-              model.tree.setGrade(item.key as number)
-              setIsDropdownOpen(false)
-            }}
-          />
+          <ScrollView style={styles.menuScroll}>
+            <Menu
+              style={styles.menu}
+              items={grades}
+              onItemPress={(item) => selectGrade(item.key as number)}
+            />
+          </ScrollView>
         </Dropdown>
       </View>
 
@@ -129,11 +135,14 @@ const styles = StyleSheet.create({
   caret: {
     marginLeft: SPACING[100],
   },
-  menu: {
+  menuScroll: {
     top: SPACING[100],
-    minWidth: 110,
-    overflow: 'scroll',
-    maxHeight: MENU_MAX_HEIGHT,
-    ...Platform.select({ web: { scrollbarWidth: 'none' } }),
+    maxHeight: isWeb ? MENU_MAX_HEIGHT : 490,
+    borderRadius: BORDER_RADIUS['300'],
+    overflow: 'hidden',
+    ...SHADOWS[1],
+  },
+  menu: {
+    minWidth: 130,
   },
 })

package/src/features/pmProgress/components/header/StartButton.tsx

@@ -66,8 +66,18 @@ export const StartButton = ({
       useNativeDriver: true,
     })
 
+    const resetAnimations = Animated.parallel([
+      Animated.timing(scaleAnimValue, { toValue: 0, duration: 0, useNativeDriver: true }),
+      Animated.timing(fadeAnimValue, { toValue: 1, duration: 0, useNativeDriver: true }),
+    ])
+
     const pulsation = Animated.loop(
-      Animated.sequence([scaleAnimation, Animated.delay(PULSE_DELAY), fadeOutAnimation]),
+      Animated.sequence([
+        resetAnimations,
+        scaleAnimation,
+        Animated.delay(PULSE_DELAY),
+        fadeOutAnimation,
+      ]),
     )
 
     pulsation.start()

package/src/features/pmProgress/components/list/{ListCard.tsx → DomainCard.tsx}

@@ -9,14 +9,14 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-import { ListItem } from './ListItem'
+import { StandardItem } from './StandardItem'
 import { useText } from '../../../../i18n/i18n'
 
 const HEADER_HEIGHT = 60
 const PROGRESS_BAR_WIDTH = 50
 const PROGRESS_BAR_HEIGHT = 10
 
-export type ListCardItem = {
+export type DomainCardItem = {
   id: string
   title: string
   subtitle: string
@@ -25,17 +25,11 @@ export type ListCardItem = {
   testID?: string
 }
 
-function getVisibleItems<T>(items: T[], maxItems?: number) {
-  const visible = maxItems != null ? items.slice(0, maxItems) : items
-  const remainingCount = maxItems != null ? Math.max(0, items.length - maxItems) : 0
-  return { visible, remainingCount }
-}
-
-type ListCardProps<T extends ListCardItem> = {
+type DomainCardProps<T extends DomainCardItem> = {
   title: string
   icon: React.ReactElement
   color: string
-  items: T[]
+  standards: T[]
   onItemPress?: (item: T) => void
   isExpanded?: boolean
   onPress?: () => void
@@ -45,19 +39,19 @@ type ListCardProps<T extends ListCardItem> = {
   rightContent?: React.ReactNode
   isFirst?: boolean
   isLast?: boolean
-  maxItems?: number
   expandedColor?: string
   isSkillsLeftHidden?: boolean
   isHighlighted?: boolean
   loadingItemId?: string | null
+  remainingItemsCount?: number
   testID?: string
 }
 
-export const ListCard = <T extends ListCardItem>({
+export const DomainCard = <T extends DomainCardItem>({
   title,
   icon,
   color,
-  items,
+  standards,
   isExpanded = false,
   isHighlighted = false,
   onPress,
@@ -68,16 +62,15 @@ export const ListCard = <T extends ListCardItem>({
   rightContent,
   isFirst,
   isLast,
-  maxItems,
   expandedColor = COLORS.NEUTRAL_3,
   isSkillsLeftHidden = false,
   loadingItemId = null,
+  remainingItemsCount = 0,
   testID,
-}: ListCardProps<T>) => {
+}: DomainCardProps<T>) => {
   const t = useText()
   const [isHovered, setIsHovered] = useState(false)
 
-  const { visible: standards, remainingCount } = getVisibleItems(items, maxItems)
   const withHighlight = isHovered || isExpanded || isHighlighted
 
   const Caret = isExpanded ? CaretDownIcon : CaretRightIcon
@@ -87,7 +80,6 @@ export const ListCard = <T extends ListCardItem>({
       style={[
         styles.container,
         !isFirst && styles.containerCollapsed,
-        isFirst && styles.containerFirst,
         isLast && styles.containerLast,
         withHighlight && { backgroundColor: expandedColor },
       ]}
@@ -134,7 +126,7 @@ export const ListCard = <T extends ListCardItem>({
       {isExpanded && (
         <View style={[styles.items, isLast && styles.itemsLast]}>
           {standards.map((standard) => (
-            <ListItem
+            <StandardItem
               key={standard.id}
               title={standard.title}
               skillsLeft={standard.skillsLeft}
@@ -146,9 +138,9 @@ export const ListCard = <T extends ListCardItem>({
               onPress={() => onItemPress?.(standard)}
             />
           ))}
-          {remainingCount > 0 && (
+          {remainingItemsCount > 0 && (
             <Typography variant={HeadingVariants.H8} style={styles.moreText}>
-              {t('pmProgress.andMore', { count: `${remainingCount}` })}
+              {t('pmProgress.andMore', { count: `${remainingItemsCount}` })}
             </Typography>
           )}
         </View>
@@ -167,10 +159,6 @@ const styles = StyleSheet.create({
   containerCollapsed: {
     marginTop: -1,
   },
-  containerFirst: {
-    borderTopLeftRadius: BORDER_RADIUS[200],
-    borderTopRightRadius: BORDER_RADIUS[200],
-  },
   containerLast: {
     borderBottomLeftRadius: BORDER_RADIUS[200],
     borderBottomRightRadius: BORDER_RADIUS[200],

package/src/features/pmProgress/components/list/Fluency.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { ListCard } from './ListCard'
+import { DomainCard } from './DomainCard'
 import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
 import { useUnit } from 'effector-react'
@@ -28,9 +28,9 @@ export const Fluency = ({ data }: FluencyProps) => {
   return (
     <View style={styles.container}>
       <View style={styles.separator} />
-      <ListCard
+      <DomainCard
         title={t('pmProgress.fluency')}
-        items={data.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
+        standards={data.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
         progress={data.scorePercentage}
         color={COLORS.PRIMARY_ORANGE}
         onPress={() => model.highlight.expand(data.domainId)}

package/src/features/pmProgress/components/list/PmDomainList.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useUnit } from 'effector-react'
 import { BORDER_RADIUS, COLORS, ScrollableList, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-import { ListCard } from './ListCard'
+import { DomainCard } from './DomainCard'
 import { Fluency } from './Fluency'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
 import { usePmProgress } from '../../context/PmProgressContext'
@@ -30,10 +30,10 @@ export const PmDomainList = () => {
         ListFooterComponent={<Fluency data={fluency} />}
         keyExtractor={(item) => item.domainId}
         renderItem={({ item, index }) => (
-          <ListCard
+          <DomainCard
             title={item.title}
             testID={TEST_IDS.PM_PROGRESS_DOMAIN_CARD(item.domainId)}
-            items={item.standards.map((standard) => ({
+            standards={item.standards.map((standard) => ({
               ...standard,
               id: standard.standardId,
               testID: TEST_IDS.PM_PROGRESS_STANDARD_ITEM(standard.standardId),

package/src/features/pmProgress/components/list/{ListItem.tsx → StandardItem.tsx}

@@ -18,7 +18,7 @@ const ICON_SIZE = 25
 const SUBTITLE_FONT_SIZE = 10
 const SUBTITLE_LINE_HEIGHT = 14
 
-export type ListItemProps = {
+export type StandardItemProps = {
   title: string
   subtitle: string
   skillsLeft: number
@@ -29,7 +29,7 @@ export type ListItemProps = {
   testID?: string
 }
 
-export const ListItem = ({
+export const StandardItem = ({
   title,
   subtitle,
   skillsLeft,
@@ -38,11 +38,11 @@ export const ListItem = ({
   onPress,
   isSkillsLeftHidden = false,
   testID,
-}: ListItemProps) => {
+}: StandardItemProps) => {
   const t = useText()
   const [isHovered, setIsHovered] = useState(false)
   const isSkillsLeftVisible = skillsLeft > 0 && !isFinished && !isSkillsLeftHidden
-  const hasDistinctSubtitle = title !== subtitle
+  const hasDistinctSubtitle = subtitle && title !== subtitle
 
   return (
     <Pressable

package/src/features/pmProgress/components/recs/PmTeacherRecs.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { ListCard } from '../list/ListCard'
+import { DomainCard } from '../list/DomainCard'
 import { PentagonIcon } from '../../../../shared/icons/PentagonIcon'
 import {
   BORDER_RADIUS,
@@ -39,15 +39,19 @@ export const PmTeacherRecs = () => {
     }),
   )
 
+  const maxVisible = 3
+  const visibleItems = recommendations.slice(0, maxVisible)
+  const remainingItemsCount = Math.max(0, total - maxVisible)
+
   if (!recommendations.length) return null
 
   return (
     <View style={styles.container}>
       <View style={styles.wrapper}>
-        <ListCard
+        <DomainCard
           title={t('pmProgress.teacherRecs')}
-          items={recommendations}
-          maxItems={3}
+          standards={visibleItems}
+          remainingItemsCount={remainingItemsCount}
           color={COLORS.PRIMARY_YELLOW}
           expandedColor={COLORS.YELLOW_1}
           testID={TEST_IDS.PM_PROGRESS_TEACHER_RECS_CARD}

package/src/features/pmProgress/components/standard/StandardTag.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native'
 import { PmProgressModel } from '@magmamath/students-features'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
-import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
 import { useStoreMap } from 'effector-react'
 import { isWeb } from '../../../../shared/common.constants'
+import { findDomainBySkillId } from '../../shared/pmProgress.helpers'
 
 type ColorPreset = {
   background: string
@@ -113,36 +114,45 @@ const DOMAIN_COLOR_PRESETS: Record<string, ColorPreset> = {
 }
 
 type StandardTagProps = {
-  skillId: string
   model: PmProgressModel
+  skillId: string
+  style?: StyleProp<ViewStyle>
 }
 
-export const StandardTag = ({ skillId, model }: StandardTagProps) => {
+export const StandardTag = ({ model, skillId, style }: StandardTagProps) => {
   const standardInfo = useStoreMap({
-    store: model.tree.$domainsInGrade,
+    store: model.tree.$domains,
     keys: [skillId],
-    fn: (domains, [skillId]) => {
-      const domain = domains.find((d) => d.standards.some((s) => s.skillIds.includes(skillId)))
-      const standard = domain?.standards.find(({ skillIds }) => skillIds.includes(skillId))
-      if (!standard || !domain) return null
+    fn: (domainsByGrade, [skillId]) => {
+      const allDomains = Object.values(domainsByGrade).flat()
+      const domain = findDomainBySkillId(skillId, allDomains)
+      if (!domain) return null
+
+      const standard = domain.standards.find(({ skillIds }) => skillIds.includes(skillId))
+      if (!standard) return null
       return { title: standard.title, tag: standard.subtitle, color: domain.color }
     },
   })
 
   if (!standardInfo) return null
 
+  const hasStandardTag = !!standardInfo.tag
+  const isTagDifferentFromTitle = standardInfo.title !== standardInfo.tag
+
   const preset = DOMAIN_COLOR_PRESETS[standardInfo.color]
 
   return (
-    <View style={[styles.container, { backgroundColor: preset.background }]}>
+    <View style={[styles.container, { backgroundColor: preset.background }, style]}>
       <SliceDiamondIcon color={preset.tagColor} />
       <View style={styles.textContainer}>
         <Text numberOfLines={2} style={[styles.title, { color: preset.titleColor }]}>
           {standardInfo.title}
         </Text>
-        <Text numberOfLines={1} style={[styles.tag, { color: preset.tagColor }]}>
-          {standardInfo.tag}
-        </Text>
+        {hasStandardTag && isTagDifferentFromTitle && (
+          <Text numberOfLines={1} style={[styles.tag, { color: preset.tagColor }]}>
+            {standardInfo.tag}
+          </Text>
+        )}
       </View>
     </View>
   )
@@ -150,20 +160,16 @@ export const StandardTag = ({ skillId, model }: StandardTagProps) => {
 
 const styles = StyleSheet.create({
   container: {
-    minWidth: 110,
+    minWidth: 120,
     maxWidth: isWeb ? 350 : 280,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
+    paddingHorizontal: SPACING[200],
+    paddingVertical: SPACING[100],
+    borderRadius: BORDER_RADIUS[300],
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 8,
+    gap: SPACING[200],
     alignSelf: 'flex-start',
-    shadowColor: '#333333',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 2,
+    ...SHADOWS[1],
   },
   textContainer: {
     ...(isWeb ? { flex: 1 } : { flexShrink: 1 }),

package/src/features/pmProgress/model/PmInsightsModel.ts

@@ -3,13 +3,14 @@ import { UserTimeframeStats } from '../shared/pmProgress.types'
 import { PmProgressApi } from './PmProgressApi'
 import { InsightsTimeframe } from '../shared/pmProgress.constants'
 
+type TimeframeStats = UserTimeframeStats['practiceModeStatsByTimeFrame'] | null
+
 export class PmInsightsModel {
+  public readonly reset = createEvent()
   public readonly setTimeframe = createEvent<InsightsTimeframe>()
 
-  private readonly $data = createStore<UserTimeframeStats['practiceModeStatsByTimeFrame'] | null>(
-    null,
-  )
-  public readonly $timeframe = restore(this.setTimeframe, InsightsTimeframe.WEEK)
+  private readonly $data = createStore<TimeframeStats>(null).reset(this.reset)
+  public readonly $timeframe = restore(this.setTimeframe, InsightsTimeframe.WEEK).reset(this.reset)
   public readonly $insights = combine(this.$data, this.$timeframe, (stats, timeframe) => {
     return stats ? stats[timeframe] : null
   })

package/src/features/pmProgress/model/PmProgressModel.ts

@@ -1,5 +1,6 @@
 import { sample } from 'effector'
 import { createGate } from 'effector-react'
+import { not } from 'patronum/not'
 import { PmProgressGateProps } from '../shared/pmProgress.types'
 import { PmProgressApi, type PmProgressApiProps } from './PmProgressApi'
 import { PmTreeModel } from './PmTreeModel'
@@ -36,6 +37,7 @@ export class PmProgressModel {
   private init() {
     sample({
       clock: this.gate.open,
+      filter: not(this.tree.initTreeFx.pending),
       target: [this.tree.initTreeFx, this.api.getUserInsightsFx],
     })
 

package/src/features/pmProgress/model/PmRecommendationsModel.ts

@@ -1,13 +1,15 @@
 import { PmProgressApi } from './PmProgressApi'
-import { createEffect, createStore } from 'effector'
+import { createEffect, createEvent, createStore, sample } from 'effector'
 import { Recommendations, RecsResponse, TreeMappingResponse } from '../shared/pmProgress.types'
 import { RECOMMENDATIONS_LIMIT_PARAM, SolvingFlow } from '../shared/pmProgress.constants'
 
-const INITIAL_RECOMMENDATION_STATE: Recommendations = { items: [], offset: 0, limit: 0, total: 0 }
+const EMPTY_RECS: Recommendations = { items: [], offset: 0, limit: 0, total: 0 }
 
 export class PmRecommendationsModel {
-  public readonly $teacher = createStore<Recommendations>(INITIAL_RECOMMENDATION_STATE)
-  public readonly $magma = createStore<Recommendations>(INITIAL_RECOMMENDATION_STATE)
+  public readonly reset = createEvent()
+
+  public readonly $teacher = createStore<Recommendations>(EMPTY_RECS).reset(this.reset)
+  public readonly $magma = createStore<Recommendations>(EMPTY_RECS).reset(this.reset)
 
   constructor(private readonly api: PmProgressApi) {
     this.$teacher.on(this.fetchTeacherRecsFx.doneData, (_, data) => data)

package/src/features/pmProgress/model/PmTreeModel.ts

@@ -25,22 +25,26 @@ import { persist } from 'effector-storage/session'
 import { PmProgressStatus, SessionStorageKeys } from '../shared/pmProgress.constants'
 import { isWeb } from '../../../shared/common.constants'
 
+type InitTreeFxParams = PmProgressGateProps & { source: { tree: TreeMappingResponse | null } }
+
 export class PmTreeModel {
-  private readonly $tree = createStore<TreeMappingResponse | null>(null)
-  private readonly $stats = createStore<StatsResponse | null>(null)
-  private readonly $user = createStore<User | null>(null)
+  public readonly reset = createEvent()
+
+  public readonly $tree = createStore<TreeMappingResponse | null>(null).reset(this.reset)
+  private readonly $user = createStore<User | null>(null).reset(this.reset)
+  private readonly $stats = createStore<StatsResponse | null>(null).reset(this.reset)
 
   private readonly setupInitialGrade = createEvent<SetupInitialGradeProps>()
   public readonly setGrade = createEvent<number | null>()
 
-  public readonly $isInitialized = createStore(false)
-  public readonly $grade = restore(this.setGrade, null)
-  public readonly $domains = createStore<Record<number, Domain[]>>({})
+  public readonly $isInitialized = createStore(false).reset(this.reset)
+  public readonly $grade = restore(this.setGrade, null).reset(this.reset)
+  public readonly $domains = createStore<Record<number, Domain[]>>({}).reset(this.reset)
   public readonly $domainsInGrade = combine(this.$domains, this.$grade, (domains, grade) =>
     grade !== null ? (domains[grade] ?? []) : [],
   )
-  public readonly $grades = createStore<Grade[]>([])
-  public readonly $status = createStore<PmProgressStatus | null>(null)
+  public readonly $grades = createStore<Grade[]>([]).reset(this.reset)
+  public readonly $status = createStore<PmProgressStatus | null>(null).reset(this.reset)
 
   constructor(private readonly api: PmProgressApi) {
     if (isWeb) {
@@ -54,16 +58,26 @@ export class PmTreeModel {
     this.setupDomainsInTree()
   }
 
-  public readonly initTreeFx = createEffect(async ({ user }: PmProgressGateProps) => {
-    if (!user.setting.practiceModeTreeId) {
-      throw new Error('practiceModeTreeId is not set')
-    }
+  public readonly initTreeFx = attach({
+    source: { tree: this.$tree },
+    mapParams: (params: PmProgressGateProps, source): InitTreeFxParams => ({ ...params, source }),
+    effect: createEffect(async ({ user, skipTreeFetch, source }: InitTreeFxParams) => {
+      if (!user.setting.practiceModeTreeId) {
+        throw new Error('practiceModeTreeId is not set')
+      }
 
-    const [tree, stats] = await Promise.all([
-      this.api.getTreeFx(user.setting.practiceModeTreeId),
-      this.api.getStatisticsFx({ entityIds: [user._id] }),
-    ])
-    return [TreeNormalizer.normalize(tree), stats] as const
+      if (skipTreeFetch && source.tree) {
+        const stats = await this.api.getStatisticsFx({ entityIds: [user._id] })
+        return [source.tree, stats] as const
+      }
+
+      const [tree, stats] = await Promise.all([
+        this.api.getTreeFx(user.setting.practiceModeTreeId),
+        this.api.getStatisticsFx({ entityIds: [user._id] }),
+      ])
+
+      return [TreeNormalizer.normalize(tree), stats] as const
+    }),
   })
 
   public readonly getTreeContextFx = attach({
@@ -117,12 +131,12 @@ export class PmTreeModel {
         $isInitialized: this.$isInitialized,
         setupInitialGrade: this.setupInitialGrade,
       },
-      fn: (target, { params: { user }, result: [tree, stats] }) => {
+      fn: (target, { params: { user, skipTreeFetch }, result: [tree, stats] }) => {
         target.$tree(tree)
         target.$stats(stats)
         target.$user(user)
         target.$grades(getTreeGrades(tree, user))
-        target.setupInitialGrade({ tree, user })
+        if (!skipTreeFetch) target.setupInitialGrade({ tree, user })
         target.$isInitialized(true)
       },
     })

package/src/features/pmProgress/shared/pmProgress.helpers.ts

@@ -30,8 +30,7 @@ const groupStandardsByDomain = (
     }
 
     const completed =
-      !skillsToPractice ||
-      (skillsToPractice.failed.length === 0 && skillsToPractice.unattempted.length === 0)
+      skillsToPractice?.failed.length === 0 && skillsToPractice.unattempted.length === 0
     const left = skillsToPractice
       ? skillsToPractice.failed.length + skillsToPractice.unattempted.length
       : 0

package/src/features/pmProgress/shared/pmProgress.types.ts

@@ -171,10 +171,13 @@ export type GradeLabelsMap = Record<string, GradeLabel>
 
 export type PmProgressGateProps = {
   user: User
+  skipTreeFetch?: boolean
 }
 
 export type SetupInitialGradeProps = { tree: TreeMappingResponse; user: User }
 
+export type RefetchDataProps = { user?: User }
+
 export type GetTreeContextFxParams = {
   tree: TreeMappingResponse
   stats: StatsResponse

package/src/shared/icons/keyboard/GroszIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Text as SvgText } from 'react-native-svg'
+
+export const GroszIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <SvgText
+        x="8"
+        y="12"
+        fill={color}
+        fontSize="10"
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        gr
+      </SvgText>
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/ZlotyIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Text as SvgText } from 'react-native-svg'
+
+export const ZlotyIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <SvgText
+        x="8"
+        y="12"
+        fill={color}
+        fontSize="10"
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        zł
+      </SvgText>
+    </Svg>
+  )
+}