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

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>