front-end working and creating orders and order items when checking out

theme-costume-app/src/components/Cart.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useCart } from './CartProvider';
 import { List, ListItem, ListItemText, IconButton, Typography, Button, Dialog, DialogContent, DialogTitle, TextField, DialogActions, Box } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { orderItem, createOrder } from '../utils/api';
 
 const Cart = () => {
   const { cartItems, removeFromCart } = useCart();
@@ -30,8 +31,14 @@ const Cart = () => {
     setOpenCheckout(false);
   };
 
-  const handleCheckout = () => {
+  const handleCheckout = async () => {
     // Handle the checkout process here
+    const totalPrice = getTotalPrice(cartItems);
+    const orderID = await createOrder(totalPrice);
+    for (const item of cartItems){
+      const type = item.type === 'hyr' ? 'rent': 'buy';
+      await orderItem(orderID, item.id, type, item.days)
+    }
     alert('Checkout successful!');
     handleCheckoutClose();
   };
@@ -53,7 +60,13 @@ const Cart = () => {
               secondary={
                 <>
                   <img src={item.imageUrl} alt="Product" style={{ maxHeight: '50px' }} />
-                  <Typography variant="body2">Typ: {item.type}</Typography>
+                  <Typography variant="body2">
+                    {
+                    item.type === 'hyr' ? 
+                    `Hyrs i ${item.days} ${item.days === '1' ? 'dag': 'dagar'}`: 
+                    'Köpes'
+                    }
+                  </Typography>
                 </>
               }
             />
@@ -68,7 +81,9 @@ const Cart = () => {
           </Button>
         </Box>
       )}
-
+      <Typography variant='h4' align="center" marginTop={2}>
+        Totalpris: {getTotalPrice(cartItems)} kr
+      </Typography>
       <Dialog open={openCheckout} onClose={handleCheckoutClose}>
         <DialogTitle>Checkout</DialogTitle>
         <DialogContent>
@@ -135,3 +150,16 @@ const Cart = () => {
 
 export default Cart;
 
+/* HelpFunctions for cart*/
+const getTotalPrice = (allItems) => {
+  let totalPrice = 0;
+    for (const item of allItems) {
+      console.log(item, totalPrice)
+      if (item.type === 'hyr'){
+        totalPrice += parseFloat(item.price) * item.days;
+      } else {
+        totalPrice += parseFloat(item.price)
+      }
+    }
+  return totalPrice;
+}

theme-costume-app/src/components/Product.js

@@ -2,6 +2,7 @@
 
 import React, {useState} from 'react';
 import { Card, CardContent, CardMedia, Typography, Dialog, DialogContent, Button } from '@mui/material';
+import TextField from '@mui/material/TextField'
 import { styled } from '@mui/system';
 import { useCart } from './CartProvider'
 
@@ -16,9 +17,12 @@ const AnimatedCard = styled(Card)({
 const Product = ({ id, imageUrl, price, rentPrice, name, size }) => {
   const [open, setOpen] = useState(false);
   const {addToCart} = useCart();
+  const [showRentField, setShowRentField] = useState(false);
+  const [rentDays, setRentDays] = useState('');
 
   const handleOpen = () => {
     setOpen(true);
+    setShowRentField(false)
   };
 
   const handleClose = () => {
@@ -31,15 +35,20 @@ const Product = ({ id, imageUrl, price, rentPrice, name, size }) => {
     handleClose(); // Close the dialog after adding to cart (optional)
   };
 
+  const handleRentClick = () => {
+    setShowRentField(true);
+  }
+
   const handleRent = () => {
     // Add rent logic here
-    addToCart({ id, imageUrl, price: rentPrice, type: 'hyr' });
+    addToCart({ id, imageUrl, price: rentPrice, type: 'hyr', days: rentDays});
+    setShowRentField(false)
     handleClose(); // Close the dialog after adding to cart
   };
 
   const handleBuy = () => {
     // Add buy logic here
-    addToCart({ id, imageUrl, price, type: 'köp' });
+    addToCart({ id, imageUrl, price, type: 'köp', days: 0});
     handleClose(); // Close the dialog after adding to cart
   };
 
@@ -74,7 +83,16 @@ const Product = ({ id, imageUrl, price, rentPrice, name, size }) => {
         <DialogContent>
           <img src={imageUrl} alt="Product Image" style={{ maxWidth: '100%' }} />
         </DialogContent>
-        <Button variant="contained" color="primary" onClick={handleRent}>
+        {showRentField && (
+            <TextField
+              label="Number of Days"
+              value={rentDays}
+              onChange={(e) => setRentDays(e.target.value)}
+              fullWidth
+              style={{ marginTop: 16 }}
+            />
+          )}
+        <Button variant="contained" color="secondary" onClick={showRentField ? handleRent : handleRentClick} style={{ marginTop: 16 }}>
           Hyr
         </Button>
         <Button variant="contained" color="secondary" onClick={handleBuy} style={{ marginTop: 16 }}>

theme-costume-app/src/utils/api.js

@@ -119,15 +119,12 @@ export const createOrder = async (totalPrice) => {
         'Authorization': `Bearer ${TOKEN}`
       }
     });
-    console.log('Result: ', result);
-    return result;
+    return result.data.order.id;
   } catch (e) {
     console.error('Error: ', e)
   }
 }
 
-// createOrder(170);
-
 export const orderItem = async (orderID, productID, orderType, days=0) => {
   try {
     const result = await axios.post(`${API_BASE_URL}/themeApp/orderItem/`, {
@@ -143,7 +140,7 @@ export const orderItem = async (orderID, productID, orderType, days=0) => {
     }
     );
     console.log('orderItem result:', result);
-    return result
+    return result.status
   } catch (e) {
     console.error('Error: ', e);
   }