added translations

01-frontend/public/locales/de/translation.json

@@ -1,12 +1,23 @@
 {
+  "account": "Account",
+  "addToCart": "In den Warenkorb",
+  "addedToCart": "Produkt wurde erfolgreich dem Warenkorb hinzugefügt",
   "almostSoldOut": "Fast ausverkauft",
   "available": "Stück verfügbar",
-  "freeShipping": "Kostenloser Versand ab 50€ Bestellwert",
+  "categories": "Kategorien",
+  "checkout": "Zur Kasse",
+  "close": "Schließen",
+  "contact": "Kontakt",
+  "currentAccount": "Account des aktuellen Benutzers",
+  "freeShipping": "Kostenloser Versand ab 50 € Bestellwert",
   "inStock": "Verfügbar",
+  "logout": "Ausloggen",
+  "orders": "Bestellungen",
   "outOfStock": "Ausverkauft",
   "quantity": "Anzahl",
   "rateThisProduct": "Dieses Produkt bewerten",
   "ratingFrom": "Bewertung vom",
   "review": "Produktrezension (optional)",
-  "search": "Suchen..."
+  "search": "Suchen",
+  "submit": "Senden"
 }

01-frontend/public/locales/en/translation.json

@@ -1,12 +1,23 @@
 {
+  "account": "Account",
+  "addToCart": "Add to cart",
+  "addedToCart": "Product added to shopping cart successfully",
   "almostSoldOut": "Almost sold out",
   "available": "items available",
-  "freeShipping": "Free shipping for orders over 50€",
+  "categories": "Categories",
+  "checkout": "Checkout",
+  "close": "Close",
+  "contact": "Contact",
+  "currentAccount": "Account of current user",
+  "freeShipping": "Free shipping for orders over 50 €",
   "inStock": "In stock",
+  "logout": "Logout",
+  "orders": "Orders",
   "outOfStock": "Out of stock",
   "quantity": "Quantity",
   "rateThisProduct": "Rate this product",
   "ratingFrom": "Rating from",
   "review": "Product review (optional)",
-  "search": "Search..."
+  "search": "Search",
+  "submit": "Submit"
 }

01-frontend/src/helper/navbar/NavBar.tsx

@@ -18,9 +18,6 @@ import { useNavigate } from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import './NavBar.css';
 
