fix(meetings): illustration where there is no outgoing talks schedules

src/features/meetings/weekly_schedules/no_schedule/index.tsx

@@ -1,53 +1,45 @@
 import { Box, Stack } from '@mui/material';
-import {
-  useAppTranslation,
-  useBreakpoints,
-  useCurrentUser,
-} from '@hooks/index';
+import { useAppTranslation, useBreakpoints } from '@hooks/index';
 import Typography from '@components/typography';
-import NoSchedulesErrorImg from '@assets/img/no-schedules-error-illustration.svg?url';
+import NoSchedulesErrorImg from '@assets/img/illustration_no_schedules_error.svg?component';
 
 const NoSchedule = () => {
   const { t } = useAppTranslation();
 
   const { tabletDown } = useBreakpoints();
 
-  const { isMeetingEditor } = useCurrentUser();
-
   return (
     <>
-      {!isMeetingEditor && (
+      <Box
+        sx={{
+          padding: '80px 24px',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
         <Box
           sx={{
-            padding: '80px 24px',
             display: 'flex',
-            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '32px',
+            flexDirection: tabletDown ? 'column' : 'row',
           }}
         >
-          <Box
+          <NoSchedulesErrorImg viewBox="0 0 128 128" />
+
+          <Stack
+            spacing="16px"
             sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '32px',
-              maxWidth: '800px',
-              flexDirection: tabletDown ? 'column' : 'row',
+              maxWidth: '640px',
             }}
           >
-            <img
-              alt=""
-              src={NoSchedulesErrorImg}
-              style={{ width: '128px', height: '128px' }}
-            />
-
-            <Stack spacing="16px">
-              <Typography className="h2">{t('tr_noSchedulesYet')}</Typography>
-              <Typography color="var(--grey-400)">
-                {t('tr_noSchedulesYetDesc')}
-              </Typography>
-            </Stack>
-          </Box>
+            <Typography className="h2">{t('tr_noSchedulesYet')}</Typography>
+            <Typography color="var(--grey-400)">
+              {t('tr_noSchedulesYetDesc')}
+            </Typography>
+          </Stack>
         </Box>
-      )}
+      </Box>
     </>
   );
 };

src/features/meetings/weekly_schedules/outgoing_talks/index.tsx

@@ -2,11 +2,14 @@ import { Box } from '@mui/material';
 import useOutgoingTalks from './useOutgoingTalks';
 import ScheduleHeader from './schedule_header';
 import WeekContainer from './week_container';
+import NoSchedule from '../no_schedule';
 
 const OutgoingTalks = () => {
-  const { weeks } = useOutgoingTalks();
+  const { weeks, noSchedule } = useOutgoingTalks();
 
-  return (
+  return noSchedule ? (
+    <NoSchedule />
+  ) : (
     <Box
       sx={{
         display: 'flex',
@@ -15,7 +18,7 @@ const OutgoingTalks = () => {
         marginTop: '8px',
       }}
     >
-      <ScheduleHeader />
+      {weeks.length !== 0 && <ScheduleHeader />}
 
       {weeks.map((week) => (
         <WeekContainer key={week} week={week} />

src/features/meetings/weekly_schedules/outgoing_talks/useOutgoingTalks.tsx

@@ -21,7 +21,11 @@ const useOutgoingTalks = () => {
     return dates.sort((a, b) => a.localeCompare(b));
   }, [schedules]);
 
-  return { weeks };
+  const noSchedule = useMemo(() => {
+    return weeks.length === 0;
+  }, [weeks]);
+
+  return { weeks, noSchedule };
 };
 
 export default useOutgoingTalks;