Untitled

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Button } from '@mui/material';
import '../Cart/Cart.css'; // Make sure to adjust the path if needed
import Navbar from '../Navbar/Navbar';
import { useNavigate } from 'react-router-dom';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useParams } from 'react-router-dom';
import { GetCartProductsByGmail, deletefromcart, postorder } from '../API_FILE/apis';

export default function OrderSelection() {
    const navigate = useNavigate();
    const { addressId } = useParams();

    const [products, setProducts] = useState([]);
    const storedEmail = sessionStorage.getItem('email');
    const [totalAmount, setTotalAmount] = useState(0);

    console.log(addressId);

    const fetchProducts = async () => {
        try {
            const response = await axios.get(GetCartProductsByGmail(storedEmail));
            setProducts(response.data);
            calculateTotal(response.data);
        } catch (error) {
            console.error('Error fetching products:', error);
        }
    };

    const calculateTotal = (products) => {
        let total = 0;
        products.forEach(product => {
            total += product.price * product.cartquantity;
        });
        setTotalAmount(total);
    };

    function generateUniqueKey(length) {
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
        var uniqueKey = "";
        for (var i = 0; i < length; i++) {
            uniqueKey += uuid.substring(i % 32, 1);
        }
        return uniqueKey;
    }

    const handlePlaceOrder = async () => {
        var unique_code = generateUniqueKey(5);

        for (let i = 0; i < products.length; i++) {
            const product = products[i];
            try {
                const response = await axios.post(postorder(storedEmail, product.productid, unique_code, addressId));
                if (response.status === 200) {
                    console.log(`Order placed successfully for product ID: ${product.productid}`);
                }
                axios.delete(deletefromcart(product.productid, storedEmail));
            } catch (error) {
                console.error(`Error placing order for product ID: ${product.productid}`, error);
            }
        }
        navigate('/OrderSuccess');
    };

    useEffect(() => {
        fetchProducts();
    }, [storedEmail]);

    return (
        <>
            <Navbar />
            <div className="cart-page">
                <div className="cart-container">
                    <div className="cart-list">
                        {products.map(product => (
                            <div key={product.productid} className="cart-card">
                                <div className="product-details">
                                    <img src={product.productimage} alt={product.Name} />
                                    <div className="product-info">
                                        <h3>{product.name}</h3>
                                        <p>INR . {product.price} Rupees</p>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className="cart">
                    <div className='total-amount'>Order Amount: INR {totalAmount}</div>
                    <div className='choose-address'>
                        <Button onClick={handlePlaceOrder}>Place Order</Button>
                    </div>
                </div>
            </div>
        </>
    );
}








/* OrderSelection.css */

.cart-page {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.cart-container {
    flex: 1;
    margin-right: 20px;
}

.cart-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.cart-card {
    flex-basis: calc(50% - 10px); /* Adjust based on your layout */
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.cart-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.cart-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
}

.cart-card p {
    margin: 0;
    font-size: 16px;
    color: #666;
}

.cart {
    flex: 0 0 300px; /* Adjust based on your layout */
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.total-amount {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.choose-address {
    margin-top: 20px;
    text-align: center;
}

.choose-address button {
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.choose-address button:hover {
    background-color: #0056b3;
}