@magmamath/students-features 0.9.14-rc.6 → 0.9.91

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -209,47 +209,5 @@ export declare const LOCALIZATION_CONFIGS: {
             weight: string;
         };
     };
-    "de-DE": {
-        locale: string;
-        "teacherFeedback.noComments": string;
-        "time.justNow": string;
-        "time.minuteAgo": string;
-        "time.minutesAgo": string;
-        "time.hourAgo": string;
-        "time.hoursAgo": string;
-        "time.dayAgo": string;
-        "time.daysAgo": string;
-        "time.monthAgo": string;
-        "time.monthsAgo": string;
-        "time.yearAgo": string;
-        "time.yearsAgo": string;
-        chat: {
-            anotherHint: string;
-            giveHint: string;
-            giveHintOpenChat: string;
-            answerAgain: string;
-            errorMessage: string;
-            howCanIHelp: string;
-            showError: string;
-            inputPlaceholder: string;
-        };
-        gifCelebrations: {
-            greatStart: string;
-            onTheWay: string;
-            almostThere: string;
-        };
-        exampleSolution: {
-            exampleSolution: string;
-            letMeThink: string;
-            aha: string;
-            errorMessage: string;
-        };
-        keyboard: {
-            length: string;
-            area: string;
-            volume: string;
-            weight: string;
-        };
-    };
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMhC,CAAA"}

package/dist/typescript/module/shared/translation/types.d.ts

@@ -8,7 +8,6 @@ export declare enum Locale {
     SW = "sv-SE",
     GB = "en-GB",
     CA = "en-CA",
-    SCT = "en-SCT",
-    DE = "de-DE"
+    SCT = "en-SCT"
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/module/shared/translation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wBAAwB,CAAA;AAOnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnD,MAAM,MAAM,YAAY,GAAG,OAAO,cAAc,CAAA;AAChD,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;AACxD,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,MAAM,CAAA;AAE5F,oBAAY,MAAM;IAChB,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,GAAG,WAAW;IACd,EAAE,UAAU;CACb"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/types.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,wBAAwB,CAAA;AAKnD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnD,MAAM,MAAM,YAAY,GAAG,OAAO,cAAc,CAAA;AAChD,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;AACxD,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,MAAM,CAAA;AAE5F,oBAAY,MAAM;IAChB,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,EAAE,UAAU;IACZ,GAAG,WAAW;CACf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.14-rc.6",
+  "version": "0.9.91",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/celebrations/helpers.ts

@@ -1,41 +1,39 @@
-import { ParticlesBatch } from './components/ParticleBatch'
-import { Spark } from './components/Spark'
-import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config'
-import { CelebrationVariant } from './types'
+import { ParticlesBatch } from './components/ParticleBatch';
+import { Spark } from './components/Spark';
+import { CELEBRATION_ICON_CONFIG, CELEBRATION_VARIANTS } from './config';
+import { CelebrationVariant } from './types';
 
-export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min
+export const randomRange = (min: number, max: number) => Math.random() * (max - min) + min;
 
 const isDateInRange = (currentDate: Date, startDateStr: string, endDateStr: string) => {
-  const [startDay, startMonth] = startDateStr.split('-').map(Number)
-  const [endDay, endMonth] = endDateStr.split('-').map(Number)
+  const [startDay, startMonth] = startDateStr.split('-').map(Number);
+  const [endDay, endMonth] = endDateStr.split('-').map(Number);
 
-  const currentYear = currentDate.getFullYear()
-  const startDate = new Date(currentYear, startMonth - 1, startDay)
+  const currentYear = currentDate.getFullYear();
+  const startDate = new Date(currentYear, startMonth - 1, startDay);
+  const endDate = new Date(currentYear, endMonth - 1, endDay + 1);
 
-  // If end month is earlier than start month, it spans to next year
-  const endYear = endMonth < startMonth ? currentYear + 1 : currentYear
-  const endDate = new Date(endYear, endMonth - 1, endDay + 1)
-
-  return currentDate >= startDate && currentDate <= endDate
-}
+  return currentDate >= startDate && currentDate <= endDate;
+};
 
 export const getIconForCurrentDate = () => {
-  const currentDate = new Date()
+  const currentDate = new Date();
 
   for (const celebration of CELEBRATION_ICON_CONFIG) {
     if (celebration.activePeriod) {
-      const { start, end } = celebration.activePeriod
+      const { start, end } = celebration.activePeriod;
       if (isDateInRange(currentDate, start, end)) {
-        return celebration.Icon
+        return celebration.Icon;
       }
     }
   }
 
-  return CELEBRATION_ICON_CONFIG[0].Icon
-}
+  return CELEBRATION_ICON_CONFIG[0].Icon;
+};
 
