diff --git a/src/components/Calendar/CalendarColorPicker.tsx b/src/components/Calendar/CalendarColorPicker.tsx
index e80fcc0..0ee08af 100644
--- a/src/components/Calendar/CalendarColorPicker.tsx
+++ b/src/components/Calendar/CalendarColorPicker.tsx
@@ -10,6 +10,7 @@ import {
} from "@mui/material";
import { useState } from "react";
import { HexColorPicker } from "react-colorful";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
export function ColorPicker({
@@ -54,6 +55,7 @@ export function ColorPicker({
);
}
+
function ColorBox({
color,
onChange,
@@ -107,11 +109,11 @@ function ColorPickerBox({
onChange: (color: Record
) => void;
selectedColor: Record;
}) {
+ const { t } = useI18n();
const [oldColor] = useState(
selectedColor ?? { light: "#ffffff", dark: "#808080" }
);
const [color, setColor] = useState(oldColor);
-
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const theme = useTheme();
@@ -139,12 +141,13 @@ function ColorPickerBox({
setColor(newColor);
onChange(newColor);
};
+
return (
<>
- Choose custom colour
+ {t("colorPicker.title")}
- Choose a background colour for this calendar
+ {t("colorPicker.subtitle")}
@@ -214,7 +217,7 @@ function ColorPickerBox({
- Hex
+ {t("colorPicker.hex")}
-
+
diff --git a/src/components/Calendar/CalendarItemList.tsx b/src/components/Calendar/CalendarItemList.tsx
index 955a261..de3eed6 100644
--- a/src/components/Calendar/CalendarItemList.tsx
+++ b/src/components/Calendar/CalendarItemList.tsx
@@ -4,9 +4,9 @@ import { Calendars } from "../../features/Calendars/CalendarTypes";
import { CalendarName } from "./CalendarName";
export function CalendarItemList(
- userPersonnalCalendars: Calendars[]
+ userPersonalCalendars: Calendars[]
): React.ReactNode {
- return Object.values(userPersonnalCalendars).map((calendar) => (
+ return Object.values(userPersonalCalendars).map((calendar) => (
diff --git a/src/components/Calendar/CalendarModal.tsx b/src/components/Calendar/CalendarModal.tsx
index 97fffbb..6b0cc14 100644
--- a/src/components/Calendar/CalendarModal.tsx
+++ b/src/components/Calendar/CalendarModal.tsx
@@ -13,6 +13,7 @@ import { AccessTab } from "./AccessTab";
import { ImportTab } from "./ImportTab";
import { SettingsTab } from "./SettingsTab";
import { defaultColors } from "./utils/calendarColorsUtils";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
function CalendarPopover({
open,
@@ -26,6 +27,7 @@ function CalendarPopover({
) => void;
calendar?: Calendars;
}) {
+ const { t } = useI18n();
const dispatch = useAppDispatch();
const userId =
useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
@@ -181,10 +183,18 @@ function CalendarPopover({
setTab(v)}>
- {calendar && }
- {isOwn && }
+ {calendar && (
+
+ )}
+ {isOwn && (
+
+ )}
}
actions={
@@ -193,14 +203,18 @@ function CalendarPopover({
variant="outlined"
onClick={(e) => handleClose({}, "backdropClick")}
>
- Cancel
+ {t("common.cancel")}
}
diff --git a/src/components/Calendar/CalendarSearch.tsx b/src/components/Calendar/CalendarSearch.tsx
index 50c4472..a027d82 100644
--- a/src/components/Calendar/CalendarSearch.tsx
+++ b/src/components/Calendar/CalendarSearch.tsx
@@ -2,23 +2,19 @@ import CloseIcon from "@mui/icons-material/Close";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import CardHeader from "@mui/material/CardHeader";
import IconButton from "@mui/material/IconButton";
-import Modal from "@mui/material/Modal";
+import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { useState } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { getCalendars } from "../../features/Calendars/CalendarApi";
import { addSharedCalendarAsync } from "../../features/Calendars/CalendarSlice";
-import { ColorPicker } from "./CalendarColorPicker";
import { Calendars } from "../../features/Calendars/CalendarTypes";
-import { User, PeopleSearch } from "../Attendees/PeopleSearch";
-import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
-import { useTheme } from "@mui/material/styles";
+import { PeopleSearch, User } from "../Attendees/PeopleSearch";
import { ResponsiveDialog } from "../Dialog";
+import { ColorPicker } from "./CalendarColorPicker";
+import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
interface CalendarWithOwner {
cal: Record;
@@ -104,6 +100,7 @@ function SelectedCalendarsList({
color: Record
) => void;
}) {
+ const { t } = useI18n();
if (selectedCal.length === 0) return null;
const groupedByOwner = selectedCal.reduce<
@@ -144,7 +141,7 @@ function SelectedCalendarsList({
return (
- Name
+ {t("common.name")}
{Object.values(groupedByOwner).map(
@@ -160,14 +157,26 @@ function SelectedCalendarsList({
onColorChange={(color) => onColorChange(cal, color)}
/>
) : (
-
- No publicly available calendars for {owner.displayName}
+
+ {t("calendar.noPublicCalendarsFor", {
+ name: owner.displayName,
+ })}
)
)
) : alreadyExisting ? (
-
- No more Calendar for {owner.displayName}
+
+ {t("calendar.noMoreCalendarsFor", { name: owner.displayName })}
) : null}
@@ -230,6 +239,7 @@ export default function CalendarSearch({
setSelectedUsers([]);
}
};
+ const { t } = useI18n();
return (
>
}
diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx
index 13a054b..e2ee2a6 100644
--- a/src/components/Calendar/CalendarSelection.tsx
+++ b/src/components/Calendar/CalendarSelection.tsx
@@ -16,6 +16,7 @@ import { Divider, ListItem, Menu, MenuItem } from "@mui/material";
import { removeCalendarAsync } from "../../features/Calendars/CalendarSlice";
import { DeleteCalendarDialog } from "./DeleteCalendarDialog";
import { trimLongTextWithoutSpace } from "../../utils/textUtils";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
function CalendarAccordion({
title,
@@ -80,7 +81,7 @@ function CalendarAccordion({
key={id}
calendars={allCalendars}
id={id}
- isPersonnal={defaultExpanded}
+ isPersonal={defaultExpanded}
selectedCalendars={selectedCalendars}
handleCalendarToggle={handleToggle}
setOpen={() => setOpen(id)}
@@ -98,11 +99,12 @@ export default function CalendarSelection({
selectedCalendars: string[];
setSelectedCalendars: Function;
}) {
+ const { t } = useI18n();
const userId =
useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
const calendars = useAppSelector((state) => state.calendars.list);
- const personnalCalendars = Object.keys(calendars).filter(
+ const personalCalendars = Object.keys(calendars).filter(
(id) => id.split("/")[0] === userId
);
const delegatedCalendars = Object.keys(calendars).filter(
@@ -127,8 +129,8 @@ export default function CalendarSelection({
<>
;
id: string;
- isPersonnal: boolean;
+ isPersonal: boolean;
selectedCalendars: string[];
handleCalendarToggle: (name: string) => void;
setOpen: Function;
}) {
+ const { t } = useI18n();
const dispatch = useAppDispatch();
const calLink =
useAppSelector((state) => state.calendars.list[id].link) ?? "";
@@ -222,7 +225,7 @@ function CalendarSelector({
setAnchorEl(null);
};
const [userId, calId] = id.split("/");
- const isDefault = isPersonnal && userId === calId;
+ const isDefault = isPersonal && userId === calId;
const [deletePopupOpen, setDeletePopupOpen] = useState(false);
const handleDeleteConfirm = () => {
@@ -244,14 +247,10 @@ function CalendarSelector({
justifyContent: "space-between",
transition: "background-color 0.2s ease",
padding: "8px 24px 8px 16px",
- "& .MoreBtn": {
- opacity: 0,
- },
+ "& .MoreBtn": { opacity: 0 },
"&:hover": {
backgroundColor: "#F3F3F6",
- "& .MoreBtn": {
- opacity: 1,
- },
+ "& .MoreBtn": { opacity: 1 },
},
}}
>
@@ -293,12 +292,12 @@ function CalendarSelector({
handleClose();
}}
>
- Modify
+ {t("actions.modify")}
{!isDefault && }
{!isDefault && (
)}
@@ -308,7 +307,7 @@ function CalendarSelector({
setDeletePopupOpen={setDeletePopupOpen}
calendars={calendars}
id={id}
- isPersonnal={isPersonnal}
+ isPersonal={isPersonal}
handleDeleteConfirm={handleDeleteConfirm}
/>
>
diff --git a/src/components/Calendar/DeleteCalendarDialog.tsx b/src/components/Calendar/DeleteCalendarDialog.tsx
index bfe5cd4..daf6887 100644
--- a/src/components/Calendar/DeleteCalendarDialog.tsx
+++ b/src/components/Calendar/DeleteCalendarDialog.tsx
@@ -5,37 +5,45 @@ import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function DeleteCalendarDialog({
deletePopupOpen,
setDeletePopupOpen,
calendars,
id,
- isPersonnal,
+ isPersonal,
handleDeleteConfirm,
}: {
deletePopupOpen: boolean;
setDeletePopupOpen: (e: boolean) => void;
calendars: Record;
id: string;
- isPersonnal: boolean;
+ isPersonal: boolean;
handleDeleteConfirm: () => void;
}) {
+ const { t } = useI18n();
+
return (
diff --git a/src/components/Calendar/ImportTab.tsx b/src/components/Calendar/ImportTab.tsx
index f0d0bd3..46760a4 100644
--- a/src/components/Calendar/ImportTab.tsx
+++ b/src/components/Calendar/ImportTab.tsx
@@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
import { useAppSelector } from "../../app/hooks";
import { CalendarItemList } from "./CalendarItemList";
import { SettingsTab } from "./SettingsTab";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function ImportTab({
userId,
@@ -37,11 +38,12 @@ export function ImportTab({
setVisibility: Function;
};
}) {
+ const { t } = useI18n();
const [importMode, setImportMode] = useState<"file" | "url">("file");
const [importFile, setImportFile] = useState(null);
const [importUrl, setImportUrl] = useState("");
const calendars = useAppSelector((state) => state.calendars.list);
- const personnalCalendars = Object.values(calendars).filter(
+ const personalCalendars = Object.values(calendars).filter(
(cal) => cal.id.split("/")[0] === userId
);
@@ -59,14 +61,14 @@ export function ImportTab({
size="small"
sx={{ mb: 2 }}
>
- File
- {/* URL */}
+ {t("common.import_file")}
+ {/* {t("common.import_url")} */}
{importMode === "file" && (
<>
)}
{toggleDesc && (
setDescription(e.target.value)}
size="small"
@@ -77,7 +83,7 @@ export function SettingsTab({
- Color
+ {t("calendar.color")}
setColor(color)}
@@ -88,7 +94,7 @@ export function SettingsTab({
{isOwn && (
- New events created will be visible to:
+ {t("calendar.newEventsVisibility")}
- All
+ {t("common.all")}
- You
+ {t("common.you")}
diff --git a/src/components/Calendar/TimezoneSelector.tsx b/src/components/Calendar/TimezoneSelector.tsx
index 8378c53..1714c0d 100644
--- a/src/components/Calendar/TimezoneSelector.tsx
+++ b/src/components/Calendar/TimezoneSelector.tsx
@@ -1,4 +1,5 @@
import { Button, Popover } from "@mui/material";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { MouseEvent, useMemo, useState } from "react";
import { TIMEZONES } from "../../utils/timezone-data";
import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
@@ -34,7 +35,7 @@ export function TimezoneSelector({ value, onChange }: TimezoneSelectProps) {
};
const open = Boolean(anchorEl);
-
+ const { t } = useI18n();
return (
<>
state.user.error);
const calendarError = useAppSelector((state) => state.calendars.error);
@@ -16,7 +18,7 @@ export function Error() {
}
}, [calendarError, dispatch]);
- const errorMessage = userError || calendarError || "Unknown error";
+ const errorMessage = userError || calendarError || t("error.unknown");
return (
@@ -56,7 +58,7 @@ export function Error() {
- Something went wrong
+ {t("error.title")}
@@ -67,9 +69,7 @@ export function Error() {
variant="contained"
color="error"
startIcon={}
- onClick={() => {
- window.location.reload();
- }}
+ onClick={() => window.location.reload()}
sx={{
textTransform: "none",
fontWeight: 600,
@@ -79,7 +79,7 @@ export function Error() {
boxShadow: "none",
}}
>
- Try Again
+ {t("error.retry")}
diff --git a/src/components/Error/ErrorSnackbar.tsx b/src/components/Error/ErrorSnackbar.tsx
index 11adcc3..74c4a4f 100644
--- a/src/components/Error/ErrorSnackbar.tsx
+++ b/src/components/Error/ErrorSnackbar.tsx
@@ -4,6 +4,7 @@ import Button from "@mui/material/Button";
import { useAppDispatch } from "../../app/hooks";
import { clearError as calendarClearError } from "../../features/Calendars/CalendarSlice";
import { clearError as userClearError } from "../../features/User/userSlice";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function ErrorSnackbar({
error,
@@ -12,7 +13,9 @@ export function ErrorSnackbar({
error: string | null;
type: "user" | "calendar";
}) {
+ const { t } = useI18n();
const dispatch = useAppDispatch();
+
const handleCloseSnackbar = () => {
dispatch(type === "calendar" ? calendarClearError() : userClearError());
};
@@ -29,11 +32,11 @@ export function ErrorSnackbar({
sx={{ width: "100%" }}
action={
}
>
- {error}
+ {error || t("error.unknown")}
);
@@ -46,11 +49,13 @@ export function EventErrorSnackbar({
messages: string[];
onClose: () => void;
}) {
+ const { t } = useI18n();
const open = messages.length > 0;
+
const summary =
messages.length === 1
? messages[0]
- : `${messages.length} events with errors`;
+ : t("error.multipleEvents", { count: messages.length });
return (
- OK
+ {t("common.ok")}
}
>
diff --git a/src/components/Event/EditModeDialog.tsx b/src/components/Event/EditModeDialog.tsx
index d45fe48..d857f92 100644
--- a/src/components/Event/EditModeDialog.tsx
+++ b/src/components/Event/EditModeDialog.tsx
@@ -11,6 +11,7 @@ import {
} from "@mui/material";
import { CalendarEvent } from "../../features/Events/EventsTypes";
import { useState } from "react";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export function EditModeDialog({
type,
@@ -23,6 +24,7 @@ export function EditModeDialog({
event: CalendarEvent;
eventAction: (type: "solo" | "all" | undefined) => void;
}) {
+ const { t } = useI18n();
const [typeOfAction, setTypeOfAction] = useState<"solo" | "all" | undefined>(
"solo"
);
@@ -37,8 +39,8 @@ export function EditModeDialog({
return (
diff --git a/src/components/Event/EventDuplicate.tsx b/src/components/Event/EventDuplicate.tsx
index 468f09e..bf2ba1b 100644
--- a/src/components/Event/EventDuplicate.tsx
+++ b/src/components/Event/EventDuplicate.tsx
@@ -1,5 +1,6 @@
import { MenuItem } from "@mui/material";
import { CalendarEvent } from "../../features/Events/EventsTypes";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export default function EventDuplication({
onClose,
@@ -10,13 +11,14 @@ export default function EventDuplication({
event: CalendarEvent;
onOpenDuplicate?: () => void;
}) {
+ const { t } = useI18n();
return (
);
}
diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx
index 415caa4..4cfc291 100644
--- a/src/components/Event/EventFormFields.tsx
+++ b/src/components/Event/EventFormFields.tsx
@@ -33,6 +33,7 @@ import {
} from "../../utils/videoConferenceUtils";
import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
import { CalendarItemList } from "../Calendar/CalendarItemList";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
import { FieldWithLabel } from "./components/FieldWithLabel";
import { DateTimeFields } from "./components/DateTimeFields";
import { useAllDayToggle } from "./hooks/useAllDayToggle";
@@ -84,7 +85,7 @@ interface EventFormFieldsProps {
isOpen?: boolean;
// Data
- userPersonnalCalendars: Calendars[];
+ userPersonalCalendars: Calendars[];
timezoneList: {
zones: string[];
browserTz: string;
@@ -145,7 +146,7 @@ export default function EventFormFields({
showRepeat,
setShowRepeat,
isOpen = false,
- userPersonnalCalendars,
+ userPersonalCalendars,
timezoneList,
onStartChange,
onEndChange,
@@ -155,6 +156,8 @@ export default function EventFormFields({
showValidationErrors = false,
onHasEndDateChangedChange,
}: EventFormFieldsProps) {
+ const { t } = useI18n();
+
// Internal state for 4 separate fields
const [startDate, setStartDate] = React.useState("");
const [startTime, setStartTime] = React.useState("");
@@ -406,15 +409,15 @@ export default function EventFormFields({
- Title *
+ {t("event.form.title")} *
>
}
isExpanded={showMore}
>
{
setTitle(e.target.value);
@@ -439,18 +442,21 @@ export default function EventFormFields({
color: "text.secondary",
}}
>
- Add description
+ {t("event.form.addDescription")}
)}
{showDescription && (
-
+
setDescription(e.target.value)}
size="small"
@@ -471,7 +477,7 @@ export default function EventFormFields({
)}
-
+
}
- label="All day"
+ label={t("event.form.allDay")}
/>
}
- label="Repeat"
+ label={t("event.form.repeat")}
/>
@@ -554,11 +560,17 @@ export default function EventFormFields({
)}
-
+
-
+
}
@@ -570,7 +582,7 @@ export default function EventFormFields({
display: hasVideoConference ? "none" : "flex",
}}
>
- Add Visio conference
+ {t("event.form.addVisioConference")}
{hasVideoConference && meetingLink && (
@@ -585,14 +597,14 @@ export default function EventFormFields({
mr: 1,
}}
>
- Join Visio conference
+ {t("event.form.joinVisioConference")}
@@ -600,8 +612,8 @@ export default function EventFormFields({
onClick={handleDeleteVideoConference}
size="small"
sx={{ color: "error.main" }}
- aria-label="Remove video conference"
- title="Remove video conference"
+ aria-label={t("event.form.removeVideoConference")}
+ title={t("event.form.removeVideoConference")}
>
@@ -610,11 +622,11 @@ export default function EventFormFields({
-
+
setLocation(e.target.value)}
size="small"
@@ -622,65 +634,102 @@ export default function EventFormFields({
/>
-
+
{!showMore && (
- Calendar
+
+ {t("event.form.calendar")}
+
)}
{showMore && (
<>
-
+
-
+
-
+
- All
+ {t("event.form.visibleAll")}
- Participants
+ {t("event.form.visibleParticipants")}
diff --git a/src/components/Event/EventRepeat.tsx b/src/components/Event/EventRepeat.tsx
index 2188493..504f043 100644
--- a/src/components/Event/EventRepeat.tsx
+++ b/src/components/Event/EventRepeat.tsx
@@ -15,6 +15,7 @@ import {
} from "@mui/material";
import { useEffect, useState } from "react";
import { RepetitionObject } from "../../features/Events/EventsTypes";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
export default function RepeatEvent({
repetition,
@@ -27,6 +28,7 @@ export default function RepeatEvent({
setRepetition: Function;
isOwn?: boolean;
}) {
+ const { t } = useI18n();
const days = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
const day = new Date(eventStart);
// derive endOption based on repetition
@@ -60,12 +62,25 @@ export default function RepeatEvent({
});
};
+ const getDayLabel = (day: string) => {
+ const dayMap: { [key: string]: string } = {
+ MO: t("event.repeat.days.monday"),
+ TU: t("event.repeat.days.tuesday"),
+ WE: t("event.repeat.days.wednesday"),
+ TH: t("event.repeat.days.thursday"),
+ FR: t("event.repeat.days.friday"),
+ SA: t("event.repeat.days.saturday"),
+ SU: t("event.repeat.days.sunday"),
+ };
+ return dayMap[day] || day;
+ };
+
return (
{/* Interval */}
- Repeat every
+ {t("event.repeat.repeatEvery")}
-
-
-
-
+
+
+
+
@@ -116,7 +139,7 @@ export default function RepeatEvent({
{repetition.freq === "weekly" && (
- Repeat on:
+ {t("event.repeat.repeatOn")}
{days.map((day) => (
@@ -129,7 +152,7 @@ export default function RepeatEvent({
onChange={() => handleDayChange(day)}
/>
}
- label={day}
+ label={getDayLabel(day)}
/>
))}
@@ -139,7 +162,7 @@ export default function RepeatEvent({
{/* End options */}
- End:
+ {t("event.repeat.end.label")}
}
- label="Never"
+ label={t("event.repeat.end.never")}
/>
}
label={
- After
+ {t("event.repeat.end.after")}
- occurrences
+ {t("event.repeat.end.occurrences")}
}
/>
@@ -206,7 +229,7 @@ export default function RepeatEvent({
control={}
label={
- On
+ {t("event.repeat.end.on")}
= ({
onEndDateChange,
onEndTimeChange,
}) => {
+ const { t, lang } = useI18n();
const isExpanded = showMore;
const shouldShowEndDateNormal = allday || !!showEndDate;
const shouldShowFullFieldsInNormal = !allday && hasEndDateChanged;
const showSingleDateField =
!isExpanded && !shouldShowEndDateNormal && !shouldShowFullFieldsInNormal;
- const startDateLabel = showSingleDateField ? "Date" : "Start Date";
+ const startDateLabel = showSingleDateField
+ ? t("dateTimeFields.date")
+ : t("dateTimeFields.startDate");
return (
-
+
= ({
{
@@ -99,7 +107,7 @@ export const DateTimeFields: React.FC = ({
{!allday && (
{
@@ -127,7 +135,7 @@ export const DateTimeFields: React.FC = ({
{
@@ -154,7 +162,7 @@ export const DateTimeFields: React.FC = ({
{!allday && (
{
@@ -185,7 +193,7 @@ export const DateTimeFields: React.FC = ({
{
@@ -210,7 +218,7 @@ export const DateTimeFields: React.FC = ({
{
@@ -264,7 +272,7 @@ export const DateTimeFields: React.FC = ({
{
@@ -290,7 +298,7 @@ export const DateTimeFields: React.FC = ({
{
diff --git a/src/components/Event/utils/eventUtils.tsx b/src/components/Event/utils/eventUtils.tsx
index 2161973..306c4db 100644
--- a/src/components/Event/utils/eventUtils.tsx
+++ b/src/components/Event/utils/eventUtils.tsx
@@ -17,6 +17,7 @@ import { formatDateToYYYYMMDDTHHMMSS } from "../../../utils/dateUtils";
export function renderAttendeeBadge(
a: userAttendee,
key: string,
+ t: Function,
isFull?: boolean,
isOrganizer?: boolean
) {
@@ -28,7 +29,7 @@ export function renderAttendeeBadge(
) : null;
if (!isFull) {
- return ;
+ return ;
} else {
return (
{isOrganizer && (
- Organizer
+ {t("event.organizer")}
)}
diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx
index 6b4799a..f3564d5 100644
--- a/src/components/Menubar/Menubar.tsx
+++ b/src/components/Menubar/Menubar.tsx
@@ -20,6 +20,8 @@ import {
} from "@mui/material";
import { push } from "redux-first-history";
import { CalendarApi } from "@fullcalendar/core";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { setLanguage } from "../../features/Settings/SettingsSlice";
export type AppIconProps = {
name: string;
@@ -44,9 +46,11 @@ export function Menubar({
currentView,
onViewChange,
}: MenubarProps) {
+ const { t, f, lang } = useI18n();
const user = useAppSelector((state) => state.user.userData);
const applist: AppIconProps[] = (window as any).appList ?? [];
const [anchorEl, setAnchorEl] = useState(null);
+ const [langAnchorEl, setLangAnchorEl] = useState(null);
const dispatch = useAppDispatch();
if (!user) {
@@ -99,6 +103,18 @@ export function Menubar({
};
const open = Boolean(anchorEl);
+ const langOpen = Boolean(langAnchorEl);
+
+ const handleLangClick = (event: React.MouseEvent) => {
+ setLangAnchorEl(event.currentTarget);
+ };
+ const handleLangClose = () => setLangAnchorEl(null);
+
+ const availableLangs = [
+ { code: "en", label: "English" },
+ { code: "fr", label: "Français" },
+ ];
+
return (
<>
-
+
@@ -145,37 +164,53 @@ export function Menubar({
value={currentView}
onChange={(e) => handleViewChange(e.target.value)}
variant="outlined"
+ aria-label={t("menubar.viewSelector")}
>
-
-
-
+
+
+
{applist.length > 0 && (
-
+
)}
+
-
- {user?.name && user?.family_name
- ? `${user.name[0]}${user.family_name[0]}`
- : (user?.email?.[0] ?? "")}
-
+
+
+ {user?.name && user?.family_name
+ ? `${user.name[0]}${user.family_name[0]}`
+ : (user?.email?.[0] ?? "")}
+
+
@@ -198,13 +233,46 @@ export function Menubar({
))}