-const pages = ['Categories', 'Checkout', 'Contact'];
-const settings = ['Account', 'Orders', 'Logout'];
-
 const Search = styled('div')(({ theme }) => ({
     position: 'relative',
     borderRadius: theme.shape.borderRadius,
@@ -70,6 +67,12 @@ export default function NavBar() {
     const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
     const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
 
+    const pageKeys = ['categories', 'checkout', 'contact'];
+    const settingKeys = ['account', 'orders', 'logout'];
+
+    const pages = pageKeys.map(key => ({ key, label: t(key) }));
+    const settings = settingKeys.map(key => ({ key, label: t(key) }));
+
     const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorElNav(event.currentTarget);
     };
@@ -87,7 +90,6 @@ export default function NavBar() {
         navigate(`/${link.toLowerCase()}`);
     };
 
-
     return (
         <AppBar className="navbar">
             <Container maxWidth="xl">
@@ -116,15 +118,15 @@ export default function NavBar() {
                             <SearchIcon sx={{color: 'white'}}/>
                         </SearchIconWrapper>
                         <StyledInputBase
-                            placeholder={t('search')}
+                            placeholder={t('search') + "..."}
-                            inputProps={{ 'aria-label': 'search' }}
+                            inputProps={{ 'aria-label': t('search')}}
                         />
                     </Search>
 
                     <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                         <IconButton
                             size="large"
-                            aria-label="account of current user"
+                            aria-label={t('currentAccount')}
                             aria-controls="menu-appbar"
                             aria-haspopup="true"
                             onClick={handleOpenNavMenu}
@@ -148,9 +150,9 @@ export default function NavBar() {
                             onClose={handleCloseNavMenu}
                             sx={{ display: { xs: 'block', md: 'none' } }}
                         >
-                            {pages.map((page) => (
+                            {pages.map(({ key, label }) => (
-                                <MenuItem key={page} onClick={() => handleCloseNavMenu(page)}>
+                                <MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
-                                    <Typography sx={{ textAlign: 'center' }}>{page}</Typography>
+                                    <Typography sx={{ textAlign: 'center' }}>{label}</Typography>
                                 </MenuItem>
                             ))}
                         </Menu>
@@ -177,11 +179,11 @@ export default function NavBar() {
                     <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                         {pages.map((page) => (
                             <Button
-                                key={page}
+                                key={page.key}
-                                onClick={() => handleCloseNavMenu(page)}
+                                onClick={() => handleCloseNavMenu(page.key)}
                                 sx={{ my: 2, color: 'white', display: 'block' }}
                             >
-                                {page}
+                                {page.label}
                             </Button>
                         ))}
                     </Box>
@@ -207,9 +209,9 @@ export default function NavBar() {
                             open={Boolean(anchorElUser)}
                             onClose={handleCloseUserMenu}
                         >
-                            {settings.map((setting) => (
+                            {settings.map(({ key, label }) => (
-                                <MenuItem key={setting} onClick={() => handleCloseUserMenu(setting)}>
+                                <MenuItem key={key} onClick={() => handleCloseUserMenu(key)}>
-                                    <Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
+                                    <Typography sx={{ textAlign: 'center' }}>{label}</Typography>
                                 </MenuItem>
                             ))}
                         </Menu>

01-frontend/src/helper/productpage/ProductInfo.tsx

@@ -30,7 +30,7 @@ export default function ProductInfo({ item }: { item: Item }) {
         <React.Fragment>
             <IconButton
                 size="small"
-                aria-label="close"
+                aria-label={t('close')}
                 color="inherit"
                 onClick={handleClose}
             >
@@ -92,22 +92,22 @@ export default function ProductInfo({ item }: { item: Item }) {
                     {item.discount > 0 ? (
                         <>
                             <Typography variant="h4" color="green">
-                                €{discountedPrice.toFixed(2)}
+                                {discountedPrice.toFixed(2)} €
                             </Typography>
                             <Typography
                                 variant="h6"
                                 color="text.secondary"
                                 sx={{ textDecoration: 'line-through' }}
                             >
-                                €{item.price.toFixed(2)}
+                                {item.price.toFixed(2)} €
                             </Typography>
                             <Typography variant="h6" color="error">
-                                -{item.discount}%
+                                -{item.discount} %
                             </Typography>
                         </>
                     ) : (
                         <Typography variant="h4" color="green">
-                            €{item.price.toFixed(2)}
+                            {item.price.toFixed(2)} €
                         </Typography>
                     )}
                 </Stack>
@@ -143,7 +143,7 @@ export default function ProductInfo({ item }: { item: Item }) {
                         disabled={item.stock <= 0}
                         fullWidth
                     >
-                        Add to Cart
+                        {t('addToCart')}
                     </Button>
                 </Stack>
 
@@ -159,7 +159,7 @@ export default function ProductInfo({ item }: { item: Item }) {
                 open={open}
                 autoHideDuration={3000}
                 onClose={handleClose}
-                message="Successfully added to basket"
+                message={t('addedToCart')}
                 action={action}
             />
 

01-frontend/src/helper/productpage/Ratings.tsx

@@ -31,7 +31,7 @@ export default function Ratings() {
         <React.Fragment>
             <IconButton
                 size="small"
-                aria-label="close"
+                aria-label={t('close')}
                 color="inherit"
                 onClick={handleClose}
             >
@@ -78,7 +78,7 @@ export default function Ratings() {
                     className="rating-text-field"
                 />
                 <Button variant="contained" color="primary" className="rating-button" onClick={handleRatingSubmit}>
-                    Submit
+                    {t('submit')}
                 </Button>
             </div>
             <div className='contact-divider-box'>