feat: add banner to multi-informant assignments

src/i18n/en/translation.json

@@ -309,6 +309,7 @@
       "successModalSecondaryAction": "Dismiss"
     },
     "charactersCount": "{{numCharacters}}/{{maxCharacters}} characters",
-    "targetSubjectLabel": "About {{name}}"
+    "targetSubjectLabel": "About {{name}}",
+    "targetSubjectBanner": "Please ensure all your responses are about <strong>{{name}}</strong>"
   }
 }

src/i18n/fr/translation.json

@@ -328,6 +328,7 @@
       "successModalSecondaryAction": "Rejeter"
     },
     "charactersCount": "{{numCharacters}}/{{maxCharacters}} caractères",
-    "targetSubjectLabel": "À propos de {{name}}"
+    "targetSubjectLabel": "À propos de {{name}}",
+    "targetSubjectBanner": "Assurez-vous que toutes vos réponses concernent <strong>{{name}}</strong>"
   }
 }

src/widgets/Survey/ui/WelcomeScreen.tsx

@@ -1,21 +1,27 @@
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useEffect } from 'react';
+
+import { Avatar } from '@mui/material';
 
 import { ActivityMetaData } from './ActivityMetaData';
 
 import { ActivityPipelineType } from '~/abstract/lib';
+import SubjectIcon from '~/assets/subject-icon.svg';
 import { appletModel } from '~/entities/applet';
+import { useBanners } from '~/entities/banner/model';
 import { StartSurveyButton, SurveyContext, SurveyLayout } from '~/features/PassSurvey';
 import { Theme } from '~/shared/constants';
 import { AvatarBase } from '~/shared/ui/Avatar';
 import Box from '~/shared/ui/Box';
 import Text from '~/shared/ui/Text';
-import { useCustomMediaQuery, useCustomTranslation } from '~/shared/utils';
+import { getSubjectName, useCustomMediaQuery, useCustomTranslation } from '~/shared/utils';
 
 const WelcomeScreen = () => {
   const { greaterThanSM } = useCustomMediaQuery();
 
   const { t } = useCustomTranslation();
 
+  const { addWarningBanner, removeWarningBanner } = useBanners();
+
   const context = useContext(SurveyContext);
 
   const { startActivity, startFlow } = appletModel.hooks.useEntityStart();
@@ -75,6 +81,25 @@ const WelcomeScreen = () => {
     return 1;
   };
 
+  useEffect(() => {
+    if (context.targetSubject) {
+      addWarningBanner({
+        children: t('targetSubjectBanner', { name: getSubjectName(context.targetSubject) }),
+        duration: null,
+        hasCloseButton: false,
+        iconMapping: {
+          warning: (
+            <Avatar src={SubjectIcon} sx={{ width: '32px', height: '32px', borderRadius: 0 }} />
+          ),
+        },
+      });
+
+      return () => {
+        removeWarningBanner();
+      };
+    }
+  }, [addWarningBanner, context.targetSubject, removeWarningBanner, t]);
+
   return (
     <SurveyLayout
       progress={0}

src/widgets/TargetSubjectLabel/index.tsx

@@ -28,7 +28,7 @@ export const TargetSubjectLabel = ({ subject }: Props) => {
         whiteSpace: 'nowrap',
       }}
     >
-      <Avatar src={SubjectIcon} sx={{ width: '18px', height: '18px' }} />
+      <Avatar src={SubjectIcon} sx={{ width: '18px', height: '18px', borderRadius: 0 }} />
       <Text
         color={Theme.colors.light.onSurface}
         fontSize="14px"