[#525] adopted twake-i18n (#404)

* [#525] adopted twake-i18n 

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

src/App.tsx

@@ -12,7 +12,6 @@ import { CustomThemeProvider } from "./theme/ThemeProvider";
 import { useAppDispatch, useAppSelector } from "./app/hooks";
 import { push } from "redux-first-history";
 import { ErrorSnackbar } from "./components/Error/ErrorSnackbar";
-import I18n from "cozy-ui/transpiled/react/providers/I18n";
 import { AVAILABLE_LANGUAGES } from "./features/Settings/constants";
 
 import {
@@ -26,6 +25,7 @@ import en from "./locales/en.json";
 import fr from "./locales/fr.json";
 import ru from "./locales/ru.json";
 import vi from "./locales/vi.json";
+import I18n from "twake-i18n";
 
 const locale = { en, fr, ru, vi };
 const dateLocales = { en: enGB, fr: frLocale, ru: ruLocale, vi: viLocale };

src/components/Attendees/PeopleSearch.tsx

@@ -11,7 +11,7 @@ import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined
 import Chip from "@mui/material/Chip";
 import { useTheme } from "@mui/material/styles";
 import { getAccessiblePair } from "../Calendar/utils/calendarColorsUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
 
 export interface User {

src/components/Calendar/AccessTab.tsx

@@ -18,7 +18,7 @@ import {
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import { FieldWithLabel } from "../Event/components/FieldWithLabel";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 
 export function AccessTab({ calendar }: { calendar: Calendars }) {

src/components/Calendar/Calendar.tsx

@@ -38,7 +38,7 @@ import { MiniCalendar } from "./MiniCalendar";
 import { User } from "../Attendees/PeopleSearch";
 import { useTheme } from "@mui/material/styles";
 import { updateDarkColor } from "./utils/calendarColorsUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import frLocale from "@fullcalendar/core/locales/fr";
 import ruLocale from "@fullcalendar/core/locales/ru";
 import viLocale from "@fullcalendar/core/locales/vi";

src/components/Calendar/CalendarColorPicker.tsx

@@ -10,7 +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 { useI18n } from "twake-i18n";
 import { defaultColors, getAccessiblePair } from "./utils/calendarColorsUtils";
 
 export function ColorPicker({

src/components/Calendar/CalendarModal.tsx

@@ -13,7 +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";
+import { useI18n } from "twake-i18n";
 
 function CalendarPopover({
   open,

src/components/Calendar/CalendarSearch.tsx

@@ -5,7 +5,7 @@ import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendars } from "../../features/Calendars/CalendarApi";

src/components/Calendar/CalendarSelection.tsx

@@ -16,7 +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";
+import { useI18n } from "twake-i18n";
 
 function CalendarAccordion({
   title,

src/components/Calendar/DeleteCalendarDialog.tsx

@@ -5,7 +5,7 @@ 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";
+import { useI18n } from "twake-i18n";
 
 export function DeleteCalendarDialog({
   deletePopupOpen,

src/components/Calendar/ImportTab.tsx

@@ -14,7 +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";
+import { useI18n } from "twake-i18n";
 
 export function ImportTab({
   userId,

src/components/Calendar/MiniCalendar.tsx

@@ -10,7 +10,7 @@ import {
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
 import { useEffect, useState } from "react";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { setView } from "../../features/Settings/SettingsSlice";
 
 export function MiniCalendar({

src/components/Calendar/SettingsTab.tsx

@@ -9,7 +9,7 @@ import {
   ToggleButtonGroup,
   Typography,
 } from "@mui/material";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useState, useEffect } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { Calendars } from "../../features/Calendars/CalendarTypes";

src/components/Calendar/TimezoneSelector.tsx

@@ -1,5 +1,5 @@
 import { Button, Popover } from "@mui/material";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import moment from "moment";
 import { MouseEvent, useMemo, useState } from "react";
 import { browserDefaultTimeZone } from "../../utils/timezone";

src/components/Calendar/utils/calendarUtils.ts

@@ -6,7 +6,7 @@ import { SlotLabelContentArg } from "@fullcalendar/core";
 import moment from "moment-timezone";
 import { refreshSingularCalendar } from "../../Event/utils/eventUtils";
 import { ThunkDispatch } from "@reduxjs/toolkit";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { detectDateTimeFormat } from "../../Event/utils/dateTimeHelpers";
 
 function convertEventDateTimeToISO(

src/components/Dialog/ResponsiveDialog.tsx

@@ -40,8 +40,10 @@ import React, { ReactNode } from "react";
  * </ResponsiveDialog>
  * ```
  */
-interface ResponsiveDialogProps
-  extends Omit<DialogProps, "maxWidth" | "title"> {
+interface ResponsiveDialogProps extends Omit<
+  DialogProps,
+  "maxWidth" | "title"
+> {
   /** Whether the dialog is open */
   open: boolean;
   /** Callback fired when the dialog should be closed */

src/components/Error/Error.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Fade, Paper, Stack, Typography } from "@mui/material";
 import { useEffect } from "react";
 import { push } from "redux-first-history";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export function Error() {
   const { t } = useI18n();

src/components/Error/ErrorSnackbar.tsx

@@ -4,7 +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";
+import { useI18n } from "twake-i18n";
 
 export function ErrorSnackbar({
   error,

src/components/Event/AddDescButton.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, TextField } from "@mui/material";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { FieldWithLabel } from "./components/FieldWithLabel";
 import { Description as DescriptionIcon } from "@mui/icons-material";
 

src/components/Event/EditModeDialog.tsx

@@ -11,7 +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";
+import { useI18n } from "twake-i18n";
 
 export function EditModeDialog({
   type,

src/components/Event/EventDuplicate.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from "@mui/material";
 import { CalendarEvent } from "../../features/Events/EventsTypes";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 
 export default function EventDuplication({
   onClose,

src/components/Event/EventFormFields.tsx

@@ -33,7 +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 { useI18n } from "twake-i18n";
 import { FieldWithLabel } from "./components/FieldWithLabel";
 import { DateTimeFields } from "./components/DateTimeFields";
 import { useAllDayToggle } from "./hooks/useAllDayToggle";

src/components/Event/EventRepeat.tsx

@@ -15,7 +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";
+import { useI18n } from "twake-i18n";
 
 export default function RepeatEvent({
   repetition,

src/components/Event/components/DateTimeFields.tsx

@@ -6,7 +6,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs, { Dayjs } from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { LONG_DATE_FORMAT } from "../utils/dateTimeFormatters";
 import "dayjs/locale/fr";
 import "dayjs/locale/en";

src/components/Menubar/EventSearchBar.tsx

@@ -19,7 +19,7 @@ import { useRef, useState } from "react";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import SearchIcon from "@mui/icons-material/Search";
 import TuneIcon from "@mui/icons-material/Tune";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { searchEventsAsync } from "../../features/Search/SearchSlice";
 import { setView } from "../../features/Settings/SettingsSlice";

src/components/Menubar/Menubar.tsx

@@ -25,7 +25,7 @@ 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 { useI18n } from "twake-i18n";
 import { setView } from "../../features/Settings/SettingsSlice";
 import { getUserDisplayName } from "../../utils/userUtils";
 import { format } from "date-fns";

src/features/Events/EventDisplayPreview.tsx

@@ -47,7 +47,7 @@ import { deleteEventAsync } from "../Calendars/CalendarSlice";
 import { dlEvent } from "./EventApi";
 import { CalendarEvent } from "./EventsTypes";
 import EventUpdateModal from "./EventUpdateModal";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { userAttendee } from "../User/userDataTypes";
 import { browserDefaultTimeZone } from "../../utils/timezone";
 

src/features/Events/EventModal.tsx

@@ -31,7 +31,7 @@ import {
 } from "../../components/Event/utils/dateTimeFormatters";
 import { convertFormDateTimeToISO } from "../../components/Event/utils/dateTimeHelpers";
 import { addDays } from "../../components/Event/utils/dateRules";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import {
   saveEventFormDataToTemp,
   restoreEventFormDataFromTemp as restoreEventFormDataFromStorage,

src/features/Events/EventUpdateModal.tsx

@@ -28,7 +28,7 @@ import {
   detectRecurringEventChanges,
 } from "./eventUtils";
 import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { updateAttendeesAfterTimeChange } from "../../components/Calendar/handlers/eventHandlers";
 import { convertFormDateTimeToISO } from "../../components/Event/utils/dateTimeHelpers";
 import {

src/features/Search/SearchResultsPage.tsx

@@ -3,7 +3,7 @@ import RepeatIcon from "@mui/icons-material/Repeat";
 import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
 import { Box, IconButton, Stack, Typography } from "@mui/material";
 import CircularProgress from "@mui/material/CircularProgress";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { AppDispatch } from "../../app/store";

src/features/Settings/SettingsPage.tsx

@@ -33,7 +33,7 @@ import {
   setAlarmEmails,
 } from "../User/userSlice";
 import { AVAILABLE_LANGUAGES } from "./constants";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { useI18n } from "twake-i18n";
 import "./SettingsPage.styl";
 import {
   useTimeZoneList,