Ticket-88

frontend/specs/admin/reward.spec.ts

@@ -12,10 +12,20 @@ test('can add/update/delete rewards', async ({ browser }) => {
 
     // Update
     const updatedPrize = faker.random.words(2)
+
+    await adminPage.waitForSelector('text=Edit', { state: 'visible' });
     await adminPage.getByText('Edit').first().click()
+    await adminPage.waitForLoadState('networkidle');
+
+    await adminPage.waitForSelector('input[placeholder="Prize"]', { state: 'visible' });
     await adminPage.getByPlaceholder('Prize').fill(updatedPrize)
+
+    await adminPage.waitForSelector('text=Update reward', { state: 'visible' });
     await adminPage.getByText('Update reward').click()
+    await adminPage.waitForLoadState('networkidle');
 
     // Delete
+    await adminPage.waitForSelector('text=Delete', { state: 'visible' });
     await adminPage.getByText('Delete').first().click()
-})
+    await adminPage.waitForLoadState('networkidle');
+})

frontend/src/screens/study-landing.tsx

@@ -1,5 +1,5 @@
 import { Navigate, NavLink, useLoaderData } from 'react-router-dom'
-import { React } from '@common'
+import { React, useEffect } from '@common'
 import { colors } from '@theme'
 import { LearningPath, ParticipantStudy } from '@api'
 import { Page } from '@components'
@@ -18,20 +18,59 @@ import {
     Text,
     Title,
 } from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react'
 import Markdown from 'react-markdown'
 import { useLearningPathStudies } from './learner/studies';
 import { CompactStudyCard } from '../components/study/compact-study-card';
+import { notifications } from '@mantine/notifications';
+
+let notificationShownThisSession = false;
 
 export default function StudyLanding() {
     const env = useEnvironment()
-
     const study = useLoaderData() as ParticipantStudy
     const learningPathStudies = useLearningPathStudies(study?.learningPath)
 
+    const showEarnedPointsNotification = (points: number) => {
+        if (notificationShownThisSession) return;
+
+        notifications.show({
+            title: `You just earned ${points} points!`,
+            message: 'The longer the study, the more points you earn. Reach 200 points to unlock additional rewards.',
+            icon: <IconCheck size="1.1rem" />,
+            color: 'teal',
+            autoClose: 5000, 
+            styles: () => ({
+                description: { fontSize: '12px' },
+            }),
+        });
+
+        notificationShownThisSession = true;
+    };
+
+    useEffect(() => {
+        if (study.totalPoints > 0) {
+            // Delay to ensure it runs after any potential double renders
+            const timer = setTimeout(() => {
+                showEarnedPointsNotification(study.totalPoints);
+            }, 100);
+
+            return () => clearTimeout(timer);
+        }
+    }, [study.totalPoints]);
+
+    // Reset the flag when the component unmounts
+    useEffect(() => {
+        return () => {
+            notificationShownThisSession = false;
+        };
+    }, []);
+
     if (!study || !study.learningPath) {
         return <Navigate to='/studies' />
     }
 
+
     return (
         <Page hideFooter
             data-analytics-view
@@ -44,6 +83,7 @@ export default function StudyLanding() {
                     <LearningPathProgress learningPath={study.learningPath} studies={learningPathStudies} />
                 }
             </Card>
+
         </Page>
     )
 }