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

Fix basket on checkout

Browse Source
This commit is contained in:
Tim
2025-06-11 15:03:24 +02:00
parent d5f40da6ee
commit 5e8975f135
2 changed files with 31 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
01-frontend/src/helper/BasketProvider.tsx
View File

@@ -34,6 +34,7 @@ export const BasketProvider: React.FC<{ children: React.ReactNode }> = ({ childr
};
const clearBasket = () => {
console.log(" BASKET CLEARED BasketProvideur");
setBasket([]);
};

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

@@ -34,12 +34,37 @@ function getDiscountedPrice(item: Item): number {
return (item.price100 / 100 * (100-item.discount100)/100);
}
function generateBasket(t: any, basket: any[]) {
return basket.length === 0 ? (
<Typography color="error" sx={{ my: 2 }}>
{t('basketEmpty')}
</Typography>
) : (
<List>
{basket.map((item) => (
<ListItem key={item.item.uuid}>
<ListItemText
primary={`${item.quantity}x ${item.item.name}`}
secondary={`Item ID: ${item.item.uuid}`}
/>
<div className="rightBound">
{`${(item.quantity * getDiscountedPrice(item.item)).toFixed(2)} €`}<br/>
{item.item.discount100 > 0 ? <a className='rightBound red'>{-item.item.discount100}%</a> : ""}
</div>
</ListItem>
))}
</List>
)
}
export default function Payment() {
const { t } = useTranslation();
const navigator = useNavigate();
const { basket, clearBasket } = useBasket();
const navigator = useNavigate();
const [activeStep, setActiveStep] = useState(0);
const [shippingDetails, setShippingDetails] = useState<ShippingDetails>({
firstName: '',
@@ -58,7 +83,6 @@ export default function Payment() {
// Simulate order placement and generate order number
const generatedOrderNumber = `ORD-${Math.floor(Math.random() * 1000000)}`;
setOrderNumber(generatedOrderNumber);
clearBasket(); // Clear the basket after placing the order
}
setActiveStep((prevStep) => prevStep + 1);
};
@@ -75,6 +99,7 @@ export default function Payment() {
}));
};
const handleClearBasket = () => {
console.log(" BASKET CLEARED Payment");
clearBasket();
};
@@ -98,27 +123,7 @@ export default function Payment() {
<Typography variant="h6" gutterBottom>
{t('reviewCart')}
</Typography>
{basket.length === 0 ? (
<Typography color="error" sx={{ my: 2 }}>
{t('basketEmpty')}
</Typography>
) : (
<List>
{basket.map((item) => (
<ListItem key={item.item.uuid}>
<ListItemText
primary={`${item.quantity}x ${item.item.name}`}
secondary={`Item ID: ${item.item.uuid}`}
/>
<div className="rightBound">
{`${(item.quantity * getDiscountedPrice(item.item)).toFixed(2)} €`}<br/>
{item.item.discount100 > 0 ? <a className='rightBound red'>{-item.item.discount100}%</a> : ""}
</div>
</ListItem>
))}
</List>
)}
{generateBasket(t, basket)}
<Divider sx={{ my: 2 }} />
<Button variant="outlined" color="error" onClick={handleClearBasket} disabled={basket.length === 0}>
{t('clearCart')}
@@ -237,16 +242,7 @@ export default function Payment() {
</Typography>
<Divider sx={{ my: 2 }} />
<Typography variant="h6">{t('orderedItems')}:</Typography>
<List>
{basket.map((item) => (
<ListItem key={item.item.uuid}>
<ListItemText
primary={`${item.item.name} (${item.item.price100 / 100} €)`}
secondary={`Item ID: ${item.item.uuid} \n Quantity: ${item.quantity} \n Price: ${(item.item.price100 * item.quantity) / 100} €`}
/>
</ListItem>
))}
</List>
{generateBasket(t, basket)}
</Box>
);
default:
@@ -282,6 +278,7 @@ export default function Payment() {
variant="contained"
color="primary"
onClick={() => {
handleClearBasket();
navigator('/');
}}
>