Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added translations and edited shipping details

Browse Source
This commit is contained in:
Laura Dolibois
2025-05-25 18:40:54 +02:00
parent 2860473da8
commit 9d8a675998
3 changed files with 92 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
01-frontend/public/locales/de/translation.json
View File

@@ -7,28 +7,43 @@
"almostSoldOut": "Fast ausverkauft",
"all": "Alle",
"available": "Stück verfügbar",
"back": "Zurück",
"backToHome": "Zurück zur Startseite",
"cancel": "Abbrechen",
"categories": "Kategorien",
"category": "Kategorie",
"checkout": "Zur Kasse",
"city": "Ort",
"clearCart": "Warenkorb leeren",
"close": "Schließen",
"completeYourOrder": "Bestellung abschließen",
"contact": "Kontakt",
"country": "Land",
"currentAccount": "Konto des aktuellen Benutzers",
"deleteAccount": "Konto löschen",
"edit": "Bearbeiten",
"email": "E-Mail",
"finish": "Fertigstellen",
"firstName": "Vorname",
"freeShipping": "Kostenloser Versand ab 50 € Bestellwert",
"gardenSupplies": "Gartenzubehör",
"inStock": "Verfügbar",
"lastName": "Nachname",
"logout": "Ausloggen",
"myAccount": "Mein Konto",
"name": "Name",
"next": "Weiter",
"orderedItems": "Bestellte Artikel",
"orders": "Bestellungen",
"orderSummary": "Bestellübersicht",
"other": "Sonstiges",
"outOfStock": "Ausverkauft",
"payment": "Bezahlung",
"paymentNotAvailable": "Keine Zahlungsmöglichkeit hinterlegt.",
"pageDoesNotExist": "Ups! Diese Seite existiert nicht.",
"phone": "Telefon",
"placeOrder": "Zahlungspflichtig bestellen",
"postalCode": "Postleitzahl",
"price": "Preis",
"productDoesNotExist": "Dieses Produkt existiert nicht oder wurde bereits gelöscht.",
"productNotFound": "Produkt nicht gefunden!",
@@ -37,10 +52,14 @@
"rating": "Bewertung",
"ratingFrom": "Bewertung vom",
"review": "Produktrezension (optional)",
"reviewCart": "Warenkorb",
"save": "Speichern",
"search": "Suchen",
"seeds": "Saatgut",
"shippingDetails": "Versand",
"submit": "Senden",
"technicalComponents": "Technik",
"wrongTurn": "Ein falscher Weg wurde eingeschlagen. Zurück auf den richtigen Pfad."
"thanksForOrder": "Vielen Dank für die Bestellung!",
"wrongTurn": "Ein falscher Weg wurde eingeschlagen. Hier geht es zurück auf den richtigen Pfad.",
"yourOrderNumber": "Die Bestellnummer lautet"
}

21
01-frontend/public/locales/en/translation.json
View File

@@ -7,28 +7,43 @@
"almostSoldOut": "Almost sold out",
"all": "Show all",
"available": "items available",
"back": "Back",
"backToHome": "Go back to home",
"cancel": "Cancel",
"categories": "Categories",
"category": "Category",
"checkout": "Checkout",
"city": "City",
"clearCart": "Clear cart",
"close": "Close",
"completeYourOrder": "Complete your order",
"contact": "Contact",
"country": "Country",
"currentAccount": "Account of current user",
"deleteAccount": "Delete Account",
"edit": "Edit",
"email": "Email",
"finish": "Finish",
"firstName": "First name",
"freeShipping": "Free shipping for orders over 50 €",
"gardenSupplies": "Garden supplies",
"inStock": "In stock",
"lastName": "Last name",
"logout": "Logout",
"myAccount": "My Account",
"name": "Name",
"next": "Next",
"orderedItems": "Ordered items",
"orders": "Orders",
"orderSummary": "Order summary",
"other": "Other",
"outOfStock": "Out of stock",
"payment": "Payment",
"paymentNotAvailable": "No payment method available.",
"pageDoesNotExist": "Oops! The page you're looking for doesn't exist.",
"phone": "Phone number",
"placeOrder": "Place order",
"postalCode": "Postal code",
"price": "Price",
"productDoesNotExist": "It seems you are locking for a product that doesn't exist or has been removed.",
"productNotFound": "Product not found!",
@@ -37,10 +52,14 @@
"rating": "Rating",
"ratingFrom": "Rating from",
"review": "Product review (optional)",
"reviewCart": "Review cart",
"save": "Save",
"search": "Search",
"seeds": "Seeds",
"shippingDetails": "Shipping details",
"submit": "Submit",
"technicalComponents": "Technical components",
"wrongTurn": "It seems you may have taken a wrong turn. Let's get you back on track."
"thanksForOrder": "Thank you for your order!",
"wrongTurn": "It seems you may have taken a wrong turn. Let's get you back on track.",
"yourOrderNumber": "Your order number is"
}

80
01-frontend/src/pages/Payment.tsx
View File

