From b96568287739127f21a83c25e7fc7f57ea201a11 Mon Sep 17 00:00:00 2001
From: aelassas <akram.elassas@gmail.com>
Date: Tue, 14 Jan 2025 16:25:03 +0100
Subject: [PATCH] Add spanish locale to mui ; fix localization issues

---
 .gitignore                                |  1 +
 backend/src/components/DatePicker.tsx     |  4 ++--
 backend/src/components/DateTimePicker.tsx |  4 ++--
 backend/src/lang/master.ts                |  2 +-
 backend/src/main.tsx                      | 13 +++++++------
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index fa2be7034..15e97ba35 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 /**/*.pem
 /**/*.pem-chain
 /**/*.ca.pem
+/**/.DS_Store
diff --git a/backend/src/components/DatePicker.tsx b/backend/src/components/DatePicker.tsx
index 5c486e16b..bfc524f1d 100644
--- a/backend/src/components/DatePicker.tsx
+++ b/backend/src/components/DatePicker.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker'
-import { fr, enUS } from 'date-fns/locale'
+import { fr, enUS, es } from 'date-fns/locale'
 import { TextFieldVariants } from '@mui/material'
 import { DateValidationError } from '@mui/x-date-pickers'
 
@@ -49,7 +49,7 @@ const DatePicker = ({
   }, [minDateValue])
 
   return (
-    <LocalizationProvider adapterLocale={language === 'fr' ? fr : enUS} dateAdapter={AdapterDateFns}>
+    <LocalizationProvider adapterLocale={language === 'fr' ? fr : language === 'es' ? es : enUS} dateAdapter={AdapterDateFns}>
       <MuiDatePicker
         label={label}
         views={['year', 'month', 'day']}
diff --git a/backend/src/components/DateTimePicker.tsx b/backend/src/components/DateTimePicker.tsx
index 5cbbb215f..d5ff6684d 100644
--- a/backend/src/components/DateTimePicker.tsx
+++ b/backend/src/components/DateTimePicker.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
-import { fr, enUS } from 'date-fns/locale'
+import { fr, enUS, es } from 'date-fns/locale'
 import { TextFieldVariants } from '@mui/material'
 import { DateTimeValidationError, PickersActionBarAction } from '@mui/x-date-pickers'
 
@@ -46,7 +46,7 @@ const DateTimePicker = ({
   }
 
   return (
-    <LocalizationProvider adapterLocale={language === 'fr' ? fr : enUS} dateAdapter={AdapterDateFns}>
+    <LocalizationProvider adapterLocale={language === 'fr' ? fr : language === 'es' ? es : enUS} dateAdapter={AdapterDateFns}>
       <MuiDateTimePicker
         label={label}
         value={value}
diff --git a/backend/src/lang/master.ts b/backend/src/lang/master.ts
index 95578ae5d..83813a80a 100644
--- a/backend/src/lang/master.ts
+++ b/backend/src/lang/master.ts
@@ -15,7 +15,7 @@ const strings = new LocalizedStrings({
     VALIDATION_EMAIL_ERROR: 'An error occurred while sending validation email.',
   },
   es: {
-    VALIDATE_EMAIL: "Se ha enviado un correo electrónico de validación a su dirección de correo electrónico. Por favor, revise su bandeja de entrada y valide su cuenta haciendo clic en el enlace del correo electrónico. Expirará después de un día. Si no recibió el correo electrónico de validación, haga clic en reenviar.",
+    VALIDATE_EMAIL: 'Se ha enviado un correo electrónico de validación a su dirección de correo electrónico. Por favor, revise su bandeja de entrada y valide su cuenta haciendo clic en el enlace del correo electrónico. Expirará después de un día. Si no recibió el correo electrónico de validación, haga clic en reenviar.',
     RESEND: 'Reenviar',
     VALIDATION_EMAIL_SENT: 'Correo electrónico de validación enviado.',
     VALIDATION_EMAIL_ERROR: 'Se produjo un error al enviar el correo electrónico de validación.',
diff --git a/backend/src/main.tsx b/backend/src/main.tsx
index 2e589e99d..640d18d04 100644
--- a/backend/src/main.tsx
+++ b/backend/src/main.tsx
@@ -4,9 +4,9 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 import { ToastContainer } from 'react-toastify'
 
-import { frFR as corefrFR, enUS as coreenUS } from '@mui/material/locale'
-import { frFR, enUS } from '@mui/x-date-pickers/locales'
-import { frFR as dataGridfrFR, enUS as dataGridenUS } from '@mui/x-data-grid/locales'
+import { frFR as corefrFR, enUS as coreenUS, esES as coresES } from '@mui/material/locale'
+import { frFR, enUS, esES } from '@mui/x-date-pickers/locales'
+import { frFR as dataGridfrFR, enUS as dataGridenUS, esES as dataGridesEs } from '@mui/x-data-grid/locales'
 import { disableDevTools } from ':disable-react-devtools'
 import * as helper from '@/common/helper'
 import * as UserService from '@/services/UserService'
@@ -66,6 +66,7 @@ if (lang) {
 
 language = UserService.getLanguage()
 const isFr = language === 'fr'
+const isEs = language === 'es'
 
 const theme = createTheme(
   {
@@ -93,9 +94,9 @@ const theme = createTheme(
       },
     },
   },
-  isFr ? frFR : enUS,
-  isFr ? dataGridfrFR : dataGridenUS,
-  isFr ? corefrFR : coreenUS,
+  isFr ? frFR : isEs ? esES : enUS,
+  isFr ? dataGridfrFR : isEs ? dataGridesEs : dataGridenUS,
+  isFr ? corefrFR : isEs ? coresES : coreenUS,
 )
 
 ReactDOM.createRoot(document.getElementById('root')!).render(