[#367] added custom placeholder to people search (#411)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Attendees/PeopleSearch.tsx

@@ -29,13 +29,15 @@ export function PeopleSearch({
   disabled,
   freeSolo,
   onToggleEventPreview,
+  placeholder,
 }: {
   selectedUsers: User[];
   onChange: Function;
   objectTypes: string[];
   disabled?: boolean;
   freeSolo?: boolean;
-  onToggleEventPreview?: Function;
+  onToggleEventPreview?: () => void;
+  placeholder?: string;
 }) {
   const { t } = useI18n();
   const [query, setQuery] = useState("");
@@ -51,6 +53,8 @@ export function PeopleSearch({
   const [snackbarMessage, setSnackbarMessage] = useState("");
   const theme = useTheme();
 
+  const searchPlaceholder = placeholder ?? t("peopleSearch.placeholder");
+
   useEffect(() => {
     let cancelled = false;
 
@@ -149,7 +153,7 @@ export function PeopleSearch({
               {...params}
               error={!!inputError}
               helperText={inputError}
-              placeholder={t("peopleSearch.placeholder")}
+              placeholder={searchPlaceholder}
               label=""
               inputProps={{
                 ...params.inputProps,

src/components/Calendar/TempCalendarsInput.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from "@mui/material/styles";
 import { useRef } from "react";
+import { useI18n } from "twake-i18n";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   getTempCalendarsListAsync,
@@ -30,6 +31,7 @@ export function TempCalendarsInput({
     useAppSelector((state) => state.calendars.templist) ?? {};
   const calendars = useAppSelector((state) => state.calendars.list);
   const theme = useTheme();
+  const { t } = useI18n();
 
   const prevUsersRef = useRef<User[]>([]);
   const userColorsRef = useRef(new Map<string, string>());
@@ -102,6 +104,7 @@ export function TempCalendarsInput({
       selectedUsers={tempUsers}
       onChange={handleUserChange}
       onToggleEventPreview={handleToggleEventPreview}
+      placeholder={t("peopleSearch.availabilityPlaceholder")}
     />
   );
 }