[#82] added cozy-ui for internationnalisation (#267)

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

src/components/Error/Error.tsx

@@ -4,8 +4,10 @@ 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";
 
 export function Error() {
+  const { t } = useI18n();
   const dispatch = useAppDispatch();
   const userError = useAppSelector((state) => 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 (
     <Fade in timeout={500}>
@@ -56,7 +58,7 @@ export function Error() {
             </Box>
 
             <Typography variant="h5" fontWeight={600}>
-              Something went wrong
+              {t("error.title")}
             </Typography>
 
             <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
@@ -67,9 +69,7 @@ export function Error() {
               variant="contained"
               color="error"
               startIcon={<ReplayIcon />}
-              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")}
             </Button>
           </Stack>
         </Paper>

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={
           <Button color="inherit" size="small" onClick={handleCloseSnackbar}>
-            OK
+            {t("common.ok")}
           </Button>
         }
       >
-        {error}
+        {error || t("error.unknown")}
       </Alert>
     </Snackbar>
   );
@@ -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 (
     <Snackbar
@@ -65,7 +70,7 @@ export function EventErrorSnackbar({
         sx={{ width: "100%" }}
         action={
           <Button color="inherit" size="small" onClick={onClose}>
-            OK
+            {t("common.ok")}
           </Button>
         }
       >