@magmamath/students-features 1.8.1 → 1.8.2-rc.0

package/src/features/exampleSolution/ExampleSolutionModal.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { BaseModal, SPACING } from '@magmamath/react-native-ui'
+import { ExampleSolutionModalContent } from './components/ExampleSolutionModalContent'
+import { ExampleSolutionModalParams } from './types'
+
+type ExampleSolutionModalComponentProps = {
+  modal: {
+    closeModal: () => void
+    params: ExampleSolutionModalParams
+  }
+}
+
+export const ExampleSolutionModal = ({
+  modal: { closeModal, params },
+}: ExampleSolutionModalComponentProps) => (
+  <BaseModal
+    style={{
+      container: { paddingHorizontal: SPACING[800] },
+    }}
+    onClose={closeModal}
+    content={<ExampleSolutionModalContent params={params} />}
+  />
+)

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS, HeadingVariants, IS_WEB, SPACING, Typography } from '@magmamath/react-native-ui'
+import { ExampleSolutionModalParams } from '../types'
+import { QuestionSection } from './QuestionSection'
+import { SolutionSection } from './SolutionSection'
+import { useExampleSolution } from '../hooks/useExampleSolution'
+import { TEST_IDS } from '@magmamath/students-qa'
+import { useText } from '../../../i18n/i18n'
+
+type ExampleSolutionModalContentProps = {
+  params: ExampleSolutionModalParams
+}
+
+const CONTAINER_HEIGHT = 593
+
+export const ExampleSolutionModalContent = ({
+  params: { model, payload, cacheKey },
+}: ExampleSolutionModalContentProps) => {
+  const { result, status } = useExampleSolution({ model, payload, cacheKey })
+  const t = useText()
+
+  return (
+    <View
+      testID={TEST_IDS.EXAMPLE_SOLUTION_MODAL}
+      style={[
+        styles.container,
+        IS_WEB ? { maxHeight: CONTAINER_HEIGHT } : { height: CONTAINER_HEIGHT },
+      ]}
+    >
+      <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
+        {t('exampleSolution.exampleSolution')}
+      </Typography>
+      <View style={styles.content}>
+        <QuestionSection
+          status={status}
+          question={result?.question}
+          renderKatexComponent={model.renderKatexComponent}
+        />
+        <SolutionSection status={status} answer={result?.answer} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 880,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+  },
+  solutionContainer: {
+    width: 351,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  lavaIconContainer: {
+    position: 'absolute',
+    bottom: -24,
+    right: -26,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  messageBlock: {
+    position: 'absolute',
+    right: 58,
+    bottom: -12,
+  },
+})

package/src/features/exampleSolution/components/QuestionSection.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { COLORS, Loader, LoaderColor, SPACING } from '@magmamath/react-native-ui'
+import Animated, { FadeOut } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+type QuestionSectionProps = {
+  question?: string
+  status: ExampleSolutionStatuses
+  renderKatexComponent: (katexString: string) => React.ReactNode
+}
+
+export const QuestionSection = ({
+  question,
+  status,
+  renderKatexComponent,
+}: QuestionSectionProps) => {
+  return (
+    <View style={styles.container} testID={TEST_IDS.EXAMPLE_SOLUTION_QUESTION_SECTION}>
+      {question && <View style={styles.katexContainer}>{renderKatexComponent(question)}</View>}
+      {status === ExampleSolutionStatuses.LOADING && (
+        <Animated.View exiting={FadeOut} style={styles.loaderContainer}>
+          <Loader size="large" color={LoaderColor.BLUE} />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  katexContainer: {
+    flex: 1,
+  },
+  loaderContainer: {
+    paddingTop: 34,
+    position: 'absolute',
+    zIndex: 100,
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.NEUTRAL_1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SPACING[400],
+  },
+  errorText: {
+    color: COLORS.PRIMARY_RED,
+    textAlign: 'center',
+  },
+})

package/src/features/exampleSolution/components/SolutionSection.tsx

@@ -0,0 +1,117 @@
+import {
+  StyleSheet,
+  View,
+  Image,
+  ImageBackground,
+  ScrollView,
+  useWindowDimensions,
+} from 'react-native'
+import React from 'react'
+import { COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
+import Animated, { FadeIn } from 'react-native-reanimated'
+import { ExampleSolutionStatuses } from '../constants'
+import gridImage from '../assets/grid.webp'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+type SolutionSectionProps = {
+  answer?: string
+  status: ExampleSolutionStatuses
+}
+
+const CONTAINER_SIZES = {
+  width: 489,
+  height: 543,
+}
+const BORDER_WIDTH = 1
+const CONTAINER_HEIGHT_OFFSET = 160
+
+const gridImagePath = !IS_WEB ? Image.resolveAssetSource(gridImage).uri : gridImage
+
+export const SolutionSection = ({ answer, status }: SolutionSectionProps) => {
+  const { height } = useWindowDimensions()
+
+  const shouldShowAnswer =
+    answer &&
+    (status === ExampleSolutionStatuses.DONE_DATA || status === ExampleSolutionStatuses.CACHE)
+
+  return (
+    <View
+      style={[styles.container, IS_WEB && { maxHeight: height - CONTAINER_HEIGHT_OFFSET }]}
+      testID={TEST_IDS.EXAMPLE_SOLUTION_SOLUTION_SECTION}
+    >
+      <ScrollView
+        style={styles.solutionScroll}
+        contentContainerStyle={styles.solutionScrollContent}
+        bounces
+      >
+        {IS_WEB ? (
+          <ImageBackground
+            resizeMode="repeat"
+            style={[styles.gridImageWeb]}
+            source={{ uri: gridImagePath }}
+          >
+            {shouldShowAnswer && (
+              <Animated.Text
+                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+                style={styles.solutionText}
+              >
+                {answer}
+              </Animated.Text>
+            )}
+          </ImageBackground>
+        ) : (
+          <>
+            <ImageBackground
+              resizeMode="repeat"
+              style={styles.gridImageRn}
+              source={{ uri: gridImagePath }}
+            />
+            {shouldShowAnswer && (
+              <Animated.Text
+                entering={status === 'cache' ? undefined : FadeIn.delay(1000).duration(500)}
+                style={styles.solutionText}
+              >
+                {answer}
+              </Animated.Text>
+            )}
+          </>
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: CONTAINER_SIZES.width,
+    height: CONTAINER_SIZES.height,
+    overflow: 'hidden',
+    borderRadius: 8,
+    borderWidth: BORDER_WIDTH,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  gridImageRn: {
+    top: -327,
+    width: '100%',
+    height: '150%',
+    position: 'absolute',
+  },
+  gridImageWeb: {
+    width: '100%',
+    height: '100%',
+  },
+  solutionScroll: {
+    flex: 1,
+  },
+  solutionScrollContent: {
+    minHeight: CONTAINER_SIZES.height - BORDER_WIDTH * 2,
+    width: '100%',
+  },
+  solutionText: {
+    fontFamily: 'PlaypenSans-Light',
+    fontSize: 28,
+    marginHorizontal: SPACING[800],
+    marginVertical: SPACING[400],
+    lineHeight: 36,
+  },
+})

package/src/features/exampleSolution/constants.ts

@@ -0,0 +1,5 @@
+export const enum ExampleSolutionStatuses {
+  LOADING = 'loading',
+  DONE_DATA = 'doneData',
+  CACHE = 'cache',
+}

package/src/features/exampleSolution/hooks/useExampleSolution.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { useUnit } from 'effector-react'
+import { ExampleSolutionModalParams, ExampleSolutionResponse } from '../types'
+import { ExampleSolutionStatuses } from '../constants'
+
+const ANIMATION_DELAY = 600
+
+type UseExampleSolutionReturn = {
+  result: ExampleSolutionResponse | null
+  status: ExampleSolutionStatuses
+}
+
+export const useExampleSolution = ({
+  model,
+  payload,
+  cacheKey,
+}: ExampleSolutionModalParams): UseExampleSolutionReturn => {
+  const exampleSolutionsCache = useUnit(model.cache.$state)
+  const [result, setResult] = useState<ExampleSolutionResponse | null>(null)
+  const [status, setStatus] = useState<ExampleSolutionStatuses>(ExampleSolutionStatuses.LOADING)
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null
+
+    const fetchExampleSolution = async () => {
+      try {
+        if (exampleSolutionsCache[cacheKey]) {
+          setResult(exampleSolutionsCache[cacheKey])
+          setStatus(ExampleSolutionStatuses.CACHE)
+          return
+        }
+
+        const startTime = Date.now()
+        const response = await model.api.generateExampleSolutionFx(payload)
+
+        setResult(response)
+        model.cache.addExampleSolution({ cacheKey, response })
+
+        const elapsedTime = Date.now() - startTime
+        if (elapsedTime >= ANIMATION_DELAY) {
+          setStatus(ExampleSolutionStatuses.DONE_DATA)
+        } else {
+          timer = setTimeout(() => {
+            setStatus(ExampleSolutionStatuses.DONE_DATA)
+          }, ANIMATION_DELAY - elapsedTime)
+        }
+      } catch (error) {
+        console.error('Failed to fetch example solution:', error)
+        setStatus(ExampleSolutionStatuses.DONE_DATA)
+      }
+    }
+
+    fetchExampleSolution()
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+    }
+  }, [])
+
+  return {
+    result,
+    status,
+  }
+}

package/src/features/exampleSolution/index.ts

@@ -0,0 +1,3 @@
+export * from './ExampleSolutionModal'
+export * from './model/ExampleSolution.model'
+export * from './types'

package/src/features/exampleSolution/model/ExampleSolution.model.ts

@@ -0,0 +1,15 @@
+import { ExampleSolutionModelProps } from '../types'
+import { ExampleSolutionsApi } from './ExampleSolutionApi'
+import { ExampleSolutionCache } from './ExampleSolutionCache'
+
+export class ExampleSolutionModel {
+  public readonly api
+  public readonly cache = new ExampleSolutionCache()
+
+  public readonly renderKatexComponent: (katexString: string) => React.ReactNode
+
+  constructor({ api, errorHandler, renderKatexComponent }: ExampleSolutionModelProps) {
+    this.api = new ExampleSolutionsApi({ api, errorHandler })
+    this.renderKatexComponent = renderKatexComponent
+  }
+}

package/src/features/exampleSolution/model/ExampleSolutionApi.ts

@@ -0,0 +1,29 @@
+import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
+import { ExampleSolutionApiRequests, ExampleSolutionErrorHandler } from '../types'
+import { createEffect, sample } from 'effector'
+import { getText } from '../../../i18n/i18n'
+
+type ExampleSolutionApiProps = {
+  api: ExampleSolutionApiRequests
+  errorHandler?: ExampleSolutionErrorHandler
+}
+
+export class ExampleSolutionsApi {
+  public readonly generateExampleSolutionFx
+  public readonly errorHandlerFx?: ExampleSolutionErrorHandler
+
+  public readonly errorHandlingFx = createEffect(() => {
+    if (!this.errorHandlerFx) return
+    this.errorHandlerFx(getText('exampleSolution.errorMessage'))
+  })
+
+  constructor({ api, errorHandler }: ExampleSolutionApiProps) {
+    this.generateExampleSolutionFx = createControllerEffect(api.generateExampleSolution)
+    this.errorHandlerFx = errorHandler
+
+    sample({
+      clock: this.generateExampleSolutionFx.fail,
+      target: this.errorHandlingFx,
+    })
+  }
+}

package/src/features/exampleSolution/model/ExampleSolutionCache.ts

@@ -0,0 +1,20 @@
+import { createEvent, createStore } from 'effector'
+import { ExampleSolutionResponse } from '../types'
+
+type AddExampleSolution = {
+  cacheKey: string
+  response: ExampleSolutionResponse
+}
+
+export class ExampleSolutionCache {
+  public readonly addExampleSolution = createEvent<AddExampleSolution>()
+  public readonly $state = createStore<Record<string, ExampleSolutionResponse>>({}).on(
+    this.addExampleSolution,
+    (state, exampleSolution) => {
+      return {
+        ...state,
+        [exampleSolution.cacheKey]: exampleSolution.response,
+      }
+    },
+  )
+}

package/src/features/exampleSolution/types.ts

@@ -0,0 +1,27 @@
+import { ExampleSolutionModel } from './model/ExampleSolution.model'
+
+export type ExampleSolutionPayload = {
+  question: string
+  answer: string
+  language: string
+  altText?: string
+  imageCdnId?: string
+}
+export type ExampleSolutionResponse = {
+  question: string
+  answer: string
+}
+export type ExampleSolutionApiRequests = {
+  generateExampleSolution: (body: ExampleSolutionPayload) => Promise<ExampleSolutionResponse>
+}
+export type ExampleSolutionErrorHandler = (errorMessage: string) => void
+export type ExampleSolutionModelProps = {
+  api: ExampleSolutionApiRequests
+  errorHandler?: ExampleSolutionErrorHandler
+  renderKatexComponent: (katexString: string) => React.ReactNode
+}
+export type ExampleSolutionModalParams = {
+  cacheKey: string
+  payload: ExampleSolutionPayload
+  model: ExampleSolutionModel
+}

package/src/features/uiMode/__tests__/getUIMode.test.ts

@@ -362,3 +362,67 @@ describe('answer area is SIMPLE only in simple mode when practicing, has variant
     expect(result.answerArea).toBe(UIMode.REGULAR)
   })
 })
+
+describe('K2 student in PM with special char types gets REGULAR answer area (special keyboard must show)', () => {
+  const k2PmBase = { practice: { isEnabled: true, grade: 1 } }
+
+  it('CURRENCY characterType → REGULAR', () => {
+    const result = getUIModeWithDefaults({
+      ...k2PmBase,
+      problem: {
+        answerType: AnswerType.HANDWRITING,
+        characterType: MyScriptMathCharacterTypes.CURRENCY,
+        hasAnswerVariants: false,
+      },
+    })
+    expect(result.answerArea).toBe(UIMode.REGULAR)
+  })
+
+  it('UNITS characterType → REGULAR', () => {
+    const result = getUIModeWithDefaults({
+      ...k2PmBase,
+      problem: {
+        answerType: AnswerType.HANDWRITING,
+        characterType: MyScriptMathCharacterTypes.UNITS,
+        hasAnswerVariants: false,
+      },
+    })
+    expect(result.answerArea).toBe(UIMode.REGULAR)
+  })
+
+  it('NUMBERS_AND_UNITS characterType → REGULAR', () => {
+    const result = getUIModeWithDefaults({
+      ...k2PmBase,
+      problem: {
+        answerType: AnswerType.HANDWRITING,
+        characterType: MyScriptMathCharacterTypes.NUMBERS_AND_UNITS,
+        hasAnswerVariants: false,
+      },
+    })
+    expect(result.answerArea).toBe(UIMode.REGULAR)
+  })
+
+  it('TIME characterType → REGULAR', () => {
+    const result = getUIModeWithDefaults({
+      ...k2PmBase,
+      problem: {
+        answerType: AnswerType.HANDWRITING,
+        characterType: MyScriptMathCharacterTypes.TIME,
+        hasAnswerVariants: false,
+      },
+    })
+    expect(result.answerArea).toBe(UIMode.REGULAR)
+  })
+
+  it('DEFAULT characterType → still SIMPLE (regression guard)', () => {
+    const result = getUIModeWithDefaults({
+      ...k2PmBase,
+      problem: {
+        answerType: AnswerType.HANDWRITING,
+        characterType: MyScriptMathCharacterTypes.DEFAULT,
+        hasAnswerVariants: false,
+      },
+    })
+    expect(result.answerArea).toBe(UIMode.SIMPLE)
+  })
+})

