inject translated stringts

Author: wbglaeser

src/ui/language/translations.js

@@ -1,3 +1,5 @@
+import { filter } from "lodash";
+
 const translations = {
     en: {
         home: {
@@ -212,6 +214,13 @@ const translations = {
                     probableNotEligible: "Probable ineligibility",
                     notEnoughData: "Not enough data for assessment",
                     beta: "Some benefits are still in beta, meaning they are not fully tested and may contain errors."
+                },
+                filter: {
+                    title: "Filter",
+                    benefitCategories: "Benefit category",
+                    administrativeLevels: "Administrative level",
+                    providingAgencies: "Providing agency",
+                    associatedLaws: "Associated law",
                 }
             },
             profile: {
@@ -498,6 +507,13 @@ const translations = {
                     probableNotEligible: "Wahrscheinlich besteht kein Anspruch",
                     notEnoughData: "Nicht genügend Angaben für eine Einschätzung",
                     beta: "Eininge Leistungen sind noch in der Beta-Phase, d.h. sie sind noch nicht vollständig getestet und können Fehler enthalten."
+                },
+                filter: {
+                    title: "Filter",
+                    benefitCategories: "Leistungskategorie",
+                    administrativeLevels: "Verwaltungsebene",
+                    providingAgencies: "Zuständige Behörde",
+                    associatedLaws: "Zugehöriges Gesetz",
                 }
             },
             profile: {

src/ui/screens/eligibilty-overview/EligibilityOverviewScreen.js

@@ -22,7 +22,8 @@ const EligibilityOverviewScreen = ({
                 <VBox sx={{ gap: { xs: 4, md: 8 } }} >
                     <EligibilityOverviewHeader iconPaths={iconPaths} />
                     <VBox sx={{ gap: { xs: 2, md: 4 } }}>
-                        <EligibilityOverviewFilter 
+                        <EligibilityOverviewFilter
+                            t={t}
                             filterOptions={filterOptions}
                             filters={filters}
                             onChangeFilters={onChangeFilters}

src/ui/screens/eligibilty-overview/components/EligibilityOverviewFilter.js

@@ -19,7 +19,7 @@ const FILTER_KEYS = [
     { key: 'associatedLaws', label: 'Associated Law' },
 ]
 
-const EligibilityOverviewFilter = ({ filterOptions, filters, onChangeFilters }) => {
+const EligibilityOverviewFilter = ({ t, filterOptions, filters, onChangeFilters }) => {
     const handleChange = (key) => (event) => {
         onChangeFilters(prev => ({
             ...prev,
@@ -48,19 +48,19 @@ const EligibilityOverviewFilter = ({ filterOptions, filters, onChangeFilters })
         >
             <VBox sx={{ gap: 2 }}>
                 <Typography variant="h4" sx={{ color: 'blue.main', fontWeight: '400' }}>
-                    Filter
+                    {t('app.browseAll.filter.title')}
                 </Typography>
-                <HBox sx={{ flex: 1, justifyContent: 'space-between', gap: 4, flexWrap: 'wrap' }}>
+                <HBox sx={{ gap: 4, flexWrap: 'wrap' }}>
                     {FILTER_KEYS.map(({ key, label }) => (
                         <FormControl key={key} size="small" sx={{ minWidth: 200 }}>
-                            <InputLabel id={`${key}-label`}>{label}</InputLabel>
+                            <InputLabel id={`${key}-label`}>{t(`app.browseAll.filter.${key}`)}</InputLabel>
                             <Select
                                 labelId={`${key}-label`}
                                 multiple
                                 value={filters[key]}
                                 onChange={handleChange(key)}
                                 label={label}
-                                renderValue={() => label}
+                                renderValue={() => t(`app.browseAll.filter.${key}`)}
                             >
                                 {filterOptions[key].map(item => (
                                     <MenuItem key={item.id} value={item.id}>