-
- {results.length > 0 ? (
- results.slice(0, 3).map(product => (
-
-
+ {results.length > 0 ? (
+ results.slice(0, 3).map(product => (
+
-
- {cart.map((item) => (
-
-
- Shopping Cart
-
+ return (
+
+ );
}
export default Cart;
diff --git a/src/pages/Checkout.jsx b/src/pages/Checkout.jsx
index c8b3df0..d7ccf4d 100644
--- a/src/pages/Checkout.jsx
+++ b/src/pages/Checkout.jsx
@@ -1,71 +1,70 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import axios from "axios";
+import axios from 'axios';
import CheckoutForm from '../components/CheckoutForm';
import { Typography, CircularProgress } from '@mui/material';
function Checkout({ cartItems }) {
- const navigate = useNavigate();
- const [orderCreated, setOrderCreated] = useState(false);
- const [errorMessage, setErrorMessage] = useState('');
- const [loading, setLoading] = useState(false);
+ const navigate = useNavigate();
+ const [orderCreated, setOrderCreated] = useState(false);
+ const [errorMessage, setErrorMessage] = useState('');
+ const [loading, setLoading] = useState(false);
- const handleSubmit = async (formData) => {
- setLoading(true);
+ const handleSubmit = async formData => {
+ setLoading(true);
- try {
- // Simulate API call to create an order - This is a demo website so we do not have capacity to handle a real order yet
- // const response = await axios.post('http://localhost:5000/api/checkout/create-order', {
- // items: cartItems,
- // name: formData.name,
- // email: formData.email,
- // shippingAddress: formData.shippingAddress,
- // cardNumber: formData.cardNumber,
- // cardName: formData.cardName,
- // expiry: formData.expiry,
- // cvc: formData.cvc,
- // });
+ try {
+ // Simulate API call to create an order - This is a demo website so we do not have capacity to handle a real order yet
+ // const response = await axios.post('http://localhost:5000/api/checkout/create-order', {
+ // items: cartItems,
+ // name: formData.name,
+ // email: formData.email,
+ // shippingAddress: formData.shippingAddress,
+ // cardNumber: formData.cardNumber,
+ // cardName: formData.cardName,
+ // expiry: formData.expiry,
+ // cvc: formData.cvc,
+ // });
- // Simulating success
- setTimeout(() => {
- setLoading(false);
- setOrderCreated(true);
- navigate('/order-success');
- }, 1);
+ // Simulating success
+ setTimeout(() => {
+ setLoading(false);
+ setOrderCreated(true);
+ navigate('/order-success');
+ }, 1);
- // Example of handling real response:
- // if (response.status === 201) {
- // setLoading(false);
- // setOrderCreated(true);
- // navigate('/order-success');
- // }
- // else {
- // setLoading(false);
- // setErrorMessage(response.data.error || 'An error occurred');
- // }
- }
- catch (error) {
- console.error('Error creating order:', error);
- setLoading(false);
- setErrorMessage('An error occurred');
- }
- };
+ // Example of handling real response:
+ // if (response.status === 201) {
+ // setLoading(false);
+ // setOrderCreated(true);
+ // navigate('/order-success');
+ // }
+ // else {
+ // setLoading(false);
+ // setErrorMessage(response.data.error || 'An error occurred');
+ // }
+ } catch (error) {
+ console.error('Error creating order:', error);
+ setLoading(false);
+ setErrorMessage('An error occurred');
+ }
+ };
- return (
-
+
+ Shopping Cart
+
- {cart.length === 0 ? (
- Your cart is empty.
- ) : (
- <>
- Your cart is empty.
+ ) : (
+ <>
+
- Total: ${calculateTotal().toFixed(2)}
-
+
+ Total: ${calculateTotal().toFixed(2)}
+
-
-
- )}
-
- );
+
+
+ )}
+ -
- {cart.map(item => (
-
-
+ {cart.map(item => (
+
- {orderCreated ? (
-
- Thank you for your order! You will be redirected shortly.
-
- ) : (
- <>
- {loading && {errorMessage} }
-
- );
+ return (
+
+ {orderCreated ? (
+
+ Thank you for your order! You will be redirected shortly.
+
+ ) : (
+ <>
+ {loading && {errorMessage} }
+
+ );
}
export default Checkout;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index b1fc32c..95b1034 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,143 +1,135 @@
import * as React from 'react';
-import {
- Typography,
- Grid,
- Box,
- Container,
- Button,
- CircularProgress,
- Alert,
- Paper,
- styled,
-} from '@mui/material';
+import { Typography, Grid, Box, Container, Button, CircularProgress, Alert, Paper, styled } from '@mui/material';
import Carousel from 'react-material-ui-carousel';
import ProductCard from '../components/ProductCard';
const StyledCarousel = styled(Carousel)({
- '& .Carousel-indicators-container': {
- bottom: '20px',
- '& button': {
- backgroundColor: 'white',
- opacity: 0.6,
- '&:hover': {
- opacity: 1,
- },
- '&.selected': {
- opacity: 1,
- },
- },
+ '& .Carousel-indicators-container': {
+ bottom: '20px',
+ '& button': {
+ backgroundColor: 'white',
+ opacity: 0.6,
+ '&:hover': {
+ opacity: 1,
+ },
+ '&.selected': {
+ opacity: 1,
+ },
},
+ },
});
// Replace these links with any image you'd like!
function Home({ products, addToCart, error, loading }) {
- const bannerImages = [
- {
- url: 'https://thumbs.dreamstime.com/b/electronics-sale-banner-devices-online-shopping-delivery-basket-273419752.jpg',
- title: 'Summer Sale - Up to 50% Off',
- description: 'Shop now for the best deals on summer essentials!'
- },
- {
- url: 'https://magesolution.com/wp-content/uploads/2022/07/1_7u7eYPpkr5baaBOzYcdNHw.jpeg',
- title: 'New Tech Gadgets',
- description: 'Explore the latest in tech and gadgets.'
- },
- {
- url: 'https://images.pexels.com/photos/3768005/pexels-photo-3768005.jpeg?cs=srgb&dl=pexels-willoworld-3768005.jpg&fm=jpg',
- title: 'Trending Fashion',
- description: 'Discover the newest fashion trends for this season.'
- },
- ];
-
- const featuredProducts = products.slice(0, 3); // Display the first 3 products as featured
-
- return (
-