@magmamath/students-features 0.6.5 → 0.6.6-rc.1

package/dist/typescript/module/features/gifCelebrations/types/model.types.d.ts

@@ -0,0 +1,42 @@
+import { Store } from 'effector';
+export type CustomPrefetchMethod = (gifs: string[] | string) => Promise<unknown>;
+export type CustomGetCachePathMethod = (uri: string) => Promise<string | null>;
+export type GroupNumber = number;
+export type GifCelebrationApiRequests = {
+    getGifs: () => Promise<GifResponse>;
+};
+export type GifCelebrationCache = {
+    prefetchMethod?: CustomPrefetchMethod;
+};
+export type GifCelebrationsModelProps = {
+    api: GifCelebrationApiRequests;
+    totalProblems: Store<number>;
+    resolvedProblems: Store<number>;
+    customPrefetchMethod?: CustomPrefetchMethod;
+    customGetCachePathMethod?: CustomGetCachePathMethod;
+};
+export type GifsGroup = string[];
+export type GifsGroups = Record<`group${GroupNumber}`, GifsGroup>;
+export type GifObject = {
+    url: string;
+    isShown: boolean;
+    group: `group${GroupNumber}`;
+};
+export type GifsStructure = Record<`group${GroupNumber}`, GifObject[]>;
+/**
+ * Usually, the response contains 3 groups of gifs:
+ * - group1: early celebrations
+ * - group2: mid celebrations
+ * - group3: party
+ */
+export type GifResponse = {
+    data: GifsGroups;
+    ok: boolean;
+};
+export type GifsPayload = {
+    group: number;
+};
+export type ProblemsPercentageTable = Record<number, number>;
+export type ProgressValue = 0 | 1 | 2;
+export type TextComponentType = (text: string) => React.ReactNode;
+//# sourceMappingURL=model.types.d.ts.map

package/dist/typescript/module/features/gifCelebrations/types/model.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.types.d.ts","sourceRoot":"","sources":["../../../../../../src/features/gifCelebrations/types/model.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;AAChF,MAAM,MAAM,wBAAwB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;AAE9E,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAEhC,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAA;CACpC,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,CAAC,EAAE,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,GAAG,EAAE,yBAAyB,CAAA;IAC9B,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC5B,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IAC/B,oBAAoB,CAAC,EAAE,oBAAoB,CAAA;IAC3C,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;AAChC,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,WAAW,EAAE,EAAE,SAAS,CAAC,CAAA;AAEjE,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,QAAQ,WAAW,EAAE,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,WAAW,EAAE,EAAE,SAAS,EAAE,CAAC,CAAA;AACtE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAA;IAChB,EAAE,EAAE,OAAO,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAC5D,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAErC,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA"}

package/dist/typescript/module/index.d.ts

@@ -6,4 +6,5 @@ export * from './features/celebrations';
 export * from './features/endOfAssignment';
 export * from './features/formulaSheet';
 export * from './features/problemSelector';
+export * from './features/gifCelebrations';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA"}

package/dist/typescript/module/lib/helpers/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/lib/helpers/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,YAAW,CAAC;AAE7B,eAAO,MAAM,gBAAgB,cACsC,CAAA;AASnE,eAAO,MAAM,mBAAmB,SAAU,IAAI,WAuB7C,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/lib/helpers/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,YAAW,CAAA;AAE5B,eAAO,MAAM,gBAAgB,cACsC,CAAA;AASnE,eAAO,MAAM,mBAAmB,SAAU,IAAI,WAuB7C,CAAA"}

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

@@ -20,6 +20,11 @@ export declare const LOCALIZATION_CONFIGS: {
             howCanIHelp: string;
             showError: string;
         };
+        gifCelebrations: {
+            greatStart: string;
+            onTheWay: string;
+            almostThere: string;
+        };
     };
     "en-GB": {
         "teacherFeedback.noComments": string;
@@ -42,6 +47,11 @@ export declare const LOCALIZATION_CONFIGS: {
             howCanIHelp: string;
             showError: string;
         };
+        gifCelebrations: {
+            greatStart: string;
+            onTheWay: string;
+            almostThere: string;
+        };
     };
     "sv-SE": {
         "teacherFeedback.noComments": string;
@@ -64,6 +74,11 @@ export declare const LOCALIZATION_CONFIGS: {
             howCanIHelp: string;
             showError: string;
         };
+        gifCelebrations: {
+            greatStart: string;
+            onTheWay: string;
+            almostThere: 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":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}

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

@@ -21,6 +21,11 @@ export declare const setLocalization: import("effector").EventCallable<{
         howCanIHelp: string;
         showError: string;
     };
+    gifCelebrations: {
+        greatStart: string;
+        onTheWay: string;
+        almostThere: string;
+    };
 } | ((config: typeof LOCALIZATION_CONFIGS) => Translations)>;
 export declare const $localization: import("effector").StoreWritable<{
     "teacherFeedback.noComments": string;
@@ -43,5 +48,10 @@ export declare const $localization: import("effector").StoreWritable<{
         howCanIHelp: string;
         showError: string;
     };
+    gifCelebrations: {
+        greatStart: string;
+        onTheWay: string;
+        almostThere: string;
+    };
 }>;
 //# sourceMappingURL=model.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}

package/package.json

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

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

@@ -23,18 +23,18 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: (data) => ({
-          comments: data.comments.map((comment) => ({ ...comment, isRead: true })),
+        fn: data => ({
+          comments: data.comments.map(comment => ({ ...comment, isRead: true })),
           unreadMessagesCount: 0,
         }),
       }),
     )
