Release/2.5.3 [main]

src/i18n/en/translation.json

@@ -336,6 +336,7 @@
     "networkError": "Network Error",
     "timeRemaining": "{{time}} remaining",
     "forItem": "for this item",
-    "noApplets": "No applets"
+    "noApplets": "No applets",
+    "noActivities": "No activities are available for you to complete right now"
   }
 }

src/i18n/fr/translation.json

@@ -355,6 +355,7 @@
     "networkError": "Erreur réseau",
     "timeRemaining": "{{time}} restantes",
     "forItem": "pour cet objet",
-    "noApplets": "Pas d'applets"
+    "noApplets": "Pas d'applets",
+    "noActivities": "Aucune activité n'est disponible pour le moment"
   }
 }

src/widgets/ActivityGroups/ui/ActivityCard/ActivityCardRestartResume.tsx

@@ -83,15 +83,14 @@ export const ActivityCardRestartResume = ({
               padding: '10px 10px',
               transition: 'all 0.2s',
               minWidth: '120px',
+              mt: '20px',
             }}
           >
-            <Box display="flex" flex={1} flexDirection="row" mt={2}>
-              <img src={ActivityRestartIcon} alt="Activity Restart Icon" />
+            <img src={ActivityRestartIcon} alt={String(t('additional.restart'))} />
 
-              <Text sx={{ marginLeft: 1 }} variant="body1" fontSize="16px">
-                {t('additional.restart')}
-              </Text>
-            </Box>
+            <Text sx={{ marginLeft: 1 }} variant="body1" fontSize="16px">
+              {t('additional.restart')}
+            </Text>
           </ButtonBase>
         </Box>
       ) : (

src/widgets/ActivityGroups/ui/ActivityGroup.tsx

@@ -1,6 +1,8 @@
 import { ActivityCard } from './ActivityCard';
+import { EmptyState } from './EmptyState';
 
 import { ActivityListGroup } from '~/abstract/lib/GroupBuilder';
+import ChecklistIcon from '~/assets/checklist-icon.svg';
 import { Theme } from '~/shared/constants';
 import Box from '~/shared/ui/Box';
 import Text from '~/shared/ui/Text';
@@ -10,16 +12,15 @@ type Props = {
   group: ActivityListGroup;
 };
 
-export const ActivityGroup = ({ group }: Props) => {
+export const ActivityGroup = ({ group: { name, activities } }: Props) => {
   const { t } = useCustomTranslation();
 
   return (
-    <Box data-testid={`${group.name}-block`}>
+    <Box data-testid={`${name}-block`}>
       <Text
         variant="h3"
         color={Theme.colors.light.onSurface}
         sx={{
-          marginTop: '24px',
           marginBottom: '16px',
           fontFamily: 'Atkinson',
           fontSize: '22px',
@@ -28,18 +29,22 @@ export const ActivityGroup = ({ group }: Props) => {
           lineHeight: '28px',
         }}
       >
-        {t(group.name)}
+        {t(name)}
       </Text>
 
       <Box display="flex" flex={1} flexDirection="column">
-        {group.activities.map((activity) => {
-          return (
-            <ActivityCard
-              key={`${activity.eventId}_${activity.targetSubject?.id}`}
-              activityListItem={activity}
-            />
-          );
-        })}
+        {activities.length ? (
+          activities.map((activity) => {
+            return (
+              <ActivityCard
+                key={`${activity.eventId}_${activity.targetSubject?.id}`}
+                activityListItem={activity}
+              />
+            );
+          })
+        ) : (
+          <EmptyState icon={ChecklistIcon} description={t('noActivities')} />
+        )}
       </Box>
     </Box>
   );

src/widgets/ActivityGroups/ui/ActivityGroupList.tsx

@@ -1,13 +1,16 @@
-import { useContext, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 
-import Container from '@mui/material/Container';
+import { Container } from '@mui/material';
 import { subMonths } from 'date-fns';
 
 import { ActivityGroup } from './ActivityGroup';
+import { EmptyState } from './EmptyState';
 import { AppletDetailsContext } from '../lib';
 import { useActivityGroups, useEntitiesSync, useIntegrationsSync } from '../model/hooks';
 
+import { ActivityGroupType } from '~/abstract/lib/GroupBuilder';
 import AppletDefaultIcon from '~/assets/AppletDefaultIcon.svg';
+import ChecklistIcon from '~/assets/checklist-icon.svg';
 import { useCompletedEntitiesQuery } from '~/entities/activity';
 import { AvatarBase, BootstrapModal } from '~/shared/ui';
 import Box from '~/shared/ui/Box';
@@ -39,6 +42,27 @@ export const ActivityGroupList = () => {
 
   const { groups } = useActivityGroups({ applet, events, assignments });
 
+  const renderedGroups = useMemo(() => {
+    const hasActivities = groups.some((g) => g.activities.length);
+
+    if (hasActivities) {
+      // Only show the available group if there are no in-progress activities
+      const showAvailableGroup = !groups.some(
+        (g) => g.type === ActivityGroupType.InProgress && g.activities.length,
+      );
+
+      // Filter out empty groups, but show the available group based on above logic
+      return groups
+        .filter(
+          (g) =>
+            g.activities.length || (g.type === ActivityGroupType.Available && showAvailableGroup),
+        )
+        .map((g) => <ActivityGroup key={g.name} group={g} />);
+    } else {
+      return <EmptyState flex={1} icon={ChecklistIcon} description={t('noActivities')} />;
+    }
+  }, [groups, t]);
+
   const onCardAboutClick = () => {
     if (!isAppletAboutExist) return;
 
@@ -52,8 +76,8 @@ export const ActivityGroupList = () => {
   }
 
   return (
-    <Container sx={{ flex: '1' }}>
-      <Box display="flex" gap="16px" marginTop="24px" alignItems="center">
+    <Container sx={{ display: 'flex', flexDirection: 'column', flex: '1' }}>
+      <Box display="flex" gap="16px" marginY="24px" alignItems="center">
         <AvatarBase
           src={isAppletImageExist ? applet.image : AppletDefaultIcon}
           name={applet.displayName}
@@ -80,16 +104,12 @@ export const ActivityGroupList = () => {
         </Text>
       </Box>
 
-      <Box>
+      <Box display="flex" flexDirection="column" flex={1} gap="48px">
         {/* The consent to share content is temporarly hidden due to UI changes. */}
         {/* Need to clarify with BA`s or something. If the component is no need anymore the component/slice/other business logic related to this feature should be removed */}
         {/* <SharedContentConsent appletId={applet.id} /> */}
 
-        {groups
-          .filter((g) => g.activities.length)
-          .map((g) => (
-            <ActivityGroup group={g} key={g.name} />
-          ))}
+        {renderedGroups}
       </Box>
       <BootstrapModal
         show={isAboutOpen}

src/widgets/ActivityGroups/ui/EmptyState.tsx

@@ -0,0 +1,29 @@
+import { Avatar, Box, BoxProps } from '@mui/material';
+
+import { Theme } from '~/shared/constants';
+import { Text } from '~/shared/ui';
+
+type Props = BoxProps & {
+  icon: string;
+  description: string;
+};
+
+export const EmptyState = ({ icon, description, ...rest }: Props) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      py="16px"
+      gap="16px"
+      {...rest}
+    >
+      <Avatar src={icon} sx={{ width: '80px', height: '80px', borderRadius: 0 }} />
+      <Text variant="h4" color={Theme.colors.light.outline} fontSize="24px" lineHeight="32px">
+        {description}
+      </Text>
+    </Box>
+  );
+};