feat: Add Greek localization (M2-7799) (#537)

* add support for Greek localization and include dummy language file * add updated translation files * update french translation
ChildMindInstitute · Oct 23, 2024 · 7675fe7 · 7675fe7
1 parent 139f65e
commit 7675fe7
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 11 deletions.
diff --git a/src/app/system/locale/constants.ts b/src/app/system/locale/constants.ts
@@ -3,4 +3,5 @@ export type SupportableLanguageKeys = keyof typeof SupportableLanguage;
 export enum SupportableLanguage {
   English = 'en',
   French = 'fr',
+  Greek = 'el',
 }
diff --git a/src/app/system/locale/i18n.ts b/src/app/system/locale/i18n.ts
@@ -2,6 +2,7 @@ import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
+import elResources from '~/i18n/el/translation.json';
 import enResources from '~/i18n/en/translation.json';
 import frResources from '~/i18n/fr/translation.json';
 
@@ -15,8 +16,9 @@ const i18nManager = {
         resources: {
           en: enResources,
           fr: frResources,
+          el: elResources,
         },
-        supportedLngs: ['en', 'fr'],
+        supportedLngs: ['en', 'fr', 'el'],
         interpolation: {
           escapeValue: false,
         },

diff --git a/src/features/language/ui/LanguageDropdown.tsx b/src/features/language/ui/LanguageDropdown.tsx
@@ -43,7 +43,10 @@ const LanguageDropdown = (props: Props) => {
   return (
     <div data-testid="header-language-dropdown">
       <BaseDropdown
-        title={language === SupportableLanguage.English ? t('english') : t('french')}
+        title={
+          preparedLanguageOptions.filter((e) => (e.key as SupportableLanguage) === language)[0]
+            .value
+        }
         options={preparedLanguageOptions}
       />
     </div>

diff --git a/src/i18n/el/translation.json b/src/i18n/el/translation.json
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
@@ -77,7 +77,8 @@
     },
     "Language": {
       "english": "English",
-      "french": "French"
+      "french": "Français",
+      "greek": "Ελληνικά"
     },
     "validation": {
       "passwordRequired": "Password is required.",
@@ -322,6 +323,11 @@
     "charactersCount": "{{numCharacters}}/{{maxCharacters}} characters",
     "targetSubjectLabel": "About {{name}}",
     "targetSubjectBanner": "Please ensure all your responses are about <strong>{{name}}</strong>",
-    "loading": "Loading…"
+    "loading": "Loading…",
+    "footer": {
+      "product": "Mindlogger is a product of the",
+      "support": "Support",
+      "termsOfService": "Terms of Service"
+    }
   }
 }
diff --git a/src/i18n/fr/translation.json b/src/i18n/fr/translation.json
@@ -83,8 +83,9 @@
     },
 
     "Language": {
-      "english": "Anglaise",
-      "french": "Français"
+      "english": "English",
+      "french": "Français",
+      "greek": "Ελληνικά"
     },
 
     "validation": {
@@ -341,6 +342,11 @@
     "charactersCount": "{{numCharacters}}/{{maxCharacters}} caractères",
     "targetSubjectLabel": "À propos de {{name}}",
     "targetSubjectBanner": "Assurez-vous que toutes vos réponses concernent <strong>{{name}}</strong>",
-    "loading": "Chargement en cours..."
+    "loading": "Chargement en cours...",
+    "footer": {
+      "product": "Mindlogger est un produit de",
+      "support": "Soutien",
+      "termsOfService": "Conditions d'utilisation"
+    }
   }
 }
diff --git a/src/widgets/Footer/index.tsx b/src/widgets/Footer/index.tsx
@@ -1,9 +1,11 @@
 import { Theme } from '~/shared/constants';
 import { Box } from '~/shared/ui';
 import { Text } from '~/shared/ui';
-import { useCustomMediaQuery } from '~/shared/utils';
+import { useCustomMediaQuery, useCustomTranslation } from '~/shared/utils';
 
 export default function Footer() {
+  const { t } = useCustomTranslation({ keyPrefix: 'footer' });
+
   const buildVersion = import.meta.env.VITE_BUILD_VERSION;
 
   const { greaterThanMD } = useCustomMediaQuery();
@@ -22,18 +24,18 @@ export default function Footer() {
       <Box display="flex" alignItems="center" textAlign="center" marginY={3} gap={2}>
         {greaterThanMD && (
           <span>
-            Mindlogger is a product of the{' '}
+            {t('product')}{' '}
             <a href="https://childmind.org" target="_blank" rel="noreferrer">
               Child Mind Institute
             </a>{' '}
             &#169; 2024
           </span>
         )}
         <a href="https://mindlogger.org/terms" target="_blank" rel="noreferrer">
-          Terms of Service
+          {t('termsOfService')}
         </a>
         <a href="https://help.mindlogger.org/" target="_blank" rel="noreferrer">
-          Support
+          {t('support')}
         </a>
         {buildVersion && (
           <Text variant="body1" color={Theme.colors.light.outlineVariant}>