Bismillah add good basket list

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

@@ -94,5 +94,6 @@
   "thanksForRating": "Vielen Dank für die Bewertung!",
   "telephone": "Telefon",
   "basketEmpty": "Der Warenkorb ist leer.",
-  "login": "Anmelden"
+  "login": "Anmelden",
+  "total": "Insgesamt"
 }

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

@@ -94,5 +94,6 @@
   "thanksForRating": "Thank you for rating!",
   "telephone": "Telephone",
   "basketEmpty": "The shopping cart is empty.",
-  "login": "Login"
+  "login": "Login",
+  "total": "Total"
 }

01-frontend/src/pages/Payment.tsx

@@ -18,6 +18,7 @@ import React, { useState } from 'react';
 import { useTranslation } from "react-i18next";
 import { useNavigate } from 'react-router-dom';
 import { useBasket } from '../helper/BasketProvider';
+import Item from '../components/Item';
 
 type ShippingDetails = {
     firstName: string;
@@ -29,6 +30,10 @@ type ShippingDetails = {
     country: string;
 };
 
+function getDiscountedPrice(item: Item): number {
+    return (item.price100 / 100 * (100-item.discount100)/100);
+}
+
 
 export default function Payment() {
 
@@ -102,9 +107,14 @@ export default function Payment() {
                                 {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} €`}
+                                            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>
@@ -113,6 +123,11 @@ export default function Payment() {
                         <Button variant="outlined" color="error" onClick={handleClearBasket} disabled={basket.length === 0}>
                             {t('clearCart')}
                         </Button>
+                        {basket.length === 0 ? "" :
+                        <div className='rightBound'>
+                            {t('total') + ": " + basket.map((item) => item.quantity * getDiscountedPrice(item.item))
+                            .reduce((prev: number, cur: number) => prev + cur, 0).toFixed(2) + ` €`}
+                        </div>}
                     </Box>
                 );
             case 1:

01-frontend/src/pages/pages.css

@@ -154,3 +154,10 @@
     background-color: var(--background-color);
     color: var(--text-color);
 }
+
+.rightBound {
+    float: right;
+}
+.red {
+    color: #F00;
+}