-const MainIcon = getIconForCurrentDate()
-export const generateParticle = (variant: CelebrationVariant) => {
+const MainIcon = getIconForCurrentDate();
+export const generateParticle = (variant: CelebrationVariant
+) => {
   const {
     elementsCount,
     angle,
@@ -46,20 +44,20 @@ export const generateParticle = (variant: CelebrationVariant) => {
     friction,
     life,
     angularAcceleration,
-    speedRange,
-  } = CELEBRATION_VARIANTS[variant]
+    speedRange
+  } = CELEBRATION_VARIANTS[variant];
 
   const sparkSpeedMin = speedRange?.spark?.[0]
   const sparkSpeedMax = speedRange?.spark?.[1]
   const mainSpeedMin = speedRange?.main?.[0]
   const mainSpeedMax = speedRange?.main?.[1]
 
-  const particles: ParticlesBatch[] = []
+  const particles: ParticlesBatch[] = [];
 
   for (let i = 0; i < elementsCount.spark; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180)
-    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax)
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to)
+    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
+    const randomSpeed = randomRange(sparkSpeedMin, sparkSpeedMax);
+    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
 
     particles.push({
       id: Math.random(),
@@ -76,12 +74,12 @@ export const generateParticle = (variant: CelebrationVariant) => {
       friction,
       Component: Spark,
       life,
-    })
+    });
   }
   for (let i = 0; i < elementsCount.star; i++) {
-    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180)
-    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax)
-    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to)
+    const randomAngle = randomRange((angle.from * Math.PI) / 180, (angle.to * Math.PI) / 180);
+    const randomSpeed = randomRange(mainSpeedMin, mainSpeedMax);
+    const randomAngularAcceleration = randomRange(angularAcceleration.from, angularAcceleration.to);
 
     particles.push({
       id: Math.random(),
@@ -98,8 +96,8 @@ export const generateParticle = (variant: CelebrationVariant) => {
       friction,
       Component: MainIcon,
       life,
-    })
+    });
   }
 
-  return particles
-}
+  return particles;
+};

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

