feat: add target subject label to activity cards

Make shared `TargetSubjectLabel` component which will also be used in
the activity screens.

Also fix missing translations and missing/incorrect use of i18next
plural forms in several `ActivityLabel` subcomponents.

src/i18n/en/translation.json

@@ -19,14 +19,17 @@
     "pleaseProvideAdditionalText": "Please provide additional text",
     "pleaseListenToAudio": "Please listen to the audio until the end.",
     "onlyNumbersAllowed": "Only numbers are allowed",
-    "question_count_plural": "{{length}} questions",
-    "question_count_singular": "{{length}} question",
+    "questionCount_one": "{{count}} question",
+    "questionCount_other": "{{count}} questions",
     "timedActivityTitle": "is a Timed Activity.",
     "youWillHaveToCompleteIt": "You will have {{hours}} hours {{minutes}} minutes to complete it.",
     "yourWorkWillBeSubmitted": "Your work will be auto-submitted when time runs out.",
-    "countOfCompletedQuestions": "{{countOfCompletedQuestions}} of {{length}} questions completed",
-    "activityFlowLength": "{{length}} activities",
-    "countOfCompletedActivities": "{{countOfCompletedActivities}} of {{length}} activities completed",
+    "countOfCompletedQuestions_one": "{{countOfCompletedQuestions}} of {{count}} question completed",
+    "countOfCompletedQuestions_other": "{{countOfCompletedQuestions}} of {{count}} questions completed",
+    "activityFlowLength_one": "{{count}} activity",
+    "activityFlowLength_other": "{{count}} activities",
+    "countOfCompletedActivities_one": "{{countOfCompletedActivities}} of {{count}} activity completed",
+    "countOfCompletedActivities_other": "{{countOfCompletedActivities}} of {{count}} activities completed",
     "pleaseCompleteOnThe": "Please complete on the",
     "mindloggerMobileApp": "MindLogger mobile app",
     "mustBeCompletedUsingMobileApp": "Please use the MindLogger mobile app",
@@ -305,6 +308,7 @@
       "successModalPrimaryAction": "Return to Admin App",
       "successModalSecondaryAction": "Dismiss"
     },
-    "charactersCount": "{{numCharacters}}/{{maxCharacters}} characters"
+    "charactersCount": "{{numCharacters}}/{{maxCharacters}} characters",
+    "targetSubjectLabel": "About {{name}}"
   }
 }

src/i18n/fr/translation.json

@@ -23,11 +23,14 @@
     "timedActivityTitle": "est une activité chronométrée.",
     "youWillHaveToCompleteIt": "Vous aurez {{hours}} heures {{minutes}} minutes pour le terminer.",
     "yourWorkWillBeSubmitted": "Votre travail sera automatiquement soumis lorsque le temps imparti sera écoulé.",
-    "question_count_plural": "{{length}} questions",
-    "question_count_singular": "{{length}} question",
-    "countOfCompletedQuestions": "{{countOfCompletedQuestions}} of {{length}} questions completed",
-    "activityFlowLength": "{{length}} activities",
-    "countOfCompletedActivities": "{{countOfCompletedActivities}} of {{length}} activities completed",
+    "questionCount_one": "{{count}} question",
+    "questionCount_other": "{{count}} questions",
+    "countOfCompletedQuestions_one": "{{countOfCompletedQuestions}} sur {{count}} question complétée",
+    "countOfCompletedQuestions_other": "{{countOfCompletedQuestions}} sur {{count}} questions complétées",
+    "activityFlowLength_one": "{{count}} activité",
+    "activityFlowLength_other": "{{count}} activités",
+    "countOfCompletedActivities_one": "{{countOfCompletedActivities}} sur {{count}} activité complétée",
+    "countOfCompletedActivities_other": "{{countOfCompletedActivities}} sur {{count}} activités complétées",
 
     "pleaseCompleteOnThe": "Please complete on the",
     "mindloggerMobileApp": "MindLogger mobile app",
@@ -324,6 +327,7 @@
       "successModalPrimaryAction": "Revenir à l'application d'administration",
       "successModalSecondaryAction": "Rejeter"
     },
-    "charactersCount": "{{numCharacters}}/{{maxCharacters}} caractères"
+    "charactersCount": "{{numCharacters}}/{{maxCharacters}} caractères",
+    "targetSubjectLabel": "À propos de {{name}}"
   }
 }

