Untitled
unknown
plain_text
a year ago
5.2 kB
4
Indexable
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; }
Editor is loading...
Leave a Comment