Merge branch 'develop' into i18n/new-namespaces

src/views/Modals/Inputs/AttachmentViewerModal.jsx

@@ -1,4 +1,5 @@
 import { Browser } from '@capacitor/browser'
+import { useTranslation } from 'react-i18next'
 import { Capacitor } from '@capacitor/core'
 import { Download } from '@mui/icons-material'
 import { Box, CircularProgress, Typography } from '@mui/joy'
@@ -29,6 +30,7 @@ const downloadUrl = (url, fileName) => {
 }
 
 function AttachmentViewerModal({ config }) {
+  const { t } = useTranslation('common')
   const { ResponsiveModal } = useResponsiveModal()
   const [imgLoaded, setImgLoaded] = useState(false)
   const [imgError, setImgError] = useState(false)
@@ -49,7 +51,7 @@ function AttachmentViewerModal({ config }) {
       maxHeight='92vh'
       footer={
         <ModalActions
-          secondary={{ label: 'Close', onClick: handleClose }}
+          secondary={{ label: t('close'), onClick: handleClose }}
           primary={{
             label: 'Download',
             startDecorator: <Download />,
@@ -73,7 +75,7 @@ function AttachmentViewerModal({ config }) {
         )}
         {imgError ? (
           <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
-            Failed to load image.
+            {t('imageLoadFailed')}
           </Typography>
         ) : (
           <Box

src/views/Modals/Inputs/DateModal.jsx

@@ -2,8 +2,10 @@ import { Input } from '@mui/joy'
 import { useState } from 'react'
 import ModalActions from '../../../components/common/ModalActions'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
+import { useTranslation } from 'react-i18next'
 
 function DateModal({ isOpen, onClose, onSave, current, title }) {
+  const { t } = useTranslation('common')
   const { ResponsiveModal } = useResponsiveModal()
   const [date, setDate] = useState(
     current ? new Date(current).toISOString().split('T')[0] : '',
@@ -22,8 +24,8 @@ function DateModal({ isOpen, onClose, onSave, current, title }) {
       title={title}
       footer={
         <ModalActions
-          secondary={{ label: 'Cancel', onClick: onClose }}
-          primary={{ label: 'Save', onClick: handleSave, disabled: !date }}
+          secondary={{ label: t('cancel'), onClick: onClose }}
+          primary={{ label: t('save'), onClick: handleSave, disabled: !date }}
         />
       }
     >

src/views/Modals/Inputs/TextModal.jsx

@@ -2,6 +2,7 @@ import { Textarea } from '@mui/joy'
 import { useState } from 'react'
 import ModalActions from '../../../components/common/ModalActions'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
+import { useTranslation } from 'react-i18next'
 
 function TextModal({
   isOpen,
@@ -12,6 +13,7 @@ function TextModal({
   okText,
   cancelText,
 }) {
+  const { t } = useTranslation('common')
   const { ResponsiveModal } = useResponsiveModal()
   const [text, setText] = useState(current)
 
@@ -35,7 +37,7 @@ function TextModal({
     >
       <Textarea
         autoFocus
-        placeholder='Type in here…'
+        placeholder={t('typeHere')}
         value={text}
         onChange={event => setText(event.target.value)}
         minRows={3}

src/views/Modals/Inputs/UserModal.jsx

@@ -1,8 +1,10 @@
 import { Avatar, Box, List, ListItem, Typography } from '@mui/joy'
 import ModalActions from '../../../components/common/ModalActions'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
+import { useTranslation } from 'react-i18next'
 
 const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
+  const { t } = useTranslation('common')
   const { ResponsiveModal } = useResponsiveModal()
 
   return (
@@ -13,7 +15,7 @@ const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
       fullWidth={true}
       title='Select User'
       footer={
-        <ModalActions secondary={{ label: 'Cancel', onClick: onClose }} />
+        <ModalActions secondary={{ label: t('cancel'), onClick: onClose }} />
       }
     >
       <List sx={{ mb: 2 }}>