@@ -30,14 +30,14 @@ export const Chatbot = ({
   iconSize,
   colorScheme = ColorScheme.Blue,
 }: ChatbotProps) => {
-  const isChatAllowed = useUnit(model.$chatAccess)
+  const alternatives = useUnit(model.$alternatives)
   const isAvailable = useStoreMap(model.$currentChatData, ({ isAvailable }) => isAvailable)
   model.t2s.setAudioConfig(textToSpeechConfig ?? null)
 
   const openChat = () => model.setIsOpen(true)
   const closeChat = () => model.setIsOpen(false)
 
-  if (!isAvailable || !isChatAllowed) {
+  if (!isAvailable || alternatives?.chatAccess === false) {
     return null
   }
 

package/src/features/chatbot/model/ChatBotModel.ts

@@ -7,7 +7,6 @@ import {
   restore,
   sample,
   type Store,
-  StoreWritable
 } from 'effector'
 import {
   ChatbotContext,
@@ -75,18 +74,14 @@ export class ChatbotModel {
 
   private readonly cache = new ChatsCacheModel()
 
-  public readonly $chatAccess: StoreWritable<boolean>
-
   public readonly $currentChatData = combine(
     { data: this.cache.$data, key: this.$currentKey },
     ({ data, key }) => (data[key] ? { ...data[key], key } : { ...defaultChatData(), key }),
   )
 
-  constructor({ api, $key, threadMessagesLimit, settings = {}, chatAccess }: ChatbotModelProps) {
+  constructor({ api, $key, threadMessagesLimit, settings = {} }: ChatbotModelProps) {
     this.api = new ChatbotAPI({ ...api, postMessage: this.threadManager.postMessage })
 
-    this.$chatAccess = chatAccess
-
     this.threadManager.setApi({ getHint: api.requestHint, sendMessage: api.sendMessage })
     if (threadMessagesLimit) {
       this.threadManager.setMessagesLimit(threadMessagesLimit)
@@ -150,16 +145,16 @@ export class ChatbotModel {
     }
 
     this.startConversation = attach({
-      source: { currentChatData: this.$currentChatData, chatAccess: this.$chatAccess },
+      source: { currentChatData: this.$currentChatData, alternatives: this.$alternatives },
       mapParams: (props: StartConversationProps | void, source) => ({
         ...props,
         ...source,
       }),
       effect: createEffect(
-        ({ currentChatData, initOnly, chatAccess }: StartConversationFxData) => {
+        ({ currentChatData, alternatives, initOnly }: StartConversationFxData) => {
           const { key, messages } = currentChatData
 
-          if (!chatAccess) return
+          if (!alternatives?.chatAccess) return
 
           if (messages.length) {
             if (initOnly) return
@@ -176,7 +171,7 @@ export class ChatbotModel {
 
     this.api.getAlternativesFx.doneData.watch((alternatives) => {
       // Use short text for another hint option if openChatEnabled
-      if (alternatives?.isOpenChatEnabled && IS_WEB) {
+      if (alternatives?.chatAccess && alternatives?.isOpenChatEnabled && IS_WEB) {
         this.textManager.update((creator) => ({
           anotherHintOption: creator.createOption('chat.giveHintOpenChat'),
         }))

package/src/features/chatbot/model/t2s.ts

@@ -86,12 +86,11 @@ export class ChatTextToSpeechModel {
           input: { text },
           voice: config?.voice ?? DEFAULT_VOICE,
           audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
-          enableTimePointing: [],
         })
 
         // Response might be different type based on provided AUDIO_CONFIG
-        if (typeof response.audioContent === 'string') {
-          audioPath = `data:audio/mpeg;base64,${response.audioContent}`
+        if (typeof response === 'string') {
+          audioPath = `data:audio/mpeg;base64,${response}`
         } else {
           audioPath = response?.audioContent ?? ''
         }

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

@@ -11,9 +11,6 @@ export type AlternativesOptions = {
 }
 
 export type GetAlternativesResponse = {
-  /**
-   * @deprecated chatAccess depends on assignment.lavaChat or class grade
-   */
   chatAccess?: boolean
   isOpenChatEnabled?: boolean
   version: string
@@ -59,7 +56,6 @@ export type PostMessageResponse = {
 export type GoogleTranslatePayload = {
   text: string[]
   targetLanguage: string
-  sourceLanguage?: string
 }
 
 export type GoogleTranslateResponse = {
@@ -81,18 +77,9 @@ export type GoogleText2SpeechPayload = {
     pitch: number
     speakingRate: number
   }
-  enableTimePointing?: string[]
 }
 
-export type Timepoint = {
-  markName: string
-  timeSeconds: number
-}
-
-export type GoogleText2SpeechResponse = {
-  audioContent?: string
-  timepoints?: Timepoint[]
-}
+export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }
 
 export type ChatHintPayload = {
   problemDescription: string

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

@@ -1,4 +1,4 @@
-import type { Store, StoreWritable } from 'effector'
+import type { Store } from 'effector'
 import {
   ChatHintPayload,
   ChatHintResponse,
@@ -17,7 +17,6 @@ import {
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
 import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
-import { WithAbortSignal } from '../../../lib/types/requests'
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -28,14 +27,10 @@ export type ChatbotMessages = {
 
 export type ChatbotApiRequests = {
   getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
-  sendMessage: (props: WithAbortSignal<SendMessagePayload>) => Promise<SendMessageResponse>
-  postMessage: (props: WithAbortSignal<PostMessagePayload>) => Promise<PostMessageResponse>
-  postTranslateText: (
-    props: WithAbortSignal<GoogleTranslatePayload>,
-  ) => Promise<GoogleTranslateResponse>
-  postTextToSpeech: (
-    props: WithAbortSignal<GoogleText2SpeechPayload>,
-  ) => Promise<GoogleText2SpeechResponse>
+  sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
+  postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
+  postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
+  postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
   /**
    * @deprecated merged with hint
    */
@@ -52,7 +47,6 @@ export type ChatbotModelProps = {
     requestHint: (props: ChatHintPayload) => Promise<ChatHintResponse>
   }
   threadMessagesLimit?: number
-  chatAccess: StoreWritable<boolean>
   settings?: ChatbotSettings
 }
 
@@ -83,7 +77,6 @@ export type StartConversationFxData = {
     messages: ConversationMessage[]
   }
   alternatives?: GetAlternativesResponse | null
-  chatAccess: boolean
 } & StartConversationProps
 
 export enum MessageVariant {

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -11,6 +11,7 @@ import Animated, {
 import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
+import { getEoaButtonColor } from '../helpers'
 
 type PracticeButtonGroupProps = {
   textContent: { leftButtonText?: string; rightButtonText?: string }
@@ -20,8 +21,6 @@ type PracticeButtonGroupProps = {
   buttonColor?: ButtonColor
 }
 
-const APPEARANCE_DELAY = 1600
-
 export const PracticeButtonGroup = ({
   textContent,
   isPracticeButtonVisible,
@@ -32,7 +31,7 @@ export const PracticeButtonGroup = ({
   const buttonsContainerOpacity = useSharedValue(0)
 
   useEffect(() => {
-    buttonsContainerOpacity.value = withDelay(APPEARANCE_DELAY, withTiming(1, { duration: 500 }))
+    buttonsContainerOpacity.value = withDelay(1000, withTiming(1, { duration: 500 }))
   }, [])
 
   return (
@@ -40,7 +39,7 @@ export const PracticeButtonGroup = ({
       <Animated.View
         entering={
           isPracticeButtonVisible
-            ? FadeInRight.delay(APPEARANCE_DELAY).duration(500).easing(Easing.ease)
+            ? FadeInRight.delay(1000).duration(500).easing(Easing.ease)
             : FadeInUp.duration(500)
         }
       >

package/src/features/feedback/model/model.ts

@@ -11,10 +11,7 @@ export type TeacherFeedbackModelProps = {
     getComments: (props: GetCommentsPayload) => Promise<GetCommentsResponse>
     updateCommentStatusSeen: (props: UpdateCommentStatusSeenPayload) => Promise<void>
   }
-  /**
-   * @deprecated - use socket and events directly in the client
-   */
-  socket?: any
+  socket: any
   credits: {
     $assignmentId: Store<string>
     $problemId: Store<string>

package/src/features/feedback/model/sockets.ts

@@ -2,23 +2,21 @@ import { createEvent } from 'effector'
 import { TeacherComment, FeedbackSocketEvents } from '../types'
 
 export class TeacherFeedbackSockets {
-  private readonly socket: any = null
+  private readonly socket: any
   public readonly commentAdded = createEvent<TeacherComment>()
   public readonly commentDeleted = createEvent<TeacherComment>()
 
   constructor(socket: any) {
-    if (socket) {
-      this.socket = socket
-    }
+    this.socket = socket
   }
 
   connect() {
-    this.socket?.on(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
-    this.socket?.on(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
+    this.socket.on(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
+    this.socket.on(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
   }
 
   off() {
-    this.socket?.off(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
-    this.socket?.off(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
+    this.socket.off(FeedbackSocketEvents.COMMENT_ADDED, this.commentAdded)
+    this.socket.off(FeedbackSocketEvents.COMMENT_DELETED, this.commentDeleted)
   }
 }

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -4,12 +4,11 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { COLORS, SelectGroup, SelectOptionSize, IS_MOBILE } from '@magmamath/react-native-ui'
 import { Locale, useText } from '../../../../shared/translation'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { SelectedLayout } from './types'
 import { getKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
 
-const MOBILE_LAYOUT_WIDTH = 1300
-
 export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()

package/src/features/keyboard/components/BasicLayout/BasicLayout.tsx

@@ -2,17 +2,17 @@ import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
-import { BASIC_MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 
 export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
   const t = useText()
   const keysByLocale = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.Basic]
   const keys = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
   const { width } = useWindowDimensions()
-  const isMobile = width <= BASIC_MOBILE_LAYOUT_WIDTH || IS_MOBILE
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
 
   if (isMobile && !props.children) {
     return null

package/src/features/keyboard/components/BasicLayout/keyboardGroups.ts

@@ -58,7 +58,3 @@ export const MATH_CURRENCY_US_KEYBOARD_GROUP: KeyboardGroup = {
   id: MathEntryKeyboardGroupId.CURRENCY_US,
   keys: [MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.CENT],
 }
-export const MATH_CURRENCY_DE_KEYBOARD_GROUP: KeyboardGroup = {
-  id: MathEntryKeyboardGroupId.CURRENCY_DE,
-  keys: [MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.POUND],
-}

package/src/features/keyboard/components/BasicPlusPlusLayout/BasicPlusPlusLayout.tsx

@@ -3,11 +3,10 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 import { getKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-const MOBILE_LAYOUT_WIDTH = 1220
-
 export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
   const { width } = useWindowDimensions()

package/src/features/keyboard/components/Keyboard.tsx

@@ -1,17 +1,15 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
 import { COLORS, IS_MOBILE, IS_WEB, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardKeyValue, KeyboardType } from '../types'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
 import { Numpad } from './Numpad/Numpad'
-import { MainLayout } from './MainLayout/MainLayout'
+import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
 import {
   getLayoutConfigStyles,
   KEYBOARD_SLIDE_DISTANCE,
   slideInAnimationSettings,
-} from './MainLayout/constants'
-import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
-import { KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
-import { isBasicLayout, isMobileWidth } from '../helpers'
+} from './constants'
+import { MainLayout } from './MainLayout'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -19,21 +17,15 @@ type KeyboardProps = {
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
   isDisabled?: boolean
-  isMainLayoutDisabled?: boolean
   showUnderlinedKeys?: boolean
   disabledKeys?: KeyboardKey[]
 }
 
-export const Keyboard = ({
-  style,
-  characterType,
-  isMainLayoutDisabled,
-  ...props
-}: KeyboardProps) => {
+export const Keyboard = ({ style, characterType, ...props }: KeyboardProps) => {
   const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
 
   const { width } = useWindowDimensions()
-  const isMobile = IS_MOBILE || isMobileWidth(width, characterType)
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
   const mobileStyles = useMemo(
     () => getLayoutConfigStyles(characterType, isMobile),
     [characterType, isMobile],
@@ -62,11 +54,7 @@ export const Keyboard = ({
         },
       ]}
     >
-      <MainLayout
-        {...props}
-        isDisabled={isMainLayoutDisabled || props.isDisabled}
-        characterType={characterType}
-      />
+      <MainLayout {...props} characterType={characterType} />
       <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )

package/src/features/keyboard/components/KeysList/KeysList.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { StyleSheet } from 'react-native'
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import {
   ButtonStyle,
   SelectGroup,

package/src/features/keyboard/components/{MainLayout/MainLayout.tsx → MainLayout.tsx}

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
-import { Animated, StyleSheet, View } from 'react-native'
+import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
-import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
-import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
+import { getLayoutByCharType } from '../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
+import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
 
 type LayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -26,8 +27,11 @@ export const MainLayout = ({
   const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
   const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
 
+  const { width } = useWindowDimensions()
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+
   const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
-  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !IS_MOBILE
+  const isUnderlinedLayoutVisible = isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile
 
   const animateFade = useCallback(
     (toValue: number, onComplete?: () => void) => {
@@ -56,11 +60,11 @@ export const MainLayout = ({
   }, [showUnderlinedKeys, animateFade])
 
   return (
-    <View style={[styles.container, IS_MOBILE && { flex: 1 }]}>
+    <View style={styles.container}>
       <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
       {isUnderlinedLayoutVisible && (
         <Animated.View style={{ opacity: fadeAnim }}>
-          <UnderlinedLayout {...props} showSlashKey={!isBasicPlusPlusLayout(characterType)} />
+          <UnderlinedLayout {...props} />
         </Animated.View>
       )}
     </View>
@@ -69,6 +73,6 @@ export const MainLayout = ({
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
+    flex: 1,
   },
 })

package/src/features/keyboard/components/UnderlinedLayout/UnderlinedLayout.tsx

@@ -4,14 +4,9 @@ import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
 
-type UnderlinedLayoutProps = {
-  showSlashKey?: boolean
-} & KeyboardLayoutProps
-
-export const UnderlinedLayout = (props: UnderlinedLayoutProps) => {
+export const UnderlinedLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
   const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
-  const keys = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
-  return <KeysList keys={keys} numOfRows={props.showSlashKey ? 2 : keys.length} {...props} />
+  return <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
 }