-    .on(this.add, (state, { assignmentId, comment, isRead }) =>
+    .on(this.add, (state, { assignmentId, problemId, comment, isRead }) =>
       updateCommentsState({
         state,
         assignmentId,
-        problemId: comment.problemId,
-        fn: (data) => ({
+        problemId,
+        fn: data => ({
           comments: [...data.comments, comment],
           unreadMessagesCount: isRead ? data.unreadMessagesCount : data.unreadMessagesCount + 1,
         }),
@@ -45,7 +45,7 @@ export class TeacherCommentsModel {
         state,
         assignmentId,
         problemId,
-        fn: (data) => {
+        fn: data => {
           const commentToDelete = data.comments.find(({ _id }) => _id === commentId)
           if (!commentToDelete) return data
 
@@ -77,7 +77,7 @@ export class TeacherCommentsModel {
     sample({
       clock: this.add,
       source: { isOpen: $isOpen },
-      filter: ({ isOpen }, { problemId, comment }) => isOpen && comment.problemId === problemId,
+      filter: ({ isOpen }) => isOpen,
       fn: (_, { comment }) => ({
         ids: [comment._id],
       }),

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

@@ -56,7 +56,7 @@ export class TeacherFeedbackModel {
           comments?.length === 1 && comments[0]._id === EMPTY_COMMENT_ID
         return !isOpen && isOnlyNoCommentsMessage
       },
-      fn: ({ assignmentId, problemId }) => ({
+      fn: ({ assignmentId, problemId }, comment) => ({
         assignmentId,
         problemId,
         commentId: EMPTY_COMMENT_ID,
@@ -76,7 +76,7 @@ export class TeacherFeedbackModel {
         const hasUnreadComments = comments.some(({ isRead }) => !isRead)
         return isOpen && hasUnreadComments
       },
-      fn: (source) => {
+      fn: source => {
         const comments = findCommentsByCredits(source)
         return { ids: comments.map(({ _id }) => _id) }
       },
@@ -97,8 +97,9 @@ export class TeacherFeedbackModel {
 
     sample({
       clock: this.sockets.commentDeleted,
-      fn: (comment) => ({
-        assignmentId: comment.exerciseId,
+      source: { assignmentId: credits.$assignmentId },
+      fn: ({ assignmentId }, comment) => ({
+        assignmentId,
         problemId: comment.problemId,
         commentId: comment._id,
       }),
@@ -112,11 +113,10 @@ export class TeacherFeedbackModel {
         problemId: credits.$problemId,
         isOpen: this.$isOpen,
       },
-      filter: ({ assignmentId }, comment) => assignmentId === comment.exerciseId,
       fn: ({ assignmentId, problemId, isOpen }, comment) => ({
         comment,
         assignmentId,
-        problemId,
+        problemId: comment.problemId,
         isRead: isOpen && comment.problemId === problemId,
       }),
       target: this.comments.add,

package/src/features/gifCelebrations/GifCelebrations.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react'
+import { Gif } from './components/Gif'
+import { Progress } from './components/Progress'
+import { ContentContainer } from './components/ContentContainer'
+import { Backdrop } from './components/Backdrop'
+import { Easing, runOnJS, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
+import { useUnit } from 'effector-react'
+import { ANIMATION_DURATION } from './constants'
+import { GifCelebrationsModel } from './model/GifCelebrations.model'
+import { ProgressValue, TextComponentType } from './types/model.types'
+
+type GifCelebrationsProps = {
+  model: GifCelebrationsModel
+  TextComponent: TextComponentType
+}
+
+export const GifCelebrations = ({ model, TextComponent }: GifCelebrationsProps) => {
+  const [totalProblems, resolvedProblems, activeGif] = useUnit([
+    model.$totalProblems,
+    model.$resolvedProblems,
+    model.$activeGif,
+  ])
+
+  const completedPercent =
+    resolvedProblems && totalProblems && Math.round((resolvedProblems / totalProblems) * 100)
+
+  const progress = useSharedValue<ProgressValue>(0)
+
+  const stopAnimation = () => {
+    model.stop()
+    progress.value = 0
+  }
+
+  const playAnimation = () => {
+    progress.value = withSequence(
+      withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.52, 0.16, 0.26, 0.77),
+      }),
+      withTiming(
+        2,
+        {
+          duration: ANIMATION_DURATION,
+          easing: Easing.bezier(0.71, 0.09, 0.49, 0.89),
+        },
+        () => runOnJS(stopAnimation)(),
+      ),
+    )
+  }
+
+  useEffect(() => {
+    model.initialize()
+  }, [])
+
+  useEffect(() => {
+    if (activeGif) {
+      playAnimation()
+    }
+  }, [activeGif])
+
+  if (!activeGif) {
+    return null
+  }
+
+  return (
+    <Backdrop progress={progress}>
+      <ContentContainer progress={progress}>
+        <Gif
+          gifObject={activeGif}
+          getCachePathMethod={model.cache.getCachePathMethod}
+          TextComponent={TextComponent}
+        />
+        <Progress progress={progress} completedPercent={completedPercent} />
+      </ContentContainer>
+    </Backdrop>
+  )
+}

package/src/features/gifCelebrations/components/Backdrop.tsx

@@ -0,0 +1,41 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import Animated, { useAnimatedStyle, interpolateColor, SharedValue } from 'react-native-reanimated'
+import { BACKDROP_COLOR } from '../constants'
+import { ProgressValue } from '../types/model.types'
+
+type BackdropProps = {
+  children: React.ReactNode
+  progress: SharedValue<ProgressValue>
+}
+
+export const Backdrop = ({ children, progress }: BackdropProps) => {
+  const { width, height } = useWindowDimensions()
+
+  const backdropAnimatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1, 2],
+        [BACKDROP_COLOR.INITIAL, BACKDROP_COLOR.FINAL, BACKDROP_COLOR.INITIAL],
+      ),
+    }),
+    [progress],
+  )
+
+  return (
+    <Animated.View style={[styles.backdrop, { width, height }, backdropAnimatedStyle]}>
+      {children}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    zIndex: 10100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(51, 51, 51, 0.33);',
+  },
+})

package/src/features/gifCelebrations/components/ContentContainer.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import { SPACING } from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
+import { CONTENT_CONTAINER } from '../constants'
+import { ProgressValue } from '../types/model.types'
+
+type ContentContainerProps = {
+  children: React.ReactNode
+  progress: SharedValue<ProgressValue>
+}
+
+export const ContentContainer = ({ children, progress }: ContentContainerProps) => {
+  const { width } = useWindowDimensions()
+
+  const RIGHT_POSITION =
+    width / 2 + CONTENT_CONTAINER.CONTAINER_WIDTH / 2 + CONTENT_CONTAINER.SAFE_AREA
+  const LEFT_POSITION = -RIGHT_POSITION - CONTENT_CONTAINER.SAFE_AREA
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          translateX: interpolate(progress.value, [0, 1, 2], [LEFT_POSITION, 0, RIGHT_POSITION]),
+        },
+        {
+          rotate: `${interpolate(progress.value, [0, 1, 2], [-CONTENT_CONTAINER.ANGLE, 0, CONTENT_CONTAINER.ANGLE])}deg`,
+        },
+      ],
+    }),
+    [progress, RIGHT_POSITION, LEFT_POSITION],
+  )
+
+  return <Animated.View style={[styles.container, animatedStyles]}>{children}</Animated.View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: CONTENT_CONTAINER.CONTAINER_WIDTH,
+    alignItems: 'center',
+    gap: SPACING[800],
+    position: 'absolute',
+  },
+})

package/src/features/gifCelebrations/components/Gif.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet, View, Image } from 'react-native'
+import React, { useLayoutEffect, useState } from 'react'
+import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import { CustomGetCachePathMethod, GifObject, TextComponentType } from '../types/model.types'
+import { MAX_GIF_SIZE, MIN_GIF_SIZE } from '../constants'
+import { useText } from '../../../shared/translation'
+import { getGifLabel } from '../helpers'
+
+type GifProps = {
+  gifObject: GifObject
+  getCachePathMethod?: CustomGetCachePathMethod
+  TextComponent: TextComponentType
+}
+
+type Size = {
+  width: number
+  height: number
+}
+
+export const Gif = ({ gifObject, getCachePathMethod, TextComponent }: GifProps) => {
+  const [size, setSize] = useState<Size | null>(null)
+  const [pathOrUri, setPathOrUri] = useState<string>('')
+
+  const t = useText()
+
+  useLayoutEffect(() => {
+    const loadImageSize = async () => {
+      const path = getCachePathMethod
+        ? (await getCachePathMethod(gifObject.url)) || gifObject.url
+        : gifObject.url
+
+      Image.getSize(path, (width, height) => {
+        setSize({
+          width: Math.max(MIN_GIF_SIZE, Math.min(MAX_GIF_SIZE.WIDTH, width)),
+          height: Math.max(MIN_GIF_SIZE, Math.min(MAX_GIF_SIZE.HEIGHT, height)),
+        })
+
+        setPathOrUri(path)
+      })
+    }
+
+    loadImageSize()
+  }, [gifObject.url])
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        {size && pathOrUri && (
+          <Image
+            alt="Funny celebration animated image"
+            source={{
+              uri: pathOrUri,
+            }}
+            width={size.width}
+            height={size.height}
+            style={[styles.image, { width: size.width, height: size.height }]} //this sizes duplication is needed for compatibility with web and rn
+          />
+        )}
+        <View style={styles.textContainer}>
+          {TextComponent(t(getGifLabel(Number(gifObject.group.replace('group', '')))))}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+  },
+  container: {
+    padding: SPACING[1600],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  image: {
+    borderRadius: BORDER_RADIUS[100],
+  },
+  textContainer: {
+    position: 'absolute',
+    bottom: 74,
+    alignSelf: 'center',
+  },
+})

package/src/features/gifCelebrations/components/Progress.tsx

@@ -0,0 +1,116 @@
+import { StyleSheet, View, Image, Platform } from 'react-native'
+import React from 'react'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, SharedValue, interpolate } from 'react-native-reanimated'
+import confettiImage from '../assets/confetti.webp'
+import { ProgressValue } from '../types/model.types'
+
+const MIN_WIDTH_FOR_ONE_DIGIT = 12
+const MIN_WIDTH_FOR_TWO_DIGITS = 15
+const IS_WEB = Platform.OS === 'web'
+
+type ProgressProps = {
+  progress: SharedValue<ProgressValue>
+  completedPercent: number
+}
+
+export const Progress = ({ progress, completedPercent }: ProgressProps) => {
+  const progressLineWidth = (() => {
+    if (completedPercent <= 9) {
+      return MIN_WIDTH_FOR_ONE_DIGIT
+    }
+    if (completedPercent <= 15) {
+      return MIN_WIDTH_FOR_TWO_DIGITS
+    }
+    return completedPercent
+  })()
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      width: `${interpolate(
+        progress.value,
+        [0, 1, 2],
+        [0, progressLineWidth, progressLineWidth],
+      )}%`,
+    }),
+    [progress, progressLineWidth],
+  )
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        <View style={styles.progressContainer}>
+          <Animated.View style={[styles.progress, animatedStyles]}>
+            <Typography variant={HeadingVariants.H1} style={styles.percent}>
+              {`${completedPercent}%`}
+            </Typography>
+          </Animated.View>
+        </View>
+        <Image
+          source={
+            IS_WEB
+              ? {
+                  uri: confettiImage,
+                }
+              : require('../assets/confetti.webp')
+          }
+          style={styles.confetti}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+    height: 116,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingLeft: SPACING[400],
+    paddingRight: SPACING[200],
+    gap: SPACING[100],
+  },
+  progressContainer: {
+    height: 50,
+    flexGrow: 1,
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: 90,
+    overflow: 'hidden',
+  },
+  progress: {
+    position: 'absolute',
+    height: '100%',
+    backgroundColor: COLORS.PRIMARY_BLUE,
+    borderRadius: BORDER_RADIUS[200],
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    paddingRight: 10.6,
+    overflow: 'hidden',
+  },
+  confetti: {
+    width: 75,
+    height: 70,
+    marginHorizontal: SPACING[200],
+  },
+  percent: {
+    position: 'absolute',
+    paddingRight: 10,
+    color: COLORS.NEUTRAL_1,
+    fontWeight: '700',
+  },
+})

package/src/features/gifCelebrations/constants.ts

@@ -0,0 +1,25 @@
+export const BACKDROP_COLOR = {
+  INITIAL: 'rgba(51, 51, 51, 0)',
+  FINAL: 'rgba(51, 51, 51, 0.66)',
+}
+
+export const CONTENT_CONTAINER = {
+  ANGLE: 5,
+  CONTAINER_WIDTH: 769,
+  SAFE_AREA: 44, // to be sure that the content is not cut off on the edges because of rotate transform
+}
+
+export const ANIMATION_DURATION = 1750
+export const MIN_PROBLEMS_TO_SHOW_GIF = 6
+
+export const MAX_GIF_SIZE = {
+  WIDTH: 480,
+  HEIGHT: 300,
+}
+export const MIN_GIF_SIZE = 300
+
+export const GROUPS_PERCENTAGES = {
+  group1: [15, 20, 25, 30], // Early celebrations
+  group2: [33, 40, 45, 50], // Mid celebrations
+  group3: [60, 66, 75, 80], // Party
+}