Skip to content
Snippets Groups Projects
Commit f01febd2 authored by Marc Taylor's avatar Marc Taylor
Browse files

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

parent edceeb7f
Branches orders
No related tags found
1 merge request!14Orders
......@@ -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;
}
......@@ -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 }}>
......
......@@ -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);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment