@magmamath/students-features 1.6.0-rc.1 → 1.6.0

package/src/features/chatbot/components/ChatMessage/ReceivedMessage.tsx

@@ -1,31 +1,47 @@
 import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { BORDER_RADIUS, SPACING } from '@magmamath/react-native-ui'
-import { CHATBOT_ICON_SIZE, MESSAGE_WIDTH } from '../../constants'
-import { ChatbotIcon } from '@magmamath/students-features'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+import {
+  AI_AVATAR_CONTAINER_WIDTH,
+  ChatbotVariant,
+  LAVA_ICON_SIZE,
+  MESSAGE_WIDTH,
+} from '../../constants'
+import { getChatbotAvatarVariant } from '../../helpers'
 import { ColorScheme } from '../../types/style.types'
 import { MessageVariant } from '../../types/model.types'
 import { VariantProps } from './ChatMessage'
 import { MessageContent } from './MessageContent'
-import { TEST_IDS } from '@magmamath/students-qa'
+import { ChatbotAvatar } from '../Chat/ChatbotAvatar'
 
 export const ReceivedMessage = ({
   message,
   isTranslated,
   t2sState,
   withIcon,
+  chatbotVariant = ChatbotVariant.LAVA,
   colorScheme = ColorScheme.Blue,
   withErrorSpotting,
   highlightedWordIndex,
   TTSHighlightRenderer,
 }: VariantProps) => {
   const text = isTranslated ? message.translatedMessage : message.message
+  const avatarVariant = getChatbotAvatarVariant(chatbotVariant)
 
   return (
     <View style={styles.container} testID={TEST_IDS.CHAT_MESSAGE_RECEIVED}>
-      <View style={[styles.iconWrapper, { opacity: withIcon ? 1 : 0 }]}>
-        <ChatbotIcon width={CHATBOT_ICON_SIZE.width} height={CHATBOT_ICON_SIZE.height} />
+      <View
+        style={[
+          styles.chatbotAvatarContainer,
+          chatbotVariant === ChatbotVariant.AI && styles.chatbotAIAvatarContainer,
+          { opacity: withIcon ? 1 : 0 },
+        ]}
+      >
+        <ChatbotAvatar variant={avatarVariant} />
       </View>
+
       <View style={styles.message}>
         <MessageContent
           message={message}
@@ -52,7 +68,7 @@ const styles = StyleSheet.create({
   message: {
     width: MESSAGE_WIDTH,
     flexDirection: 'row',
-    padding: 8,
+    padding: SPACING['200'],
     shadowColor: '#333',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.25,
@@ -63,9 +79,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#F2F2F4',
     ...Platform.select({ web: { backfaceVisibility: 'hidden' } }),
   },
-  iconWrapper: {
-    width: CHATBOT_ICON_SIZE.width + SPACING[200],
+  chatbotAvatarContainer: {
     alignItems: 'flex-start',
     justifyContent: 'flex-end',
+    width: LAVA_ICON_SIZE + SPACING[200],
+  },
+  chatbotAIAvatarContainer: {
+    width: AI_AVATAR_CONTAINER_WIDTH,
   },
 })

package/src/features/chatbot/components/Chatbot.tsx

@@ -4,7 +4,7 @@ import { useStoreMap, useUnit } from 'effector-react'
 import { ChatbotModel } from '../model/ChatBotModel'
 import { Chat } from './Chat/Chat'
 import { ChatControls } from './ChatControls/ChatControls'
-import { AUDIO_CONFIG, DEFAULT_VOICE } from '../constants'
+import { AUDIO_CONFIG, ChatbotVariant, DEFAULT_VOICE } from '../constants'
 import { ChatBotModelContext } from '../context/ChatBotModelContext'
 import { ColorScheme } from '../types/style.types'
 import { TTSHighlightRenderer } from '../types/t2s.types'
@@ -19,11 +19,12 @@ type ChatbotProps = {
     audioConfig: typeof AUDIO_CONFIG
   }
   ButtonWrapper?: ComponentType<PropsWithChildren>
-  iconSize?: { width: number; height: number } // TODO: use number instead
+  iconSize?: number
   isInputDisabled?: boolean
   colorScheme?: ColorScheme
   TTSHighlightRenderer?: TTSHighlightRenderer
   maxHeight?: number
+  variant?: ChatbotVariant
 }
 
 export const Chatbot = ({
@@ -31,6 +32,7 @@ export const Chatbot = ({
   isHintFeedback,
   isTextToSpeechEnabled = false,
   isInputDisabled,
+  variant = ChatbotVariant.LAVA,
   textToSpeechConfig,
   ButtonWrapper,
   iconSize,
@@ -69,23 +71,25 @@ export const Chatbot = ({
     <ChatBotModelContext.Provider value={model}>
       <Chat
         model={model}
+        onPressClose={closeChat}
         colorScheme={colorScheme}
         isHintFeedback={isHintFeedback}
         isTextToSpeechEnabled={isTextToSpeechEnabled}
         isInputDisabled={isInputDisabled}
+        chatbotVariant={variant}
         maxHeight={maxHeight}
         MessageWrapper={ButtonWrapper}
         TTSHighlightRenderer={TTSHighlightRenderer}
-        onPressClose={closeChat}
       />
 
       <ChatControls
         model={model}
-        onPressChatIcon={openChat}
-        onPressHelpButton={sendHelpRequest}
-        iconSize={iconSize}
+        onPressChatLauncher={openChat}
+        onPressQuickAction={sendHelpRequest}
+        chatbotIconSize={iconSize}
+        chatbotVariant={variant}
+        withQuickActionButton={withQuickActionButton && !hasBeenOpened}
         ButtonWrapper={isInputDisabled ? undefined : ButtonWrapper}
-        withHelpButton={withQuickActionButton && !hasBeenOpened}
       />
     </ChatBotModelContext.Provider>
   )

package/src/features/chatbot/constants.ts

@@ -1,8 +1,7 @@
-import { ButtonColor, COLORS, IS_WEB } from '@magmamath/react-native-ui'
+import { COLORS, IS_WEB } from '@magmamath/react-native-ui'
 import { Platform } from 'react-native'
 import { MessageVariant } from './types/model.types'
 import { ColorScheme } from './types/style.types'
-import { ANIMATION_DURATION } from '../gifCelebrations/constants'
 
 export const AUDIO_CONFIG = {
   audioEncoding: 'LINEAR16',
@@ -90,4 +89,20 @@ export const SCROLL_BOTTOM_THRESHOLD = 0.5
 export const MESSAGE_WIDTH = 304
 export const INPUT_WIDTH = IS_WEB ? MESSAGE_WIDTH : 301
 export const CHAT_CONTAINER_WIDTH = 370
-export const CHATBOT_ICON_SIZE = { width: 51, height: 73 }
+export const LAVA_ICON_SIZE = 51
+export const AI_ICON_SIZE = 25
+export const AI_AVATAR_BORDER_RADIUS = 25
+export const AI_AVATAR_CONTAINER_WIDTH = 59
+export const FLOATING_AVATAR_BOTTOM = IS_WEB ? 67.4 : 59
+
+export enum ChatbotVariant {
+  LAVA = 'LAVA',
+  AI = 'AI',
+}
+
+export enum ChatbotAvatarVariant {
+  AI = 'AI',
+  LAVA = 'LAVA',
+  THINKING_LAVA = 'THINKING_LAVA',
+  EXCITED_LAVA = 'EXCITED_LAVA',
+}

package/src/features/chatbot/helpers.ts

@@ -1,11 +1,24 @@
 import { IS_WEB } from '@magmamath/react-native-ui'
 // https://stackoverflow.com/questions/56575859/google-translate-api-does-not-return-apostrophe-as-apostrophe-in-python
-import { KATEX_REPLACEMENTS, KATEX_REPLACEMENTS_REVERSE } from './constants'
+import {
+  ChatbotAvatarVariant,
+  ChatbotVariant,
+  KATEX_REPLACEMENTS,
+  KATEX_REPLACEMENTS_REVERSE,
+} from './constants'
 import { GetAlternativesResponse, PostMessagePayload } from './types/api.types'
 import { getText as t } from '../../i18n/i18n'
 import { ThreadItem } from './model/ThreadItem'
 import { ChatRequestPayload, ChatRequestType } from './types/model.types'
 
+export const getChatbotAvatarVariant = (
+  variant: ChatbotVariant,
+  isLoading = false,
+): ChatbotAvatarVariant => {
+  if (variant === ChatbotVariant.AI) return ChatbotAvatarVariant.AI
+  return isLoading ? ChatbotAvatarVariant.THINKING_LAVA : ChatbotAvatarVariant.LAVA
+}
+
 export const decodeHTMLEntities = (input: string) => {
   return input.replace(/'/g, "'")
 }

package/src/features/chatbot/index.ts

@@ -1,11 +1,20 @@
 export { Chatbot } from './components/Chatbot'
+export { ChatbotAvatar } from './components/Chat/ChatbotAvatar'
+export { ChatLauncher } from './components/ChatControls/ChatLauncher'
 export { ChatbotModel } from './model/ChatBotModel'
-export { AudioStatus, type AudioProvider, type TTSHighlightRenderer, type TTSHighlightRendererProps } from './types/t2s.types'
+export {
+  AudioStatus,
+  type AudioProvider,
+  type TTSHighlightRenderer,
+  type TTSHighlightRendererProps,
+} from './types/t2s.types'
 export {
   MessageVariant,
   type ChatbotModelProps,
   type IChatDrawBoardAdapter,
 } from './types/model.types'
+export { ChatbotAvatarVariant, ChatbotVariant } from './constants'
+export { getChatbotAvatarVariant } from './helpers'
 export type { RequestOptionalConfig } from '../../lib/effector/createControllerEffect'
 export type {
   PostMessageResponse,

package/src/features/chatbot/types/chat.types.ts

@@ -17,3 +17,7 @@ export type ScrollState = {
 export type FadeOverlaysProps = {
   fadeRef: MutableRefObject<FadeUpdateFn | null>
 }
+
+export type AvatarProps = {
+  size?: number
+}

package/src/features/endOfAssignment/components/CorrectAnswer/AnimatedCard.tsx

@@ -41,6 +41,7 @@ type AnimatedCardProps = {
   gbdAmount?: number
   delay?: number
   onAnimationEnd?: () => void
+  disableStarsAnimation?: boolean
 }
 
 export const AnimatedCard = memo(
@@ -53,6 +54,7 @@ export const AnimatedCard = memo(
     gbdAmount = 0,
     delay = 0,
     onAnimationEnd,
+    disableStarsAnimation = false,
   }: AnimatedCardProps) => {
     const celebrationsRef = useRef<CelebrationsRef>(null)
 
@@ -171,15 +173,23 @@ export const AnimatedCard = memo(
 
     return (
       <Animated.View style={styles.cardContainer}>
-        {variant === AnimatedCardVariant.CORRECT_ANSWER ? (
-          <CorrectAnswerSparks
-            color={COLORS.GREEN_3}
-            shouldStartAnimation={shouldTriggerSparkles}
-          />
-        ) : (
-          <GoodDrawingSparks color={COLORS.ORANGE_3} shouldStartAnimation={shouldTriggerSparkles} />
+        {!disableStarsAnimation && (
+          <>
+            {variant === AnimatedCardVariant.CORRECT_ANSWER ? (
+              <CorrectAnswerSparks
+                color={COLORS.GREEN_3}
+                shouldStartAnimation={shouldTriggerSparkles}
+              />
+            ) : (
+              <GoodDrawingSparks
+                color={COLORS.ORANGE_3}
+                shouldStartAnimation={shouldTriggerSparkles}
+              />
+            )}
+
+            <Celebrations modelRef={celebrationsRef} style={styles.celebrations} />
+          </>
         )}
-        <Celebrations modelRef={celebrationsRef} style={styles.celebrations} />
 
         <Animated.View style={[styles.card, animatedCardStyle]}>
           <Animated.View style={styles.cardContent}>

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { View, StyleSheet } from 'react-native'
 import { useUnit } from 'effector-react'
-import { SPACING, Typography, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { SPACING, Typography, COLORS, FONT_FAMILY, IS_MOBILE } from '@magmamath/react-native-ui'
 
 import { AnimatedCard } from './AnimatedCard'
 
@@ -25,6 +25,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
     hasRecommendations,
     isExam = false,
     isAssessment = false,
+    isMatureMode = false,
     newerAssignmentAvailable,
   } = popUpData ?? {}
 
@@ -67,7 +68,11 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
       ]}
     >
       <View style={styles.header}>
-        <Typography variant="large" style={styles.title}>
+        <Typography
+          variant="large"
+          style={[styles.title, IS_MOBILE && styles.mobileTitle]}
+          //different fontFamily style for mobile because of a bug in rn
+        >
           {textContent?.title}
         </Typography>
         <Typography variant="h4" style={styles.subtitle}>
@@ -89,6 +94,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
             solvedAmount={stats?.solvedAmount}
             problemsAmount={stats?.problemsAmount}
             shouldTriggerSparkles={cardsAnimationCompleted}
+            disableStarsAnimation={isMatureMode}
             onAnimationEnd={onCorrectAnswerAnimationEnd}
           />
         )}
@@ -100,6 +106,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
             gbdAmount={stats?.goodDrawingAmount}
             shouldTriggerSparkles={cardsAnimationCompleted}
             onAnimationEnd={onGBDAnimationEnd}
+            disableStarsAnimation={isMatureMode}
             delay={GOOD_DRAWING_CARD_APPEARENCE_DELAY}
           />
         )}
@@ -133,6 +140,9 @@ const styles = StyleSheet.create({
     color: COLORS.NEUTRAL_9,
     fontFamily: FONT_FAMILY.buenosAires,
   },
+  mobileTitle: {
+    fontFamily: 'BuenosAires-Black',
+  },
   subtitle: {
     color: COLORS.NEUTRAL_7,
     paddingVertical: SPACING[100],

package/src/features/endOfAssignment/types.ts

@@ -38,6 +38,7 @@ export type EOAModalContentProps = {
 
 export type EOAModalData = {
   isExam: boolean
+  isMatureMode: boolean
   isAssessment: boolean
   newerAssignmentAvailable?: boolean
   examFinished?: boolean

package/src/features/fluency/components/Fluency.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useGate } from 'effector-react'
+import { useGate, useUnit } from 'effector-react'
 import { View, StyleSheet } from 'react-native'
 import { Typography, HeadingVariants, SPACING, COLORS } from '@magmamath/react-native-ui'
 import { useText } from '../../../i18n/i18n'
@@ -8,6 +8,7 @@ import { DayStreakCounter } from './day-streak-counter/DayStreakCounter'
 import { SelectMathOperator } from './select-math-operator/SelectMathOperator'
 import { FluencyMatrix } from './matrix/FluencyMatrix'
 import { MobileMenu } from './mobile-menu/MobileMenu'
+import { FluencyStatusOverlay } from './FluencyStatusOverlay'
 import { FluencyProvider } from '../context/FluencyContext'
 import type { FluencyModel } from '../model/FluencyModel'
 import type { FluencyMode } from '../shared/fluency.constants'
@@ -32,6 +33,7 @@ export const Fluency = ({
 }: FluencyProps) => {
   useGate(model.gate, { config })
   const t = useText()
+  const status = useUnit(model.$status)
 
   return (
     <FluencyProvider value={{ model, onStartPress, onPracticePress, onModeSelectPress }}>
@@ -43,15 +45,21 @@ export const Fluency = ({
           </Typography>
         </View>
 
-        <View style={styles.header}>
-          <StartBanner />
-          <DayStreakCounter />
-        </View>
+        {status ? (
+          <FluencyStatusOverlay status={status} />
+        ) : (
+          <>
+            <View style={styles.header}>
+              <StartBanner />
+              <DayStreakCounter />
+            </View>
 
-        <View style={styles.matrix}>
-          <SelectMathOperator />
-          <FluencyMatrix />
-        </View>
+            <View style={styles.matrix}>
+              <SelectMathOperator />
+              <FluencyMatrix />
+            </View>
+          </>
+        )}
       </View>
     </FluencyProvider>
   )

package/src/features/fluency/components/FluencyStatusOverlay.tsx

@@ -0,0 +1,101 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  ErrorIcon,
+  HeadingVariants,
+  InfoIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { FluencyStatus } from '../shared/fluency.constants'
+import type { TranslationKey } from '../../../i18n/i18n'
+import { useText } from '../../../i18n/i18n'
+
+type StatusVariant = {
+  icon: ReactNode
+  circleColor: string
+  titleKey: TranslationKey
+  subtitleKey: TranslationKey
+}
+
+const FLUENCY_STATUS_VARIANTS: Record<FluencyStatus, StatusVariant> = {
+  [FluencyStatus.ERROR]: {
+    icon: <ErrorIcon color={COLORS.PRIMARY_RED} size={40} />,
+    circleColor: COLORS.RED_1,
+    titleKey: 'student.fluency.errorTitle',
+    subtitleKey: 'student.fluency.errorSubtitle',
+  },
+  [FluencyStatus.EMPTY]: {
+    icon: <InfoIcon color={COLORS.NEUTRAL_6} size={40} />,
+    circleColor: COLORS.NEUTRAL_2,
+    titleKey: 'student.fluency.emptyTitle',
+    subtitleKey: 'student.fluency.emptySubtitle',
+  },
+}
+
+type FluencyStatusOverlayProps = {
+  status: FluencyStatus
+}
+
+export const FluencyStatusOverlay = ({ status }: FluencyStatusOverlayProps) => {
+  const t = useText()
+
+  const variant = FLUENCY_STATUS_VARIANTS[status]
+  if (!variant) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={[styles.iconCircle, { backgroundColor: variant.circleColor }]}>
+          {variant.icon}
+        </View>
+        <View style={styles.text}>
+          <Typography variant={HeadingVariants.H2} style={styles.title}>
+            {t(variant.titleKey)}
+          </Typography>
+          <Typography variant={HeadingVariants.H7} style={styles.subtitle}>
+            {t(variant.subtitleKey)}
+          </Typography>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+    gap: SPACING[500],
+    paddingBottom: SPACING[800],
+  },
+  iconCircle: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    alignItems: 'center',
+    gap: SPACING[200],
+    maxWidth: 340,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+    fontSize: 24,
+    fontWeight: '500',
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '400',
+  },
+})

package/src/features/fluency/components/select-math-operator/SelectMathOperator.tsx

@@ -17,14 +17,22 @@ import { useText } from '../../../../i18n/i18n'
 export const SelectMathOperator = () => {
   const t = useText()
   const { model, onModeSelectPress } = useFluency()
-  const fluencyMode = useUnit(model.matrix.$mode)
-  const matrix = useUnit(model.matrix.$data)
+  const { fluencyMode, matrix } = useUnit({
+    fluencyMode: model.matrix.$mode,
+    matrix: model.matrix.$data,
+  })
+
+  const visibleModes = matrix
+    ? FLUENCY_MODES.filter(
+        ({ mode }) => Object.keys(matrix.operations?.[mode]?.facts ?? {}).length > 0,
+      )
+    : FLUENCY_MODES
 
   return (
     <View style={styles.container}>
-      {FLUENCY_MODES.map(({ mode, label, symbol, select }, index) => {
+      {visibleModes.map(({ mode, label, symbol, select }, index) => {
         const isSelectedMode = mode === fluencyMode
-        const progress = (matrix?.operations[mode].completionRate ?? 0) * 100
+        const progress = (matrix?.operations?.[mode]?.completionRate ?? 0) * 100
 
         return (
           <MathOperatorRow
@@ -45,7 +53,7 @@ export const SelectMathOperator = () => {
               model.matrix.setMode(mode)
               onModeSelectPress?.(mode)
             }}
-            showDivider={index < FLUENCY_MODES.length - 1}
+            showDivider={index < visibleModes.length - 1}
           />
         )
       })}

package/src/features/fluency/model/FluencyModel.ts

@@ -5,7 +5,8 @@ import { FluencyDaysStreakModel } from './FluencyDaysStreakModel'
 import { FluencyMatrixModel } from './FluencyMatrixModel'
 import { FluencyApiModel } from './FluencyApiModel'
 import { FluencySolvingModel } from './FluencySolvingModel'
-import { MatrixConfig } from '../shared/fluency.constants'
+import { FluencyStatus, MatrixConfig } from '../shared/fluency.constants'
+import { allFactsEmpty } from '../shared/fluency.helpers'
 import type {
   FluencyAttemptPayload,
   FluencyConfig,
@@ -16,6 +17,7 @@ import type {
 export class FluencyModel {
   public readonly gate = createGate<FluencyModelGateProps>()
   public readonly $config = createStore<FluencyConfig | null>(null)
+  public readonly $status = createStore<FluencyStatus | null>(null)
 
   public readonly api: FluencyApiModel
   public readonly streak: FluencyDaysStreakModel
@@ -29,6 +31,7 @@ export class FluencyModel {
     this.solving = new FluencySolvingModel(this.matrix, this.$config)
 
     this.init()
+    this.setupStatusTracking()
   }
 
   private init() {
@@ -63,4 +66,25 @@ export class FluencyModel {
       target: this.api.postAttemptFx,
     })
   }
+
+  private setupStatusTracking() {
+    sample({
+      clock: this.gate.open,
+      fn: () => null as FluencyStatus | null,
+      target: this.$status,
+    })
+
+    sample({
+      clock: [this.api.getMatrixFx.fail, this.api.getWeeklyStatsFx.fail],
+      fn: () => FluencyStatus.ERROR,
+      target: this.$status,
+    })
+
+    sample({
+      clock: this.api.getMatrixFx.doneData,
+      filter: allFactsEmpty,
+      fn: () => FluencyStatus.EMPTY,
+      target: this.$status,
+    })
+  }
 }

package/src/features/fluency/shared/fluency.constants.ts

@@ -106,3 +106,8 @@ export const FLUENCY_MODE_PRESETS: Record<FluencyMode, FluencyModePreset> = Obje
 ) as Record<FluencyMode, FluencyModePreset>
 
 export const ONE_DAY_MS = 86_400_000
+
+export enum FluencyStatus {
+  ERROR = 'ERROR',
+  EMPTY = 'EMPTY',
+}

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

@@ -117,6 +117,9 @@ export const buildMatrixGrid = (data: GetMatrixResponse, mode: FluencyMode): Mat
   return [headerRow, ...dataRows]
 }
 
+export const allFactsEmpty = (response: GetMatrixResponse): boolean =>
+  Object.values(response.operations).every((op) => Object.keys(op.facts).length === 0)
+
 export const generateStreakDates = (stats: GetWeeklyStatsResponse) => {
   const todayMs = new Date().setHours(0, 0, 0, 0)
   const startMs = new Date(stats.weekStart).setHours(0, 0, 0, 0)

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

@@ -43,7 +43,10 @@ export class PmProgressModel {
 
     sample({
       clock: this.tree.initTreeFx.done,
-      fn: ({ result: [tree] }) => tree,
+      fn: ({ params: { user }, result: [tree] }) => ({
+        tree,
+        lockedGrades: user.setting.practiceModeLockedGrades,
+      }),
       target: this.recommendations.initRecommendationsFx,
     })
   }

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

@@ -2,6 +2,12 @@ import { PmProgressApi } from './PmProgressApi'
 import { createEffect, createEvent, createStore, sample } from 'effector'
 import { Recommendations, RecsResponse, TreeMappingResponse } from '../shared/pmProgress.types'
 import { RECOMMENDATIONS_LIMIT_PARAM, SolvingFlow } from '../shared/pmProgress.constants'
+import { filterLockedGradeRecs } from '../shared/pmProgress.helpers'
+
+type FetchMagmaRecsParams = {
+  tree: TreeMappingResponse
+  lockedGrades: number[]
+}
 
 const EMPTY_RECS: Recommendations = { items: [], offset: 0, limit: 0, total: 0 }
 
@@ -22,14 +28,24 @@ export class PmRecommendationsModel {
     ),
   )
 
-  public readonly fetchMagmaRecsFx = createEffect((tree: TreeMappingResponse) =>
-    this.fetchRecs(tree, SolvingFlow.MAGMA, () =>
-      this.api.getMagmaRecsFx({ limit: RECOMMENDATIONS_LIMIT_PARAM }),
-    ),
+  public readonly fetchMagmaRecsFx = createEffect(
+    async ({ tree, lockedGrades }: FetchMagmaRecsParams) => {
+      const recs = await this.fetchRecs(tree, SolvingFlow.MAGMA, () =>
+        this.api.getMagmaRecsFx({ limit: RECOMMENDATIONS_LIMIT_PARAM }),
+      )
+      return {
+        ...recs,
+        items: filterLockedGradeRecs(recs.items, tree.treeMapping, lockedGrades),
+      }
+    },
   )
 
-  public readonly initRecommendationsFx = createEffect((tree: TreeMappingResponse) =>
-    Promise.all([this.fetchTeacherRecsFx(tree), this.fetchMagmaRecsFx(tree)]),
+  public readonly initRecommendationsFx = createEffect(
+    ({ tree, lockedGrades }: FetchMagmaRecsParams) =>
+      Promise.all([
+        this.fetchTeacherRecsFx(tree),
+        this.fetchMagmaRecsFx({ tree, lockedGrades }),
+      ]),
   )
 
   private fetchRecs = async (