Skip to content

Commit 09d97e7

Browse files
benjaminaaronbenjaminaaron
committed
Add more translation strings
1 parent 3d8dbc8 commit 09d97e7

File tree

10 files changed

+85
-26
lines changed

10 files changed

+85
-26
lines changed

‎src/language/translations.js‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,43 @@
11
const translations = {
22
en: {
3-
checkBenefitsHeader: 'Check benefits and financial support you can get',
3+
global: {
4+
actionButton: "Discover benefits"
5+
},
6+
menu: {
7+
howWorks: "How it works",
8+
principles: "Principles",
9+
aboutUs: "About us",
10+
improve: "Help us improve",
11+
collaborate: "Collaborate"
12+
},
13+
hero: {
14+
header: "Check benefits and financial support you can get",
15+
childAllowance: "Child allowance",
16+
housingBenefit: "Housing benefit",
17+
citizensBenefit: "Citizen's benefit",
18+
vocationalTrainingAllowance: "Vocational training allowance",
19+
manyMore: "Many more",
20+
}
421
},
522
de: {
6-
checkBenefitsHeader: 'Überprüfen Sie die Leistungen und finanzielle Unterstützung, die Sie erhalten können',
23+
global: {
24+
actionButton: "Leistungen entdecken"
25+
},
26+
menu: {
27+
howWorks: "Wie es funktioniert",
28+
principles: "Prinzipien",
29+
aboutUs: "Über uns",
30+
improve: "Hilf uns, besser zu werden",
31+
collaborate: "Zusammenarbeit"
32+
},
33+
hero: {
34+
header: "Finde heraus, welche Leistungen und finanzielle Unterstützung du bekommen könntest",
35+
childAllowance: "Kinderzuschlag",
36+
housingBenefit: "Wohngeld",
37+
citizensBenefit: "Bürgergeld",
38+
vocationalTrainingAllowance: "Berufsausbildungsbeihilfe",
39+
manyMore: "Viele Weitere",
40+
},
741
},
842
};
943