src/shared/utils/helpers/getSubjectName.ts

@@ -0,0 +1,7 @@
+import { SubjectDTO } from '~/shared/api/types/subject';
+
+export const getSubjectName = ({ firstName, lastName }: SubjectDTO) => {
+  const lastInitial = lastName[0] ? ` ${lastName[0]}.` : '';
+
+  return `${firstName}${lastInitial}`;
+};

src/shared/utils/helpers/index.ts

@@ -6,3 +6,4 @@ export * from './splitList';
 export * from './getInitials';
 export * from './delay';
 export * from './cutString';
+export * from './getSubjectName';

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

@@ -16,7 +16,7 @@ export const ActivityCardBase = (props: Props) => {
       sx={{
         backgroundColor: Theme.colors.light.surface,
         padding: '24px',
-        marginBottom: '36px',
+        marginBottom: '16px',
         border: `1px solid ${Theme.colors.light.surfaceVariant}`,
         borderRadius: '16px',
         minWidth: '343px',

src/widgets/ActivityGroups/ui/ActivityCard/ActivityLabel/ActivityAvailableLabel.tsx

@@ -11,12 +11,6 @@ type Props = {
 export const ActivityAvailableLabel = (props: Props) => {
   const { t } = useCustomTranslation();
 
-  const isActivitiesMoreThanOne = props.activityLength > 1;
-
-  const activityLabel = isActivitiesMoreThanOne
-    ? t('question_count_plural', { length: props.activityLength })
-    : t('question_count_singular', { length: props.activityLength });
-
   return (
     <Box
       data-testid="activity-available-label"
@@ -26,7 +20,10 @@ export const ActivityAvailableLabel = (props: Props) => {
         backgroundColor: Theme.colors.light.primary95,
       }}
     >
-      <ActivityLabelTypography text={activityLabel} color={Theme.colors.light.onPrimaryContainer} />
+      <ActivityLabelTypography
+        text={t('questionCount', { count: props.activityLength })}
+        color={Theme.colors.light.onPrimaryContainer}
+      />
     </Box>
   );
 };

src/widgets/ActivityGroups/ui/ActivityCard/ActivityLabel/ActivityFlowAvailableLabel.tsx

@@ -28,9 +28,7 @@ export const ActivityFlowAvailableLabel = ({ activityFlowLength }: Props) => {
     >
       <Avatar src={DocumentsIcon} sx={{ width: '18px', height: '18px' }} />
       <ActivityLabelTypography
-        text={t('activityFlowLength', {
-          length: activityFlowLength,
-        })}
+        text={t('activityFlowLength', { count: activityFlowLength })}
         color={Theme.colors.light.onPrimaryContainer}
       />
     </Box>

src/widgets/ActivityGroups/ui/ActivityCard/ActivityLabel/ActivityFlowInProgressLabel.tsx

@@ -30,7 +30,7 @@ export const ActivityFlowInProgressLabel = (props: Props) => {
       <Avatar src={DocumentsIcon} sx={{ width: '18px', height: '18px' }} />
       <ActivityLabelTypography
         text={t('countOfCompletedActivities', {
-          length: props.activityFlowLength,
+          count: props.activityFlowLength,
           countOfCompletedActivities: props.countOfCompletedActivities,
         })}
         color={Theme.colors.light.onSurface}

src/widgets/ActivityGroups/ui/ActivityCard/ActivityLabel/ActivityInProgressLabel.tsx

@@ -23,7 +23,7 @@ export const ActivityInProgressLabel = (props: Props) => {
     >
       <ActivityLabelTypography
         text={t('countOfCompletedQuestions', {
-          length: props.activityLength,
+          count: props.activityLength,
           countOfCompletedQuestions: props.countOfCompletedQuestions,
         })}
         color={Theme.colors.light.onSurface}

src/widgets/ActivityGroups/ui/ActivityCard/ActivityLabel/ActivityLabelTypography.tsx

@@ -7,7 +7,14 @@ type Props = {
 
 export const ActivityLabelTypography = ({ text, color }: Props) => {
   return (
-    <Text color={color} fontSize="14px" fontWeight="400" lineHeight="20px" letterSpacing="0.1px">
+    <Text
+      color={color}
+      fontSize="14px"
+      fontWeight="400"
+      lineHeight="20px"
+      letterSpacing="0.1px"
+      sx={{ whiteSpace: 'nowrap' }}
+    >
       {text}
     </Text>
   );

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

@@ -26,6 +26,7 @@ import {
   MixpanelPayload,
   useOnceLayoutEffect,
 } from '~/shared/utils';
+import { TargetSubjectLabel } from '~/widgets/TargetSubjectLabel';
 
 type Props = {
   activityListItem: ActivityListItem;
@@ -177,15 +178,21 @@ export const ActivityCard = ({ activityListItem }: Props) => {
             />
           )}
 
-          <ActivityLabel
-            isFlow={isFlow && showActivityFlowBudget}
-            activityLength={activityLength ?? 0}
-            isSupportedActivity={isEntitySupported}
-            isActivityInProgress={isInProgress}
-            countOfCompletedQuestions={countOfCompletedQuestions}
-            countOfCompletedActivities={countOfCompletedActivities}
-            numberOfActivitiesInFlow={numberOfActivitiesInFlow}
-          />
+          <Box display="flex" gap="8px" flexWrap="wrap">
+            <ActivityLabel
+              isFlow={isFlow && showActivityFlowBudget}
+              activityLength={activityLength ?? 0}
+              isSupportedActivity={isEntitySupported}
+              isActivityInProgress={isInProgress}
+              countOfCompletedQuestions={countOfCompletedQuestions}
+              countOfCompletedActivities={countOfCompletedActivities}
+              numberOfActivitiesInFlow={numberOfActivitiesInFlow}
+            />
+
+            {!!activityListItem.targetSubject && (
+              <TargetSubjectLabel subject={activityListItem.targetSubject} />
+            )}
+          </Box>
 
           {description && <ActivityCardDescription description={description} isFlow={isFlow} />}
 

src/widgets/ActivityGroups/ui/ActivityGroup.tsx

@@ -33,7 +33,12 @@ export const ActivityGroup = ({ group }: Props) => {
 
       <Box display="flex" flex={1} flexDirection="column">
         {group.activities.map((activity) => {
-          return <ActivityCard key={activity.eventId} activityListItem={activity} />;
+          return (
+            <ActivityCard
+              key={`${activity.eventId}_${activity.targetSubject?.id}`}
+              activityListItem={activity}
+            />
+          );
         })}
       </Box>
     </Box>

src/widgets/Survey/ui/ActivityMetaData.tsx

@@ -11,11 +11,7 @@ type Props = {
 export const ActivityMetaData = ({ activityLength, isFlow, activityOrderInFlow }: Props) => {
   const { t } = useCustomTranslation();
 
-  const isActivitiesMoreThanOne = activityLength > 1;
-
-  const activityLengthLabel = isActivitiesMoreThanOne
-    ? t('question_count_plural', { length: activityLength })
-    : t('question_count_singular', { length: activityLength });
+  const activityLengthLabel = t('questionCount', { count: activityLength });
 
   if (!isFlow && !activityOrderInFlow) {
     return <>{activityLengthLabel}</>;

src/widgets/TargetSubjectLabel/index.tsx

@@ -0,0 +1,43 @@
+import { Avatar } from '@mui/material';
+
+import SubjectIcon from '~/assets/subject-icon.svg';
+import { SubjectDTO } from '~/shared/api/types/subject';
+import { Theme } from '~/shared/constants';
+import { Box, Text } from '~/shared/ui';
+import { getSubjectName, useCustomTranslation } from '~/shared/utils';
+
+type Props = {
+  subject: SubjectDTO;
+};
+
+export const TargetSubjectLabel = ({ subject }: Props) => {
+  const { t } = useCustomTranslation();
+
+  const name = getSubjectName(subject);
+
+  return (
+    <Box
+      data-testid="subject-label"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '4px 8px',
+        borderRadius: '8px',
+        gap: '8px',
+        backgroundColor: Theme.colors.light.accentYellow30,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Avatar src={SubjectIcon} sx={{ width: '18px', height: '18px' }} />
+      <Text
+        color={Theme.colors.light.onSurface}
+        fontSize="14px"
+        fontWeight="400"
+        lineHeight="20px"
+        letterSpacing="0.1px"
+      >
+        {t('targetSubjectLabel', { name })}
+      </Text>
+    </Box>
+  );
+};