package/src/features/uiMode/uiMode.helpers.ts

@@ -25,12 +25,27 @@ export const isSimpleMode = ({ user, practice, assignment }: IsSimpleModeProps)
   return isBelowGradeK2(user.grade)
 }
 
+const SPECIAL_CHAR_TYPES = [
+  MyScriptMathCharacterTypes.CURRENCY,
+  MyScriptMathCharacterTypes.UNITS,
+  MyScriptMathCharacterTypes.NUMBERS_AND_UNITS,
+  MyScriptMathCharacterTypes.TIME,
+]
+
 export const getAnswerAreaMode = ({ practice, problem }: GetAnswerAreaModeProps): UIMode => {
   const isHandwritingNumbersWhole =
     problem.answerType === AnswerType.HANDWRITING &&
     problem.characterType === MyScriptMathCharacterTypes.NUMBERS_WHOLE
 
-  if (practice.isEnabled || problem.hasAnswerVariants || isHandwritingNumbersWhole) {
+  if (problem.hasAnswerVariants || isHandwritingNumbersWhole) {
+    return UIMode.SIMPLE
+  }
+
+  const needsSpecialKeyboard =
+    problem.answerType === AnswerType.HANDWRITING &&
+    SPECIAL_CHAR_TYPES.includes(problem.characterType)
+
+  if (practice.isEnabled && !needsSpecialKeyboard) {
     return UIMode.SIMPLE
   }
 

package/src/i18n/i18n.ts

@@ -8,6 +8,7 @@ export type TranslationKey = ParseKeys<typeof NAMESPACE>
 export type GetText = TFunction<typeof NAMESPACE>
 
 export const getText: GetText = ((key: TranslationKey, options?: object) =>
-  i18next.t(key, { ns: NAMESPACE, ...options })) as GetText
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (i18next.t as any)(key, { ns: NAMESPACE, ...options })) as GetText
 
 export const useText = (): GetText => useTranslation(NAMESPACE).t

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './features/endOfAssignment'
 export * from './features/formulaSheet'
 export * from './features/problemSelector'
 export * from './features/gifCelebrations'
+export * from './features/exampleSolution'
 export * from './features/keyboard'
 export * from './features/pmProgress'
 export * from './features/openEnded'