[#583] removed useless icon and added proper translation for calendarName (#589)

src/components/Calendar/CalendarName.tsx

@@ -1,23 +1,28 @@
+import { useAppSelector } from "@/app/hooks";
 import { Calendar } from "@/features/Calendars/CalendarTypes";
-import { Box, Typography } from "@linagora/twake-mui";
-import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
 import { defaultColors } from "@/utils/defaultColors";
 import { makeDisplayName } from "@/utils/makeDisplayName";
+import { renameDefault } from "@/utils/renameDefault";
+import { Box, Typography } from "@linagora/twake-mui";
+import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
+import { useI18n } from "twake-i18n";
 import { OwnerCaption } from "./OwnerCaption";
-import { useAppSelector } from "@/app/hooks";
 
 export function CalendarName({ calendar }: { calendar: Calendar }) {
   const userData = useAppSelector((state) => state.user.userData);
-  const showCaption =
+  const { t } = useI18n();
-    calendar.name !== "#default" &&
+
-    userData.openpaasId !== calendar.id.split("/")[0];
+  const ownerId = calendar.id.split("/")[0];
+  const ownerDisplayName = makeDisplayName(calendar) ?? "";
+  const isOwnCalendar = userData.openpaasId === ownerId;
+  const showCaption = calendar.name !== "#default" && !isOwnCalendar;
 
   return (
     <Box
       style={{
         display: "flex",
         flexDirection: "row",
-        gap: 8,
+        gap: "16px",
         alignItems: "center",
       }}
     >
@@ -30,11 +35,11 @@ export function CalendarName({ calendar }: { calendar: Calendar }) {
       />
       <Box style={{ display: "flex", flexDirection: "column" }}>
         <Typography sx={{ wordBreak: "break-word" }}>
-          {calendar.name}
+          {renameDefault(calendar.name, ownerDisplayName, t, isOwnCalendar)}
         </Typography>
         <OwnerCaption
           showCaption={showCaption}
-          ownerDisplayName={makeDisplayName(calendar) ?? ""}
+          ownerDisplayName={ownerDisplayName}
         />
       </Box>
     </Box>

src/components/Event/EventFormFields.tsx

@@ -4,6 +4,7 @@ import { userAttendee } from "@/features/User/models/attendee";
 import iconCamera from "@/static/images/icon-camera.svg";
 import { defaultColors } from "@/utils/defaultColors";
 import { makeDisplayName } from "@/utils/makeDisplayName";
+import { renameDefault } from "@/utils/renameDefault";
 import {
   addVideoConferenceToDescription,
   generateMeetingLink,
@@ -193,6 +194,13 @@ export default function EventFormFields({
   const personalCalendars = userPersonalCalendars.filter(
     (cal) => !cal.delegated
   );
+  const selectedCalendar = userPersonalCalendars.find(
+    (cal) => cal.id === calendarid
+  );
+  const selectedOwnerDisplayName = selectedCalendar
+    ? (makeDisplayName(selectedCalendar) ?? "")
+    : "";
+  const isSelectedDelegated = !!selectedCalendar?.delegated;
 
   // Reset hasEndDateChanged and hasClickedDateTimeSection when modal closes
   React.useEffect(() => {
@@ -786,29 +794,21 @@ export default function EventFormFields({
             }
             onClick={() => setHasClickedCalendarSection(true)}
           >
-            {userPersonalCalendars.find((cal) => cal.id === calendarid)
+            {selectedCalendar?.name ? (
-              ?.name ? (
               <Box style={{ display: "flex", flexDirection: "column" }}>
                 <Typography sx={{ wordBreak: "break-word" }}>
-                  {
+                  {renameDefault(
-                    userPersonalCalendars.find((cal) => cal.id === calendarid)
+                    selectedCalendar.name,
-                      ?.name
+                    selectedOwnerDisplayName,
-                  }
+                    t,
+                    !isSelectedDelegated
+                  )}
                 </Typography>
                 <OwnerCaption
                   showCaption={
-                    delegatedCalendars.find((cal) => cal.id === calendarid) !==
+                    isSelectedDelegated && selectedCalendar.name !== "#default"
-                      undefined &&
-                    userPersonalCalendars.find((cal) => cal.id === calendarid)
-                      ?.name !== "#default"
-                  }
-                  ownerDisplayName={
-                    makeDisplayName(
-                      userPersonalCalendars.find(
-                        (cal) => cal.id === calendarid
-                      ) ?? ({} as Calendar)
-                    ) ?? ""
                   }
+                  ownerDisplayName={selectedOwnerDisplayName}
                 />
               </Box>
             ) : (

src/features/Events/EventDisplayPreview.tsx

@@ -24,7 +24,6 @@ import {
   Typography,
   useTheme,
 } from "@linagora/twake-mui";
-import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import CircleIcon from "@mui/icons-material/Circle";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
@@ -728,9 +727,6 @@ export default function EventPreviewModal({
             mb: 2,
           }}
         >
-          <Box sx={infoIconSx}>
-            <CalendarTodayIcon />
-          </Box>
           <CalendarName calendar={calendar} />
         </Box>
       </ResponsiveDialog>