‎src/language/useTranslation.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ function useTranslation() {
66
const { language } = useContext(LanguageContext);
77

88
const t = (key) => {
9-
return translations[language][key] || key;
9+
let value = translations[language] || translations['en'];
10+
for (let k of key.split('.')) {
11+
if (!value) return key;
12+
value = value[k];
13+
}
14+
return value;
1015
};
1116

1217
return { t, language };

‎src/screens/landing-page/components/LandingPageWAppButton.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@ import {Button} from "@mui/material";
33
import {Link} from "react-router-dom";
44
import globalStyles from "../../../styles/styles";
55
import HStack from "../../../components/HStack";
6+
import useTranslation from "../../../language/useTranslation";
67

78
const LandingPageWAppButton = ({backgroundColor}) => {
9+
const { t } = useTranslation();
10+
811
const buttonColor = (() => {
912
switch (backgroundColor) {
1013
case 'primary':
@@ -31,7 +34,7 @@ const LandingPageWAppButton = ({backgroundColor}) => {
3134
<HStack>
3235
<Button variant="text" sx={{...styles.button, backgroundColor: buttonColor, color: textColor}}
3336
component={Link}
34-
to="/user-routing">Discover benefits</Button>
37+
to="/user-routing">{t('global.actionButton')}</Button>
3538
</HStack>
3639
);
3740
}

‎src/screens/landing-page/sections/footer/views/LandingPageFooterDesktop.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,19 @@ import LinkedInLink from "../../../../../components/LinkedInLink";
1010
import LogoBar from "../../../../../components/LogoBar";
1111
import GitHubLink from "../../../../../components/GitHubLink";
1212
import FeatureToggle from "../components/FeatureToggle";
13+
import useTranslation from "../../../../../language/useTranslation";
1314

1415
const LandingPageFooterDesktop = () => {
16+
const { t } = useTranslation();
1517

1618
return (
1719
<VStack>
1820
<HStack justifyContent={'space-between'} alignItems={'center'}>
1921
<LogoBar/>
2022
<HStack gap={3} justifyContent={'center'} alignItems={'center'}>
21-
<NarBarLink to={"/#how-it-works"} title={'How it works'}/>
22-
<NarBarLink to={"/#principles"} title={'Principles'}/>
23-
<NarBarLink to={"/#about-us"} title={'About us'}/>
23+
<NarBarLink to={"/#how-it-works"} title={t('menu.howWorks')}/>
24+
<NarBarLink to={"/#principles"} title={t('menu.principles')}/>
25+
<NarBarLink to={"/#about-us"} title={t('menu.aboutUs')}/>
2426
<LandingPageWAppButton backgroundColor={'secondary'}/>
2527
</HStack>
2628
</HStack>

‎src/screens/landing-page/sections/footer/views/LandingPageFooterMobile.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ import NarBarLink from "../../../../../components/NavBarLink";
99
import LandingPageWAppButton from "../../../components/LandingPageWAppButton";
1010
import GitHubLink from "../../../../../components/GitHubLink";
1111
import FeatureToggle from "../components/FeatureToggle";
12+
import useTranslation from "../../../../../language/useTranslation";
1213

1314
const LandingPageFooterMobile = () => {
15+
const { t } = useTranslation();
16+
1417
return (
1518
<VStack>
1619
<VStack alignItems={'center'}>
@@ -23,9 +26,9 @@ const LandingPageFooterMobile = () => {
2326
</VStack>
2427
<Divider variant="middle" sx={{borderBottomWidth: '2px'}}/>
2528
<VStack alignItems={'center'}>
26-
<NarBarLink to={"/#how-it-works"} title={'How it works'}/>
27-
<NarBarLink to={"/#principles"} title={'Principles'}/>
28-
<NarBarLink to={"/#about-us"} title={'About us'}/>
29+
<NarBarLink to={"/#how-it-works"} title={t('menu.howWorks')}/>
30+
<NarBarLink to={"/#principles"} title={t('menu.principles')}/>
31+
<NarBarLink to={"/#about-us"} title={t('menu.aboutUs')}/>
2932
<LandingPageWAppButton backgroundColor={'secondary'}/>
3033
<Typography sx={styles.copyrightText}>
3134
© 2024 by FörderFunke. All rights reserved.

‎src/screens/landing-page/sections/header/views/HeaderBarDesktop.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,21 @@ import NarBarLink from "../../../../../components/NavBarLink";
66
import LandingPageHollowButton from "../../../components/LandingPageButton";
77
import { LanguageContext } from "../../../../../language/LanguageContext";
88
import featureFlags from "../../../../../featureFlags";
9+
import useTranslation from "../../../../../language/useTranslation";
910

1011
const HeaderBarDesktop = ({isApp}) => {
1112
const {language, setLanguage} = useContext(LanguageContext);
13+
const { t } = useTranslation();
1214

1315
return (
1416
<HStack gap={5} justifyContent={'flex-end'} alignItems={'center'} sx={{width: '100%'}}>
1517
<HStack gap={3}>
1618
{isApp ? null : <LandingPageWAppButton backgroundColor={'primary'}/>}
17-
{isApp ? null : <LandingPageHollowButton text={'Help us improve'} to={'/#feedback'}/>}
18-
{isApp ? null : <LandingPageHollowButton text={'Collaborate'} to={'/#collaboration'}/>}
19+
{isApp ? null : <LandingPageHollowButton text={t('menu.improve')} to={'/#feedback'}/>}
20+
{isApp ? null : <LandingPageHollowButton text={t('menu.collaborate')} to={'/#collaboration'}/>}
1921
</HStack>
2022
<HStack>
21-
<NarBarLink to={"/#about-us"} title={'About us'}/>
23+
<NarBarLink to={"/#about-us"} title={t('menu.aboutUs')}/>
2224
{
2325
featureFlags.newLanguageToggle && (
2426
<Typography>

‎src/screens/landing-page/sections/header/views/HeaderBarMobile.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {useState} from 'react';
22
import MenuIcon from '@mui/icons-material/Menu';
33
import {Menu, MenuItem, IconButton} from '@mui/material';
44
import {Link} from 'react-router-dom';
5+
import useTranslation from "../../../../../language/useTranslation";
56

67
const HeaderBarMobile = () => {
78
const [anchorEl, setAnchorEl] = useState(null);
@@ -14,6 +15,9 @@ const HeaderBarMobile = () => {
1415
setAnchorEl(null);
1516
};
1617

18+
// const {language, setLanguage} = useContext(LanguageContext); TODO
19+
const { t } = useTranslation();
20+
1721
return (
1822
<>
1923
<IconButton
@@ -30,9 +34,9 @@ const HeaderBarMobile = () => {
3034
open={Boolean(anchorEl)}
3135
onClose={handleClose}
3236
>
33-
<MenuItem component={Link} to="/#how-it-works" onClick={handleClose}>How it works</MenuItem>
34-
<MenuItem component={Link} to="/#principles" onClick={handleClose}>Principles</MenuItem>
35-
<MenuItem component={Link} to="/#about-us" onClick={handleClose}>About us</MenuItem>
37+
<MenuItem component={Link} to="/#how-it-works" onClick={handleClose}>{t('menu.howWorks')}</MenuItem>
38+
<MenuItem component={Link} to="/#principles" onClick={handleClose}>{t('menu.principles')}</MenuItem>
39+
<MenuItem component={Link} to="/#about-us" onClick={handleClose}>{t('menu.aboutUs')}</MenuItem>
3640
</Menu>
3741
</>
3842
)

‎src/screens/landing-page/sections/top-section/LandingPageTopSection.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,19 @@ import React from "react";
22
import LandingPageTopSectionDesktop from "./views/LandingPageTopSectionDesktop";
33
import LandingPageTopSectionMobile from "./views/LandingPageTopSectionMobile";
44
import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
5-
6-
const benefits = [
7-
{id: 1, name: "Child allowance", url: "Kinderzuschlag.png"},
8-
{id: 2, name: "Housing benefit", url: "Wohngeld.png"},
9-
{id: 3, name: "Cost-of-living assistance", url: "Grundsicherung.png"},
10-
{id: 4, name: "Vocational training allowance", url: "Bildungsgutschein.png"},
11-
{id: 5, name: "More", url: "VieleWeitere.png"},
12-
];
5+
import useTranslation from "../../../../language/useTranslation";
136

147
const LandingPageTopSection = ({isDesktop}) => {
8+
const { t } = useTranslation();
9+
10+
const benefits = [
11+
{ id: 1, name: t("hero.childAllowance"), url: "Kinderzuschlag.png" },
12+
{ id: 2, name: t("hero.housingBenefit"), url: "Wohngeld.png" },
13+
{ id: 3, name: t("hero.citizensBenefit"), url: "Grundsicherung.png" },
14+
{ id: 4, name: t("hero.vocationalTrainingAllowance"), url: "Bildungsgutschein.png" },
15+
{ id: 5, name: t("hero.manyMore"), url: "VieleWeitere.png" },
16+
];
17+
1518
return (
1619
<LandingPageSectionWrapper isDesktop={isDesktop}>
1720
{isDesktop ? <LandingPageTopSectionDesktop benefits={benefits}/> :

‎src/screens/landing-page/sections/top-section/views/LandingPageTopSectionDesktop.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const LandingPageTopSectionDesktop = ({benefits}) => {
1313
<HStack justifyContent={'space-between'} alignItems={'center'}>
1414
<VStack alignItems={'flex-start'} sx={{maxWidth: '40%'}}>
1515
<Typography sx={styles.headerSectionTitle}>
16-
{t('checkBenefitsHeader')}
16+
{t('hero.header')}
1717
</Typography>
1818
<LandingPageWAppButton backgroundColor={'primary'}/>
1919
</VStack>

‎src/screens/landing-page/sections/top-section/views/LandingPageTopSectionMobile.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@ import {Typography} from "@mui/material";
33
import VStack from "../../../../../components/VStack";
44
import LandingPageWAppButton from "../../../components/LandingPageWAppButton";
55
import LandingPageBenefitsListMobile from "../components/LandingPageBenefitsListMobile";
6+
import useTranslation from "../../../../../language/useTranslation";
67

78
const LandingPageTopSectionMobile = ({benefits}) => {
9+
const { t } = useTranslation();
10+
811
return (
912
<VStack>
1013
<VStack alignItems={'center'}>
1114
<Typography sx={styles.headerSectionTitle}>
12-
Check benefits and financial support you can get
15+
{t('hero.header')}
1316
</Typography>
1417
<LandingPageWAppButton backgroundColor={'primary'}/>
1518
</VStack>

0 commit comments

Comments
 (0)