Fix basket on checkout

01-frontend/src/helper/BasketProvider.tsx

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

01-frontend/src/pages/Payment.tsx

@@ -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 ? (
+                        {generateBasket(t, basket)}
-                            <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>
-                        )}
                         <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>
+                        {generateBasket(t, basket)}
-                            {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>
                     </Box>
                 );
             default:
@@ -282,6 +278,7 @@ export default function Payment() {
                                 variant="contained"
                                 color="primary"
                                 onClick={() => {
+                                    handleClearBasket();
                                     navigator('/');
                                 }}
                             >