@@ -18,6 +18,7 @@ import {
} from '@mui/material';
import { useBasket } from '../helper/BasketProvider';
import { useNavigate } from 'react-router-dom';
import {useTranslation} from "react-i18next";
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: '#fff',
@@ -26,19 +27,22 @@ const Item = styled(Paper)(({ theme }) => ({
textAlign: 'center',
}));
const steps = ['Review Items', 'Shipping Details', 'Payment', 'Order Summary'];
export default function Payment() {
const { t } = useTranslation();
const navigator = useNavigate();
const { basket, clearBasket } = useBasket();
const [activeStep, setActiveStep] = useState(0);
const [shippingDetails, setShippingDetails] = useState({
name: '',
firstName: '',
lastName: '',
address: '',
city: '',
postalCode: '',
city: '',
country: ''
});
const [orderNumber, setOrderNumber] = useState<string | null>(null);
const steps = [t('reviewCart'), t('shippingDetails'), t('payment'), t('orderSummary')];
const handleNext = () => {
if (activeStep === steps.length - 2) {
@@ -71,7 +75,7 @@ export default function Payment() {
return (
<Box>
<Typography variant="h6" gutterBottom>
Review Items
{t('reviewCart')}
</Typography>
<List>
{basket.map((item) => (
@@ -85,7 +89,7 @@ export default function Payment() {
</List>
<Divider sx={{ my: 2 }} />
<Button variant="outlined" color="error" onClick={handleClearBasket}>
Clear Basket
{t('clearCart')}
</Button>
</Box>
);
@@ -93,22 +97,31 @@ export default function Payment() {
return (
<Box>
<Typography variant="h6" gutterBottom>
Shipping Details
{t('shippingDetails')}
</Typography>
<Grid container spacing={2}>
<Item>
<TextField
fullWidth
label="Name"
name="name"
value={shippingDetails.name}
label={t('firstName')}
name="firstName"
value={shippingDetails.firstName}
onChange={handleInputChange}
/>
</Item>
<Item>
<TextField
fullWidth
label="Address"
label={t('lastName')}
name="lastName"
value={shippingDetails.lastName}
onChange={handleInputChange}
/>
</Item>
<Item>
<TextField
fullWidth
label={t('address')}
name="address"
value={shippingDetails.address}
onChange={handleInputChange}
@@ -117,7 +130,16 @@ export default function Payment() {
<Item>
<TextField
fullWidth
label="City"
label={t('postalCode')}
name="postalCode"
value={shippingDetails.postalCode}
onChange={handleInputChange}
/>
</Item>
<Item>
<TextField
fullWidth
label={t('city')}
name="city"
value={shippingDetails.city}
onChange={handleInputChange}
@@ -126,9 +148,9 @@ export default function Payment() {
<Item>
<TextField
fullWidth
label="Postal Code"
name="postalCode"
value={shippingDetails.postalCode}
label={t('country')}
name="country"
value={shippingDetails.country}
onChange={handleInputChange}
/>
</Item>
@@ -139,10 +161,10 @@ export default function Payment() {
return (
<Box>
<Typography variant="h6" gutterBottom>
Payment
{t('payment')}
</Typography>
<Typography variant="body1">
Payment method not implemented yet.
{t('paymentNotAvailable')}
</Typography>
</Box>
);
@@ -150,22 +172,24 @@ export default function Payment() {
return (
<Box>
<Typography variant="h6" gutterBottom>
Order Summary
{t('orderSummary')}
</Typography>
<Typography variant="body1" gutterBottom>
Thank you for your order!
{t('thanksForOrder')}
</Typography>
<Typography variant="body2" gutterBottom>
Your order number is: <strong>{orderNumber}</strong>
{t('yourOrderNumber')}: <strong>{orderNumber}</strong>
</Typography>
<Divider sx={{ my: 2 }} />
<Typography variant="h6">Shipping Details:</Typography>
<Typography variant="h6">{t('shippingDetails')}:</Typography>
<Typography variant="body2">
{shippingDetails.name}, {shippingDetails.address}, {shippingDetails.city},{' '}
{shippingDetails.postalCode}
{shippingDetails.firstName} {shippingDetails.lastName}<br />
{shippingDetails.address}<br />
{shippingDetails.postalCode} {shippingDetails.city}<br />
{shippingDetails.country}
</Typography>
<Divider sx={{ my: 2 }} />
<Typography variant="h6">Ordered Items:</Typography>
<Typography variant="h6">{t('orderedItems')}:</Typography>
<List>
{basket.map((item) => (
<ListItem key={item.itemId}>
@@ -188,7 +212,7 @@ export default function Payment() {
<Container maxWidth="md" sx={{ py: 4 }}>
<Paper elevation={3} sx={{ p: 4 }}>
<Typography variant="h4" align="center" gutterBottom>
Checkout
{t('completeYourOrder')}
</Typography>
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label) => (
@@ -204,7 +228,7 @@ export default function Payment() {
onClick={handleBack}
variant="outlined"
>
Back
{t('back')}
</Button>
{activeStep === steps.length - 1 ? (
<Button
@@ -214,11 +238,11 @@ export default function Payment() {
navigator('/');
}}
>
Finish
{t('finish')}
</Button>
) : (
<Button variant="contained" color="primary" onClick={handleNext}>
{activeStep === steps.length - 2 ? 'Place Order' : 'Next'}
{activeStep === steps.length - 2 ? t('placeOrder') : t('next')}
</Button>
)}
</Box>