@magmamath/students-features 0.4.0-rc.0 → 0.4.0

package/src/features/endOfAssignment/components/Modal/ModalBackground.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS } from '@magmamath/react-native-ui'
+
+import { TrophyIcon } from './assets/TrophyIcon'
+import { SunrisingIcon } from './assets/SunrisingIcon'
+
+export const ModalBackground = () => (
+  <View style={[StyleSheet.absoluteFill, styles.backgroundContainer]}>
+    <View style={styles.bgImageLeft}>
+      <TrophyIcon size={466} />
+    </View>
+    <View style={styles.bgImageRight}>
+      <SunrisingIcon size={909} />
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+  },
+  bgImageLeft: {
+    position: 'absolute',
+    bottom: 0,
+    zIndex: -1,
+  },
+  bgImageRight: {
+    position: 'absolute',
+    zIndex: -2,
+  },
+})

package/src/features/endOfAssignment/components/Modal/assets/SunrisingIcon.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react'
+import { IconProps } from '@magmamath/react-native-ui'
+import Svg, { G, Path, Defs, LinearGradient, Stop } from 'react-native-svg'
+
+export const SunrisingIcon = (props: IconProps) => {
+  const height = (props.size ?? 0) * 0.606
+
+  return (
+    <Svg width={props.size} height={height} viewBox='0 0 909 551' fill='none' {...props}>
+      <G opacity={0.1}>
+        <Path
+          d='M164.04-598.854a893.984 893.984 0 01222.319 28.085L164.04 295.106v-893.96z'
+          fill='url(#paint0_linear_3505_1308)'
+        />
+        <Path
+          d='M-282.94-479.086a893.954 893.954 0 01206.577-86.837L164.04 295.106l-446.98-774.192z'
+          fill='url(#paint1_linear_3505_1308)'
+        />
+        <Path
+          d='M-610.152-151.874A893.997 893.997 0 01-474.67-330.365l638.71 625.471-774.192-446.98z'
+          fill='url(#paint2_linear_3505_1308)'
+        />
+        <Path
+          d='M-729.92 295.106a893.938 893.938 0 0128.086-222.319L164.04 295.106h-893.96z'
+          fill='url(#paint3_linear_3505_1308)'
+        />
+        <Path
+          d='M-610.152 742.086a893.994 893.994 0 01-86.837-206.577L164.04 295.106l-774.192 446.98z'
+          fill='url(#paint4_linear_3505_1308)'
+        />
+        <Path
+          d='M-282.94 1069.3a894.157 894.157 0 01-178.491-135.484l625.471-638.71-446.98 774.194z'
+          fill='url(#paint5_linear_3505_1308)'
+        />
+        <Path
+          d='M611.02-479.086a893.96 893.96 0 01178.491 135.482L164.04 295.106l446.98-774.192z'
+          fill='url(#paint6_linear_3505_1308)'
+        />
+        <Path
+          d='M938.232-151.874a894.096 894.096 0 0186.838 206.577L164.04 295.106l774.192-446.98z'
+          fill='url(#paint7_linear_3505_1308)'
+        />
+        <Path
+          d='M1058 295.106c0 74.991-9.44 149.684-28.09 222.319L164.04 295.106H1058z'
+          fill='url(#paint8_linear_3505_1308)'
+        />
+        <Path
+          d='M938.232 742.086A893.96 893.96 0 01802.75 920.577L164.04 295.106l774.192 446.98z'
+          fill='url(#paint9_linear_3505_1308)'
+        />
+        <Path
+          d='M611.02 1069.3a893.885 893.885 0 01-206.577 86.83L164.04 295.106 611.02 1069.3z'
+          fill='url(#paint10_linear_3505_1308)'
+        />
+        <Path
+          d='M164.04 1189.07a893.941 893.941 0 01-222.319-28.09L164.04 295.106v893.964z'
+          fill='url(#paint11_linear_3505_1308)'
+        />
+      </G>
+      <Defs>
+        <LinearGradient
+          id='paint0_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint1_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint2_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint3_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint4_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint5_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint6_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint7_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint8_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint9_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint10_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id='paint11_linear_3505_1308'
+          x1={164.04}
+          y1={383.036}
+          x2={930.076}
+          y2={383.036}
+          gradientUnits='userSpaceOnUse'
+        >
+          <Stop stopColor='#FF245F' />
+          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}

package/src/features/endOfAssignment/components/Modal/assets/TrophyIcon.tsx

@@ -0,0 +1,62 @@
+import { IconProps } from '@magmamath/react-native-ui'
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+export const TrophyIcon = (props: IconProps) => {
+  const height = (props.size ?? 0) * 0.982
+
+  return (
+    <Svg width={props.size} height={height} viewBox='0 0 466 458' fill='none' {...props}>
+      <Path
+        d='M258.454 244.45l-5.731 32.767 16.384 2.86c8.047 1.407 15.796 2.106 23.222 2.106 15.697.011 29.985-3.137 42.766-9.389 6.728-3.292 13.025-7.438 18.9-12.449 44.672-38.12 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575a57.996 57.996 0 00-17.935 2.206c-14.355 4.09-26.36 13.38-33.875 25.994l-32.379-14.332L250.03 88.75l39.162 17.326c6.274 2.771 13.247 2.916 19.632.388 6.374-2.516 11.373-7.382 14.055-13.7a24.56 24.56 0 0115.974-14.112c2.993-.853 6.052-1.13 9.056-.853a24.578 24.578 0 0111.961 4.422c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.841-18.822 112.224-32.024 127.144-2.195 2.494-4.213 4.412-5.909 5.864-14.632 12.47-33.465 16.483-57.586 12.271l-16.372-2.871zM37.623 282.187c7.429 0 15.173-.703 23.223-2.111l16.379-2.864-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.202-57.575-12.274-11.858-10.119-39.295-43.336-37.936-133.006.119-7.871 4.036-15.28 10.476-19.82a24.601 24.601 0 0121.015-3.57A24.606 24.606 0 017.075 92.764c2.683 6.318 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.41-32.37 14.328C26.57 60.055 14.57 50.762.213 46.67c-16.936-4.828-34.901-1.777-49.293 8.369-15.102 10.647-24.286 28.03-24.565 46.498-.652 42.947 4.926 120.686 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z'
+        fill='#FFD690'
+      />
+      <Path
+        opacity={0.1}
+        d='M335.095 272.795c6.728-3.293 13.025-7.438 18.9-12.449 44.672-38.121 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575 3.326 3.691 14.3 18.057.233 33.332a24.578 24.578 0 0111.961 4.423c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.84-18.822 112.223-32.024 127.144 0 0 21.659 24.497-3.226 43.608z'
+        fill='#D25B00'
+      />
+      <Path
+        d='M26.153 202.82L46.65 26.089a11.505 11.505 0 0111.429-10.18h213.797a11.504 11.504 0 0111.428 10.18l20.495 176.731c4.463 38.483-10.944 76.387-39.056 96.086l-8.179 5.73c-15.466 10.838-32.135 18.807-49.434 23.744-11.86 3.386-19.699 16.816-18.043 31.209l5.7 49.527h-59.619l5.7-49.527c1.656-14.393-6.182-27.825-18.043-31.209-17.299-4.937-33.967-12.905-49.434-23.744l-8.178-5.73c-28.115-19.699-43.522-57.604-39.059-96.086z'
+        fill='#FFD690'
+      />
+      <Path
+        opacity={0.1}
+        d='M169.03 359.583l1.752 36.868h22.546l-4.245-36.868c-1.652-14.388 6.185-27.823 18.046-31.203 17.293-4.933 33.964-12.903 49.428-23.744l8.18-5.731c28.112-19.698 43.52-57.597 39.063-96.084L283.299 26.086a11.505 11.505 0 00-11.429-10.18h-50.531l12.193 186.914c2.505 38.487-6.152 76.386-21.959 96.084l-4.6 5.731c-8.702 10.841-18.068 18.811-27.801 23.743-6.661 3.382-11.073 16.817-10.142 31.205z'
+        fill='#D25B00'
+      />
+      <Path
+        d='M63.166 437.528l203.607-4.774v-6.731c0-16.335-13.295-29.576-29.63-29.576H92.742c-16.335 0-29.576 13.241-29.576 29.576v11.505z'
+        fill='#FFD690'
+      />
+      <Path
+        opacity={0.1}
+        d='M171.477 396.447c16.328 0 29.574 13.247 29.574 29.575v7.907l65.722-.857v-7.05c0-16.328-13.246-29.575-29.574-29.575h-65.722z'
+        fill='#D25B00'
+      />
+      <Path
+        d='M209.405 432.82c15.086 0 27.324 12.238 27.324 27.336v100.01h42.122c8.43 0 15.264-6.834 15.264-15.264v-84.746c0-15.097-12.239-27.336-27.335-27.336h-57.375z'
+        fill='#2488BB'
+      />
+      <Path
+        opacity={0.5}
+        d='M35.846 543.408a8.835 8.835 0 1017.668 0v-88.343c0-6.569 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.834H66.41c-5.89 0-13.567 0-20.614 5.889-6.683 5.586-9.95 13.376-9.95 22.086v82.453z'
+        fill='#fff'
+      />
+      <Path
+        d='M35.837 460.156v84.489c0 8.57 6.912 15.518 15.483 15.518H278.85c8.43 0 15.264-6.833 15.264-15.263v-84.744c0-15.097-12.239-27.336-27.335-27.336H63.173c-15.097 0-27.336 12.239-27.336 27.336z'
+        fill='#AAD5EF'
+      />
+      <Path
+        opacity={0.1}
+        d='M208.151 432.762c15.309 0 27.727 12.418 27.727 27.739l.004 33.137h42.744c8.555 0 15.489-6.934 15.489-15.489l-.003-17.648c0-15.32-12.419-27.739-27.739-27.739h-58.222z'
+        fill='#D25B00'
+      />
+      <Path
+        opacity={0.3}
+        d='M73.782 17.1c-1.8.654-4.135 2.151-6.083 4.197-2.014 2.118-2.78 3.928-2.901 4.848-3.966 30.145-7.066 56.336-10.696 87.003-3.112 26.288-9.844 72.335-12.788 92.948-2.944 20.613-2.944 23.442-2.944 35.337 0 22.086 10.364 42.197 10.364 42.197-4.634-5.04-14.077-23.056-15.589-26.678-5.247-12.574-9.599-33.753-7.343-51.809 4.73-37.865 7.788-67.529 10.907-93.864 5.03-41.445 4.877-42.092 8.977-77.441 1.785-15.392 1.08-18.069 13.976-18.069h18.25c-1.451.417-2.836.86-4.13 1.33zM35.846 543.249a8.834 8.834 0 008.834 8.834 8.834 8.834 0 008.834-8.834v-88.343c0-6.57 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.835 0 0-1.158-.003-2.94-.003-13.712 0-13.571.004-20.618 5.893-6.683 5.586-9.95 13.376-9.95 22.086v82.453z'
+        fill='#fff'
+      />
+    </Svg>
+  )
+}

package/src/features/endOfAssignment/components/Modal/model.ts

@@ -0,0 +1,34 @@
+import { IS_WEB } from '@magmamath/react-native-ui'
+import { Animated } from 'react-native'
+
+export class ModalModel {
+  private static ANIMATION_DURATION = 200
+  private static INITIAL_OPACITY = 0
+  private static createTimingAnimation(
+    animation: Animated.Value,
+    toValue: number
+  ) {
+    return Animated.timing(animation, {
+      toValue,
+      duration: ModalModel.ANIMATION_DURATION,
+      useNativeDriver: !IS_WEB,
+    })
+  }
+
+  public animation
+  public animatedStyle
+
+  constructor() {
+    const opacity = new Animated.Value(ModalModel.INITIAL_OPACITY)
+    const opacityAnimation = ModalModel.createTimingAnimation(opacity, 1)
+    this.animation = {
+      show: () => {
+        opacityAnimation.reset()
+        opacityAnimation.start()
+      },
+    }
+    this.animatedStyle = {
+      opacity,
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  Button,
+  ButtonColor,
+  ButtonVariant,
+  COLORS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+import { EOAModalContentProps } from '../../types'
+import { NoAnswerContent } from './NoAnswerContent'
+import { PracticeButton } from '../../ui/PracticeButton'
+
+export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
+  const popUpData = useUnit(model.$popUpData)
+
+  const { stats, isExam, user } = popUpData ?? {}
+  const solved = stats?.solvedAmount ?? 0
+  const total = stats?.problemsAmount ?? 0
+  const buttonColorScheme = isExam ? ButtonColor.YELLOW : ButtonColor.BLUE
+
+  const practiceButtonVisible =
+    !popUpData?.newerAssignmentAvailable && (!isExam || (isExam && !!user?.practiceMode))
+
+  const handlePrimaryButtonPress = () => {
+    isExam ? onPracticePress?.() : model.goToFirstProblemPressed()
+    model.hidePopUp()
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.container}>
+        {!!textContent.title && (
+          <Typography variant="h2" style={{ color: COLORS.NEUTRAL_9 }}>
+            {textContent.title}
+          </Typography>
+        )}
+        {!!textContent.subtitle && (
+          <Typography variant="h4" style={{ color: COLORS.NEUTRAL_7 }}>
+            {textContent.subtitle}
+          </Typography>
+        )}
+      </View>
+      <NoAnswerContent solvedAmount={solved} problemsAmount={total} />
+      <View style={styles.buttonsContainer}>
+        <Button
+          variant={practiceButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
+          size="large"
+          colorScheme={popUpData?.isExam ? 'purple' : 'blue'}
+          style={{ text: { textTransform: 'uppercase' } }}
+          onPress={model.hidePopUpAndLeave}
+        >
+          {textContent.leftButtonText ?? ''}
+        </Button>
+
+        {practiceButtonVisible && (
+          <PracticeButton
+            onPress={handlePrimaryButtonPress}
+            text={textContent.rightButtonText}
+            colorScheme={buttonColorScheme}
+          />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: SPACING[400],
+    alignItems: 'center',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+    paddingVertical: SPACING[300],
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/endOfAssignment/components/NoAnswer/NoAnswerContent.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from 'react'
+import { View, StyleSheet, Text } from 'react-native'
+
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FONT_FAMILY,
+  IS_MOBILE,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import Animated, { Easing, useSharedValue, withDelay, withTiming } from 'react-native-reanimated'
+
+import { EOABadge } from '../../ui/EOABadge'
+import { AnimatedCardVariant } from '../../types'
+
+type NoAnswerContentProps = {
+  solvedAmount: number
+  problemsAmount: number
+}
+
+export const NoAnswerContent = ({ solvedAmount, problemsAmount }: NoAnswerContentProps) => {
+  const opacitySv = useSharedValue(0)
+
+  useEffect(() => {
+    opacitySv.value = withDelay(
+      100,
+      withTiming(1, {
+        duration: 300,
+        easing: Easing.inOut(Easing.ease),
+      }),
+    )
+  }, [])
+
+  return (
+    <Animated.View style={[styles.container, { opacity: opacitySv }]}>
+      <View style={styles.content}>
+        <EOABadge
+          color={COLORS.NEUTRAL_5}
+          variant={AnimatedCardVariant.CORRECT_ANSWER}
+          size={70}
+          iconSize={45}
+        />
+
+        <View style={styles.textContainer}>
+          <Typography variant="h4" style={styles.largeText}>
+            {solvedAmount}
+          </Typography>
+          <Typography style={styles.text}>
+            <Text style={{ paddingRight: 1 }}>{'/'}</Text>
+            {problemsAmount}
+          </Typography>
+        </View>
+      </View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    paddingHorizontal: SPACING[100],
+    marginTop: SPACING[300],
+    paddingTop: SPACING[100],
+    paddingBottom: 38,
+    marginBottom: SPACING[800],
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: BORDER_RADIUS[400],
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+    borderRadius: BORDER_RADIUS[200],
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    gap: SPACING[500],
+  },
+  iconWrapper: {
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: 100,
+    width: 70,
+    height: 70,
+    padding: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  largeText: {
+    fontSize: 48,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+    lineHeight: 48,
+    marginBottom: IS_MOBILE ? -7 : 0,
+    color: COLORS.NEUTRAL_5,
+  },
+  text: {
+    fontSize: 16,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '700',
+    color: '#E0E0E0',
+  },
+})

package/src/features/endOfAssignment/constants.ts

@@ -0,0 +1,53 @@
+import { COLORS } from '@magmamath/react-native-ui'
+
+import { AnimatedCardVariant, EOAModalVariant } from './types'
+
+export const SPARKS_ANIMATION_DELAY = 2000
+export const GOOD_DRAWING_CARD_APPEARENCE_DELAY = 1800
+
+export const MODALS_WITH_BACKGROUND = [
+  EOAModalVariant.HAS_CORRECT_ANSWERS,
+  EOAModalVariant.HAS_GOOD_DRAWING,
+  EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS,
+]
+
+export const VARIANT_COLORS: Record<AnimatedCardVariant, { initial: string; final: string; primary: string }> = {
+  [AnimatedCardVariant.CORRECT_ANSWER]: {
+    initial: COLORS.GREEN_2,
+    final: COLORS.GREEN_4,
+    primary: COLORS.PRIMARY_GREEN,
+  },
+  [AnimatedCardVariant.GOOD_DRAWING]: {
+    initial: COLORS.ORANGE_2,
+    final: COLORS.ORANGE_4,
+    primary: COLORS.PRIMARY_ORANGE,
+  },
+}
+
+export const ANIMATION_DELAYS = {
+  step3: 500,
+  celebrations: 140
+}
+
+export const CARD_DIMENSIONS = {
+  initialWidth: 85,
+  finalWidth: 375,
+  initialHeight: 85,
+  finalHeight: 175,
+}
+
+export const OPACITY = {
+  initial: 0,
+  final: 1,
+}
+
+export const BADGE_PARAMS = {
+  initialTranslateX: -9,
+  intermediateTranslateX: 230,
+  finalTranslateX: 40,
+  initialRotation: -180,
+  initialScale: 0.5,
+}
+
+export const SPRING_CONFIG = { stiffness: 241, damping: 18, mass: 0.75 }
+export const SPRING_CONFIG_STEP_3 = { stiffness: 168.8, damping: 15, mass: 0.75 }

package/src/features/endOfAssignment/helpers.ts

@@ -0,0 +1,28 @@
+import { MODALS_WITH_BACKGROUND } from './constants'
+import { EOAModalVariant } from './types'
+
+export const getModalContainerSize = (modalVariant: EOAModalVariant) => {
+  switch (modalVariant) {
+    case EOAModalVariant.EXAM_SUBMIT:
+    case EOAModalVariant.EXAM_SAFE_MODE_SUBMIT:
+      return { container: { width: 600, height: 384 } }
+    case EOAModalVariant.EXAM_PAUSED:
+    case EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED:
+      return { container: { width: 560, height: 338 } }
+    case EOAModalVariant.EXAM_SAFE_MODE_LEAVE:
+      return { container: { width: 550, height: 280 } }
+    case EOAModalVariant.HAS_GOOD_DRAWING:
+      return { container: { width: 957, height: 550 } }
+    case EOAModalVariant.HAS_CORRECT_ANSWERS:
+    case EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS:
+      return { container: { width: 957, height: 550 } }
+    default:
+      return { container: { width: 600, height: 429 } }
+  }
+}
+
+export const shouldDisplayModalBackground = (modalVariant: EOAModalVariant | null) => {
+  if (!modalVariant) return false
+
+  return MODALS_WITH_BACKGROUND.includes(modalVariant)
+}

package/src/features/endOfAssignment/hooks/useSparkAnimation.tsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react'
+import {
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  interpolate,
+} from 'react-native-reanimated'
+import { SpringConfig } from 'react-native-reanimated/lib/typescript/animation/springUtils'
+
+type UseSparkAnimationProps = {
+  id: string
+  initialDelay: number
+  rotationAngle: number
+  holdDelay: number
+  springConfig: SpringConfig
+  x: number
+  y: number
+  size: number
+}
+
+export const useSparkAnimation = ({
+  id,
+  initialDelay,
+  rotationAngle,
+  holdDelay,
+  springConfig,
+  x,
+  y,
+  size,
+}: UseSparkAnimationProps) => {
+  const progress = useSharedValue(0)
+  const rotation = useSharedValue(0)
+
+  useAnimatedReaction(
+    () => progress.value,
+    (current, previous) => {
+      if (typeof previous === 'number' && current < previous * 0.95) {
+        rotation.value = id === '2' ? -rotationAngle : rotationAngle
+      } else {
+        rotation.value = current * (id === '2' ? -rotationAngle : rotationAngle)
+      }
+    },
+    [rotation, progress],
+  )
+
+  useEffect(() => {
+    progress.value = withDelay(
+      initialDelay,
+      withRepeat(
+        withSequence(
+          withSpring(1, springConfig),
+          withDelay(holdDelay, withSpring(0, springConfig)),
+        ),
+        -1,
+      ),
+    )
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(progress.value, [0, 1], [0, 1])
+    return {
+      position: 'absolute',
+      top: y,
+      left: x,
+      width: size,
+      height: size,
+      opacity,
+      transform: [{ rotate: `${rotation.value}deg` }],
+      zIndex: 10,
+    }
+  }, [progress, rotation])
+
+  return { animatedStyle }
+}

package/src/features/endOfAssignment/index.ts

@@ -0,0 +1,3 @@
+export { EOAModal } from './components/EOAModal'
+export * from './types'
+export * from './model/model'